jinja2 是一个流行的 python 模板引擎，它允许开发者将数据和 html 结构分离，从而更轻松地构建动态网页。在 web 开发中，经常需要从数据库中读取数据，并将其展示在网页上。使用 jinja2 模板可以有效地完成这项任务，避免手动拼接 html 字符串带来的复杂性和潜在的安全风险。
使用 Jinja2 模板生成动态 HTML
假设我们有一个从数据库中获取产品数量的函数，我们需要根据这个数量生成相应数量的按钮。以下是如何使用 Jinja2 模板实现这个目标的步骤：
- 后端代码 (Python)
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def test(request: Request):
buttons_count = 3 # 假设从数据库获取到的产品数量为 3
return templates.TemplateResponse("home.html", {"request": request, "buttons": buttons_count})这段代码定义了一个 FastAPI 路由，它将 buttons_count (产品数量)传递给名为 home.html 的 Jinja2 模板。
- 前端模板 (home.html)
<form method="post" action="all/1">
{% for i in range(1, buttons_count+1) %}
<button>
<div>
<p id="{{ i }}_name">name: {{ i }}</p>
<p id="{{ i }}_description">description: {{ i }}</p>
</div>
</button>
{% endfor %}
</form>在这个模板中，{% for i in range(1, buttons_count+1) %} 循环会根据 buttons_count 的值生成相应数量的 <button> 元素。{{ i }} 用于在 id 属性中插入循环变量的值，从而创建唯一的 ID。
处理 HTML 转义
默认情况下，Jinja2 会自动转义 HTML 特殊字符，以防止跨站脚本攻击 (XSS)。这意味着如果你的数据包含 HTML 标签，它们会被转义成 HTML 实体，从而显示为纯文本。
如果你需要禁用自动转义，可以使用 safe 过滤器：
<div id="all">
{{ buttons | safe }}
</div>或者，你可以在创建 Jinja2Templates 实例时设置 autoescape=False：
templates = Jinja2Templates(directory="templates", autoescape=False)
注意事项
- 禁用自动转义可能会引入安全风险，因此请确保你的数据来源可信，或者手动转义任何不受信任的数据。
- 使用 Jinja2 模板时，应避免在模板中编写复杂的逻辑。尽量将逻辑放在后端代码中，并将数据传递给模板进行渲染。
- 保持模板的简洁和可读性，使用清晰的变量名和注释。
总结
Jinja2 模板引擎是一个强大的工具，可以帮助你轻松地生成动态 HTML 代码。通过合理地使用 Jinja2 的循环、变量和过滤器，你可以避免手动拼接 HTML 字符串，提高代码的可维护性和安全性。记住，始终关注安全问题，并根据你的需求选择合适的转义策略。
