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

朱二華

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

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

朱二華

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

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

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

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

1 應(yīng)用需求

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

2 Vue.js介紹

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

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

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

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

3 應(yīng)用過程

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

圖2 Vue的安裝和使用流程

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

表1 主要js組件表

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

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

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

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

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

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

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

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

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

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

4 結(jié)束語

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

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

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

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

［4］麥冬，陳濤，梁宗灣.輕量級響應(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é)院校級重點項目“高校教師信息管理系統(tǒng)的設(shè)計和實現(xiàn)”（編號：qnsy201516）

〔編輯：張思楠〕