python中Flask Web 表單的使用方法介紹

2022-05-20 19:04:47

簡介

表單的操作是Web程式開發中最核心的模組之一，絕大多數的動態互動功能都是通過表單的形式實現的。本文會教大家實現簡單的表單操作。

普通表單提交

在建立模板login.html頁面中直接寫form表單。

login.html

<!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>Document</title>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="submit" value="提交">
    </form>
    {% if method == 'GET' %}
        請求方式：{{method}}
    {% elif method == 'POST' %}
        請求方式：{{method}}
        使用者名稱：{{ username }}
        密碼：{{ password }}
    {% endif %}
    
</body>
</html>

接下來，在檢視函數中獲取表單資料

login.py

from flask import Flask, render_template, request
app = Flask(__name__)
# index 檢視函數
@app.route('/login', methods=['GET', 'POST'])
def login():
    context = dict()
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        print(username, password)
        context = {
            'username': username,
            'password': password,
        }
        context.update({'method': request.method})
    else:
        context.update({'method': request.method})
    return render_template('login.html', **context)
@app.route('/')
def index():
    return 'hello'
if __name__ == '__main__':
    app.run(debug=True)

當我們點選提交之後，則會顯示：

上面的實現方式是直接採用表單的提交方式。但是有個弊端，假如引數很多的情況下，後臺也需要一一進行驗證，每次都是先接收引數，再對引數進行校驗的話，工作量就會非常的龐大，而且還會出現csrf攻擊，這時我們就可以採用Flask-WTF來建立表單，從而避免上述弊端。

Flask-WTF基礎

Flask-WTF的主要作用是對使用者的請求資料進行驗證。我們可以使用pip命令安裝該依賴，

pip install flask-wtf

在flask web程式中，因為類FlaskForm由Flask-WTF拓展定義，所以可以從flask.wtf中匯入FlaskForm。而欄位和函數可以直接從WTForms包中匯入，WTForms包中可以支援如下所示的HTML標準欄位。

欄位	說明
StringField	表示文字欄位
TextAreaField	表示多行文字欄位
PasswordField	表示密碼文字欄位
HiddenField	表示隱藏文字欄位
DateField	表示日期的文字欄位
DateTimeFiled	表示時間的文字欄位
IntegerFiled	表示整數型別的文字欄位
DecimalField	表示Decimal型別的文字欄位
FloatFiled	表示Float型別的文字欄位
RadioFiled	表示單選框欄位
SelectFiled	表示下拉選單欄位

WTForm也包含驗證器，它對錶單欄位進行驗證，非常方便。

欄位	說明
DataRequire	檢查輸入的欄位是否為空
Email	檢查欄位是否符合郵件格式的約定
IPAddress	在輸入欄位中驗證IP地址
Length	驗證輸入欄位中的字串長度是否符合給定長度
NumberRange	驗證給定範圍內輸入欄位中的文字
URL	驗證是否為合法的URL

使用Flask-WTF處理表單

編寫兩個檢視函數，以及一個form表單類，用於註冊以及跳轉index頁面。

login.py

from flask import Flask, render_template, redirect, url_for, session
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo
app = Flask(__name__)
app.config["SECRET_KEY"] = "xhosd6f982yfhowefy29f"
class RegisterForm(FlaskForm):
    username = StringField(label="使用者名稱", validators=[DataRequired('使用者名稱不能為空')])
    password = PasswordField(label="密碼", validators=[DataRequired('密碼不能為空')])
    password_comfirm = PasswordField(label="確認密碼", validators=[DataRequired('密碼不能為空'), EqualTo('password', '兩次密碼不一致')])
    submit = SubmitField(label='提交')
@app.route('/register', methods=['GET', 'POST'])
def register():
    form  = RegisterForm()
    if form.validate_on_submit():
        uname = form.username.data
        pwd = form.password.data
        pwd_com = form.password_comfirm.data
        print(uname, pwd, pwd_com)
        session['username'] = uname
        return redirect(url_for('index'))
    return render_template('register.html', form=form)
@app.route('/index')
def index():
    username = session.get('username', '')
    return 'hello %s' % username
if __name__ == '__main__':
    app.run(debug=True)

接下來編寫一個html模板檔案，用於使用者註冊使用。

register.html

<!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>Document</title>
</head>
<body>
    <form action="" method="post">
        {{form.csrf_token}}
        {{form.username.label}}
        <p>{{ form.username }}</p>
        {% for msg in form.username.errors %}
            <p>{{ msg }}</p>
        {% endfor %}

        {{form.password.label}}
        <p>{{ form.password }}</p>
        {% for msg in form.password.errors %}
            <p>{{ msg }}</p>
        {% endfor %}

        {{form.password_comfirm.label}}
        <p>{{ form.password_comfirm }}</p>
        {% for msg in form.password.errors %}
            <p>{{ msg }}</p>
        {% endfor %}

        {{ form.submit }}
    </form>
