Introduction à la décoration de pages Web flask_bootstrap en python (avec code)-Tutoriel Python-php.cn

Cet article vous présente une introduction à la décoration de pages Web flask_bootstrap en Python (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

flask_bootstrap

Bootstrap est un framework open source développé par Twitter qui fournit des composants d'interface utilisateur pour créer des pages Web propres et attrayantes compatibles avec tous les navigateurs Web modernes <.>Bootstrap est un framework côté client, il n'y a donc pas d'implication directe du serveur. Tout ce que le serveur doit faire est de fournir une réponse HTML qui fait référence aux feuilles de style en cascade (CSS) et aux fichiers JavaScript de Bootstrap, et d'instancier les composants requis dans le code HTML, CSS et JavaScript. L'endroit idéal pour effectuer ces opérations est le modèle.
Flask-Bootstrap peut intégrer Bootstrap dans le programme

Installation :

pip install flask-bootstrap

Copier après la connexion

Utilisation :

from flask_bootstrap import Bootstrap
......
bootstrap = Bootstrap(app)

Copier après la connexion

Héritage des fichiers html

Après avoir initialisé Flask-Bootstrap, vous pouvez utiliser un modèle de base qui contient tous les fichiers Bootstrap de votre programme. Ce modèle utilise le mécanisme d'héritage de modèle de Jinja2 pour permettre au programme d'étendre un modèle de base avec une structure de page de base, qui inclut des éléments utilisés pour introduire Bootstrap.

Document base.html de bootstrap :

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

Copier après la connexion

Héritez du modèle de base du fichier Bootstrap et écrivez un modèle de base adapté à votre propre projet.

{#自己编写一个基类模板#}
{% 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 %}

Copier après la connexion

La directive extends dans Jinja2 importe bootstrap/base.html depuis Flask-Bootstrap pour obtenir l'héritage de modèle. Le modèle de base de Flask-Bootstrap fournit un cadre de page Web qui importe tous les fichiers CSS et JavaScript dans Bootstrap.

L'exemple ci-dessus redéfinit trois blocs, qui sont la réécriture des styles, de la barre de navigation et du contenu de bootstrap/base.html. Ces blocs sont fournis par le modèle de base et peuvent être redéfinis dans le modèle dérivé.

Si le programme doit ajouter un nouveau contenu à un bloc qui a déjà du contenu, il doit utiliser la fonction super() fournie par Jinja2. Par exemple, si vous souhaitez ajouter un nouveau fichier CSS au modèle dérivé, vous devez le définir comme ceci :

{% block styles %}
{{ super() }}
    <link>
{% endblock %}

Copier après la connexion

Écrivez un projet FLASK en utilisant flask_bootstrap et flask_wtf

Exigences :

Réaliser l'affichage de la page d'accueil, l'affichage de la page de connexion, l'affichage de la page d'inscription et la sortie de l'utilisateur (déconnexion). Et seuls les utilisateurs existant dans la base de données peuvent se connecter à la page Web. L'interaction des données se fait principalement via des formulaires. Actuellement, pour l'enregistrement des utilisateurs, la base de données n'est pas renvoyée.

模板文件有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

Copier après la connexion

Lien du fichier modèle

链接：https://pan.baidu.com/s/1Uov-i8b2fZMr9fOe32tcgg 
提取码：jrbs

Copier après la connexion

# 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()。

Copier après la connexion

# 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'))

Copier après la connexion

# 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='注册'
    )

Copier après la connexion

# zaj_config.py , 存放数据库类
class DB:
    HOST = 'localhost'
    USER= 'root'
    PASSWD = 'sheen'
    PORT = 3306
    DBNAME = 'zaj_form'

Copier après la connexion

Assurez-vous qu'il y a déjà un utilisateur de table dans la base de données zaj_form, l'utilisateur a le nom des éléments, passwd, ajoutez User name= 'python', passwd='1234567'

Page d'accueil :

Introduction à la décoration de pages Web flask_bootstrap en python (avec code)