水质监测系统 毕业设计 SpringBoot +Vue+Nodejs+Mysql

作者主页：毕业设计精选

作者简介：9年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN博客专家

摘  要

当前的水质监控系统以 C / S 架构为主流，为了适应广域网监控的目的，提出以 SpringBoot+Vue 前后端分离的微服务 架构，通过发布/ 订阅消息服务器的消息，构建新型水质监测系统 。测试结果显示该系统可以完全替代基于组态软件二次开 发的 C / S 架构下的水质监测系统，实现更高效的、更大规模的互联网系统扩容。

关键词: 水质监控; 微服务; 互联网监控; SpringBoot; MQTT; Vue;

1   系统架构及平台部署

本水质监测系统包括水质监测终端设备及云服 务器 。云服务器包括 MQTT 消息服务器、后端服务 器、前端服务器、Mysql 数据库服务器 。结构图如 图 1 所示。

图 1    系统结构图

水质监测终端包括多参数水质检测仪及 4G DTU 模块，系统结构如图2 所示。

图 2   水质在线监测终端内部结构图

水质监测终端负责完成水质参数及 GPS 信息 的采集工作，并由 STM32F103 单片机进行系统管 理，采用串口通信技术，按照 GSON 字符串形式，定 时通过串口向 4G DTU 模块提交水质采集数据，4G DTU 采用 MQTT 通讯模式，连接 MQTT 消息代理服 务器，把该主题消息发布到消息代理服务器上，本消 息代理服务器采用 ActiveMQ 进行服务器端消息服 务器部署［7－8］。

后端服务器: 订阅来自 ActiveMQ 消息服务器的 消息，采用 SpringBoot 技术，对订阅主题消息进行解 析，然 后 把 消 息 字 符 串 转 换 为 JSON 数 据，纳 入 Mysql 数据库; 在后根据登录人员级别，把相关数据 推送给前端服务器 。在 SpringBoot 数据服务器开发 中，集成 Swagger2 组件，方便自动生成前端接口文 档，提高开发速度; 集成 Mybatis-plus 组件，方便对数 据库进行增删改查操作; 集成 Logback 组件，有利于 生成操作日志。

前端开发工作主要是完成数据显示及用户操 作，权限管理、地图标注、系统日志、数据库管理 。在前端开发中，Vue 以数据驱动和组件化开发为核心， 更适合监控系统的数据绑定，因此在开发工具选择  方面，选择 Vue 技术为前端开发技术支撑 。开发平  台采用 Node．js+Webpack+Vue+ElementUI+Axios 搭  建 。Vue 组 件 对 数 据 进 行 视 图 的 绑 定，其 Model- View-View Model( MVVM) 的开发模式也使得前端  开发从原来的 DOM 操作解放出来，只需关注数据  的变化，代码更易维护 。ElementUI 方便本系统对视  图的渲染，Axios 用于连接前后台数据互换; 由于本  设计监控主要应用于网页端，如果应用于手机端，可  以引入 MintUI 进行布局，生成手机端 APP，更方便  手机浏览 。前端开发引入 Echart 组件及高德地图  组件，通过 Vue 引入数据，方便进行曲线显示、地图  定位标注，从而增强数据可视化及人机体验。

2   系统关键技术实现

2．1   水质监测数据采集及调试

水质监控终端，考虑要与云服务器进行通信，设 计中选择 MQTT 协议，其水质监测终端的软件流程参 考图 3 所示，其通讯数据流采用 Gson 字符串格式。

图 3   水质监测终端软件流程图

2．2    消息代理服务器

采用 ActiveMQ，安装部署在云端服务器上，根 据 MQTT 协议发布/ 订阅通信原理，设计相应的主题 Topic。

设备主题( Topic) 为: water / { deviceID} ，一级主 题代表水质，二级主题为设备唯一序列号 ID;

后端 SpringBoot 数据服务器订阅主题: water / ， 则后端服务器可以订阅所有 water 主题下的消息 。   2．3   后端数据服务器设计

在水质监测系统设计中，其数据库设计，参考工 控组态软件中数据库结构，工控组态软件一般包括实 时数据表、历史数据表、报警设定表、报警数据表，管 理人员数据表; 本数据库设计在吸收工控系统优点的 情况下，增加用户与设备绑定表，用于把管理员与其 管理区域、权限进行绑定; 用户菜单表，根据用户权限推送不同的操作菜单。如下为本系统数据库表结构。 ( 1) 用户数据表