</body>
</html>

Flask訊息閃現

在Flask框架中，方法flash()功能是實現訊息閃現提示效果。Flask官方對閃現的解釋是對使用者的請求做出無重新整理的響應。類似於Ajax的重新整理效果。

舉一個簡單的例子，當用戶通過表單傳送完請求之後，假如使用者名稱或者是密碼輸入錯誤，那麼伺服器就會返回錯誤的提示資訊，並在表單頁面上顯示。

具體程式碼，如下所示：

login.py

from flask import Flask, flash, redirect, render_template, request, url_for
app = Flask(__name__)
app.secret_key = 'random string'
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or request.form['password'] != 'admin':
            flash("使用者名稱或密碼錯誤")
        else:
            flash('登入成功')
            return redirect(url_for('index'))
    return render_template('login.html')
if __name__ == '__main__':
    app.run(debug=True)

login.html

<!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>登入</title>
</head>
<body>
    <form action="" method="post">
        <p>username</p>
        <input type="text" name="username">
        <p>password</p>
        <input type="password" name="password">
        <input type="submit" value="登入">
    </form>
    {% for message in get_flashed_messages() %}
        {% if message %}
            {{message}}
        {% endif %}
    {% endfor %}
</body>
</html>

index.html

<!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>Document</title>
</head>
<body>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
                <p>{{ message }}</p>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <h3>welcome</h3>
    <a href="{{url_for('login')}}" rel="external nofollow" >login</a>
</body>
</html>

上面的程式碼實現了URL的跳轉，我們首先會進入首頁，首頁中包含了進入登入頁面的連結。

檔案上傳

在Flas Web程式中要實現檔案的上傳非常簡單，與傳遞post和get非常的類似。基本流程如下：

（1）將在使用者端上傳的檔案儲存到flask.request.files物件。
（2）使用flask.request.files物件獲取上傳上來的檔名和檔案物件
（3）呼叫檔案物件中的方法save()將檔案儲存到指定的目錄中。

簡易的檔案上傳程式如下所示：

upload.py

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

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'GET':
        return render_template('upload.html')
    else:
        file = request.files['file']
        if file:
            file.save(file.name + '.png')
            return '上傳成功'
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

index.html

<!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>Document</title>
</head>
<body>
    <h1>檔案上傳首頁</h1>
    <a href="{{url_for('upload')}}" rel="external nofollow" >檔案上傳</a>
</body>
</html>

upload.html

<!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>檔案上傳</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">

        <input type="file" name="file">
        <input type="submit" value="點選我上傳">
    </form>
</body>
</html>

本程式需要點選跳轉之後才能進入檔案上傳頁面，這樣寫的目的只是因為我比較懶，不想再瀏覽器中輸入一大串的url。

目前上述程式僅僅可以上傳圖片！

檔案上傳的另一種寫法

在Flask中上傳檔案的步驟非常簡單，首先需要一個HTML表單，將enctype屬性設定為"multipart/form-data"即可。URL處理程式會從request.file[]物件中提取檔案，並將它儲存到所需要的位置上。

每個上傳的檔案首先會儲存到伺服器上的臨時位置，然後將其儲存到最終的實際位置。建議使用secure_filename函數獲取。

index.html

<!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>Document</title>
</head>
<body>
    <form action="/uploader" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="提交">
    </form>
</body>
</html>

upload.py

from flask import Flask, render_template, request
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.config['UPLOAD_FLODER']= 'upload/' # 設定檔案儲存的路徑
@app.route('/')
def upload_file():
    return render_template('upload.html')
@app.route('/uploader', methods=['GET', 'POST'])
def uploader():
    if request.method == 'POST':
        f = request.files['file']
        print(request.files)
        f.save(os.path.join(app.config['UPLOAD_FLODER'], secure_filename(f.filename)))
        return '上傳成功'
    else:
        render_template('upload.html')
if __name__ == '__main__':
    app.run(debug=True)

到此這篇關於python中Flask Web 表單的使用方法介紹的文章就介紹到這了,更多相關Java Flask 表單內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

python中Flask Web 表單的使用方法介紹

目錄

簡介

普通表單提交

Flask-WTF基礎

使用Flask-WTF處理表單

Flask訊息閃現

檔案上傳

檔案上傳的另一種寫法

熱門文章