一，具体流程：
验证码的原理：
在登录页面中有Form表单：（包含用户名、密码和验证码三个必要的input框）
-username
-password
-valid_code
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5 col-md-offset-3"> <form> {% csrf_token %} <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="password"> </div> <div class="row validCode"> <div class="col-md-6"> <div class="form-group"> <label for="validCode">验证码</label> <input type="text" class="form-control validCode_text" id="validCode" placeholder="validCode"> </div> </div> <div class="col-md-6"> <img class="validCode_img" src="/get_validCode_img/" alt="" width="200px" height="50px"> </div> </div> <input type="button" value="submit" class="btn btn-primary" id="subBtn"><span class="error"></span> </form> </div> </div> </div> </body> </html>
view中实现产生随机验证码：
方式一：将图片导入静态文件，用文件句柄打开图片返回给前端进行渲染 方式二：导入PIL模块，利用Image生成一张图片保存后，用文件举兵打开，返回前端 方式三：导入PIL、IO模块，还是利用Image生成图片，但是这次没有将图片保存到磁盘而是将图片利用IO模块中的BytesIO暂时的保存到内存中，用BytesIO句柄打开，返回到前段 方式四：对方式三进行优化，加上了random模块可以让图片随机生成，加上随机的5个字符，基本的验证码就显示出来了
代码演示：
def get_validCode_img(request): # 方式一:（将图片放置到静态文件中直接引入前端进行渲染） # import os # path= os.path.join(settings.BASE_DIR,"static","img","a.png") # # with open(path,"rb") as f: # data=f.read() # return HttpResponse(data) # 方式二：（自己生成一张图片返回到前端渲染） # from PIL import Image #导入PIL模块中的Image # img = Image.new(mode="RGB", size=(120, 40), color="green") #生成一张图片，它的属性有颜色：大小 # f=open("validCode.png","wb") #把图片赋值给句柄 # img.save(f,"png") #保存已生成图片 # with open("validCode.png","rb") as f: #打开保存的图片 # data=f.read() #将句柄赋值到data #方式三：（） # from io import BytesIO#BytesIO是一个文件句柄，是内存的文件句柄 # from PIL import Image # img=Image.new(mode="RGB",size=(120,40),color='blue')#生成一两张图片 # f=BytesIO() # img.save(f,"png") # data=f.getvalue() #方式四： from io import BytesIO#BytesIO是一个文件句柄，是内存的文件句柄 from PIL import Image,ImageDraw,ImageFont import random 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("static/kumo.ttf",20) valid_list=[] for i in range(5): random_num=str(random.randint(0,9)) random_lower_zimu=chr(random.randint(65,90)) random_upper_zimu=chr(random.randint(97,122)) ret=random.choice([random_num,random_lower_zimu,random_upper_zimu]) draw.text((5+i*20,10),ret,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font) valid_list.append(ret) f=BytesIO() img.save(f,"png") data=f.getvalue() valid_str="".join(valid_list) print(valid_str) request.session["keepValidCode"]=valid_str return HttpResponse(data)
view中进行登录验证：
因为随机码是用for循环生成的先将它放入一个列表中，人后将列表转换 为字符串，存入session中便于做对比，接收前端发过来的数据，包括用 户名密码以及验证码三条数据，先拿session中保存的验证码与前段发来 的验证码进行匹配验证，如果匹配成功则进行用户名密码的匹配匹配成功 则登录成功
代码演示：
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login1/', views.login1), url(r'^index/', views.index), url(r'^reg/', views.reg), url(r'^get_validCode_img/', views.get_validCode_img), ]
from django.shortcuts import render,HttpResponse,redirect from app01 import models from blog import settings from django.contrib import auth # Create your views here. def login1(request): # if request.is_ajax(): if request.is_ajax(): username=request.POST.get("username") password=request.POST.get("password") validCode=request.POST.get("validCode") login_response={"is_login":False,"error_msg":None} 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) # session request.session[is_login]=True 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,"login1.html") def get_validCode_img(request): # 方式一:（将图片放置到静态文件中直接引入前端进行渲染） # import os # path= os.path.join(settings.BASE_DIR,"static","img","a.png") # # with open(path,"rb") as f: # data=f.read() # return HttpResponse(data) # 方式二：（自己生成一张图片返回到前端渲染） # from PIL import Image #导入PIL模块中的Image # img = Image.new(mode="RGB", size=(120, 40), color="green") #生成一张图片，它的属性有颜色：大小 # f=open("validCode.png","wb") #把图片赋值给句柄 # img.save(f,"png") #保存已生成图片 # with open("validCode.png","rb") as f: #打开保存的图片 # data=f.read() #将句柄赋值到data #方式三：（） # from io import BytesIO#BytesIO是一个文件句柄，是内存的文件句柄 # from PIL import Image # img=Image.new(mode="RGB",size=(120,40),color='blue')#生成一两张图片 # f=BytesIO() # img.save(f,"png") # data=f.getvalue() #方式四： from io import BytesIO#BytesIO是一个文件句柄，是内存的文件句柄 from PIL import Image,ImageDraw,ImageFont import random 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("static/kumo.ttf",20) valid_list=[] for i in range(5): random_num=str(random.randint(0,9)) random_lower_zimu=chr(random.randint(65,90)) random_upper_zimu=chr(random.randint(97,122)) ret=random.choice([random_num,random_lower_zimu,random_upper_zimu]) draw.text((5+i*20,10),ret,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font) valid_list.append(ret) f=BytesIO() img.save(f,"png") data=f.getvalue() valid_str="".join(valid_list) print(valid_str) request.session["keepValidCode"]=valid_str return HttpResponse(data)
