[Day 06] Jinja2

2024 iThome 鐵人賽

DAY 6

Python

Python 不止於數據，開發應用程式它也在行！系列第 6 篇

16th鐵人賽

yuchitan

2024-09-19 21:59:48

105 瀏覽

分享至

簡介

在上篇的 Flask 文章中，我們使用了 RESTful 格式來設計，並以 JSON 格式回傳資料。實際上，Flask 也支援回傳 HTML，並且預設使用的模板引擎是 Jinja2。Jinja2 的語法與 Django 的模板語法類似，能夠根據資料渲染 HTML，並支援如 For Loop、If/Else 等語法結構。接下來，我將透過範例來進一步介紹。

範例

當安裝 Flask 的時候，Jinja2 同時也會被安裝，因此不需要額外安裝。

首先，建立一個名為 templates 的目錄，然後在該目錄下建立一個名為 products.html 的檔案。此範例使用 For Loop 來迭代並呈現所有商品的名稱

<!doctype html>
<h1>Products Name</h1>
<ul>
{% for product in products %}
  <p>{{ product.name }}</p>
{% endfor %}
</ul>

接著，回到上一層目錄中的 index.py，並新增下方範例的 route。Flask 會自動在 templates 目錄下尋找 products.html，並根據變數來渲染對應的 HTML。

@app.route('/products')
def list_products():
    products = [
        {'name': 'demo 1'},
        {'name': 'demo 2'},
    ]
    return render_template('products.html', products=products)

驗證的方式與同前一篇文章類似，首先執行 poetry run flask --app index run，然後在 Web Browser 中輸入 localhost:5000/products，即可查看回傳的 HTML(如附圖所示)。