尧图网页设计 
简介这套天津滨海机场航班分析及管理平台源码基于Java后端与Vue等前端技术整合开发面向机场运营管理场景可支撑航班数据实时分析、状态动态展示及高效管理适合希望掌握前后端分离项目实战的开发者研读。压缩包共164个文件以155个Java源码文件为主体涵盖实体、数据访问、业务逻辑等层次辅以XML、YML配置及Maven构建脚本、运行配置等工程化文件包体仅237KB结构紧凑精炼。平台前端通过Vue组件和JavaScript实现交互后端利用分层架构处理航班数据并配有LICENSE开源许可方便合法复用与二次开发。目录中已包含构建脚本、说明文档及版本控制配置能直观了解一个完整Java项目的组织方式。目前已有285人学习下载适合中高级开发者借鉴其航班管理模块设计思路或作为毕业设计、课程项目的起点。1. 这源码解决什么问题上手即用的航班分析闭环做Java课程设计或毕设的人十个里有九个拖到最后一两周才动手真上手才发现航班这类信息管理系统后端Java怎么组织、前端图表怎么画、数据库里的模拟航班数据从哪来全是坑。这套基于Java和前端技术的天津滨海机场航班分析及管理平台设计源码解决的正是这几件事它把Spring Boot MyBatis MySQL的后端体系、Vue ECharts的页面可视化以及航班管理、统计分析所需的数据链路完整串在了同一个工程里。适合Java课程设计、毕业设计以及想快速看一套前后端分离项目内部怎么衔接的从业者。拿到手能直接看到起降架次统计、准点率计算、航班信息管理这些功能的真实实现而不是零散的知识点demo。2. 技术选型与前因后果为什么是Java Spring Boot Vue2.1 从课设到真实系统的三层结构Spring Boot、MyBatis 与 MySQL 的边界这套源码的后端骨架是Spring Boot MyBatis MySQL属于Java EE里最成熟、资料最多、翻车时最容易搜到答案的组合。Spring Boot把Spring MVC原本那一堆XML配置压进自动配置里内嵌Tomcat打成jar包直接跑不用单独部署Web容器这对第一次接触Java Web的人省掉很大一块心智负担。MyBatis是半自动ORM只帮Java对象和SQL结果集之间做映射SQL本身要自己写。航班分析里最重的操作不是增删改查而是按日期、按航空公司、按起降城市做聚合统计手写SQL反而比Hibernate这类全自动ORM更直观。我一般会建议选MyBatis而不是Spring Data JPA因为管理平台的查询条件多、报表SQL变化频繁SQL集中在Mapper文件里可维护性更好。MySQL负责建库建表、存航班基础数据和经停数据表结构并不复杂但字段设计直接影响后面统计SQL能不能写顺。拿到工程后建议先看三样东西建立整体认知pom.xml里有哪些依赖、application.yml的数据源配置、resources/mapper目录下的XML查询语句。这三样看完整个工程的数据流基本就清楚了。2.2 前端负责什么Vue 与 ECharts 在航班可视化里的分工前端用Vue ECharts这几乎是航班分析类平台的标配。Vue管页面组织、表单交互、路由跳转ECharts管图表渲染。起降架次的柱状图、准点率的折线图、热门航线的分布图这些都是ECharts的老本行。为什么不直接用HTML jQuery写几个图表因为航班管理平台不止一个页面航班信息、机票价格、统计报表、用户管理页面之间共享状态Vue的组件化在后期改需求时会轻松很多。ECharts的数据接收方式很直白后端返回JSON数组前端setOption喂给图表。这套源码的可视化维度主要有三个按天统计的起降架次柱状图、按航空公司对比的准点率、以及按航线汇总的热度排序表。真正需要仔细核对的是后端返回结构里的字段名和ECharts里series.data的字段名一致很多对接失败都卡在大小写或别名上。这些字段名一旦定下来就是前后端之间的契约后面改任何一头都要同步另一头。2.3 接口契约与数据流一张航班表如何支撑全平台管理平台的核心表设计是这套源码里最值得抄的部分。航班表持有航班号、起飞机场、降落机场、计划起飞时间、计划降落时间、实际起飞时间、实际降落时间、航班状态和航空公司代码基本覆盖了管理侧和分析侧两类需求。管理侧直接对这些字段做增删改查分析侧用SQL聚合后返回统计结果两边从同一张表读数据不会出现口径不一致的问题。字段选型有几个细节值得注意。时间字段全部用DATETIME而不是字符串存储因为准点率计算要比较实际降落和计划降落两个时间点字符串比较会在格式不一致时翻车。起降机场用三字码存储展示名称单独做映射表避免界面显示和存储结构耦合。航班状态用TINYINT整数0计划、1延误、2到达、3取消前端用统一字典翻译这样要加新状态时不用改表结构。接口设计上管理端走REST风格/flight/page做分页查询/flight/statistics/day做按天聚合/flight/statistics/rate做准点率统计。这些接口返回的JSON结构是固定的比如统计接口统一返回包含日期数组和数值数组的对象前端图表组件直接消费不用在页面里做二次清洗。3. 把工程跑起来环境、配置与首屏数据的完整链路3.1 环境准备JDK、Maven 的版本搭配与安装注意先讲版本搭配。这套源码对应JDK 1.8或11都可以跑Maven用3.6以上版本即可。很多人在环境上翻车不是没装JDK而是JAVA_HOME没配或者PATH顺序被其他JDK干扰。配置JAVA_HOME时路径里不要有中文和空格配好后打开命令行验证一下# 显示Java版本1.8或11均可 java -version # 显示Maven版本3.6以上即可 mvn -vjava -version如果提示不是内部或外部命令先确认JAVA_HOME指向的是JDK安装目录而不是JRE目录再把%JAVA_HOME%\bin追加到PATH最前面注意Windows和Linux路径分隔符的区别。mvn -v如果找不到命令通常是Maven解压目录的bin路径没加进PATH。环境变量配置的完整教程很多这里只提醒这两个跟这套源码直接相关的点PATH里同名的java.exe来自完全不同的JDK安装目录以及Maven镜像源没配置导致依赖下载卡住。如果拉依赖特别慢在Maven安装目录的conf/settings.xml里配置阿里云镜像仓库把jar下载地址换成国内源速度会改善不少。3.2 数据库初始化建库建表与初始航班数据的导入数据库用MySQL 5.7或8.0都能跑建库时指定utf8mb4字符集否则后面导入中文航班城市名容易变问号。方案自带的init.sql完成了建库、建表和模拟航班数据的导入核心航班表的建表语句大致是下面这种结构CREATE TABLE flight_info ( id BIGINT NOT NULL AUTO_INCREMENT, flight_no VARCHAR(10) NOT NULL COMMENT 航班号, airline_code VARCHAR(5) NOT NULL COMMENT 航空公司二字码, departure_code CHAR(3) NOT NULL COMMENT 起飞机场三字码, arrival_code CHAR(3) NOT NULL COMMENT 降落机场三字码, scheduled_departure DATETIME NOT NULL, scheduled_arrival DATETIME NOT NULL, actual_departure DATETIME DEFAULT NULL, actual_arrival DATETIME DEFAULT NULL, status TINYINT NOT NULL DEFAULT 0, PRIMARY KEY (id), KEY idx_departure (departure_code), KEY idx_arrival (arrival_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT航班信息表;建表语句里三个点值得注意。ID用BIGINT自增不要省成INT数据量上来后不容易踩到上限。起降机场三字码字段都建了索引后面按天聚合和按城市过滤时会频繁走索引。状态字段用TINYINT存整数而不是直接存字符串这样前端可以做统一的字典映射也方便后期扩展新状态。导入数据时先建库再建表最后导入数据。用Navicat执行init.sql时选择utf8作为导入字符集如果导入后中文显示为问号说明数据库连接或表字符集不是utf8mb4需要重新建库再导。3.3 后端启动参数梳理端口、数据源与日志配置后端核心配置文件是application.yml里面决定本机能否一次跑通的是数据源三件套URL、用户名、密码。常见做法是单独建一个本地数据库账号不直接拿root用权限只要够用就行。下面这份是整理后的关键配置server: port: 8080 # 后端服务端口被占用时改成8081 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/tj_airport?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: flight_user password: flight123 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath*:mapper/*.xml configuration: map-underscore-to-camel-case: trueURL里的serverTimezoneAsia/Shanghai必须加MySQL 8.0驱动默认时区是UTC不加会导致时间字段偏移8小时。map-underscore-to-camel-case设为true数据库的scheduled_arrival字段才能自动映射成Java实体的scheduledArrival属性不用在每段SQL里写别名。连接池默认用HikariCP就好如果你习惯Druid引入druid-spring-boot-starter之后加一行type: com.alibaba.druid.pool.DruidDataSource即可。配置参数优先级说明如下方便你改端口和数据源时知道动哪一行参数作用容易踩的坑server.port后端HTTP服务端口与前端代理target不一致时联调失败spring.datasource.url数据库连接串漏掉serverTimezone会差8小时mybatis.configuration.map-underscore-to-camel-case下划线转驼峰映射不开启时Java实体里的驼峰字段读不到值spring.jackson.date-formatJSON时间格式不设置时前端拿到的是时间戳数字3.4 前端启动与联调跨域、代理和首个请求验证前端工程启动后默认跑在8081端口避免和后端8080冲突。vue.config.js里必须配devServer代理否则浏览器直接请求localhost:8080会触发跨域报错。代理配置如下module.exports { devServer: { port: 8081, // 前端开发服务端口 proxy: { /api: { // 匹配以/api开头的请求 target: http://localhost:8080, // 转发到后端服务 changeOrigin: true, pathRewrite: { ^/api: } // 去掉/api前缀再转发 } } } }代理的原理是前端本地服务把以/api开头的请求转发给后端8080端口浏览器始终只和8081通信不直接跨域。pathRewrite把/api前缀去掉后后端Controller里不需要加统一前缀少一层维护成本。联调验证方式很直接依次启动后端和前端浏览器打开页面先看Network面板如果航班列表接口返回200且能看到JSON数据说明前后端链路已经通了。如果接口返回404检查代理的target端口是不是写成了后端实际端口如果返回500多半是数据库连接串里用户名密码不对回到3.3的配置里核对一遍。4. 航班分析核心模块聚合统计、准点率与前端图表的联动实现4.1 数据聚合的实现日期分组统计的SQL写法航班分析平台最有价值的部分是统计模块。以按天统计起降架次为例后端Mapper里写一个分组查询把航班表按DATE(actual_departure)分组统计每天的起飞架次。下面是一个可靠的XML Mapper写法select idselectDailyTraffic resultTypemap SELECT DATE(actual_departure) AS stat_date, COUNT(*) AS total_count FROM flight_info WHERE actual_departure IS NOT NULL AND actual_departure BETWEEN #{startTime} AND #{endTime} GROUP BY DATE(actual_departure) ORDER BY stat_date ASC /select这里最关键的是时间过滤条件写在WHERE里而不是HAVING里。GROUP BY之前过滤可以减少分组的数据行数日期范围拉大时性能差距非常明显。DATE()函数把DATETIME截断成日期这样同一航班按天归拢如果你的业务需要按小时或按星期统计改成HOUR()或WEEK()即可。返回类型用map而不是实体类因为聚合结果没有对应的Java beanMapString, Object最省事前端怎么取都灵活。4.2 准点率计算的边界晚于计划时间15分钟算延误准点率是民航系统的核心指标通用标准里航班实际到达时间晚于计划到达时间15分钟以上视为延误。这套源码把计算逻辑放在Service层而不是直接写进SQL是因为边界处理用代码表达更清楚。计算过程要覆盖三种边界实际到达时间为空、实际到达时间早于计划时间、实际晚点超过15分钟。核心逻辑如下// 准点率计算需要import java.time.* private static final long DELAY_THRESHOLD_MINUTES 15L; public double calcOnTimeRate(LocalDateTime scheduledArrival, LocalDateTime actualArrival) { if (actualArrival null) { // 实际到达时间为空时按延误处理避免空指针 return 0.0; } long delayMinutes Duration.between(scheduledArrival, actualArrival).toMinutes(); // 早到按准点处理晚到超过阈值才按延误处理 if (delayMinutes DELAY_THRESHOLD_MINUTES) { return 0.0; } return 1.0; }注意阈值边界用的是而不是恰好晚15分钟整不算延误。这个细节如果在论文答辩或技术评审里被问起能说清楚为什么这么定。Duration.between计算的是两个时间的差值会自动处理跨天的情况比如计划23:55到达、实际00:10到达差值算出来是15分钟而非23小时多。聚合时把每次返回的1.0和0.0累加再除以统计总架次就得到该时间段内的准点率。把这份计算逻辑落到Service方法里还有一个好处统计维度可以随时切换。按天算就把每天的航班列表交给方法逐条判断按航空公司算就换成按航空公司分组不需要改核心判断逻辑只改上层组织方式。4.3 ECharts数据对接把后端聚合结果渲染成柱状图和折线图前端拿到JSON后怎么喂给图表是很多刚接触Vue ECharts的人最容易卡住的地方。拿不到数据大多数不是后端没返回而是字段名对不上。前端组件里常见做法是把统计数据转换成ECharts需要的结构// 从后端拉取按天统计结果 const resp await fetch(/api/flight/statistics/day).then(r r.json()); // 把后端返回的stat_date和total_count拆进x轴和y轴 const statDates resp.data.map(item item.stat_date); const totals resp.data.map(item item.total_count); option { xAxis: { type: category, data: statDates }, yAxis: { type: value }, series: [{ type: bar, // 柱状图折线图改成line并加smooth:true data: totals, name: 起降架次 }] };从代码里能看到后端返回的字段名stat_date、total_count与前端option里映射完全一致这就是接口契约的约束。折线图渲染准点率时series里的type换成line再配一个smooth: true就能变成平滑曲线接口返回值结构不用改。ECharts的setOption支持增量更新切换统计维度时不用重新创建图表实例直接setOption新数据即可。提示前后端字段名对齐是图表显示的关键。改后端SQL别名时记得同步改前端resp.data.map里的字段引用漏一个就会渲染出空图还不报错。5. 避坑指南从数据库中文乱码到航班时刻映射的五条踩坑记录5.1 中文城市名导入后变问号现象执行init.sql后数据库里天津、北京等中文城市名显示为??前端页面加载城市列表时全是乱码。原因建库时没有指定utf8mb4字符集MySQL实例的默认字符集不是utf8mb4或者JDBC连接串没带characterEncodingutf8。这两个条件缺一个中文在写入和读取之间就会丢失。解决删除原库重建建库语句写成CREATE DATABASE tj_airport DEFAULT CHARSETutf8mb4再确认JDBC URL里同时带上characterEncodingutf8和useUnicodetrue。用Navicat导入数据时左下角高级选项里选择utf8mb4字符集再执行导入避免工具层二次转码。5.2 前端图表白屏但后端接口正常现象Network面板里能看到接口200返回JSON数据完整页面上的图表区域却是空白或者只显示一个点。原因图表容器DOM元素初始化时高度为0或者容器本身是display:none状态ECharts在不可见元素上初始化拿不到正确的尺寸。解决给图表容器设置显式高度比如styleheight: 400px在Vue的mounted钩子里再调用echarts.init初始化。如果图表在弹窗里还需要在弹窗打开后再init不能提前在页面加载时就初始化或者初始化后手动调用一次chart.resize()强制重新计算尺寸。5.3 日期查询差8小时现象按天统计的结果和预期对不上比如某天清晨0点到1点的航班被归到了前一天或者查询某一天的数据时首尾时间交叉。原因JDBC URL里漏了serverTimezone参数MySQL 8.0驱动默认按UTC解析DATETIME与东八区产生8小时偏移。解决在连接串末尾加上serverTimezoneAsia/Shanghai重启后端服务。检查方法是在数据库客户端里执行SELECT NOW()如果返回时间和本地一致MySQL实例时区没问题问题就出在驱动连接参数上。同时确认Spring Boot的JVM时区设置必要时在启动参数里加-Duser.timezoneGMT8。5.4 MyBatis动态SQL里的日期参数报错现象接口入参传时间范围时后端抛出日期解析异常或者SQL里日期条件没生效查出来的数据是全量。原因前端传来的日期字符串没有绑定到LocalDateTime参数上。Spring MVC在绑定请求参数时不知道字符串和LocalDateTime之间的转换格式。解决在Controller接收参数上补DateTimeFormat(pattern yyyy-MM-dd HH:mm:ss)RequestBody里的JSON时间字段还要加JsonFormat两种注解职责不同不能混用。如果实体类属性是LocalDateTime加JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8)统一序列化格式前端拿到的时间就是标准的日期字符串不用再手动转换时间戳。5.5 打包后前端页面404现象本地开发一切正常mvn package后访问页面首页能打开但一刷新或刷新子路由就直接404。原因Vue是history模式路由刷新时浏览器按URL请求后端Spring Boot对非接口路径返回404没把前端路由转发到index.html。解决添加一个WebMvcConfigurer配置把非接口路径统一转发到前端入口。配置类代码如下// WebMvcConfig.java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class WebMvcConfig implements WebMvcConfigurer { // 非接口路径统一转发到前端入口支持history路由刷新 Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{path:[^\\.]*}).setViewName(forward:/index.html); } }这段配置的正则[^\\.]*匹配不包含点号的路径排除了静态资源文件只把前端路由转发给index.html。如果你用nginx部署也可以在nginx里配置try_files $uri $uri/ /index.html效果等价但Spring Boot里加配置类更便于本地打包后直接验证。6. 进阶用法把按天统计改成可下钻的“机场-航线-时刻”三级分析前面几章跑通之后这个平台还能再往前一步把静态统计图表改成可交互的下钻分析。思路是给柱状图加点击事件点击某一天把该天的航班按航线维度聚合展示出当天各航线的架次再点击某条航线就展示该航线当天的完整航班时刻表。三个接口分别是/statistics/day、/statistics/day/route?datexxx、/flight/page?datexxxroutexxx。后端改动量不大就是把已经写好的聚合SQL复用新增一个date参数。前端ECharts的click事件绑定到图表实例// 点击柱状图数据项按日期下钻到航线维度 chart.on(click, async (params) { if (params.componentType ! series) return; const selectedDate params.data; // 拿到被点击的日期字段值 const resp await fetch(/api/flight/statistics/day/route?date${selectedDate}).then(r r.json()); routeChart.setOption({ xAxis: { type: category, data: resp.data.map(item item.route_name) }, series: [{ type: bar, data: resp.data.map(item item.route_count) }] }); });点击事件的回调里params.data对应的是xAxis传入的日期字符串不是series里的索引这是很多同学第一次写时最容易搞错的地方。下钻到时刻表时只需要再监听航线图表的click事件把选中的航线代码拼进查询参数调用分页接口即可。验证方法很朴素手工从数据库里查SELECT COUNT(*) FROM flight_info WHERE DATE(actual_departure) 2024-06-01 GROUP BY CONCAT(departure_code, -, arrival_code)对比前端点击当天显示的数字逐项一致就说明链路是通的。做这个功能时我学到的最深一课是后端聚合参数和前端点击事件的字段一定要在动手写代码前定好。以前我做过一个含时间维度分析的功能后端接口参数叫date前端点击事件里取的字段是params.data恰好两者值一样定位了很久才发现是接口字段名不一致。从那以后每次接手含时间字段的分析项目都先把“按天→按小时→按星期”的维度全列出来让前后端照着同一张字段约定表核对确认无误再写代码。这套源码本身不复杂真正容易出问题的反而是维度字段名的约定希望帮到你。本文还有配套的精品资源点击获取 基于Spring Boot和Vue的航班分析管理平台源码解析与实战
简介这套天津滨海机场航班分析及管理平台源码基于Java后端与Vue等前端技术整合开发面向机场运营管理场景可支撑航班数据实时分析、状态动态展示及高效管理适合希望掌握前后端分离项目实战的开发者研读。压缩包共164个文件以155个Java源码文件为主体涵盖实体、数据访问、业务逻辑等层次辅以XML、YML配置及Maven构建脚本、运行配置等工程化文件包体仅237KB结构紧凑精炼。平台前端通过Vue组件和JavaScript实现交互后端利用分层架构处理航班数据并配有LICENSE开源许可方便合法复用与二次开发。目录中已包含构建脚本、说明文档及版本控制配置能直观了解一个完整Java项目的组织方式。目前已有285人学习下载适合中高级开发者借鉴其航班管理模块设计思路或作为毕业设计、课程项目的起点。1. 这源码解决什么问题上手即用的航班分析闭环做Java课程设计或毕设的人十个里有九个拖到最后一两周才动手真上手才发现航班这类信息管理系统后端Java怎么组织、前端图表怎么画、数据库里的模拟航班数据从哪来全是坑。这套基于Java和前端技术的天津滨海机场航班分析及管理平台设计源码解决的正是这几件事它把Spring Boot MyBatis MySQL的后端体系、Vue ECharts的页面可视化以及航班管理、统计分析所需的数据链路完整串在了同一个工程里。适合Java课程设计、毕业设计以及想快速看一套前后端分离项目内部怎么衔接的从业者。拿到手能直接看到起降架次统计、准点率计算、航班信息管理这些功能的真实实现而不是零散的知识点demo。2. 技术选型与前因后果为什么是Java Spring Boot Vue2.1 从课设到真实系统的三层结构Spring Boot、MyBatis 与 MySQL 的边界这套源码的后端骨架是Spring Boot MyBatis MySQL属于Java EE里最成熟、资料最多、翻车时最容易搜到答案的组合。Spring Boot把Spring MVC原本那一堆XML配置压进自动配置里内嵌Tomcat打成jar包直接跑不用单独部署Web容器这对第一次接触Java Web的人省掉很大一块心智负担。MyBatis是半自动ORM只帮Java对象和SQL结果集之间做映射SQL本身要自己写。航班分析里最重的操作不是增删改查而是按日期、按航空公司、按起降城市做聚合统计手写SQL反而比Hibernate这类全自动ORM更直观。我一般会建议选MyBatis而不是Spring Data JPA因为管理平台的查询条件多、报表SQL变化频繁SQL集中在Mapper文件里可维护性更好。MySQL负责建库建表、存航班基础数据和经停数据表结构并不复杂但字段设计直接影响后面统计SQL能不能写顺。拿到工程后建议先看三样东西建立整体认知pom.xml里有哪些依赖、application.yml的数据源配置、resources/mapper目录下的XML查询语句。这三样看完整个工程的数据流基本就清楚了。2.2 前端负责什么Vue 与 ECharts 在航班可视化里的分工前端用Vue ECharts这几乎是航班分析类平台的标配。Vue管页面组织、表单交互、路由跳转ECharts管图表渲染。起降架次的柱状图、准点率的折线图、热门航线的分布图这些都是ECharts的老本行。为什么不直接用HTML jQuery写几个图表因为航班管理平台不止一个页面航班信息、机票价格、统计报表、用户管理页面之间共享状态Vue的组件化在后期改需求时会轻松很多。ECharts的数据接收方式很直白后端返回JSON数组前端setOption喂给图表。这套源码的可视化维度主要有三个按天统计的起降架次柱状图、按航空公司对比的准点率、以及按航线汇总的热度排序表。真正需要仔细核对的是后端返回结构里的字段名和ECharts里series.data的字段名一致很多对接失败都卡在大小写或别名上。这些字段名一旦定下来就是前后端之间的契约后面改任何一头都要同步另一头。2.3 接口契约与数据流一张航班表如何支撑全平台管理平台的核心表设计是这套源码里最值得抄的部分。航班表持有航班号、起飞机场、降落机场、计划起飞时间、计划降落时间、实际起飞时间、实际降落时间、航班状态和航空公司代码基本覆盖了管理侧和分析侧两类需求。管理侧直接对这些字段做增删改查分析侧用SQL聚合后返回统计结果两边从同一张表读数据不会出现口径不一致的问题。字段选型有几个细节值得注意。时间字段全部用DATETIME而不是字符串存储因为准点率计算要比较实际降落和计划降落两个时间点字符串比较会在格式不一致时翻车。起降机场用三字码存储展示名称单独做映射表避免界面显示和存储结构耦合。航班状态用TINYINT整数0计划、1延误、2到达、3取消前端用统一字典翻译这样要加新状态时不用改表结构。接口设计上管理端走REST风格/flight/page做分页查询/flight/statistics/day做按天聚合/flight/statistics/rate做准点率统计。这些接口返回的JSON结构是固定的比如统计接口统一返回包含日期数组和数值数组的对象前端图表组件直接消费不用在页面里做二次清洗。3. 把工程跑起来环境、配置与首屏数据的完整链路3.1 环境准备JDK、Maven 的版本搭配与安装注意先讲版本搭配。这套源码对应JDK 1.8或11都可以跑Maven用3.6以上版本即可。很多人在环境上翻车不是没装JDK而是JAVA_HOME没配或者PATH顺序被其他JDK干扰。配置JAVA_HOME时路径里不要有中文和空格配好后打开命令行验证一下# 显示Java版本1.8或11均可 java -version # 显示Maven版本3.6以上即可 mvn -vjava -version如果提示不是内部或外部命令先确认JAVA_HOME指向的是JDK安装目录而不是JRE目录再把%JAVA_HOME%\bin追加到PATH最前面注意Windows和Linux路径分隔符的区别。mvn -v如果找不到命令通常是Maven解压目录的bin路径没加进PATH。环境变量配置的完整教程很多这里只提醒这两个跟这套源码直接相关的点PATH里同名的java.exe来自完全不同的JDK安装目录以及Maven镜像源没配置导致依赖下载卡住。如果拉依赖特别慢在Maven安装目录的conf/settings.xml里配置阿里云镜像仓库把jar下载地址换成国内源速度会改善不少。3.2 数据库初始化建库建表与初始航班数据的导入数据库用MySQL 5.7或8.0都能跑建库时指定utf8mb4字符集否则后面导入中文航班城市名容易变问号。方案自带的init.sql完成了建库、建表和模拟航班数据的导入核心航班表的建表语句大致是下面这种结构CREATE TABLE flight_info ( id BIGINT NOT NULL AUTO_INCREMENT, flight_no VARCHAR(10) NOT NULL COMMENT 航班号, airline_code VARCHAR(5) NOT NULL COMMENT 航空公司二字码, departure_code CHAR(3) NOT NULL COMMENT 起飞机场三字码, arrival_code CHAR(3) NOT NULL COMMENT 降落机场三字码, scheduled_departure DATETIME NOT NULL, scheduled_arrival DATETIME NOT NULL, actual_departure DATETIME DEFAULT NULL, actual_arrival DATETIME DEFAULT NULL, status TINYINT NOT NULL DEFAULT 0, PRIMARY KEY (id), KEY idx_departure (departure_code), KEY idx_arrival (arrival_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT航班信息表;建表语句里三个点值得注意。ID用BIGINT自增不要省成INT数据量上来后不容易踩到上限。起降机场三字码字段都建了索引后面按天聚合和按城市过滤时会频繁走索引。状态字段用TINYINT存整数而不是直接存字符串这样前端可以做统一的字典映射也方便后期扩展新状态。导入数据时先建库再建表最后导入数据。用Navicat执行init.sql时选择utf8作为导入字符集如果导入后中文显示为问号说明数据库连接或表字符集不是utf8mb4需要重新建库再导。3.3 后端启动参数梳理端口、数据源与日志配置后端核心配置文件是application.yml里面决定本机能否一次跑通的是数据源三件套URL、用户名、密码。常见做法是单独建一个本地数据库账号不直接拿root用权限只要够用就行。下面这份是整理后的关键配置server: port: 8080 # 后端服务端口被占用时改成8081 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/tj_airport?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: flight_user password: flight123 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath*:mapper/*.xml configuration: map-underscore-to-camel-case: trueURL里的serverTimezoneAsia/Shanghai必须加MySQL 8.0驱动默认时区是UTC不加会导致时间字段偏移8小时。map-underscore-to-camel-case设为true数据库的scheduled_arrival字段才能自动映射成Java实体的scheduledArrival属性不用在每段SQL里写别名。连接池默认用HikariCP就好如果你习惯Druid引入druid-spring-boot-starter之后加一行type: com.alibaba.druid.pool.DruidDataSource即可。配置参数优先级说明如下方便你改端口和数据源时知道动哪一行参数作用容易踩的坑server.port后端HTTP服务端口与前端代理target不一致时联调失败spring.datasource.url数据库连接串漏掉serverTimezone会差8小时mybatis.configuration.map-underscore-to-camel-case下划线转驼峰映射不开启时Java实体里的驼峰字段读不到值spring.jackson.date-formatJSON时间格式不设置时前端拿到的是时间戳数字3.4 前端启动与联调跨域、代理和首个请求验证前端工程启动后默认跑在8081端口避免和后端8080冲突。vue.config.js里必须配devServer代理否则浏览器直接请求localhost:8080会触发跨域报错。代理配置如下module.exports { devServer: { port: 8081, // 前端开发服务端口 proxy: { /api: { // 匹配以/api开头的请求 target: http://localhost:8080, // 转发到后端服务 changeOrigin: true, pathRewrite: { ^/api: } // 去掉/api前缀再转发 } } } }代理的原理是前端本地服务把以/api开头的请求转发给后端8080端口浏览器始终只和8081通信不直接跨域。pathRewrite把/api前缀去掉后后端Controller里不需要加统一前缀少一层维护成本。联调验证方式很直接依次启动后端和前端浏览器打开页面先看Network面板如果航班列表接口返回200且能看到JSON数据说明前后端链路已经通了。如果接口返回404检查代理的target端口是不是写成了后端实际端口如果返回500多半是数据库连接串里用户名密码不对回到3.3的配置里核对一遍。4. 航班分析核心模块聚合统计、准点率与前端图表的联动实现4.1 数据聚合的实现日期分组统计的SQL写法航班分析平台最有价值的部分是统计模块。以按天统计起降架次为例后端Mapper里写一个分组查询把航班表按DATE(actual_departure)分组统计每天的起飞架次。下面是一个可靠的XML Mapper写法select idselectDailyTraffic resultTypemap SELECT DATE(actual_departure) AS stat_date, COUNT(*) AS total_count FROM flight_info WHERE actual_departure IS NOT NULL AND actual_departure BETWEEN #{startTime} AND #{endTime} GROUP BY DATE(actual_departure) ORDER BY stat_date ASC /select这里最关键的是时间过滤条件写在WHERE里而不是HAVING里。GROUP BY之前过滤可以减少分组的数据行数日期范围拉大时性能差距非常明显。DATE()函数把DATETIME截断成日期这样同一航班按天归拢如果你的业务需要按小时或按星期统计改成HOUR()或WEEK()即可。返回类型用map而不是实体类因为聚合结果没有对应的Java beanMapString, Object最省事前端怎么取都灵活。4.2 准点率计算的边界晚于计划时间15分钟算延误准点率是民航系统的核心指标通用标准里航班实际到达时间晚于计划到达时间15分钟以上视为延误。这套源码把计算逻辑放在Service层而不是直接写进SQL是因为边界处理用代码表达更清楚。计算过程要覆盖三种边界实际到达时间为空、实际到达时间早于计划时间、实际晚点超过15分钟。核心逻辑如下// 准点率计算需要import java.time.* private static final long DELAY_THRESHOLD_MINUTES 15L; public double calcOnTimeRate(LocalDateTime scheduledArrival, LocalDateTime actualArrival) { if (actualArrival null) { // 实际到达时间为空时按延误处理避免空指针 return 0.0; } long delayMinutes Duration.between(scheduledArrival, actualArrival).toMinutes(); // 早到按准点处理晚到超过阈值才按延误处理 if (delayMinutes DELAY_THRESHOLD_MINUTES) { return 0.0; } return 1.0; }注意阈值边界用的是而不是恰好晚15分钟整不算延误。这个细节如果在论文答辩或技术评审里被问起能说清楚为什么这么定。Duration.between计算的是两个时间的差值会自动处理跨天的情况比如计划23:55到达、实际00:10到达差值算出来是15分钟而非23小时多。聚合时把每次返回的1.0和0.0累加再除以统计总架次就得到该时间段内的准点率。把这份计算逻辑落到Service方法里还有一个好处统计维度可以随时切换。按天算就把每天的航班列表交给方法逐条判断按航空公司算就换成按航空公司分组不需要改核心判断逻辑只改上层组织方式。4.3 ECharts数据对接把后端聚合结果渲染成柱状图和折线图前端拿到JSON后怎么喂给图表是很多刚接触Vue ECharts的人最容易卡住的地方。拿不到数据大多数不是后端没返回而是字段名对不上。前端组件里常见做法是把统计数据转换成ECharts需要的结构// 从后端拉取按天统计结果 const resp await fetch(/api/flight/statistics/day).then(r r.json()); // 把后端返回的stat_date和total_count拆进x轴和y轴 const statDates resp.data.map(item item.stat_date); const totals resp.data.map(item item.total_count); option { xAxis: { type: category, data: statDates }, yAxis: { type: value }, series: [{ type: bar, // 柱状图折线图改成line并加smooth:true data: totals, name: 起降架次 }] };从代码里能看到后端返回的字段名stat_date、total_count与前端option里映射完全一致这就是接口契约的约束。折线图渲染准点率时series里的type换成line再配一个smooth: true就能变成平滑曲线接口返回值结构不用改。ECharts的setOption支持增量更新切换统计维度时不用重新创建图表实例直接setOption新数据即可。提示前后端字段名对齐是图表显示的关键。改后端SQL别名时记得同步改前端resp.data.map里的字段引用漏一个就会渲染出空图还不报错。5. 避坑指南从数据库中文乱码到航班时刻映射的五条踩坑记录5.1 中文城市名导入后变问号现象执行init.sql后数据库里天津、北京等中文城市名显示为??前端页面加载城市列表时全是乱码。原因建库时没有指定utf8mb4字符集MySQL实例的默认字符集不是utf8mb4或者JDBC连接串没带characterEncodingutf8。这两个条件缺一个中文在写入和读取之间就会丢失。解决删除原库重建建库语句写成CREATE DATABASE tj_airport DEFAULT CHARSETutf8mb4再确认JDBC URL里同时带上characterEncodingutf8和useUnicodetrue。用Navicat导入数据时左下角高级选项里选择utf8mb4字符集再执行导入避免工具层二次转码。5.2 前端图表白屏但后端接口正常现象Network面板里能看到接口200返回JSON数据完整页面上的图表区域却是空白或者只显示一个点。原因图表容器DOM元素初始化时高度为0或者容器本身是display:none状态ECharts在不可见元素上初始化拿不到正确的尺寸。解决给图表容器设置显式高度比如styleheight: 400px在Vue的mounted钩子里再调用echarts.init初始化。如果图表在弹窗里还需要在弹窗打开后再init不能提前在页面加载时就初始化或者初始化后手动调用一次chart.resize()强制重新计算尺寸。5.3 日期查询差8小时现象按天统计的结果和预期对不上比如某天清晨0点到1点的航班被归到了前一天或者查询某一天的数据时首尾时间交叉。原因JDBC URL里漏了serverTimezone参数MySQL 8.0驱动默认按UTC解析DATETIME与东八区产生8小时偏移。解决在连接串末尾加上serverTimezoneAsia/Shanghai重启后端服务。检查方法是在数据库客户端里执行SELECT NOW()如果返回时间和本地一致MySQL实例时区没问题问题就出在驱动连接参数上。同时确认Spring Boot的JVM时区设置必要时在启动参数里加-Duser.timezoneGMT8。5.4 MyBatis动态SQL里的日期参数报错现象接口入参传时间范围时后端抛出日期解析异常或者SQL里日期条件没生效查出来的数据是全量。原因前端传来的日期字符串没有绑定到LocalDateTime参数上。Spring MVC在绑定请求参数时不知道字符串和LocalDateTime之间的转换格式。解决在Controller接收参数上补DateTimeFormat(pattern yyyy-MM-dd HH:mm:ss)RequestBody里的JSON时间字段还要加JsonFormat两种注解职责不同不能混用。如果实体类属性是LocalDateTime加JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8)统一序列化格式前端拿到的时间就是标准的日期字符串不用再手动转换时间戳。5.5 打包后前端页面404现象本地开发一切正常mvn package后访问页面首页能打开但一刷新或刷新子路由就直接404。原因Vue是history模式路由刷新时浏览器按URL请求后端Spring Boot对非接口路径返回404没把前端路由转发到index.html。解决添加一个WebMvcConfigurer配置把非接口路径统一转发到前端入口。配置类代码如下// WebMvcConfig.java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class WebMvcConfig implements WebMvcConfigurer { // 非接口路径统一转发到前端入口支持history路由刷新 Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{path:[^\\.]*}).setViewName(forward:/index.html); } }这段配置的正则[^\\.]*匹配不包含点号的路径排除了静态资源文件只把前端路由转发给index.html。如果你用nginx部署也可以在nginx里配置try_files $uri $uri/ /index.html效果等价但Spring Boot里加配置类更便于本地打包后直接验证。6. 进阶用法把按天统计改成可下钻的“机场-航线-时刻”三级分析前面几章跑通之后这个平台还能再往前一步把静态统计图表改成可交互的下钻分析。思路是给柱状图加点击事件点击某一天把该天的航班按航线维度聚合展示出当天各航线的架次再点击某条航线就展示该航线当天的完整航班时刻表。三个接口分别是/statistics/day、/statistics/day/route?datexxx、/flight/page?datexxxroutexxx。后端改动量不大就是把已经写好的聚合SQL复用新增一个date参数。前端ECharts的click事件绑定到图表实例// 点击柱状图数据项按日期下钻到航线维度 chart.on(click, async (params) { if (params.componentType ! series) return; const selectedDate params.data; // 拿到被点击的日期字段值 const resp await fetch(/api/flight/statistics/day/route?date${selectedDate}).then(r r.json()); routeChart.setOption({ xAxis: { type: category, data: resp.data.map(item item.route_name) }, series: [{ type: bar, data: resp.data.map(item item.route_count) }] }); });点击事件的回调里params.data对应的是xAxis传入的日期字符串不是series里的索引这是很多同学第一次写时最容易搞错的地方。下钻到时刻表时只需要再监听航线图表的click事件把选中的航线代码拼进查询参数调用分页接口即可。验证方法很朴素手工从数据库里查SELECT COUNT(*) FROM flight_info WHERE DATE(actual_departure) 2024-06-01 GROUP BY CONCAT(departure_code, -, arrival_code)对比前端点击当天显示的数字逐项一致就说明链路是通的。做这个功能时我学到的最深一课是后端聚合参数和前端点击事件的字段一定要在动手写代码前定好。以前我做过一个含时间维度分析的功能后端接口参数叫date前端点击事件里取的字段是params.data恰好两者值一样定位了很久才发现是接口字段名不一致。从那以后每次接手含时间字段的分析项目都先把“按天→按小时→按星期”的维度全列出来让前后端照着同一张字段约定表核对确认无误再写代码。这套源码本身不复杂真正容易出问题的反而是维度字段名的约定希望帮到你。本文还有配套的精品资源点击获取