常用Flask的插件bootstrap wtf

flask_bootstrap

  1. 如何在flask中使用Boostrap?
    要想在程序中集成Bootstrap,显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展,简化集成的过程。Flask-Bootstrap 使用pip安装:
pip install flask_bootstrap
  1. Flask 扩展一般都在创建程序实例时初始化,下面是Flask_Bootstrap的初始化方法:
from flask_bootstrap import  Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)

初始化Flask-Bootstrap 之后,就可以在程序中使用一个包含所有Bootstrap 文件的基模板。这个模板利用Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入Bootstrap 的元素。

  1. 如何引用bootatrap的基模板?
{%extends "bootstrap/base.html"%}
{%block title %}Flask{% endblock %}

这两个块分别表示页面中的导航条和主体内容。在这个模板中,navbar 块使用Bootstrap 组件定义了一个简单的导航条。content 块中有个

容器,其中包含一个页面头部。

  1. Flask-Bootstrap定义的其他可用块:
    参考链接: https://pythonhosted.org/Flask-Bootstrap/basic-usage.html#available-blocks
    块名   说明
    doc 整个html文档
    html_attribs html标签属性
    html   html标签中的内容
    head head标签中的内容
    title title标签中的内容
    metas 一组meta标签
    styles 层叠样式表定义
    body_attribs body标签的属性
    body body标签中的内容
    navbar 用户定义的导航条
    content 用户定义的页面内容
    scripts 文档底部的JavaScript 声明
  2. 如何继承原有内容:
      上表中的很多块都是Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2 提供的super() 函数。例如,如果要在衍生模板中添加新的JavaScript 文件,需要这么定义scripts 块:
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

首先了解一下bootstrap提供了多少block,bootstrap中的base.html如下:

{% block doc -%}       ###doc:整个HTML文档(开始)
<!DOCTYPE html>        
<html{% block html_attribs %}{% endblock html_attribs %}>###html_attribs:<html>标签的属性
{%- block html %}     ###html:<html>标签中的内容(开始)
  <head>
    {%- block head %}  ###head:<head>标签中的内容(开始)
    <title>{% block title %}{{title|default}}{% endblock title %}</title> ###title:<title>标签中的内容

    {%- block metas %} ###metas:一组<meta>标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- endblock metas %}

    {%- block styles %}   ##styles:层叠样式表定义
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
    {%- endblock styles %}
    {%- endblock head %}     ###head:<head>标签中的内容(结束)
  </head>               ###body_attribs:<body>标签的属性
  <body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body -%}      ###body:<body>标签中的内容(开始)
    {% block navbar %}     ###navbar:用户定义的导航条
    {%- endblock navbar %}
    {% block content -%}    ###content:用户定义的页面内容
    {%- endblock content %}

    {% block scripts %}  ###scripts:文档底部的JavaScript声明
    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
    {%- endblock scripts %}
    {%- endblock body %} ###body:<body>标签中的内容(结束)
  </body>
{%- endblock html %}     ###html:<html>标签中的内容(结束)
</html>
{% endblock doc -%}      ###doc:整个HTML文档(结束)

flask_wtf

  1. 为什么使用Flask-WTF?
    request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。
    尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复。
    表单的HTML代码生成和验证提交的表单数据就是两个很好的例子。
    优势:
    Flask-WTF扩展使得处理web表单能获得更愉快的体验。该扩展是一个封装了与框架无关的WTForms包的Flask集成。
  2. 什么是表单处理?
    在网页中,为了和用户进行信息交互总是不得不出现一些表单。
    flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据。
    WTForm中最重要的几个概念如下:
    1). Form类,开发者自定义的表单必须继承自Form类或者其子类。
    Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。
      2). 各种Field类,即字段。一般而言每个Field类都对应一个input的HTML标签。
    比如WTForm自带的一些Field类比如BooleanField就对应,
    SubmitField就对应等等。
      3). Validator类。这个类用于验证用户输入的数据的合法性。
    比如Length验证器可以用于验证输入数据的长度,
    FileAllowed验证上传文件的类型等等。

另外,flask为了防范csfr(cross-site request forgery)攻击,
默认在使用flask-wtf之前要求app一定要设置过secret_key。
最简单地可以通过app.config[‘SECRET_KEY’] = 'xxxx’来配置。

  1. 常见的Field类

PasswordField   密码字段,自动将输入转化为小黑点

DateField   文本字段,格式要求为datetime.date一样

IntergerField   文本字段,格式要求是整数

