实现思路：
1.用户访问页面/login/
- 创建一个图片验证码给用户，让用户输入验证码上的字符串
- 在验证码存在session中
2.用户提交之后的操作：
- 验证是否是Post提交
- 判断用户输入的验证码是否和图片上的验证码一致
我们应该怎样实现呢？
在验证码方便我们要使用Image模块（pip install Pillow）
呈上步奏：
urls.py
from django.contrib import admin
from django.urls import path,re_path
from app import views
urlpatterns = [
path('admin/', admin.site.urls),
path('login/',views.login),
path('check_code/',views.check_code),
]
utils/check_code.py
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont
import random
class ValidCodeImg:
def __init__(self,width=150,height=30,code_count=5,font_size=32,point_count=20,line_count=3,img_format='png'):
'''
可以生成一个经过降噪后的随机验证码的图片
:param width: 图片宽度 单位px
:param height: 图片高度 单位px
:param code_count: 验证码个数
:param font_size: 字体大小
:param point_count: 噪点个数
:param line_count: 划线个数
:param img_format: 图片格式
:return 生成的图片的bytes类型的data
'''
self.width = width
self.height = height
self.code_count = code_count
self.font_size = font_size
self.point_count = point_count
self.line_count = line_count
self.img_format = img_format
@staticmethod
def getRandomColor():
'''获取一个随机颜色(r,g,b)格式的'''
c1 = random.randint(0,255)
c2 = random.randint(0,255)
c3 = random.randint(0,255)
return (c1,c2,c3)
@staticmethod
def getRandomStr():
'''获取一个随机字符串，每个字符的颜色也是随机的'''
random_num = str(random.randint(0, 9))
random_low_alpha = chr(random.randint(97, 122))
random_upper_alpha = chr(random.randint(65, 90))
random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])
return random_char
def getValidCodeImg(self):
# 获取一个Image对象，参数分别是RGB模式。宽150，高30，随机颜色
image = Image.new('RGB',(self.width,self.height),self.getRandomColor())
# 获取一个画笔对象，将图片对象传过去
draw = ImageDraw.Draw(image)
# 获取一个font字体对象参数是ttf的字体文件的目录，以及字体的大小
font=ImageFont.truetype('C:/Windows/Fonts/Arial.ttf',size=self.font_size)
temp = []
for i in range(self.code_count):
# 循环5次，获取5个随机字符串
random_char = self.getRandomStr()
# 在图片上一次写入得到的随机字符串,参数是：定位，字符串，颜色，字体
draw.text((10+i*30, -2),random_char , self.getRandomColor(), font=font)
# 保存随机字符，以供验证用户输入的验证码是否正确时使用
temp.append(random_char)
valid_str = "".join(temp)
# 噪点噪线
# 划线
for i in range(self.line_count):
x1=random.randint(0,self.width)
x2=random.randint(0,self.width)
y1=random.randint(0,self.height)
y2=random.randint(0,self.height)
draw.line((x1,y1,x2,y2),fill=self.getRandomColor())
# 画点
for i in range(self.point_count):
draw.point([random.randint(0, self.width), random.randint(0, self.height)], fill=self.getRandomColor())
x = random.randint(0, self.width)
y = random.randint(0, self.height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=self.getRandomColor())
# 在内存生成图片
from io import BytesIO
f = BytesIO()
image.save(f, self.img_format)
data = f.getvalue()
return data,valid_str
views.py
from django.shortcuts import render,HttpResponse
from utils.check_code import ValidCodeImg
def check_code(request):
img = ValidCodeImg()
data, valid_str = img.getValidCodeImg()
print(valid_str)
request.session['check'] = valid_str
return HttpResponse(data,valid_str)
def login(request):
if request.method == 'POST':
check = request.POST.get('check')
print(check)
if check.upper() == request.session['check']:
print('验证通过')
else:
print('验证失败')
return render(request,"login.html")
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet" href="/static/bootstrap.css">
<style>
body{
margin: 20px 0px;
}
#a1{
display: inline-block;
border:2px solid aqua;
border-radius: 10px;
margin-bottom:16px;
}
</style>
</head>
<body>
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-labelledby="loginModalLable" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h1 class="text-center text-primary">登录</h1>
</div>
<div class="modal-body">
<form action="/login/" class="form center-block" method="post">
<div class="form-group col-md-12">
<input type="email" class="form-control input-lg" placeholder="电子邮件" name="email">
</div>
<div class="form-group col-md-12">
<input type="password" class="form-control input-lg" placeholder="登录密码" name="pwd">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control input-lg" placeholder="图片验证码" name="check">
</div>
<a href="/login?/" class="col-md-6;border" id="a1"><img style="width: 250px;height:50px" src="/check_code/"></a>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">立刻登录</button>
<span><a href="#">找回密码</a></span>
<span><a href="#" class="pull-right">注册</a></span>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/bootstrap.js"></script>
<script>
$('#loginModal').modal("show");
</script>
</body>
</html>
数据库方便就没有进行详细的写，可以在项目中写完整，本文主要测试图片验证码。
上面代码最终实现图：
在实现中也遇到了一个小问题可以看：https://blog.csdn.net/qq_42992704/article/details/104459548 。
这样我们就完成了，验证码的这个功能，感兴趣的话，可以自己做下测试。
