基于Vue.js的Web前端應(yīng)用研究＊

朱二華

（黔南民族師范學(xué)院，貴州 黔南布依族苗族自治州 558000）

基于Vue.js的Web前端應(yīng)用研究＊

朱二華

（黔南民族師范學(xué)院，貴州 黔南布依族苗族自治州 558000）

隨著用戶(hù)對(duì)Web前端的使用體驗(yàn)提升，導(dǎo)致Web前端開(kāi)發(fā)的工作量增大，代碼量增加，開(kāi)發(fā)難度增大。為了提高開(kāi)發(fā)效率和代碼復(fù)用率，越來(lái)越多的網(wǎng)頁(yè)開(kāi)發(fā)框架開(kāi)始流行。利用基于MVVM模式的輕量級(jí)響應(yīng)式框架Vue.js開(kāi)發(fā)，可以有效簡(jiǎn)化Web前端開(kāi)發(fā)流程，降低開(kāi)發(fā)難度，提高開(kāi)發(fā)效率，實(shí)現(xiàn)了Web系統(tǒng)前、后端開(kāi)發(fā)完全分離，提高了系統(tǒng)的靈活性和可擴(kuò)展性。介紹了Vue的基礎(chǔ)理論，并展示了利用Vue開(kāi)發(fā)系統(tǒng)的過(guò)程，還介紹了其他相關(guān)js組件，以供Web課程教學(xué)或相關(guān)開(kāi)發(fā)人員參考。

Vue.js；Web前端；js組件；Vue框架

隨著互聯(lián)網(wǎng)的迅猛發(fā)展，用戶(hù)對(duì)Web前端的使用體驗(yàn)、交互操作流程、外觀有了更高的要求。特別是Web系統(tǒng)中越來(lái)越多的數(shù)據(jù)處理和業(yè)務(wù)邏輯開(kāi)始偏向前端，導(dǎo)致Web前端工作量擴(kuò)大，代碼量增加。如果仍然采用傳統(tǒng)的方式開(kāi)發(fā)設(shè)計(jì)Web前端，會(huì)導(dǎo)致前期開(kāi)發(fā)度和后期維護(hù)難度增大，可擴(kuò)展性變差。為了提高開(kāi)發(fā)效率和代碼復(fù)用率，越來(lái)越多的網(wǎng)頁(yè)開(kāi)發(fā)框架開(kāi)始流行。于是先后提出了MVC、MVVM模式，方便了構(gòu)建基于事件的Web前端開(kāi)發(fā)平臺(tái)。本文主要介紹了基于MVVM模式的輕量級(jí)響應(yīng)式框架Vue.js的應(yīng)用和研究，利用Vue框架實(shí)現(xiàn)了簡(jiǎn)化Web前端開(kāi)發(fā)流程。

1 應(yīng)用需求

我校教師工作處為了更好地服務(wù)和管理全校教師，借鑒全國(guó)教師管理系統(tǒng)，結(jié)合我校實(shí)際工作需求，開(kāi)發(fā)一套Web教師管理系統(tǒng)。該系統(tǒng)的主要要求有以下3個(gè)：①界面友好，美觀大方。②系統(tǒng)能實(shí)現(xiàn)對(duì)教師的基本信息、教學(xué)、科研、學(xué)習(xí)經(jīng)歷、工作經(jīng)歷、培訓(xùn)、訪學(xué)、獲獎(jiǎng)等信息的統(tǒng)計(jì)和管理。③系統(tǒng)運(yùn)行安全、穩(wěn)定、速度快、便于管理。因?yàn)橄到y(tǒng)處于急用狀態(tài)，開(kāi)發(fā)、實(shí)施時(shí)間短，所以，決定采用前、后端同時(shí)開(kāi)發(fā)和調(diào)試，利用JSON API的方式，實(shí)現(xiàn)Web的前后分離，邏輯處理部分轉(zhuǎn)移到前端來(lái)實(shí)現(xiàn)，開(kāi)發(fā)人員可以根據(jù)用戶(hù)的需求對(duì)前端進(jìn)行快速迭代更新，具有高度的靈活性和可擴(kuò)展性。

