学习Flask：Day 2：模板与表单开发
学习目标：前后端混合开发
# 添加模板渲染
from flask import render_template
@app.route('/profile')
def profile():
return render_template('profile.html',
username="开发者",
skills=['Vue', 'JavaScript'])✅ 实践任务：
-
创建
templates目录 -
使用Jinja2语法制作包含循环和条件判断的模板
-
实现一个注册表单（GET/POST处理）
-
使用Bootstrap美化页面
要在 Flask 应用中创建 templates 目录以支持 HTML 模板，你可以按照以下步骤进行：
- 创建 templates 目录：在你的项目根目录下创建一个名为 templates 的文件夹。
- 创建 HTML 文件：在 templates 目录中创建 HTML 文件，例如 home.html 和 profile.html。
- 更新 Flask 路由：修改 Flask 路由以渲染这些模板。
以下是一个示例，展示了如何实现这些步骤：
1. 创建 templates 目录和 HTML 文件
在项目根目录下创建 templates 文件夹，并在其中创建以下两个文件：
- home.html
- profile.html
home.html 内容：
首页
欢迎来到首页！
profile.html 内容：
用户资料
这是用户资料页面。
2. 更新 Flask 路由
接下来，更新 app.py 文件以渲染这些模板：
# app.py
from flask import Flask, jsonify, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/profile')
def profile():
return render_template('profile.html')
@app.route('/api')
def api():
return jsonify({"message": "这是API端点。"})
if __name__ == '__main__':
app.run(debug=True)说明：
- 使用 render_template 函数来渲染 HTML 模板。
- 当访问首页时，Flask 将返回 home.html 的内容；访问用户资料页面时，将返回 profile.html 的内容。
运行应用：
确保你的项目结构如下：
/your_project_directory
├── app.py
└── templates
├── home.html
└── profile.html然后在终端中运行 python app.py，并在浏览器中访问相应的路由来查看效果。
使用 Jinja2 语法，你可以在模板中实现循环和条件判断。以下是如何在 Flask 应用中使用 Jinja2 创建包含循环和条件判断的模板的示例。
1. 更新 home.html 模板
我们将更新 home.html 模板，以展示一个包含循环和条件判断的示例。假设我们有一个用户列表，并根据用户的状态显示不同的信息。
更新后的 home.html 内容：
首页
欢迎来到首页！
用户列表
{% for user in users %}
-
{{ user.name }} -
{% if user.active %}
活跃
{% else %}
不活跃
{% endif %}
{% endfor %}
2. 更新 app.py 文件
接下来，我们需要在 app.py 中传递一个用户列表到模板中：
# app.py
from flask import Flask, jsonify, render_template
app = Flask(__name__)
@app.route('/')
def home():
users = [
{"name": "张三", "active": True},
{"name": "李四", "active": False},
{"name": "王五", "active": True}
]
return render_template('home.html', users=users)
@app.route('/profile')
def profile():
return render_template('profile.html')
@app.route('/api')
def api():
return jsonify({"message": "这是API端点。"})
if __name__ == '__main__':
app.run(debug=True)说明：
- 在 home.html 中，使用 {% for user in users %} 语法来循环遍历用户列表。
- 使用 {% if user.active %} 语法来判断用户是否活跃，并根据条件显示不同的文本。
- 在 app.py 中，我们创建了一个用户列表，并将其传递给模板。
运行应用：
确保你的项目结构仍然正确，然后在终端中运行 python app.py。访问首页时，你将看到用户列表及其状态的显示。
要实现一个注册表单并处理 GET 和 POST 请求，你可以按照以下步骤进行：
1. 创建注册表单模板
首先，在 templates 目录中创建一个新的 HTML 文件，例如 register.html，用于显示注册表单。
register.html 内容：
注册
注册表单
2. 更新 app.py 文件
接下来，更新 app.py 文件以处理注册表单的 GET 和 POST 请求。
# app.py
from flask import Flask, jsonify, render_template, request, redirect, url_for
app = Flask(__name__)
@app.route('/')
def home():
users = [
{"name": "张三", "active": True},
{"name": "李四", "active": False},
{"name": "王五", "active": True}
]
return render_template('home.html', users=users)
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
# 在这里可以添加用户注册逻辑，例如保存到数据库
print(f"注册用户: {username}, 密码: {password}") # 仅用于示例
return redirect(url_for('home')) # 注册后重定向到首页
return render_template('register.html')
@app.route('/profile')
def profile():
return render_template('profile.html')
@app.route('/api')
def api():
return jsonify({"message": "这是API端点。"})
if __name__ == '__main__':
app.run(debug=True)说明：
- 在 register.html 中，创建了一个简单的注册表单，包含用户名和密码字段，使用 POST 方法提交。
- 在 app.py 中，添加了 /register 路由，处理 GET 和 POST 请求：
- 当请求方法为 POST 时，获取表单数据并打印（在实际应用中，你可以将其保存到数据库）。
- 注册成功后，使用 redirect 和 url_for 重定向到首页。
- 当请求方法为 GET 时，渲染注册表单。
运行应用：
确保你的项目结构正确，然后在终端中运行 python app.py。访问 http://127.0.0.1:5000/register 来查看注册表单，填写信息并提交后将重定向到首页。
要使用 Bootstrap 美化你的 Flask 应用页面，你可以按照以下步骤进行：
1. 引入 Bootstrap
在你的 HTML 模板中引入 Bootstrap 的 CSS 和 JS 文件。你可以使用 Bootstrap 的 CDN（内容分发网络）来快速引入。
2. 更新模板
我们将更新 home.html 和 register.html 模板，以使用 Bootstrap 的样式和组件。
更新后的 home.html 内容：
首页
欢迎来到首页！
用户列表
{% for user in users %}
-
{{ user.name }} -
{% if user.active %}
活跃
{% else %}
不活跃
{% endif %}
{% endfor %}
更新后的 register.html 内容：
注册
注册表单
说明：
- 在每个模板的 部分引入了 Bootstrap 的 CSS 文件。
- 使用 Bootstrap 的类来美化页面：
- 在 home.html 中，使用 container 类来设置页面的边距，使用 list-group 和 list-group-item 类来美化用户列表。
- 在 register.html 中，使用 form-group 和 form-control 类来美化表单输入框，使用 btn 和 btn-primary 类来美化按钮。
运行应用：
确保你的项目结构正确，然后在终端中运行 python app.py。访问首页和注册页面，你将看到使用 Bootstrap 美化后的页面。