基于Vue.js的城市轨道交通综合安防系统模块化设计研究

李健 张居力 张聃

【摘  要】近年来，随着Web前端技术的快速发展，用户对产品的体验和可用性需求大幅度提升，衍生出目前流行的三大前端框架Angular.js、React.js、Vue.js。而Vue.js由美籍华人开发，性能强悍、文档清晰明了、简单易学且更契合国内开发者习惯，成为国内当前最受欢迎的前端框架。以功能强大、开发方便的Vue.js作为城市轨道交通综合安防系统的后台开发，通过其模块化设计模式，可以构建出更高效、更快捷、可维护性强、更符合用户体验的用户界面。

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

【关键词】Vue.js;模块化;城市轨道交通;安防系统

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

【中图分类號】U231;TP18                                             【文献标志码】A                                                 【文章编号】1673-1069（2021）02-0192-03

1 引言

近年来，公共场所的恐怖极端事件频发，面对国际与国内恐怖主义威胁，通过高科技安防手段遏制恐怖活动，保障社会稳定和公共安全，是当前中国乃至世界各国都在研究的重要课题，而城市轨道交通综合安防系统正是公司立项着手开发聚合多维度管理、跨平台、多部门协调等功能特性于一身的针对地铁安全防范的综合管理系统。在前端界面开发上，采用当前最流行的Vue.js+Element-UI前端框架以模块化方式进行界面的搭建，以更优的性能减少代码冗余增强后期维护性，以自带的查错机制减少系统故障率。

2 模块化编程的定义

模块化编程是一种软件设计技术，它强调将程序的功能分为独立的，可互换的模块，以使每个模块都包含执行所需功能的一个方面所必需的一切。

在创建模块化系统时，不是创建一个整体的应用程序（其中最小的组件是整体），而是单独编写几个较小的模块，因此当它们组合在一起时，它们会构建可执行的应用程序。典型地，这些也被编译分别经由单独的编译，然后通过一个链接的连接子。一个刚刚即时编译器可以执行一些这样的结构“上即时”的运行时间。这些独立的功能通常分为程序控制功能或特定任务功能。程序控制功能旨在用于一个程序，专门准备了特定的任务功能以适用于各种程序。

3 模块化的优势

组件化开发通过组件把一个单页面应用中的各个模块拆分到一个一个的单独组件中，只要在父级应用中写好各种组件标签的占位，并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫作组件的熟悉），然后再分别写好对应组件的实现，这样整个页面就算做完了。这样的开发不仅提高了开发的效率、方便重复使用、简化了调试的步骤，而且提升了整个项目的可维护性，便于协同开发。

4 模块化开发在安防系统上的应用及设计

住建部于2015年发布了GB 50314—2015《智能建筑设计标准》，将安全防范综合管理平台系统纳入智能建筑设计标准，安防集成平台成为智能建筑重要的组成部分。港口、机场、智慧园区、智慧城市等安防重点领域纷纷开始响应国家安全工作部署，加强安全投入，建设安防集成平台，提高安防管理水平。在2016年，中国住房和城乡建设部和中国质量监督检验检疫总局联合发布了GB 51151—2016《城市轨道交通公共安全防范系统工程技术规范》，规范要求城市轨道交通公共安全技术防范系统的各子系统应集合成为一个整体，并应由独立的安防集成平台统一进行管理。公司根据要求着力于开发城市轨道交通安防系统产品，本系统按照《UI设计规范》中的说明结合饿了么开源框架Element-UI对系统进行模块化设计如图1所示。

整体结构上拆分为“上中下”三段式布局。页面的顶部为系统logo、主菜单、登录信息、系统子菜单等部分，系统子菜单且当主菜单没有子菜单时，可通过v-if指令将其隐藏，页面的中间部分为系统应用的内容区域，页面的底部则为公司署名及版权信息。这样设计既能满足页面美观，也能够将业务模块单独拆分开，便于分发给不同开发人员进行页面开发。

在主菜单栏比较简单，最左侧为logo及平台信息，但中间的菜单栏则是由两部分组成，图标及文字，这种高重复性可以单独设计成一个组件，也可通过v-for指令直接进行列表渲染，此处为单独的组件进行统一维护。在主菜单栏的最右侧虽然图标看起来都是相同的，但是他们的点击事件不同，所以并没有单独封装为组件。

中间子菜单栏，结构比较简单，背景色加上菜单按钮，不需要单独拆分。而在内容栏，就需要根据业务模型来提前将模型构建好。

在系统的菜单中，【电子地图】【视频监控】【出入口控制】【入侵报警】【安全检查】【电子地图】模块内容部分都涉及左侧为树节点、右侧为地图模型，在各个模块再展现一些个性化的功能，如图2和图3所示。

以此可以单独拆分出两个组件：左侧的树形列表组件、右侧的地图组件。左侧的树形列表使用Element-UI自带的el-tree组件，简单配置参数即可展现出上图显示的效果，以【电子地图】【视频监控】部分代码为例如下：

【电子地图】左侧树结构示例代码：

：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'？>

…

【视频监控】左侧树结构示例代码：

？：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的方法函数处理上不同。【电子地图】的data是根据条件查询出对应的地铁站点信息，【视频监控】则仅查询包含监控的位置及监控设备的信息。在开发上，只用构建出相同结构的data信息就能展现出不同的内容。

通常一个应用会以一棵嵌套的组件树的形式来组织（见图4），在本系统中也可用树来进行表达z，树的根级部分为整个应用，子集分别为各个菜单功能模块，各个功能模块再进行拆分成多个模块构成，可以是form表单，可以是table列表，可以是简单的一个文字，也可以是复杂的地图等。通过科学的拆分，就像各式各样的砖块，将其填充至合适的位置最终垒砌成一个丰富的应用。

5 结语

本文在Vue.js的基础上分析城市轨道交通综合安防系统前端采用模块化开发的应用及设计，结合饿了么开源框架Element-UI构建出风格统一、高性能、高可维护的前端界面，利用模块化设计，更易把业务拆分给每个开发人员，提高开发效率，也跟上时代的步伐。

【参考文献】

【1】GB 51151—2016城市轨道交通公共安全防范系统工程技术规范[S].

【2】GB/T 38311—2019城市轨道交通安全防范通信协议与接口[S].

【3】GB 51151—2016城市轨道交通公共安全防范系统工程技术规范[S].