杜春艷　成卓

摘要：大氣環(huán)境問(wèn)題日益嚴(yán)重，為了實(shí)時(shí)監(jiān)測(cè)大氣環(huán)境數(shù)據(jù)，利用微服務(wù)架構(gòu)搭建前后端模塊，設(shè)計(jì)了大氣環(huán)境監(jiān)測(cè)系統(tǒng)。系統(tǒng)包含七大功能模塊：大氣環(huán)境監(jiān)測(cè)模塊、天氣查詢模塊、疫情防控模塊、定位模塊、用戶管理模塊、實(shí)時(shí)光照強(qiáng)度監(jiān)測(cè)模塊以及圖像采集模塊，對(duì)這些模塊分別進(jìn)行了設(shè)計(jì)和實(shí)現(xiàn)。測(cè)試結(jié)果表明，該系統(tǒng)能夠很好地監(jiān)測(cè)大氣環(huán)境數(shù)據(jù)。

關(guān)鍵詞：微服務(wù);大氣環(huán)境監(jiān)測(cè);功能模塊

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1008-1739（2021）11-68-6

0引言

工業(yè)飛速發(fā)展使得人們生活水平日益提高，也使得環(huán)境污染日益加劇，尤其是大氣污染，污染源增加、污染范圍不斷擴(kuò)大，嚴(yán)重影響了人們的身體健康和國(guó)家的長(zhǎng)遠(yuǎn)發(fā)展。根據(jù)2020年2月11日聯(lián)合國(guó)環(huán)境規(guī)劃署、聯(lián)合國(guó)人居署及瑞士空氣質(zhì)量技術(shù)公司IQAir共同發(fā)布的全球最大的空氣質(zhì)量數(shù)據(jù)，匯集4 000多個(gè)貢獻(xiàn)者提供的實(shí)時(shí)空氣污染數(shù)據(jù)，觸達(dá)用戶超過(guò)1500萬(wàn)人，覆蓋全球7000多個(gè)城市。全球每年有700萬(wàn)人死于空氣污染，其中65萬(wàn)是兒童。

建立健全高效的大氣環(huán)境監(jiān)測(cè)系統(tǒng)，可以實(shí)時(shí)檢測(cè)整個(gè)區(qū)域，分析區(qū)域空氣質(zhì)量整體狀況和變化趨勢(shì)、實(shí)時(shí)發(fā)布整個(gè)區(qū)域的空氣質(zhì)量。而且隨著監(jiān)測(cè)數(shù)據(jù)的積累，可以進(jìn)一步開(kāi)展大數(shù)據(jù)分析和深度挖掘，或者污染起源解析、聚類(lèi)分析等科研應(yīng)用。從而實(shí)現(xiàn)城市區(qū)域大氣污染濃度的時(shí)空動(dòng)態(tài)變化趨勢(shì)分析，對(duì)污染源起到最大程度的監(jiān)管作用，為環(huán)境執(zhí)法的決策提供直接依據(jù)，所以建立此系統(tǒng)是非常必要的。

1關(guān)鍵技術(shù)

1.1 Spring Cloud

Spring Cloud是一個(gè)基于Spring Boot實(shí)現(xiàn)的服務(wù)治理工具包，在微服務(wù)架構(gòu)中用于管理和協(xié)調(diào)服務(wù)，是一系列框架的有序集合，利用Spring Boot的開(kāi)發(fā)和便利性巧妙地簡(jiǎn)化了分布式系統(tǒng)基礎(chǔ)設(shè)施的開(kāi)發(fā)，如配置中心、消息總線、負(fù)載均衡等，都可以用Spring Boot的開(kāi)發(fā)風(fēng)格做到一鍵啟動(dòng)和部署。

Spring Cloud將目前各家公司開(kāi)發(fā)的比較成熟、經(jīng)得起實(shí)際考驗(yàn)的服務(wù)框架組合起來(lái)，通過(guò)Spring Boot風(fēng)格進(jìn)行再封裝，屏蔽復(fù)雜的配置和實(shí)現(xiàn)原理，最終給開(kāi)發(fā)者留出一套簡(jiǎn)單易懂、易部署和易維護(hù)的分布式系統(tǒng)開(kāi)發(fā)工具包。

1.2 Spring Boot