包含字段为用户 ID ( userid) 、用户名( name) 、 手机号( tel) 、管理权限( level) 、管理区域( zone) 、创  建时间( createtime) 字段，该表相当于组态软件中用  户管理。

( 2) 设备实时数据表

表结构包含设备唯一序列号 ID，所处区域、IP 地址、MAC 地址、各种水质参数、GPS 经纬度等数 据 。当水质监测终端发布主题消息，因后端数据服 务器订阅了来自 water 主题下的所有消息，所有可 以收到来自消息代理服务器 ActiveMQ 的所有该主 题消息推送; 后端服务器在侦听到相应主题消息，把 数据刷新到设备实时数据表，该表相当于组态软件 实时数据词典。

( 3) 历史数据表

当设备实时数据表数据刷新时，采用 Mysql 触  发器把实时数据表该记录根据当前时间增添到历史  数据表中 。历史数据表设计为当前时间、设备 ID、 各种水质参数、GPS 经纬度; 该表主要用于每台在  线设备历史数据存储，供数据前端可视化查询 。该  表相当于组态软件数据存入历史数据库。

( 4) 报警设定表

该数据表根据用户所处区域，对该区域水质监 测设备的参数上限、下限、上上限、下下限，进行设 定 。后台服务器侦听消息服务器推送消息，把消息 解析后，根据设备 ID 查询该表，把数据与参数的报 警值进行比较，当触及报警限制时，把报警数据插入 报警数据表，该表相当于组态软件中报警设置。

( 5) 设备用户绑定表

用于记录用户与设备的映射关系，设备唯一序  列号 devicesID、用户唯一标识 userID，当后端服务器  侦听到消息服务器推送消息，对消息进行解析，获取  设备 ID，查设备用户绑定表，可获取用户 ID、权限、 区域，根据具体要求向前端推送数据，达到精确推送  的要求。

( 6) 报警实时数据表

数据库字段包括报警时间、报警设备、报警参 数、报警级别，报警处理字段 。该表相当于组态软件 中实时报警。

当数据报警时候，纳入报警记录，将报警处理值 设置为 0，当报警处理结束，报警处理值设为 1，表示 已经处理该报警 。网页端通过Axios 的 Get 方法，调 用后台数据中心接口，查询报警数据表，获取报警数 据，渲染到网页上。

( 7) 报警历史数据表

该表用于记录系统报警历史数据，通过报警实 时数据表刷新触发插入报警历史数据，供前端进行 报警历史分析及查询，该表相当于组态软件报警历 史数据库。

( 8) 用户菜单表

根据用户注册信息，当用户登录后，根据权限、 区域，获取用户个性化导航栏相关数据、颜色等菜单  数据，该表用于个性化前端导航栏，传统组态软件无  法实现。

2．4   后端服务器开发

在后端服务器，主要负责消息订阅/ 发布，根据数  据库设定信息，进行相关逻辑业务操作，并把数据推  送给前端服务器。后端服务器采用 SpringBoot 技术， SpringBoot 采用 AOP 开发理念，采用注解编程，采用  容器技术，把需要的模块添加到相应的容器中。开发  中，采用 Maven 技术构建数据仓库，通过 pom．xml 引  入相 关 依 赖。在 本 项 目 中，注 入 ActiveMQ client、 SpringBoot-web-starter、Mybatis-Plus、Mysql-Connector、 Swagger2、Lombok 等组件。

( 1) 新建 config 类，利用 mybatis-plus  自动代码

生成器创建部分通用代码［9］。

对于 SpringBoot 软件开发，其对数据库的操作， 正常包括增删改查操作、采用步骤基本一样，首先配  置数据库:

在 application．property 文件中配置数据库基本 信息及消息服务器配置及其他信息。

创建实体类: 为每个数据表格创建实体类，通过 Lombok 插件的@ Data 注解 自动设置 Setter，Getter 方法 。用于存放我们的实体类，与数据库中的属性 值基本保持一致。

创建数据库接口 DAO 层，通过 @ Repository 注 解对数据库进行数据持久化操作，完成数据库操作 的逻辑映射 。通过@ MapperScan 注解，注入主程序 管理。

为每个实体类创建 Services 接口及 Services 执 行方法。

