杜春艳　成卓

摘要：大气环境问题日益严重，为了实时监测大气环境数据，利用微服务架构搭建前后端模块，设计了大气环境监测系统。系统包含七大功能模块：大气环境监测模块、天气查询模块、疫情防控模块、定位模块、用户管理模块、实时光照强度监测模块以及图像采集模块，对这些模块分别进行了设计和实现。测试结果表明，该系统能够很好地监测大气环境数据。

关键词：微服务;大气环境监测;功能模块

中图分类号：TP311 文献标志码：A 文章编号：1008-1739（2021）11-68-6

0引言

工业飞速发展使得人们生活水平日益提高，也使得环境污染日益加剧，尤其是大气污染，污染源增加、污染范围不断扩大，严重影响了人们的身体健康和国家的长远发展。根据2020年2月11日联合国环境规划署、联合国人居署及瑞士空气质量技术公司IQAir共同发布的全球最大的空气质量数据，汇集4 000多个贡献者提供的实时空气污染数据，触达用户超过1500万人，覆盖全球7000多个城市。全球每年有700万人死于空气污染，其中65万是儿童。

建立健全高效的大气环境监测系统，可以实时检测整个区域，分析区域空气质量整体状况和变化趋势、实时发布整个区域的空气质量。而且随着监测数据的积累，可以进一步开展大数据分析和深度挖掘，或者污染起源解析、聚类分析等科研应用。从而实现城市区域大气污染浓度的时空动态变化趋势分析，对污染源起到最大程度的监管作用，为环境执法的决策提供直接依据，所以建立此系统是非常必要的。

1关键技术

1.1 Spring Cloud

Spring Cloud是一个基于Spring Boot实现的服务治理工具包，在微服务架构中用于管理和协调服务，是一系列框架的有序集合，利用Spring Boot的开发和便利性巧妙地简化了分布式系统基础设施的开发，如配置中心、消息总线、负载均衡等，都可以用Spring Boot的开发风格做到一键启动和部署。

Spring Cloud将目前各家公司开发的比较成熟、经得起实际考验的服务框架组合起来，通过Spring Boot风格进行再封装，屏蔽复杂的配置和实现原理，最终给开发者留出一套简单易懂、易部署和易维护的分布式系统开发工具包。

1.2 Spring Boot

Spring Boot是由Pivotal团队提供的全新框架，用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置，就能创建一个独立的、产品级别的Spring应用。SpringBoot的核心思想就是约定大于配置，多数Spring Boot应用只需要很少的Spring配置。采用Spring Boot可以大大简化开发模式，所有需要集成的常用框架，Spring Boot都有对应的组件支持。

1.3 layui与EChalns

layui是一款采用自身模块规范编写的前端uI框架，遵循原生HTML/CSS/JS的书写与组织形式，对使用者的能力要求比较低。layui的外在极简却功能丰富，从核心代码到API都经过精心打磨，无需各种前端工具的复杂配置，非常适合页面的快速开发。

ECharts是一个使用JavaScript实现的开源可视化库，可以流畅运行在PC和移动设备上，兼容当前大部分浏览器，可以提供直观、交互丰富的数据可视化图表。

2系统功能与设计

大气环境监测系统主要有七大功能模块，分别是定位模块、大气环境监测模块、天气模块、疫情防控模块、用户模块、实时光照强度监测模块和图像采集模块，每个模块分为前端与后端2个部分，整个系统的功能模块结构如图1所示。

2.1定位模块功能设计

2.1.1前端功能设计

在页面中使用HTML5中地理定位API获取当前所在位置的经纬度，传递给后端。

2.1.2定位模块后端功能设计

为了提供更准确的服务，很多网站都会获取用户当前所在的地理位置。该系统的核心功能之一就是获取当前所在地理位置，确定所在城市。

目前比较常用的获取地理位置的方法有2种：一种是通过本机IP地址获取，利用IP地址去查询特定数据库，该数据库是经过长时间的数据累积而成，经过比较之后可以从数据库中提取相应的地理位置信息;另一种方法是使用HTML5中地理定位API获取当前所在位置的经纬度，然后将抽象的经纬度转换成可读的有意义的真正的用户地理位置信息，系统采用的是第2种HTML5方法。

2.2大气环境监测模块功能设计

2.2.1前端功能设计

