Flask學習之表單
阿新 • • 發佈:2019-01-23
Flask web表單
Flask可以直接生成一個web表單返回,並坐一些表單的驗證和限制。
Flask-WTF 能保護所有表單免受跨站請求偽造(Cross-Site Request Forgery, CSRF)的攻擊。惡意網站把請求傳送到被攻擊者已登入的其他網站時就會引發 CSRF 攻擊。
為了實現 CSRF 保護, Flask-WTF 需要程式設定一個金鑰。 Flask-WTF 使用這個金鑰生成 加密令牌,再用令牌驗證請求中表單資料的真偽。
設定金鑰的方式如下:
app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'
app.config是一個字典,可用來儲存框架、擴充套件和程式本身的配置變數。 金鑰要設定有難度的字串。
我們來個簡單的例子,安裝Flask-WTF,
pip install flask-wtf
然後建立一個LoginForm.py檔案並寫如下程式碼 :
# encoding=utf-8
from flask_wtf import Form
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired, Length, Email
class LoginForm(Form):
email = StringField('Email', validators=[DataRequired(), Length(1, 64),Email()])
password = PasswordField('Password', validators=[
DataRequired(), EqualTo('password2', message='Passwords must match.')])
password2 = PasswordField('Confirm password', validators=[DataRequired()])
remember_me = BooleanField('Keep me logged in' )
submit = SubmitField('Log In')
password和password2兩個設定了密碼匹配驗證,服務端需要寫form.validate_on_submit()
即可返回驗證結果,介面也會相應提示,如果不寫form.validate_on_submit()
那就不會驗證的。
在程式入口檔案app.py中寫入如下內容:
# encoding=utf-8
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from forms.LoginForm import LoginForm
app = Flask(__name__, template_folder='templates')
bootstrap = Bootstrap(app)
app.config['SECRET_KEY'] = 'hard to guess string'
@app.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
# 這裡要做驗證,否則前端不會有提示的
if form.validate_on_submit():
return 'login succeed'
return render_template('auth/index.html', form=form)
if __name__ == '__main__':
app.run(debug=True, port=5001)
我們用flask-bootstrap建立一個父頁面base.html,做一些基本的架子搭建:
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}
最後我們新建一個login.html,我們使用最簡單的表單渲染方式{{ wtf.quick_form(form) }}
生成頁面:
{% extends "base.html" %}{% import "bootstrap/wtf.html" as wtf %}{% block title %}Flasky - Login{% endblock %}{% block content %}
<div class="container">
<div class="page-header">
<h1>Login</h1>
</div>
<div class="col-md-4">
{{ wtf.quick_form(form) }}
</div>
</div>
{% endblock %}