基于微服務架構的大氣環境監測系統設計

杜春艷　成卓

摘要：大氣環境問題日益嚴重，為了實時監測大氣環境數據，利用微服務架構搭建前后端模塊，設計了大氣環境監測系統。系統包含七大功能模塊：大氣環境監測模塊、天氣查詢模塊、疫情防控模塊、定位模塊、用戶管理模塊、實時光照強度監測模塊以及圖像采集模塊，對這些模塊分別進行了設計和實現。測試結果表明，該系統能夠很好地監測大氣環境數據。

關鍵詞：微服務;大氣環境監測;功能模塊

中圖分類號：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結束語

針對日益嚴重的大氣環境污染問題，利用微服務架構，設計了一個大氣環境監測系統，其前端展示數據，后端處理存儲數據。實現了對大氣環境的實時監測與結果展示，不足的是收集數據少，為了更好地監測大氣數據，下一步需要收集更多的數據，完善系統。