flask 框架 三

flask_wtf

flask_wtf 是flask框架中，的一个管理表单的模块，方便了开发者在对表单数据进行创建、验证的复杂操作。是开发者，在通过pyhton程序实现了表单的一些操作，简化了步骤。
下面是定义的一个登陆表单和注册表单：

from flask_wtf import FlaskForm
# 确定表单的类型，相当于input标签的作用
from wtforms import StringField,PasswordField,SubmitField,FileField
# 确定表单的内容是否合法
from wtforms.validators import DataRequired,length,Email,Regexp,EqualTo
from flask_wtf.file import FileRequired,FileAllowed

# 自定义的每一个表单的类，都继承于基类FlaskForm
class LoginForm(FlaskForm):
    user = StringField(
        label='用户名/手机/邮箱',
        validators=[
            length(20),
            DataRequired(message='用户名不能为空')
        ]
    )
    passwd = PasswordField(
        label='密码',
        validators=[
            length(6)
        ]
    )

    sumbit =SubmitField(
        label='登陆'
    )

class RegisterForm(FlaskForm):
    user = StringField(
        label='用户名/手机邮箱',
        validators=[
            length(6,12)
        ]
    )
    email = StringField(
        label='邮箱',
        validators=[
            Email('邮箱的格式不正确')
        ]
    )
    phone = StringField(
        label='电话',
        validators=[
            Regexp(r'1\d{10}',message="手机格式不正确")
        ]
    )
    passwd = PasswordField(
        label='密码',
        validators=[
            length(6,12)
        ]
    )
    is_passwd = PasswordField(
        label="确认密码",
        validators=[
            EqualTo('passwd','两次密码一致')
        ]
    )
    submit = SubmitField(
        label='注册'
    )

分析：在表单中的每一个类型数据，我们都通过上面的类型为他定义相应的类型，和对应的验证规范。
在下面的程序中，我们将上边通过python程序定义的表单，加载到页面当中

from models import app, User
from flask import render_template,redirect
from flask_bootstrap import Bootstrap
from forms import LoginForm,RegisterForm


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


# 注意：对于表单的操作，要在路由传入的参数中添加方法
@app.route('/register/',methods=["POST","GET"])
def register():
    form = RegisterForm()
    # 如果post方法并且表单通过验证的，就返回一个True
    if form.validate_on_submit():
        print('注册成功')
        return redirect('/login/')
    return render_template('register.html',form=form)

@app.route('/login/',methods=["POST","GET"])
def login():
    form = LoginForm()
    # 如果表单中输入的数据，符合自己在forms定义的要求，就返回一个True
    if form.validate_on_submit():
        # 通过form.data获取form表单的数据，并且他们以字典的形式存储
        print(form.data)
        user = form.data['user']
        passwd = form.data['passwd']
        # 判断用户的密码是否正确
        if user == 'westos' and passwd == 'a3162019':
            return redirect('/index/')
    return render_template('login.html',form=form)


@app.route('/list/')
def list():
    info = User.query.all()
    print(info)
    return render_template('list.html',info=info)

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

对应的登陆和注册页面的html文件

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}
注册
{% endblock %}

{% block content %}
<div class="container container-small">
    <h1>注册
      <small>没有账号？<a href="signup.html">注册</a></small>
    </h1>
    {{ wtf.quick_form(form) }}
</div>

{% if message %}
{{ message }}
{% endif %}


{% endblock %}

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}
首页
{% endblock %}


{% block content %}
  <div class="container container-small">
    <h1>登录
      <small>没有账号？<a href="/register/">注册</a></small>
    </h1>
{#      快速引入标签 #}
    {{ wtf.quick_form(form) }}
  </div>
{% if message %}
{{ message }}
{% endif %}
{% endblock %}

flask_bootstrap

flask_bootstrap 是一个flask 框架中提供的模块，该模块通过jinja2语法规定一个基本的模板，并将对应bootstrap框架中的一些css和js文件在模块中封装好，开发者只需要通过jinja2语法来向基本的模板里面添加东西即可。
具体的代码，在上面的html文件中已有体现，由于上面的模板继承了base.html，而base.html又是flask_bootstrap,
里面的模板。
base.html的代码如下：

{% extends "bootstrap/base.html" %}

{% block style %}
{{ super() }}
<link rel="stylesheet" href="../static/css/main.css">
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="index.html"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">首页<span class="sr-only">(current)</span></a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">国际</a></li>
                <li><a href="#">国内</a></li>
                <li><a href="/system/">系统信息</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if 'user' in session %}
                <li><a href="/logout/"><span class="glyphicon glyphicon-log-in"></span>
                    &nbsp;&nbsp;注销</a></li>
                {% else %}
                <li><a href="/login/"><span class="glyphicon glyphicon-log-in"></span>
                    &nbsp;&nbsp;登陆</a></li>
                {% endif %}
                <li><a href="/register/"><span class="glyphicon glyphicon-log-out"></span>
                    &nbsp;&nbsp;注册</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{% endblock %}

{% block content %}}



{% endblock %}

<div class="footer">


        京ICP备11008151号京公网安备11010802014853


    </div>


</body>
</html>

注意：此处不再要自己在html文件取连接bootstrap里面的样式，因为你继承的bootstrap/base.html她里面已经有，那些bootstrap框架里面的东西。