基于Vue的数据管理平台实践与应用

时间：2024-05-04

张浩洋，顾丹鹏，陈肖勇

(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 组件化的思想，将页面组件化，并在各个页面中使用，减少了代码量，并且可以统一修改组件，使一处组件修改，在各个页面都能产生效果，极大的增加了开发效率，减少维护成本，提升了系统的易维护性。