基于MVVM的数据字典比对工具的前端设计与实现

贾丽芳 董义明 钟晓睿 郑建

摘要：企业之间的竞争异常激烈，如何以最快的速度上线发布一套系统，迅速占领市场是每家企业都喜闻乐见的，但是除了快，企业还需要考虑到系统后续的维护以及用户体验的问题，随着web技术的发展以及浏览器功能的不断增强，同时兼顾企业以及用户的需求似乎是可以有很多种解决方案的，比如：采用前后端分离的开发模式以及基于MVVM模式的Vue前端框架就能很好地满足这一需求。该文首先介绍了前后端分离开发模式、MVVM模式以及Vue框架，其次是对数据字典比对工具软件的功能分析，最后阐述了软件前端部分功能模块的实现过程。

关键词：前后端分离;MVVM;Vue

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2022）01-0087-03

为了能够统一管理分布式部署的结构化以及非结构化数据资源，单位急需一套数据字典比对工具软件，它能为用户提供数据字典生成和比对功能，是一套不可或缺的共用工具类软件，然而在短时间内就要让系统上线发布绝对不是一件容易的事情，必须选择一款合适的前端框架以及开发模式，通过对比最终采用了前后端分离的开发模式，前端开发采用了基于MVVM模式的Vue框架，完全满足了软件需求和开发进度。

1 相关技术简介

1.1 前后端分离

前后端分离是一种系统架构模式，它的核心思想是：前端开发只负责数据显示和路由控制，后端只负责业务处理和数据访问，并为前端提供数据接口[1]。它具备以下几点优势：

1）打造高质量技术人才（开发人员分离）[2];

2）前端与后端分别建立不同的工程项目，开发人员各司其职，并行开发，大大提高了开发效率;

3）前端与后端工程分别部署至不同的服务器，提高了系统的稳定性;

4）前端与后端代码的低耦合性大大提高了系统的可扩展性和可维护性;

5）只要前端代码遵循后端接口的调用规则，一套后端代码可以支持多种前端应用程序，极大地降低了开发成本[3]。

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写，它由MVC发展而来，利用数据驱动视图，达到数据和视图进行完全分离，实现了前后端真正的分离模式[4]。

MVVM模式采用了双向绑定（data-binding）的机制，View层的状态变化会自动同步到Model层，Model层的数据变化也会自动同步到View视图中并显示出来，Model层和View层是不能直接通信的，它们就是通过ViewModel层的双向数据绑定机制连接起来的，如图1所示。

1.3 Vue框架

目前，MVVM模式中使用最广泛的有三种框架，分别是Angular、React、Vue，三者各有特点，但鉴于Vue框架的作者是中国人的缘故，它有大量的中文文档以及参考资料，对于国内开发者来说更加友好，并且它沿用了原有的HTML、CSS、JS前端开发的习惯，这些特点都使得前端人员学习起来不会很吃力，甚至一些前端爱好者也可以很容易上手，入门相对简单，Vue框架以平缓的学习曲线受到广大前端开发人员的欢迎。

Vue（读音 /vjuː/， 类似于 view） 是一套构建用户界面的渐进式框架。与其他大型框架不同，它只关注视图层，采用了自底向上增量开发的设计，Vue的大小只有20KB左右，是個非常轻量级的工具。其本身具有响应式编程和组件化的特点[5]。

Vue只提供了基础的数据绑定和组件化功能，项目开发中一般还需要使用第三方的插件，常用的插件有vueRouter、vuex、Axios等，分别提供路由管理、状态管理、数据请求的功能。

2 软件前台的总体功能分析

通过需求分析，数据字典比对工具软件共分为五个功能模块，分别为结构化数据存储节点注册、非结构化数据存储节点注册、存储节点审核、业务数据注册、创建维度等功能，数据字典比对工具软件的功能分解图如图2所示。

1）结构化数据存储节点注册：提供结构化数据存储节点的注册、查看、编辑、删除等管理功能;

2）非结构化数据存储节点注册：提供非结构化数据存储节点的注册、查看、编辑、删除等管理功能;

3）存储节点审核：提供结构化以及非结构化存储节点审核信息统计、审核、查看等管理功能;

4）业务数据注册：提供描述元数据的增加、删除、查看、编辑/审核等管理功能;

5）创建维度：提供非结构化数据资源格式的增加、删除、查看、编辑等管理功能。

3 软件前台的总体功能实现

3.1 Vue工程安装部署

创建Vue工程步骤如下：

1）安装nodejs;

2）npm官方镜像特别慢，可以使用淘宝npm镜像，命令如下：

$ npm install –g cnpm --registry=https：//registry.npm.taobao.org

3）使用脚手架vue-cli初始化项目，命令如下：

cnpm install vue-cli -g //全局安装 vue-cli

4）cd目录路径，新建vue项目，命令如下：

vue init webpack “DDSS”

5）cd 目录路径，安装依赖，运行项目，创建成功界面如图3所示，命令如下：

cnpm install   cnpm run dev

