Vue.js在構(gòu)建系統(tǒng)前端SPA的應(yīng)用

沈劍翹 陳澤椿

摘? 要：Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。在分析Vue.js基本特點(diǎn)的基礎(chǔ)上，以服裝材料送檢管理系統(tǒng)的前端設(shè)計為背景，應(yīng)用Vue.js開發(fā)系統(tǒng)前端SPA，由Vue.js官方提供的腳手架vue-cli構(gòu)建，在生成的項(xiàng)目模板基礎(chǔ)上根據(jù)實(shí)際需求對項(xiàng)目目錄進(jìn)行修改，最后構(gòu)建的SPA應(yīng)用結(jié)構(gòu)。

關(guān)鍵詞：Vue.js;SPA漸進(jìn)式框架;應(yīng)用

中圖分類號：TP393? ? ? ? ?文獻(xiàn)標(biāo)志碼：A? ? ? ? ?文章編號：2095-2945（2020）03-0181-02

Abstract： Vue.js is a progressive framework for building user interfaces. Based on the analysis of the basic characteristics of Vue.js， taking the front-end design of the clothing material inspection management system as the background， the front-end SPA， of the Vue.js development system is constructed by scaffolding vue-cli provided by Vue.js officially. Based on the generated project template， the project directory is modified according to the actual requirements， and finally the SPA application structure is constructed.

Keywords： Vue.js; SPA progressive framework; application

1 Vue.js概述

Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，具有條理簡潔清晰樣例豐富直觀的特點(diǎn)，對各個水平的國內(nèi)開發(fā)者都相當(dāng)友好。與其它大型框架不同的是，Vue被設(shè)計為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，Vue.js的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js沒有脫離原有的HTML、CSS、JavaScript的基礎(chǔ)開發(fā)習(xí)慣，并且便于與第三方庫或既有項(xiàng)目整合。這個應(yīng)用結(jié)構(gòu)下構(gòu)建的SPA應(yīng)用具有的特點(diǎn)如下。

（1）渲染性能高效。為了提高渲染能力，Vue.js選用的是Virtual DOM（虛擬DOM）體系，摒棄和淘汰了消耗比較大的直接操作DOM模式。（2）組件式應(yīng)用體系。Vue.js為應(yīng)用開發(fā)提供了模塊組件式的開發(fā)思想。允許開發(fā)者將整個應(yīng)用拆分成小型的、獨(dú)立的、復(fù)用性高的組件模塊。每個組件都可以作為可配置選項(xiàng)的Vue實(shí)例。（3）數(shù)據(jù)綁定。Vue.js將底層數(shù)據(jù)和視圖一一對應(yīng)，進(jìn)入頁面的同時將掛載的DOM元素實(shí)例化成Vue實(shí)例。數(shù)據(jù)與文檔的DOM結(jié)構(gòu)綁定在一起，在數(shù)據(jù)和結(jié)構(gòu)UI之間建立響應(yīng)式的映射關(guān)系，實(shí)現(xiàn)雙向綁定，視圖數(shù)據(jù)發(fā)生變化時，內(nèi)部數(shù)據(jù)存儲立即發(fā)生相應(yīng)的變化。

2 系統(tǒng)功能背景

某服飾有限公司服裝材料送檢管理系統(tǒng)需要實(shí)現(xiàn)的功能主要有五大功能模塊，分別是基本信息管理模塊、系統(tǒng)管理模塊、申請管理模塊、報告管理模塊、統(tǒng)計報表管理模塊。鑒于篇幅關(guān)系，本文僅以系統(tǒng)中的【統(tǒng)計圖表】功能模塊的實(shí)現(xiàn)為例介紹相應(yīng)的實(shí)現(xiàn)細(xì)節(jié)。

統(tǒng)計報表管理模塊主要對實(shí)驗(yàn)室送檢情況的統(tǒng)計報表、檢測報告的數(shù)據(jù)分析、生成送檢管理系統(tǒng)的各項(xiàng)統(tǒng)計報表及可視化圖表、統(tǒng)計報表的導(dǎo)出還包括報告格式打打印導(dǎo)出功能。

3 系統(tǒng)開發(fā)技術(shù)方案

3.1 開發(fā)模式

前后端分離已成為互聯(lián)網(wǎng)項(xiàng)目開發(fā)的業(yè)界標(biāo)準(zhǔn)開發(fā)方式。前后端分離可以有效的進(jìn)行解耦，并且會為以后的大型分布式架構(gòu)、彈性計算架構(gòu)、微服務(wù)架構(gòu)、多端化服務(wù)（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等等）打下堅實(shí)的基礎(chǔ)。前后端分離的核心思想是前端HTML頁面通過Ajax調(diào)用后端的API接口并使用Json數(shù)據(jù)進(jìn)行交互，實(shí)現(xiàn)前后端的徹底解耦，從而提高開發(fā)效率。

3.2 開發(fā)結(jié)構(gòu)

系統(tǒng)前端使用的是采用了MVVC架構(gòu)的漸進(jìn)式JavaScript框架Vue.js構(gòu)建一個單頁面WEB應(yīng)用（single page web application，SPA），用SQL Server 2008數(shù)據(jù)庫來管理數(shù)據(jù)。

系統(tǒng)的結(jié)構(gòu)是，前端SPA通過AJAX調(diào)用請求后端應(yīng)用WEB API的接口，后端應(yīng)用去訪問數(shù)據(jù)庫，與數(shù)據(jù)庫做交互獲取數(shù)據(jù)，再將獲取到的數(shù)據(jù)以Json的數(shù)據(jù)格式返回給前端SPA，再由前端SPA去處理得到的數(shù)據(jù)以友好的頁面展示給用戶。

