Flask Web开发（一）基于python的Web表单

做一个简单的web表单，当你输入用户名的时候会产生相应的欢迎信息，效果展示如下：



其实空字符提交时会出现一行Resquired()函数产生的提醒文字，截图时点击屏幕就消失了。。。。
看到导航栏里有两个选项，在head中有标签图标，这些都是在下文中base.html中定义的，如果了解html的基本语法就很容易看明白。

定义表单：

from flask.ext.wtf import Formfrom wtforms import StringField, SubmitFieldfrom wtforms.validators import Requiredclass NameForm(Form):    name = StringField('What is your name?', validators=[Required()])    submit = SubmitField('Submit')

使用扩展Flask-WTF,处理web表单会变的相对简单，对于小白的我来说感觉功能十分强大。在这个扩展中，每一个web表单都由一个form类表示，StringField和Submitfield分别是‘text’和‘submit’类型的输入元素，Required（）函数是确保表单中输入不为空，这三个函数其实和在HTML中作用一模一样的，也正是为了下一步渲染成HTML格式，其实这个扩展就是把部分HTML的功能打包了，还有其他类似的HTML标准字段这个扩展也支持。

渲染表单：
以上的代码中我们还定义了类NameForm以及其参数form,渲染这个简单表单时，可以通过form来导入模板，会渲染生成一个简单的表单。

<form method="POST">{{ form.hidden_tag() }}{{ form.name.label }} {{ form.name() }}{{ form.submit() }}</form>

可以用CSS修饰一下：

<form method="POST">{{ form.hidden_tag() }}{{ form.name.label }} {{ form.name(id='my-text-field') }}{{ form.submit() }}</form>

这是一个表单，如果一个页面很多表单的话，工作量会很大。扩展Flask-Bootstrap可以按照已经定义的格式来渲染表单，渲染整个页面的表单，使用方式如下

{ % import "bootstrap/wtf.html" as wtf % }{{ wtf.quick_form(form) }}

wtf.quick_form() 函数的参数为 Flask-WTF 表单对象。使用 Flask-WTF 和 Flask-Bootstrap 渲染表单，暂且命名index.html 。

{ % extends "base.html" % }{ % import "bootstrap/wtf.html" as wtf % }{ % block title % }Flasky{ % endblock % }{ % block page_content % }<div class="page-header">  <h1>Hello, { % if name % }{{ name }}{ % else % }Stranger{ % endif % }!</h1></div>{{ wtf.quick_form(form) }}{ % endblock % }

添加标题Flasky，在类代码块中用了条件结构，如果为true,那么执行if和else中的代码，如果为flase则执行else和endif之间的代码。第一句可以看出这里用了Flask-Bootstrap的包含导航条的基模板base.html,这里附上。

{ % extends "bootstrap/base.html" % }{ % block title % }Flasky{ % endblock % }{% block head %}{{ super() }}<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"><link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">{% 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">   { % block page_content % }{ % endblock % }</div>{ % endblock % }

路由和试图函数

@app.route('/', methods=['GET', 'POST'])def index():  name = None  form = NameForm()  if form.validate_on_submit():     name = form.name.data     form.name.data = ''  return render_template('index.html', form=form, name=name)

在这里定义局部变量name的默认值为None，创建类实例NameForm来表示表单，若输入空字符即条件判断为false,if条件跳过执行，返回index.html重新渲染表单。如果不为空字符则执行if语句，服务器收到POST的命令请求，输入的‘name’由data获取赋值给name，然后data类似清空作用被赋值空字节，以便接受下一个输入的name。获取name后template利用模板处理表单数据，渲染包含数据的表单。
完整python代码：

from flask import Flask, render_templatefrom flask_script import Managerfrom flask_bootstrap import Bootstrapfrom flask_wtf import FlaskFormfrom wtforms import StringField, SubmitFieldfrom wtforms.validators import Requiredmanager = Manager(app)bootstrap = Bootstrap(app)moment = Moment(app)class NameForm(FlaskForm):    name = StringField('What is your name?', validators=[Required()])    submit = SubmitField('Submit')@app.route('/', methods=['GET', 'POST'])def index():    name = None    form = NameForm()    if form.validate_on_submit():        name = form.name.data        form.name.data = ''    return render_template('index.html', form=form, name=name)if __name__ == '__main__':    manager.run()