python(Flask-bootstrap、wtf)

最新推荐文章于 2025-06-28 09:36:03 发布

原创最新推荐文章于 2025-06-28 09:36:03 发布 · 824 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何在Flask中集成Bootstrap，包括Bootstrap的基本介绍、Flask-Bootstrap的安装与使用，以及如何通过Flask-Bootstrap实现页面结构。同时，文章还探讨了Flask中集成WTForms处理web表单，阐述了Flask-WTF的特点、优势以及使用流程，并给出了表单验证和邮件发送的案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flask中集成bootstrap

1. 什么是Bootstrap?

Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。

2. Flask中如何集成Bootstrap?

使用 pip 安装Flask-Bootstrap 的 Flask 扩展,简化集成的过程。

# 在业务逻辑app.py中实例化Bootstrap对象，用于继承
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

3. Flask-Bootstrap实现了什么?

利用 Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中
就有用来引入 Bootstrap 的元素。

# 在页面逻辑的基模板base.html中
{ % extends "bootstrap/base_other.html" % }

基模板中定义了可在衍生模板中重定义的块。

   		块名                    说 明
        doc                     整个 HTML 文档
        html_attribs            <html> 标签的属性
        html <html>             标签中的内容
        head <head>             标签中的内容
        title <title>           标签中的内容
        metas                   一组 <meta> 标签
        styles                  层叠样式表定义
        body_attribs            <body> 标签的属性
        body                    <body> 标签中的内容
        navbar                  用户定义的导航条
        content                 用户定义的页面内容
        scripts                 文档底部的 JavaScript 声明

程序需要向已经有内容的块中添加新内容,必须使用 Jinja2 提供的 super() 函数。

