本文次要波及图形验证码的相干性能，次要包含，图形验证码获取、验证码文字存储、验证码生成等。

图形验证码接口设计和定义

验证码获取接口设计

uuid 作为门路参数，惟一标识验证码所属用户

新建利用

验证码的相干逻辑咱们用一个独自的 app 解决，所以这里须要新建一个叫 verifications 的 app，建好 app 后，关上 views.py 视图文件，编写一个验证码的视图类

class ImageCodeView(View):
    """图形验证码"""
    def get(self, request, uuid):
        """
        :param request: 申请对象
        :param uuid: 惟一标识图形验证码所属于的用户
        :return: image/jpg
        """
        pass

而后配置路由

我的项目路由配置：

path('', include('apps.verifications.urls')), 配置 app 的路由

path('image_codes/``uuid:uuid``/', views.ImageCodeView.as_view()),

验证码解决相干筹备工作

• 筹备 captcha 扩大包

​ 把 captcha 扩大包放到 verifications 的 lib 目录下，而后须要装置 Python 的图片解决库，pip install Pillow

• 筹备 Redis 数据库

redis 用来存储图片验证码上的数字，前面会用来做校验

"verify_code": { # 验证码
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/2",
        "OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}
    },

• 图形验证码后端逻辑实现

class ImageCodeView(View):
    """图形验证码"""

    def get(self, request, uuid):
        """
        实现图形验证码逻辑
        :param uuid: UUID
        :return: image/jpg
        """
        # 生成图形验证码
        text, image = captcha.generate_captcha()

        # 保留图形验证码
        # 应用配置的 redis 数据库的别名，创立连贯到 redis 的对象
        redis_conn = get_redis_connection('verify_code')
        # 应用连贯到 redis 的对象去操作数据存储到 redis
        # redis_conn.set('key', 'value') # 因为没有有效期
        # 图形验证码必须要有有效期的：设计是 300 秒有效期
        # redis_conn.setex('key', '过期工夫', 'value')
        redis_conn.setex('img_%s' % uuid, 300, text)

        # 响应图形验证码: image/jpg
        return http.HttpResponse(image, content_type='image/jpg')

图形验证码前端逻辑

• Vue 实现图形验证码展现

1.register.js

mounted(){
    // 生成图形验证码
    this.generate_image_code();},
methods: {
    // 生成图形验证码
    generate_image_code(){// 生成 UUID。generateUUID() : 封装在 common.js 文件中，须要提前引入
        this.uuid = generateUUID();
        // 拼接图形验证码申请地址
        this.image_code_url = "/image_codes/" + this.uuid + "/";
    },
    ......
}

2.register.html

<li>
    <label> 图形验证码:</label>
    <input type="text" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
    <span class="error_tip"> 请填写图形验证码 </span>
</li>

3. 图形验证码展现和存储成果

• Vue 实现图形验证码校验

1.register.html

<li>
    <label> 图形验证码:</label>
    <input type="text" v-model="image_code" @blur="check_image_code" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
    <span class="error_tip" v-show="error_image_code">[[error_image_code_message]]</span>
</li>

2.register.js

check_image_code(){if(!this.image_code) {
        this.error_image_code_message = '请填写图片验证码';
        this.error_image_code = true;
    } else {this.error_image_code = false;}
},

3. 图形验证码校验成果

至此验证码局部就说完了

下节预报：用户登录模块