Vue.js在構建系統前端SPA的應用

沈劍翹 陳澤椿

摘? 要：Vue.js是一套用于構建用戶界面的漸進式框架。在分析Vue.js基本特點的基礎上，以服裝材料送檢管理系統的前端設計為背景，應用Vue.js開發系統前端SPA，由Vue.js官方提供的腳手架vue-cli構建，在生成的項目模板基礎上根據實際需求對項目目錄進行修改，最后構建的SPA應用結構。

關鍵詞：Vue.js;SPA漸進式框架;應用

中圖分類號：TP393? ? ? ? ?文獻標志碼：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是一套用于構建用戶界面的漸進式框架，具有條理簡潔清晰樣例豐富直觀的特點，對各個水平的國內開發者都相當友好。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue.js沒有脫離原有的HTML、CSS、JavaScript的基礎開發習慣，并且便于與第三方庫或既有項目整合。這個應用結構下構建的SPA應用具有的特點如下。

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

2 系統功能背景

某服飾有限公司服裝材料送檢管理系統需要實現的功能主要有五大功能模塊，分別是基本信息管理模塊、系統管理模塊、申請管理模塊、報告管理模塊、統計報表管理模塊。鑒于篇幅關系，本文僅以系統中的【統計圖表】功能模塊的實現為例介紹相應的實現細節。

統計報表管理模塊主要對實驗室送檢情況的統計報表、檢測報告的數據分析、生成送檢管理系統的各項統計報表及可視化圖表、統計報表的導出還包括報告格式打打印導出功能。

3 系統開發技術方案

3.1 開發模式

前后端分離已成為互聯網項目開發的業界標準開發方式。前后端分離可以有效的進行解耦，并且會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等等）打下堅實的基礎。前后端分離的核心思想是前端HTML頁面通過Ajax調用后端的API接口并使用Json數據進行交互，實現前后端的徹底解耦，從而提高開發效率。

3.2 開發結構

系統前端使用的是采用了MVVC架構的漸進式JavaScript框架Vue.js構建一個單頁面WEB應用（single page web application，SPA），用SQL Server 2008數據庫來管理數據。

系統的結構是，前端SPA通過AJAX調用請求后端應用WEB API的接口，后端應用去訪問數據庫，與數據庫做交互獲取數據，再將獲取到的數據以Json的數據格式返回給前端SPA，再由前端SPA去處理得到的數據以友好的頁面展示給用戶。

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

圖1 系統的架構圖

在這個開發結構上可以實現系統的以下幾點優勢。

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

3.3 Vue.js的應用

本文的前端SPA應用采用的是Vue.js，通過npm包管理工具對項目的依賴項進行管理。項目由Vue.js官方提供的腳手架vue-cli構建，在生成的項目模板基礎上根據實際需求對項目目錄進行修改，最后構建的SPA應用結構如圖2所示。其中主要文件的說明如下。

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

4 Vue.js在系統中【統計圖表】的應用

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

圖3 供應商檢測項目不合格率散點圖

實現該功能的時序圖如圖4所示。

圖4 獲取散點圖數據時序圖

參考文獻：

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

[2]吳睿.Web前端開發技術以及優化研究[J].中國新通信，2016

（17）：63.

[3]陳濤.MVVM設計模式及其應用研究[J].計算機與數字工程，2014（10）：1982-1985.

[4]張耀春.Vue.js權威指南[M].北京：電子工業出版社，2016.

[5]王子毅，張春海.基于ECharts的數據可視化分析組件設計實現[J].微型機與應用，2016，35（14）：46-48+51.