在使用Flask开发Web应用时，如何让页面动态展示数据？这时候就需要用到Flask的模板系统。Flask默认使用Jinja2模板引擎来处理动态内容，它能让你在HTML中嵌入变量和控制逻辑，让页面“活”起来。今天我们就来入门Flask模板中的Jinja2变量和控制结构，从基础开始学起。
一、Jinja2变量：给页面“注入”动态数据¶
Jinja2变量是模板中最基础的动态内容来源，它可以把后端传来的数据渲染到页面上。
1. 如何定义和使用变量？¶
要在模板中使用变量，首先需要在Flask的视图函数中通过render_template函数将数据传递给模板，然后在模板中用{{ 变量名 }}来渲染。
举个例子：
假设我们有一个视图函数，想向模板传递用户信息（名字、年龄、爱好列表），步骤如下：
- 视图函数（后端）：
在app.py中定义视图函数，使用render_template渲染模板，并传入变量：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 定义要传递给模板的变量
user_name = "小明"
user_age = 18
hobbies = ["篮球", "编程", "阅读"]
return render_template('index.html',
name=user_name,
age=user_age,
hobbies=hobbies) # 把变量传到模板
if __name__ == '__main__':
app.run(debug=True)
- 模板文件（前端）：
在templates文件夹下创建index.html，用{{ 变量名 }}渲染数据：
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<body>
<h1>欢迎！{{ name }}的个人页面</h1> <!-- 渲染字符串变量 -->
<p>你的年龄是：{{ age }}岁</p> <!-- 渲染数字变量 -->
<h2>你的爱好：</h2>
<ul>
<!-- 这里先记住for循环，后面会讲 -->
{% for hobby in hobbies %}
<li>{{ hobby }}</li>
{% endfor %}
</ul>
</body>
</html>
效果：页面会显示“欢迎！小明的个人页面”“你的年龄是：18岁”，以及爱好列表。
2. 变量的类型和常见操作¶
Jinja2支持多种数据类型的变量，比如字符串、数字、列表、字典等，操作方式也很直观：
- 字符串：直接渲染，支持
|过滤器（后面会讲）。 - 数字：可以直接参与简单运算（如加减乘除）。
- 列表：用
for循环遍历（见下节）。 - 字典：通过
键名或dict.key访问值，也可以用dict.items()遍历。
字典示例：
如果在视图函数中传入字典user_info = {"city": "北京", "hobby": "跑步"}，模板中可以这样用：
<p>居住城市：{{ user_info.city }}</p> <!-- 直接用键名访问 -->
<p>爱好：{{ user_info.hobby }}</p>
<!-- 或者用items()遍历所有键值对 -->
{% for key, value in user_info.items() %}
<p>{{ key }}：{{ value }}</p>
{% endfor %}
二、控制结构：让页面“逻辑化”¶
有了变量，还需要控制结构（如条件判断、循环）来决定数据如何展示，让页面更灵活。
1. 条件判断：if-else¶
当需要根据条件显示不同内容时，用{% if ... %}、{% else %}和{% endif %}。
示例：判断用户是否成年，显示不同提示：
{% if age >= 18 %}
<p>你已成年，可访问更多内容！</p>
{% else %}
<p>你还是未成年人，请注意安全上网哦~</p>
{% endif %}
补充：Jinja2中还支持elif和else if（语法兼容），比如：
{% if age < 10 %}
<p>幼儿</p>
{% elif age < 18 %}
<p>青少年</p>
{% else %}
<p>成年人</p>
{% endif %}
2. 循环遍历：for循环¶
当需要重复展示列表或字典中的多个元素时，用{% for ... in ... %}循环。
示例1：遍历列表（前面的爱好列表）：
<ul>
{% for hobby in hobbies %}
<li>{{ hobby }}</li>
{% endfor %}
</ul>
这里hobbies是列表，hobby是循环变量，每次迭代会取列表中的一个元素。
示例2：循环中的特殊变量loop
Jinja2提供loop变量，包含循环的状态信息，比如：
- loop.first：是否是循环的第一个元素（布尔值）
- loop.last：是否是循环的最后一个元素（布尔值）
- loop.index：当前迭代的序号（从1开始）
用loop优化爱好列表显示：
<ul>
{% for hobby in hobbies %}
{% if loop.first %}
<li><strong>第一个爱好：</strong>{{ hobby }}</li>
{% elif loop.last %}
<li><strong>最后一个爱好：</strong>{{ hobby }}</li>
{% else %}
<li>{{ loop.index }}. {{ hobby }}</li>
{% endif %}
{% else %}
<!-- 如果列表为空，显示提示 -->
<li>暂无爱好数据</li>
{% endfor %}
</ul>
如果hobbies是空列表，else块会生效，显示“暂无爱好数据”。
三、简单过滤器：给变量“加工”¶
Jinja2过滤器可以对变量进行简单处理（如大小写转换、数值格式化等），语法是变量|过滤器名。
常见过滤器示例：¶
- 字符串处理：
upper：转为大写
{{ name|upper }}→ 输出“XIAOMING”（假设name是“小明”）lower：转为小写
{{ "Hello"|lower }}→ 输出“hello”-
capitalize：首字母大写
{{ "hello"|capitalize }}→ 输出“Hello” -
数值处理：
int：转为整数
{{ 18.5|int }}→ 输出“18”-
round：四舍五入
{{ 3.1415|round }}→ 输出“3”（默认保留0位小数） -
安全处理：如果变量包含HTML代码，
|safe过滤器会让浏览器渲染HTML（注意安全，仅信任的数据使用）
{{ "<p>这是一段HTML</p>"|safe }}→ 渲染为<p>这是一段HTML</p>
四、总结¶
通过Jinja2变量和控制结构，我们能让页面动态展示数据并根据逻辑变化。核心要点：
- 变量：用{{ 变量名 }}渲染后端传来的数据，支持字符串、数字、列表、字典等类型。
- 控制结构：{% if ... %}条件判断和{% for ... %}循环，配合loop变量可优化迭代逻辑。
- 过滤器：|语法对变量“加工”，如大小写转换、数值格式化等。
下一篇我们可以学习模板继承、宏等进阶内容，让你的页面结构更清晰！现在试着自己写一个简单的模板，把变量、条件和循环结合起来，看看页面是否能“动”起来吧~