讀取正确的賬号資訊：
攔截器捕獲全局使用者登入資訊：
首頁傳遞current_user傳遞 使用者資訊
修改模闆動态讀取資料：
修改後可以看到資訊：
設配所有頁面資料讀取：
建立Helper.py檔案：
from flask import g,render_template
'''
統一渲染方法
'''
def ips_render(template, context = {}):
if 'current_user' in g:
context['current_user'] = g.current_user
return render_template(template, **context) 修改
index.py
# -*- coding: utf-8 -*-
from flask import Blueprint,g
from common.libs.Helper import ops_render
route_index = Blueprint( 'index_page',__name__ )
@route_index.route("/")
def index():
current_user = g.current_user
return ops_render( "index/index.html") 此時可以正常顯示：
使得編輯能夠正常使用：User.py
from common.libs.Helper import ops_render
@route_user.route( "/edit" )
def edit():
return ops_render( "user/edit.html" ) 修改後 可以正常使用了
Ctrl+R統一替換：
通過快捷鍵統一替換：選擇路徑
編輯目前登入賬号功能實作
再次啟動，可以看到已經從資料庫中讀取了：
點選儲存按鈕，發送post請求
建立一個edit.js檔案
;
var user_edit_ops = {
init:function () {
this.eventBind();
},
eventBind:function () {
$(".user_edit_wrap .save").click(
function () {
var btn_target = $(this);
if (btn_target.hasClass("disabled")){
common_ops.alert("正在處理，請不要重複送出")
return;
}
var nickname_target = $(".user_edit_wrap input[name=nickname]");
var nickname = nickname_target.val();
var email_target = $(".user_edit_wrap input[name=email]");
var email = email_target.val();
if (!nickname || nickname.length<2){
common_ops.tip("請輸入符合規範的姓名", nickname_target);
return false
}
if (!email || email.length<2){
common_ops.tip("請輸入符合規範的姓名", email_target);
return false
}
});
}
}
$(document).ready(function () {
user_edit_ops.init()
}) edit.html引入這個js檔案
将姓名清空，然後測試一下：
添加ajax送出資料到伺服器
$(".user_edit_wrap .save").click(
function () {
var btn_target = $(this);
if (btn_target.hasClass("disabled")){
common_ops.alert("正在處理，請不要重複送出")
return;
}
var nickname_target = $(".user_edit_wrap input[name=nickname]");
var nickname = nickname_target.val();
var email_target = $(".user_edit_wrap input[name=email]");
var email = email_target.val();
if (!nickname || nickname.length<2){
common_ops.tip("請輸入符合規範的姓名", nickname_target);
return false
}
if (!email || email.length<2){
common_ops.tip("請輸入符合規範的姓名", email_target);
return false
}
btn_target.addClass("disabled");
var data={
nickname :nickname,
email : email
}
$.ajax({
url:common_ops.buildUrl("/user/edit"),
type:"POST",
data:data,
dataType:'json',
success:function (res) {
btn_target.removeClass("disabled")
var callback = null;
if(res.code == 200){
callback = function () {
window.location.href = window.location.href;
}
}
common_ops.alert(res.msg, callback)
}
})
}); User.py添加Post支援：
from flask import Blueprint,request,jsonify,make_response,redirect,g
from application import app,db
@route_user.route( "/edit" , methods=["GET", "POST"] )
def edit():
if request.method == "GET":
return ops_render( "user/edit.html" )
resp = {'code':200,'msg':'操作成功', 'data':{}}
req = request.values
nickname = req['nickname'] if 'nickname' in req else ''
email = req['email'] if 'email' in req else ''
if nickname is None or len(nickname)<1:
resp['code']=-1
resp['msg']='請輸入符合規範的姓名'
return jsonify(resp)
if email is None or len(email)<1:
resp['code']=-1
resp['msg']='請輸入符合規範的郵箱'
return jsonify(resp)
user_info = g.current_user
user_info.nickname = nickname
user_info.email = email
db.session.add(user_info)
db.session.commit()
return jsonify(resp) 可以看到成功修改使用者名
這樣的話，編輯功能已經實作了 接下來實作修改密碼功能
修改密碼功能的實作
reset_pwd.html檔案修改模闆的動态變量讀取
建立restPwd.js
;
var mod_pwd_ops = {
init:function () {
this.eventBind();
},
eventBind:function () {
$("#save").click(
function () {
var btn_target = $(this);
if (btn_target.hasClass("disabled")){
common_ops.alert("正在處理，請不要重複送出")
return;
}
var old_password = $("#old_password").val();
var new_password = $("#new_password").val();
if (!old_password){
common_ops.alert("請輸入原密碼");
return false
}
if (!new_password || new_password.length<6){
common_ops.alert("請輸入符合規範的密碼");
return false
}
btn_target.addClass("disabled");
var data={
old_password : old_password,
new_password : new_password
}
$.ajax({
url:common_ops.buildUrl("/user/reset-pwd"),
type:"POST",
data:data,
dataType:'json',
success:function (res) {
btn_target.removeClass("disabled")
var callback = null;
if(res.code == 200){
callback = function () {
window.location.href = window.location.href;
}
}
common_ops.alert(res.msg, callback)
}
})
});
}
}
$(document).ready(function () {
mod_pwd_ops.init()
}) reset_pwd.html引入js檔案：
User.py
接口實作：
@route_user.route( "/reset-pwd" , methods=["GET", "POST"])
def resetPwd():
if request.method == "GET":
return ops_render( "user/reset_pwd.html" )
resp = {'code': 200, 'msg': '操作成功', 'data': {}}
req = request.values
old_password = req['old_password'] if 'old_password' in req else ''
new_password = req['new_password'] if 'new_password' in req else ''
if old_password is None or len(old_password) < 6:
resp['code'] = -1
resp['msg'] = '請輸入符合規範的原密碼'
return jsonify(resp)
if new_password is None or len(new_password) < 6:
resp['code'] = -1
resp['msg'] = '請輸入符合規範的修改後的密碼'
return jsonify(resp)
if old_password == new_password:
resp['code'] = -1
resp['msg'] = '密碼相同，請再次輸入'
return jsonify(resp)
user_info = g.current_user
user_info.login_pwd = UserService.genePwd(new_password, user_info.login_salt)
db.session.add(user_info)
db.session.commit()
return jsonify(resp) 重新開機服務：
會發現一個問題，修改成功後，會跳轉回登入頁面，這時因為攔截器起作用了。
每刷一次頁面，它都會驗證是否登入成功，我們cookie是通過密碼計算的
是以這裡肯定不同了。是以會如何解決這個問題呢？
這裡需要再次刷一次cookie
這樣就不會回退了
資訊編輯和修改密碼的切換
建立
tab_user.html
<div class="row border-bottom">
<div class="col-lg-12">
<div class="tab_title">
<ul class="nav nav-pills">
<li {% if current == "edit" %}class="current"{% endif %}>
<a href="{{ buildUrl('/user/edit') }}">資訊編輯</a>
</li>
<li {% if current == "reset-pwd" %}class="current"{% endif %}>
<a href="{{ buildUrl('/user/reset-pwd') }}">修改密碼</a>
</li>
</ul>
</div>
</div>
</div> 替換
edit.html
和
layout_user.html
User.py
中傳遞
current
參數：