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

2022-07-29 14:12张浩洋顾丹鹏陈肖勇
计算机时代 2022年7期
关键词:数据管理菜单路由

张浩洋,顾丹鹏,陈肖勇

(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 框架可以解决一系列大型应用的开发问题,极大提升开发效率,缩短开发周期,为其他大型系统开发提供了重要的经验。

猜你喜欢
数据管理菜单路由
企业级BOM数据管理概要
定制化汽车制造的数据管理分析
海洋环境数据管理优化与实践
CTCS-2级报文数据管理需求分析和实现
中国新年菜单
探究路由与环路的问题
本月菜单
PRIME和G3-PLC路由机制对比
WSN中基于等高度路由的源位置隐私保护
eNSP在路由交换课程教学改革中的应用