本文介绍如何利用 flask 内置的 jinja2 模板引擎，将 sql 查询结果直接、安全、高效地渲染为 html 表格，避免手动字符串替换、json 序列化/解析及客户端 javascript 操作带来的常见错误。
本文介绍如何利用 flask 内置的 jinja2 模板引擎，将 sql 查询结果直接、安全、高效地渲染为 html 表格，避免手动字符串替换、json 序列化/解析及客户端 javascript 操作带来的常见错误。
在 Flask 开发中，初学者常试图通过读取 HTML 文件、用 Python 字符串拼接 JSON 数据、再依赖前端 JavaScript 解析并插入 DOM 的方式动态生成表格——这种方式不仅脆弱（易出引号转义、JSON 格式错误、XSS 风险），还违背了 Flask 的设计哲学。真正的推荐方案是：由服务端完成数据到 HTML 的完整渲染，借助 Jinja2 模板语言直接遍历数据集生成 以下是一个结构清晰、生产就绪的实现流程： 1. 后端路由（app.py） ⚠️ 注意事项： 2. Jinja2 模板（templates/view_worker.html） ✅ 优势说明： 你的原始代码存在多个关键问题： 对于静态表格展示场景（无实时交互、无懒加载需求），始终优先使用 Jinja2 服务端渲染。它更简洁、更安全、更易调试，也更符合 Flask 的设计理念。JavaScript 应保留给真正需要客户端动态行为的场景（如搜索过滤、行内编辑、图表联动等）。掌握 render_template 与 {% for %} 是 Flask 入门最关键的一步。 现在，启动应用并访问 /view_worker，你将看到一个完整、响应式、带数据的 Bootstrap 表格——无需一行前端 JS，一切由 Flask 和 Jinja2 安静而可靠地完成。 行。 ✅ 正确做法：Jinja2 服务端渲染（推荐）
确保从数据库获取的数据为标准 Python 字典列表，并直接传入 render_template：from flask import Flask, render_template
import sqlite3 # 或你使用的数据库驱动，如 psycopg2、pymysql 等
app = Flask(__name__)
@app.route("/view_worker")
def view_worker():
# 示例：使用 SQLite；请按实际数据库适配连接与查询
conn = sqlite3.connect("workers.db")
cursor = conn.cursor()
cursor.execute("SELECT worker_id, worker_name, worker_type, regular_hours, hourly_rate, overtime_rate FROM workers")
rows = cursor.fetchall()
conn.close()
# 构建字典列表（键名需与模板中一致）
workers = [
{
"worker_id": row[0],
"worker_name": row[1],
"worker_type": row[2],
"regular_hours": row[3],
"hourly_rate": row[4],
"overtime_rate": row[5]
}
for row in rows
]
return render_template("view_worker.html", workers=workers)
将逻辑完全交由模板处理，简洁、可读、安全：
<meta charset="UTF-8"><title>Workers List</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><style>th { color: #fff; }</style><div class="container mt-4">
<h2>Worker Information</h2>
<table class="table table-striped">
<thead class="bg-info"><tr>
<th>Worker ID</th>
<th>Worker Name</th>
<th>Worker Type</th>
<th>Regular Hours</th>
<th>Hourly Rate ($)</th>
<th>Overtime Rate ($)</th>
</tr></thead>
<tbody>
{% if workers %}
{% for w in workers %}
<tr>
<td>{{ w.worker_id }}</td>
<td>{{ w.worker_name }}</td>
<td>{{ w.worker_type }}</td>
<td>{{ w.regular_hours }}</td>
<td>{{ "%.2f"|format(w.hourly_rate) }}</td>
<td>{{ "%.2f"|format(w.overtime_rate) }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="6" class="text-center text-muted">No workers found.</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
❌ 为什么原方案失败？
✅ 总结
