Day9 - Python Flask（三） - 表單設計 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 9

Software Development

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

Day9 - Python Flask（三） - 表單設計

15th鐵人賽 python pytest cicd docker

kylekao

2023-09-24 09:20:50

290 瀏覽

分享至

前情提要：

今天要來和大家分享如何把 HTML 當中的 form 和 Python Flask 來做結合，其基底是根據先前 URL 路徑延伸出來的，若對這部分還不清楚的話，記得要去翻閱之前的文章喔，那現在就來進入我們今天的主題。

表單製作：

# 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>
    <form action="" method="post">
        <input type="text" name="name" placeholder="請輸入你的名字">
        <input type="submit">
    </form>
    {% if name %}
        <p>{{name}} 您好</p>
    {% endif %}
</body>
</html>

# app.py
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route("/", methods = ["GET", "POST"])
def index():
    if request.method == 'GET':
        return render_template("index.html")
    else:
        return render_template("index.html", name = request.values['name'])

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

程式碼講解：

在 Flask URL 的設定中，除了可以設定 URL 路徑以外，也可以設定此 URL 路徑可接收的 HTTP Method。而因為我們表單的請求方式是使用 POST，因此 HTTP Method 除了 GET 以外，還需要 POST，因此有了範例上面的寫法 @app.route("/", methods = ["GET", "POST"])。
關於 Flask 中的 request，這裡分享兩個使用方式：
- request.method => 可以用來獲取當前使用的 HTTP Method。
- request.values["所設定的 Name 標籤"] => 用來獲取對應 Name 標籤當中的值。
在 index.html 中，有使用到昨天 Jinja 當中陳述邏輯的分隔符，也就是 {% if name %} 這部分，用來表達當有 name 此變數時，才顯示此區塊，展示了 Jinja 的其中一種應用。