基于Vue.js的城市軌道交通綜合安防系統(tǒng)模塊化設(shè)計(jì)研究

李健 張居力 張聃

【摘? 要】近年來，隨著Web前端技術(shù)的快速發(fā)展，用戶對(duì)產(chǎn)品的體驗(yàn)和可用性需求大幅度提升，衍生出目前流行的三大前端框架Angular.js、React.js、Vue.js。而Vue.js由美籍華人開發(fā)，性能強(qiáng)悍、文檔清晰明了、簡(jiǎn)單易學(xué)且更契合國(guó)內(nèi)開發(fā)者習(xí)慣，成為國(guó)內(nèi)當(dāng)前最受歡迎的前端框架。以功能強(qiáng)大、開發(fā)方便的Vue.js作為城市軌道交通綜合安防系統(tǒng)的后臺(tái)開發(fā)，通過其模塊化設(shè)計(jì)模式，可以構(gòu)建出更高效、更快捷、可維護(hù)性強(qiáng)、更符合用戶體驗(yàn)的用戶界面。

【Abstract】In recent years， with the rapid development of Web front-end technology， users' demands for product experience and usability have been greatly improved， and the three popular front-end frameworks Angular. js， React. js and Vue.js have been derived. Vue. js is developed by Chinese Americans. With strong performance， clear documentation， easy to learn and more in line with the habits of domestic developers， it has become the most popular front-end framework in China. With the powerful and convenient development of Vue. js as the background development of urban rail transit integrated security system， the modular design mode can build a more efficient， faster， maintainable， and more consistent with user experience user interface.

【關(guān)鍵詞】Vue.js;模塊化;城市軌道交通;安防系統(tǒng)

【Keywords】Vue.js; modular; urban rail transit; security system

【中圖分類號(hào)】U231;TP18? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻(xiàn)標(biāo)志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文章編號(hào)】1673-1069（2021）02-0192-03

1 引言

近年來，公共場(chǎng)所的恐怖極端事件頻發(fā)，面對(duì)國(guó)際與國(guó)內(nèi)恐怖主義威脅，通過高科技安防手段遏制恐怖活動(dòng)，保障社會(huì)穩(wěn)定和公共安全，是當(dāng)前中國(guó)乃至世界各國(guó)都在研究的重要課題，而城市軌道交通綜合安防系統(tǒng)正是公司立項(xiàng)著手開發(fā)聚合多維度管理、跨平臺(tái)、多部門協(xié)調(diào)等功能特性于一身的針對(duì)地鐵安全防范的綜合管理系統(tǒng)。在前端界面開發(fā)上，采用當(dāng)前最流行的Vue.js+Element-UI前端框架以模塊化方式進(jìn)行界面的搭建，以更優(yōu)的性能減少代碼冗余增強(qiáng)后期維護(hù)性，以自帶的查錯(cuò)機(jī)制減少系統(tǒng)故障率。

2 模塊化編程的定義

模塊化編程是一種軟件設(shè)計(jì)技術(shù)，它強(qiáng)調(diào)將程序的功能分為獨(dú)立的，可互換的模塊，以使每個(gè)模塊都包含執(zhí)行所需功能的一個(gè)方面所必需的一切。

在創(chuàng)建模塊化系統(tǒng)時(shí)，不是創(chuàng)建一個(gè)整體的應(yīng)用程序（其中最小的組件是整體），而是單獨(dú)編寫幾個(gè)較小的模塊，因此當(dāng)它們組合在一起時(shí)，它們會(huì)構(gòu)建可執(zhí)行的應(yīng)用程序。典型地，這些也被編譯分別經(jīng)由單獨(dú)的編譯，然后通過一個(gè)鏈接的連接子。一個(gè)剛剛即時(shí)編譯器可以執(zhí)行一些這樣的結(jié)構(gòu)“上即時(shí)”的運(yùn)行時(shí)間。這些獨(dú)立的功能通常分為程序控制功能或特定任務(wù)功能。程序控制功能旨在用于一個(gè)程序，專門準(zhǔn)備了特定的任務(wù)功能以適用于各種程序。

