【百度云搜索趟径，搜各種資料:http://www.81ad.cn】
Flask 構(gòu)建微電影視頻網(wǎng)站
已上線演示地址: http://movie.tbquan.cn
管理員登錄
-
app/__init__.py中創(chuàng)建db對象（將以前的app/models.py的db對象移動過去） -
app/models.py中導(dǎo)入db對象 -
app/admin/forms.py中定義表單驗證功能瘪吏，需要出啊關(guān)鍵表單：LoginForm -
app/templates/admin/login.html中使用表單字段、信息驗證蜗巧、消息閃現(xiàn) -
app/admin/views.py中l(wèi)ogin視圖處理登錄請求肪虎，將登陸信息保存會話 -
app/admin.views.py中增加登錄裝飾器，然后對其他視圖進行訪問控制
優(yōu)化代碼結(jié)構(gòu)
將models.py中的db對象移動到app/__init__.py中
BLOG_20181108_214824_84
app/init.py中修改
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__) # 創(chuàng)建app對象
app.debug = True # 開啟調(diào)試模式
# app.config["SQLALCHEMY_DATABASE_URI"] = "mysql+pymysql://root:root@127.0.0.1:3306/movie" # 定義數(shù)據(jù)庫連接惧蛹，傳入連接扇救，默認(rèn)端口3306，可不寫
app.config["SQLALCHEMY_DATABASE_URI"] = "mysql+mysqlconnector://root:root@127.0.0.1:3306/movie"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True
# 定義db對象香嗓，實例化SQLAlchemy迅腔，傳入app對象
db = SQLAlchemy(app)
from app.home import home as home_blueprint
from app.admin import admin as admin_blueprint
# 注冊藍圖
app.register_blueprint(home_blueprint)
app.register_blueprint(admin_blueprint, url_prefix="/admin")
app/models.py中導(dǎo)入db對象，原來的app配置就不需要了
from app import db
# 靠娱。沧烈。。
最終代碼結(jié)構(gòu)如下
BLOG_20181108_214853_38
添加全局404頁面
在app/templates/下創(chuàng)建404.html
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>消失在宇宙星空中的404頁面</title>
<link href="{{ url_for('static', filename='404/404.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 代碼 開始 -->
<div class="fullScreen" id="fullScreen">
<img class="rotating" src="{{ url_for('static', filename='404/spaceman.svg') }}">
<div class="pagenotfound-text">
<h1>迷失在太空中像云！</h1>
<h2><a href="#">返回首頁</a></h2>
</div>
<canvas id="canvas2d"></canvas>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='404/404.js') }}"></script>
<!-- 代碼 結(jié)束 -->
</body>
</html>
在app/init.py中添加404視圖
# 添加全局404頁面
@app.errorhandler(404)
def page_not_found(error):
return render_template('404.html'), 404
創(chuàng)建管理員登錄表單forms.py
修改app/admin/forms.py
后臺登陸需要驗證賬號锌雀，密碼
安裝flask表單庫
> pip install flask-wtf
安裝的版本為 WTForms-2.2.1 flask-wtf-0.14.2
創(chuàng)建登錄表單類
app/admin/forms.py
from flask_wtf import FlaskForm # 表單基類
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired
class LoginFrom(FlaskForm):
"""管理員登錄表單"""
account = StringField(
label='賬號',
validators=[
DataRequired('請輸入賬號！')
],
description='賬號',
render_kw={
'class': "form-control",
'placeholder': "請輸入賬號",
'required': "required"
}
)
pwd = PasswordField(
label='密碼',
validators=[
DataRequired('請輸入密碼迅诬！')
],
description='密碼',
render_kw={
'class': "form-control",
'placeholder': "請輸入密碼",
'required': "required"
}
)
submit = SubmitField(
label='登錄',
render_kw={
'class': "btn btn-primary btn-block btn-flat"
}
)
后臺login()引入表單
from app.admin.forms import LoginFrom
@admin.route("/login/")
def login():
form = LoginFrom()
return render_template('admin/login.html', form=form)
修改后臺login.html頁面的表單
上方為以前的進行注釋腋逆，下方為表單
{#<input name="user" type="text" class="form-control" placeholder="請輸入賬號！">#}
{{ form.account }}
{#<input name="pwd" type="password" class="form-control" placeholder="請輸入密碼侈贷！">#}
{{ form.pwd }}
{#<a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登錄</a>#}
{{ form.submit }}
訪問 http://127.0.0.1:5000/admin/login/ 提示缺少CSRF
BLOG_20181108_214907_36
需要進行跨站偽裝登錄驗證惩歉，通過查閱資料說明后，需要在html的form中添加{{ form.csrf_token }}字段
https://flask-wtf.readthedocs.io/en/latest/csrf.html
CSRF保護需要一個密鑰來安全地對令牌進行簽名俏蛮。默認(rèn)情況下撑蚌，這將使用Flask應(yīng)用程序的SECRET_KEY。如果想使用單獨的令牌搏屑，可以設(shè)置WTF_CSRF_SECRET_KEY争涌。
這兒直接修改app/__init__.py給app添加SECRET_KEY。
添加SECRET_KEY
先在終端模擬一個隨機的字段辣恋，或者自己隨便定義就行
import uuid
uuid.uuid4().hex
'b1b7ed6af47d4031acbdeb420658ba84'
修改app/__init__.py
# 亮垫。解幼。。補充配置
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True
app.config['SECRET_KEY'] = 'b1b7ed6af47d4031acbdeb420658ba84'
# 定義db對象包警，實例化SQLAlchemy撵摆，傳入app對象
db = SQLAlchemy(app)
# 。害晦。特铝。
login中添加csrf_token
在表單中添加{{ form.csrf_token }}
<form action="" method="post" id="form-data">
<div class="form-group has-feedback">
{#<input name="user" type="text" class="form-control" placeholder="請輸入賬號！">#}
{{ form.account }}
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
<div class="col-md-12" id="input_user"></div>
</div>
<div class="form-group has-feedback">
{#<input name="pwd" type="password" class="form-control" placeholder="請輸入密碼壹瘟！">#}
{{ form.pwd }}
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<div class="col-md-12" id="input_pwd"></div>
</div>
{{ form.csrf_token }}
<div class="row">
<div class="col-xs-8">
</div>
<div class="col-xs-4">
{#<a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登錄</a>#}
{{ form.submit }}
</div>
</div>
</form>
BLOG_20181108_214952_79
視圖中處理登錄提交的表單
有需要處理post提交的數(shù)據(jù)鲫剿，需要指定處理的模式，包含get和post
@admin.route("/login/", methods=['GET', 'POST'])
def login():
form = LoginFrom()
if form.validate_on_submit():
# 提交的時候驗證表單
data = form.data # 獲取表單的數(shù)據(jù)
print(data)
return render_template('admin/login.html', form=form)
可以得到值：{'account': 'user', 'pwd': 'password', 'submit': True, 'csrf_token': 'ImFkMzA0OTZiMWYxZGVkMjVhNmEyZmIzMDAwNGIwMjg2MjljZGY4ZGYi.DqnJxg.MpNuyswOQp-HdRgeJ26Q3X7aVAg'}
在forms.py中進行提交數(shù)據(jù)驗證
驗證用戶輸入的賬號稻轨，然后通過查詢Admin數(shù)據(jù)庫灵莲，如果查到的集合數(shù)量為0，則表明賬號不存在殴俱，則向前端拋出ValidationError政冻。
前端通過遍歷account.errors來獲取里面的錯誤信息，同樣线欲，密碼錯誤信息也做同樣的操作明场。
{% for err in form.account.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}
{% for err in form.pwd.errors %}
<div class="col-md-12" id="input_pwd" style="color: red">{{ err }}</div>
{% endfor %}
from wtforms.validators import DataRequired, ValidationError
from app.models import Admin
class LoginFrom(FlaskForm):
"""管理員登錄表單"""
account = StringField(
label='賬號',
validators=[
DataRequired('請輸入賬號！')
],
description='賬號',
render_kw={
'class': "form-control",
'placeholder': "請輸入賬號",
'required': "required"
}
)
pwd = PasswordField(
label='密碼',
validators=[
DataRequired('請輸入密碼李丰！')
],
description='密碼',
render_kw={
'class': "form-control",
'placeholder': "請輸入密碼",
'required': "required"
}
)
submit = SubmitField(
label='登錄',
render_kw={
'class': "btn btn-primary btn-block btn-flat"
}
)
def validate_account(self, field):
"""從Admin數(shù)據(jù)庫中苦锨，檢測賬號是否存在，如果不存在則在account.errors中添加錯誤信息"""
account = field.data
admin_num = Admin.query.filter_by(name=account).count()
if admin_num == 0:
raise ValidationError('賬號不存在')
當(dāng)輸入的用戶不存在時趴泌，會提示賬號不存在
BLOG_20181108_215010_91
在Admin的模型中驗證密碼是否正確
修改app/views.py中的Admin模型舟舒，添加密碼驗證模塊
# 定義管理員模型
class Admin(db.Model):
# 。嗜憔。秃励。
def check_pwd(self, input_pwd):
"""驗證密碼是否正確，直接將hash密碼和輸入的密碼進行比較痹筛，如果相同則莺治，返回True"""
from werkzeug.security import check_password_hash
return check_password_hash(self.pwd, input_pwd)
修改視圖中邏輯密碼錯誤提示
當(dāng)用戶提交表單后，從Admin數(shù)據(jù)庫中查詢到該登錄管理員帚稠，然后檢查從前端獲取的密碼是否正確
- 如果密碼正確，就需要把賬號保存在session中床佳，然后跳轉(zhuǎn)到url參數(shù)的next滋早，或者是跳轉(zhuǎn)到后臺的首頁
- 如果密碼錯誤，就進行錯誤信息的返回砌们，使用flash消息閃現(xiàn)杆麸，前端使用
get_flashed_messages()來獲取錯誤信息
@admin.route("/login/", methods=['GET', 'POST'])
def login():
form = LoginFrom()
if form.validate_on_submit():
# 提交的時候驗證表單
data = form.data # 獲取表單的數(shù)據(jù)
# print(data)
login_admin = Admin.query.filter_by(name=data['account']).first()
if not login_admin.check_pwd(data['pwd']):
# 判斷密碼錯誤搁进，然后將錯誤信息返回，使用flash用于消息閃現(xiàn)
flash('密碼錯誤昔头！')
return redirect(url_for('admin.login'))
# 如果密碼正確饼问，session中添加賬號記錄，然后跳轉(zhuǎn)到request中的next揭斧，或者是跳轉(zhuǎn)到后臺的首頁
session['login_admin'] = data['account']
return redirect(request.args.get('next') or url_for('admin.index'))
return render_template('admin/login.html', form=form)
模板login.html中獲取flash的內(nèi)容
修改login.html莱革，使用get_flashed_messages()來獲取flash錯誤信息
{% for msg in get_flashed_messages() %}
<p class="login-box-msg" style="color: red">{{ msg }}</p>
{% endfor %}
當(dāng)用戶輸入一個數(shù)據(jù)庫中存在的賬號，但密碼錯誤時讹开，會彈出密碼錯誤的提示
BLOG_20181108_215051_33
完成后login.html表單代碼
<div class="login-box-body">
{% for msg in get_flashed_messages() %}
<p class="login-box-msg" style="color: red">{{ msg }}</p>
{% endfor %}
<form action="" method="post" id="form-data">
<div class="form-group has-feedback">
{#<input name="user" type="text" class="form-control" placeholder="請輸入賬號盅视！">#}
{{ form.account }}
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
{% for err in form.account.errors %}
<div class="col-md-12" id="input_user" style="color: red">{{ err }}</div>
{% endfor %}
</div>
<div class="form-group has-feedback">
{#<input name="pwd" type="password" class="form-control" placeholder="請輸入密碼！">#}
{{ form.pwd }}
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
{% for err in form.pwd.errors %}
<div class="col-md-12" id="input_pwd" style="color: red">{{ err }}</div>
{% endfor %}
</div>
{{ form.csrf_token }}
<div class="row">
<div class="col-xs-8">
</div>
<div class="col-xs-4">
{#<a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登錄</a>#}
{{ form.submit }}
</div>
</div>
</form>
</div>
管理員退出
修改app/views.py中的logout函數(shù)旦万，當(dāng)用戶點擊退出后闹击，則刪除該登錄賬號
@admin.route("/logout/")
def logout():
session.pop('login_admin', None) # 刪除session中的登錄賬號
return redirect(url_for("admin.login"))
使用裝飾器進行訪問控制
對于后臺的很多視圖，是不允許不登陸就能訪問的成艘，這時候需要使用裝飾器來限制對這些視圖的訪問權(quán)限
使用url_for('admin.login', next=request.url)可以指定next下一跳的地址
在app/views.py中添加
from functools import wraps
def admin_login_require(func):
@wraps(func)
def decorated_function(*args, **kwargs):
if session.get('login_admin', None) is None:
# 如果session中未找到該鍵赏半，則用戶需要登錄
return redirect(url_for('admin.login', next=request.url))
return func(*args, **kwargs)
return decorated_function
然后將后臺視圖中除了login()以外的所有所圖都加上登錄要求@admin_login_require，類似如下
@admin.route("/")
@admin_login_require
def index():
return render_template('admin/index.html')
例如當(dāng)在用戶直接訪問 http://127.0.0.1:5000/admin/ 的時候淆两，如果沒有登錄除破，則會直接跳轉(zhuǎn)到 http://127.0.0.1:5000/admin/login/?next=http%3A%2F%2F127.0.0.1%3A5000%2Fadmin%2F 這個url的登錄頁面，輸入正確的帳密后琼腔，成功返回 http://127.0.0.1:5000/admin/ 頁面
