本文旨在解决在使用 Jinja2 模板引擎时，如何正确地将从数据库获取的产品数据动态地渲染到 HTML 页面上的问题。重点介绍了如何利用 Jinja2 的循环和变量特性，避免直接拼接 HTML 字符串，以及如何处理 Jinja2 的自动转义机制，确保 HTML 代码能够被正确解析和渲染，从而实现动态生成产品列表的功能。
在使用 Jinja2 模板引擎构建 Web 应用时，经常需要从数据库中读取数据，并将这些数据动态地展示在网页上。一个常见的场景是展示一系列产品，每个产品都有名称、描述等信息，并需要生成相应的 HTML 元素，例如按钮。直接在 Python 代码中拼接 HTML 字符串通常不是一个好的做法，因为它会导致代码可读性差、维护困难，并且容易引入安全漏洞（例如 XSS 攻击）。Jinja2 提供了强大的模板功能，可以帮助我们优雅地解决这个问题。
利用 Jinja2 模板生成动态 HTML
Jinja2 允许我们在模板中使用循环和变量，从而动态地生成 HTML 代码。例如，假设我们需要根据数据库中产品的数量生成相应数量的按钮。我们可以将产品数量传递给模板，然后在模板中使用 for 循环来生成按钮。
Python (main.py):
from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def test(request: Request):
# 模拟从数据库获取的产品数量
product_count = 3
return templates.TemplateResponse("home.html", {"request": request, "product_count": product_count})HTML (templates/home.html):
<form method="post", action="all/1">
{% for i in range(1, product_count+1) %}
<button type="submit">
<div>
<p id="{{ i }}_name">name: {{ i }}</p>
<p id="{{ i }}_description">description: {{ i }}</p>
</div>
</button>
{% endfor %}
</form>在这个例子中，我们将 product_count 变量传递给 home.html 模板。在模板中，我们使用 {% for i in range(1, product_count+1) %} 循环来生成 product_count 个按钮。在每个按钮内部，我们使用 {{ i }} 变量来动态地设置 id 和显示文本。
处理 Jinja2 的自动转义
Jinja2 默认会转义 HTML 特殊字符，以防止 XSS 攻击。这意味着如果我们将包含 HTML 代码的字符串直接传递给模板，Jinja2 会将其转义为纯文本，导致 HTML 代码无法被正确解析。
例如，如果我们在 Python 代码中定义一个包含 HTML 代码的字符串：
buttons = """
<form method="post" action="/all/1">
<button type="submit" id="button">
<div>
<p id="1_name" >name</p>
<p id="1_description">description</p>
</div>
</button>
</form>
"""然后将其传递给模板：
@app.get("/")
async def test(request: Request):
return templates.TemplateResponse("home.html", {"request": request, "buttons": buttons})并在模板中使用 {{ buttons }} 来显示该字符串，那么 HTML 代码会被转义为纯文本，导致按钮无法正常显示。
为了解决这个问题，我们可以使用以下两种方法：
- 使用 safe 过滤器： safe 过滤器告诉 Jinja2 不要转义该字符串。
<div id="all">
{{ buttons | safe }}
</div>- 禁用自动转义： 可以在创建 Jinja2Templates 实例时，将 autoescape 参数设置为 False。
templates = Jinja2Templates(directory="templates", autoescape=False)
注意： 禁用自动转义会增加 XSS 攻击的风险，因此只有在确定传递给模板的字符串是安全的（例如，来自受信任的数据源）时，才应该这样做。
总结
通过使用 Jinja2 的循环和变量特性，我们可以轻松地将数据库中的数据动态地渲染到 HTML 页面上。同时，我们需要注意 Jinja2 的自动转义机制，并根据实际情况选择合适的处理方式。避免直接拼接 HTML 字符串，并充分利用 Jinja2 提供的模板功能，可以提高代码的可读性、可维护性，并减少安全风险。
记住，始终对用户输入进行适当的验证和转义，以防止 XSS 攻击。