Spring Boot是由Pivotal團(tuán)隊(duì)提供的全新框架，用來(lái)簡(jiǎn)化新Spring應(yīng)用的初始搭建以及開(kāi)發(fā)過(guò)程。該框架使用了特定的方式來(lái)進(jìn)行配置，從而使開(kāi)發(fā)人員不再需要定義樣板化的配置，就能創(chuàng)建一個(gè)獨(dú)立的、產(chǎn)品級(jí)別的Spring應(yīng)用。SpringBoot的核心思想就是約定大于配置，多數(shù)Spring Boot應(yīng)用只需要很少的Spring配置。采用Spring Boot可以大大簡(jiǎn)化開(kāi)發(fā)模式，所有需要集成的常用框架，Spring Boot都有對(duì)應(yīng)的組件支持。

1.3 layui與EChalns

layui是一款采用自身模塊規(guī)范編寫(xiě)的前端uI框架，遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式，對(duì)使用者的能力要求比較低。layui的外在極簡(jiǎn)卻功能豐富，從核心代碼到API都經(jīng)過(guò)精心打磨，無(wú)需各種前端工具的復(fù)雜配置，非常適合頁(yè)面的快速開(kāi)發(fā)。

ECharts是一個(gè)使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前大部分瀏覽器，可以提供直觀、交互豐富的數(shù)據(jù)可視化圖表。

2系統(tǒng)功能與設(shè)計(jì)

大氣環(huán)境監(jiān)測(cè)系統(tǒng)主要有七大功能模塊，分別是定位模塊、大氣環(huán)境監(jiān)測(cè)模塊、天氣模塊、疫情防控模塊、用戶模塊、實(shí)時(shí)光照強(qiáng)度監(jiān)測(cè)模塊和圖像采集模塊，每個(gè)模塊分為前端與后端2個(gè)部分，整個(gè)系統(tǒng)的功能模塊結(jié)構(gòu)如圖1所示。

2.1定位模塊功能設(shè)計(jì)

2.1.1前端功能設(shè)計(jì)

在頁(yè)面中使用HTML5中地理定位API獲取當(dāng)前所在位置的經(jīng)緯度，傳遞給后端。

2.1.2定位模塊后端功能設(shè)計(jì)

為了提供更準(zhǔn)確的服務(wù)，很多網(wǎng)站都會(huì)獲取用戶當(dāng)前所在的地理位置。該系統(tǒng)的核心功能之一就是獲取當(dāng)前所在地理位置，確定所在城市。

目前比較常用的獲取地理位置的方法有2種：一種是通過(guò)本機(jī)IP地址獲取，利用IP地址去查詢特定數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)是經(jīng)過(guò)長(zhǎng)時(shí)間的數(shù)據(jù)累積而成，經(jīng)過(guò)比較之后可以從數(shù)據(jù)庫(kù)中提取相應(yīng)的地理位置信息;另一種方法是使用HTML5中地理定位API獲取當(dāng)前所在位置的經(jīng)緯度，然后將抽象的經(jīng)緯度轉(zhuǎn)換成可讀的有意義的真正的用戶地理位置信息，系統(tǒng)采用的是第2種HTML5方法。

2.2大氣環(huán)境監(jiān)測(cè)模塊功能設(shè)計(jì)

2.2.1前端功能設(shè)計(jì)

用戶登錄成功后進(jìn)入大氣環(huán)境查詢平臺(tái)的大氣環(huán)境監(jiān)測(cè)頁(yè)面，導(dǎo)航欄中向用戶展示了城市大氣環(huán)境監(jiān)測(cè)的簡(jiǎn)要信息，包括日期、星期、城市以及空氣質(zhì)量指數(shù)（AQI）。

頁(yè)面初始化地理位置為北京市，用戶可點(diǎn)擊定位按鈕更改地理位置，獲取當(dāng)前所在城市大氣環(huán)境監(jiān)測(cè)各項(xiàng)數(shù)據(jù)，也可通過(guò)在搜索框中搜索，得到所需城市的大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)。由于大氣環(huán)境監(jiān)測(cè)站點(diǎn)并不是在所有城市都有分布，所以在搜索框中輸入關(guān)鍵字時(shí)會(huì)出現(xiàn)城市提示，只能輸入在搜索框下?lián)碛刑崾镜某鞘小?/p>

