【Python百日进阶-WEB开发】Day178 - Django案例：10图形验证码(二)

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)