为每个实体类创建控制层 Controller; 通过@   RestController、@ GetMapping、@ Postmapping 注解的  使用，完成接收前端传过来的参数进行业务操作，再  将处理结果返回到前端，实现前后端数据参数传递。  在 配 置 完  application．property  后，可 以 采 用  Mybatis-Plus 代码生成器［10］，自动生成通用的的数  据库操作部分代码，把软件开发人员从重复劳动中  解脱出来 。通过 test 类执行代码，自动生成上述操作代码 。配置 Swagger2，采用注解的方式自动生成 前端接口文档，省去编写前端接文档的麻烦，提高工 作效率。

( 2) 注入消息侦听处理逻辑

当侦听到所订阅的消息主题，解析消息内容: 首  先把消息字符串由设备端的 ASCII 码转 UTF－8 码， 消息内容统一规定为 Gson 字符串形式，把 Gson 字  符串 解 析 为  Gson 数 据，调 用 设 备 实 时 数 据 表  Services 接口中插入方法，插入方法调用 DAO 层数  据库操作映射逻辑，把数据写入设备实时数据表，同  时在数据库中，实时数据表数据刷新将触发数据插  入到历史数据表的操作，实现历史数据保存; 查询设  备报警设定表，把 Gson 数据与报警设定数据进行比  较，当满足报警条件，把报警数据写入报警实时数据  库，为报警实时数据库配置插入数据触发写入报警  历史数据库方法，实现报警历史数据库保存。

( 3) 在控制层，编写控制层 Controller 接口:

用户登录后，根据权限，采用 Get 方法，查询用 户菜单表，个性化生成操作界面。

①根据用户权限及分管区域，通过添加设备，通 过录入设备 SN，设备 SN 也就是设备内部 MQTT 消 息主题号，插入更新到设备用户绑定表，完成设备与 用户的绑定。

②为每台设备做报警设置接口，定义监控参数 的上限、上上限、下限、下下限，以记录形式插入报警 设置表，为其编写接口方法。

③定时查询设备实时数据表，返回当前最新的 实时数据，根据用户分管区域实现对其管辖区域内 设备精确数据条件查询。

通过上 述 程 序 模 块 的 定 义，及 程 序 化，配 置 Swagger2 类，统一生成用户后端 API 接口，为进一步 前端开发做完准备工作 。通过 Swagger2 生成的接 口文档如图 4 所示。

图 4   通过 Swagger2 生成数据中心接口文档

2．5   Web 前端关键功能整合

前端开发任务为监控数据的可视化 。首先利用 Visual Studio Code 平台，采用 Vue+ElementUI+Axios+Echart+高德地图等插件，完成前端开发平台搭建。 然后统一外部数据接口、跨域设置、状态存储的定义， 实现如下功能:

( 1) 人员登录管理: 对管理人员进行增添、删除、 权限分配操作; 该功能实现通过 Axios 传参，调用后台  用户 SpringBoot 的 API 接口获取数据，渲染到网页模  块上，通过 SpringBoot 实现与数据库的交互。

( 2) 设备配置: 根据设备唯一序列号 SN，完成设  备添加，设备报警参数设定，设备人员绑定设定，通过  API 接口，写入数据库相应的表中。当数据中心侦听  到 MQTT 消息后，获取消息内容、解析消息后，将根据  设备唯一序列号 SN 查询报警设定表数据，与之比较， 决定数据是否产生报警信息，纳入报警数据库，而后  根据权限或地域把设备参数数据及报警数据进行网  页精准推送。前端设备配置界面如图 5 所示，包括设  备添加、报警设置、设备人员绑定配置。

( 3) 设备数据前端显示，根据权限，通过调用数 据中心设备实时数据表的 API 查询接口，完成实时数

图 5   设备配置页面

据获取，渲染到网页上; 通过调用数据中心历史数据 表的 API 查询接口，获取不同设备的历史数据，渲 染到网页的Echart 组件上，完成历史曲线等图形化 显示; 获取设备的 GPS 位置信息，通过调用网页中 的高德地图组件，标记在高德在线地图上，完成地图 上设备的标定 。如图 6 所示。

图 6   设备地图在线标记

3   系统分析与展望

本系统设计的亮点为采用前后端分离的软件设  计模式，搭建基于微服务的监测中心，后端数据中心  与前端显示分别架构，突破传统 C / S 模式下监控中  心封闭性、其他系统无法接入的难题，本系统架构为  新的开放式架构 。其后端数据中心只要通过授权， 即可通过 API 接口访问该中心数据; 其前端视图页  面可以接口各种互联网资源，与组态软件二次开发  的监控系统比较，参考表 1。

