自定义图片验证码

首先我们需要用到一下库

1 2 3 4 5 6 7 8

COPY #绘画库 from PIL import ImageDraw #图片库 from PIL import Image #随机库 import random #文件流 import io

后台代码如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

COPY # 自定义图片验证码 class MyCode(View): # 定义rgb随机颜色 def get_random_color(self): R = random.randrange(255) G = random.randrange(255) B = random.randrange(255) return (R,G,B) # 定义图片视图 def get(self,reuqest): # 画布 img_size = (120,50) # 定义图片对象 image = Image.new('RGB',img_size,'white') # 定义画笔 draw = ImageDraw.Draw(image,'RGB') # 随机字母 source = '1256453534&32qwertyyuiycvbnbdsf' # 接收容器 code_str = "" # 进入循环绘制 for i in range(4): # 获取字母颜色 text_color = self.get_random_color() # 获取随机下标 tmp_num = random.randrange(len(source)) # 随机字符串 random_str = source[tmp_num] # 装入容器中 code_str += random_str # 绘制字符串 draw.text((10+30*i,20),random_str,text_color) # 获取缓存区 buf = io.BytesIO() # 临时图图片保存在缓冲 image.save(buf,'png') return HttpResponse(buf.getvalue(),'image/png')

简单的验证码绘制完成

在前端的操作

1 2 3 4 5 6 7

COPY 1.首先我们需要的input文本 <td> 验证码：<input type="text" v-model="code"> </td> 注：我们需要双向绑定一个code 这个code作为验证码的信息传给后端

获取后台的验证码的地址

1	COPY path('code/',MyCode.as_view()) #这是我们设定路由为code 运行django项目 进入这个路由 导航栏的地址 ctrl+c

之后前端验证码进行展示

1 2 3 4 5 6 7 8 9 10 11

COPY 首先我们需要个img标签来展示验证码 <img :src="src" alt="点击刷新" @click="changecode" class="imagecode"> 注：用v-bind绑定,src代表地址，此时我们从后端复制的地址，则定义变量进行存储 return{ code:'', # 验证码, src:'http://127.0.0.1:8000/code/', # 图片地址 } 就是这个样子

我们点击验证码的时候需要刷新 点一下刷新一下

1 2 3 4 5 6 7 8 9

COPY 1.看见@click这个点击事件，所以我们在下面定义一个叫changecode的方法 用于点击刷新 # 点击刷新 changecode:function(){ # 生成随机数 var num = Math.ceil(Math.random()*100) # 进行传参 this.src = this.src + '?num ='+num # 路由拼接 }

存储redis

1 2 3 4 5 6 7 8 9 10 11

COPY import redis # 连接redis host = "localhost" # 本地端口 port = 6379 # redis端口号 r = redis.Redis(host=host,port=port) #连接 # 保存随机码 r.set('code',code_str) # 读取则用 r.get('code') ok廖！！

之后登陆就简单了

1 2 3 4 5 6 7 8 9 10 11

COPY code = request.GET.get('code',None) # 比对验证码 redis_code = r.get('code') # 转码 redis_code = redis_code.decode('utf-8') # if贩判断 if code != redis_code: return Response({'code':403,'msg':"您输入的验证码有误"}) 注：在这里有一个坑需要suo一下 我们必须进行转码操作，这样才能进行判断。 如果不进行转码，则无法比较，因为不转码 redis_code的值将会是二进制，所以decode一下。