基于Vue和SpringBoot的機場氣象信息系統設計與實現

趙富強 嚴風碩 邊岱泉 朱小波

摘 ?要：文章針對通用機場的氣象信息服務體系建設不完善、氣象服務保障不足的現狀，提出一種基于Vue和SpringBoot的機場氣象信息系統。以SpringBoot、Vue框架進行手機端和網頁端應用開發，在移動端實現了機場本場氣象數據、變化曲線、報文、設備等信息的展示功能，在網頁端實現了氣象模塊、地圖模式、列表模式、日志管理、用戶管理等功能。通過該系統可遠程、實時、準確了解機場本場氣象信息和報文信息，為航空器起降和通用航空低空作業及飛行安全提供參考。

關鍵詞：Vue;SpringBoot;機場;氣象

中圖分類號：TP311.5 ? ? ?文獻標識碼：A 文章編號：2096-4706（2020）21-0001-06

Design and Implementation of Airport Meteorology Information System

Based on Vue and SpringBoot

ZHAO Fuqiang，YAN Fengshuo，BIAN Daiquan，ZHU Xiaobo

（The Second Research Institute of CAAC，Chengdu ?610041，China）

Abstract：This article proposes an airport meteorology information system based on Vue and SpringBoot in view of the current situation that imperfect construction of meteorology information service system of general airport and insufficient meteorology service guarantee. Use SpringBoot and Vue frameworks for mobile and web application development，realize the display function of the airports local meteorology data，change curves，messages，equipment and other information on the mobile side，and realize the meteorology module，map mode，list mode，log management，user management and other functions on the web side. Through this system，it is possible to remotely，real-time and accurately understand the local meteorology information and message information of the airport，and provide reference for aircraft take-off and landing，general aviation low-altitude operations and flight safety.

Keywords：Vue;SpringBoot;airport;meteorology

0 ?引 ?言

機場氣象服務是保障航空器安全起降的重要措施之一[1]。通用機場航空器運行空域屬于低空空域，該區域氣象條件復雜多變，容易對航空安全造成影響。而目前我國通用機場氣象服務體系建設還不夠完善，主要體現在以下方面：一是大多數通用機場專業氣象人員和氣象探測設備配備不足，氣象服務保障水平不高;二是一些通用機場依靠從互聯網或臨近氣象機構獲取的氣象資料，不能準確反映通用機場瞬息變化的氣象情況;三是現有的系統自成一體，存在信息“孤島”現象，還不能完全滿足實際需求，目前部署在本場的氣象觀測系統需工作人員現場操作，而有些機場氣象觀測站位置與人員的居所距離較遠，不能及時掌握實時氣象信息，也缺少便捷的移動端應用。上述情況均對通用航空安全保障產生一定影響。

目前關于機場氣象信息化研究取得了一些進展，雖然解決了部分問題，但仍具有一定的局限性。楊銀霞借鑒氣象局的應用案例，提出通過高清視頻攝像觀測機場氣象替代人工現場觀測的構想[2];丁圣等采用Java語言開發了通用機場氣象服務APP，主要顯示機場周邊區域的氣象實況資料信息[3];李洋磊等利用Leaflet庫進行設計開發Web網頁，實現航空氣象信息與時空信息在地圖上的充分結合[4]。

綜合考慮通用機場氣象保障的現狀，本文基于Vue和SpringBoot框架，設計實現了一套機場氣象信息系統，包括網頁端和移動端，借助互聯網，實現遠程實時顯示機場本場的溫度、濕度、風向、風速、氣壓、降水、云高、能見度等氣象要素，并定時顯示機場例行觀測報文，該系統可輔助專業人員實時準確地了解機場區域的氣象實況，為專業人員作出更加科學合理的決策提供技術支持。

1 ?項目環境

本項目將SpringBoot框架與Vue結合實現了系統的前后端分離[5]，以現代化輕量級代碼編輯器Visual Studio Code V1.48.2作為開發工具，移動客戶端利用混合開發方式[6]，采用Cordova 8.1.2開發工具進行開發。開發完成后，為了測試系統在網頁端和移動端的可用性與兼容性，分別對網頁端和移動端進行了測試。項目開發環境如表1所示。

