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

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

關(guān)鍵詞：Vue;SpringBoot;機(jī)場(chǎng);氣象

中圖分類號(hào)：TP311.5 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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 ?引 ?言

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

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

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

1 ?項(xiàng)目環(huán)境

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

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

（1）JavaScript（簡(jiǎn)稱“JS”）。JS是一種輕量級(jí)的解釋型或即時(shí)編譯型的高級(jí)編程語言。

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

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

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

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

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

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

2 ?總體設(shè)計(jì)

2.1 ?整體架構(gòu)

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

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

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

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

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

“設(shè)備”包括地圖和設(shè)備狀態(tài)，設(shè)備狀態(tài)顯示臺(tái)站編號(hào)、自動(dòng)氣象站和云高儀設(shè)備信息。“我的”包括設(shè)備設(shè)置、密碼修改、意見反饋和關(guān)于我們。

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

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

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

列表模式主要展示系統(tǒng)中的所有機(jī)場(chǎng)。包括機(jī)場(chǎng)名稱、機(jī)場(chǎng)編號(hào)、海拔等信息。可以查看機(jī)場(chǎng)氣象的歷史記錄，可以選擇日期導(dǎo)出一個(gè)時(shí)間段的數(shù)據(jù)列表。

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

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

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

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

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

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

3.1 ?Blowfish加密算法

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

加密的代碼為：

//密碼加密

BCryptPasswordEncoder passwordEncoder=new BCrypt PasswordEncoder（）;

String newPassword= passwordEncoder.encode（password）;

3.2 ?報(bào)文處理

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

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)頁搜索框輸入的機(jī)場(chǎng)信息，與數(shù)據(jù)庫機(jī)場(chǎng)字段相匹配，如果存在該機(jī)場(chǎng)信息，系統(tǒng)訪問高德地圖API服務(wù)器，完成地圖加載;與此同時(shí)，在右側(cè)完成機(jī)場(chǎng)信息加載。下文為部分代碼：

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（"機(jī)場(chǎng)"） ！= -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)實(shí)現(xiàn)

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

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

5 ?結(jié) ?論

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

參考文獻(xiàn)：

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

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

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

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

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

[6] 王閱蓁.移動(dòng)應(yīng)用的web與native混合編程模式研究與實(shí)現(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] 趙敬宇.基于個(gè)性化推薦的醫(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的氣象項(xiàng)目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)技術(shù)與發(fā)展，2020，30（7）：204-209.

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

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

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

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

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

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

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