flask_bootstrap

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

Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了 Bootstrap 层叠样式表（CSS）和 JavaScript 文件的 HTML 响应， 并且 HTML、CSS 和 JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模版。

Flask-Bootstrap 可以在程序中集成 Bootstrap

安装：

pip install flask-bootstrap

使用：

from flask_bootstrap import Bootstrap

......

bootstrap = Bootstrap(app)

html文件的继承

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

bootstrap的base.html文档：

{% block doc -%}

<!DOCTYPE html>

<html{% block html_attribs %}{% endblock html_attribs %}>

{%- block html %}

  <head>

    {%- block head %}

    <title>{% block title %}{{title|default}}{% endblock title %}</title>

    {%- block metas %}

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {%- endblock metas %}

    {%- block styles %}

    <!-- Bootstrap -->

    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">

    {%- endblock styles %}

    {%- endblock head %}

  </head>

  <body{% block body_attribs %}{% endblock body_attribs %}>

    {% block body -%}

    {% block navbar %}

    {%- endblock navbar %}

    {% block content -%}

    {%- endblock content %}

    {% block scripts %}

    <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>

{%- endblock html %}

</html>

{% endblock doc -%}

继承Bootstrap 文件的基模版，编写适用于自己项目的基模板。

{#自己编写一个基类模板#}

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

{% block styles %}

{{ 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="/sysinfo/">系统信息</a></li>

                <li><a href="#">登陆用户</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                {% if 'user' in session %}

                <li><a href="login.html"><span class="glyphicon glyphicon-user"></span>

                    &nbsp;&nbsp; {{ session.user }}</a></li>

                <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 %}

{#定义属于自己的block#}

    {% block newcontent %}

    {% endblock %}

    {% block footer %}

<div class="footer">

    宇宙大魔王--ZAJ

</div>

{% endblock %}

{% endblock %}

Jinja2 中的 extends 指令从 Flask-Bootstrap 中导入 bootstrap/base.html，从而实现模版继承。Flask-Bootstrap 中的基模版提供了一个网页框架，引入了 Bootstrap 中的所有 CSS 和 JavaScript 文件。

上面这个示例重新定义了3个块，分别是对 bootstrap/base.html的styles、navbar和content的改写。这些块都是基模版提供的，可在衍生模版中重新定义。

如果程序需要向已经有内容的块中添加新内容，必须使用 Jinja2 提供的 super() 函数。例如，如果要在衍生模版中添加新的 CSS 文件，需要这么定义：

{% block styles %}

{{ super() }}

    <link rel="stylesheet" href="../static/css/main.css">

{% endblock %}

使flask_bootstrap和flask_wtf编写一个FLASK项目

要求:

实现网页主页显示、登陆页面显示、注册页面显示、用户退出（注销）。并且只有数据库中存在用户可以登陆网页。主要通过表单来实现数据交互。目前，对于用户注册，不返回数据库。

实现

模板文件有templates/base.html , templates/index.html , templates/login.html , templates/register.html

Py文件有 zaj_run.py , zaj_ forms.py , zaj_modles.py , zaj_config.py

模板文件链接

链接：https://pan.baidu.com/s/1Uov-i8b2fZMr9fOe32tcgg

提取码：jrbs

# zaj_run.py

from flask import Flask,render_template,session,redirect,url_for

from flask_bootstrap import Bootstrap

from zaj_forms import LoginForm,RegisterFrom

from zaj_models import isPasswdOk

import  functools

app = Flask(__name__)

app.config['SECRET_KEY'] = 'SHEEN'

bootstrap = Bootstrap(app)

def is_login(f):

    """判断用户是否登陆的装饰器"""

    @functools.wraps(f)

    def wrapper(*args, **kwargs):

        # 主函数代码里面， 如果登陆， session加入user， passwd两个key值；

        # 主函数代码里面， 如果注销， session删除user， passwd两个key值；

        # 如果没有登陆成功， 则跳转到登陆界面

        if 'user' not in session:

            return  redirect('/login/')

        # 如果用户是登陆状态， 则访问哪个路由， 就执行哪个路由对应的视图函数；

        return  f(*args, **kwargs)

    return  wrapper

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/login/',methods=['GET','POST'])

def login():

    # session.pop('user',None)

    # session.pop('passwd',None)

    form  = LoginForm()

    print(form.data)    #{'user': 'root123', 'passwd': 'sheen123', 'submit': True,....}

    if form.validate_on_submit():

        user = form.data['user']

        passwd = form.data['passwd']

        if isPasswdOk(user,passwd):

            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('/register/',methods=['GET','POST'])

def register():

    form = RegisterFrom()

    # 如果是post方法并且表单验证通过的话， 返回True;

    if form.validate_on_submit():

        # 用户提交的表单信息

        print(form.data)

        return 'ok'

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

@app.route('/logout/')

def logout():

    session.pop('user', None)

    session.pop('passwd', None)

    # 注销即删除用户的session信息， 注销成功， 跳转到首页;

    return  redirect(url_for('index'))

    # return  redirect('/')

if __name__ == '__main__':

    app.run( port = 8900)

# 报错1：TypeError: __init__() takes from 1 to 2 positional arguments but 3 were given

# 解决：把输入表单LoginForm,RegisterFrom中的Required去掉

# 问题2：每次重新运行程序，都会显示root123用户已登陆，即session里面有数据

# 解决：添加判别session内容的函数is_login()。

# zaj_models.py，存放数据库操作

import pymysql

from zaj_config import  DB

# 1. 创建连接

conn  = pymysql.connect(

        host=DB.HOST,

        user = DB.USER,

        passwd = DB.PASSWD,

        port = DB.PORT,

        db = DB.DBNAME,

        )

cur = conn.cursor()

def isUserExist(username):

    """判断用户名是否存在"""

    sqli = "select * from user where name='%s'" %(username)

    res = cur.execute(sqli)

    # res返回的是sql语句查询结果的个数；

    #  如果为0， 没有查到。

    if res == 0:

        return  False

    else:

        return  True

def isPasswdOk(username, passwd):

    sqli = "select * from user where name='%s' and passwd='%s'" %(

        username, passwd)

    res = cur.execute(sqli)

    if res == 0 :

        return  False

    else:

        return  True

def addUser(username, passwd):

    """用户注册时， 添加信息到数据库中"""

    sqli = "insert into user(name, passwd) values('%s', '%s')" %(

        username, passwd)

    try:

        res = cur.execute(sqli)

        conn.commit()

    except Exception as e:

        conn.rollback()

        return e

#

# cur.close()

# conn.close()

if __name__ == "__main__":

    addUser('root', 'root')

    print(isUserExist('root'))

    print(isPasswdOk('root', 'root'))

# zaj_forms.py,存放表单操作

from flask_wtf import FlaskForm

# 每个Web表单都由一个继承自FlaskForm的类表示

from wtforms import StringField,PasswordField,SubmitField

# StringField类表示的是属性为type="text"的<input>元素。

# SubmitField类表示的是是属性为type="submit"的<input>元素

#WTForms内建的验证函数validators,而且是以数组形式，正对应了前面说的一个字段可以有一个或者多个验证函数

from wtforms.validators import Length, Required, EqualTo, Regexp,Email

class LoginForm(FlaskForm):

    user = StringField(

        label='用户名',

        validators=[

            Length(5,13)

        ]

    )

    passwd = PasswordField(

        label='密码',

        validators=[

            Length(6,12),

        ]

    )

    submit = SubmitField(

        label='登陆'

    )

class RegisterFrom(FlaskForm):

    user = StringField(

        label='用户名/邮箱/手机号',

        validators=[

            Length(5,13)

        ]

    )

    passwd = PasswordField(

        label='密码',

        validators=[

            Length(6,12),

        ]

    )

    repasswd = PasswordField(

        label='确认密码',

        validators=[

            EqualTo('passwd',message='密码不一致！')

        ]

    )

    phone = StringField(

        label='电话号码',

        validators=[

            Regexp(r'1\d{10}', message='手机号码格式错误')

        ]

    )

    email = StringField(

        label='邮箱',

        validators=[

            Email(message='邮箱格式错误！')

        ]

    )

    submit = SubmitField(

        label='注册'

    )

# zaj_config.py , 存放数据库类

class DB:

    HOST = 'localhost'

    USER= 'root'

    PASSWD = 'sheen'

    PORT = 3306

    DBNAME = 'zaj_form'

确保数据库zaj_form中已有表user，user有元素name,passwd，添加用户name= ‘python’ , passwd=’1234567’
主页：

登陆之后，自动跳转主页，显示session的缓存。

当注册表单某一项不满足程序定义的规则时

当注册成功时，返回'OK'

巴特西

python大佬养成计划----flask_bootstrap装饰网页

flask_bootstrap

html文件的继承

使flask_bootstrap和flask_wtf编写一个FLASK项目

最新文章

热门文章