賈麗芳 董義明 鐘曉睿 鄭建

摘要：企業(yè)之間的競(jìng)爭(zhēng)異常激烈，如何以最快的速度上線發(fā)布一套系統(tǒng)，迅速占領(lǐng)市場(chǎng)是每家企業(yè)都喜聞樂見的，但是除了快，企業(yè)還需要考慮到系統(tǒng)后續(xù)的維護(hù)以及用戶體驗(yàn)的問題，隨著web技術(shù)的發(fā)展以及瀏覽器功能的不斷增強(qiáng)，同時(shí)兼顧企業(yè)以及用戶的需求似乎是可以有很多種解決方案的，比如：采用前后端分離的開發(fā)模式以及基于MVVM模式的Vue前端框架就能很好地滿足這一需求。該文首先介紹了前后端分離開發(fā)模式、MVVM模式以及Vue框架，其次是對(duì)數(shù)據(jù)字典比對(duì)工具軟件的功能分析，最后闡述了軟件前端部分功能模塊的實(shí)現(xiàn)過程。

關(guān)鍵詞：前后端分離;MVVM;Vue

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）01-0087-03

為了能夠統(tǒng)一管理分布式部署的結(jié)構(gòu)化以及非結(jié)構(gòu)化數(shù)據(jù)資源，單位急需一套數(shù)據(jù)字典比對(duì)工具軟件，它能為用戶提供數(shù)據(jù)字典生成和比對(duì)功能，是一套不可或缺的共用工具類軟件，然而在短時(shí)間內(nèi)就要讓系統(tǒng)上線發(fā)布絕對(duì)不是一件容易的事情，必須選擇一款合適的前端框架以及開發(fā)模式，通過對(duì)比最終采用了前后端分離的開發(fā)模式，前端開發(fā)采用了基于MVVM模式的Vue框架，完全滿足了軟件需求和開發(fā)進(jìn)度。

1 相關(guān)技術(shù)簡(jiǎn)介

1.1 前后端分離

前后端分離是一種系統(tǒng)架構(gòu)模式，它的核心思想是：前端開發(fā)只負(fù)責(zé)數(shù)據(jù)顯示和路由控制，后端只負(fù)責(zé)業(yè)務(wù)處理和數(shù)據(jù)訪問，并為前端提供數(shù)據(jù)接口[1]。它具備以下幾點(diǎn)優(yōu)勢(shì)：

1）打造高質(zhì)量技術(shù)人才（開發(fā)人員分離）[2];

2）前端與后端分別建立不同的工程項(xiàng)目，開發(fā)人員各司其職，并行開發(fā)，大大提高了開發(fā)效率;

3）前端與后端工程分別部署至不同的服務(wù)器，提高了系統(tǒng)的穩(wěn)定性;

4）前端與后端代碼的低耦合性大大提高了系統(tǒng)的可擴(kuò)展性和可維護(hù)性;

5）只要前端代碼遵循后端接口的調(diào)用規(guī)則，一套后端代碼可以支持多種前端應(yīng)用程序，極大地降低了開發(fā)成本[3]。

1.2 MVVM模式

MVVM是Model-View-ViewModel的簡(jiǎn)寫，它由MVC發(fā)展而來，利用數(shù)據(jù)驅(qū)動(dòng)視圖，達(dá)到數(shù)據(jù)和視圖進(jìn)行完全分離，實(shí)現(xiàn)了前后端真正的分離模式[4]。

MVVM模式采用了雙向綁定（data-binding）的機(jī)制，View層的狀態(tài)變化會(huì)自動(dòng)同步到Model層，Model層的數(shù)據(jù)變化也會(huì)自動(dòng)同步到View視圖中并顯示出來，Model層和View層是不能直接通信的，它們就是通過ViewModel層的雙向數(shù)據(jù)綁定機(jī)制連接起來的，如圖1所示。

1.3 Vue框架

目前，MVVM模式中使用最廣泛的有三種框架，分別是Angular、React、Vue，三者各有特點(diǎn)，但鑒于Vue框架的作者是中國(guó)人的緣故，它有大量的中文文檔以及參考資料，對(duì)于國(guó)內(nèi)開發(fā)者來說更加友好，并且它沿用了原有的HTML、CSS、JS前端開發(fā)的習(xí)慣，這些特點(diǎn)都使得前端人員學(xué)習(xí)起來不會(huì)很吃力，甚至一些前端愛好者也可以很容易上手，入門相對(duì)簡(jiǎn)單，Vue框架以平緩的學(xué)習(xí)曲線受到廣大前端開發(fā)人員的歡迎。

Vue（讀音 /vju?/， 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他大型框架不同，它只關(guān)注視圖層，采用了自底向上增量開發(fā)的設(shè)計(jì)，Vue的大小只有20KB左右，是個(gè)非常輕量級(jí)的工具。其本身具有響應(yīng)式編程和組件化的特點(diǎn)[5]。

Vue只提供了基礎(chǔ)的數(shù)據(jù)綁定和組件化功能，項(xiàng)目開發(fā)中一般還需要使用第三方的插件，常用的插件有vueRouter、vuex、Axios等，分別提供路由管理、狀態(tài)管理、數(shù)據(jù)請(qǐng)求的功能。

2 軟件前臺(tái)的總體功能分析

通過需求分析，數(shù)據(jù)字典比對(duì)工具軟件共分為五個(gè)功能模塊，分別為結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn)注冊(cè)、非結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn)注冊(cè)、存儲(chǔ)節(jié)點(diǎn)審核、業(yè)務(wù)數(shù)據(jù)注冊(cè)、創(chuàng)建維度等功能，數(shù)據(jù)字典比對(duì)工具軟件的功能分解圖如圖2所示。

