基本资料

个人的基本信息主要是用户名、签名、性别、密码、头像。这部分我们需要完成对这些内容的修改。

基本资料设置

需求分析

• 进入界面之后展示用户的基本资料(个性签名、昵称、性别)
• 用户修改之后点击保存向服务器发起请求进行数据保存更新

默认数据展示

• 在 views/indexpy 文件中添加路由函数，用于在展示界面时填上默认数据

@index_bp.get('/account/re_info.html')
def re_info_view():
    return render_template('account/re_info.html')

• 将模板中相关数据进行填充

{% extends 'account/index.html' %}

{% block right_container %}
    <h3>修改信息</h3>
    <form class="layui-form" action="" style="width: 500px;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">个性签名</label>
            <div class="layui-input-block">
                <textarea name="signature" placeholder="个性签名" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男">
                <input type="radio" name="gender" value="女" title="女">
                <input type="radio" name="gender" value="保密" title="保密">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="re-info">提交</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </form>
{% endblock %}

前端逻辑实现

re-info.html

{% block footer_script %}
    <script>
        layui.use(function () {
            let $ = layui.$
            let form = layui.form


            let user_data = JSON.parse(localStorage.getItem('user_data'))
            form.val('re-info-form', user_data)


            form.on('submit(re-info)', function (data) {
                let field = data.field

                $.ajax({
                    url: '/api/v1/account/re-info',
                    type: 'put',
                    contentType: "application/json",
                    data: JSON.stringify(field),
                    success: function (res) {
                        console.log(res)
                        localStorage.setItem('user_data', JSON.stringify(res.data))
                    }
                })
                return false
            })
        })
    </script>
{% endblock %}

后端代码实现

@index_api.put('/account/re-info')
@jwt_required()
def account_re_info():
    data = request.get_json()
    for k, v in data.items():
        setattr(current_user, k, v)
    current_user.save()
    user_info = current_user.as_json()
    del user_info['password_hash']
    return {'code': 0, 'msg': '修改信息成功', 'data': user_info}

用户密码修改

需求分析

• 使用原密码和新密码进行密码修改

模板渲染

@index_bp.get('/account/re_password.html')
def re_password_view():
    return render_template('account/re_password.html')

然后在 templates/account/re_password.html 中创建表单

{% extends 'account/index.html' %}

{% block right_container %}
    <h3>修改密码</h3>
    <form class="layui-form" action="" style="width: 500px;">
        <div class="layui-form-item">
            <label class="layui-form-label">当前密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="new_password" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="re_password" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="re-password">提交</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </form>
{% endblock %}

前端发送请求

添加请求逻辑

re-password.html

{% block footer_script %}
    <script>
        layui.use(function () {
            let $ = layui.$
            let form = layui.form

            form.on('submit(re-password)', function (data) {
                let field = data.field

                $.ajax({
                    url: '/api/v1/account/re-password',
                    type: 'put',
                    contentType: "application/json",
                    data: JSON.stringify(field),
                    success: function (res) {
                        console.log(res)
                        if (res.code === -1) {
                            layui.layer.msg(res.msg, {icon: 2})
                        } else {
                            layui.layer.msg(res.msg, {icon: 1})
                        }
                    }
                })
                return false
            })
        })
    </script>
{% endblock %}

后端完成修改

@index_api.put('/account/re-password')
@jwt_required()
def account_re_password():
    data = request.get_json()

    # 1. 获取到传入参数
    password = data.get('password')
    new_password = data.get('new_password')
    if not current_user.check_password(password):
        return {'code': -1, 'msg': '旧密码错误，不可修改'}

    if password == new_password:
        return {'code': -1, 'msg': '新旧密码一致，不可修改'}

    current_user.password = new_password
    current_user.save()
    return {'code': 0, 'msg': '修改信息成功'}