前端與後端聯動：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的表單處理、數據庫交互等進階內容。