在頁(yè)面的主體部分用表格展示了城市大氣環(huán)境中6種污染物在大氣環(huán)境中的濃度、當(dāng)前大氣中的主要污染物以及AQI。為了方便觀察各污染物濃度變化，在頁(yè)面中以折線圖的方式將近15天SO₂、NO₂、CO、O₃、PM2.5、PM10、PM2.5、PM10和空氣質(zhì)量指數(shù)濃度變化予以展示。

2.2.2后端功能設(shè)計(jì)

本系統(tǒng)的核心數(shù)據(jù)管理之一是大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)信息管理，用戶能在前端看到城市的大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)。用戶發(fā)送大氣環(huán)境監(jiān)測(cè)請(qǐng)求之后，大氣環(huán)境監(jiān)測(cè)功能開(kāi)始運(yùn)作。系統(tǒng)獲取當(dāng)日大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)以及近15天大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)。成功獲取大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)之后將數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)，當(dāng)用戶再次發(fā)送大氣環(huán)境監(jiān)測(cè)請(qǐng)求時(shí)，不需要重新獲取大氣數(shù)據(jù)。

用戶執(zhí)行定位功能，系統(tǒng)重新獲取當(dāng)前所在城市的大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)以及當(dāng)前城市近15天大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)。成功獲取大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)之后將數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)，當(dāng)用戶重新發(fā)送定位請(qǐng)求時(shí)，不需要重新獲取大氣數(shù)據(jù)。如果當(dāng)前定位城市未建立大氣環(huán)境監(jiān)測(cè)站點(diǎn)，則會(huì)將城市修改為當(dāng)前城市所在地的省會(huì)城市。

用戶在輸入框中輸入所需要的城市時(shí)，由于并不是所有城市都建立了大氣環(huán)境監(jiān)測(cè)站點(diǎn)，所以查詢的城市是有限制的。在用戶輸入時(shí)會(huì)出現(xiàn)提示，防止用戶輸入的城市沒(méi)有大氣環(huán)境監(jiān)測(cè)站點(diǎn)，無(wú)法獲取大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)。輸入合法城市之后，系統(tǒng)會(huì)獲取當(dāng)前所查找城市的大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)以及當(dāng)前查找城市近15天大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)，成功獲取大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)之后將數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)，當(dāng)用戶再次查詢?cè)摮鞘袝r(shí)，不需要重新獲取大氣數(shù)據(jù)。

2.3天氣模塊功能設(shè)計(jì)

2.3.1前端功能設(shè)計(jì)

點(diǎn)擊天氣查詢后進(jìn)入大氣環(huán)境查詢平臺(tái)的天氣信息查詢頁(yè)面，導(dǎo)航欄中向用戶展示了城市天氣的簡(jiǎn)要信息，包括城市、天氣、最高氣溫、最低氣溫以及空氣質(zhì)量等級(jí)。獲取當(dāng)前所在城市天氣情況的各項(xiàng)數(shù)據(jù)，也可通過(guò)在搜索框中搜索，以得到所查詢的城市的天氣情況。

在頁(yè)面的主體部分用表格展示了城市實(shí)時(shí)氣溫、天氣、日溫、夜溫、風(fēng)向、風(fēng)力等級(jí)、風(fēng)速、空氣濕度、空氣質(zhì)量以及出行建議。為了方便觀察，了解氣溫變化，在頁(yè)面中以折線圖的方式將近15天每天最高氣溫與最低氣溫，空氣濕度變化予以展示。

2.3.2后端功能設(shè)計(jì)

天氣數(shù)據(jù)信息管理也是本系統(tǒng)的核心數(shù)據(jù)管理之一，系統(tǒng)后端實(shí)時(shí)獲取天氣數(shù)據(jù)，然后進(jìn)行相關(guān)處理之后存入數(shù)據(jù)庫(kù)，前端頁(yè)面才有數(shù)據(jù)可以展示。

用戶發(fā)送天氣查詢請(qǐng)求之后，天氣功能開(kāi)始運(yùn)作。成功獲取天氣數(shù)據(jù)之后將數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)，當(dāng)用戶再次發(fā)送天氣查詢請(qǐng)求時(shí)，不需要重新獲取天氣數(shù)據(jù)。