主要開發工具及框架說明：

（1）JavaScript（簡稱“JS”）。JS是一種輕量級的解釋型或即時編譯型的高級編程語言。

（2）Visual Studio Code。Visual Studio Code可在Mac OS X、Windows和Linux上運行，可用于編寫現代Web和云應用的跨平臺編輯器。

（3）MySQL。MySQL是一種關系型數據庫，其成本低，支持快速開發，具有良好的跨平臺性能。

（4）SpringBoot后端框架。SpringBoot框架使用特定方式來進行配置，通過內嵌的Tomcat服務器，直接將項目打包成jar包，從而簡化項目的部署工作[7]。通過配置Maven工具來管理大量的項目資源，可以解決項目資源管理難的問題。

（5）Vue框架。Vue是由國內開發者尤雨溪研發用于搭建用戶界面的框架，Vue采用自底向上增量開發的設計方式，提供了豐富的組件庫，支持獨立開發，采用Vue生態系統支持的庫和單文件組件結合使用，Vue可為復雜的單頁應用程序提供支持[8]。此外，通過Vue，將更便于前端調用第三方工具（如Web API）。

（6）Cordova框架。Apache Cordova是一個開源的移動開發框架，允許使用標準的Web技術HTML5、CSS3和JavaScript做跨平臺開發[9]。應用在每個平臺的具體執行被封裝了起來，并依靠符合標準的API綁定去訪問每個設備的功能。

（7）ECharts庫。ECharts是一個基于JavaScript實現的開源可視化庫，可以快速運行在PC端和移動設備上，底層依賴矢量圖形庫ZRender，可提供高度個性化定制的數據可視化圖表[10]。

2 ?總體設計

2.1 ?整體架構

系統的整體架構如圖1所示。

該系統包括機場自動氣象站服務器、騰訊云服務器、應用服務器和客戶端（網頁端和Android手機端）。整個系統設計基于B/S架構，首先，將機場本場的氣象數據通過串口通信程序上傳至騰訊云服務器;其次，客戶端通過互聯網訪問機場氣象信息系統，登錄成功后訪問氣象數據庫服務器，獲取機場本場實況、報文、變化趨勢等信息。機場相關用戶既可以通過手機端遠程查看信息，也可以通過網頁瀏覽器查看相應信息。

2.2 ?Android手機端設計

用戶輸入個人的手機號和密碼登錄信息系統。系統會通過服務器訪問數據庫判斷用戶是否存在，如果該賬戶不存在，會彈出相應的提示語句。當用戶忘掉密碼后可以用手機驗證碼重新設置。Android手機端包括首頁、發現、設備和我的四個模塊，如圖2所示。

“首頁”包括本場氣象和報文信息，報文信息主要顯示系統報文數據和報文設置功能。本場氣象包含風向風速盤，跑道視程、能見度、3小時氣壓變化曲線、24小時氣壓變化曲線、其中資料時次包括經緯度、相對濕度、風向風速、氣壓云量等信息[11，12]。首頁可以選擇查看最新時次、距今1 h時次、距今2 h時次和距今3 h時次的氣象信息。“發現”主要顯示氣象百科信息。

“設備”包括地圖和設備狀態，設備狀態顯示臺站編號、自動氣象站和云高儀設備信息。“我的”包括設備設置、密碼修改、意見反饋和關于我們。

2.3 ?網頁端設計

網頁端采用SpringBoot框架，采用Vue進行渲染[9]，主要包括地圖模式、列表模式、日志管理、意見管理、發現管理和用戶管理模塊，如圖3所示。

網頁端登錄方式與手機端一樣，地圖模式基于高德地圖開發，用戶通過搜索框搜索機場信息，可及時定位到該機場，支持地圖放大和縮小。同時點擊網頁右側的顯示詳情按鈕，會向左彈出機場詳情信息，包括基本信息、風向風速、氣壓值（3 h氣壓值和24 h氣壓值）、氣壓變化曲線（3 h氣壓變化曲線和24 h氣壓變化曲線）、自觀數據（最新時次、距今1 h時次、距今2 h時次、距今3 h時次）、報文設置模塊和報文轉換模塊。