用户登录成功后进入大气环境查询平台的大气环境监测页面，导航栏中向用户展示了城市大气环境监测的简要信息，包括日期、星期、城市以及空气质量指数（AQI）。

页面初始化地理位置为北京市，用户可点击定位按钮更改地理位置，获取当前所在城市大气环境监测各项数据，也可通过在搜索框中搜索，得到所需城市的大气环境监测数据。由于大气环境监测站点并不是在所有城市都有分布，所以在搜索框中输入关键字时会出现城市提示，只能输入在搜索框下拥有提示的城市。

在页面的主体部分用表格展示了城市大气环境中6种污染物在大气环境中的浓度、当前大气中的主要污染物以及AQI。为了方便观察各污染物浓度变化，在页面中以折线图的方式将近15天SO₂、NO₂、CO、O₃、PM2.5、PM10、PM2.5、PM10和空气质量指数浓度变化予以展示。

2.2.2后端功能设计

本系统的核心数据管理之一是大气环境监测数据信息管理，用户能在前端看到城市的大气环境监测数据。用户发送大气环境监测请求之后，大气环境监测功能开始运作。系统获取当日大气环境監测数据以及近15天大气环境监测数据。成功获取大气环境监测数据之后将数据写入数据库，当用户再次发送大气环境监测请求时，不需要重新获取大气数据。

用户执行定位功能，系统重新获取当前所在城市的大气环境监测数据以及当前城市近15天大气环境监测数据。成功获取大气环境监测数据之后将数据写入数据库，当用户重新发送定位请求时，不需要重新获取大气数据。如果当前定位城市未建立大气环境监测站点，则会将城市修改为当前城市所在地的省会城市。

用户在输入框中输入所需要的城市时，由于并不是所有城市都建立了大气环境监测站点，所以查询的城市是有限制的。在用户输入时会出现提示，防止用户输入的城市没有大气环境监测站点，无法获取大气环境监测数据。输入合法城市之后，系统会获取当前所查找城市的大气环境监测数据以及当前查找城市近15天大气环境监测数据，成功获取大气环境监测数据之后将数据写入数据库，当用户再次查询该城市时，不需要重新获取大气数据。

2.3天气模块功能设计

2.3.1前端功能设计

点击天气查询后进入大气环境查询平台的天气信息查询页面，导航栏中向用户展示了城市天气的简要信息，包括城市、天气、最高气温、最低气温以及空气质量等级。获取当前所在城市天气情况的各项数据，也可通过在搜索框中搜索，以得到所查询的城市的天气情况。

在页面的主体部分用表格展示了城市实时气温、天气、日温、夜温、风向、风力等级、风速、空气湿度、空气质量以及出行建议。为了方便观察，了解气温变化，在页面中以折线图的方式将近15天每天最高气温与最低气温，空气湿度变化予以展示。

2.3.2后端功能设计

天气数据信息管理也是本系统的核心数据管理之一，系统后端实时获取天气数据，然后进行相关处理之后存入数据库，前端页面才有数据可以展示。

用户发送天气查询请求之后，天气功能开始运作。成功获取天气数据之后将数据写入数据库，当用户再次发送天气查询请求时，不需要重新获取天气数据。

用户点击定位按钮，执行定位功能成功之后系统获取到当前所在城市，系统重新获取当前所在城市的天气数据以及当前城市近15天的天气数据。成功获取天气数据之后将数据写入数据库，当用户重新发送定位请求时，不需要重新获取天气数据。

2.4疫情防控模块功能设计

2.4.1前端功能设计

点击“全民战‘疫”后进入最新疫情信息显示页面，向用户展示最新的疫情资讯报道，国内外最新的详细疫情信息，包括现存确诊人数、累计确诊人数、现存疑似人数、累计治愈人数、累计死亡人数、现存重症人数、新增疑似人数、相比昨天现存确诊人数、相比昨天累计确诊人数、相比昨天新增治愈人数、相比昨天新增死亡人数以及相比昨天现存的重症人数。

2.4.2后端功能设计

疫情信息管理是本系统的数据管理之一，系统后端获取到了当天疫情数据，数据包括疫情资讯以及国内外疫情数据，然后存入数据库，前端页面才有数据可以展示。

3功能实现

3.1用户模块前端登录页面、注册页面实现

3.1.1页面分析