表 1   与组态软件二次开发的监控系统比较

性能参数	组态软件二次开发监控系统	本系统
网络通信高并发问题	小规模设备接入，消息轮询，无高并发解决方案	设备无限接入，通过集群、消息代理技术解决
网络形式	局域网	广域网、局域网
数据库管理	简单的 ODBC 连接	Mybatis 等优秀持久层架构
操作系统	Windows 系统	各种操作系统
价格	付费	开源代码，免费
池化技术	无	消息连接池化、数据库池化、内存池化
前后端分离技术	无	采用 MVVM 模式
人机界面	固定分辨率，固定布局，仅 Windows 系统下可以浏览	栅格布局，界面更友好，支持 html5，andriod，ios 等系统
接口互联网资源	借助浏览器插件接入	通过 Vue 管理，接入各种开放式互联网资源
适用场景	中小型控制系统	大型控制系统
开发难度	简单	复杂

与架构在公网的物联网平台比较，本设计方法更 灵活、可以布局在专用网络中，避免网络攻击，安全性 更好; 同时也避免了对其他资源平台的技术依赖。

前后端分离的服务器开发模式，在前端采用 Vue 技术，ElementUI 组件设计页面，其人机体验远 高于传统工控组态软件开发的页面布局。

由于项目处于系统测试阶段，设备较少，在后端 SpringBoot 架构中，涉及内存数据库操作没有引入Redis 模块进行服务器内存管理，随着未来设备的扩  容，将引入 Redis 技术作为补充，以减轻关系数据库  的查询压力，提高系统的处理速度及解决高并发问题  的能力，在前后端通讯方面，如采用 Websocket 技术， 实现后台采集数据的前端推送，将优化系统性能。

在测试阶段，没有引入设备自动注册的思路，采 用出厂唯一序列号作为标识，在设备大批量生产阶 段，将造成出厂前，每次烧写程序都要修改芯片中序列号，不利于大批量生产，在后期将引入设备互联网 自动注册方法，由服务器分配序列号，传给设备，自 动写入 STM32 单片机的 NAND 存储器，也就是分配 其 MQTT 通信的主题，以适应大批量生产的要求。

4    总结

在本设计中采用工厂化软件设计思路，探索一 种采用互联网+ 的模式下改造传统水质监控系统的 方法 。测试结果表明，该方法可以完全替代传统的 基于组态软件的水质监测系统，相当于充分利用互 联网资源对传统监控系统进行升级改造 。此设计方 法同样适用于其他智慧环保，智慧城市、智慧工厂等 大型自动化项目的工程设计。

参考文献:

［1］  杨员，张新民，徐力荣，等．美国水质监测发展历程及对中国启示［J］．环境污染与防治，2015，37( 10) : 86－97.

［2］  刘立．MVVM 模式分析及应用［J］．微型电脑技术，2012，28 ( 12) : 57－60.

［3］  易见波．基于 MVVM 模式下的前端框架研究［J］．信息与电 脑，2016，19( 4) : 77－79.

［4］   Spring．io．springboot2．x  quickstart  quickstart［EB / OL］．［2018 - 03－01 /2020－05－04］．https: / / spring．io / quickstart.

［5］  Vue．js．渐进式 JavaScript 框架［EB / OL］．［2016－10－01 /2020- 05－04］https: / / cn．vuejs．org.

［6］   IBM，Eurotech．MQTT V3．1 Protocol Specification［EB/ OL］．［2014- 02－10 /2020－5－04］ http: / / public．dhe．ibm．com / software / dw / webservices /ws－mqtt / MQTT_V3．1_Protocol_Specific．pdf.

［7］  王松．Spring boot+Vue 全栈开发实战［M］．第 1 版．北京: 清华 大学出版社，2019: 214－218.

［8］  Apache．Flexible＆Power  Open  Source  Multi-Protoco  lMassaging ［EB / OL］．［2019－09－20 /2020－05－04］ http: / / Activemq. apache．org.

［9］  Mybatis-Plus．Mybatis-Plus  Quick  Start［EB / OL］．［2020－01 - 17 /2020－05－04］https: / / mp．baomidou．com / guide / .