Day 15 Flask 樣板引擎 Template Engine

2022 iThome 鐵人賽

DAY 15

Modern Web

資工琪琪的後端學習筆記(python&flask)系列第 15 篇

14th鐵人賽

jddj42840

團隊imac_Big3

2022-09-30 14:31:35

1078 瀏覽

分享至

回應前端方式

回應字串
回應JSON格式字串
重新導向
使用樣板引擎

使用樣板引擎

根據樣板檔案、產生字串，傳送到前端

方便撰寫複雜的前端程式
方便在回應，動態的帶入資料

使用樣板(Templates)

建立樣板檔案

最基本的樣板檔案就是純文字檔

樣板黨必須建立在專案的template子資料夾底下
例如，在樣板檔案中加入以下內容

您好，歡迎光臨

使用樣板檔案

取得樣板檔案中的文字，傳送到前端

透過render_template()根據樣板檔案的內容產生文字


@app.route("/"):
    def index():
        return render_template(檔案路徑)

建立樣板檔案定義資料欄位

在樣板檔案中定義動態處理的欄位

利用{{資料欄為名稱}}定義欄位
例如，在樣板檔案中加入以下欄為

您好，{{name}}，歡迎光臨

使用樣板檔案帶入資料欄位

使用樣板檔案的時候，帶入資料

透過 render_template參數帶入資料

@app.route("/")
def index():
    return render_template(
        檔案路徑,
        資料欄位名稱=資料
    )

實作:使用基本樣板引擎操作

1.先些一個基本的code

from flask import Flask, redirect #載入 Flask
from flask import request #載入 Request 物件

#在建立Application物件，可以設定靜態檔案的路徑處理
app=Flask(__name__) 



#建立路徑 / 對應的處理方式

#路由設定

@app.route("/") 
def index():
    return "Hello World"

app.run(port=3000) #啟動伺服器

在專案目錄底下新增一個叫templates目錄
在templates目錄下新增一個檔案名稱自訂在檔案裡打一些字
回到Code那邊,先導入render_template
讓函式回傳index資料，這裡的index是templates目錄底下的index檔案
讓我們 run 一下，成功!
那我們是是看html 將index改為index.html並把code複製進去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework1</title>
</head>

<body>

    <table border="1" width="300" align="center">
        <tr>
            <td align="center" colspan="4">我的最愛</td>
            <!-- <td></td>
            <td></td>
            <td></td> -->

        </tr>
        <tr>
            <td colspan="2" align="center">連結名稱</td>
            <!-- <td></td> -->
            <td colspan="2" align="center">連結網址</td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2" align="center">Google</td>
            <!-- <td></td> -->
            <td colspan="2" align="center"><a href="https://www.google.com.tw/" target="_blank">google</a></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2" align="center">Youtube</td>
            <!-- <td></td> -->
            <td colspan="2" align="center"><a href="https://www.youtube.com/" target="_blank">Youtube</a> </td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2" align="center">Pchome</td>
            <!-- <td></td> -->
            <td colspan="2" align="center"><a href="https://shopping.pchome.com.tw/" target="_blank">Pchome</a></td>
            <!-- <td></td> -->
        </tr>



    </table>
</body>

</html>

我們執行看看
我們是是看把HTML的Title改成樣板模式{{name}}

code:

from unicodedata import name
from flask import Flask, redirect #載入 Flask
from flask import request #載入 Request 物件
from flask import render_template #載入 render_template
#在建立Application物件，可以設定靜態檔案的路徑處理
app=Flask(__name__) 



#建立路徑 / 對應的處理方式

#路由設定

@app.route("/") 
def index():
    return render_template("index.html",name="小明的作業")

app.run(port=3000) #啟動伺服器