3 模塊化的優(yōu)勢(shì)

組件化開發(fā)通過組件把一個(gè)單頁(yè)面應(yīng)用中的各個(gè)模塊拆分到一個(gè)一個(gè)的單獨(dú)組件中，只要在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽的占位，并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個(gè)參數(shù)叫作組件的熟悉），然后再分別寫好對(duì)應(yīng)組件的實(shí)現(xiàn)，這樣整個(gè)頁(yè)面就算做完了。這樣的開發(fā)不僅提高了開發(fā)的效率、方便重復(fù)使用、簡(jiǎn)化了調(diào)試的步驟，而且提升了整個(gè)項(xiàng)目的可維護(hù)性，便于協(xié)同開發(fā)。

4 模塊化開發(fā)在安防系統(tǒng)上的應(yīng)用及設(shè)計(jì)

住建部于2015年發(fā)布了GB 50314—2015《智能建筑設(shè)計(jì)標(biāo)準(zhǔn)》，將安全防范綜合管理平臺(tái)系統(tǒng)納入智能建筑設(shè)計(jì)標(biāo)準(zhǔn)，安防集成平臺(tái)成為智能建筑重要的組成部分。港口、機(jī)場(chǎng)、智慧園區(qū)、智慧城市等安防重點(diǎn)領(lǐng)域紛紛開始響應(yīng)國(guó)家安全工作部署，加強(qiáng)安全投入，建設(shè)安防集成平臺(tái)，提高安防管理水平。在2016年，中國(guó)住房和城鄉(xiāng)建設(shè)部和中國(guó)質(zhì)量監(jiān)督檢驗(yàn)檢疫總局聯(lián)合發(fā)布了GB 51151—2016《城市軌道交通公共安全防范系統(tǒng)工程技術(shù)規(guī)范》，規(guī)范要求城市軌道交通公共安全技術(shù)防范系統(tǒng)的各子系統(tǒng)應(yīng)集合成為一個(gè)整體，并應(yīng)由獨(dú)立的安防集成平臺(tái)統(tǒng)一進(jìn)行管理。公司根據(jù)要求著力于開發(fā)城市軌道交通安防系統(tǒng)產(chǎn)品，本系統(tǒng)按照《UI設(shè)計(jì)規(guī)范》中的說明結(jié)合餓了么開源框架Element-UI對(duì)系統(tǒng)進(jìn)行模塊化設(shè)計(jì)如圖1所示。

整體結(jié)構(gòu)上拆分為“上中下”三段式布局。頁(yè)面的頂部為系統(tǒng)logo、主菜單、登錄信息、系統(tǒng)子菜單等部分，系統(tǒng)子菜單且當(dāng)主菜單沒有子菜單時(shí)，可通過v-if指令將其隱藏，頁(yè)面的中間部分為系統(tǒng)應(yīng)用的內(nèi)容區(qū)域，頁(yè)面的底部則為公司署名及版權(quán)信息。這樣設(shè)計(jì)既能滿足頁(yè)面美觀，也能夠?qū)I(yè)務(wù)模塊單獨(dú)拆分開，便于分發(fā)給不同開發(fā)人員進(jìn)行頁(yè)面開發(fā)。

在主菜單欄比較簡(jiǎn)單，最左側(cè)為logo及平臺(tái)信息，但中間的菜單欄則是由兩部分組成，圖標(biāo)及文字，這種高重復(fù)性可以單獨(dú)設(shè)計(jì)成一個(gè)組件，也可通過v-for指令直接進(jìn)行列表渲染，此處為單獨(dú)的組件進(jìn)行統(tǒng)一維護(hù)。在主菜單欄的最右側(cè)雖然圖標(biāo)看起來都是相同的，但是他們的點(diǎn)擊事件不同，所以并沒有單獨(dú)封裝為組件。

