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

沈劍翹 陳澤椿

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

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

中圖分類號(hào)：TP393? ? ? ? ?文獻(xiàn)標(biāo)志碼：A? ? ? ? ?文章編號(hào)：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)式框架，具有條理簡(jiǎn)潔清晰樣例豐富直觀的特點(diǎn)，對(duì)各個(gè)水平的國(guó)內(nèi)開(kāi)發(fā)者都相當(dāng)友好。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，Vue.js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js沒(méi)有脫離原有的HTML、CSS、JavaScript的基礎(chǔ)開(kāi)發(fā)習(xí)慣，并且便于與第三方庫(kù)或既有項(xiàng)目整合。這個(gè)應(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)用開(kāi)發(fā)提供了模塊組件式的開(kāi)發(fā)思想。允許開(kāi)發(fā)者將整個(gè)應(yīng)用拆分成小型的、獨(dú)立的、復(fù)用性高的組件模塊。每個(gè)組件都可以作為可配置選項(xiàng)的Vue實(shí)例。（3）數(shù)據(jù)綁定。Vue.js將底層數(shù)據(jù)和視圖一一對(duì)應(yīng)，進(jìn)入頁(yè)面的同時(shí)將掛載的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ā)生變化時(shí)，內(nèi)部數(shù)據(jù)存儲(chǔ)立即發(fā)生相應(yīng)的變化。

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

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

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

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

3.1 開(kāi)發(fā)模式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

（17）：63.

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

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

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