列表模式主要展示系統中的所有機場。包括機場名稱、機場編號、海拔等信息。可以查看機場氣象的歷史記錄，可以選擇日期導出一個時間段的數據列表。

日志管理主要用于記錄操作內容、操作人、操作時間和操作結果。通過日志管理模塊可以記錄用戶信息、服務器登錄日志、活動日志等，實現對氣象信息系統的網絡安全管理。

意見管理主要用于搜集用戶對該系統反饋的意見和建議。

用戶管理模塊可顯示用戶列表，并對用戶的權限進行分配。

2.4 ?數據庫設計

數據存儲于騰訊云MySQL 5.7數據庫中，該數據屬于分布式數據存儲，可根據用戶需要靈活設置、操作和擴展關系數據庫，數據經過抽象化處理，可以存儲異構化數據。如表2～表4所示，氣象數據表主要包括實時數據表、歷史數據表和用戶表三大類[13]。歷史數據表以月為單位，一共12張表（ALLDATA01-ALLDATA12），而實時表每個設備只保存最新一條記錄。設置用戶表的配置可以給不同的用戶分配相應的系統權限。

3 ?關鍵技術

3.1 ?Blowfish加密算法

Blowfish算法是1993年發展起來的，是一種對稱的分組加密算法，該算法具有加密速度快、密鑰長度可變、不可破解等優點[14]。Spring Security中BCryptPasswordEncoder方法對Blowfish算法進行了封裝，本文采用該方法對用戶密碼進行加密。該算法的執行流程主要分為密鑰預處理、數據加密和解密。該算法用于系統用戶的密碼加密。

加密的代碼為：

//密碼加密

BCryptPasswordEncoder passwordEncoder=new BCrypt PasswordEncoder（）;

String newPassword= passwordEncoder.encode（password）;

3.2 ?報文處理

在報文處理模塊中，根據《民用航空氣象 第六部分：電碼》和《民用航空自動氣象觀測系統技術規范》相關規定進行解析[15，16]。首先，讀取機場例行天氣報告METAR原始報文數據;然后，按照電碼格式進行解碼，讀取顯示。下文為部分代碼：