用戶點(diǎn)擊定位按鈕，執(zhí)行定位功能成功之后系統(tǒng)獲取到當(dāng)前所在城市，系統(tǒng)重新獲取當(dāng)前所在城市的天氣數(shù)據(jù)以及當(dāng)前城市近15天的天氣數(shù)據(jù)。成功獲取天氣數(shù)據(jù)之后將數(shù)據(jù)寫(xiě)入數(shù)據(jù)庫(kù)，當(dāng)用戶重新發(fā)送定位請(qǐng)求時(shí)，不需要重新獲取天氣數(shù)據(jù)。

2.4疫情防控模塊功能設(shè)計(jì)

2.4.1前端功能設(shè)計(jì)

點(diǎn)擊“全民戰(zhàn)‘疫”后進(jìn)入最新疫情信息顯示頁(yè)面，向用戶展示最新的疫情資訊報(bào)道，國(guó)內(nèi)外最新的詳細(xì)疫情信息，包括現(xiàn)存確診人數(shù)、累計(jì)確診人數(shù)、現(xiàn)存疑似人數(shù)、累計(jì)治愈人數(shù)、累計(jì)死亡人數(shù)、現(xiàn)存重癥人數(shù)、新增疑似人數(shù)、相比昨天現(xiàn)存確診人數(shù)、相比昨天累計(jì)確診人數(shù)、相比昨天新增治愈人數(shù)、相比昨天新增死亡人數(shù)以及相比昨天現(xiàn)存的重癥人數(shù)。

2.4.2后端功能設(shè)計(jì)

疫情信息管理是本系統(tǒng)的數(shù)據(jù)管理之一，系統(tǒng)后端獲取到了當(dāng)天疫情數(shù)據(jù)，數(shù)據(jù)包括疫情資訊以及國(guó)內(nèi)外疫情數(shù)據(jù)，然后存入數(shù)據(jù)庫(kù)，前端頁(yè)面才有數(shù)據(jù)可以展示。

3功能實(shí)現(xiàn)

3.1用戶模塊前端登錄頁(yè)面、注冊(cè)頁(yè)面實(shí)現(xiàn)

3.1.1頁(yè)面分析

頁(yè)面基于前端框架layui，配合HTML5、CSS、JavaScript共同設(shè)計(jì)完成的，追求簡(jiǎn)單、直觀實(shí)用。登錄頁(yè)面是平臺(tái)啟動(dòng)打開(kāi)的初始頁(yè)面，用來(lái)輸入用戶名與密碼。若用戶未使用過(guò)平臺(tái)，則需要進(jìn)入注冊(cè)頁(yè)面進(jìn)行新用戶注冊(cè)。用戶可在注冊(cè)頁(yè)面自定義用戶名，輸入密碼以及確認(rèn)密碼。頁(yè)面效果如圖2和圖3所示。

3.1.2頁(yè)面實(shí)現(xiàn)

登錄頁(yè)面的主要功能是將用戶名與密碼提交給后端。頁(yè)面使用input標(biāo)簽接收用戶輸入的用戶名與密碼，使用form表單封裝數(shù)據(jù)。為form添加action="/userLogin"響應(yīng)，點(diǎn)擊登錄button之后，表單將以post的方式帶著表單中的數(shù)據(jù)一起發(fā)起請(qǐng)求。

注冊(cè)頁(yè)面的主要功能是將新用戶的注冊(cè)信息提交給后端。頁(yè)面使用input標(biāo)簽接收用戶輸入的用戶名、密碼以及確認(rèn)密碼，編寫(xiě)js代碼，使用layui的表單校驗(yàn)功能判斷用戶所輸入的用戶名是否符合規(guī)定以及2次輸入的密碼是否一致。使用form表單包裝數(shù)據(jù)，為form添加action="/userRegister"響應(yīng)，點(diǎn)擊立即提交button之后，表單將以post的方式帶著表單中的數(shù)據(jù)一起發(fā)起請(qǐng)求。

3.2大氣環(huán)境監(jiān)測(cè)模塊前端頁(yè)面實(shí)現(xiàn)

3.2.1頁(yè)面分析

用戶登陸成功之后，第一個(gè)頁(yè)面是大氣環(huán)境監(jiān)測(cè)頁(yè)面，主要展示城市大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)，近15天空氣中6種污染物在大氣中的濃度變化以折線圖形式展示，頁(yè)面效果如圖4所示。

3.2.2頁(yè)面實(shí)現(xiàn)

