基于Vue的數據管理平臺實踐與應用

張浩洋，顧丹鵬，陳肖勇

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

0 引言

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

1 Vue生態簡介

1.1 Vue的概念

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

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

圖1 MVVM模式示意圖

組件系統允許我們使用小型、獨立和通常可復用的組件構建大型應用。幾乎任意類型的應用界面都可以抽象為一個組件樹，如圖2所示。

圖2 Vue組件樹示意圖

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

1.2 Vuex簡介

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

1.3 VueRouter簡介

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

1.4 ElementUI簡介

ElementUI是一套由“餓了么”團隊出品，為開發者、設計師和產品經理準備的基于Vue的桌面端組件庫。

1.5 Axios簡介

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

1.6 VueCLI簡介

Vue CLI 是一個基于Vue.js 進行快速開發的完整系統，其擁有一個豐富的官方插件集合，集成了前端生態中最好的工具。

2 項目介紹

2.1 項目描述

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

2.2 項目特點

數據管理平臺軟件開發項目擁有系統登錄、系統管理、數據管理、服務管理、個人中心等二十多個一級菜單，共計一百多個二級菜單。系統中有系統管理員、業務管理員等10 多個系統角色，還有項目管理員、項目用戶等多個項目角色。不同的角色需要展示不同的菜單級別的頁面。而且該項目計劃分為三期進行開發，需要設計良好的維護性。可以說，數據管理平臺軟件開發項目擁有大型系統業務復雜，模塊眾多等共通的特點，并且用戶對于網站的性能及體驗要求較高。

3 項目實踐

面對項目特點，項目組使用前后端分離的開發模式，后端采用java開發，前端使用Vue框架開發。重點解決系統路由控制、權限控制、易維護性等問題。

3.1 項目初始化

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

3.2 路由控制

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

3.3 權限控制

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

3.4 易維護性

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

4 結束語

本文重點介紹了基于VUE 的一種開發大型前端系統的解決方案，并在數據管理平臺項目實踐，著重闡述了對于大型系統路由控制、權限控制和易維護性的設計思路。基于以上論述可見，使用Vue 框架可以解決一系列大型應用的開發問題，極大提升開發效率，縮短開發周期，為其他大型系統開發提供了重要的經驗。