Flask学习笔记--8

天啊，我这英文水平直线下降，也可能是错觉，主要是不能平静下来理解那些英文。
本来flask那些知识点就很抽象，然后再以不熟悉的英文出现，天啊，少了好多耐心。
要好好修炼一下。

Version–10

上篇文章中有WTForms用法的简单介绍。
把那些用法应用到自己的app代码中：

flaskapp.py:

from flask import Flask,render_template,request
from wtforms import StringField, SubmitField,validators, PasswordField
from flask_wtf import Form

app = Flask(__name__)
app.config.from_object('config')

@app.route('/')
def index():
    return render_template("index.html")


class RegisterForm(Form):
    name = StringField('Name', [validators.Length(min=1, max=50)])
    username = StringField('Username', [validators.Length(min=4, max=25)])
    email = StringField('Email', [validators.Length(min=6, max=50)])
    password = PasswordField('Password', [
        validators.DataRequired(),
        validators.EqualTo('confirm', message='Passwords do not match')
    ])
    confirm = PasswordField('Confirm Password')

@app.route('/register',methods=["GET","POST"])
def register():
    form = RegisterForm()
    if request.method == "POST" and form.validate():
        return render_template("register.html",form=form)
    return render_template("register.html",form=form)


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

注：

1. 
   
2. 从书上抄的英文，修炼一下。
   
3. When using Flask-WTF, each web form is represented by a class that inherits from class Form.
   
4. The class defines a list of fields in the form, each represented by an object.
   
5. Each field object can have one or more validators attatched. Validators are functions that check whether the input submitted by the user is valid.
   
6. The fields in the form are defined as class variables, and each class variable is assigned an objects associated with the field type.

1. 
   
2. 首先从flask_wtf模块中导入Form基类(可以Flask_WTF扩展包中导入Form 类，不过wtforms模块中也有Form基类）
   
3. 这里，Web表单由继承自 Form类的 RegisterForm()类表示（form = RegisterForm()语句）
   
4. StringFields类表示属性为type=”text”的input元素（HTML笔记中有input元素的介绍）
   
5. 同样，PasswordField类表示属性为type=”password”的input元素;SubmitFields类表示属性为type=”submit”的input元素
   
6. 这里的name, email, username, password变量表示表单中字段（field, 蜜汁翻译），上面介绍过的StringField等
   
7. 以name = StringField(‘Name’, [validators.Length(min=1, max=50)])　为例:
   name变量为表单中的字段，（继承StringField基类中的内容）
   ‘Name’ 参数时把表单渲染成HTML时使用的标号;
   ‘validators’参数指定一个由验证函数组成的列表（password那儿验证条件两个），在接受用户提交的数据前验证数据，这里验证条件是输入字段在1-50字节之间。

register视图函数那一块儿：

1. 
   
2. Web表单由继承自 Form类的 RegisterForm()类表示（form = RegisterForm()语句）
   
3. 然后判断数据是不是通过 HTTP POST 方法提交的，再调用 validate() 函数来验证数据。如果验证通过，则 函数返回 True ，否则返回 False 。
   
4. 最后调用render_template()函数渲染模板，form=form将表单传入register.html模板

register.html:

{% extends 'layout.html' %}

{% block body %}
  <h1>Register</h1>
  {% from "includes/_formhelpers.html" import render_field %}
  <form method="POST",action="">
    <div class="form-group">
      {{render_field(form.name,class="form-cotrol")}}
    </div>
    <div class="form-group">
      {{render_field(form.email,class="form-cotrol")}}
    </div>
    <div class="form-group">
      {{render_field(form.username,class="form-cotrol")}}
    </div>
    <div class="form-group">
      {{render_field(form.password,class="form-cotrol")}}
    </div>
    <div class="form-group">
      {{render_field(form.confirm,class="form-cotrol")}}
    </div>
    <p><input type="submit" class="btn btn-primary" value="Submit"></p>
  </form>
{% endblock %}

_formhelpers.html

{% macro render_field(field) %}
  {{ field.label }}
  {{ field(**kwargs)|safe }}
  {% if field.errors %}
    {% for error in field.errors %}
      <span class="help-inline">{{ error }}</span>
    {% endfor %}
  {% endif %}
{% endmacro %}

把表单传递给模板后就可以轻松渲染它们了
先写了一个 _formhelpers.html 模板，用来渲染带有一个标签的字段和错误列表。

1. 
   
2. {% from “includes/_formhelpers.html” import render_field %}　jinja2 中的语法，理解成从includes文件夹的_formhelpers.html模板中导入render_field函数。
   
3. form 标签里method=”POST”,与视图函数中方法对应，action规定当提交表单时向何处发送表单数据。这里没有填，不影响的。（不往别处发送表单数据？？）
   
4. div 将name, email等分成不同的块，好看也更有意义。
   
5. form.name 访问表单中的name，作为参数传入到render_field(field)函数。class=form-control, 自己设置的class属性，暂时用不到，不设置也没问题
   
6. input中class属性对应的　class=”btn btn-primary”
   意思是对象有两个样式，即btn和btn-primary，btn样式来显示对象为按钮，btn-primary来指定按钮为基本样式按钮，颜色为蓝色

关于_formhelpers.html 模板:

1. 
   
2. macro 关键词，理解成python中的 def。
   
3. 等于在_formhelpers.html模板中定义了一个错误输出函数，当提交时验证到用户输入数据不通过，会输出错误信息。
   
4. {{ }} for expressions to print to the template output(在这没看懂)
   
5. **kwargs是可变的keyword arguments列表。
   想要在一个函数里处理带名字的参数, 可以使用**kwargs。
   **kwargs 允许你将不定长度的键值对, 作为参数传递给一个函数。
   
6. WTForms 返回标准的 Python unicode 字符串，这里使用 |safe 过滤器告诉 Jinja2 这些数据已经经过 HTML 转义了。
   
7. span 标签用来来组合行内元素，以便通过样式来格式化它们。这里对span运用了class属性。
   span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
   
8. 然后就是jinjia2的语法内容了。

大概全都说通了，然后在register页面中查看效果：

什么都不输入，点击Submit按钮，会报错：

没有设置提交表单之后的响应，这里按照规则输入信息后也没什么变化。

之后就需要用MySQL来存储表单数据，然后做注册之后的登录页面，注册之后返回Home页面等等