DecimalField   文本字段,格式要求和decimal.Decimal一样

FloatField   文本字段,值是浮点数

BooleanField   复选框,值为True或者False

RadioField   一组单选框

SelectField   下拉列表,需要注意一下的是choices参数确定了下拉选项,
但是和HTML中的 标签一样,其是一个tuple组成的列表,
可以认为每个tuple的第一项是选项的真正的值,而第二项是alias。

MultipleSelectField  可选多个值的下拉列表

  1. Validator是验证函数:

    Validator是验证函数,把一个字段绑定某个验证函数之后,flask会在接收表单中的数据之前对数据做一个验证,
    如果验证成功才会接收数据。验证函数Validator如下,具体的validator可能需要的参数不太一样,这里只给出
    一些常用的,更多详细的用法可以参见wtforms/validators.py文件的源码,参看每一个validator类需要哪些参数:

*基本上每一个validator都有message参数,指出当输入数据不符合validator要求时显示什么信息。
  Email  验证电子邮件地址的合法性,要求正则模式是.+@([.@][^@]+)$

EqualTo  比较两个字段的值,通常用于输入两次密码等场景,可写参数fieldname,不过注意其是一个字符串变量,指向同表单中的另一个字段的字段名

IPAddress  验证IPv4地址,参数默认ipv4=True,ipv6=False。如果想要验证ipv6可以设置这两个参数反过来。

Length  验证输入的字符串的长度,可以有min,max两个参数指出要设置的长度下限和上限,注意参数类型是字符串,不是INT!!

NumberRange  验证输入数字是否在范围内,可以有min和max两个参数指出数字上限下限,注意参数类型是字符串,不是INT!!然后在这个validator的message参数里可以设置%(min)s和%(max)s两个格式化部分,来告诉前端这个范围到底是多少。其他validator也有这种类似的小技巧,可以参看源码。

Optional  无输入值时跳过同字段的其他验证函数

Required  必填字段

Regexp  用正则表达式验证值,参数regex=‘正则模式’

URL  验证URL,要求正则模式是[a-z]+://(?P<host>[/:]+)(?P:[0-9]+)?(?P /.*)?$

AnyOf  确保值在可选值列表中。参数是values(一个可选值的列表)。特别提下,和SelectField进行配合使用时,不知道为什么SelectField的choices中项的值不能是数字。。否则AnyOf的values参数中即使有相关数字也无法识别出当前选项是合法选项。我怀疑NoneOf可能也是一样的套路。

NoneOf  确保值不在可选值列表中

 flask-bootstrap(添加css, js样式)---提供了base.html, wtf.html
 flask-wtf(表单处理)-
 表单类型(StringField, PasswordField, SubmitField, FileField)
 验证表单(DataRequired, Length, Email, Regexp, EqualTo)

eg:
wtflogin.htm:

{% extends 'bootstrap/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block content %}
<form method="POST" action="/login/">
    {{ wtf.quick_form(form) }}
    {% if message %}
        <p style="color:red">{{ message }}</p>
    {% endif %}
</form>
{% endblock %}

run.py:

import random
from flask import Flask, redirect, render_template, flash
from forms import LoginForm
from flask_bootstrap import  Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
app.config['SECRET_KEY'] =  random._urandom(24)
@app.route('/success/')
def success():
    return  "success"
@app.route('/login/', methods=('GET', 'POST'))
def submit():
    # 实例化表单对象;
    form = LoginForm()
     # 如果是post方法并且表单验证通过的话, 返回True;
    if form.validate_on_submit():
        return redirect('/success/')
    return render_template('wtflogin.html', form=form)
app.run(port=9001)

forms

from flask_wtf import FlaskForm
from flask_wtf.file import FileRequired, FileAllowed
from wtforms import StringField, PasswordField, SubmitField, FileField
from wtforms.validators import DataRequired, Length
class LoginForm(FlaskForm):
    name = StringField(
        label="用户名/邮箱/手机号",
        validators=[
             DataRequired(message="请输入用户名"),
            Length(3, 10, message="长度不符"),
        ]

    )
    passwd = PasswordField(
        label="密码",
        validators=[
             DataRequired(message="输入密码"),
            Length(3, 10,message="长度不符")
        ] )

    file = FileField(
        label="头像",
        validators=[
            FileRequired(),
            FileAllowed(['png', 'jpg'],message='文件非图片')
        ]
    )
    sumbit = SubmitField(
        label="登陆"
    )

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值