張浩洋，顧丹鵬，陳肖勇

(1.中國電建集團(tuán)華東勘測設(shè)計研究院有限公司，浙江 杭州 311100；2.浙江華東工程數(shù)字技術(shù)有限公司)

0 引言

現(xiàn)代Web 應(yīng)用系統(tǒng)的結(jié)構(gòu)日趨龐大，功能邏輯復(fù)雜。其中網(wǎng)站性能、用戶體驗、易維護(hù)性等要求越來越高。為解決這種情況，一系列基于js 的前端框架如雨后春筍般冒了出來，越來越多的前端開發(fā)人員開始使用前端框架來構(gòu)建前端頁面。在一系列的前端框架中，Vue 框架以其復(fù)雜性低、靈活性強、易學(xué)習(xí)以及更強的性能等特點最受國內(nèi)開發(fā)者歡迎。Vue框架的生態(tài)也相當(dāng)?shù)呢S富，如路由管理器VueRouter，狀態(tài)管理工具Vuex 等。本文從項目結(jié)構(gòu)、權(quán)限控制、易維護(hù)性等方面，通過理論與實踐，闡述了Vue框架及其豐富的生態(tài)工具為開發(fā)大型Web 應(yīng)用系統(tǒng)提供了可靠的解決方案。

1 Vue生態(tài)簡介

1.1 Vue的概念

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。其核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。Vue框架主要有以下三個特點。

MVVM 是Model-View-ViewModel 的簡寫，它本質(zhì)上是MVC 的改進(jìn)版。MVVM 的主要目的是分離視圖（View）和模型（Model）。如圖1所示。

圖1 MVVM模式示意圖

組件系統(tǒng)允許我們使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。幾乎任意類型的應(yīng)用界面都可以抽象為一個組件樹，如圖2所示。

圖2 Vue組件樹示意圖

頻繁操作操作真實DOM 會出現(xiàn)頁面卡頓，影響用戶體驗。Vue 的虛擬DOM 不會立即操作DOM，而是將多次操作保存起來，進(jìn)行合并計算，減少真實DOM的渲染計算次數(shù)，提升用戶體驗。

1.2 Vuex簡介

Vuex 是一個專為Vue 應(yīng)用程序開發(fā)的狀態(tài)管理模式。Vuex像一個狀態(tài)池，只要將全局多個組件共享的狀態(tài)丟到池內(nèi)，一個組件所依賴的狀態(tài)的讀寫就可以映射到其他組件身上去，而不用管這幾個組件之間的傳參路徑。對于大型系統(tǒng)來說，Vuex 是個不錯的選擇，我們的代碼將會變得更結(jié)構(gòu)化且易維護(hù)。

1.3 VueRouter簡介

VueRouter 是Vue 官方的路由管理器，它和Vue.js的核心深度集成，讓構(gòu)建大型單頁面應(yīng)用變得易如反掌。

1.4 ElementUI簡介

ElementUI是一套由“餓了么”團(tuán)隊出品，為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue的桌面端組件庫。

1.5 Axios簡介

Axios 是一個基于promise 的易用、簡潔且高效的HTTP庫，可以用在瀏覽器和node.js中。

1.6 VueCLI簡介

Vue CLI 是一個基于Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，其擁有一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具。

2 項目介紹

2.1 項目描述

隨著全球經(jīng)濟一體化的迅猛發(fā)展，信息戰(zhàn)日益激烈，數(shù)據(jù)資產(chǎn)的優(yōu)劣及價值挖掘已成為企業(yè)競爭的重要砝碼，數(shù)據(jù)管理平臺軟件開發(fā)項目是我司為建立各工程行業(yè)BIM 模型及工程數(shù)據(jù)標(biāo)準(zhǔn)，梳理設(shè)計、建管、運維三大平臺的主數(shù)據(jù)及關(guān)系，實現(xiàn)工程全過程數(shù)據(jù)貫通，并在此基礎(chǔ)上不斷圍繞工程進(jìn)行數(shù)據(jù)的集成、復(fù)用、沉淀，從而創(chuàng)造數(shù)據(jù)價值和業(yè)務(wù)價值的應(yīng)用。數(shù)據(jù)管理平臺軟件開發(fā)項目的目標(biāo)是圍繞工程數(shù)據(jù)管理標(biāo)準(zhǔn)體系，實現(xiàn)工程數(shù)據(jù)全生命周期的信息化管理。

