4. Flask模板渲染

任务说明

本案例将使用 Flask 框架与 Jinja2 模板引擎，实现一个动态商品列表页面。页面通过模板接收后端传递的页面标题、欢迎语以及商品列表数据，利用 Jinja2 的变量插值与循环语法完成渲染，最终在浏览器中展示动态生成的 HTML 内容。

项目结构与依赖

首先创建项目目录并安装 Flask（Jinja2 为 Flask 默认模板引擎，无需单独安装）：

mkdir flask_template_demo
cd flask_template_demo
pip install flask

项目包含两个文件：

• app.py — Flask 应用主程序，负责路由与数据传递
• templates/index.html — Jinja2 模板文件，负责页面结构与动态渲染

实现代码

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 准备传递给模板的数据
    page_title = "商品中心"
    welcome_msg = "欢迎光临示例商城"
    products = [
        {"name": "机械键盘", "price": 299, "stock": 15},
        {"name": "无线鼠标", "price": 89, "stock": 0},
        {"name": "27寸显示器", "price": 1299, "stock": 8},
        {"name": "USB-C 扩展坞", "price": 199, "stock": 32}
    ]
    # 渲染模板并传递变量
    return render_template('index.html',
                           title=page_title,
                           welcome=welcome_msg,
                           items=products)

if __name__ == '__main__':
    app.run(debug=True, port=5000)

templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h3>{{ welcome }}</h3>
    <table border="1" cellpadding="8">
        <tr>
            <th>商品名称</th>
            <th>价格（元）</th>
            <th>库存状态</th>
        </tr>
        {% for product in items %}
        <tr>
            <td>{{ product.name }}</td>
            <td>{{ product.price }}</td>
            <td>
                {% if product.stock > 0 %}
                    有货（{{ product.stock }} 件）
                {% else %}
                    <strong style="color: red;">缺货</strong>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

运行与验证

在项目根目录执行以下命令启动服务：

python app.py

浏览器访问 http://127.0.0.1:5000，预期页面显示：

• 标题栏显示“商品中心”
• 页面顶部显示“欢迎光临示例商城”
• 表格中列出 4 条商品记录，其中“无线鼠标”因库存为 0 显示红色“缺货”，其余商品显示对应库存数量

判定标准：页面成功渲染且数据与 app.py 中定义的 products 列表完全一致，即说明 Jinja2 变量传递与循环渲染功能正常实现。