6）安装vueRouter、vuex、Axios等vue插件，此处不再介绍。

3.2 软件典型应用—存储节点审核信息统计

数据字典比对工具软件中使用了vue-elementUI、vue-echarts两款UI插件。Vue-elementUI是一套为开发者提供的组件库，它包括了布局、字体、边框、图标、按钮、表单、表格、树形控件、分页等组件;vue-echarts是一款开源的可视化图表库，包括了折线图、柱状图、饼图、散点图、热力图、树图、地理坐标/地图等，插件的运用有助于软件前端的快速构建。

该工具软件中主要使用了布局、表单、表格、分页等组件，图表主要使用了柱状图。此处将对以柱状图形式展现的存储节点审核信息统计功能进行详细阐述。

1）安装vue-echarts插件，命令如下：

cnpm install echarts –save

2）在main.js文件下添加内容如下：

import echarts from ‘echarts’

Vue.prototype.$echarts = echarts

3）新建AuditRegiste.vue文件，页面代码如下所示：

<template>

<div id="auditbar"></div>

</template>

<script>

import auditInfoApi from '@/model/auditInfoApi'

import echarts from 'echarts'

export default {

name： 'AuditRegiste'，

data（） {

return {

myEcharts：null，

option：{

title：{

text：'存儲节点审核概况' ，

textAlign：'center'，

textStyle：{ fontSize：16}}，

color：['#ff7f50'，'#87cefa'，'#da70d6']，

tooltip： {

trigger： 'axis'，

axisPointer： {type： 'shadow'}}，

legend： {

data： ['待审核'， '审核已通过'， '审核未通过']，

bottom：0}，

xAxis： [{

type： 'category'，

axisTick： {show： false}，

axisLine：{

show：true，

lineStyle：{ color：'#4488bb'}}，

axisLabel：{

show：true，

color：'#000'}，

data： ['结构化数据'， '非结构化数据'] }]，

yAxis： [

{   type： 'value'，

axisLine：{

show：true，

lineStyle：{ color：'#4488bb'}}，

axisLabel：{

show：true，

color：'#000'}}]，

series： [

{   name： '待审核'，

type： 'bar'，

barGap： 0，

label：{

show：true，

position：'top'，

formatter：'{a}{c}条'，

color： '#ff7f50'

}，

emphasis： {

focus： 'series'

}，

data： [0， 0]

}，

{

name： '审核已通过'，

…}，

{

name： '审核未通过'，

…}]}}

}，

mounted（）{this.initAuditInfoBar（）;}，

methods： {

initAuditInfoBar（）{

auditInfoApi.getAuditInfo（）.then（res => {

if （res.code === 200） {

let data = res.data;

this.option.series[0].data.push（data.structdata.noaudit）;

this.option.series[0].data.push（data.nostructdata.noaudit）;

this.option.series[1].data.push（data.structdata.auditpass）;                            this.option.series[1].data.push（data.nostructdata.auditpass）;                            this.option.series[2].data.push（data.structdata.nostructdata）;                            this.option.series[2].data.push（data.nostructdata.nostructdata）;

this.myEcharts = this.$echarts.init（document.getElementById（"auditbar"））;

this.myEcharts.setOption（this.option）;

}}）

}}

}

</script>

<style lang="less" scoped>

#auditbar{

width：1500px;

height：500px;

…

}

</style>

4）存儲节点审核信息统计页面如图4所示：

4 结束语

web技术的发展以及浏览器功能的不断增强使前端开发有了更多的可选方案，根据需求选择适合自己的框架模式是非常有必要的，数据字典比对工具软件采用的前后端分离开发模式以及前端开发采用的基于MVVM模式的Vue框架不仅完全满足了软件需求和开发进度，还使软件具有良好的可维护性和可扩展性，软件开发任务得以圆满完成。

参考文献：

[1] 孟祥双.前后端分离式WEB应用开发研究[J].电子元器件与信息技术，2019，3（6）：40-43.

[2] 孙思杰.Web项目基于前后端分离模式的设计与应用[J].科技创新与应用，2020（27）：96-97.

[3] 杜艳美，黄晓芳.面向企业级web应用的前后端分离开发模式及实践[J].西南科技大学学报，2018，33（2）：83-87.

[4] 朱海萍，丁西，刘链.Web前端中基于MVVM框架的技术应用研究[J].科技资讯，2020，18（30）：8-10.

[5] Vue.js官网[EB/OL].[2021-01-16].https：//cn.vuejs.org/.

【通联编辑：谢媛媛】

收稿日期：2021-09-16

作者简介：贾丽芳（1984—），女，山西阳泉人，工程师，硕士，研究方向为计算机应用技术;董义明（1987—），男，山东潍坊人，工程师，硕士，研究方向为大数据开发;钟晓睿（1987—），女，四川自贡人，高级工程师，博士后，研究方向为云计算、大数据、信息服务;郑建（1983—），男，安徽淮北人，工程师，学士，研究方向为通信工程。

3216500338205