第三方包pillow和验证码生成

Pillow:

绘图工具包

验证码：在用户登录，注册以及一些敏感操作时，为了防止服务器被暴力请求，或爬虫爬取，我们可以使用验证码进行过滤，减轻服务器的压力
使用绘图Pillow可以制作验证码图片
首先安装：

pip install Pillow

核心： Image/ImageDraw/ImageFont

绘制流程

mode = 'RGB'  # 指定绘制模式
size = '200,100'  # 指定画布大小
color_bg = (255,0,0)  # 指定画布背景颜色
image = Image.new(mode=mode, size=size, color=color_bg)  # 初始化画布
imagedraw = ImageDraw(image, mode=mode)  # 初始化画笔
imagefont = ImageFont.truetype(settings.FONT_PATH, 50)  # 创建字体字号,参数为settings中配置的字体文件路径和字号数字
imagedraw.text(xy=（0,0), text='text', font=imagefont)  # 绘制内容
fp=BytesIO()  # fp:文件输出流的位置，使用BytesIO来创建一个字节的IO内存流
image.save(fp,'png')  # 将图像存储在内存流中，指定存储文件格式
return HttpResponse(fp.getvalue(), content_type='image/png')  # 使用getvalue来获取内存流中的图像，指定格式返回给客户端

验证码生成流程：

初始化画布，画笔
生成随机四位验证码，将验证码通过session存入服务器
使用画布画笔绘制出对应验证码的img
在html文件中使用<img> 展示对应验证码的图片，通过form表单的post请求接收用户输入
将用户输入的验证码和session中的验证码进行对比，返回结果

验证码点击刷新功能：

验证码在刷新时，浏览器的缓存策略是判断请求的url为标识的，所以在处理验证码刷新时就需要对url进行修改，通过参数拼接，使每次都传递不同的值

1. 使用juquery添加点击事件

   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.js"></script>
   

2. 新建js文件

   $(function () {
       $("img").click(function () {
           console.log('clicked-----------');
           # 通过随机数生成来实现路径变更的目的，使图片刷新
           $(this).attr("src", "first/getcode/?t=" + Math.random());
       })
   })
   

3. 在html中添加新建js文件的位置

    <script type="text/javascript" src="{% static 'js/login.js'  %}"></script>