在接口交互的設(shè)計上，將WEB API與數(shù)據(jù)庫交互時執(zhí)行的SQL腳本獨(dú)立以.sql文件存放。前端SPA與WEB API交互時，只需要對好需要執(zhí)行的腳本命令.sql文件、返回結(jié)果數(shù)據(jù)格式。然后WEB API只需要用文件流讀取對應(yīng)的腳本命令.sql文件讀取出SQL腳本，通過執(zhí)行讀取出來的SQL腳本去與數(shù)據(jù)庫交互。將SQL腳本獨(dú)立成文件的設(shè)計使得WEB API的開發(fā)變得更加簡單，接口更加簡化，不用在接口方法中維護(hù)SQL腳本。這樣的設(shè)計也更方便開發(fā)和維護(hù)，當(dāng)新的需求出現(xiàn)或者有需求變更時，只需要去編寫或修改SQL腳本，達(dá)到一次開發(fā)多次使用的效果，剩下的就是執(zhí)行的SQL腳本的編寫，還有前端SPA的編寫。系統(tǒng)的架構(gòu)如圖1所示。

圖1 系統(tǒng)的架構(gòu)圖

在這個開發(fā)結(jié)構(gòu)上可以實(shí)現(xiàn)系統(tǒng)的以下幾點(diǎn)優(yōu)勢。

（1）徹底解耦，高效開發(fā)。前后端可以獨(dú)立調(diào)試代碼。在開發(fā)過程中前后端代碼不混雜，各自可以進(jìn)行獨(dú)立的調(diào)試，可以提高開發(fā)效率。（2）責(zé)任明確，容易維護(hù)。當(dāng)發(fā)現(xiàn)bug時，可以快速定位問題，提高解決問題的效率;當(dāng)需求發(fā)生變更時，只要接口、參數(shù)不變，就不需要兩端都修改代碼，易于維護(hù)。（3）減少后端服務(wù)器的并發(fā)/負(fù)載壓力。一些前端可以做的邏輯可以放到前端進(jìn)行處理，放在前端處理使用的是客戶端的計算資源，可以減少后端服務(wù)器帶寬、內(nèi)存和CPU等的計算資源，降低后端服務(wù)器的負(fù)載。

3.3 Vue.js的應(yīng)用

本文的前端SPA應(yīng)用采用的是Vue.js，通過npm包管理工具對項(xiàng)目的依賴項(xiàng)進(jìn)行管理。項(xiàng)目由Vue.js官方提供的腳手架vue-cli構(gòu)建，在生成的項(xiàng)目模板基礎(chǔ)上根據(jù)實(shí)際需求對項(xiàng)目目錄進(jìn)行修改，最后構(gòu)建的SPA應(yīng)用結(jié)構(gòu)如圖2所示。其中主要文件的說明如下。

（1）package.json文件是項(xiàng)目及工具的依賴配置文件。（2）App.vue文件是應(yīng)用的頁面入口文件。（3）main.js文件是應(yīng)用程序入口文件加載各種公共組件。（4）index.html文件是入口html文件。（5）api.js文件是對API接口定義和封裝，使用的是Axios技術(shù)進(jìn)行封裝。（6）components文件夾主要存放應(yīng)用程序的vue模板組件。（7）build文件是webpack配置文件。

4 Vue.js在系統(tǒng)中【統(tǒng)計圖表】的應(yīng)用

本文所闡述系統(tǒng)通過對送檢申請信息以及送檢報告信息的收集，將信息進(jìn)行統(tǒng)計整合產(chǎn)生一系列的圖表達(dá)到數(shù)據(jù)可視化的效果，從而更好的幫助企業(yè)做決策。其中主要的圖形報表有供應(yīng)商檢測項(xiàng)目不合格率散點(diǎn)圖、送檢員送檢供應(yīng)商材料次數(shù)條形圖、送檢申請狀態(tài)分布圖等等。因?yàn)橄到y(tǒng)的設(shè)計，使得要需求擴(kuò)展報表變得十分方便，如果還想要繼續(xù)拓展報表，只需要編寫對應(yīng)的查詢分析的SQL腳本文件以及頁面顯示的vue模板文件即可，不需要去修改后臺的任何代碼。圖3是供應(yīng)商檢測項(xiàng)目不合格率散點(diǎn)圖的頁面。

圖3 供應(yīng)商檢測項(xiàng)目不合格率散點(diǎn)圖

實(shí)現(xiàn)該功能的時序圖如圖4所示。

圖4 獲取散點(diǎn)圖數(shù)據(jù)時序圖

參考文獻(xiàn)：

[1]劉于沛.基于HTML5進(jìn)行響應(yīng)式Web應(yīng)用的技巧[J].中國新通信，2017（02）：56-57.

[2]吳睿.Web前端開發(fā)技術(shù)以及優(yōu)化研究[J].中國新通信，2016

（17）：63.

[3]陳濤.MVVM設(shè)計模式及其應(yīng)用研究[J].計算機(jī)與數(shù)字工程，2014（10）：1982-1985.

[4]張耀春.Vue.js權(quán)威指南[M].北京：電子工業(yè)出版社，2016.

[5]王子毅，張春海.基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用，2016，35（14）：46-48+51.