Flask入門之flask-wtf表單處理

參考文章

1. 使用 WTForms 進行表單驗證

 第11集

#Sample.py

# coding:utf-8
from flask import Flask,render_template,request
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

app.config.from_pyfile('config') #新建一個config的配置文件

@app.route('/login',methods=['POST','GET'])
def login():
    from forms import LoginForm
    form = LoginForm()
    return render_template('login.html',title=u'登錄',form=form)


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

 #login.html

{% extends 'home.html' %}
{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="container">
        <form method="POST">
            {{ form.username.label }}
            {{ form.username() }}
            {{ form.password.label }}
            {{ form.password() }}
            {{ form.submit() }}
        </form>
    </div>
{% endblock %}

 

#forms.py

#coding:utf-8
from flask.ext.wtf import Form
from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import DataRequired
class LoginForm(Form):
    username = StringField(label=u'用戶名',validators=[DataRequired()])
    password = PasswordField(label=u'密碼',validators=[DataRequired()])
    submit = SubmitField(label=u'提交')

 

#homt.html

{% extends 'bootstrap/base.html' %}
{% import '_macro.html' as ui %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
    {{ super() }}
    {% include 'includes/_head.html' %}
{% endblock %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}

 

#config

　　防止CSRF

 

SECRET_KEY='hard to guess string'

 

 

 

　　效果如圖

 

這里我們可能會覺得這個表單設計的很丑

 

前面我們學了，引用bootstrap樣式，所以也可以將這個表單直接引用，方便快捷

只要改動#login.html的代碼（紅色代碼）

{% extends 'home.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="container">
        <form method="POST">
            {{ wtf.quick_form(form) }}
        </form>
    </div>
{% endblock %}

 

　　效果好了很多

 

　　如果我們想在登錄后，提示一下‘登錄成功’的信息條，怎么設置呢，這里要從flask導入flash(添加到上面代碼）

from flask import flash

 

　　然后再視圖函數下填寫（紅色代碼）

@app.route('/login',methods=['POST','GET'])
def login():
    from forms import LoginForm
    form = LoginForm()
    flash(u'登陸成功')
    return render_template('login.html',title=u'登錄',form=form)

 

　　最后在#login.html中增加代碼（紅色代碼） 

{% extends 'home.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="container">
        {% for message in get_flashed_messages() %}
            <div class="alert-info">{{ message }}</div>
        {% endfor %}
        <form method="POST">
            {{ wtf.quick_form(form) }}
        </form>
    </div>
{% endblock %}

 

 

　　最后效果如圖