美多商城用户注册-展示用户注册页面-验证码-5

1.图形验证码逻辑分析

 需要新建verifications    python3 ../../manage.py startapp verifications

2.图形验证码接口定义

在verifications中的views中定义接口

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

　　def get(self, request, uuid):
　　"""
　　:param uuid: 通用唯一识别码，用于唯一标识该图形验证码属于哪个用户的
　　:return: image/jpg
　　"""
　　# 实现主体业务逻辑：生成，保存，响应图形验证码
　　# 生成图形验证码
　　text, image = captcha.generate_captcha()

　　# 保存图形验证码
　　redis_conn = get_redis_connection('verify_code')
　　# redis_conn.setex('key', 'expires', 'value')
　　redis_conn.setex('img_%s' % uuid, IMAGE_CODE_REDIS_EXPIRES, text)

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

设置总路由  验证码子路由

path('', include('verifications.urls'))

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

3.图形验证码后端逻辑

准备captcha扩展包，在verifications中创建libs包，并导入captcha

 

安装环境中没有Python处理图片的库：PIL

pip install Pillow

4.准备redis数据库，在settings中的dev.py中 设置验证码存储

"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: 通用唯一识别码，用于唯一标识该图形验证码属于哪个用户的
:return: image/jpg
"""
# 实现主体业务逻辑：生成，保存，响应图形验证码
# 生成图形验证码
　　　　text, image = captcha.generate_captcha()

# 保存图形验证码
　　　　redis_conn = get_redis_connection('verify_code')
　　　　# redis_conn.setex('key', 'expires', 'value')
　　　　redis_conn.setex('img_%s' % uuid, IMAGE_CODE_REDIS_EXPIRES, text)

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

在verifications中创建constants.py内容如下

# 图形验证码有效期，单位：秒
IMAGE_CODE_REDIS_EXPIRES = 300

# 短信验证码有效期，单位：秒
SMS_CODE_REDIS_EXPIRES = 300

# 短信模板
SEND_SMS_TEMPLATE_ID = 1

# 60s内是否重复发送的标记
SEND_SMS_CODE_INTERVAL = 60

4.图形验证码前端逻辑

生成图形验证码，register.js register.html

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

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>

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