基于Python+Flask+Vue+Vite的城市天气可视化统计分析系统_基于python的城市气候可视化分析-CSDN博客

本文链接：https://blog.csdn.net/m0_46653805/article/details/143457929

完整源码源文件+数据库文件+设计说明文档+远程操作+定制配套论文等

在这里插入图片描述

实现效果演示

基于Python+Flask+Vue+Vite的城市天气可视化统计分析系统

1软件功能说明

实现一个全面、详细收集城市天气情况的软件系统，并绘制出图片与表格，从而实现天气情况可视化，并且能够根据天气情况设计不同的交互场景，直观的体现出当前天气状态。

2环境搭建

2.1开发环境
开发工具 PyCharm、VSCode
技术运用 API集成、ECharts、Flask、HTML、Vue
运行环境 Windows
数据库 MYSQL
相关组件 phpEnv

2.2组件描述
本系统中相关的组件为phpEnv组件，使用该组件进行数据库操作。

2.3源代码、资源及数据清单
在这里插入图片描述
1.weather_py:程序总文件夹
2.flaskProject:存放flask项目
3.history:查询城市输入框，返回数据库中对应数据，展示
4.map:手动创建省份城市列表，创建空字典存放省份温度数据，将温度数据赋值给对应的省份，最后在地图上显示
5.Search:通过后端传入的城市名称，对所需数据在数据库中进行查找，将查找结果存储在列表中，最后再以表格的形式展现在系统中
6.spider：该文件夹包含多个爬虫程序，爬取的数据分别有：实时天气数据，历史天气数据，未来七天天气数据
7.static：存放可视化大屏所需css,js,images,picture等文件，还有登录注册界面所需背景图
8.templates：存放前端html文件
9.userUtils：读取数据库数据，统计当前时间晴天，阴天，雨天，雪天城市数量，温度最高、最低的十个城市，风速最大的十个城市，相对湿度最大胆十个城市
10…idea,.vscode,node_modules,public：Vue文件自带或下载插件时插件数据自动保存在里面
11.scr：其中的assets保存了实时天气查询交互系统所需背景图片，css文件，iconfont上加入的icon图表和和风天气自带天气图标，view中存储页面显示所需的.Vue文件
12.其余都是Vue-Vite自带项目

2.4源代码与数据导入
将项目weather_py导入pycharm中,将weather_vue项目导入VSCode中，安装npm配置相应环境配置，在weather_vue文件内部打开cmd控制器，输入npm run dev 打开Vue-Vite项目界面，在pycharm中运行app.py文件。

3 运行环境安装与配置

3.1 系统要求
内存需35.1MB

3.2安装包及数据清单
安装包：天气可视化统计分析系统.zip
数据库：weathe.sql
(1)导入数据库文件
(2)创建表

3.3 系统安装与配置
将项目weather_py导入pycharm中,将weather_vue项目导入VSCode中，安装npm配置相应环境配置，在weather_vue文件内部打开cmd控制器，输入npm run dev 打开Vue-Vite项目界面，在pycharm中运行app.py文件。

4 用户操作说明

4.1 系统组成
天气可视化统计分析系统主要由七大模块组成：
（1）登录注册模块：用户注册，用户登录
（2）实时天气查询模块：查询实时天气、生活指数，数据可视化，场景交互，查看24小时预报和未来七天预报
（3）历史天气查询模块：查询历史天气
（4）预警信息推送模块：查看预警信息
（5）用户管理模块：修改用户名、密码
（6）实时天气地图：直观查看全国温度、体感温度、湿度、能见度、风力等级情况
（7）可视化大屏：历史天气可视化

4.2 登陆注册模块
4.2.1 登录功能
已有账号的用户在登录界面进行登录，输入邮箱和密码后点击登录。
在这里插入图片描述
4.2.2 注册功能
新用户点击登录按钮下方的“注册新用户”进行注册，点击注册后自动返回登录界面，点击登录按钮后即可。

4.3 实时天气查询模块
4.3.1 首页-实时天气概况功能
登录后，用户可在首页查看实时天气概况，包括晴天、阴天、雨天、雪天的城市数量和温度最高、温度最低、风速最大、湿度最高的十个城市及数据。
在这里插入图片描述
4.3.2 实时天气查询功能
用户可以在输入框输入想要查询的城市，点击搜索即可查看该城市天气数据、24小时预报、未来七天预报、生活指数、空气质量等。

4.4 历史天气查询模块
4.4.1 历史天气查询功能
用户可在输入框输入自己想查询的城市，点击搜索可在下方查看过去20个月的天气数据。
在这里插入图片描述
也可以通过选择日期指定查看具体某一天的天气数据。

4.5 预警信息推送模块
4.5.1 预警信息推送功能
在实时天气界面的天气图标下会向用户展示预警信息，若无预警信息，则不显示。

4.6 用户管理模块
4.6.1 用户信息修改功能
在该界面用户可以管理个人信息，可以对用户名和密码进行修改。
在这里插入图片描述
4.7 实时天气地图模块
4.7.1 查看实时天气地图功能
用户可通过下拉选择框选择查看全国温度、体感温度、湿度、能见度、风力等级情况。

4.8 可视化大屏模块
4.8.1历史天气可视化功能
用户可在该界面查看历史数据，包括：5个一线城市平均最高气温、平均最低气温、天气类型、温度变化等。
在这里插入图片描述