中間子菜單欄，結(jié)構(gòu)比較簡(jiǎn)單，背景色加上菜單按鈕，不需要單獨(dú)拆分。而在內(nèi)容欄，就需要根據(jù)業(yè)務(wù)模型來提前將模型構(gòu)建好。

在系統(tǒng)的菜單中，【電子地圖】【視頻監(jiān)控】【出入口控制】【入侵報(bào)警】【安全檢查】【電子地圖】模塊內(nèi)容部分都涉及左側(cè)為樹節(jié)點(diǎn)、右側(cè)為地圖模型，在各個(gè)模塊再展現(xiàn)一些個(gè)性化的功能，如圖2和圖3所示。

以此可以單獨(dú)拆分出兩個(gè)組件：左側(cè)的樹形列表組件、右側(cè)的地圖組件。左側(cè)的樹形列表使用Element-UI自帶的el-tree組件，簡(jiǎn)單配置參數(shù)即可展現(xiàn)出上圖顯示的效果，以【電子地圖】【視頻監(jiān)控】部分代碼為例如下：

【電子地圖】左側(cè)樹結(jié)構(gòu)示例代碼：

：accordion='true'？：highlight-current='true'？：props="defaultProps"？

：filter-node-method="filterNode"？：default-expand-all='false'

？@node-click="handleNodeClick"？：default-expanded-keys='defaultExpandedKeys'？：node-key='nodeKey'？>

…

【視頻監(jiān)控】左側(cè)樹結(jié)構(gòu)示例代碼：

？：accordion='true'？：highlight-current='true'？

：filter-node-method="filterNode"？：props="defaultProps"？

：default-expand-all='false'？@node-click="handleNodeClick"？

：default-expanded-keys='defaultExpandedKeys'？：node-key='nodeKey'？>

…

通過對(duì)比代碼表面上傳入的attribute完全相同，不同之處在于每個(gè)el-tree的data屬性的值，以及node-click的方法函數(shù)處理上不同。【電子地圖】的data是根據(jù)條件查詢出對(duì)應(yīng)的地鐵站點(diǎn)信息，【視頻監(jiān)控】則僅查詢包含監(jiān)控的位置及監(jiān)控設(shè)備的信息。在開發(fā)上，只用構(gòu)建出相同結(jié)構(gòu)的data信息就能展現(xiàn)出不同的內(nèi)容。

通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹的形式來組織（見圖4），在本系統(tǒng)中也可用樹來進(jìn)行表達(dá)z，樹的根級(jí)部分為整個(gè)應(yīng)用，子集分別為各個(gè)菜單功能模塊，各個(gè)功能模塊再進(jìn)行拆分成多個(gè)模塊構(gòu)成，可以是form表單，可以是table列表，可以是簡(jiǎn)單的一個(gè)文字，也可以是復(fù)雜的地圖等。通過科學(xué)的拆分，就像各式各樣的磚塊，將其填充至合適的位置最終壘砌成一個(gè)豐富的應(yīng)用。

5 結(jié)語

本文在Vue.js的基礎(chǔ)上分析城市軌道交通綜合安防系統(tǒng)前端采用模塊化開發(fā)的應(yīng)用及設(shè)計(jì)，結(jié)合餓了么開源框架Element-UI構(gòu)建出風(fēng)格統(tǒng)一、高性能、高可維護(hù)的前端界面，利用模塊化設(shè)計(jì)，更易把業(yè)務(wù)拆分給每個(gè)開發(fā)人員，提高開發(fā)效率，也跟上時(shí)代的步伐。

【參考文獻(xiàn)】

【1】GB 51151—2016城市軌道交通公共安全防范系統(tǒng)工程技術(shù)規(guī)范[S].

【2】GB/T 38311—2019城市軌道交通安全防范通信協(xié)議與接口[S].

【3】GB 51151—2016城市軌道交通公共安全防范系統(tǒng)工程技術(shù)規(guī)范[S].