cari
Rumahpembangunan bahagian belakangTutorial Pythonpython中flask_bootstrap装饰网页的介绍(附代码)
python中flask_bootstrap装饰网页的介绍(附代码)Nov 15, 2018 pm 02:51 PM
html5mysqlpythonwindows

本篇文章给大家带来的内容是关于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 -%}
<!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(&#39;css/bootstrap.css&#39;, cdn=&#39;bootstrap&#39;)}}" 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(&#39;jquery.js&#39;, cdn=&#39;jquery&#39;)}}"></script>
    <script src="{{bootstrap_find_resource(&#39;js/bootstrap.js&#39;, cdn=&#39;bootstrap&#39;)}}"></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">
    <p class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <p 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>
        </p>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <p 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>
                       {{ session.user }}</a></li>
                <li><a href="/logout/"><span class="glyphicon glyphicon-log-in"></span>
                       注销 </a></li>


                {% else %}

                <li><a href="/login/"><span class="glyphicon glyphicon-log-in"></span>
                      登陆</a></li>
                {% endif %}


                <li><a href="/register/"><span class="glyphicon glyphicon-log-out"></span>
                      注册</a></li>
            </ul>
        </p><!-- /.navbar-collapse -->
    </p><!-- /.container-fluid -->
</nav>
{% endblock %}

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


    {% endblock %}

    {% block footer %}
<p class="footer">


    宇宙大魔王--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 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’

主页:

2558889756-5bd7cc1160f58_articlex.png

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

2702218265-5bd7cc78df53b_articlex.png

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

2703436475-5bd7ccf05138b_articlex.png

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

2995964793-5bd7cd5be57d6_articlex.png

Atas ialah kandungan terperinci python中flask_bootstrap装饰网页的介绍(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
c盘的users是什么文件夹?可以删除吗?c盘的users是什么文件夹?可以删除吗?Nov 10, 2022 pm 06:20 PM

c盘的users是用户文件夹,主要存放用户的各项配置文件。users文件夹是windows系统的重要文件夹,不能随意删除;它保存了很多用户信息,一旦删除会造成数据丢失,严重的话会导致系统无法启动。

启动任务管理器的三个快捷键是什么启动任务管理器的三个快捷键是什么Sep 21, 2022 pm 02:47 PM

启动任务管理器的三个快捷键是:1、“Ctrl+Shift+Esc”,可直接打开任务管理器;2、“Ctrl+Alt+Delete”,会进入“安全选项”的锁定界面,选择“任务管理器”,即可以打开任务管理器;3、“Win+R”,会打开“运行”窗口,输入“taskmgr”命令,点击“确定”即可调出任务管理器。

window下报错“php不是内部或外部命令”怎么解决window下报错“php不是内部或外部命令”怎么解决Mar 23, 2023 pm 02:11 PM

对于刚刚开始使用PHP的用户来说,如果在Windows操作系统中遇到了“php不是内部或外部命令”的问题,可能会感到困惑。这个错误通常是由于系统无法识别PHP的路径导致的。在本文中,我将为您提供一些可能会导致这个问题的原因和解决方法,以帮助您快速解决这个问题。

微软的pin码是什么微软的pin码是什么Oct 14, 2022 pm 03:16 PM

PIN码是Windows系统为了方便用户本地登录而独立于window账户密码的快捷登录密码,是Windows系统新添加的一套本地密码策略;在用户登陆了Microsoft账户后就可以设置PIN来代替账户密码,不仅提高安全性,而且也可以让很多和账户相关的操作变得更加方便。PIN码只能通过本机登录,无法远程使用,所以不用担心PIN码被盗。

win10自带的onenote是啥版本win10自带的onenote是啥版本Sep 09, 2022 am 10:56 AM

win10自带的onenote是UWP版本;onenote是一套用于自由形式的信息获取以及多用户协作工具,而UWP版本是“Universal Windows Platform”的简称,表示windows通用应用平台,不是为特定的终端设计的,而是针对使用windows系统的各种平台。

win10为什么没有“扫雷”游戏了win10为什么没有“扫雷”游戏了Aug 17, 2022 pm 03:37 PM

因为win10系统是不自带扫雷游戏的,需要用户自行手动安装。安装步骤:1、点击打开“开始菜单”;2、在打开的菜单中,找到“Microsoft Store”应用商店,并点击进入;3、在应用商店主页的搜索框中,搜索“minesweeper”;4、在搜索结果中,点击选择需要下载的“扫雷”游戏;5、点击“获取”按钮,等待获取完毕后自动完成安装游戏即可。

在windows中鼠标指针呈四箭头时一般表示什么在windows中鼠标指针呈四箭头时一般表示什么Dec 17, 2020 am 11:39 AM

在windows中鼠标指针呈四箭头时一般表示选中对象可以上、下、左、右移动。在Windows中鼠标指针首次用不同的指针来表示不同的状态,如系统忙、移动中、拖放中;在Windows中使用的鼠标指针文件还被称为“光标文件”或“动态光标文件”。

windows操作系统的特点包括什么windows操作系统的特点包括什么Sep 28, 2020 pm 12:02 PM

windows操作系统的特点包括:1、图形界面;直观高效的面向对象的图形用户界面,易学易用。2、多任务;允许用户同时运行多个应用程序,或在一个程序中同时做几件事情。3、即插即用。4、出色的多媒体功能。5、对内存的自动化管理。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa