希思罗机场天气数据可视化分析系统 — 技术文档一、项目概述1.1 项目简介本系统是一个基于 Flask 框架的 Web 应用对英国伦敦希思罗机场 1979—2023 年共 45 年的气象观测数据进行可视化分析。系统提供温度、降水、日照、综合气象、深度分析等多维度图表展示并配备日期查询、年份对比、相关性矩阵、天气日历、极端记录等实用分析工具。1.2 技术栈层级技术版本后端框架Flask3.x数据库SQLite3 (内置)前端框架Bootstrap5.3.0图表库ECharts5.4.3图标库Bootstrap Icons1.10.5字体Google Fonts (Inter)—密码加密Werkzeug (pbkdf2)随 Flask数据计算NumPy—1.3 数据来源伦敦希思罗机场气象站每日观测数据来源为欧洲气候评估数据集ECAD覆盖 1979 年 1 月 1 日至 2023 年 12 月 31 日共计16,436 条记录。二、项目结构weather/ ├── app.py # Flask 主应用1123 行46 个路由 ├── init_db.py # 数据库初始化脚本130 行 ├── weather.db # SQLite 数据库文件 ├── london_weather_data_1979_to_2023.csv# 原始数据集 ├── static/ │ ├── css/ │ │ └── style.css # 全局样式表 │ ├── js/ │ │ └── charts.js # ECharts 通用工具函数 │ └── images/ │ └── airport-bg.jpg # 登录页背景图 └── templates/ ├── base.html # 基础布局模板导航栏 页脚 Toast ├── login.html # 登录页独立模板毛玻璃风格 ├── register.html # 注册页独立模板毛玻璃风格 ├── index.html # 首页 / 数据概览 ├── profile.html # 个人中心 ├── data_manage.html # 数据管理管理员 ├── admin_users.html # 用户管理管理员 ├── analysis_temperature.html # 温度分析7 图表 ├── analysis_precipitation.html # 降水分析6 图表 ├── analysis_sunshine.html # 日照与辐射分析5 图表 ├── analysis_comprehensive.html # 综合气象分析7 图表 ├── analysis_advanced.html # 深度分析6 图表 ├── tools_date_query.html # 日期查询 CSV 导出 ├── tools_correlation.html # 气象要素相关性矩阵 ├── tools_year_compare.html # 年份对比工具 ├── tools_weather_calendar.html # 天气日历热力图 └── tools_extreme_records.html # 极端天气记录排行三、数据库设计3.1 数据表users— 用户表字段类型约束说明idINTEGERPRIMARY KEY AUTOINCREMENT用户 IDusernameTEXTNOT NULL UNIQUE用户名passwordTEXTNOT NULL密码哈希 (pbkdf2)emailTEXT—邮箱nicknameTEXT—昵称avatarTEXTDEFAULT ‘default.png’头像文件名roleTEXTDEFAULT ‘user’角色admin/usercreated_atTIMESTAMPDEFAULT CURRENT_TIMESTAMP注册时间last_loginTIMESTAMP—最后登录时间默认管理员账号用户名admin密码admin1233.2 数据表weather— 气象数据表字段类型说明原始单位存储单位idINTEGER主键——dateTEXT日期 (YYYYMMDD)——yearINTEGER年份——monthINTEGER月份——dayINTEGER日——seasonTEXT季节春/夏/秋/冬——txREAL日最高温度0.1°C°CtnREAL日最低温度0.1°C°CtgREAL日平均温度0.1°C°CssREAL日照时长0.1hhsdREAL积雪深度cmcmrrREAL降水量0.1mmmmqqREAL太阳辐射W/m²W/m²ppREAL气压0.1hPahPahuREAL相对湿度%%ccREAL云量oktaokta索引idx_yearONweather(year)idx_monthONweather(month)idx_seasonONweather(season)idx_dateONweather(date)3.3 数据导入流程init_db.py负责数据库初始化删除旧数据库文件如存在创建users表并插入默认管理员创建weather表及索引逐行读取 CSV 文件进行单位换算0.1°C → °C、0.1mm → mm 等根据月份自动判定季节3-5 月春、6-8 月夏、9-11 月秋、12-2 月冬批量插入所有记录四、后端架构4.1 核心模块app.pyapp.py 结构 ├── 导入与配置1-12 行 ├── 数据库工具函数15-34 行 │ ├── get_db() — 获取 SQLite 连接 │ ├── query_db() — 查询返回字典列表 │ └── execute_db() — 执行写操作 ├── 装饰器43-63 行 │ ├── login_required — 登录检查 │ └── admin_required — 管理员权限检查 ├── 认证路由70-151 行 │ ├── /login — 登录 │ ├── /register — 注册 │ └── /logout — 登出 ├── 页面路由157-420 行 │ ├── 首页、分析页面、数据管理、个人中心、管理员用户管理 │ └── 工具页面日期查询、相关性、年份对比、天气日历、极端记录 ├── 数据概览 API425-445 行 ├── 温度分析 API450-530 行 — 7 个端点 ├── 降水分析 API535-625 行 — 6 个端点 ├── 日照与辐射 API630-690 行 — 5 个端点 ├── 综合气象 API695-780 行 — 7 个端点 ├── 深度分析 API785-880 行 — 7 个端点 └── 工具 API885-1100 行 — 6 个端点4.2 权限控制系统采用两级角色模型角色权限user普通用户查看首页、所有分析页面、所有工具页面、个人中心admin管理员在普通用户基础上增加数据管理CRUD和用户管理权限实现login_required装饰器检查session[user_id]是否存在admin_required装饰器在登录检查基础上额外验证session[role] admin前端模板通过{% if session.get(role) admin %}控制菜单和按钮的显示4.3 API 端点汇总系统共提供39 个 API 端点全部返回 JSON 格式数据数据概览1 个端点说明GET /api/overview总记录数、年份范围、平均温度、总降水量、日均日照、极端温度、平均湿度温度分析7 个端点说明GET /api/yearly_temperature年度平均最高/最低/平均温度及极端值GET /api/monthly_temperature月度平均温度GET /api/temperature_range年度日温差平均/最大/最小GET /api/seasonal_temperature季节性温度按年×季分组GET /api/monthly_temperature_heatmap月度温度热力图数据年×月矩阵GET /api/temperature_distribution温度频率直方图2°C 间隔GET /api/temperature_anomaly温度距平每年均温 - 总均温降水分析6 个端点说明GET /api/yearly_precipitation年度总降水、日均降水、降水日数GET /api/monthly_precipitation月度平均降水、月均总降水、月均降水日数GET /api/precipitation_distribution降水强度分类统计无/微量/小雨/中雨/大雨/暴雨GET /api/precipitation_anomaly降水距平GET /api/dry_spell_analysis连续干旱日数每年最长/平均GET /api/monthly_precipitation_heatmap月度降水量热力图年×月日照与辐射5 个端点说明GET /api/yearly_sunshine年度总日照、日均日照、晴天日数GET /api/monthly_sunshine月度日照GET /api/radiation_analysis年度太阳辐射平均/最大/最小GET /api/monthly_radiation月度辐射GET /api/radiation_sunshine_correlation辐射-日照-温度月度相关综合气象7 个端点说明GET /api/yearly_pressure年度气压平均/极值/振幅GET /api/monthly_pressure月度气压GET /api/humidity_analysis年度湿度GET /api/monthly_humidity月度湿度GET /api/cloud_cover_analysis年度云量 晴天/阴天日数GET /api/monthly_cloud月度云量GET /api/snow_analysis年度降雪降雪日数/平均深度/最大深度深度分析7 个端点说明GET /api/temp_precip_scatter温度-降水量散点采样 3000 点GET /api/humidity_temp_correlation湿度-温度相关GET /api/extreme_weather年度极端天气日数高温/霜冻/暴雨/降雪/温暖GET /api/decade_comparison年代际对比5 个年代段GET /api/growing_season生长季分析5°C/10°C/0°C 日数GET /api/pressure_precip_correlation气压-降水相关5 级气压对应降水概率GET /api/wind_speed_estimation气压振幅-云量月度趋势分析工具6 个端点说明GET /api/date_query?startend按日期范围查询完整气象数据GET /api/export_csv?startend导出 CSV 文件下载GET /api/correlation_data9×9 Pearson 相关系数矩阵 4 组散点采样GET /api/year_compare?year1year2两年月度多维度对比GET /api/weather_calendar?year某年逐日气象数据日历热力图用GET /api/extreme_records历史极端记录 TOP10高温/低温/降水/干旱/日照五、前端架构5.1 页面体系登录页独立模板 ──→ 首页数据概览 │ ┌─────────────────┼─────────────────┐ ▼ ▼ ▼ 5 个分析页面 5 个工具页面 管理功能 ├─ 温度分析 ├─ 日期查询 ├─ 数据管理管理员 ├─ 降水分析 ├─ 相关性矩阵 ├─ 用户管理管理员 ├─ 日照与辐射 ├─ 年份对比 └─ 个人中心 ├─ 综合气象 ├─ 天气日历 └─ 深度分析 └─ 极端记录5.2 基础布局base.html所有登录后的页面均继承自base.html包含顶部导航栏品牌标识、数据概览、数据分析下拉菜单、分析工具下拉菜单、数据管理管理员、用户下拉菜单Flash 消息系统自定义毛玻璃风格 Toast 浮窗支持 success/danger/warning/info 四种类型自动 3 秒后滑出消失页脚版权信息全局依赖Bootstrap 5.3 CSS/JS、Bootstrap Icons、Google Fonts、ECharts 5.4.35.3 登录/注册页独立模板不继承base.html采用毛玻璃设计风格背景机场实景图片 深色半透明遮罩登录卡片backdrop-filter: blur(8px)深色半透明背景白色微光边框输入框Bootstrapinput-group组件图标 输入框组合动画淡入效果5.4 图表通用工具charts.js// 颜色常量COLORS{primary,success,danger,warning,info,purple,pink,indigo,teal,orange,series[]}// 通用图表配置COMMON_OPTION{tooltip,grid,toolbox(保存图片/区域缩放/还原)}// 工具函数fetchJSON(url)— fetch 封装返回JSONinitChart(domId)— 初始化 ECharts 实例createGradient(stops)— 创建线性渐变setupResize()— 监听窗口 resize 自动调整图表大小5.5 全局样式style.css模块说明CSS 变量定义主色调、阴影、圆角、过渡等全局变量导航栏渐变背景、滚动时缩小、毛玻璃效果Hero 区域深蓝渐变背景 点阵纹理概览卡片4 列网格、毛玻璃背景、悬停上浮图表卡片白色背景、圆角、悬停阴影增强图表分析浅蓝渐变背景放置分析结论文字响应式992px/768px/576px 三档断点动画fadeInUp 交错入场动画自定义滚动条WebKit 浏览器圆角滚动条5.6 图表清单共 31 个温度分析页7 个图号图表名称图表类型数据源图1年度平均温度趋势多折线图/api/yearly_temperature图2月度温度分布柱状图折线/api/monthly_temperature图3温度日较差分析多折线图/api/temperature_range图4季节温度变化趋势多折线图/api/seasonal_temperature图5温度热力图热力图年×月/api/monthly_temperature_heatmap图6温度频率分布直方图/api/temperature_distribution图7温度距平分析柱状图正负色/api/temperature_anomaly降水分析页6 个图号图表名称图表类型数据源图8年度降水量与降水日数柱状图折线/api/yearly_precipitation图9月度降水量分布柱状图折线/api/monthly_precipitation图10日降水量强度分布环形饼图/api/precipitation_distribution图11降水距平分析柱状图正负色/api/precipitation_anomaly图12连续干旱日数分析柱状图折线/api/dry_spell_analysis图13月度降水量热力图热力图年×月/api/monthly_precipitation_heatmap综合气象页7 个图表名称图表类型数据源年度气压变化趋势多折线图/api/yearly_pressure月度气压分布柱状图折线/api/monthly_pressure年度湿度变化多折线图/api/humidity_analysis月度湿度分布柱状图/api/monthly_humidity云量与晴天/阴天日数柱状图折线/api/cloud_cover_analysis月度云量分析柱状图折线/api/monthly_cloud降雪分析柱状图折线/api/snow_analysis深度分析页6 个图表名称图表类型数据源温度-降水量散点图散点图/api/temp_precip_scatter湿度-温度相关性散点图折线/api/humidity_temp_correlation极端天气日数统计堆叠面积图/api/extreme_weather年代际气候对比分组柱状图/api/decade_comparison生长季长度变化面积图/api/growing_season气压与降水概率柱状图折线/api/pressure_precip_correlation首页预览3 个图表名称图表类型数据源年度平均温度趋势多折线图/api/yearly_temperature年度降水量趋势柱状图折线/api/yearly_precipitation月度平均温度雷达图雷达图/api/monthly_temperature工具页面图表8 个页面图表名称图表类型日期查询温度变化曲线折线图日期查询降水量柱状图柱状图相关性矩阵相关系数热力图热力图相关性矩阵4 组散点图散点图年份对比温度/降水/日照/气压/湿度对比双折线图5 组天气日历日历热力图ECharts calendar天气日历逐日变化曲线折线图/柱状图天气日历月度汇总柱状图六、功能模块详解6.1 数据概览首页概览指标卡片8 个总记录数、覆盖年份、年均温度、年均降水量、日均日照、极端高温、极端低温、平均湿度快捷导航6 个入口卡片温度分析、降水分析、日照与辐射、综合气象、深度分析、数据管理管理员可见分析工具入口5 个卡片日期查询、相关性分析、年份对比、天气日历、极端记录快速预览图表3 个温度趋势、降水趋势、温度雷达图6.2 五大分析模块每个分析页面包含Hero 区域标题 描述图表卡片图表 分析结论文字交错入场动画6.3 分析工具6.3.1 日期查询日期范围选择器 7 个快捷年份按钮查询后展示统计摘要6 个指标卡片 温度曲线 降水柱状图 数据表格支持导出 CSV 文件含 BOM 头兼容 Excel 中文6.3.2 相关性矩阵9 个气象要素最高温/最低温/平均温/日照/降水/辐射/气压/湿度/云量的 Pearson 相关系数9×9 热力图颜色映射 [-1, 1]4 组典型散点图温度-湿度、温度-降水、气压-降水、日照-温度各 2000 采样点6.3.3 年份对比下拉选择任意两个年份年度概况卡片对比8 项指标 × 2 年5 组月度对比折线图温度、降水、日照、气压、湿度6.3.4 天气日历ECharts 日历热力图类似 GitHub 贡献图支持切换指标温度/降水/日照/云量和年份8 个选项配套逐日变化曲线 月度汇总柱状图6.3.5 极端记录3 个极值概览卡片历史最高温、最低温、单日最大降水6 个 TOP10 排行榜高温、低温、单日降水、最长连续干旱、最湿年份、最晴朗年份6.4 数据管理管理员分页表格展示每页 20 条支持按年份/月份/季节筛选新增数据日期自动解析年月日和季节编辑数据修改温度、降水、日照等 10 个气象指标删除数据单条删除6.5 用户管理管理员统计卡片总用户数、管理员数、普通用户数用户列表显示用户名、昵称、邮箱、角色、注册时间、最后登录操作切换角色admin/user、重置密码重置为123456、删除用户安全限制不能删除自己、不能修改自己的角色6.6 个人中心查看个人信息用户名、昵称、邮箱、角色、注册时间修改昵称和邮箱修改密码需验证原密码七、部署与运行7.1 环境要求Python 3.8pip (Python 包管理器)7.2 依赖安装pipinstallflask numpysqlite3、csv、io、os、random、functools、datetime为 Python 标准库无需额外安装。werkzeug随 Flask 一起安装。7.3 数据库初始化首次运行时系统检测到weather.db不存在会自动调用init_db.py初始化数据库。也可手动执行python init_db.py该脚本会创建users表并插入默认管理员 (admin/admin123)创建weather表及索引从 CSV 文件导入 16,436 条气象记录7.4 启动应用python app.py默认监听0.0.0.0:5000浏览器访问http://localhost:50007.5 默认账号角色用户名密码管理员adminadmin123八、安全设计8.1 认证与会话基于 Flasksession的服务端会话管理密码使用 Werkzeug 的generate_password_hash(pbkdf2:sha256) 加密存储支持记住我功能控制 session 是否持久化8.2 权限控制路由级权限login_required和admin_required装饰器模板级权限Jinja2 条件渲染隐藏无权菜单API 端点暂无权限限制仅需登录即可访问数据 API8.3 输入校验注册用户名长度 3-20 字符、密码不少于 6 位、两次密码一致、用户名唯一性检查数据管理日期格式校验、数值类型安全转换parse_float函数8.4 SQL 注入防护所有 SQL 查询使用参数化占位符?避免字符串拼接data_manage的筛选条件通过白名单字段构建九、设计规范9.1 配色方案用途色值说明主色#2563eb蓝色用于按钮、链接、图表主色成功#10b981绿色用于成功提示危险#ef4444红色用于错误、高温警告#f59e0b橙色用于警告、日照信息#06b6d4青色用于低温、信息背景#f1f5f9浅灰页面底色深色#1e293b导航栏、页脚9.2 圆角规范卡片/容器12px按钮8pxToast14px概览卡片16px9.3 响应式断点断点宽度调整大屏 992px默认布局中屏≤ 992px图表高度 350px概览卡片上边距小屏≤ 768px图表高度 300px概览卡片 2 列超小屏≤ 576px概览卡片 1 列图表头部纵向排列十、文件清单文件行数职责app.py1123Flask 主应用路由 API 业务逻辑init_db.py130数据库初始化CSV 导入style.css450全局样式charts.js54ECharts 通用工具函数base.html178基础布局模板index.html287首页login.html~150登录页独立模板register.html~170注册页独立模板profile.html~120个人中心data_manage.html~180数据管理admin_users.html~100用户管理analysis_temperature.html~200温度分析analysis_precipitation.html~110降水分析analysis_sunshine.html~150日照分析analysis_comprehensive.html~180综合气象analysis_advanced.html~170深度分析tools_date_query.html~130日期查询tools_correlation.html~100相关性矩阵tools_year_compare.html~120年份对比tools_weather_calendar.html~110天气日历tools_extreme_records.html~100极端记录
153-基于FLask的英国希思罗机场天气数据可视化分析系统
发布时间：2026/5/28 5:24:06
希思罗机场天气数据可视化分析系统 — 技术文档一、项目概述1.1 项目简介本系统是一个基于 Flask 框架的 Web 应用对英国伦敦希思罗机场 1979—2023 年共 45 年的气象观测数据进行可视化分析。系统提供温度、降水、日照、综合气象、深度分析等多维度图表展示并配备日期查询、年份对比、相关性矩阵、天气日历、极端记录等实用分析工具。1.2 技术栈层级技术版本后端框架Flask3.x数据库SQLite3 (内置)前端框架Bootstrap5.3.0图表库ECharts5.4.3图标库Bootstrap Icons1.10.5字体Google Fonts (Inter)—密码加密Werkzeug (pbkdf2)随 Flask数据计算NumPy—1.3 数据来源伦敦希思罗机场气象站每日观测数据来源为欧洲气候评估数据集ECAD覆盖 1979 年 1 月 1 日至 2023 年 12 月 31 日共计16,436 条记录。二、项目结构weather/ ├── app.py # Flask 主应用1123 行46 个路由 ├── init_db.py # 数据库初始化脚本130 行 ├── weather.db # SQLite 数据库文件 ├── london_weather_data_1979_to_2023.csv# 原始数据集 ├── static/ │ ├── css/ │ │ └── style.css # 全局样式表 │ ├── js/ │ │ └── charts.js # ECharts 通用工具函数 │ └── images/ │ └── airport-bg.jpg # 登录页背景图 └── templates/ ├── base.html # 基础布局模板导航栏 页脚 Toast ├── login.html # 登录页独立模板毛玻璃风格 ├── register.html # 注册页独立模板毛玻璃风格 ├── index.html # 首页 / 数据概览 ├── profile.html # 个人中心 ├── data_manage.html # 数据管理管理员 ├── admin_users.html # 用户管理管理员 ├── analysis_temperature.html # 温度分析7 图表 ├── analysis_precipitation.html # 降水分析6 图表 ├── analysis_sunshine.html # 日照与辐射分析5 图表 ├── analysis_comprehensive.html # 综合气象分析7 图表 ├── analysis_advanced.html # 深度分析6 图表 ├── tools_date_query.html # 日期查询 CSV 导出 ├── tools_correlation.html # 气象要素相关性矩阵 ├── tools_year_compare.html # 年份对比工具 ├── tools_weather_calendar.html # 天气日历热力图 └── tools_extreme_records.html # 极端天气记录排行三、数据库设计3.1 数据表users— 用户表字段类型约束说明idINTEGERPRIMARY KEY AUTOINCREMENT用户 IDusernameTEXTNOT NULL UNIQUE用户名passwordTEXTNOT NULL密码哈希 (pbkdf2)emailTEXT—邮箱nicknameTEXT—昵称avatarTEXTDEFAULT ‘default.png’头像文件名roleTEXTDEFAULT ‘user’角色admin/usercreated_atTIMESTAMPDEFAULT CURRENT_TIMESTAMP注册时间last_loginTIMESTAMP—最后登录时间默认管理员账号用户名admin密码admin1233.2 数据表weather— 气象数据表字段类型说明原始单位存储单位idINTEGER主键——dateTEXT日期 (YYYYMMDD)——yearINTEGER年份——monthINTEGER月份——dayINTEGER日——seasonTEXT季节春/夏/秋/冬——txREAL日最高温度0.1°C°CtnREAL日最低温度0.1°C°CtgREAL日平均温度0.1°C°CssREAL日照时长0.1hhsdREAL积雪深度cmcmrrREAL降水量0.1mmmmqqREAL太阳辐射W/m²W/m²ppREAL气压0.1hPahPahuREAL相对湿度%%ccREAL云量oktaokta索引idx_yearONweather(year)idx_monthONweather(month)idx_seasonONweather(season)idx_dateONweather(date)3.3 数据导入流程init_db.py负责数据库初始化删除旧数据库文件如存在创建users表并插入默认管理员创建weather表及索引逐行读取 CSV 文件进行单位换算0.1°C → °C、0.1mm → mm 等根据月份自动判定季节3-5 月春、6-8 月夏、9-11 月秋、12-2 月冬批量插入所有记录四、后端架构4.1 核心模块app.pyapp.py 结构 ├── 导入与配置1-12 行 ├── 数据库工具函数15-34 行 │ ├── get_db() — 获取 SQLite 连接 │ ├── query_db() — 查询返回字典列表 │ └── execute_db() — 执行写操作 ├── 装饰器43-63 行 │ ├── login_required — 登录检查 │ └── admin_required — 管理员权限检查 ├── 认证路由70-151 行 │ ├── /login — 登录 │ ├── /register — 注册 │ └── /logout — 登出 ├── 页面路由157-420 行 │ ├── 首页、分析页面、数据管理、个人中心、管理员用户管理 │ └── 工具页面日期查询、相关性、年份对比、天气日历、极端记录 ├── 数据概览 API425-445 行 ├── 温度分析 API450-530 行 — 7 个端点 ├── 降水分析 API535-625 行 — 6 个端点 ├── 日照与辐射 API630-690 行 — 5 个端点 ├── 综合气象 API695-780 行 — 7 个端点 ├── 深度分析 API785-880 行 — 7 个端点 └── 工具 API885-1100 行 — 6 个端点4.2 权限控制系统采用两级角色模型角色权限user普通用户查看首页、所有分析页面、所有工具页面、个人中心admin管理员在普通用户基础上增加数据管理CRUD和用户管理权限实现login_required装饰器检查session[user_id]是否存在admin_required装饰器在登录检查基础上额外验证session[role] admin前端模板通过{% if session.get(role) admin %}控制菜单和按钮的显示4.3 API 端点汇总系统共提供39 个 API 端点全部返回 JSON 格式数据数据概览1 个端点说明GET /api/overview总记录数、年份范围、平均温度、总降水量、日均日照、极端温度、平均湿度温度分析7 个端点说明GET /api/yearly_temperature年度平均最高/最低/平均温度及极端值GET /api/monthly_temperature月度平均温度GET /api/temperature_range年度日温差平均/最大/最小GET /api/seasonal_temperature季节性温度按年×季分组GET /api/monthly_temperature_heatmap月度温度热力图数据年×月矩阵GET /api/temperature_distribution温度频率直方图2°C 间隔GET /api/temperature_anomaly温度距平每年均温 - 总均温降水分析6 个端点说明GET /api/yearly_precipitation年度总降水、日均降水、降水日数GET /api/monthly_precipitation月度平均降水、月均总降水、月均降水日数GET /api/precipitation_distribution降水强度分类统计无/微量/小雨/中雨/大雨/暴雨GET /api/precipitation_anomaly降水距平GET /api/dry_spell_analysis连续干旱日数每年最长/平均GET /api/monthly_precipitation_heatmap月度降水量热力图年×月日照与辐射5 个端点说明GET /api/yearly_sunshine年度总日照、日均日照、晴天日数GET /api/monthly_sunshine月度日照GET /api/radiation_analysis年度太阳辐射平均/最大/最小GET /api/monthly_radiation月度辐射GET /api/radiation_sunshine_correlation辐射-日照-温度月度相关综合气象7 个端点说明GET /api/yearly_pressure年度气压平均/极值/振幅GET /api/monthly_pressure月度气压GET /api/humidity_analysis年度湿度GET /api/monthly_humidity月度湿度GET /api/cloud_cover_analysis年度云量 晴天/阴天日数GET /api/monthly_cloud月度云量GET /api/snow_analysis年度降雪降雪日数/平均深度/最大深度深度分析7 个端点说明GET /api/temp_precip_scatter温度-降水量散点采样 3000 点GET /api/humidity_temp_correlation湿度-温度相关GET /api/extreme_weather年度极端天气日数高温/霜冻/暴雨/降雪/温暖GET /api/decade_comparison年代际对比5 个年代段GET /api/growing_season生长季分析5°C/10°C/0°C 日数GET /api/pressure_precip_correlation气压-降水相关5 级气压对应降水概率GET /api/wind_speed_estimation气压振幅-云量月度趋势分析工具6 个端点说明GET /api/date_query?startend按日期范围查询完整气象数据GET /api/export_csv?startend导出 CSV 文件下载GET /api/correlation_data9×9 Pearson 相关系数矩阵 4 组散点采样GET /api/year_compare?year1year2两年月度多维度对比GET /api/weather_calendar?year某年逐日气象数据日历热力图用GET /api/extreme_records历史极端记录 TOP10高温/低温/降水/干旱/日照五、前端架构5.1 页面体系登录页独立模板 ──→ 首页数据概览 │ ┌─────────────────┼─────────────────┐ ▼ ▼ ▼ 5 个分析页面 5 个工具页面 管理功能 ├─ 温度分析 ├─ 日期查询 ├─ 数据管理管理员 ├─ 降水分析 ├─ 相关性矩阵 ├─ 用户管理管理员 ├─ 日照与辐射 ├─ 年份对比 └─ 个人中心 ├─ 综合气象 ├─ 天气日历 └─ 深度分析 └─ 极端记录5.2 基础布局base.html所有登录后的页面均继承自base.html包含顶部导航栏品牌标识、数据概览、数据分析下拉菜单、分析工具下拉菜单、数据管理管理员、用户下拉菜单Flash 消息系统自定义毛玻璃风格 Toast 浮窗支持 success/danger/warning/info 四种类型自动 3 秒后滑出消失页脚版权信息全局依赖Bootstrap 5.3 CSS/JS、Bootstrap Icons、Google Fonts、ECharts 5.4.35.3 登录/注册页独立模板不继承base.html采用毛玻璃设计风格背景机场实景图片 深色半透明遮罩登录卡片backdrop-filter: blur(8px)深色半透明背景白色微光边框输入框Bootstrapinput-group组件图标 输入框组合动画淡入效果5.4 图表通用工具charts.js// 颜色常量COLORS{primary,success,danger,warning,info,purple,pink,indigo,teal,orange,series[]}// 通用图表配置COMMON_OPTION{tooltip,grid,toolbox(保存图片/区域缩放/还原)}// 工具函数fetchJSON(url)— fetch 封装返回JSONinitChart(domId)— 初始化 ECharts 实例createGradient(stops)— 创建线性渐变setupResize()— 监听窗口 resize 自动调整图表大小5.5 全局样式style.css模块说明CSS 变量定义主色调、阴影、圆角、过渡等全局变量导航栏渐变背景、滚动时缩小、毛玻璃效果Hero 区域深蓝渐变背景 点阵纹理概览卡片4 列网格、毛玻璃背景、悬停上浮图表卡片白色背景、圆角、悬停阴影增强图表分析浅蓝渐变背景放置分析结论文字响应式992px/768px/576px 三档断点动画fadeInUp 交错入场动画自定义滚动条WebKit 浏览器圆角滚动条5.6 图表清单共 31 个温度分析页7 个图号图表名称图表类型数据源图1年度平均温度趋势多折线图/api/yearly_temperature图2月度温度分布柱状图折线/api/monthly_temperature图3温度日较差分析多折线图/api/temperature_range图4季节温度变化趋势多折线图/api/seasonal_temperature图5温度热力图热力图年×月/api/monthly_temperature_heatmap图6温度频率分布直方图/api/temperature_distribution图7温度距平分析柱状图正负色/api/temperature_anomaly降水分析页6 个图号图表名称图表类型数据源图8年度降水量与降水日数柱状图折线/api/yearly_precipitation图9月度降水量分布柱状图折线/api/monthly_precipitation图10日降水量强度分布环形饼图/api/precipitation_distribution图11降水距平分析柱状图正负色/api/precipitation_anomaly图12连续干旱日数分析柱状图折线/api/dry_spell_analysis图13月度降水量热力图热力图年×月/api/monthly_precipitation_heatmap综合气象页7 个图表名称图表类型数据源年度气压变化趋势多折线图/api/yearly_pressure月度气压分布柱状图折线/api/monthly_pressure年度湿度变化多折线图/api/humidity_analysis月度湿度分布柱状图/api/monthly_humidity云量与晴天/阴天日数柱状图折线/api/cloud_cover_analysis月度云量分析柱状图折线/api/monthly_cloud降雪分析柱状图折线/api/snow_analysis深度分析页6 个图表名称图表类型数据源温度-降水量散点图散点图/api/temp_precip_scatter湿度-温度相关性散点图折线/api/humidity_temp_correlation极端天气日数统计堆叠面积图/api/extreme_weather年代际气候对比分组柱状图/api/decade_comparison生长季长度变化面积图/api/growing_season气压与降水概率柱状图折线/api/pressure_precip_correlation首页预览3 个图表名称图表类型数据源年度平均温度趋势多折线图/api/yearly_temperature年度降水量趋势柱状图折线/api/yearly_precipitation月度平均温度雷达图雷达图/api/monthly_temperature工具页面图表8 个页面图表名称图表类型日期查询温度变化曲线折线图日期查询降水量柱状图柱状图相关性矩阵相关系数热力图热力图相关性矩阵4 组散点图散点图年份对比温度/降水/日照/气压/湿度对比双折线图5 组天气日历日历热力图ECharts calendar天气日历逐日变化曲线折线图/柱状图天气日历月度汇总柱状图六、功能模块详解6.1 数据概览首页概览指标卡片8 个总记录数、覆盖年份、年均温度、年均降水量、日均日照、极端高温、极端低温、平均湿度快捷导航6 个入口卡片温度分析、降水分析、日照与辐射、综合气象、深度分析、数据管理管理员可见分析工具入口5 个卡片日期查询、相关性分析、年份对比、天气日历、极端记录快速预览图表3 个温度趋势、降水趋势、温度雷达图6.2 五大分析模块每个分析页面包含Hero 区域标题 描述图表卡片图表 分析结论文字交错入场动画6.3 分析工具6.3.1 日期查询日期范围选择器 7 个快捷年份按钮查询后展示统计摘要6 个指标卡片 温度曲线 降水柱状图 数据表格支持导出 CSV 文件含 BOM 头兼容 Excel 中文6.3.2 相关性矩阵9 个气象要素最高温/最低温/平均温/日照/降水/辐射/气压/湿度/云量的 Pearson 相关系数9×9 热力图颜色映射 [-1, 1]4 组典型散点图温度-湿度、温度-降水、气压-降水、日照-温度各 2000 采样点6.3.3 年份对比下拉选择任意两个年份年度概况卡片对比8 项指标 × 2 年5 组月度对比折线图温度、降水、日照、气压、湿度6.3.4 天气日历ECharts 日历热力图类似 GitHub 贡献图支持切换指标温度/降水/日照/云量和年份8 个选项配套逐日变化曲线 月度汇总柱状图6.3.5 极端记录3 个极值概览卡片历史最高温、最低温、单日最大降水6 个 TOP10 排行榜高温、低温、单日降水、最长连续干旱、最湿年份、最晴朗年份6.4 数据管理管理员分页表格展示每页 20 条支持按年份/月份/季节筛选新增数据日期自动解析年月日和季节编辑数据修改温度、降水、日照等 10 个气象指标删除数据单条删除6.5 用户管理管理员统计卡片总用户数、管理员数、普通用户数用户列表显示用户名、昵称、邮箱、角色、注册时间、最后登录操作切换角色admin/user、重置密码重置为123456、删除用户安全限制不能删除自己、不能修改自己的角色6.6 个人中心查看个人信息用户名、昵称、邮箱、角色、注册时间修改昵称和邮箱修改密码需验证原密码七、部署与运行7.1 环境要求Python 3.8pip (Python 包管理器)7.2 依赖安装pipinstallflask numpysqlite3、csv、io、os、random、functools、datetime为 Python 标准库无需额外安装。werkzeug随 Flask 一起安装。7.3 数据库初始化首次运行时系统检测到weather.db不存在会自动调用init_db.py初始化数据库。也可手动执行python init_db.py该脚本会创建users表并插入默认管理员 (admin/admin123)创建weather表及索引从 CSV 文件导入 16,436 条气象记录7.4 启动应用python app.py默认监听0.0.0.0:5000浏览器访问http://localhost:50007.5 默认账号角色用户名密码管理员adminadmin123八、安全设计8.1 认证与会话基于 Flasksession的服务端会话管理密码使用 Werkzeug 的generate_password_hash(pbkdf2:sha256) 加密存储支持记住我功能控制 session 是否持久化8.2 权限控制路由级权限login_required和admin_required装饰器模板级权限Jinja2 条件渲染隐藏无权菜单API 端点暂无权限限制仅需登录即可访问数据 API8.3 输入校验注册用户名长度 3-20 字符、密码不少于 6 位、两次密码一致、用户名唯一性检查数据管理日期格式校验、数值类型安全转换parse_float函数8.4 SQL 注入防护所有 SQL 查询使用参数化占位符?避免字符串拼接data_manage的筛选条件通过白名单字段构建九、设计规范9.1 配色方案用途色值说明主色#2563eb蓝色用于按钮、链接、图表主色成功#10b981绿色用于成功提示危险#ef4444红色用于错误、高温警告#f59e0b橙色用于警告、日照信息#06b6d4青色用于低温、信息背景#f1f5f9浅灰页面底色深色#1e293b导航栏、页脚9.2 圆角规范卡片/容器12px按钮8pxToast14px概览卡片16px9.3 响应式断点断点宽度调整大屏 992px默认布局中屏≤ 992px图表高度 350px概览卡片上边距小屏≤ 768px图表高度 300px概览卡片 2 列超小屏≤ 576px概览卡片 1 列图表头部纵向排列十、文件清单文件行数职责app.py1123Flask 主应用路由 API 业务逻辑init_db.py130数据库初始化CSV 导入style.css450全局样式charts.js54ECharts 通用工具函数base.html178基础布局模板index.html287首页login.html~150登录页独立模板register.html~170注册页独立模板profile.html~120个人中心data_manage.html~180数据管理admin_users.html~100用户管理analysis_temperature.html~200温度分析analysis_precipitation.html~110降水分析analysis_sunshine.html~150日照分析analysis_comprehensive.html~180综合气象analysis_advanced.html~170深度分析tools_date_query.html~130日期查询tools_correlation.html~100相关性矩阵tools_year_compare.html~120年份对比tools_weather_calendar.html~110天气日历tools_extreme_records.html~100极端记录
)