setBw（el） {

let keys = Object.keys（this.dChecke）;

keys.forEach（（v） => {

el[v] = this.ClearBr（el[v]）;

el[v] = el[v].slice（el[v].indexOf（"METAR"）， el[v].length）;

let arr = el[v].split（" "）;

arr[2] = `${arr[2].slice（0， 2）}日 ${arr[2].slice（2， 4）}：${arr[2].slice（4，6）}UTC`;

arr[3] = arr[3].replace（"MPS"， ""）;

arr[3] = [

parseFloat（arr[3].slice（0， 3）），

parseFloat（arr[3].slice（3， 5）），

];

3.3 ?地圖顯示

在地圖顯示模塊中，系統根據用戶在網頁搜索框輸入的機場信息，與數據庫機場字段相匹配，如果存在該機場信息，系統訪問高德地圖API服務器，完成地圖加載;與此同時，在右側完成機場信息加載。下文為部分代碼：

show（res） {

this.togglebb = true;

this.$emit（"detailsid"， res[0].stationnum）;

this.zoom == this.scale ？ （this.zoom = this.scale - this.accuracy）

： （this.zoom = this.scale）;

for （let key in res） {

if （res[key].devname.indexOf（"機場"） ！= -1） {

this.center = [parseFloat（res[key].lon）， parse Float（res[key].alt）];

this.value = res[key].devname;

this.devname = res[key].devname;

this.$emit（"details"， res）;

break;

}

}

}

4 ?系統實現

項目開發完成之后，利用Chrome瀏覽器和Android移動端經過測試并無異常，頁面顯示以及與用戶交互方面，與需求一致。能夠讀取、實時顯示氣象數據信息，包括氣壓、氣溫、相對濕度、露點、風向、風速、雨量、能見度、RVR、背景亮度、云和天氣現象等[12]。手機端主要功能模塊如圖4所示。

圖5（a）為網頁端地圖模式，網頁端右側以彈窗形式展示，點擊機場詳情向左彈窗。在機場詳情頁，通過鼠標向下滾動頁面，可查看基本信息、風盤數據、氣壓變化、時次數據、機場報文和報文設置。圖5（b）為設備的歷史記錄。

5 ?結 ?論

本文采用SpringBoot和Vue開源框架，設計并實現了機場氣象信息系統。系統具有多端展示、遠程訪問、統一管理的優勢。通過對系統數據進行測試驗證，逐一對比了溫度、濕度、風速、風向、氣壓、能見度、云等數據項，系統讀取氣象設備數據的準確、可靠。結合行業運行現狀提出一種解決方案，可以解決民航氣象觀測在運行中存在的氣象服務保障不足、應急不夠迅速、無法遠程訪問等問題，可作為機場氣象信息化保障的決策參考。

參考文獻：

[1] 謝燕雯.基于隱馬爾可夫過程的機場運行態勢預測方法研究 [D].哈爾濱：哈爾濱工業大學，2018.

[2] 楊銀霞.遠程氣象觀測系統在通航中的應用探討 [J].智能城市，2019，5（18）：40-41.

[3] 丁圣，李剛.通用機場氣象服務手機APP的設計與實現 [J].氣象水文海洋儀器，2019，36（1）：48-50.

[4] 李洋磊，陳瑤.基于Leaflet地圖技術的民航氣象信息可視化系統的設計與實現 [J].現代信息科技，2019，3（15）：4-6.

[5] 肖文娟，王加勝.基于Vue和Spring Boot的校園記錄管理Web App的設計與實現 [J].計算機應用與軟件，2020，37（4）：25-30+88.

[6] 王閱蓁.移動應用的web與native混合編程模式研究與實現 [D].成都：電子科技大學，2015.

[7] HU X J，LIU S G.Design and Implementation of Student Grade Analysis System Based on Spring Boot Microservice Framework [J].International Core Journal of Engineering，2019，5（10）：5361-5363.

[8] 趙敬宇.基于個性化推薦的醫院住院部訂餐系統 [D].大連：大連理工大學，2019.

[9] CORDOVA.Cordova中文文檔：概述 [EB/OL].[2020-07-08].http：//cordova.axuer.com/docs/zh-cn/latest/guide/overview/index.html

[10] ECHARTS.ECharts中文文檔：特性 [EB/OL].[2020-07-08].https：//echarts.apache.org/zh/feature.html

[11] 邱忠洋，雷正翠，劉文偉.基于Web的氣象項目管理系統的設計與實現 [J].計算機技術與發展，2020，30（7）：204-209.

[12] 李佳.快速更新循環同化中云初始化技術研究 [D].南京：南京信息工程大學，2018.

[13] 李皓.氣象信息獲取技術與物聯網智能服務平臺開發 [D].咸陽：西北農林科技大學，2019.

[14] 趙毅.基于GPU的Blowfish算法實現及其應用 [D].廣州：華南理工大學，2019.

[15] 中國民用航空局空管行業管理辦公室.民用航空自動氣象觀測系統技術規范：AP-117-TM—2018-03R1 [S].北京：中國民用航空局，2018.

[16] 中國民用航空總局.民用航空氣象：第6部分 電碼：MH/T 4016.6—2007 [S].北京：中國科學技術出版社，2007.

作者簡介：趙富強（1987—），男，漢族，河南周口人，助理工程師，碩士，研究方向：信號與信息處理、通用航空信息化;嚴風碩（1983—），男，漢族，陜西安康人，副研究員，碩士，研究方向：通用航空信息化;邊岱泉（1982—），男，漢族，山西大同人，工程師，碩士，研究方向：通用航空信息化;通訊作者：朱小波（1982—），男，漢族，四川成都人，高級工程師，碩士，

研究方向：通用航空信息化、通用航空應用技術研究、通用航空裝備研發。