由于用戶登錄信息保存在cookie中，編寫(xiě)js代碼從cookie中獲取用戶登錄信息。若cookie中存在登錄信息，修改頁(yè)面標(biāo)簽將請(qǐng)登錄修改為該用戶的用戶名。后端定義首次訪問(wèn)城市為首都北京，由于頁(yè)面使用Thymeleaf模板引擎，可以使用${}獲取request域中的大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)并在相應(yīng)位置顯示，使用layui表格組件，展示完整大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)。

使用隱藏input標(biāo)簽接收6種大氣污染物歷史含量列表，編寫(xiě)js文件使用echags將數(shù)據(jù)列表轉(zhuǎn)換為圖表。

用戶點(diǎn)擊定位按鈕，頁(yè)面利用HTML5地理位置屬性，獲取當(dāng)前地理位置經(jīng)緯度，攜帶經(jīng)緯度信息發(fā)送ajax請(qǐng)求給后端。在ajax執(zhí)行成功之后的回調(diào)函數(shù)中，大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)已經(jīng)更新。通過(guò)ID獲取指定標(biāo)簽，修改其內(nèi)容，完成頁(yè)面重新渲染。

用戶在查詢框中輸入城市名，由于大氣環(huán)境監(jiān)測(cè)站點(diǎn)有地區(qū)限制，需要提醒用戶所輸入的城市是否存在站點(diǎn)，并給出城市提示。當(dāng)用戶在input中輸入時(shí)，監(jiān)聽(tīng)用戶所輸入的內(nèi)容，攜帶此內(nèi)容發(fā)送ajax請(qǐng)求到后端，在ajax執(zhí)行成功之后的回調(diào)函數(shù)中遍歷后端返回?cái)?shù)據(jù)，不為空則緊貼輸入框下動(dòng)態(tài)添加標(biāo)簽顯示城市提示信息，輸入框失去焦點(diǎn)后，刪除所有提示標(biāo)簽。為搜索按鈕綁定onclick事件，用戶輸入合法城市后點(diǎn)擊搜索按鈕會(huì)發(fā)起攜帶搜索信息的ajax請(qǐng)求，在ajax執(zhí)行成功之后的回調(diào)函數(shù)中，大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)已經(jīng)更新。通過(guò)ID獲取指定標(biāo)簽，修改其內(nèi)容，完成頁(yè)面重新渲染。

3.3天氣模塊前端頁(yè)面實(shí)現(xiàn)

3.3.1頁(yè)面分析

天氣頁(yè)面實(shí)時(shí)展示城市天氣數(shù)據(jù)，未來(lái)7天的天氣預(yù)報(bào)以及將近15天的最高氣溫、最低氣溫和空氣濕度變化以折線圖形式展示，頁(yè)面效果如圖5所示。

3.3.2頁(yè)面實(shí)現(xiàn)

用戶點(diǎn)擊左側(cè)天氣標(biāo)簽之后，頁(yè)面跳轉(zhuǎn)至天氣頁(yè)面。由于用戶登錄信息保存在cookie中，編寫(xiě)js代碼從cookie中獲取用戶登錄信息，若cookie中存在登錄信息，修改頁(yè)面標(biāo)簽將請(qǐng)登錄修改為該用戶的用戶名。后端定義首次訪問(wèn)城市為首都北京，由于頁(yè)面使用Thymeleaf模板引擎，可以使用${}獲取request域中的天氣數(shù)據(jù)并在相應(yīng)位置顯示，使用layui表格組件，展示詳細(xì)天氣數(shù)據(jù)。編寫(xiě)js文件遍歷七日天氣預(yù)報(bào)信息列表，動(dòng)態(tài)添加li標(biāo)簽展示天氣預(yù)報(bào)信息。將此部分的display屬性設(shè)置為影藏，點(diǎn)擊7目標(biāo)簽選項(xiàng)，將今日詳細(xì)天氣數(shù)據(jù)列表display屬性修改為行藏，將天氣預(yù)報(bào)模塊display屬性修改為展示。點(diǎn)擊今日標(biāo)簽選項(xiàng)，將今日詳細(xì)天氣數(shù)據(jù)列表display屬性修改為顯示，將天氣預(yù)報(bào)模塊display屬性修改為隱藏。

使用隱藏input標(biāo)簽接收歷史最高氣溫、最低氣溫和空氣濕度數(shù)據(jù)列表，編寫(xiě)js文件使用echarts將數(shù)據(jù)列表轉(zhuǎn)換為圖表。

