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 %}

 

 

　　最后效果如图