赵富强 严风硕 边岱泉 朱小波

摘  要：文章针对通用机场的气象信息服务体系建设不完善、气象服务保障不足的现状，提出一种基于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—），男，汉族，四川成都人，高级工程师，硕士，

研究方向：通用航空信息化、通用航空应用技术研究、通用航空装备研发。