文章目录
8.3.3 准备Redis数据库,2号库
dev.py文件中修改redis配置
# 配置Redis数据库
CACHES = {
"default": { # 默认缓存库
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/0",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
},
"session": { # session缓存库
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/1",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
},
"verify_code": { # 验证码缓存库
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/2",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
},
}
8.3.4 后端视图代码view.py
from django.views import View
from meiduo_mall.apps.verifications.libs.captcha.captcha import captcha
from django_redis import get_redis_connection
from django import http
class ImageCodeView(View):
""" 图形验证码 """
def get(self, request, uuid):
"""
参数:uuid通用唯一识别码,用于唯一识别图形验证码属于哪个用户的
返回值:image/jpg
"""
# 接收参数,校验参数,路由做完了uuid
""" 实现主体业务逻辑:生成、保存、响应图形验证码 """
# 生成图形验证码
text, image = captcha.generate_captcha()
# 保存图形验证码
redis_conn = get_redis_connection('verify_code') # 创建redis库的连接
# redis_conn.setex('key', expires, 'value') # expires生命周期
redis_conn.setex(f'img_{uuid}', 300, text)
# 响应图形验证码
return http.HttpResponse(image, content_type='image/jpg')
8.4 图形验证码前端逻辑
8.4.1 变量绑定到属性,导包common.js
register.html文件
<li>
<label for="">图形验证码:</label>
<input type="text" v-model="image_code" @blur="check_image_code" name="image_code" id="msg_input">
<img v-bind:src="image_code_url" @click='generate_image_code' alt="图形验证码" class="pic_code">
<span class="error_tip" v-show="error_image_code">[[ error_image_code_message]]</span>
</li>
...
<script type="text/javascript" src="../static/js/common.js"></script>
<script type="text/javascript" src="../static/js/register.js"></script>
8.4.2 register.js中定义方法和调用方法
//页面一加载完调用的函数
mounted(){
//生成图形验证码
this.generate_image_code();
},
methods: { // 定义和实现事件方法
//生成图形验证码,封装思想,方便代码复用
generate_image_code(){
this.uuid = generateUUID(); //generateUUID在common.js中
this.image_code_url = '/image_codes/' + this.uuid + '/';
},
...
// 校验图形验证码,前端不判断图形验证码是否正确,后端在用户点击获取短信验证码时判断图形验证码是否正确
check_image_code(){
if (this.image_code.length != 4) {
this.error_image_code_message = '请输入图形验证码';
this.error_image_code = true
} else {
this.error_image_code = false
}
},
8.5 设置子应用的常量文件 constants.py
# 图形验证码有效期,单位:秒
IMAGE_CODE_REDIS_EXPIRES = 300
# 短信验证码有效期,单位:秒
SMS_CODE_REDIS_EXPIRES = 300
# 短信模板
SEND_SMS_TEMPLATE_ID = 1
# 60秒内是否重复发送标记
SEND_SMS_CODE_INTERVAL = 60
8.6 django生成图片验证码
Python生成随机验证码,需要使用PIL模块.
pip3 install pillow
8.6.1 基本使用
8.6.1.1 创建图片
from PIL import Image
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
# 在图片查看器中打开
# img.show()
# 保存在本地
with open('code.png','wb') as f:
img.save(f,format='png')
8.6.1.2 创建画笔
from PIL import Image
from PIL import ImageDraw
img = Image.new(mode="RGB", size=(120, 30), color=(255,255,255))
draw = ImageDraw.Draw(img, mode="RGB")
8.6.1.3 画点
from PIL import Image
from PIL import ImageDraw
img = Image.new(mode="RGB", size=(120, 30), color=(255,255,255))
draw = ImageDraw.Draw(img, mode="RGB")
# 第一个参数:表示坐标
# 第二个参数:表示颜色
draw.point([100,20], fill="red")
draw.point([50,10], fill=(255, 135, 255))
with open("code.png",'wb') as f:
img.save(f,format="png")
8.6.1.4 画线
from PIL import Image
from PIL import ImageDraw
img = Image.new(mode="RGB", size=(120, 30), color=(255,255,255))
draw = ImageDraw.Draw(img, mode="RGB")
# 第一个参数:表示起始坐标和结束坐标
# 第二个参数:表示颜色
draw.line((10, 10, 10, 30), fill="red")
draw.line((10, 10, 30, 10), fill=(255, 135, 255))
with open("code.png",'wb') as f:
img.save(f,format="png")
8.6.1.5 画圆
from PIL import Image
from PIL import ImageDraw
img = Image.new(mode="RGB", size=(150, 150), color=(255,255,255))
draw = ImageDraw.Draw(img, mode="RGB")
# 第一个参数:表示起始坐标和结束坐标(圆要画在中间)
# 第二个参数:表示开始角度
# 第三个参数:表示结束角度
# 第四个参数:表示颜色
draw.arc((50, 50, 100, 100), 0, 360, fill="red")
with open("code.png",'wb') as f:
img.save(f,format="png")
8.6.1.6 写文本
from PIL import Image
from PIL import ImageDraw
img = Image.new(mode="RGB", size=(120, 30), color=(255,255,255))
draw = ImageDraw.Draw(img, mode="RGB")
# 第一个参数:表示起始坐标
# 第二个参数:表示写入内容
# 第三个参数:表示颜色
draw.text([20, 10], "python", fill="red")
with open("code.png",'wb') as f:
img.save(f,format="png")
8.6.1.7 设置特殊字体
from PIL import Image, ImageDraw, ImageFont
img = Image.new(mode="RGB", size=(120, 30), color=(255,255,255))
draw = ImageDraw.Draw(img, mode="RGB")
# 第一个参数:表示字体路径
# 第二个参数:表示字体大小
font = ImageFont.truetype("kumo.ttf", 25)
# 第一个参数:表示起始坐标
# 第二个参数:表示写入内容
# 第三个参数:表示颜色
# 第四个参数:表示字体
draw.text([30, 0], "python", fill="red", font=font)
with open("code.png",'wb') as f:
img.save(f,format="png")
8.6.2 应用案例
8.6.2.1 应用方法
import random
from io import BytesIO
from PIL import Image, ImageDraw, ImageFont
def check_code(width=120, height=30, char_length=5, font_file='kumo.ttf', font_size=28):
f = BytesIO()
img = Image.new(mode='RGB', size=(width, height),
color=(random.randint(50, 250), random.randint(50, 255), random.randint(50, 255)))
draw = ImageDraw.Draw(img, mode='RGB')
char_list = []
# 画字
for i in range(char_length):
char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9)), chr(random.randint(97, 122)), ])
font = ImageFont.truetype("blog/static/fonts/"+font_file, font_size)
draw.text([i * 24, 0], char, (random.randint(200, 255), random.randint(0, 50), random.randint(0, 50)),
font=font)
char_list.append(char)
def rndColor():
"""
生成随机颜色
:return:
"""
return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))
# 写干扰点
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
# 写干扰圆圈
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
# 画干扰线
for i in range(5):
x1 = random.randint(0, width)
y1 = random.randint(0, height)
x2 = random.randint(0, width)
y2 = random.randint(0, height)
draw.line((x1, y1, x2, y2), fill=rndColor())
img.save(f, "png")
data = f.getvalue()
s_code = ''.join(char_list)
return data,s_code
8.6.2.2 调用方法
def get_valid_img(request):
'''
登录和注册的验证码
:param request:
:return:
'''
data,s_code = check_code()
request.session["valid_code"] = s_code
return HttpResponse(data)