更完美点的登录
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")