django 验证码图片的使用

最新推荐文章于 2025-08-04 15:47:24 发布

原创最新推荐文章于 2025-08-04 15:47:24 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

django图书馆项目后端实现流程同时被 2 个专栏收录

38 篇文章

订阅专栏

django项目后端流程

32 篇文章

订阅专栏

本文介绍了在Django中如何使用Pillow包生成验证码图片，详细步骤包括下载依赖、实例化生成图片、注册URL视图。同时，为了确保验证码的唯一性，文章还讲解了如何利用UUID作为验证码标识并存储在Redis数据库中，以及前端与后端的交互实现。

验证码图片使用

下载Pillow包和外部扩展包

完成之前的学习后，终于可以实现某些功能了。
首先我们进入自己的虚拟环境，下载Pillow包

pip install Pillow
pip install Pillow-PIL

然后上网上找一个扩展。（这个是随便找的，不是我当前用的，所以可能后面导包的用法不一致）添加进lib文件夹中。

实例化生成一个验证码图片

from rest_framework.views import APIView
from . import constants
from webbacksoftware.libs.captcha import captcha
from django.http import HttpResponse


class ImageView(APIView):
    def get(self,request):
        text,image=captcha.captcha.generate_captcha()
        return HttpResponse(image,content_type='image/jpg')

这会生成一个验证码图片，建议print一下看看图片的内容，然后constants是存放常量的一个文件，如果路径报错，则给两个同名文件夹添加一个source root可以解决
在这里插入图片描述

from django.conf.urls import url,include
from . import views

urlpatterns = [
    url(r'^imgcode/',views.ImageView.as_view())
]

在url中注册这个视图

现在启动后端服务器，切换到127.0.0.1:8000/imgcode/就有如下显示
在这里插入图片描述
成功生成验证码图片

获得验证码的内容

生成随机UUID

为了让验证码有唯一性，需要给验证码图片增加一个UUID

function uuid() {
    /* 这是生成uuid的函数*/
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    return uuid;
};

在register.js中添加生产UUID函数
我们将这个UUID传给后端，并把这个UUID分配给当前的验证码来当成主键存到redis数据库中

var current_id = '';


function getImageCode() {
       // 这个函数生成新的uuid，并且在前端中将验证码对应的src替换掉
    var uuid_data = uuid();
    current_id = uuid_data
    $('#img_code img').attr('src','http://127.0.0.1:8000/imgcode/'+uuid_data+'/')
}

js中添加，把UUID通过http传给后端

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/register.js"></script>
</head>
<div id="img_code"><img></div>

前端html文件中添加字段
最后，为了后端能够接受UUID并将图片存储到redis中我们需要添加修改成以下字段
转到views.py文件夹
添加

from django_redis import get_redis_connection

字段

class ImageView(APIView):
    def get(self, request,image_id):
        text, image = captcha.captcha.generate_captcha()
        print(text)
        get_redis_connection('valid').setex(image_id,constants.IMAGE_UUID_REDIS_EXPIRES,text)
        return HttpResponse(image,content_type='image/jpg')

然后修改url路径使之可以接收image_id

url(r'^imgcode/(?P<image_id>[\w-]+)/$',views.ImageView.as_view())

在这里插入图片描述
前端界面

后端terminal

在这里插入图片描述
redis中数据存储以及过期后的显示
我设置存储在valid数据库，该数据库id为5