页面基于前端框架layui，配合HTML5、CSS、JavaScript共同设计完成的，追求简单、直观实用。登录页面是平台启动打开的初始页面，用来输入用户名与密码。若用户未使用过平台，则需要进入注册页面进行新用户注册。用户可在注册页面自定义用户名，输入密码以及确认密码。页面效果如图2和图3所示。

3.1.2页面实现

登录页面的主要功能是将用户名与密码提交给后端。页面使用input标签接收用户输入的用户名与密码，使用form表单封装数据。为form添加action="/userLogin"响应，点击登录button之后，表单将以post的方式带着表单中的数据一起發起请求。

注册页面的主要功能是将新用户的注册信息提交给后端。页面使用input标签接收用户输入的用户名、密码以及确认密码，编写js代码，使用layui的表单校验功能判断用户所输入的用户名是否符合规定以及2次输入的密码是否一致。使用form表单包装数据，为form添加action="/userRegister"响应，点击立即提交button之后，表单将以post的方式带着表单中的数据一起发起请求。

3.2大气环境监测模块前端页面实现

3.2.1页面分析

用户登陆成功之后，第一个页面是大气环境监测页面，主要展示城市大气环境监测数据，近15天空气中6种污染物在大气中的浓度变化以折线图形式展示，页面效果如图4所示。

3.2.2页面实现

由于用户登录信息保存在cookie中，编写js代码从cookie中获取用户登录信息。若cookie中存在登录信息，修改页面标签将请登录修改为该用户的用户名。后端定义首次访问城市为首都北京，由于页面使用Thymeleaf模板引擎，可以使用${}获取request域中的大气环境监测数据并在相应位置显示，使用layui表格组件，展示完整大气环境监测数据。

使用隐藏input标签接收6种大气污染物历史含量列表，编写js文件使用echags将数据列表转换为图表。

用户点击定位按钮，页面利用HTML5地理位置属性，获取当前地理位置经纬度，携带经纬度信息发送ajax请求给后端。在ajax执行成功之后的回调函数中，大气环境监测数据已经更新。通过ID获取指定标签，修改其内容，完成页面重新渲染。

用户在查询框中输入城市名，由于大气环境监测站点有地区限制，需要提醒用户所输入的城市是否存在站点，并给出城市提示。当用户在input中输入时，监听用户所输入的内容，携带此内容发送ajax请求到后端，在ajax执行成功之后的回调函数中遍历后端返回数据，不为空则紧贴输入框下动态添加标签显示城市提示信息，输入框失去焦点后，删除所有提示标签。为搜索按钮绑定onclick事件，用户输入合法城市后点击搜索按钮会发起携带搜索信息的ajax请求，在ajax执行成功之后的回调函数中，大气环境监测数据已经更新。通过ID获取指定标签，修改其内容，完成页面重新渲染。

3.3天气模块前端页面实现

3.3.1页面分析

天气页面实时展示城市天气数据，未来7天的天气预报以及将近15天的最高气温、最低气温和空气湿度变化以折线图形式展示，页面效果如图5所示。

3.3.2页面实现

用户点击左侧天气标签之后，页面跳转至天气页面。由于用户登录信息保存在cookie中，编写js代码从cookie中获取用户登录信息，若cookie中存在登录信息，修改页面标签将请登录修改为该用户的用户名。后端定义首次访问城市为首都北京，由于页面使用Thymeleaf模板引擎，可以使用${}获取request域中的天气数据并在相应位置显示，使用layui表格组件，展示详细天气数据。编写js文件遍历七日天气预报信息列表，动态添加li标签展示天气预报信息。将此部分的display属性设置为影藏，点击7目标签选项，将今日详细天气数据列表display属性修改为行藏，将天气预报模块display属性修改为展示。点击今日标签选项，将今日详细天气数据列表display属性修改为显示，将天气预报模块display属性修改为隐藏。

使用隐藏input标签接收历史最高气温、最低气温和空气湿度数据列表，编写js文件使用echarts将数据列表转换为图表。

用户点击定位按钮，页面利用HTML5地理位置属性，获取当前地理位置经纬度，携带经纬度信息发送ajax请求给后端。在ajax执行成功之后的回调函数中，天气数据已经更新。通过ID获取指定标签，修改其内容，完成页面重新渲染。

用户在查询框中输入城市名，为搜索按钮绑定onclick事件，用户输入城市后点击搜索按钮会发起携带搜索信息的ajax请求，在ajax执行成功之后的回调函数中，大气环境监测数据已经更新。通过ID获取指定标签，修改其内容，完成页面重新渲染。

