Django项目之电商购物商城 – 图片验证码生成
需要开发文档和前端资料的可私聊
一. 图片验证码的生成
1. 创建应用用于生成图片验证码 , 以及短信验证码
python manage.py startapp verfications
2.配置radis数据库
"var_code":{ # 配置数据库指定引擎 "BACKEND" : "django_redis.cache.RedisCache", # 配置使用 Redis 的数据库名称 "LOCATION" : "redis://127.0.0.1:6379/2", "OPTIONS":{ "CLIENT_CLASS" : "django_redis.client.DefaultClient" } },
3.认证应用 , 分发路由 , 创建路由
认证app
'verfications.apps.VerficationsConfig',
分发路由
path('', include('verfications.urls')),
创建验证码路由
re_path('^image_code/(?P<uuid>[\w-]+)/$' , views.ImageCodeView.as_view())
4. 生成图片验证码
from random import randint , choice from PIL import Image , ImageDraw , ImageFont import io , os # 制作随机验证码：数字，大小写字母 def get_random_code(): # 随机数字 number = str(randint(0,9)) # 随机大写字母 upper = chr(randint(65 , 90)) # 随机小写字母 lower = chr(randint(97, 122)) # 再大小写字母和数字中再随机获取一个 code = choice([number , upper , lower]) return code # 获取随机颜色 def get_color(): return (randint(0,255),randint(0,255),randint(0,255)) # 制作图片 def create_img(): # 创建图片对象 img = Image.new(mode='RGB' , size=(90 , 30),color=get_color()) # 创建画笔工具 draw = ImageDraw.Draw(img) # 制作图片噪点 # 噪点 for i in range(60): # point([xy:图片的坐标] , fill颜色) draw.point([randint(0,150) , randint(0,30)] , fill=get_color()) # 噪线 for i in range(8): # line([xy:图片的坐标] , fill颜色) draw.line([randint(0,150) , randint(0,30),randint(0,150) , randint(0,30)] , fill=get_color()) # 圆，弧线 x = randint(0, 150) y = randint(0,15) for i in range(5): draw.arc([ x,y ,x*2 , y*2] ,0, 90 ,fill=get_color() ) # 设置字体 ， 导入字体文件 ， 设置字体大小 dir = os.path.join(os.path.dirname(__file__) , 'fonts','Arial.ttf') font = ImageFont.truetype(dir,24) # 拼接生成的验证码 text = '' # 生成验证码 for i in range(4): c = get_random_code() # 将获取到的验证码字符写入到图片中 draw.text((10+20*i , 2) , text=c , fill=get_color() , font=font) text += c # 将图片保存到内存中 out = io.BytesIO() # 保证验证码的图片 img.save(out , format='png') return out.getvalue() , text if __name__ == '__main__': img , text = create_img() print(text)
4. 创建相应视图
在登录的js代码中会生成uuid作为图片验证码的url , 从而避免在多人注册的情况下生成的验证码被覆盖
from django.shortcuts import render , HttpResponse from django.views import View from verfications.PictureCode import CodeImg from django_redis import get_redis_connection # Create your views here. class ImageCodeView(View): # 获得uuid的参数 def get(self , request , uuid): # 获得验证码 以及图片 image , code = CodeImg.create_img() # 将数据保存到redis数据库 redis_conn = get_redis_connection('var_code') redis_conn.setex(f'image_{uuid}' , 60 , code) return HttpResponse(image , content_type='image/png')
修改前端代码 , 绑定相关方法
<li> <label>图形验证码:</label> <input type="text" name="image_code" id="pic_code" class="msg_input" v-model="image_code" @blur="check_image_code"> <img v-bind:src="image_code_url" alt="图形验证码" class="pic_code" @click="generate_image_code"> <span class="error_tip" v-show="error_image_code">请填写图形验证码</span> </li>
