Flask|Flask web表单 Flaskweb表单

为了能够处理 web 表单，我们将使用 Flask-WTF ，该扩展封装了WTForms 并且恰当地集成进 Flask 中。
许多 Flask 扩展需要大量的配置，因此我们将要在microblog文件夹的根目录下创建一个配置文件以至于容易被编辑。这就是我们将要开始的(文件config.py):
CSRF_ENABLED = True
SECRET_KEY = 'you-will-never-guess'
一个简单的config.py文件，还不知道什么意思，就知道是启用了CSRF功能，后面再百度查吧。这个config文件是建在应用程序根目录下！
创建完config.py文件以后，要告诉flask去读取他，所以要在__init__.py里面设置
from flask import Flask
app = Flask(__name__)
app.config.from_object('config')#函数的意思是，用app实例的config函数，调取名字为'config'的配置文件，这个字符串是可以自己定义的？
from app import views
在 Flask-WTF 中，表单是表示成对象，Form 类的子类。一个表单子类简单地把表单的域定义成类的变量。
OpenID 登录仅仅需要一个字符串，被称为 OpenID。我们将在表单上提供一个 ‘remember me’ 的选择框，以至于用户可以选择在他们的网页浏览器上种植 cookie ，当他们再次访问的时候，浏览器能够记住他们的登录。
以下是创建的form.py
from flask.ext.wtf import Form#导入Form类
from wtforms import StringField, BooleanField#导入文本输入框，导入Boolean选择框，这个Boolean框就是打钩或者不打勾的功能
from wtforms.validators import DataRequired#导入数据验证功能class LoginForm(Form):
openid = StringField('openid', validators=[DataRequired()])#定义LoginForm类，有2个属性，第一个openid，是一个文本输入框
remember_me = BooleanField('remember_me', default=False)#第二个remember_me是一个勾选框，告诉系统要不要勾选，默认不勾选
做完表单模块后，我们要做一个HTML页面，来作为这个表单的渲染！ login.html，也是放在templates下面的

{% extends "base.html" %}#这里extends意思是扩展自base.html，意思是调用login.html的时候，预先要读取base.html
{% block content %}
Sign In

{% endblock %}
接着我们要进行views.py也就是视图文件的修改了
from flask import render_template, flash, redirect#导入模块，flash函数，redirect函数
from app import app
from .forms import LoginForm#导入LoginForm类
# index view function suppressed for brevity
@app.route('/login', methods = ['GET', 'POST'])#这里'/login'表示的是，网页最后后缀是/login的时候，访问login.html页面
def login():
form = LoginForm()#生成form实例，给render_template渲染使用
return render_template('login.html',
title = 'Sign In',
form = form)
随后，再次更新views.py文件，添加flash和redirect功能，暂时还不知道flash这个什么意思。。
@app.route('/login', methods = ['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():#调用form实例里面的validate_on_submit()功能，验证数据是否安全，如是返回True，默认返回False
flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
return redirect('/index') #如果数据符合要求，重定向到主页
return render_template('login.html',#如果数据不符合要求，则再次读取login.html页面
title = 'Sign In',
form = form)
闪现的消息将不会自动地出现在我们的页面上，我们的模板需要加入展示消息的内容。我们将添加这些消息到我们的基础模板中，这样所有的模板都能继承这个函数。这是更新后的基础模板(文件app/templates/base.html):

{% if title %}
- microblog - 锐客网
{% else %}
microblog - 锐客网
{% endif %}

Microblog: Home
#的意思是：添加一条水平线
{% with messages = get_flashed_messages() %}#Flask有一个函数是get...，赋予变量messages
{% if messages %}

{% endif %}
{% endwith %}
{% block content %}{% endblock %}

现阶段的应用程序，如果表单提交不合理的数据将不会被接受。相反，会返回表单让用户提交合法的数据。
然后，好像我们缺少了一个提示用户表单哪里出错了。幸运的是，Flask-WTF 也能够轻易地做到这一点
下面修改login.html页面文件

{% extends "base.html" %}
{% block content %}
Sign In

{% endblock %}
下面修改一下config文件，1不知道为什么要修改要放在config文件，2不知道这OpenId的作用，先照样子敲吧。。。
CSRF_ENABLED = TrueSECRET_KEY = 'you-will-never-guess'OPENID_PROVIDERS = [{ 'name': 'Google', 'url': 'https://www.google.com/accounts/o8/id' },{ 'name': 'Yahoo', 'url': 'https://me.yahoo.com' },{ 'name': 'AOL', 'url': 'http://openid.aol.com/' },{ 'name': 'Flickr', 'url': 'http://www.flickr.com/' },{ 'name': 'MyOpenID', 'url': 'https://www.myopenid.com' }]
接着，我们就需要来修改我们的views.py文件了
@app.route('/login', methods = ['GET', 'POST'])def login():
form = LoginForm()
if form.validate_on_submit():
flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
return redirect('/index')
return render_template('login.html',
title = 'Sign In',
form = form,
providers = app.config['OPENID_PROVIDERS'])
其实我觉得，providers那个数据，不放在config里面也行，放在views里面，功能是一样一样的
我们从配置中获取OPENID_PROVIDERS，接着把它作为render_template中一个参数传入模板中。
我敢确信你们已经猜到了，我们还需要多做一步来达到目的。我们现在就来说明如何在登录模板中渲染这些提供商的链接(文件app/templates/login.html):

{% extends "base.html" %}
{% block content %}

#这里补充一下Javascript的基础知识：openid.search('')是指，在openid这个变量里面去搜索是否有这个字符串，如果有的话返回他的起始位置，比如‘http://openid.aol.com/'这个里面，他的起始位置就是22位然后，下面openid.substr(0,u)是代表，截取openid的第0位到第22位，之后加上变量useruser=prompt('这里的字符串')，prompt是一个弹出框的作用，并且让你输入内容，而括号里面的内容，是弹出框的提示语句，而user是记录你在输入框里面的输入内容！！！
#Javascript基础知识第二点:form=document.forms['login']意思是，读取名字为login的表单！这里就是login.html
form.elements['openid'].value我的理解是，索引form实例里面openid的值，来赋予openid。这个没理解透，先做下面的吧。
Sign In

{% endblock %}
下面两幅图就是针对上面JavaScript的脚本的讲解！
Flask|Flask web表单

文章图片

文章图片
最后
“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，53763，
【Flask|Flask web表单】1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”