用戶點(diǎn)擊定位按鈕，頁(yè)面利用HTML5地理位置屬性，獲取當(dāng)前地理位置經(jīng)緯度，攜帶經(jīng)緯度信息發(fā)送ajax請(qǐng)求給后端。在ajax執(zhí)行成功之后的回調(diào)函數(shù)中，天氣數(shù)據(jù)已經(jīng)更新。通過(guò)ID獲取指定標(biāo)簽，修改其內(nèi)容，完成頁(yè)面重新渲染。

用戶在查詢框中輸入城市名，為搜索按鈕綁定onclick事件，用戶輸入城市后點(diǎn)擊搜索按鈕會(huì)發(fā)起攜帶搜索信息的ajax請(qǐng)求，在ajax執(zhí)行成功之后的回調(diào)函數(shù)中，大氣環(huán)境監(jiān)測(cè)數(shù)據(jù)已經(jīng)更新。通過(guò)ID獲取指定標(biāo)簽，修改其內(nèi)容，完成頁(yè)面重新渲染。

3.4用戶模塊前端個(gè)人信息頁(yè)面實(shí)現(xiàn)

3.4.1頁(yè)面分析

用戶在信息管理頁(yè)面可以補(bǔ)全用戶信息以及修改密碼等除用戶名外的所有信息。頁(yè)面效果如圖6所示。

3.4.2頁(yè)面實(shí)現(xiàn)

用戶在注冊(cè)時(shí)只定義了用戶名與密碼，用戶在登錄成功之后可以進(jìn)一步完善用戶信息。使用input標(biāo)簽接收用戶輸入，編寫(xiě)js代碼使用layui表單校驗(yàn)組件，校驗(yàn)用戶所輸入的各項(xiàng)數(shù)據(jù)是否符合規(guī)定。使用form表單封裝所有數(shù)據(jù)，為表單綁定action響應(yīng)函數(shù)，用于點(diǎn)擊提交按鈕，表單以post方式提交數(shù)據(jù)。

用戶信息修改，若用戶已補(bǔ)全用戶信息，再次訪問(wèn)此頁(yè)面是會(huì)顯示全部用戶信息。用戶修改完數(shù)據(jù)之后。使用form表單封裝所有數(shù)據(jù)，為表單綁定action響應(yīng)函數(shù)，用于點(diǎn)擊提交按鈕，表單以post方式提交修改后的數(shù)據(jù)。

3.5疫情防控模塊前端頁(yè)面實(shí)現(xiàn)

3.5.1頁(yè)面分析

全民戰(zhàn)“疫”頁(yè)面主要展示最新疫情相關(guān)新聞報(bào)道、國(guó)內(nèi)最新疫情數(shù)據(jù)信息以及國(guó)外疫情數(shù)據(jù)信息，頁(yè)面效果如圖7所示。

3.5.2頁(yè)面實(shí)現(xiàn)

后端已經(jīng)將疫情新聞列表存放在request域中，在頁(yè)面js代碼中通過(guò)[[${}]]獲取疫情新聞列表，遍歷列表動(dòng)態(tài)添加lib標(biāo)簽，展示新聞信息。編寫(xiě)js代碼使用layui表格組件，展示我國(guó)詳細(xì)疫情數(shù)據(jù)和國(guó)外詳細(xì)疫情數(shù)據(jù)。

3.6后端圖像采集微服務(wù)實(shí)現(xiàn)

本模塊將圖像采集系統(tǒng)服務(wù)器端作為一個(gè)微服務(wù)注冊(cè)到注冊(cè)中心。圖像采集服務(wù)器端利用Socket技術(shù)接收客戶端的圖像數(shù)據(jù)。將服務(wù)器集成到微服務(wù)架構(gòu)中時(shí)，使用Spring Boot改寫(xiě)系統(tǒng)，讓系統(tǒng)輕便簡(jiǎn)潔。

新建一個(gè)maven module項(xiàng)目，添加注冊(cè)啟動(dòng)類(lèi)后在其pom文件中添加Spring Boot配置，編寫(xiě)application.yml文件將服務(wù)指向注冊(cè)中心。因?yàn)樵摲?wù)器端邏輯功能已經(jīng)實(shí)現(xiàn)，現(xiàn)在只需要將系統(tǒng)邏輯移植在本Spring Boot項(xiàng)目中。

