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('验证失败')