文章目录
显示
编辑账号和修改密码
读取正确的账号信息：
拦截器捕获全局用户登录信息：
首页传递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参数：
此时可以正常切换了。