修改密码弹出框搭建

前端代码搭建

主要利用的是bootstrap3中js插件里的模态框版块

<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="row">
                                        <div class="col-md-8 col-md-offset-2">
                                            <h3 class="text-center">修改密码</h3>
                                            <div class="form-group">
                                                <label for="">用户名:</label>
                                                <input type="text" disabled value="{{ request.user.username }}" class="form-control" id="id_username">
                                            </div>
                                            <div class="form-group">
                                                <label for="">原密码:</label>
                                                <input type="text" id="old_password" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新密码:</label>
                                                <input type="password" id="id_password" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="">新密码:</label>
                                                <input type="text" id="confirm_password" class="form-control">
                                            </div>
                                            <span style="color:red;" id="error"></span>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal" >取消</button>
                                                <button type="button" class="btn btn-primary" id="commit">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                </div>
                            </div>
                        </div>

<script>
    $('#commit').click(function (){
        $.ajax({
            type:'post',
            url:'/set_password/',
            data:{
                'username':$('#id_username').val(),
                'old_password':$('#old_password').val(),
                'password':$('#id_password').val(),
                'confirm_password':$('#confirm_password').val(),
                'csrfmiddlewaretoken':'{{ csrf_token }}',
            },
            success:function (args){
                if (args.code==1000){
                    window.location.reload();
                }else {
                    $('#error').text(args.msg)
                }
            }
        })
    })
</script>

后端接收修改密码数据并提供错误提示

注意修改密码的视图函数必须是登录用户才能使用,所以需要一个@login_required装饰器

@login_required
def set_password(request):
    # 1.判断是否为ajax请求
    if request.method == 'POST':
        back_dic = {'code':1000,'msg':''}
        # 2.获取用户修改密码提交的数据
        username = request.POST.get('username')
        old_password = request.POST.get('old_password')
        password = request.POST.get('password')
        confirm_password = request.POST.get('confirm_password')
        # 3.对比原密码是否正确
        is_right = request.user.check_password(old_password)
        if is_right:
            # 4.判断两次密码是否一致
            if password == confirm_password:
                # 5.一致则修改密码
                request.user.set_password(password)
                request.user.save()
            else:
                back_dic['code'] = 1001
                back_dic['msg'] = '两次密码不一致'
        else:
            back_dic['code'] = 1002
            back_dic['msg'] = '原密码不正确'
        return JsonResponse(back_dic)

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:修改密码弹出框搭建 - Python技术站

(0)
上一篇 2023年4月2日
下一篇 2023年4月2日

相关文章

  • 注册功能页面的搭建

    思路分析 注册页面需要对用户提交的数据进行校验,并且需要对用户输入错误的地方进行提示! 所有我们需要使用forms组件搭建注册页面! 平时我们书写form是组件的时候是在views.py里面书写的,但是为了接耦合,我们需要将forms组件都单独写在一个地方,需要用的时候导入就行! 例如,在项目文件夹下创建一个myforms文件夹,里面放各种forms组件文件…

    2023年4月2日
    00
  • IO模型

    该篇的IO模型主要针对的是网络IO的,其他IO不在本篇考虑范围之内! IO模型简介 Stevens在文章中一共比较了五种IO Model,分别为: * blocking IO 阻塞IO * nonblocking IO 非阻塞IO * IO multiplexing IO多路复用 * signal driven IO 信号驱动IO * asynchronou…

    2023年4月2日
    00
  • 轮播图前端

    轮播图组件 <template> <div id=”banner”> <el-carousel height=”400px”> <!– 将banner_list循环–> <el-carousel-item v-for=”item in banner_list” :key=”item”> <…

    2023年4月2日
    00
  • 后台response和异常处理封装

    我们自己封装的一些东西,往往放在一个utils文件夹内,以后也方便管理和导入 后台response封装 # 自己封装的Response对象 from rest_framework.response import Response class APIResponse(Response): def __init__(self,code=1,msg=’成功’,re…

    2023年4月2日
    00
  • 函数的递归

    1.函数的递归的定义 函数的递归调用:是函数嵌套调用的一种特殊形式 具体是指:在调用一个函数的过程中又直接或者间接的调用到本身,是一个死循环,最大递归是1000次,超出之后报错。 2.函数递归的调用 # 直接调本身 def f1(): print(‘是我还是我’) f1() f1() # 间接调用 def f1(): print(‘f1’) f2() def…

    Python开发 2023年4月2日
    00
  • django中有关ajax的部分

    Django_ajax 1 简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求; 异步交互:客户…

    Python开发 2023年4月2日
    00
  • django中的视图层

    1.什么是视图层 简单来说,就是用来接收路由层传来的请求,从而做出相应的响应返回给浏览器 2.视图层的格式与参数说明 2.1基本格式 from django.http import HttpResponse def page_2003(request): html = ‘<h1>第一个网页</h1>’ return HttpRespo…

    Python开发 2023年4月2日
    00
  • 认证

    认证的实现 使用步骤: # 通过认证类完成,使用步骤 1 写一个认证类,继承BaseAuthentication 2 重写authenticate方法,在内部做认证 3 如果认证通过,返回2个值 4 认证不通过抛AuthenticationFailed异常 5 只要返回了两个值,在后续的request.user 就是当前登录用户 认证源码分析: https:…

    Python开发 2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部