2.2 項目特點

數(shù)據(jù)管理平臺軟件開發(fā)項目擁有系統(tǒng)登錄、系統(tǒng)管理、數(shù)據(jù)管理、服務(wù)管理、個人中心等二十多個一級菜單，共計一百多個二級菜單。系統(tǒng)中有系統(tǒng)管理員、業(yè)務(wù)管理員等10 多個系統(tǒng)角色，還有項目管理員、項目用戶等多個項目角色。不同的角色需要展示不同的菜單級別的頁面。而且該項目計劃分為三期進(jìn)行開發(fā)，需要設(shè)計良好的維護(hù)性?？梢哉f，數(shù)據(jù)管理平臺軟件開發(fā)項目擁有大型系統(tǒng)業(yè)務(wù)復(fù)雜，模塊眾多等共通的特點，并且用戶對于網(wǎng)站的性能及體驗要求較高。

3 項目實踐

面對項目特點，項目組使用前后端分離的開發(fā)模式，后端采用java開發(fā)，前端使用Vue框架開發(fā)。重點解決系統(tǒng)路由控制、權(quán)限控制、易維護(hù)性等問題。

3.1 項目初始化

采用VueCLI 命令快速搭建了項目的框架，包括Vuex、VueRouter 插件和項目開發(fā)、打包等命令，并通過yarn命令加入了ElementUI組件庫和Axios的HTTP庫，將項目代碼上傳至公司的gitlab 倉庫，基于Rancher進(jìn)行部署，實現(xiàn)微服務(wù)快速上線。

3.2 路由控制

一百多個路由的設(shè)計較為復(fù)雜，本項目采用VueRouter 的組件映射到路由，為每一個菜單設(shè)計單獨的路由和組件，為避免書寫過多的路由和組件引入，編寫了從數(shù)據(jù)中讀取組件位置，并映射制定路由的腳本，其中數(shù)據(jù)保存在數(shù)據(jù)庫中，控制了項目的“體積”。另外還采用VueRouter 異步加載組件的方式，用戶瀏覽網(wǎng)頁時，只加載當(dāng)前頁面的腳本，進(jìn)一步提升了網(wǎng)站的性能，完美的解決了路由控制的問題。

3.3 權(quán)限控制

不同的角色擁有不同的菜單權(quán)限，本項目使用Vuex 存儲用戶角色和相應(yīng)的菜單權(quán)限，并通過VueRouter 路由導(dǎo)航守衛(wèi)的功能，在每一次改變路由前，即進(jìn)入菜單前，對用戶的權(quán)限進(jìn)行校驗，主要包括用戶是否登錄的判斷，用戶是否有要訪問的菜單的權(quán)限的判斷，如果用戶不能訪問菜單，則將路由導(dǎo)航到登錄頁面或者404 頁面，通過Vuex 狀態(tài)保存的特點和Vuerouter路由守衛(wèi)的功能，完美的解決了權(quán)限控制的問題。

3.4 易維護(hù)性

大型系統(tǒng)往往都有許多相似的頁面和相同的功能邏輯，對于這種情況，需要提前設(shè)計，將相同頁面和邏輯組件化，本項目的個人頭像、個人任務(wù)和個人消息，是出現(xiàn)較多的頁面，使用Vue 組件化的思想，將頁面組件化，并在各個頁面中使用，減少了代碼量，并且可以統(tǒng)一修改組件，使一處組件修改，在各個頁面都能產(chǎn)生效果，極大的增加了開發(fā)效率，減少維護(hù)成本，提升了系統(tǒng)的易維護(hù)性。

4 結(jié)束語

本文重點介紹了基于VUE 的一種開發(fā)大型前端系統(tǒng)的解決方案，并在數(shù)據(jù)管理平臺項目實踐，著重闡述了對于大型系統(tǒng)路由控制、權(quán)限控制和易維護(hù)性的設(shè)計思路?；谝陨险撌隹梢?，使用Vue 框架可以解決一系列大型應(yīng)用的開發(fā)問題，極大提升開發(fā)效率，縮短開發(fā)周期，為其他大型系統(tǒng)開發(fā)提供了重要的經(jīng)驗。