摘 要

园区安全报警处理系统，是一个提供报警信息管理、实时报警信息推送功能的处理平台。当发生意外校园事故时，安保人员及时被通知并快速赶往现场，可以极大程度的减轻事故所造成的伤害。同时，有效的管理校园报警信息，可以更清晰的了解安全工作的薄弱环节，便于优化安全工作。

本文通过分析园区对报警处理的需求，将WebSocket协议运用到一个基于SSM框架和Vue.js框架的园区安全报警处理系统中，以实现实时报警推送。首先介绍了开发框架的相关技术；然后给出了系统的用例、数据库表的设汁；最后介绍了系统主要模块的详细设计和具体实现技术，包括公告模块、用户模块、个人模块、报警模块、报警推送与订阅。

本系统可以完整地对整个报警处理流程进行协助，对今后的报警处理系统，或涉及到推送功能、管理功能的系统，有一定的参考价值。

关键词：SSM框架；Vue.js；实时Web系统；WebSocket；消息推送

Abstract

Garden safety alarm processing system is a processing platform which provides alarm information management, real-time alarm and information push function. When an accidental campus accident occurs, security personnel are notified in a timely manner and rushed to the scene, which can greatly reduce the damage caused by the accident. At the same time, effective management of campus alarm information, you can more clearly understand the weak links of security work, easy to optimize safety work.

In this paper, the WebSocket protocol is applied to a garden security alarm processing system based on SSM framework and Vue.js framework, in order to realize the real-time alarm push. First introduces the related technology development framework; gives the system use case, database table design; finally, the detailed design and implementation of the main modules of the system are introduced, including announcement module, user module, module, alarm module, alarm and push subscription.

The system can be complete to the entire alarm processing process to assist the future of the alarm processing system, or related to the push function, management functions of the system, there is a certain reference value.

Key Words：SSM framework；Vue.js；Real-time web system；WebSocket；message push

目 录

第1章 绪论 1

1.1 课题的背景及意义 1

1.2 国内外研究现状 1

1.3 论文组织结构 2

第2章 相关技术准备 3

2.1 前端技术 3

2.2 SSM框架 3

2.3 WebSocket协议 4

第3章 系统设计 5

3.1 系统概要设计 5

3.2 用例 6

3.2.1 所有用户公用用例 7

3.2.2 系统管理员用例 8

3.2.3 非安保用户用例 15

3.2.4 安保用户用例 17

3.3 数据库设计 20

第4章 系统实现 24

4.1 用户管理模块 24

4.2 首页公告模块 26

4.3 个人信息管理模块 27

4.4 报警模块 28

4.5 报警推送与订阅 30

4.6 登录注册模块 31

4.6.1 登录 31

4.6.2 注册 32

第5章 主要技术点 34

5.1 前端 34

5.1.1 界面组件 34

5.1.2 表单验证 34

5.1.3 前台过滤及格式化数据 35

5.1.4 完善其他界面 35

5.2 后台 36

5.2.1 对数据库进行增操作 36

5.2.2 对数据库进行查询操作 36

5.2.3 对数据库进行删操作 37

5.2.4 对数据库进行改操作 37

5.2.5 报警推送功能 37

第6章 总结 38

参考文献 39

致谢 40

第1章 绪论

1.1 课题的背景及意义

园区安全报警处理系统主要针对的是校园安全的处理。让青少年有一个安全的校园生活环境十分重要。目前，市面上针对校园的安全系统大多为硬件报警或监控系统，而并没有针对报警处理的系统。

当发生意外校园事故时，安保人员及时被通知并快速赶往现场，可以极大程度的减轻事故所造成的伤害。同时，有效的管理校园报警信息，可以更清晰的了解安全工作的薄弱环节，便于优化安全工作。

所以本园区安全报警处理系统设计了三大功能：用户管理、报警信息管理、报警信息推送。接收到报警信息时，可以录入报警相关信息；当有报警信息录入时，对具有相应权限用户终端进行实时报警信息推送；报警事件查询。

要让大多数人能随时随地不受操作系统限制的登录本系统，如果采用java开发Android应用和Swift开发ios应用都会让工作量翻倍。所以动态网页无疑是一种好的选择。Java web是目前广泛使用的动态网页开发技术^[1]。运用SSM(Spring SpringMVC MyBatis三个开源框架的整合框架集)、Vue.js（构建数据驱动的web界面的渐进式框架）、WebSocket协议（基于TCP的一种新的网络协议），易于修改维护。只要做一些适当的修改，本系统也可以其他其他园区的报警处理。

1.2 国内外研究现状

现在市面上有很多不同种类的管理系统，但并没有针对报警事件的开源管理系统。并且本文所描述的系统并不单单是报警管理，而且涉及到报警信息的消息推送。(本文描述的园区安全报警处理系统，在后文简称为“本系统”)。本系统可以完整地对整个报警处理流程进行协助，对今后的报警处理系统，或涉及到推送功能、管理功能的系统，有一定的参考价值。

本系统的后台采用SSM框架集。前端采用Vue .js。Vue.js 是尤雨溪在2014年2月开源的一个前端开发库，是高效、简洁、组件化的MVVM（Model-View-ViewModel）库。在2016年9月饿了么团队采用Vue2.0作为基础框架，实现了ElementUI组件库。