iT邦幫忙

2025 iThome 鐵人賽

DAY 17
0
AI & Data

AI 營養師 + Web3 數位健康護照系列 第 17

Day17. 規劃 AI 營養顧問的人性化 UI 頁面 Ep3:Flask + HTML = Jinja2?

  • 分享至 

  • xImage
  •  

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

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

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

Jinja2:動態網頁生成的核心引擎

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

功能 說明 範例語法
變數插值 將 Python 中的動態資料植入到模板中。 {{ variable }}
控制結構 實現條件判斷 (if/elif/else) 與迴圈 (for) 等邏輯控制。 {% if %}, {% for %}
過濾器 (Filters) 對輸出內容進行格式化處理,如日期格式轉換、字串大小寫調整等。 {{ date | format_date }}
模板繼承 實現頁面佈局 (Layout) 的共用,子模板只需覆蓋特定區塊 (Blocks) 內容。 {% extends 'base.html' %}

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>

Ref.


上一篇
Day16. 規劃 AI 營養顧問的人性化 UI 頁面 Ep2:結果與分析頁面
下一篇
Day18. 規劃 AI 營養顧問的人性化 UI 頁面 Ep4:Vibe Coding 有風險,寫程式需謹慎,部署前請詳閱資安說明書。
系列文
AI 營養師 + Web3 數位健康護照18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言