Flask 密码重设系统

Flask 密码重设系统【源码来自编程浪子Flask点餐小程序】

web/templates/user/reset_pwd.html

{% extends "common/layout_main.html" %}
{% block content %}
{% include "common/tab_user.html" %}
<div class="row m-t  user_reset_pwd_wrap"><div class="col-lg-12"><h2 class="text-center">修改密码</h2><div class="form-horizontal m-t m-b"><div class="form-group"><label class="col-lg-2 control-label">账号:</label><div class="col-lg-10"><label class="control-label">{{ current_user.login_name }}</label></div></div><div class="hr-line-dashed"></div><div class="form-group"><label class="col-lg-2 control-label">手机:</label><div class="col-lg-10"><label class="control-label">{{ current_user.mobile }}</label></div></div><div class="hr-line-dashed"></div><div class="form-group"><label class="col-lg-2 control-label">原密码:</label><div class="col-lg-10"><input type="password" id="old_password" class="form-control" value=""></div></div><div class="hr-line-dashed"></div><div class="form-group"><label class="col-lg-2 control-label">新密码:</label><div class="col-lg-10"><input type="password" id="new_password" class="form-control" value=""></div></div><div class="hr-line-dashed"></div><div class="form-group"><div class="col-lg-4 col-lg-offset-2"><button class="btn btn-w-m btn-outline btn-primary" id="save">保存</button></div></div></div></div>
</div>
{% endblock %}
{% block js %}
<script src="{{ buildStaticUrl('/js/user/reset_pwd.js') }}"></script>
{% endblock %}

这段代码是一个基于Flask框架的模板文件,用于实现一个修改密码的功能页面。下面是对代码的解析:

  1. 首先,代码使用了Flask的模板继承功能,通过{% extends "common/layout_main.html" %}指定了继承的父模板文件为common/layout_main.html

  2. {% block content %}{% endblock %}之间的代码是该页面的内容部分。其中,{% include "common/tab_user.html" %}用于引入名为common/tab_user.html的子模板文件。

  3. 页面的主体部分是一个包含表单的<div>标签,具有class="row m-t user_reset_pwd_wrap"的样式。

  4. 表单中包含了多个表单项,每个表单项都由一个<div class="form-group">标签包裹。每个表单项包含一个<label>标签和一个输入框,用于显示和输入相应的信息。

  5. 在原密码和新密码的输入框中,分别使用了<input type="password">标签,用于输入密码类型的数据。

  6. 最后,表单的最下方有一个保存按钮,使用了<button>标签,并具有class="btn btn-w-m btn-outline btn-primary"的样式。

  7. {% block js %}{% endblock %}之间的代码是该页面的JavaScript部分,用于引入一个名为/js/user/reset_pwd.js的JavaScript文件。


web/templates/common/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>

这段代码创建了一个具有两个选项卡的导航栏。每个选项卡都是一个<li>元素,其中包含一个链接<a>。通过设置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();
} );

该段代码是一个修改密码的功能实现。具体介绍如下:

  1. 初始化函数init,用于绑定事件-即给保存按钮添加点击事件的处理函数。
  2. 事件绑定函数eventBind,用于给保存按钮添加点击事件。
  3. 点击保存按钮时,首先判断按钮是否被禁用,如果被禁用则提示用户正在处理中,避免重复提交。
  4. 获取用户输入的原密码和新密码,并进行一些简单的验证。【如原密码为空或新密码长度小于6,则弹出相应的提示信息并返回。】
  5. 如果验证通过,则将按钮禁用,并将用户输入的原密码和新密码通过Ajax请求发送到后端接口。
  6. 后端返回结果后,根据返回的状态码进行相应的处理,如果状态码为200,则弹出成功提示信息表示密码修改成功,刷新页面。
  7. .是类选择器, #是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框架编写的用户重置密码的功能。下面是对代码的解析:

  1. 首先,通过route_user = Blueprint('user_page', __name__)创建了一个蓝图对象route_user,用于定义用户相关的路由。

  2. 然后,使用@route_user.route('/reset-pwd', methods=['GET', 'POST'])装饰器定义了一个名为resetPwd的路由函数,该函数可以处理GET和POST请求。

  3. 在函数内部,首先判断请求的方法是否为GET,如果是GET请求,则返回渲染后的user/reset_pwd.html页面。

  4. 如果是POST请求,则获取请求参数,并进行一系列的验证和处理操作。

  5. 首先,从请求参数中获取原密码和新密码,并进行长度验证。

  6. 然后,判断原密码和新密码是否相同,如果相同,则返回错误提示。

  7. 接下来,通过g.current_user获取当前用户的信息。

  8. 如果当前用户的uid为1(演示账号),则返回错误提示。

  9. 如果以上验证都通过,则使用UserService.genePwd(new_password, user_info.login_salt)生成新的加密密码,并更新用户的登录密码。

  10. 然后,将用户信息添加到数据库中,并提交事务。

  11. 最后,使用make_response创建一个响应对象,并通过response.set_cookie设置一个名为AUTH_COOKIE_NAME的cookie,保存用户的认证信息。

