美多商城之验证码(图形验证码)

一、图形验证码

1.1 图形验证码逻辑分析

需要新建应用verifications

知识要点

1. 将图形验证码的文字信息保存到Redis数据库，为短信验证码做准备。
2. UUID 用于唯一区分该图形验证码属于哪个用户，也可使用其他唯一标识信息来实现。

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

1. 图形验证码接口设计

1.请求方式

选项	方案
请求方法	GET
请求地址	image_codes/(?P[\w-]+)/

2.请求参数：路径参数

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

3.响应结果：image/jpg

2. 图形验证码接口定义

1.图形验证码视图

views.py

from django.shortcuts import render
from django.views import View


# Create your views here.
class ImageCodeView(View):
    """图形验证码"""

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

2.总路由

# verifications
url(r'^', include('verifications.urls')),

3.子路由

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


urlpatterns = [
    #  图形验证码
    url(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view()),
]

1.3 图形验证码后端逻辑

1. 准备captcha扩展包

提示：captcha扩展包用于后端生成图形验证码

可能出现的错误

• 报错原因：环境中没有Python处理图片的库：PIL

解决办法

• 安装Python处理图片的库：pip install Pillow

2. 准备Redis数据库

准备Redis的2号库存储验证码数据(setting.py)

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

3. 图形验证码后端逻辑实现

from django.shortcuts import render
from django.views import View
from .lib.captcha.captcha import captcha
from django_redis import get_redis_connection
from django import http
from meiduo_mall.meiduo_mall.utils import constants


# Create your views here.
class ImageCodeView(View):
    """图形验证码"""

    def get(self, request, uuid):
        """

        :param request:请求对象
        :param uuid: 唯一标识图形验证码所属于的用户
        :return: image/jpg
        """
        #  生成图片验证码
        text, image = captcha.generate_captcha()

        #  保存图片验证码
        redis_conn = get_redis_connection('verify_code')
        redis_conn.setex('img_%s' % uuid, constants.IMAGE_CODE_REDIS_EXPIRES, text)

        #  响应图片验证码
        return http.HttpResponse(image, constant_tpye='image/jpg')

1.4 图形验证码前端逻辑

1. 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.图形验证码展示和存储效果

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