自定义图片验证码

首先我们需要用到一下库

1
2
3
4
5
6
7
8
#绘画库
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
# 自定义图片验证码
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
1.首先我们需要的input文本

<td>
验证码:<input type="text" v-model="code">
</td>

注:我们需要双向绑定一个code 这个code作为验证码的信息传给后端

获取后台的验证码的地址

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

之后前端验证码进行展示

1
2
3
4
5
6
7
8
9
10
11
首先我们需要个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
   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
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
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一下。
posted @ 2020-07-23 12:03  安乐的技术博客  阅读(234)  评论(0编辑  收藏  举报