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('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>
{{ 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>
</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装饰网页的更多相关文章
- python大佬养成计划----HTML网页设计（序列）
序列化标签 1.有序标签--ol和li 有序列表标签是<ol>,是一个双标签.在每一个列表项目前要使用<li>标签.<ol>标签的形式是带有前后顺序之分的编号.如果 ...
- python大佬养成计划----基于flask_sqlalchemy的网页显示数据库信息
网页显示数据库信息 使用我们刚学习的flask_sqlalchemy,在网页中显示数据库表中的数据.在开始运行程序前,确保数据库中执行过创建表和创建用户的操作,详见链接描述. # 模板文件templa ...
- python大佬养成计划----HTML网页设计（表格）
制作网页时,要合理规划网页布局.比如,在网页中添加一个表格,可分为上.中.下三部分,上部存放网页标题或LOGO图片,中间部分是整个网页的主体内容,底部就是相关制作信息.此外,单元格里还可再添加单元格, ...
- python大佬养成计划----HTML DOM
什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- python连续爬取多个网页的图片分别保存到不同的文件夹
python连续爬取多个网页的图片分别保存到不同的文件夹 作者:vpoet mail:vpoet_sir@163.com #coding:utf-8 import urllib import ur ...
- 简学Python第四章__装饰器、迭代器、列表生成式
Python第四章__装饰器.迭代器 欢迎加入Linux_Python学习群 群号:478616847 目录: 列表生成式 生成器 迭代器 单层装饰器(无参) 多层装饰器(有参) 冒泡算法 代码开发 ...
- 初学 Python（十五）——装饰器
初学 Python(十五)--装饰器 初学 Python,主要整理一些学习到的知识点,这次是生成器. #-*- coding:utf-8 -*- import functools def curren ...
- Python核心团队计划2020年停止支持Python2，NumPy宣布停止支持计划表
Python核心团队计划在2020年停止支持Python 2.NumPy项目自2010年以来一直支持Python 2和Python 3,并且发现支持Python 2对我们有限的资源增加了负担:因此,我 ...
随机推荐
- vue项目npm run dev 报错error in ./src/main.js Module build failed: Error: Cannot find module 'babel-plugin-syntax-jsx'
问题: vue 项目npm run dev运行时报错,如下图: 原因: 缺少相应的组件 解决办法: 安装相应组件: npm install babel-plugin-syntax-jsx --sav ...
- 获取HTML中所有图片的 URL
/// <summary> /// 获取HTML中所有图片的 URL /// </summary> /// <param name="strHtml" ...
- MM32F0020 UART1中断接收
目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1和NVIC中断 3.编写MM32F0020 UART1中断接收函数 4.编写MM32F0020 UART1发送字节和ASCI ...
- 【python画圆】pip安装库时出现Read timed out.解决办法
昨天第一次用python画圆,当时并没有安装numpy库(导入数据包)和matplotlib库(导入图形包),于是尝试用pip安装库 首先,我先更新了pip,如下图: 顺便附上成功截图: 然后安装nu ...
- 将ISO镜像文件制作成USB disk
制作USB Live盘有Universal USB Installer.UNetbootin.WinSetupFromUSB.LinuxLive USB Creator.YUMI(Your Unive ...
- nginx lua模块常用的指令
lua_code_cache 语法:lua_code_cache on | off 默认: on 适用上下文:http.server.location.location if 这个指令是指定是否开启l ...
- tensorflow源码解析之framework-shape_inference
目录 什么是形状推断 InferenceContext 关系图 涉及的文件 迭代记录 1. 什么是形状推断 前面我们讲到op的时候,提到了操作的注册器OpRegistry,并且提到,其中注册的数据是一 ...
- Java实例变量、局部变量、静态变量
实例变量(成员变量) 成员变量定义在类中,在整个类中都可以被访问,但在方法.构造方法和语句块之外 当一个对象被实例化之后,每个实例变量的值就跟着确定 实例变量在对象创建的时候创建,在对象被销毁时销毁 ...
- Hadoop之Mapreduce 程序
package com.gylhaut.hadoop.senior.mapreduce; import java.io.IOException; import java.util.StringToke ...
- Linux内核升级修复系统漏洞-RHSA-2017:2930-Important: kernel security and bug fix update
公司使用的阿里云服务器(Centos7.4 x86_64bit)内核版本为:3.10.0-693.21.1.el7.x86_64, 2019年3月4日 02:07:58通过云盾安骑士-->漏洞管 ...