基于Spring Boot的云端数据监控管理与可视化应用系统①

杜英魁,王 杨,关 屏,彭 跃,赵丽娟,刘 枢

1(沈阳大学 信息工程学院,沈阳 110014)

2(沈阳恒源伟业环境检测服务有限公司,沈阳 110003)

3(辽宁省环境监测实验中心,沈阳 110161)

近年来,随着国家经济结构的转型,推动经济高质量发展,对于环境问题越来越重视.而空气污染依旧经是环境保护中的一个顽疾,空气质量的优劣直接关系到人民的日常生活,对人们的健康有着直接的影响,能否获取空气质量相关最新的信息,对人们来说越来越重要[1].许多国内外学者进行了相关系统的开发与研究分析.史姣姣等建立了基于物联网的PM2.5监测系统,实现了硬件设计与针对PM2.5在线监测Web 平台,实现了手机实时查看与统计分析[2].程家盼实现了基于GIS 技术的空气质量数据可视化,采用先进的AcrGIS平台对空气质量监测数据进行可视化研究[3].周剑等设计并实现了基于多种交互方式的分布式空气质量监测系统,构建了云端数据交互、三维可视化交互等模块[4].然而这些空气数据监测或可视化系统要么数据过于单一,要么对于数据未能实时可视化.

同时,各种软件架构更新迭代造成了巨大的资源浪费,为了降低软件产品的耦合性,各种微服务框架应运而生[5].因此采用了目前国内外最流行的微服务框架Spring Boot 来进行本系统的搭建.同时系统使用Vue 来实现前端页面开发,Vue 支持双向数据绑定,可以使用Axios 实现复杂的逻辑交互,实现了系统对于数据实时监控管理与实时可视化的需求[6].

1 云端空气质量数据

本系统主要针对传输到云端的空气数据的进行监控管理与可视化开发而搭建.数据由空气监测无线传感器设备进行在线采集,采用自定义协议长连接实现传输,云端再接收、读取、解析.将解析完的最新数据缓存到Redis 数据库,每天固定时间再存储到MySQL数据库中.如发生失误导致信息未能及时上传,恢复通信后也会补传数据.Redis 数据库与MySQL 数据库结合作为数据存储的载体,不仅保证数据的不丢失、不冗余,同时也是本系统业务逻辑的承载体,是系统的核心组成部分[7].系统数据库解析存储的空气数据有:细颗粒物(PM2.5)、可吸入颗粒物(PM10)、二氧化硫(SO2)、二氧化氮(NO2)、一氧化碳(CO)、臭氧(O3)、温度、湿度、甲醛等.空气质量数据库表设计如表1.

表1 空气质量数据库表设计

2 系统关键技术

2.1 Spring Boot 微服务

Spring Boot 微服务实际上是大量开源库的集合,自配Tomcat,Jetty 容器,无需部署WAR 包只需在pom.xml 中写好相关依赖,减少了系统开发的繁琐[8].Spring Boot 框架下有着完善的MVC 设计模型支持,对于项目的配置工作采用自动化配置的方式,使得在Spring Boot 环境下进行MVC 模式的开发变得尤为简单[9].Spring Boot 还提供REST 获取进程运作期参数来进行监控,本系统主要为GET、POST、DELETE 等分别用于获取资源、新建资源、删除资源等.本系统需要对MySQL 数据库的增删查等操作,所以系统使用MyBatis 编写SQL 语句来实现,采用JDBC 与数据库建立连接[10].

2.2 前端Vue 框架

前端Vue 框架是一款渐进式MVVM 框架,使用node.js 技术,安卓vue-cli 脚手架构建工具,由vuerouter 配置路由,使用Axios 插件封装的Ajax 进行数据交互,实现数据持久化,保证良好的用户交互体验[11].

2.3 百度地图API

目前国内外各大互联网公司均推出了各自的地理信息服务平台,如高德地图、百度地图、谷歌地图等[12].考虑本系统开发环境、功能需求等因素,采用百度地图作为数据可视化开发的重要平台.百度地图API 是百度公司免费开放的一系列地图服务接口,开发者在获得接口使用权限后即可在自己的系统中使用地图服务[13].本系统可视化开发需要百度地图API 提供的热力图、覆盖物类等功能来完成.

2.4 云服务器

在阿里云官网上申请账号,就能拥有自己的云主机,并可以进行属于自己的相关部署,例如安全规则等,然后就可以对外服务.通过MobaXterm 工具连接阿里云服务器,安装JDK、Tomacat 等相关配置,搭建好的Web 项目,将打包好的.war 文件上传到Tomcat 的webapps 文件夹下,在浏览器中连接公网IP,即可访问已部署好的Web 项目[14].

3 系统总体设计

