Flask實作_基礎_08_form action url_for

tags: `python` `flask` `form action url_for`

在Flask實作_基礎_07_POST and GET範例中，我們在HTML語法中設置了action='/login'，這並不是一個很好的寫法，這會造成後續路由名稱變更之後的困擾，來看看如何利用之前所學調整。

作業說明

當表單在Submit的時候，會依action='url'來傳遞資料到該路由，如果表單設置都是寫死路由的方式去設置的話，只要app.route('你的路由')調整，就會發生之前提到的每個文件都要去看有沒有使用這個路由的問題，建議作法，還是利用url_for來設置。

首先，新增一個HTML文件如下：

file name: login.html

















<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <form method='post' action={{ url_for('login') }}> 
        <p>
        <input type='text' name='username' />
    </p>
        <p>
        <button type='submit'>Submit</button>
    </p>    
    </form>
</body>
</html>

第8行：action的部份以url_for('function name')設置，function name為該路由所裝飾器函數名稱

接著調整Python文件：

















from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/login', methods=['GET', 'POST'])
def login():
    #  利用request取得使用者端傳來的方法為何
    if request.method == 'POST':
                          #  利用request取得表單欄位值
        return 'Hello ' + request.values['username']
    
    #  非POST的時候就會回傳一個空白的模板
    return render_template('login.html')

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

執行專案，然後查看網頁原始碼，可以發現action成功被解析到相對應的路由，如下圖：

現在，我們嚐試著修正@app.route的路由名稱設置


@app.route('/loginurl', methods=['GET', 'POST'])

第1行：將路由名稱由login變更為loginurl

重新執行專案，查詢網頁原始碼，如下圖：

可以發現到，路由名稱的解析依然成功指向loginurl

總結

這次我們用一個實際案例瞭解到url_for的實用性，可以成功的映射到相對應的路由名稱當然有它的背後原理，但這部份後續的實作中會有對endpoint的說明，暫時我們理解到這樣就可以，下一步我們要來認識另一個實用性很高的redirect。

上一話：Flask實作_基礎_07_POST and GET
下一話：Flask實作_基礎_09_redirect after some action

Flask實作_基礎_08_form action url_for

tags: python flask form action url_for

作業說明

總結

tags: `python` `flask` `form action url_for`