python中flask_bootstrap裝飾網頁的介紹（附程式碼）

這篇文章帶給大家的內容是關於python中flask_bootstrap裝飾網頁的介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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 -%}
nbsp;html>

{%- block html %}
  
    {%- block head %}
    <title>{% block title %}{{title|default}}{% endblock title %}</title>

    {%- block metas %}
    <meta>
    {%- endblock metas %}

    {%- block styles %}
    <!-- Bootstrap -->
    <link>
    {%- endblock styles %}
    {%- endblock head %}
  
  
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    <script></script>
    <script></script>
    {%- endblock scripts %}
    {%- endblock body %}
  
{%- endblock html %}

{% endblock doc -%}

繼承Bootstrap 檔案的基底模版，編寫適用於自己專案的基底範本。

{#自己编写一个基类模板#}
{% extends 'bootstrap/base.html' %}

{% block styles %}
{{ super() }}
    <link>
{% endblock %}
{% block navbar %}
<nav>
    <p>
        <!-- Brand and toggle get grouped for better mobile display -->
        </p>
<p>
            <button>
                <span>Toggle navigation</span>
                <span></span>
                <span></span>
                <span></span>
            </button>
            <a></a>
        </p>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <p>
            </p>
<ul>
                <li><a>首页<span>(current)</span></a></li>
                <li><a>新闻</a></li>
                <li><a>国际</a></li>
                <li><a>国内</a></li>
                <li><a>系统信息</a></li>
                <li><a>登陆用户</a></li>
            </ul>
            <ul>

                {% if 'user' in session %}
                <li><a><span></span>
                       {{ session.user }}</a></li>
                <li><a><span></span>
                       注销 </a></li>


                {% else %}

                <li><a><span></span>
                      登陆</a></li>
                {% endif %}


                <li><a><span></span>
                      注册</a></li>
            </ul>
        <!-- /.navbar-collapse -->
    <!-- /.container-fluid -->
</nav>
{% endblock %}

{% block content %}
{#定义属于自己的block#}
    {% block newcontent %}


    {% endblock %}

    {% block footer %}
<p>


    宇宙大魔王--ZAJ


</p>
{% 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>
{% 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裝飾網頁的介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！