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'