1. 准备captcha包（该包用于生成图形验证码）

1.将生成图片验证码的库复制到新建的libs包中。

2.安装Python处理图片的库

这儿可能会变红显示错误：

解决方案：在虚拟环境中安装Pillow。执行pip install Pillow即可

2. 图形验证码后端接口设计

1.请求方式

选项	方案
请求方法	GET
请求地址	imagecode?uuid=xxxxx-xxxx-xxxxxx

2.请求参数：路径参数

参数名	类型	是否必传	说明
uuid	string	是	唯一编号

3.响应结果：image/jpeg

3. 图形验证码后端实现

1.图形验证码视图

from django.http import HttpResponseBadRequest,HttpResponse
from libs.captcha.captcha import captcha
from django_redis import get_redis_connection

class ImageCodeView(View):

    def get(self,request):
        #获取前端传递过来的参数
        uuid=request.GET.get('uuid')

        #判断参数是否为None
        if uuid is None:
            return HttpResponseBadRequest('请求参数错误')

        # 获取验证码内容和验证码图片二进制数据
        text, image = captcha.generate_captcha()

        # 将图片验内容保存到redis中，并设置过期时间
        redis_conn = get_redis_connection('default')
        redis_conn.setex('img:%s' % uuid, 300, text)

        # 返回响应，将生成的图片以content_type为image/jpeg的形式返回给请求
        return HttpResponse(image, content_type='image/jpeg')

2.总路由

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    # include 参数1要设置为元组（urlconf_module, app_name）
    # namespace 设置命名空间
    path('', include(('users.urls', 'users'), namespace='users')),
]

3.子路由

from django.urls import path
from users.views import ImageCodeView

urlpatterns = [
    # 参数1：路由
    # 参数2：视图函数
    # 参数3：路由名，方便通过reverse来获取路由
    path('imagecode/', ImageCodeView.as_view(),name='imagecode'),
]

4. 修改模板中图片验证码HTML代码

1.html中的原代码如下

<img src="{% static 'img/image_code.png' %}" @click="generate_image_code" alt="" style="width: 110px;height: 40px;">

2.修改如下

<img :src="image_code_url" @click="generate_image_code" alt="" style="width: 110px;height: 40px;">