利用Ajax完成手撸获取验证码、校验功能

郑统京

# 登录功能
1、自己手动搭建获取用户名、密码、验证码前端标签代码
2、图片验证码如何自己完成
    ps:
        img标签src属性后谜案可以写的内容
            1、直接写网络图片地址
            2、仅仅一个url 后缀（自动朝该url发送get请求获取数据）
            3、图片二进制
    1、需要借助pillow模块
        Image、ImageDraw、ImageFont
    2、需要借助于内存管理器io模块
        BytesIo,StringIo
    3、字体的样式其实是受.ttf结尾的文件控制的
    4、需要手动产生随机验证码(搜狗的笔试题)
        random模块方法
        chr内置方法
        保存在session中的验证码
    5、验证码的校验
[前端代码]
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">登录</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="passowrd"></label>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="">验证码</label>
                <div class="row">
                    <div class="col-md-6 ">
                        <input type="text" name="code" id="id-code" class="form-control">
                    </div>
                    <div class="col-md-6"  >
                        <img src="/get_code/" alt="" width="380" height="35" id="id_img">
                    </div>
                </div>
            </div>
            <input type="button" class="btn btn-success" value="登录" id="login">
            <span style="color: red" id="error"></span>
        </div>
    </div>
</div>
<script>
    // 实时获取验证码
    $('#id_img').click(function (){
        // 先获取到标签的src
        let img_obj = $(this).attr('src');
        // 在src后面加任意字符
        $(this).attr('src',img_obj+='?')
    })
    //像狗段发送ajax请求，并处理返回结果
    $('#login').click(function (){
        $.ajax({
            url:'',
            type:'post',
            data:{
                'username':$('#username').val(),
                'password':$('#password').val(),
                'code':$('#id-code').val(),
                // 自己结合自己需求 合理选择
                'csrfmiddlewaretoken':'{{ csrf_token }}'
            },
        success:function (args){
                if(args.code==1000){
                    window.location.href =args.url
                }else{
                    // 渲染错误信息
                    $('#error').text(args.msg)
                }
        }
        })
    })
</script>
[后端代码def login(request):
    if request.method == 'POST':  # 可以用request.ajax方法
        back_dic = {'code': 1000, 'msg': ''} # 注意用ajax方法一定要定义一个全局标志位
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        # 1 先校验验证码是否正确      自己决定是否忽略            统一转大写或者小写再比较
        if request.session.get('code').upper() == code.upper(): # 后端代码发送给session，从session中获取验证码比对
            user_obj = auth.authenticate(request, username=username, password=password)
            if user_obj:
                # 保存用户登录状态
                auth.login(request,user_obj)
                back_dic['url'] = '/home/'
            else:
                back_dic['code'] = 2000
                back_dic['msg'] = '用户名或密码错误'
        else:
            back_dic['code'] = 3000
            back_dic['msg'] = '验证码错误'
        return JsonResponse(back_dic)
    return render(request, 'login.html')