完整项目前后端工程源文件(可远程操作跑通)+配套设计说明等详见主页个人简介获取

在这里插入图片描述
在这里插入图片描述


实现效果演示

基于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个一线城市平均最高气温、平均最低气温、天气类型、温度变化等。
在这里插入图片描述


完整项目前后端工程源文件(可远程操作跑通)+配套设计说明等详见主页个人简介获取

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