Day8 - Python Flask（二） - Jinja 和 render_template - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 8

Software Development

Python Flask CICD 啟動 ! 建構屬於你的自動化流程 !系列第 8 篇

Day8 - Python Flask（二） - Jinja 和 render_template

15th鐵人賽 python pytest cicd docker

kylekao

2023-09-23 09:16:43

467 瀏覽

分享至

前情提要：

今天要來分享的是 Jinja 和 render_template，Jinja 是 Flask 提供的樣版引擎，在搭配 render_template 的應用，就可以輕易的把標籤或資訊，動態的寫入 HTML 當中，因此在最後的實作中，就會使用這兩個概念來將前後端的資料進行串接！

使用範例：

首先會需要在目錄當中創建 templates，並且之後的 HTML 當需要在裡面創建，因為使用 render_template讀取時，都是從此目錄讀取 HTML 檔，因此此步驟需要特別注意！
因為 render_template 是 Flask 當中的一個函式，因此使用時要引入才可 from flask import render_template。
在 templates 資料夾中創建 HTML，這裡以 index.html 為例。

# index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello everyone my name is {{name}}</h1>
    {% for i in range(5) %}
        <h1>{{i}}</h1>
    {% endfor %}
</body>
</html>

此時在 app.py 中創建下列程式碼

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", name = "Kyle")

if __name__ == '__main__':
    app.run()

最後啟動後，即可在 http://localhost:5000/ 中看到以下結果

程式碼講解：

render_template 主要的功能是把在後端處理的數值，傳進 HTML 中，而其中可填入的參數如下：
render_template("填寫 template 資料夾中 HTML 的檔案路徑", 變數名 = '變數', 變數名 = '變數')
Jinja 主要的功能即是把傳入 HTML 中的數值實現出來，而以下為分隔符種類：
- {% %} => 裡面填寫語言邏輯，以上面範例舉例，可使用此分隔符，來把 for 迴圈等等搬進 HTML 當中使用。
- {{ }} => 裡面填寫 render_template 所引入的變數，以上面示範舉例，render_template 中引入的變數為 name，因此可使用 {{name}} 將數值引入。