Python之Flask框架应用(三)_Boortstrap与Flask_wtf

#######Flask框架#######

 

 

 

## flask-bootstrap

 

# 如何在flask中使用Bootstrap

        要想在程序中集成Bootstrap,显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展,简化集成的过程。初始化Flask-Bootstrap 之后,就可以在程序中使用一个包含所有Bootstrap 文件的基模板。这个模板利用Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入Bootstrap 的元素。

安装命令:  pip install flask_bootstrap

 

# 如何引用bootstrap的基模板

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

{%block title %}Flask{% endblock %}

这两个块分别表示页面中的导航条和主体内容。

 

# 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 声明

 

# 如何继承原有内容:
        上表中的很多块都是Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2 提供的super() 函数。例如,如果要在衍生模板中添加新的JavaScript 文件,需要这么定义scripts 块:

{% block scripts %}
{{ super() }}

{% endblock %}


 

from flask_bootstrap import Bootstrap

app = Flask(__name__)
app.config['SECRET_KEY'] = random._urandom(24)
bootstrap = Bootstrap(app)

base.html:

{#{ 利用bootstrap基模板 }#}
{% extends "bootstrap/base.html" %}
{# 继承main.html #}
{% block styles %}
    {{ super() }}
    
{% endblock %}

{# 定义的导航条内容 #}
{% block navbar %}
    
{% endblock %}

{# 用户定义页面内容 #}
{% block content %}
    {#  定义属于自己的block  #}
    {% block newcontent %}


    {% endblock %}

    {% block footer %}

        
    {% endblock %}

{% endblock %}

 

 

 

 

## 表单处理flask_wtk

 

-  Flask-WTF理解

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

 

-  表单处理

    在网页中,为了和用户进行信息交互总是不得不出现一些表单。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'来配置。

 

-  常见的field类

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

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

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

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

FloatField                 文本字段,值是浮点数

BooleanField            复选框,值为True或者False

RadioField               一组单选框

SelectField               下拉列表,需要注意一下的是choices参数确定了下拉选项, 但是和HTML中的

login.html:

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}登陆{% endblock %}

{% block newcontent %}
    

登录 没有账号?注册

{{ wtf.quick_form(form) }} {% if message %}

{{ message }}

{% endif %}
{% endblock %}

register.html:

{% extends 'base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}注册{% endblock %}
{% block newcontent %}
    
{{ wtf.quick_form(form) }} {% if message %}

{{ message }}

{% endif %}
{% endblock %}

 

主运行函数run;

from flask import Flask, render_template, redirect, request, abort, url_for, session
from models import isPasswdOk, isUserExist, addUser
from flask_bootstrap import Bootstrap
from forms import LoginForm, RegisterForm

app = Flask(__name__)
app.config['SECRET_KEY'] = random._urandom(24)
bootstrap = Bootstrap(app)



# 用户主页
@app.route('/')
def index():
    return render_template('index.html')


# 用户登陆按钮
@app.route('/login/', methods=['GET', 'POST'])
def login():
    # 实例化LoginForm
    form = LoginForm()
    # 如果是post方法并且表单验证通过的话, 返回True;
    if form.validate_on_submit():
        # 1). 获取用户提交的表单信息
        # print(form.data) 是字典类型, 内容如下:
        # {'user': 'root', 'passwd': 'redhat', 'submit': True }
        user = form.data['user']
        passwd = form.data['passwd']
        # 判断用户名和密码是否正确
        if isPasswdOk(user, passwd):
            # 将用户和密码信息存储到session中
            session['user'] = user
            session['passwd'] = passwd
            # 登陆成功,跳转主页
            return redirect(url_for('index'))
        else:
            # 如果登陆失败,显示错误信息
            return render_template('login.html', form=form, message='用户密码输入有误')
    else:
        return render_template('login.html', form=form)


# 用户注销
@app.route('/logout/')
def logout():
    session.pop('user', None)
    session.pop('passwd', None)
    # None的意思是如果字典里没有这个key值,返回的value值是None
    return redirect(url_for('index'))


# 用户注册 get,post
@app.route('/register/', methods=['GET', 'POST'])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
        user = form.data['user']
        email = form.data['email']
        phone = form.data['phone']
        passwd = form.data['passwd']
        repasswd = form.data['repasswd']
        if isUserExist(user):
            message = "用户已经存在"
            return render_template('register.html', form=form, message=message)
        else:
            # 如果遍历所有的字典, 没有发现与之前的用户名冲突;
            # 将用户信息加入列表userInfo中;
            addUser(user, passwd)
            return redirect(url_for('login'))
    else:
        return render_template('register.html', form=form)


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

运行结果:

Python之Flask框架应用(三)_Boortstrap与Flask_wtf_第1张图片

Python之Flask框架应用(三)_Boortstrap与Flask_wtf_第2张图片

 

 

 

 

 

#######################################

 

 

 

你可能感兴趣的:(学习)