自学编程第56课:用Python的Flask搭建本地网页——把天气数据搬到浏览器里看
- 2026-07-02 16:30:30
点击蓝字 关注我们
上一课写完定时任务后，天气采集和画图全都自动跑起来了。Tyree每天只能手动打开CSV表格看原始数据，隔天再点开生成的图片看变化趋势。
用了几天他觉得很折腾，每次想看数据都要翻本地文件，来回切换特别麻烦，一心想直接打开浏览器就能查看，跟浏览普通网页一样省事。
其实想要实现这个需求很简单，用Flask在电脑本地搭建网页服务就行。输一串本地地址就能打开专属页面，观感和正经网站没差别，只是只能自己电脑访问。
这节课我们就一起实操，学习用Flask搭建本地网页，在浏览器里展示全自动采集的全部天气数据。
1
什么是Flask？它和之前学的有什么不同？
之前我们写的程序都是在命令行（shell）里运行的，输入输出都是文字。Flask能让你的程序变成一个网页服务器——你在浏览器里打开一个网址，就能看到程序生成的网页内容。
类比：你之前写的Python程序就像“后台工作人员”，而Flask让它变成了“前台服务员”——用户（浏览器）来访问，它就给用户返回一个页面。
Flask的特点：
- 轻量级，几行代码就能跑起来
- 不需要复杂的配置
- 非常适合做小工具、数据看板
2
安装Flask
首先在命令行执行：
pip install flask
如果下载慢，可以用国内镜像：
pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple
3
做第一个Flask程序：“你好，世界”网页
下面我们先写一个最简单的Flask程序，感受一下“浏览器访问→服务器返回页面”的流程。
代码解释：
`from flask import Flask`：导入Flask核心类。
`app = Flask(__name__)`：创建Flask应用实例。
`@app.route("/")`：告诉Flask，当用户访问根路径 `/` 时，执行下面的函数。
`return "<h1>你好，世界！</h1>"`：函数返回的字符串就是网页内容。
`app.run(debug=True, port=5000)`：启动服务器，端口5000。
运行后，打开浏览器输入
`http://127.0.0.1:5000`，就能看到“你好，世界！”的网页。
4
把天气数据做成网页
现在我们把第54课的天气采集脚本改造成定时任务——每天早上8点自动记录天气。
代码解释：
`read_weather_data()`：从CSV文件读取天气数据。
`weather_page()`：处理根路径 `/` 的请求，生成HTML表格。
HTML里用了 `<table>` 标签，加了一些简单的CSS让表格更好看。
表格里每一行对应一天的数据。
运行后，打开浏览器访问
http://127.0.0.1:5001
http://192.168.31.218:5001
就能看到天气数据表格，看上图。
5
如果浏览器打不开怎么办？
如果运行后浏览器无法访问，把下图箭头的代码互换，我上面这个就是换了才显示
有时候#host=0.0.0.0 本机+局域网都能访问，但打不开网页，端口改用5001避开冲突，如下所示：
app.run(debug=False, port=5001, host="0.0.0.0")
6
让网页自动刷新
如果想配合定时任务自动更新，在 `<head>` 标签中添加：
浏览器每60秒自动刷新一次。
```html
<meta http-equiv="refresh" content="60">
7
课后小挑战
挑战1：在页面顶部添加一行，显示最新一天的天气、温度、湿度。
挑战2：在页面中添加一个链接，点击后打开第54课生成的 `weather.png` 图片。
8
今天学到了什么
`Flask`：让Python程序变成网页服务器。
`@app.route("/")`：定义路径对应的函数。
`app.run(debug=True, port=5000)`：启动服务器。
拼接HTML字符串返回给浏览器。
浏览器输入 `http://127.0.0.1:5000` 访问本地网页。
好了，今天课程就到这！
下一课：综合项目：每日推送助手——把爬虫、存储、画图、定时任务全部串起来，再增加自动发邮件功能，做一个完整的小工具。
————热门推荐————
自学编程第51课：爬虫入门让Python帮你从网页“拿”数据
自学编程第一步：安装Python和Thonny 零基础图文教程
本系列教程持续更新，欢迎关注收藏
点赞
收藏
分享