2 Vue.js介紹

為了提高開(kāi)發(fā)效率，對(duì)Web前端基于框架進(jìn)行了開(kāi)發(fā)。對(duì)比目前比較流行的React、Angular、Ploymer框架，最終選擇了Vue.js（以下簡(jiǎn)寫(xiě)為Vue）框架。與其他重量級(jí)框架不同的是，Vue是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架，采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)方式，是更加靈活、開(kāi)放的解決方案，架構(gòu)更加簡(jiǎn)單，適合開(kāi)發(fā)人員快速掌握其全部特性并投入使用，還便于與第三方庫(kù)或既有項(xiàng)目整合。結(jié)合Vue生態(tài)系統(tǒng)支持庫(kù)Vuex、Vue-router，能夠?yàn)閺?fù)雜的應(yīng)用程序提供驅(qū)動(dòng)。Vue響應(yīng)式原理如圖1所示。

圖1 Vue響應(yīng)式原理

Vue的核心是響應(yīng)式原理，把一個(gè)普通JavaScript對(duì)象傳給Vue實(shí)例的data選項(xiàng)，同時(shí)每個(gè)Vue實(shí)例都有相應(yīng)的watcher實(shí)例對(duì)象。如果data的屬性發(fā)生變化，會(huì)通知watcher重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。Vue異步執(zhí)行DOM更新。只要觀察到數(shù)據(jù)變化，Vue將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè)watcher被多次觸發(fā)，只會(huì)一次推入到隊(duì)列中，在緩沖去除了重復(fù)數(shù)據(jù)，避免了不必要的計(jì)算和DOM操作。Vue的響應(yīng)為雙向綁定數(shù)據(jù)，實(shí)時(shí)反映數(shù)據(jù)的真實(shí)變化，并映射到數(shù)據(jù)源上，避免了前端頁(yè)面開(kāi)發(fā)中DOM選擇器繁雜的操作，簡(jiǎn)化了Web前端開(kāi)發(fā)流程，降低了開(kāi)發(fā)難度，提高了前端開(kāi)發(fā)效率，縮短了開(kāi)發(fā)成本和周期。

Vue具有以下特點(diǎn)：①靈活開(kāi)放；②易學(xué)易用，有更多成熟工具的支持；③性能好，易優(yōu)化；④有功能強(qiáng)大的路由機(jī)制；⑤有多種方式實(shí)現(xiàn)過(guò)渡效果。

3 應(yīng)用過(guò)程

利用Vue官網(wǎng)提供的vue-cli工具，幾分鐘就可創(chuàng)建并啟動(dòng)帶熱重載、保存時(shí)的靜態(tài)檢查、可用于生產(chǎn)開(kāi)發(fā)環(huán)境的構(gòu)建配置項(xiàng)目。Vue的安裝和使用流程如圖2所示。

圖2 Vue的安裝和使用流程

在本系統(tǒng)的開(kāi)發(fā)中還使用了其他js組件，如表1所示。

表1 主要js組件表

由于項(xiàng)目使用了較多的js組件，可利用Webpack組件，根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源；可以將多種靜態(tài)資源js、css、less轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求，同時(shí)，方便了Web的開(kāi)發(fā)。該系統(tǒng)前、后端開(kāi)發(fā)同時(shí)進(jìn)行，我們利用mockjs生成隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景，提升了Web測(cè)試的真實(shí)性，實(shí)現(xiàn)了前、后端分離，實(shí)現(xiàn)了Web前后端獨(dú)立開(kāi)發(fā)。利用mockjs生成的隨機(jī)數(shù)據(jù)如圖3所示（因篇幅所限，僅列出部分代碼，下同）。