{% block scripts %}
{# 先继承父类的js声明，在添加自己定义的js声明#}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

自定义base.html：

{# 继承自集成bootstrap对象中的基模板#}
{% extends 'bootstrap/base.html' %}

{% block styles %}
    {#  先继承父类的css样式导入   #}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='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="#">Todo</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 class="active"><a href="#">主页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="{{ url_for('list') }}">用户信息</a></li>
                    <li><a href="#">监控</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">电影</a></li>

                </ul>

                <ul class="nav navbar-nav navbar-right">
                    {#       分类讨论:
                            1. 如果没有登录， 显示登录和注册按钮；
                            2. 如果登录成功， 显示用户名称和注销按钮

            #}
                    {% if not session.user %}
                        <li><a href="{{ url_for('login') }}">登录</a></li>
                        <li><a href="{{ url_for('register') }}">注册</a></li>
                    {% else %}
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">当前用户：{{ session.user }} <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li role="separator" class="divider"></li>
                                <li><a href="{{ url_for('logout') }}">注销</a></li>
                            </ul>
                        </li>

                    {% endif %}
                </ul>


            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


    {#让每个页面都可以获取闪现信息闪现#}
    {% for item in get_flashed_messages() %}

        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            {{ item }}
        </div>
    {% endfor %}
{% endblock %}

Flask中集成的web表单处理

需要安装flask-wtf模块，用来创建表单类

flask-wtf的特点：

通过代码创建表单
避免重复操作，表单操作很多;
防止表单遭遇跨站请求伪造(csrf===cross-site request forgery);

为什么使用Flask-WTF？

request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。尽管Flask的request对象提供的支持足以处理web表单，但依然有许多任务会变得单调且重复。表单的HTML代码生成和验证提交的表单数据就是两个很好的例子。
优势：Flask-WTF扩展使得处理web表单能获得更愉快的体验。该扩展是一个封装了与框架无关的WTForms包的Flask集成。

什么是表单处理?

在网页中，为了和用户进行信息交互总是不得不出现一些表单。flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据WTForm中最重要的几个概念如下：

Form类，开发者自定义的表单必须继承自Form类或者其子类。Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。
各种Field类，即字段。一般而言每个Field类都对应一个input的HTML标签。比如WTForm自带的一些Field类比如BooleanField就对应，SubmitField就对应等等。
Validator类。这个类用于验证用户输入的数据的合法性。比如Length验证器可以用于验证输入数据的长度，FileAllowed验证上传文件的类型等等。
另外，flask为了防范csfr(cross-site request forgery)攻击，默认在使用flask-wtf之前要求app一定要设置过secret_key。最简单地可以通过app.config[‘SECRET_KEY’] = 'xxxx’来配置。

常见的Field类

   PasswordField　　   密码字段，自动将输入转化为小黑点
　　DateField　　       文本字段，格式要求为datetime.date一样
　　IntergerField　　   文本字段，格式要求是整数
　　DecimalField　　    文本字段，格式要求和decimal.Decimal一样
　　FloatField　　      文本字段，值是浮点数
　　BooleanField　　    复选框，值为True或者False
　　RadioField　　      一组单选框
　　SelectField　　     下拉列表，需要注意一下的是choices参数确定了下拉选项，
                       但是和HTML中的<select> 标签一样，其是一个tuple组成的列表，
                       可以认为每个tuple的第一项是选项的真正的值，而第二项是alias。
　　MultipleSelectField　　可选多个值的下拉列表

常见的validator类

什么是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两个参数指出数字上限下限，注意参数
            类型是字符串，不是I数里可以设置%(min)s和%(max)s两个格式化部分，来告诉前端
            这个范围到底是多少。其他validator也有这种类似的小技巧，可以参看源码。
　　Optional　　
            无输入值时跳过同字段的其他验证函数
　　Required　　
            必填字段
　　Regexp　　
            用正则表达式验证值，参数regex='正则模式'
　　URL　　
            验证URL，要求正则模式是^[a-z]+://(?P<host>[^/:]+)(?P<port>:[0-9]+)?
            (?P<path>\/.*)?$
　　AnyOf　　
            确保值在可选值列表中。
　　NoneOf　　
            确保值不在可选值列表中

flask-wtf的使用流程

编写forms.py文件，定义一个关于表单的类;(***注意：一定要有提交的按钮);
业务逻辑文件app.py中，
- 实例化表单类; form = RegisterForm()
- 验证表单内容是否提交成功? form.validate_on_submit():
- 获取表单里面的内容(两种方法):
- 通过request对象获取: request.form[‘key值’]；
- 通过form对象获取: form.key值.data
表现逻辑文件wtf.html中:
- 导入wtf模块: {% import “bootstrap/wtf.html” as wtf %}
- 自动生成表单对应的html： {{ wtf.quick_form(form) }}

测试表单的应用案例

form表单：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, \
    RadioField, SelectField, SelectMultipleField
from wtforms.validators import DataRequired, EqualTo, Length, Email, Regexp


class RegisterForm(FlaskForm):
    # StringField <input type='text' name='name' required>
    # PasswordField <input type='password' name='password' required>
    name = StringField(
        label="用户名",
        # 验证: 用户名不能为空的
        validators=[DataRequired(), ]
    )
    password = PasswordField(
        label="密码",
        validators=[
            DataRequired(),
            # 验证密码长度是否为6～8之间， 如果不是， 则报错;
            Length(6, 16, message="密码格式不正确"),
        ]
    )
    repassword = PasswordField(
        "确认密码",
        validators=[
            DataRequired(),
            # 验证当前表单输入的内容和password这个表单输入的内容是否一致， 如果不一致， 报错;
            EqualTo('password', message="密码不一致")

        ]
    )

    email = StringField(
        label="邮箱",
        validators=[
            DataRequired(),
            # 验证当前表单输入的内容是否为一个邮箱地址， 如果不是， 则报错;
            Email(message="邮箱格式错误!")

        ]
    )
    phone = StringField(
        label="电话号码",
        validators=[
            DataRequired(),
            # 验证当前表单输入的电话号码是否符合首位为1，由11位数字组成的正则表达式， 如果不是， 则报错;
            Regexp(r'1\d{10}', message="电话号码格式错误!")
        ]
    )


    # 可以实现单选按钮， 但是不美观，
    # gender = RadioField(
    #     label="性别",
    #     coerce=int,
    #     choices=[(1, "男"), (2, "女")]
    #
    # )

	# 单选按钮
    gender = SelectField(
            label="性别",
            coerce=int,
            choices=[(1, "男"), (2, "女")]
    )

	# 多选按钮
    tech = SelectMultipleField(
        label="擅长领域",
        coerce=int,
        choices=[(1, 'python'), (2, 'linux'), (3, 'java'), (4, 'php'), (5, 'ruby'), (6, 'c++')]
    )

    submit = SubmitField(label="注册")


    """
    # 单选框
       <form>
        
       男:  <input type="radio" name="gender"  value="1">
       女:  <input type="radio" name="gender"  value="2">
        
        </form>
    """

业务逻辑：

@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():
    from forms import RegisterForm
    # 1. 实例化表单， 将来传递到前端， 进行生成对应的html;
    form = RegisterForm()
    # 2. 判断HTTP请求方式， 返回不同的内容
    # if request.method == 'POST':
    #     print(request.form['name'])
    #     return  'post'
	
	# 第一个判断: 是否为post请求? 判断提交的数据是否符合form表单定义的验证?
    if form.validate_on_submit():
        username = request.form['name']
        password = request.form['password']
        gender = request.form['gender']
        tech = request.form['tech']

        # 当所有的信息遍历结束， 都没有发现注册的用户存在， 则将注册的用户添加到服务器， 并跳转登录界面;
        for user in users:
            if user['username'] == username:
                flash(message="用户%s已经存在" % (username))
                return redirect(url_for('wtf'))
        else:
            users.append(dict(username=username, password=password))
            # return redirect('/login/')

            # 出现一个闪现信息;
            flash("用户%s已经注册成功， 请登录....." % (username))
            return redirect(url_for('login'))

    return render_template("wtf.html",
                           form=form)

页面逻辑：

{% extends 'base.html' %}

{#导入模块， 并重命名为wtf#}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %} wtf测试页面{% endblock %}
{% block content %}
    <div class="container" style="margin-top: 50px">
        <div class="col-lg-8 col-lg-offset-2">
            <h1>注册-wtf测试</h1>
            {#   根据后台传递过来的form对象生成对应的html代码;           #}
            {{ wtf.quick_form(form) }}
        </div>
    </div>

{% endblock %}

案例：Flask中邮件发送_qq邮箱

在实现邮件发送之前，需要安装flask-mail模块

发送邮件的时候需要设置什么?

发件人账户
密码
收件人
邮件标题
邮件正文
QQ邮件服务器的域名或者IP;

form表单：

创建发送邮件的表单类，提供给用户操作

class MailForm(FlaskForm):
    # 接收邮件的地址
    toEmails =  TextAreaField(
        label="接收的邮箱地址",
        validators=[DataRequired()],
        # 表单的详细描述， 一般不写
        description="每个邮箱地址之间用逗号分隔"

    )


    toFilename  = SelectField(
        label="邮件内容的类型",
        # "company", 是传递给后台的， "公司简介"是在前端显示的;
        choices =[("company", "公司简介"), ("course", "课程简介")]
    )

    submit = SubmitField(
        label="发送"
    )

页面逻辑：

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

{% block title %} 发送邮件 {% endblock %}

{% block content %}

    <div class="container">
        <div class="col-lg-8 col-lg-offset-2">
            <h1>发送邮件测试案例</h1>
            <hr/>
            {{ wtf.quick_form(form) }}

        </div>
    </div>
{% endblock %}

业务逻辑：

配置发送邮件的相关信息

# 指定邮件服务器的域名或者IP
app.config['MAIL_SERVER'] = 'smtp.qq.com'

# 指定端口， 默认25， 但qq邮箱默认为 端口号465或587；
# 端口号指定为587时会出错，建议使用465
app.config['MAIL_PORT'] = 465
# 指定加密方式为ssl
app.config['MAIL_USE_SSL'] = True
# 指定发送邮件的用户帐号
app.config['MAIL_USERNAME'] = '1602923758'
# 指定邮箱密码
# 密码通过在邮箱的帐号设置中开启POP3/SMTP服务时获取
app.config['MAIL_PASSWORD'] = "xxxxxxxxx"

定义发送邮件的函数

def send_mail(to, subject, template, **kwargs):
    mail = Mail(app)
    # 应用上下文app.app_context(): 将之前Flask创建的app作为参数传入AppContext类中,
    # 用于存储当前app的相关信息;
    # 发送邮件时需要获取app中的相关信息,app_content()相当于桥梁
    with app.app_context():
        # 实例化Message，指定邮件的相关内容
        msg = Message(
        			  # 指定主题
        			  subject=subject,
                      # 发送邮件的邮箱地址
                      sender='1602923758@qq.com',
                      # 接收邮件的邮箱地址，可以是多个地址，但必须是列表
                      recipients=to,
                      # 当同时指定body和html正文时，优先选择发送html，而不发送body
                      # body=render_template(template + '.txt', **kwargs),
                      html=render_template(template + '.html', **kwargs)
                      )

        mail.send(msg)

定义发送邮件的视图函数

@app.route('/mail/', methods=['GET', 'POST'])
def mail():
    # 实例化表单
    form = MailForm()
    if form.validate_on_submit():
        # 获取用户提交的数据;
        toEmails = form.toEmails.data.split(',')
        toFilename = form.toFilename.data
		
		# 异常捕获
        try:
            send_mail(toEmails, "西部开源邮件测试", toFilename)
        except Exception as e:
            flash("邮件发送失败, 失败原因: %s!" %(e))
        else:
            flash("邮件发送成功!")
        return  redirect(url_for('mail'))

    return  render_template('send_mail.html',
                            form = form)