3.6.1功能分析

圖像采集服務(wù)器端由3個(gè)主要功能組成：圖像獲取、圖像顯示以及圖像保存。系統(tǒng)安卓端與服務(wù)器端通過(guò)Socket進(jìn)行數(shù)據(jù)傳遞。安卓端設(shè)有一個(gè)圖像數(shù)據(jù)緩沖區(qū)，在緩沖區(qū)滿后將緩沖區(qū)中的數(shù)據(jù)發(fā)送至服務(wù)器端。服務(wù)器端判斷接收的數(shù)據(jù)是否為一幀完整的圖片，若是則通過(guò)繪圖組件在顯示窗口進(jìn)行繪制，若不是則繼續(xù)接收。在圖像顯示過(guò)程中若有符合條件的圖像可點(diǎn)擊拍照按鈕，將該圖片保存。服務(wù)器端提供查詢功能，可按圖像名或拍照日期進(jìn)行搜索，若存在符合條件的圖像則在頁(yè)面進(jìn)行展示。

3.6.2功能實(shí)現(xiàn)

在用戶點(diǎn)擊拍照按鈕后，圖像保存功能開(kāi)始運(yùn)轉(zhuǎn)，圖像保存在用戶選定保存路徑，使用JFileChooser.getSelectedFile（）.getPath（）獲取用戶選擇的路徑，使用字符串分割獲取圖像名，將相關(guān)信息封裝成實(shí)體類(lèi)，直接調(diào)用mapper層方法將圖像信息保存至數(shù)據(jù)庫(kù)。

在非Controller層、Service層使用@Autowired注解需要進(jìn)行相關(guān)配置才能正常使用。首先使用@Component注解標(biāo)記工具類(lèi)StatisticsUtils，然后使用@Autowired注入需要的bean，最后在工具類(lèi)中編寫(xiě)init（）函數(shù)，并使用@PostConstruct注解標(biāo)記工具類(lèi)，初始化Bean。

3.7定位模塊實(shí)現(xiàn)

3.7.1功能分析

系統(tǒng)地理位置確定模塊先使用HTML5中地理定位API獲取當(dāng)前位置的經(jīng)緯度，再調(diào)用百度地圖API全球逆地理編碼，通過(guò)經(jīng)緯度確定所在城市。

地理定位是HTML5中新增的API特性，得到用戶允許后，使用JavaScript程序向?yàn)g覽器詢問(wèn)用戶真實(shí)的地理位置。

全球逆地理編碼服務(wù)是一類(lèi)Web API接口服務(wù)，逆地理編碼服務(wù)提供將坐標(biāo)點(diǎn)（經(jīng)緯度）轉(zhuǎn)換為對(duì)應(yīng)位置信息功能。

3.7.2功能實(shí)現(xiàn)

地理位置模塊屬于大氣環(huán)境監(jiān)測(cè)模塊與天氣模塊的一個(gè)功能，用來(lái)獲取用戶當(dāng)前所在城市。用戶點(diǎn)擊定位按鈕后，頁(yè)面詢問(wèn)用戶是否允許當(dāng)前應(yīng)用獲取位置信息，經(jīng)過(guò)用戶批準(zhǔn)后，頁(yè)面獲取用戶當(dāng)前位置信息（經(jīng)緯度）發(fā)送請(qǐng)求，后端攔截該請(qǐng)求之后調(diào)用全球逆地理編碼服務(wù)API獲取用戶當(dāng)前位置信息，截取其中的城市信息并返回。

4結(jié)束語(yǔ)

針對(duì)日益嚴(yán)重的大氣環(huán)境污染問(wèn)題，利用微服務(wù)架構(gòu)，設(shè)計(jì)了一個(gè)大氣環(huán)境監(jiān)測(cè)系統(tǒng)，其前端展示數(shù)據(jù)，后端處理存儲(chǔ)數(shù)據(jù)。實(shí)現(xiàn)了對(duì)大氣環(huán)境的實(shí)時(shí)監(jiān)測(cè)與結(jié)果展示，不足的是收集數(shù)據(jù)少，為了更好地監(jiān)測(cè)大氣數(shù)據(jù)，下一步需要收集更多的數(shù)據(jù)，完善系統(tǒng)。