本系统的前端实现数据监控下载、报警管理、百度地图可视化的页面.后端主要包括API 接口、数据库操作模块、采集到的云端数据.用户可以直接通过node.js 发出各种指令,如:查询数据、删除数据等.后端根据请求内容对存储在数据库中的云端空气质量数据进行读写操作,并将请求结果返回页面,然后页面进行更新.通过Axios 封装的Ajax 技术作为中间层实现前后端请求响应与数据交互,使用JavaScript 向后端发出请求并处理响应,通过XML 与HTTPRequest 对象可以在不重载页面的情况下实现前后端数据交互[15].中间层的存在,实现了前后端分离.系统总体框架如图1.

4 系统总体实现

4.1 数据交互实现

本系统中数据交互模块是非常重要的一部分,Axios 插件中封装的Ajax 技术使用前端技术来实现数据交互(请求-获取-处理的过程),在实现前后端分离后,后端更专注于业务逻辑和数据处理[16].Spring Boot 框架完全支持REST 开发规范,通过“@RestController”注解的使用即可实现对控制器的声明和响应,将系统的数据格式自动转化为JSON 格式[17].数据真正的交互在于这个JSON 数据的请求和返回.JSON 的本质是JS 对象以键值对呈现的字符串.而“@RequestMapping(value="/device",method={RequestMethod.DELETE,RequestMethod.GET,RequestMethod.POST,RequestMethod.PUT},produces={"application/json;charset=UTF-8"})”注释是用来限制整个类中的请求方法和定义类的URL.表2为本系统定义的部分API接口信息列表.

图1 系统总体框架图

Ajax 以轮询的方式实现使用异步调用,传递数据方式主要有两种:GET 是从后端获取要渲染的数据,而POST 则是向后端传递要添加或者处理过的数据.前端拿到传递过来的JSON 数据,因为后端有一个对象转化为JSON 字符串的过程,所以JSON 数据传递到前端后,也有一个数据解析/解读的过程[18].应用解析好的数据,页面进行内容填充或者局部动态更新.反过来前端向后端传递改变的数据,也会打包成JSON 字符串形式,后端再进行响应与数据解析,再完成对数据库的读写操作.

表2 部分API 接口信息表

4.2 前端页面实现

出于对业务需求的分析,系统需要实现多个功能来完成对数据的实时监控管理与可视化开发.主要实现的功能为:数据监控下载、报警管理以及百度地图可视化.在浏览器中连接相应的公网IP 地址,用户就可以看到系统功能页面的实现,从而进行使用.

(1)数据监控实现

系统需要对云端的数据实现监控管理,输入想要查看的设备号,前端通过GET 请求获取到全部云端空气质量数据,在浏览器的页面通过表格的样式进行渲染,表格随的数据更新不断刷新.使得用户更加清晰观察数据更新状态.实现效果如图2所示.

图2 数据监控图

(2)数据下载实现

系统拥有对云端的数据进行备份下载的功能,输入要下载数据信息(即设备号、时间段),查看点击确定后便可选择下载,页面实现效果如图3所示.

(3)报警管理实现

系统需要对上传云端数据状态进行监控,通过查询设备最新数据上传的时间与上一次上传的之间间隔确定上传数据的状态,如果超过15 分钟依然未有新的上传数据,该设备ID 将被标红.用户可以对报警的设备进行管理,可以删除或许修改信息.页面每隔3 分钟刷新一次,实现方法为:window.setInterval(code,180 000).实现效果如图4所示.

图3 数据下载图

图4 报警管理图

(4)百度地图可视化实现

百度地图可视化是本系统主要的可视化展示方式,百度地图API 提供了向地图添加自定义标注覆盖物的功能[19].开发通过移除旧标注的“removeOverlay 方法”和添加新标注的“addOverlay 方法”来实现设备与数据值报警百度地图可视化.用标注颜色来反映设备上传数据的状态或监测的数据超标情况,页面也是每隔3 分钟刷新一次.百度地图报警可视化页面如图5所示.

同时百度地图提供了热力图这一非常流行的地图可视化功能,其主要就是将要素密集程度用特殊而高亮的方式来展示,叠加在网络地图上的不同颜色来描述该地区中空气污染分布情况[20],本系统中紫色表示空气污染程度最深、橙色次之、绿色表示程度最轻,每隔3 分钟刷新一次页面.其中PM2.5热力图可视化页面实现效果如图6所示.

图5 地图报警可视化

图6 PM2.5 热力图可视化

5 结论与展望

本文虽然初步搭建起了对云端数据实时监控管理与可视化应用系统,但本系统对采集的空气数据可视化处理还不够完善,可以尝试使用R 语言或Python 等强大的数据处理分析语言进行更多的可视化分析.该系统是一项网络化、高效化、现代化的数据管理与可视化展示平台,在其构建并成功运行的过程中,认识学习了很多相关技术知识,为后续开发工作打下基础.