基于Vue.js的Web前端應用研究＊

朱二華

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

基于Vue.js的Web前端應用研究＊

朱二華

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

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

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

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

1 應用需求

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

2 Vue.js介紹

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

圖1 Vue響應式原理

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

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

3 應用過程

利用Vue官網提供的vue-cli工具，幾分鐘就可創建并啟動帶熱重載、保存時的靜態檢查、可用于生產開發環境的構建配置項目。Vue的安裝和使用流程如圖2所示。

圖2 Vue的安裝和使用流程

在本系統的開發中還使用了其他js組件，如表1所示。

表1 主要js組件表

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

圖3 利用mockjs生成的隨機數據

將產生的數據用于Get請求的流程如圖4所示。

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

通過axios獲得的mockjs產生的隨機數據如圖6所示。

圖4 將產生的數據用于Get請求的流程

圖6 通過axios獲得的mockjs產生的隨機數據

圖7 利用element-ui設計的數據表格

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

圖8 利用element-ui設計的用戶界面截圖（信息為模擬數據）

4 結束語

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

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

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

［3］孫娉娉，李新，史廣軍.基于前后端分離的內容管理系統［J］.科研信息化技術與應用，2016，7（04）.

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

TP393.09

A

10.15913/j.cnki.kjycx.2017.20.119

2095－6835（2017）20－0119－03

黔南民族師范學院校級重點項目“高校教師信息管理系統的設計和實現”（編號：qnsy201516）

〔編輯：張思楠〕