基于Vue和SpringBoot的機場氣象信息系統(tǒng)設(shè)計與實現(xiàn)

趙富強 嚴風(fēng)碩 邊岱泉 朱小波

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

關(guān)鍵詞：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 ?引 ?言

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

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

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

1 ?項目環(huán)境

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

主要開發(fā)工具及框架說明：

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

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

（3）MySQL。MySQL是一種關(guān)系型數(shù)據(jù)庫，其成本低，支持快速開發(fā)，具有良好的跨平臺性能。

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

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

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

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

2 ?總體設(shè)計

2.1 ?整體架構(gòu)

系統(tǒng)的整體架構(gòu)如圖1所示。

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

2.2 ?Android手機端設(shè)計

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

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

“設(shè)備”包括地圖和設(shè)備狀態(tài)，設(shè)備狀態(tài)顯示臺站編號、自動氣象站和云高儀設(shè)備信息?！拔业摹卑ㄔO(shè)備設(shè)置、密碼修改、意見反饋和關(guān)于我們。

2.3 ?網(wǎng)頁端設(shè)計

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

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

列表模式主要展示系統(tǒng)中的所有機場。包括機場名稱、機場編號、海拔等信息?？梢圆榭礄C場氣象的歷史記錄，可以選擇日期導(dǎo)出一個時間段的數(shù)據(jù)列表。

日志管理主要用于記錄操作內(nèi)容、操作人、操作時間和操作結(jié)果。通過日志管理模塊可以記錄用戶信息、服務(wù)器登錄日志、活動日志等，實現(xiàn)對氣象信息系統(tǒng)的網(wǎng)絡(luò)安全管理。

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

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

2.4 ?數(shù)據(jù)庫設(shè)計

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

3 ?關(guān)鍵技術(shù)

3.1 ?Blowfish加密算法

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

加密的代碼為：

//密碼加密

BCryptPasswordEncoder passwordEncoder=new BCrypt PasswordEncoder（）;

String newPassword= passwordEncoder.encode（password）;

3.2 ?報文處理

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

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 ?地圖顯示

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

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 ?系統(tǒng)實現(xiàn)

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

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

5 ?結(jié) ?論

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

參考文獻：

[1] 謝燕雯.基于隱馬爾可夫過程的機場運行態(tài)勢預(yù)測方法研究 [D].哈爾濱：哈爾濱工業(yè)大學(xué)，2018.

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

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

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

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

[6] 王閱蓁.移動應(yīng)用的web與native混合編程模式研究與實現(xiàn) [D].成都：電子科技大學(xué)，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] 趙敬宇.基于個性化推薦的醫(yī)院住院部訂餐系統(tǒng) [D].大連：大連理工大學(xué)，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的氣象項目管理系統(tǒng)的設(shè)計與實現(xiàn) [J].計算機技術(shù)與發(fā)展，2020，30（7）：204-209.

[12] 李佳.快速更新循環(huán)同化中云初始化技術(shù)研究 [D].南京：南京信息工程大學(xué)，2018.

[13] 李皓.氣象信息獲取技術(shù)與物聯(lián)網(wǎng)智能服務(wù)平臺開發(fā) [D].咸陽：西北農(nóng)林科技大學(xué)，2019.

[14] 趙毅.基于GPU的Blowfish算法實現(xiàn)及其應(yīng)用 [D].廣州：華南理工大學(xué)，2019.

[15] 中國民用航空局空管行業(yè)管理辦公室.民用航空自動氣象觀測系統(tǒng)技術(shù)規(guī)范：AP-117-TM—2018-03R1 [S].北京：中國民用航空局，2018.

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

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

研究方向：通用航空信息化、通用航空應(yīng)用技術(shù)研究、通用航空裝備研發(fā)。