使用Django实现商城验证码模块的方法

本文主要涉及图形验证码的相关功能，主要包括，图形验证码获取、验证码文字存储、验证码生成等。

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

 验证码获取接口设计

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.图形验证码校验效果

至此验证码部分就说完了