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. 页面的主体部分是一个包含表单的

   标签，具有class="row m-t user_reset_pwd_wrap"的样式。

4. 表单中包含了多个表单项，每个表单项都由一个

   标签包裹。每个表单项包含一个标签和一个输入框，用于显示和输入相应的信息。

5. 在原密码和新密码的输入框中，分别使用了标签，用于输入密码类型的数据。

6. 最后，表单的最下方有一个保存按钮，使用了标签，并具有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>

这段代码创建了一个具有两个选项卡的导航栏。每个选项卡都是一个

元素，其中包含一个链接。通过设置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.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

    if user_info.uid == 1:
        resp['code'] = -1
        resp['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，保存用户的认证信息。

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