这段代码实现了用户重置密码的功能,包括验证密码的合法性、更新密码、保存用户认证信息等操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QML —— ProgressBar示例(附完整源码)

示例 - 效果 实例 - 源码 import QtQuick 2.12 import QtQuick.Window 2.12import QtQuick.Layouts 1.12 import QtQuick.Controls 2.5Window {id: rootIdvisible: truewidth: 640height: 480title: qsTr("Hello World")Column{spacing: 40anchors.centerIn: parent…

AE学习笔记十--------------3Dmax协作-三维场景合成

3Dmax协作-三维场景合成 步骤&#xff1a; 1、导入资源&#xff08;.rpf文件---多像素文件&#xff09;阿尔法通道 猜测 2、.rpf为合层-----&#xff08;右键&#xff09;关键帧辅助------rpf摄像机导入 &#xff08;目的&#xff1a;导入其他素材&#xff0c;可以根据rpf摄…

车路协同中 CUDA 鱼眼相机矫正、检测、追踪

在车路协同中,鱼眼一般用来补充杆件下方的盲区,需要实现目标检测、追踪、定位。在目标追踪任务中,通常的球机或者枪机方案,无法避免人群遮挡的问题,从而导致较高的ID Swich,造成追踪不稳定。但是鱼眼相机的顶视角安装方式,天然缓解了遮挡的问题,从而实现杆件下方的盲区…

携手共进 探索生命|清华大学创融同学会走进生命系 共话细胞科技新未来

携手共进 探索生命&#xff5c;清华大学创融同学会走进生命系 共话细胞科技新未来 探索细胞产业新高度&#xff0c;赋予生命健康更多保障&#xff01;日前&#xff0c;清华大学创融同学会一行莅临全生命周期健康管理中心——生命系参观交流。生命系领导以及全体员工对来访贵宾…

mysql-5.6.16的内存泄漏问题

一、背景 有一台物理机上一个版本为5.6.16的从库出现了内存的增高&#xff0c;观测其日志可以发现&#xff0c;这台数据库已经oom很多次了&#xff0c;并且stop slave的时候会卡住非常长的时间才能停止 二、根本原因 上述的现象可以看到是一个明显的内存泄漏现象&#xff0c…

单例模式的双重检查锁定是什么?

单例模式的双重检查锁定是什么&#xff1f; 单例模式是一种常见的设计模式&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供一个全局访问点。双重检查锁定&#xff08;Double-Checked Locking&#xff09;是一种在单例模式中使用的性能优化技术。 在传统的单例模式…

【10】ES6:Promise 对象

一、同步和异步 1、JS 是单线程语言 JavaScript 是一门单线程的语言&#xff0c;因此同一个时间只能做一件事情&#xff0c;这意味着所有任务都需要排队&#xff0c;前一个任务执行完&#xff0c;才会执行下一个任务。但是&#xff0c;如果前一个任务的执行时间很长&#xff…

Python3 基本数据类型

Python 中的变量不需要声明。每个变量在使用前都必须赋值&#xff0c;变量赋值以后该变量才会被创建。 在 Python 中&#xff0c;变量就是变量&#xff0c;它没有类型&#xff0c;我们所说的"类型"是变量所指的内存中对象的类型。 等号&#xff08;&#xff09;用来…

关于时间与空间复杂度的学习

关于时间与空间复杂度的学习 算法时间复杂度定义标准算法度量单位渐近记号1、Θ&#xff08;big-theta&#xff09;2、O&#xff08;big-oh&#xff09;3、Ω&#xff08;big-omege&#xff09; 推导时间复杂度步骤与法则步骤法则 示例1.常数阶2、线性阶3、对数阶4、平方阶5、立…

『精』CSS 小技巧之BEM规范

『精』CSS 小技巧之BEM规范 文章目录 『精』CSS 小技巧之BEM规范一、什么是BEM&#xff1f;二、BEM要怎么用&#xff1f;三、不用BEM会少个胳膊吗&#xff1f;&#x1f48a;四、Sass与BEM的结合&#x1f388;五、块与修饰符应放在一块&#x1f47f;参考资料&#x1f498;推荐博…

100000000!文心一言披露最新用户规模

“文心一言用户规模突破1亿。” 12月28日&#xff0c;百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰在第十届WAVE SUMMIT深度学习开发者大会上宣布。会上&#xff0c;王海峰以《文心加飞桨&#xff0c;翩然赴星河》为题作了主旨演讲&#xff0c;分享了飞桨和文…

Page17~19 samp2_1, 项目各个文件的含义,增加一个关闭按钮

创建一个Widget Application项目samp2_1,选择QWidget作为窗体基类&#xff0c;并选中Generate form复选框 创建好之后&#xff0c;Shadow build的对勾去掉 创建好的项目文件目录树 这个项目包含以下一些文件&#xff1a; 项目组织文件samp2_1.pro, 存储项目设置的文件 主程序…

VStudio2022导出Qt项目在Linux的Qtcreator中运行修复错误记录

公司项目中的代码在VStudio2022中编写&#xff0c;交给我需要移植Linux的Qtcreator中&#xff0c;记录一下移植过程中的遇到的坑&#xff0c;按照错误顺序由高到低记录一下&#xff0c;边尝试边解决边记录&#xff0c;写作方面没有逻辑&#xff0c;每个人项目环境不一样&#x…

淘宝API与大数据技术在电商行业的应用研究

一、引言 随着电商行业的迅猛发展&#xff0c;数据已经成为驱动业务增长和创新的关键因素。淘宝作为中国电商市场的巨头&#xff0c;其API&#xff08;应用程序接口&#xff09;为电商行业提供了丰富的数据资源。结合大数据技术&#xff0c;这些数据可以被深度挖掘和利用&…

LeetCode 75| 位运算

目录 338 比特位计数 136 只出现一次的数字 1318 或运算的最小翻转次数 338 比特位计数 class Solution { public:vector<int> countBits(int n) {vector<int>res(n 1);for(int i 0;i < n;i)res[i] cal(i);return res;}int cal(int num){int res 0;for(i…

Flask 账号管理列表

Flask 账号管理列表 web/controllers/account/Account.py /index route_account Blueprint( account_page,__name__ )route_account.route( "/index" ) def index():resp_data {}req request.valuespage int( req[p] ) if ( p in req and req[p] ) else 1qu…

云服务器接入高防IP无法访问的原因以及处理方式

云服务器&#xff0c;也称为Elastic Compute Service&#xff08;ECS&#xff09;&#xff0c;是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。它是一种虚拟化的服务器&#xff0c;运行公共的操作系统和软件&#xff0c;并允许用户通过网络进行访问。用户无需提前购…

设备管理练习

设备管理练习 一&#xff0e;单项选择 &#xff11;、用户程序使用特权指令将引起的中断是属于 ( D ) A.硬件故障中断 B.程序中断 C.外部中断  D.访管中断   &#xff12;、使用户所编写的程序与实际使用的物理设备无关&#xff0c;这是由设备管理的&#xff08; A &…

PyTorch实战:基于Seq2seq模型处理机器翻译任务(模型预测)

文章目录 引言数据预处理加载字典对象en2id和zh2id文本分词 加载训练好的Seq2Seq模型模型预测完整代码结束语 引言 随着全球化的深入&#xff0c;翻译需求日益增长。传统的人工翻译方式虽然质量高&#xff0c;但效率低&#xff0c;成本高。机器翻译的出现&#xff0c;为解决这…

PYTHON基础:数据可视化绘图

python数据可视化入门 –常见的四种数据图形绘制 数据可视化在数据分析和数据科学中起着重要的作用。它可以帮助我们更直观地理解和解释数据&#xff0c;发现数据中的模式、趋势和异常。 在数据可视化中&#xff0c;常用的图表类型包括折线图、散点图、直方图和饼图&#xff…