圖3 利用mockjs生成的隨機(jī)數(shù)據(jù)

將產(chǎn)生的數(shù)據(jù)用于Get請(qǐng)求的流程如圖4所示。

axios是一個(gè)基于promise的HTTP庫(kù)。axios具有從瀏覽器中創(chuàng)建XMLHttpRequest、從node.js發(fā)出http請(qǐng)求、支持Promise API、攔截請(qǐng)求和響應(yīng)、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)、取消請(qǐng)求、自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)、客戶(hù)端支持防止CSRF/XSRF的特點(diǎn)。利用axios請(qǐng)求和響應(yīng)JSON格式的數(shù)據(jù)進(jìn)行后臺(tái)的數(shù)據(jù)交換。利用axios發(fā)送Get請(qǐng)求獲得的數(shù)據(jù)如圖5所示。

通過(guò)axios獲得的mockjs產(chǎn)生的隨機(jī)數(shù)據(jù)如圖6所示。

圖4 將產(chǎn)生的數(shù)據(jù)用于Get請(qǐng)求的流程

圖6 通過(guò)axios獲得的mockjs產(chǎn)生的隨機(jī)數(shù)據(jù)

圖7 利用element-ui設(shè)計(jì)的數(shù)據(jù)表格

element-ui是“餓了么”前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0的桌面端UI框架，提供了配套的設(shè)計(jì)資源，可以幫助網(wǎng)站快速成型，具有元素與結(jié)構(gòu)需保持一致、良好的用戶(hù)反饋和效率、用戶(hù)體驗(yàn)良好的特點(diǎn)。利用element-ui作為用戶(hù)的UI，可保持前端風(fēng)格簡(jiǎn)潔一致，增強(qiáng)用戶(hù)的使用體驗(yàn)。利用element-ui設(shè)計(jì)的數(shù)據(jù)表格如圖7所示。利用element-ui設(shè)計(jì)的用戶(hù)界面截圖如圖8所示。

圖8 利用element-ui設(shè)計(jì)的用戶(hù)界面截圖（信息為模擬數(shù)據(jù)）

4 結(jié)束語(yǔ)

利用Vue框架開(kāi)發(fā)了教師信息Web系統(tǒng)前端，簡(jiǎn)化了前端開(kāi)發(fā)流程、減低開(kāi)發(fā)難度、提高開(kāi)發(fā)效率、實(shí)現(xiàn)了Web系統(tǒng)前后端開(kāi)發(fā)完全分離，增強(qiáng)了代碼重構(gòu)及可維護(hù)性。雖然學(xué)習(xí)Vue框架和其他相關(guān)js組件需要一定的成本，但是對(duì)于開(kāi)發(fā)有一些功能和復(fù)雜度Web前端應(yīng)用來(lái)說(shuō)，使用Vue框架反而在總體上更節(jié)約成本，建議通過(guò)使用Vue框架來(lái)提高開(kāi)發(fā)效率和效果。

［1］易劍波.基于MVVM模式的WEB前端框架的研究［J］.信息與電腦（理論版），2016（19）.

［2］江慶，葉浩榮.Vue+Webpack框架在銀行App前端開(kāi)發(fā)的應(yīng)用［J］.金融科技時(shí)代，2016（11）.

［3］孫娉娉，李新，史廣軍.基于前后端分離的內(nèi)容管理系統(tǒng)［J］.科研信息化技術(shù)與應(yīng)用，2016，7（04）.

［4］麥冬，陳濤，梁宗灣.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析［J］.信息與電腦（理論版），2017（07）.

TP393.09

A

10.15913/j.cnki.kjycx.2017.20.119

2095－6835（2017）20－0119－03

黔南民族師范學(xué)院校級(jí)重點(diǎn)項(xiàng)目“高校教師信息管理系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)”（編號(hào)：qnsy201516）

〔編輯：張思楠〕