验证码_验证码博客-CSDN博客

本文链接：https://blog.csdn.net/pyrans/article/details/82764247

1、生成验证码

例：

import random

from PIL import Image, ImageDraw, ImageFont
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.

def getVerCode(request):
    # 创建一个画布
    # mode 画布模式, "RGB"
    # size 画布的宽高
    # color表示颜色 如: (33,33,33)即(红,绿,蓝) 每个值的范围是0-255
    image = Image.new(mode='RGB', size=(200, 70), color=getColor())

    # 创建一个画笔
    # 参数1是绑定的画布
    # 参数2是模式
    pen = ImageDraw.Draw(image, 'RGB')

    # 设置字体
    fontSize = ImageFont.truetype('static/fonts/ADOBEARABIC-BOLDITALIC.OTF', size=50)
    str1 = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890"
    str2 = ""

    for i in range(4):
        str3 = random.choice(str1)
        # 画
        # xy,  画的起始位置(坐标)
        # text  画的内容
        # fill = None,  填充的颜色
        # font = None,  设置字体样式及大小的
        pen.text((20 + i * 50, 10), str3, fill=getColor(), font=fontSize)
        str2 += str3

    # 将验证码保存到服务器中
    request.session['verCode'] = str2
    # 设置验证码在服务器中保存的时间，单位为秒
    request.session.set_expiry(60)

    # 给验证码加上一些点，使其模糊
    for i in range(1200):
        x = random.randint(0, 200)
        y = random.randint(0, 70)
        pen.point((x, y), fill=getColor())

    # 创建一个字节流
    import io
    byteIo = io.BytesIO()
    # 将创建的验证码图片保存到字节流中
    image.save(byteIo, 'png')

    return HttpResponse(byteIo.getvalue(), 'image/png')



# 随机获得一个颜色
def getColor():
    red = random.randint(0, 255)
    green = random.randint(0, 255)
    blue = random.randint(0, 255)
    return (red, green, blue)

2、在网页中展示验证码

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>

</head>
<body>
<form action="{%  url 'day02:contrast' %}" method="get">
    验证码: <input type="text" name="verCode"> <br />
    <img id="getVerCode" src="{% url 'day02:getVerCode' %}" alt="验证码" width="200px" height="70px"> <br />
   <input type="submit" value="登录">

</form>

</body>
</html>

页面效果：

3、给验证码设置点击事件，即点击验证码刷新

在html文件首页加上{% load static %}

并导入静态js文件

例：

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="{% static 'js/verCode.js' %}"></script>

在static下的js目录中创建verCode.js文件,写入点击事件

$(function () {
    // 设置点击事件
    // 根据id获取验证码所在的标签
    $("#getVerCode").click(function () {
        $(this).attr("src","/day02/getVerCode"+Math.random())
    })
})

每次点击验证码，都会刷新一个新的验证码

4、验证输入的验证码正确与否

例：

def contrast(request):
    # 获取用户输入的验证码
    verCode1 = request.GET.get('verCode')
    # 若用户未输入验证码，则返回验证界面
    if not verCode1:
        return render(request, 'getVerCode.html')
    # 获取服务器保存的验证码
    verCode2 = request.session.get('verCode')
    # 判断输入的验证码与服务器保存的验证码是否一致
    # 不区分大小写
    if str(verCode1).lower() == str(verCode2).lower():
        # 匹配成功
        return HttpResponse('验证成功')
    else:
        # 匹配失败
        return HttpResponse('验证失败')