前端与后端联动：Flask模板渲染HTML动态数据示例

在Web开发中，前后端的协作是核心。后端负责处理数据、逻辑运算，前端负责将数据以用户友好的方式展示。Python的Flask框架提供了简洁的模板渲染功能，能轻松实现后端数据到前端页面的动态展示。本文将通过一个简单示例，带初学者理解Flask如何联动前后端，完成数据渲染。

一、准备工作：安装Flask与项目结构¶

首先，确保你已安装Python（推荐3.6+版本），然后通过pip安装Flask：

pip install flask

创建一个简单的项目结构，用于存放代码和模板文件：

my_flask_app/
├── app.py          # 后端主程序
└── templates/      # 存放HTML模板的文件夹
    └── index.html  # 前端模板文件

说明：templates是Flask默认的模板存放路径，所有HTML模板文件需放在此文件夹中，否则Flask无法找到模板。

二、后端基础：定义路由与视图函数¶

后端代码（app.py）的核心是通过路由（@app.route）定义访问路径，并在视图函数中准备要渲染的数据。

# app.py
from flask import Flask, render_template  # 导入Flask核心类和模板渲染工具

app = Flask(__name__)  # 创建Flask应用实例

# 定义根路径路由，访问 http://localhost:5000 时触发
@app.route('/')
def index():
    # 1. 准备后端数据（这里用一个用户信息字典模拟复杂数据）
    user_info = {
        "name": "小明",
        "age": 20,
        "hobbies": ["篮球", "编程", "阅读"],  # 列表数据用于循环渲染
        "is_student": True  # 布尔值数据用于条件渲染
    }

    # 2. 渲染模板并传递数据
    # render_template会自动查找templates文件夹中的index.html
    # 并将user_info变量传递给前端模板
    return render_template('index.html', user=user_info)

# 启动应用（debug=True开启调试模式，代码修改后自动重启）
if __name__ == '__main__':
    app.run(debug=True)

关键概念：
- 路由：@app.route('/') 定义了访问路径，用户访问 http://localhost:5000 时，会触发下方的视图函数。
- 视图函数：index() 是处理请求的函数，返回渲染后的模板（通过 render_template 实现）。
- 模板渲染：render_template('index.html', user=user_info) 将后端数据（user_info）传递给前端模板，并生成最终HTML页面。

三、前端模板：用Jinja2语法展示动态数据¶

模板文件（templates/index.html）需要通过Flask的模板引擎（Jinja2）将后端数据“注入”到HTML中。以下是完整的模板代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .info { border: 1px solid #ddd; padding: 20px; border-radius: 5px; }
        .hobbies { margin-top: 10px; }
        .hobbies ul { list-style: none; padding: 0; }
        .hobbies li { margin: 5px 0; }
    </style>
</head>
<body>
    <div class="info">
        <!-- 1. 展示基本变量 -->
        <h1>欢迎，{{ user.name }}！</h1>
        <p><strong>年龄：</strong>{{ user.age }} 岁</p>

        <!-- 2. 条件渲染（根据is_student的值显示不同内容） -->
        {% if user.is_student %}
            <p>状态：<span style="color: green;">在校学生</span></p>
        {% else %}
            <p>状态：<span style="color: red;">已毕业</span></p>
        {% endif %}

        <!-- 3. 循环渲染列表数据 -->
        <div class="hobbies">
            <h3>兴趣爱好：</h3>
            <ul>
                {% for hobby in user.hobbies %}
                    <li>{{ hobby }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</body>
</html>

四、代码解释：模板中的Jinja2语法¶

模板文件中使用了Flask内置的Jinja2模板引擎，通过特殊语法实现动态数据渲染：

变量输出：{{ user.name }}
后端传递的user字典中的name键会被替换为实际值（如“小明”）。
条件判断：{% if user.is_student %}
根据后端传递的布尔值is_student，模板会显示不同内容（“在校学生”或“已毕业”）。
循环渲染：{% for hobby in user.hobbies %}
后端的hobbies列表会被循环遍历，每个元素（如“篮球”）会生成一个<li>标签。

五、运行与验证¶

在项目根目录（my_flask_app）打开命令行，执行：

   python app.py

打开浏览器访问 http://localhost:5000，你会看到页面显示：
- 欢迎语（小明）
- 年龄（20岁）
- 状态（在校学生）
- 兴趣爱好列表（篮球、编程、阅读）

六、扩展与思考¶

传递更多数据：尝试在后端定义多个数据（如user、posts列表），并在模板中同时渲染。
条件判断优化：用{% if ... else if ... else %}实现多条件展示。
模板复用：通过{% include %}或{% extends %}拆分HTML结构（如导航栏、页脚），减少重复代码。

通过这个示例，你已经掌握了Flask模板渲染的核心流程：后端准备数据 → 传递给模板 → 前端通过Jinja2语法动态展示。这是Web开发中前后端联动的基础，后续可以继续学习Flask的表单处理、数据库交互等进阶内容。