Flask 中使用 Jinja2 模板动态渲染数据库表格数据的完整教程

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

本文介绍如何利用 flask 内置的 jinja2 模板引擎，将 sql 查询结果直接、安全、高效地渲染为 html 表格，避免手动字符串替换、json 序列化/解析及客户端 javascript 操作带来的常见错误。

在 Flask 开发中，初学者常试图通过读取 HTML 文件、用 Python 字符串拼接 JSON 数据、再依赖前端 JavaScript 解析并插入 DOM 的方式动态生成表格——这种方式不仅脆弱（易出引号转义、JSON 格式错误、XSS 风险），还违背了 Flask 的设计哲学。真正的推荐方案是：由服务端完成数据到 HTML 的完整渲染，借助 Jinja2 模板语言直接遍历数据集生成行。

以下是一个结构清晰、生产就绪的实现流程：

1. 后端路由（app.py）
确保从数据库获取的数据为标准 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)

⚠️ 注意事项：

不要手动读取 .html 文件并做字符串替换（f.read() + replace()）；这绕过了 Flask 的模板系统，失去自动转义、继承、宏等核心能力。

不要序列化为 JSON 再传给前端 JS —— 除非你需要异步加载或 SPA 交互，否则纯属冗余且易错。

2. Jinja2 模板（templates/view_worker.html）
将逻辑完全交由模板处理，简洁、可读、安全：

Workers List { color: #fff; }

Worker Information
 
 
 {% for w in workers %} 
 
 {% endfor %} 
 
 
   
     
      
       
        
        Worker ID 
        Worker Name 
        Worker Type 
        Regular Hours 
        Hourly Rate ($) 
        Overtime Rate ($) 
        
       
       
        
        {{ w.worker_id }} 
        {{ w.worker_name }} 
        {{ w.worker_type }} 
        {{ w.regular_hours }} 
        {{ "%.2f"|format(w.hourly_rate) }} 
        {{ "%.2f"|format(w.overtime_rate) }} 
        
        
        No workers found.

Worker ID	Worker Name	Worker Type	Regular Hours	Hourly Rate ($)	Overtime Rate ($)
{{ w.worker_id }}	{{ w.worker_name }}	{{ w.worker_type }}	{{ w.regular_hours }}	{{ "%.2f"\|format(w.hourly_rate) }}	{{ "%.2f"\|format(w.overtime_rate) }}
No workers found.

  
✅ 优势说明：  
    
    ✅ 自动 HTML 转义：{{ w.worker_name }} 会自动转义 XSS 危险字符（如   
    ✅ 零前端 JS 依赖：页面加载即完成渲染，兼容性好、首屏快、调试简单；  
    ✅ 内置控制结构：、{% for %} 让空数据、条件样式等逻辑一目了然；  
    ✅ 类型友好：直接访问字典键（w.worker_name），无需 data[i].worker_name 索引错误；  
    ✅ 易于扩展：后续添加分页、搜索、排序只需修改后端查询和模板少量逻辑。 
   
 
你的原始代码存在多个关键问题： 
    
    ”${data[i].wokrer_name}” → 拼写错误：HTML 中写的是 wokrer_name（少一个 r），而 Python 字典中是 worker_name； 
    JSON.parse(“{JSON_data}”) → 若 worker_data 含双引号、换行或特殊字符，未转义会导致 JS 解析失败（如 O’Reilly → {‘name’: ‘O’Reilly’} → 语法错误）； 
    table.innerHTML += row → 在循环中反复操作 innerHTML 性能差，且可能触发多次重排重绘； 
    手动字符串注入 JSON 是典型的“反模式”，极易引入安全漏洞与维护陷阱。 
   
   
    
    对于静态表格展示场景（无实时交互、无懒加载需求），始终优先使用 Jinja2 服务端渲染。它更简洁、更安全、更易调试，也更符合 Flask 的设计理念。JavaScript 应保留给真正需要客户端动态行为的场景（如搜索过滤、行内编辑、图表联动等）。掌握 render_template 与 {% for %} 是 Flask 入门最关键的一步。 
   
 现在，启动应用并访问 /view_worker，你将看到一个完整、响应式、带数据的 Bootstrap 表格——无需一行前端 JS，一切由 Flask 和 Jinja2 安静而可靠地完成。

Flask 中使用 Jinja2 模板动态渲染数据库表格数据的完整教程

Worker Information

相关推荐