1、下载pillow模块
2、下载字体文件(组件中使用了字体文件)
2、验证码组件:
import random from PIL import Image, ImageDraw, ImageFont, ImageFilter def check_code(width=120, height=30, char_length=5, font_file='kumo.ttf', font_size=28): # kumo.ttf是一个字体文件 code = [] img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') def rndChar(): """ 生成随机字母 :return: """ return chr(random.randint(65, 90)) def rndColor(): """ 生成随机颜色 :return: """ return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255)) # 写文字 font = ImageFont.truetype(font_file, font_size) for i in range(char_length): char = rndChar() code.append(char) h = random.randint(0, 4) draw.text([i * width / char_length, h], char, font=font, fill=rndColor()) # 写干扰点 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 = img.filter(ImageFilter.EDGE_ENHANCE_MORE) return img, ''.join(code) if __name__ == '__main__': pass # 1. 直接打开 # img, code = check_code() # img.show() # 2. 写入文件 # img,code = check_code() # with open('code.png','wb') as f: # img.save(f,format='png') # 3. 写入内存(Python3) # from io import BytesIO # stream = BytesIO() # img.save(stream, 'png') # stream.getvalue() # 4. 写入内存(Python2) # import StringIO # stream = StringIO.StringIO() # img.save(stream, 'png') # stream.getvalue()
3、使用组件
views.py(记得导入check_code)
def get_img(request): img, code = check_code() request.session['code']=code #写入session # 写入内存 from io import BytesIO stream = BytesIO() img.save(stream, 'png') return HttpResponse(stream.getvalue(), 'img/png')
模板:
<input name='code' class="form-control" placeholder="验证码" type="text"> <img id='code' src="{% url 'get_img' %}" alt=""> {# js代码,达到点击刷新的效果#} <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> {# 只需要改变img标签的src的内容,他就会自动发送请求#} $('#code').click(function () { $('#code')[0].src="/get_img/" }) </script>
验证码的生成至此完成,接下来是验证部分(登录函数中验证)
views.py
def login(request): if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') code = request.POST.get('code') user = User.objects.filter(username=username, password=password) if user and code.upper() == request.session.get('code').upper(): request.session['login'] = 1 request.session['username'] = user.first().name return HttpResponse('登录成功!') return render(request, 'login.html')
注意:字体文件下载,猛击这里
问题:上述中js绑定的时间可能会出现只执行一次的问题,后面我会在下面补充通过ajax进行验证码刷新的方式。