Day 52：【99天精通Python】Web 开发入门 (Flask) - 5行代码写个网站
前言
欢迎来到第52天！
在之前的 51 天里，我们写的代码都是在终端里跑的，或者生成一个本地的文件。如果你想让全世界的人都能用到你的程序，最好的办法是什么？
——做一个网站。
Python 是 Web 开发领域的巨头之一，拥有 Django 和 Flask 两大框架。
- Django：全家桶，功能大而全，适合大型企业级项目。
- Flask：微框架 (Microframework)，轻量、灵活，适合中小型项目、API 接口和快速原型开发。
对于初学者，Flask 绝对是入门首选。今天，我们就用几行代码，搭建你的第一个 Web 服务器。
本节内容：
- 安装 Flask
- Hello World：最小的 Flask 应用
- 路由 (Route) 与视图函数
- 动态路由 (
<name>) - 渲染 HTML 模板 (
render_template) - 实战练习：个人名片网页
一、环境准备
pipinstallflask二、Hello Flask：最小的应用
新建app.py，输入以下代码：
fromflaskimportFlask# 1. 创建应用实例# __name__ 是当前模块的名字，Flask 用它来寻找资源app=Flask(__name__)# 2. 定义路由 (Route)# 告诉 Flask，当用户访问 "/" (根路径) 时，执行下面这个函数@app.route("/")defhello_world():return"<h1>Hello, Flask!</h1>"# 3. 启动服务器if__name__=="__main__":# debug=True: 代码修改后自动重启，且报错时网页显示调试信息app.run(debug=True)运行：在终端执行python app.py。
你会看到输出：Running on http://127.0.0.1:5000。
打开浏览器访问这个地址，你就会看到大大的 “Hello, Flask!”。
三、路由与视图函数
路由（URL）就是用户在浏览器地址栏输入的东西。
3.1 多个路由
@app.route("/about")defabout():return"这是关于页面"@app.route("/contact")defcontact():return"请联系我们：mail@example.com"3.2 动态路由 (Path Variable)
比如我们要显示不同用户的主页，不可能给每个人都写一个@app.route("/user/Tom")。
我们可以使用<variable_name>来捕获 URL 中的参数。
# <name> 会作为参数传给 user_profile 函数@app.route("/user/<name>")defuser_profile(name):returnf"欢迎来到{name}的主页！"# 指定类型 (如 int)@app.route("/post/<int:post_id>")defshow_post(post_id):returnf"正在阅读第{post_id}篇文章"四、渲染模板：让网页漂亮起来
在视图函数里直接返回 HTML 字符串（如return "<h1>...</h1>"）太痛苦了。
Flask 使用Jinja2模板引擎，允许我们将 HTML 代码写在单独的文件里，然后用数据去渲染它。
4.1 目录结构
Flask 对目录结构有要求，HTML 文件必须放在templates文件夹下。
my_flask_app/ ├── app.py └── templates/ └── index.html4.2 编写模板 (templates/index.html)
Jinja2 允许在 HTML 中使用{{ 变量名 }}来占位。
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>我的网站</title></head><body><h1>你好，{{ user }}！</h1><p>今天是：{{ date }}</p><h3>我的技能列表：</h3><ul><!-- 循环 -->{% for skill in skills %}<li>{{ skill }}</li>{% endfor %}</ul><!-- 条件判断 -->{% if is_admin %}<pstyle="color:red">管理员已登录</p>{% endif %}</body></html>4.3 渲染模板 (app.py)
fromflaskimportFlask,render_templatefromdatetimeimportdatetime app=Flask(__name__)@app.route("/")defindex():# 准备数据username="Python小白"today=datetime.now().strftime("%Y-%m-%d")my_skills=["Python","Pandas","Flask","爬虫"]# render_template 自动去 templates 文件夹找 index.html# 并将后面的参数传进去returnrender_template("index.html",user=username,date=today,skills=my_skills,is_admin=True)if__name__=="__main__":app.run(debug=True)五、实战练习：个人名片网页
我们要开发一个简单的个人主页，展示头像、简介和联系方式。
1. 准备静态文件
CSS、JS、图片等文件必须放在static文件夹下。
project/ ├── app.py ├── static/ │ ├── style.css │ └── avatar.jpg └── templates/ └── card.html2. 编写 CSS (static/style.css)
body{font-family:Arial;text-align:center;background-color:#f4f4f4;}.card{background:white;width:300px;margin:50px auto;padding:20px;border-radius:10px;box-shadow:0 4px 8pxrgba(0,0,0,0.1);}img{width:100px;border-radius:50%;}h2{color:#333;}p{color:#666;}3. 编写 HTML (templates/card.html)
<!DOCTYPEhtml><html><head><!-- 引入静态文件的标准写法: url_for('static', filename='...') --><linkrel="stylesheet"href="{{ url_for('static', filename='style.css') }}"></head><body><divclass="card"><imgsrc="{{ url_for('static', filename='avatar.jpg') }}"alt="Avatar"><h2>{{ name }}</h2><p>{{ job }}</p><p>{{ bio }}</p><hr><p>Email: {{ email }}</p></div></body></html>4. 编写 Flask (app.py)
fromflaskimportFlask,render_template app=Flask(__name__)@app.route("/")defcard():info={"name":"张三","job":"Python 工程师","bio":"热爱编程，专注于 Web 开发与数据分析。","email":"zhangsan@example.com"}# **info 把字典解包传参 (name="张三", job=...)returnrender_template("card.html",**info)if__name__=="__main__":app.run(debug=True)六、常见问题
Q1：为什么修改了 HTML，网页没变化？
可能是浏览器缓存。
- 按
Ctrl + F5强制刷新。 - 或者在 DevTools (F12) 的 Network 标签页勾选
Disable cache。
Q2：只能在本机访问，手机怎么看？
默认127.0.0.1只有本机能访问。
修改启动参数：app.run(host='0.0.0.0', debug=True)。
然后手机连接同一个 WiFi，访问电脑的局域网 IP（如192.168.1.x:5000）。
Q3：Jinja2 模板里的{% %}和{{ }}有什么区别？
{{ var }}：变量，用于输出值。{% if/for %}：控制结构，用于逻辑判断和循环。
七、小结
关键要点：
- Flask极简，5 行代码就能跑起来。
- 路由决定了 URL 怎么映射到 Python 函数。
- 模板实现了逻辑（Python）和界面（HTML）的分离。
- 静态资源（图片/CSS）放
static，HTML 放templates。
八、课后作业
- 加法计算器：编写两个路由。
/显示一个表单（两个输入框和一个提交按钮），提交到/result路由，在/result页面显示两数之和。（提示：需要用到 HTML<form>和下一节课的request对象，可以先尝试 GET 请求?a=1&b=2的方式）。 - 随机抽奖页：访问
/lottery时，随机从 [“一等奖”, “二等奖”, “谢谢惠顾”] 中抽取一个，并用不同的颜色显示在网页上。 - 多页面导航：创建一个包含"首页"、“博客”、"关于"三个页面的网站，并在页面顶部添加导航栏链接，实现互相跳转。
下节预告
Day 53：Flask 进阶 - 表单处理与 Request- 网页不光是用来看的，还能用来提交数据（如登录、注册）。明天我们学习如何处理用户的 POST 请求。
系列导航：
- 上一篇：Day 51 - 数据可视化Seaborn进阶
- 下一篇：Day 53 - Flask进阶表单处理（待更新）