1）結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn)注冊(cè)：提供結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn)的注冊(cè)、查看、編輯、刪除等管理功能;

2）非結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn)注冊(cè)：提供非結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn)的注冊(cè)、查看、編輯、刪除等管理功能;

3）存儲(chǔ)節(jié)點(diǎn)審核：提供結(jié)構(gòu)化以及非結(jié)構(gòu)化存儲(chǔ)節(jié)點(diǎn)審核信息統(tǒng)計(jì)、審核、查看等管理功能;

4）業(yè)務(wù)數(shù)據(jù)注冊(cè)：提供描述元數(shù)據(jù)的增加、刪除、查看、編輯/審核等管理功能;

5）創(chuàng)建維度：提供非結(jié)構(gòu)化數(shù)據(jù)資源格式的增加、刪除、查看、編輯等管理功能。

3 軟件前臺(tái)的總體功能實(shí)現(xiàn)

3.1 Vue工程安裝部署

創(chuàng)建Vue工程步驟如下：

1）安裝nodejs;

2）npm官方鏡像特別慢，可以使用淘寶npm鏡像，命令如下：

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

3）使用腳手架vue-cli初始化項(xiàng)目，命令如下：

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

4）cd目錄路徑，新建vue項(xiàng)目，命令如下：

vue init webpack “DDSS”

5）cd 目錄路徑，安裝依賴，運(yùn)行項(xiàng)目，創(chuàng)建成功界面如圖3所示，命令如下：

cnpm install? ?cnpm run dev

6）安裝vueRouter、vuex、Axios等vue插件，此處不再介紹。

3.2 軟件典型應(yīng)用—存儲(chǔ)節(jié)點(diǎn)審核信息統(tǒng)計(jì)

數(shù)據(jù)字典比對(duì)工具軟件中使用了vue-elementUI、vue-echarts兩款UI插件。Vue-elementUI是一套為開發(fā)者提供的組件庫，它包括了布局、字體、邊框、圖標(biāo)、按鈕、表單、表格、樹形控件、分頁等組件;vue-echarts是一款開源的可視化圖表庫，包括了折線圖、柱狀圖、餅圖、散點(diǎn)圖、熱力圖、樹圖、地理坐標(biāo)/地圖等，插件的運(yùn)用有助于軟件前端的快速構(gòu)建。

該工具軟件中主要使用了布局、表單、表格、分頁等組件，圖表主要使用了柱狀圖。此處將對(duì)以柱狀圖形式展現(xiàn)的存儲(chǔ)節(jié)點(diǎn)審核信息統(tǒng)計(jì)功能進(jìn)行詳細(xì)闡述。

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

cnpm install echarts –save

2）在main.js文件下添加內(nèi)容如下：

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：'存儲(chǔ)節(jié)點(diǎn)審核概況' ，

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： ['結(jié)構(gòu)化數(shù)據(jù)'， '非結(jié)構(gòu)化數(shù)據(jù)'] }]，

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）存儲(chǔ)節(jié)點(diǎn)審核信息統(tǒng)計(jì)頁面如圖4所示：

4 結(jié)束語

web技術(shù)的發(fā)展以及瀏覽器功能的不斷增強(qiáng)使前端開發(fā)有了更多的可選方案，根據(jù)需求選擇適合自己的框架模式是非常有必要的，數(shù)據(jù)字典比對(duì)工具軟件采用的前后端分離開發(fā)模式以及前端開發(fā)采用的基于MVVM模式的Vue框架不僅完全滿足了軟件需求和開發(fā)進(jìn)度，還使軟件具有良好的可維護(hù)性和可擴(kuò)展性，軟件開發(fā)任務(wù)得以圓滿完成。

參考文獻(xiàn)：

[1] 孟祥雙.前后端分離式WEB應(yīng)用開發(fā)研究[J].電子元器件與信息技術(shù)，2019，3（6）：40-43.

[2] 孫思杰.Web項(xiàng)目基于前后端分離模式的設(shè)計(jì)與應(yīng)用[J].科技創(chuàng)新與應(yīng)用，2020（27）：96-97.

[3] 杜艷美，黃曉芳.面向企業(yè)級(jí)web應(yīng)用的前后端分離開發(fā)模式及實(shí)踐[J].西南科技大學(xué)學(xué)報(bào)，2018，33（2）：83-87.

[4] 朱海萍，丁西，劉鏈.Web前端中基于MVVM框架的技術(shù)應(yīng)用研究[J].科技資訊，2020，18（30）：8-10.

[5] Vue.js官網(wǎng)[EB/OL].[2021-01-16].https：//cn.vuejs.org/.

【通聯(lián)編輯：謝媛媛】

收稿日期：2021-09-16

作者簡(jiǎn)介：賈麗芳（1984—），女，山西陽泉人，工程師，碩士，研究方向?yàn)橛?jì)算機(jī)應(yīng)用技術(shù);董義明（1987—），男，山東濰坊人，工程師，碩士，研究方向?yàn)榇髷?shù)據(jù)開發(fā);鐘曉睿（1987—），女，四川自貢人，高級(jí)工程師，博士后，研究方向?yàn)樵朴?jì)算、大數(shù)據(jù)、信息服務(wù);鄭建（1983—），男，安徽淮北人，工程師，學(xué)士，研究方向?yàn)橥ㄐ殴こ獭?/p>

3216500338205