四. Django项目之电商购物商城 -- 图片验证码生成

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() , textif __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>