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

李健 張居力 張聃

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

【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

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

1 引言

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

2 模塊化編程的定義

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

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

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

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

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

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

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

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

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

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

以此可以單獨拆分出兩個組件：左側(cè)的樹形列表組件、右側(cè)的地圖組件。左側(cè)的樹形列表使用Element-UI自帶的el-tree組件，簡單配置參數(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'？>

…

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

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

5 結(jié)語

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

【參考文獻】

【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].