3.4用户模块前端个人信息页面实现

3.4.1页面分析

用户在信息管理页面可以补全用户信息以及修改密码等除用户名外的所有信息。页面效果如图6所示。

3.4.2页面实现

用户在注册时只定义了用户名与密码，用户在登录成功之后可以进一步完善用户信息。使用input标签接收用户输入，编写js代码使用layui表单校验组件，校验用户所输入的各项数据是否符合规定。使用form表单封装所有数据，为表单绑定action响应函数，用于点击提交按钮，表单以post方式提交数据。

用户信息修改，若用户已补全用户信息，再次访问此页面是会显示全部用户信息。用户修改完数据之后。使用form表单封装所有数据，为表单绑定action响应函数，用于点击提交按钮，表单以post方式提交修改后的数据。

3.5疫情防控模块前端页面实现

3.5.1页面分析

全民战“疫”页面主要展示最新疫情相关新闻报道、国内最新疫情数据信息以及国外疫情数据信息，页面效果如图7所示。

3.5.2页面实现

后端已经将疫情新闻列表存放在request域中，在页面js代码中通过[[${}]]获取疫情新闻列表，遍历列表动态添加lib标签，展示新闻信息。编写js代码使用layui表格组件，展示我国详细疫情数据和国外详细疫情数据。

3.6后端图像采集微服务实现

本模块将图像采集系统服务器端作为一个微服务注册到注册中心。图像采集服务器端利用Socket技术接收客户端的图像数据。将服务器集成到微服务架构中时，使用Spring Boot改写系统，让系统轻便简洁。

新建一个maven module项目，添加注册启动类后在其pom文件中添加Spring Boot配置，编写application.yml文件将服务指向注册中心。因为该服务器端逻辑功能已经实现，现在只需要将系统逻辑移植在本Spring Boot项目中。

3.6.1功能分析

图像采集服务器端由3个主要功能組成：图像获取、图像显示以及图像保存。系统安卓端与服务器端通过Socket进行数据传递。安卓端设有一个图像数据缓冲区，在缓冲区满后将缓冲区中的数据发送至服务器端。服务器端判断接收的数据是否为一帧完整的图片，若是则通过绘图组件在显示窗口进行绘制，若不是则继续接收。在图像显示过程中若有符合条件的图像可点击拍照按钮，将该图片保存。服务器端提供查询功能，可按图像名或拍照日期进行搜索，若存在符合条件的图像则在页面进行展示。

3.6.2功能实现

在用户点击拍照按钮后，图像保存功能开始运转，图像保存在用户选定保存路径，使用JFileChooser.getSelectedFile（）.getPath（）获取用户选择的路径，使用字符串分割获取图像名，将相关信息封装成实体类，直接调用mapper层方法将图像信息保存至数据库。

在非Controller层、Service层使用@Autowired注解需要进行相关配置才能正常使用。首先使用@Component注解标记工具类StatisticsUtils，然后使用@Autowired注入需要的bean，最后在工具类中编写init（）函数，并使用@PostConstruct注解标记工具类，初始化Bean。

3.7定位模块实现

3.7.1功能分析

系统地理位置确定模块先使用HTML5中地理定位API获取当前位置的经纬度，再调用百度地图API全球逆地理编码，通过经纬度确定所在城市。

地理定位是HTML5中新增的API特性，得到用户允许后，使用JavaScript程序向浏览器询问用户真实的地理位置。

全球逆地理编码服务是一类Web API接口服务，逆地理编码服务提供将坐标点（经纬度）转换为对应位置信息功能。

3.7.2功能实现

地理位置模块属于大气环境监测模块与天气模块的一个功能，用来获取用户当前所在城市。用户点击定位按钮后，页面询问用户是否允许当前应用获取位置信息，经过用户批准后，页面获取用户当前位置信息（经纬度）发送请求，后端拦截该请求之后调用全球逆地理编码服务API获取用户当前位置信息，截取其中的城市信息并返回。

4结束语

针对日益严重的大气环境污染问题，利用微服务架构，设计了一个大气环境监测系统，其前端展示数据，后端处理存储数据。实现了对大气环境的实时监测与结果展示，不足的是收集数据少，为了更好地监测大气数据，下一步需要收集更多的数据，完善系统。