一、图形验证码逻辑分析

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

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

1. 图形验证码接口设计

1.请求方式

选项

方案

请求方法

GET

请求地址

image_codes/(?P<uuid>[\w-]+)/

2.请求参数：路径参数

参数名

类型

是否必传

说明

uuid

string

是

唯一编号

3.响应结果：image/jpg

2. 图形验证码接口定义

1.图形验证码视图

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

2.总路由

# verifications

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

3.子路由

# 图形验证码

url(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view()),

3、图形验证码后端逻辑

1. 准备captcha扩展包

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

captcha扩展包下载路径：

链接：https://pan.baidu.com/s/1CA6rfNfJHL6k-DSb-j8-FA

提取码：jjy2

 

可能出现的错误

报错原因：环境中没有Python处理图片的库：PIL解决办法 安装Python处理图片的库：pip install Pillow

2. 准备Redis数据库

准备Redis的2号库存储验证码数据

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

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

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, content_type='image/jpg')

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>

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; } },