更完美点的登录

1.在urls中写路由
    

2. 返回登录页面（login.html中）
    - username
    
    - password
    
    - validCode
    
    - submit
        -前端：显示的验证码图片
            <div class="col-md-6">
                <img class="validCode_img" src="/get_validCode_img/" alt="" width="200px" height="50px">
            </div>
        -后端：
            方式一：二进制打开一个图片路径，获取图片内容 返回给前端图片
                import os
                 path=os.path.join(settings.BASE_DIR,"blog","static","img","egon.jpg")
                
                 with open(path,"rb",)as f:
                     data = f.read()
            
            方式二：用模块实例化出一个图片对象，然后以png的格式写入内存，然后读出来，返回给前端
                from PIL import Image
                     img=Image.new(mode="RGB",size=(120,40),color="blue")
                    
                     f = open("validCode.png","wb")
                     img.save(f,"png")
                    
                     with open("validCode.png","rb") as f:
                         data = f.read()
                         
            方式三：导入文件个句柄对象，然后在实例化出来一个图片对象，然后以png的格式存入内存，然后赋值给data
                from io import BytesIO
                    
                     from PIL import Image
                     img = Image.new(mode="RGB",size=(120,40),color="yellow")
                     f=BytesIO()
                     img.save(f,"png")
                     data = f.getvalue()
            
            
            方式四：导入文件句柄对象，然后实个例化图片对象，然后获取画笔，创建字体，然后获取随机验证码，并且以png格式存入内存，然后赋值给data，
            然后存入session中，在显示给前端页面
                from io import BytesIO
                    import random

                    from PIL import Image,ImageDraw,ImageFont
                    img = Image.new(mode="RGB",size=(120,40),color=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))

                    draw = ImageDraw.Draw(img,"RGB")#获取一个画笔
                    font = ImageFont.truetype("blog/static/font/kumo.ttf",28)

                    valid_list = []
                    for i in range(4):
                        random_num = str(random.randint(0,9))
                        random_lower_zimu = chr(random.randint(65,90))
                        random_upper_zimu = chr(random.randint(97,122))

                        random_char = random.choice([random_num,random_lower_zimu,random_upper_zimu])

                        draw.text([4+i*24,10],random_char,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font)

                        valid_list.append(random_char)

                    f=Byte导入sIO()
                    img.save(f,"png")
                    data = f.getvalue()

                    valid_str ="".join(valid_list)
                    print(valid_str)

                    request.session["keepValidCode"]=valid_str
                    return HttpResponse(data)


                def index(request):

                    return render(request,"index.html")
    - submit
        - ajax向后端提交
            前端：
                <script>
                    $("#subBtn").click(function () {
                        $.ajax({
                            url:"/login/",
                            type:"POST",
                            data:{
                                "username":$("#username").val(),
                                "password":$("#password").val(),
                                "validCode":$("#validCode").val(),
                                "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),
                            },
                            success:function (data) {
                                console.log(data);

                                var response=JSON.parse(data);
                                if (response["is_login"]){
                                    location.href="/index/"
                                }
                                else{
                                    $(".error").html(response["error_msg"]).css("color","red")
                                }

                            }
                        })
                    })

                </script>
                
            后端：(在views中：)
                -判断是否是ajax请求
                    if request.is_ajax():
                - 获取用户名 密码 验证码
                obj = {}
                    -username = request.POST.get("username")
                    -password = reuqest.POST.get("password")
                    -validCode = request.POST.get("validCode")
                
                -判断验证用户信息是否存在
                    -login_response = {"is_login":False,"error_msg":None}    
                    
                - 前端获取到的验证码和后端session的验证码是否相同
                    如果相同：
                        用户名和密码和数据库中是否匹配
                    如果不同：
                        obj[error_msg] = "username or password error"
                返回前端
                    
                if validCode.upper() == request.session.get("keepValidCode").upper():
                    user = auth.authenticate(username=username,password=password)

                    if user:
                        login_response["is_login"] = True
                        auth.login(request,user)

                    else:
                        login_response["error_msg"]="username or password error"

                else:
                    login_response["error_msg"] = "validCode error"

                import json
                return HttpResponse(json.dumps(login_response))

            return render(request,"login.html")