Flask 密码重设系统【源码来自编程浪子Flask点餐小程序】
web/templates/user/reset_pwd.html
{% extends "common/layout_main.html" %}{% block content %}{% include "common/tab_user.html" %}修改密码
{% endblock %}{% block js %}<script src="{{ buildStaticUrl('/js/user/reset_pwd.js') }}">{% endblock %}
这段代码是一个基于Flask框架的模板文件,用于实现一个修改密码的功能页面。下面是对代码的解析:
首先,代码使用了Flask的模板继承功能,通过
{% extends "common/layout_main.html" %}
指定了继承的父模板文件为common/layout_main.html
。在
{% block content %}
和{% endblock %}
之间的代码是该页面的内容部分。其中,{% include "common/tab_user.html" %}
用于引入名为common/tab_user.html
的子模板文件。页面的主体部分是一个包含表单的
标签,具有
class="row m-t user_reset_pwd_wrap"
的样式。表单中包含了多个表单项,每个表单项都由一个
标签包裹。每个表单项包含一个
标签和一个输入框,用于显示和输入相应的信息。
在原密码和新密码的输入框中,分别使用了
标签,用于输入密码类型的数据。
最后,表单的最下方有一个保存按钮,使用了
标签,并具有
class="btn btn-w-m btn-outline btn-primary"
的样式。在
{% block js %}
和{% endblock %}
之间的代码是该页面的JavaScript部分,用于引入一个名为/js/user/reset_pwd.js
的JavaScript文件。
web/templates/common/tab_user.html
这段代码创建了一个具有两个选项卡的导航栏。每个选项卡都是一个
。通过设置class="current"
,可以指定当前选中的选项卡。你可以根据自己的需求修改链接的href
属性和选项卡的文本内容问题1:为什么要用2个html文件呢?
这段代码中使用了两个HTML文件的原因是为了实现代码的模块化和复用。其中,layout_main.html
是整个页面的主要布局文件,包含了整个页面的结构和样式。而tab_user.html
是一个子模块,用于显示用户的信息编辑和密码修改两个选项卡。通过将子模块的代码放在单独的HTML文件中,可以方便地在不同的页面中引用和复用这些代码,提高代码的 可维护性 和 可扩展性。
web/static/js/user/reset_pwd.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( "请输入不少于6位的新密码~~" );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();} );
该段代码是一个修改密码的功能实现。具体介绍如下:
- 初始化函数
init
,用于绑定事件-即给保存按钮添加点击事件的处理函数。 - 事件绑定函数
eventBind
,用于给保存按钮添加点击事件。 - 点击保存按钮时,首先判断按钮是否被禁用,如果被禁用则提示用户正在处理中,避免重复提交。
- 获取用户输入的原密码和新密码,并进行一些简单的验证。【如原密码为空或新密码长度小于6,则弹出相应的提示信息并返回。】
- 如果验证通过,则将按钮禁用,并将用户输入的原密码和新密码通过Ajax请求发送到后端接口。
- 后端返回结果后,根据返回的状态码进行相应的处理,如果状态码为200,则弹出成功提示信息表示密码修改成功,刷新页面。
- .是类选择器, #是id选择器
web/controllers/user/User.py
route_user = Blueprint('user_page', __name__)@route_user.route( "/reset-pwd",methods = [ "GET","POST" ] )def resetPwd():if request.method == "GET":return ops_render( "user/reset_pwd.html",{ 'current':'reset-pwd' } )resp = {'code': 200, 'msg': '操作成功~', 'data': {}}req = request.valuesold_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'] = -1resp['msg'] = "请输入符合规范的原密码~~"return jsonify(resp)if new_password is None or len( new_password ) < 6:resp['code'] = -1resp['msg'] = "请输入符合规范的新密码~~"return jsonify(resp)if old_password == new_password:resp['code'] = -1resp['msg'] = "请重新输入一个吧,新密码和原密码不能相同哦~~"return jsonify(resp)user_info = g.current_userif user_info.uid == 1:resp['code'] = -1resp['msg'] = "该用户是演示账号,不准修改密码和登录用户名~~"return jsonify(resp)user_info.login_pwd = UserService.genePwd( new_password,user_info.login_salt )db.session.add( user_info )db.session.commit()response = make_response(json.dumps( resp ))response.set_cookie(app.config['AUTH_COOKIE_NAME'], '%s#%s' % (UserService.geneAuthCode(user_info), user_info.uid), 60 * 60 * 24 * 120)# 保存120天return response
这段代码是一个使用Flask框架编写的用户重置密码的功能。下面是对代码的解析:
首先,通过
route_user = Blueprint('user_page', __name__)
创建了一个蓝图对象route_user
,用于定义用户相关的路由。然后,使用
@route_user.route('/reset-pwd', methods=['GET', 'POST'])
装饰器定义了一个名为resetPwd
的路由函数,该函数可以处理GET和POST请求。在函数内部,首先判断请求的方法是否为GET,如果是GET请求,则返回渲染后的
user/reset_pwd.html
页面。如果是POST请求,则获取请求参数,并进行一系列的验证和处理操作。
首先,从请求参数中获取原密码和新密码,并进行长度验证。
然后,判断原密码和新密码是否相同,如果相同,则返回错误提示。
接下来,通过
g.current_user
获取当前用户的信息。如果当前用户的uid为1(演示账号),则返回错误提示。
如果以上验证都通过,则使用
UserService.genePwd(new_password, user_info.login_salt)
生成新的加密密码,并更新用户的登录密码。然后,将用户信息添加到数据库中,并提交事务。
最后,使用
make_response
创建一个响应对象,并通过response.set_cookie
设置一个名为AUTH_COOKIE_NAME
的cookie,保存用户的认证信息。
这段代码实现了用户重置密码的功能,包括验证密码的合法性、更新密码、保存用户认证信息等操作。