本日重點

• 解析 Flask 專案與 HTML 的模板整合原理
• Jinja2 的語法基礎與動態資料渲染方法
• 範例：從 Flask 傳遞參數到 HTML，再用 Jinja2 動態呈現
• 解決常見模板渲染錯誤與除錯技巧
• Flask + Jinja2 在 AI 營養顧問頁面設計的實際應用

一、活用 Flask 與 Jinja2：打造動靜態完美結合的 Web 應用

Flask 作為一個基於 WSGI（Web Server Gateway Interface）的輕量級微框架，負責處理 Web 應用中的核心任務：接收 HTTP 請求、路由匹配、視圖函數處理，並最終回傳 響應。

Flask 的一大優勢是其高度靈活性，它不強制使用者採用特定的資料庫或模板技術。而是巧妙地整合了 Jinja2 模板引擎 和 Werkzeug HTTP 工具庫，讓動態資料與靜態 HTML 的分離變得簡單高效。

二、Jinja2：動態網頁生成的核心引擎

Jinja2 是 Flask 推薦使用的模板引擎，它允許開發者在 HTML 骨架中嵌入 Python 邏輯，從而實現動態內容的渲染。

三、Flask 的前後端串接與 HTTP 請求處理

Flask 透過路由 (Route) 將特定的 URL 映射到一個 Python 函數 (視圖函數)，成為連接前後端的橋樑。

1. 範例：處理請求與動態渲染

以下範例展示了 Flask 如何接收請求、處理邏輯並利用 render_template 搭配 Jinja2 回傳動態 HTML：

from flask import Flask, render_template, request

app = Flask(__name__)

# 回傳動態渲染的 HTML (利用 Jinja2 傳入資料)
@app.route('/')
def index():
    data = {'title': '首頁', 'user': 'Alice'}
    return render_template('index.html', **data)

# 從前端表單接收 POST 資料
@app.route('/submit', methods=['POST'])
def submit():
    # 使用 request.form 獲取表單提交的內容
    username = request.form.get('username')
    return f"Hello, {username}!"

2. 資料交換與 HTTP 協議

在使用者端與伺服器端溝通時，Flask 在 HTTP 協議層扮演重要角色：

• GET 請求 (取資料)：用於獲取資源或頁面。Flask 使用 request.args 來讀取 URL 中的查詢參數（Query Parameters）。
• POST 請求 (傳資料)：常用於提交表單或上傳檔案。Flask 使用 request.form 來獲取表單提交的內容。
• JSON 支援：Flask 內建支援 JSON 格式的資料回傳與解析。使用 jsonify() 函數，可輕鬆將 Python 字典 (dict) 轉換為 JSON 格式回傳給前端。

四、靜態檔案管理與路徑引用

實際的網頁應用不僅只有 HTML，還包含 CSS 樣式表、JavaScript 腳本、圖片 等靜態資源。
Flask 遵循慣例，要求將這些靜態檔案放置在專案根目錄下的 static 資料夾 中。

為了確保模板中能正確引用這些資源，必須使用 Flask 提供的 url_for() 函數來生成正確的資源路徑，避免硬編碼路徑造成問題：

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='app.js') }}"></script>

五、延伸閱讀

• Flask 官方模板渲染文件
• Jinja2 官方說明
• Python Flask 入門指南 : 輕量級網頁框架教學