- 验证在项目中可能多处使用,还有多种验证方法(本项目只涉及图形验证和短信验证),所以需要将验证独立成一个APP应用
一、准备工作
1、创建子应用 verifications
- 在命令行,进入apps包目录下
- 执行命令:python …\manage.py startapp verifications
2 、注册此子应用
- ./lgshop/dev.py
3、定义主路由
- 如果在主路由中进行区分代码,直接象users子应用一样即可,如果不区分,就需要到子路由中去区分,如 验证模块、首页等
4、定义子路由
- ./apps/verifications/urls.py
- 因此模块无需单独使用,故不需要命名
一、生成图形验证码
1、生成图形验证码逻辑分析
- 前端向后端申请图形验证码,通过uuid来区分身份
- 后端生成图形验证码,并制作成验证码图片数据
- 将图形验证码强果保存到redis中,以便后面验证
- 将验证码图片数据传回前端进行展示
2、图形验证码接口设计
2.1 请求方式
选项 | 方案 |
---|---|
请求方法 | GET |
请求地址 | image_codes/(?P[\w-]+)/ |
2.2 请求参数:路径参数
参数名 | 类型 | 是否必传 | 说明 |
---|---|---|---|
uuid | string | 是 | 唯一编号 |
2.3 响应结果
3、生成图形验证码接口实现
-
生成图形验证码接口只提供GET即可
-
通用调用captcha.generate_captcha()即可生成图形验证码
- captcha是一个图形验证码生成包,复制到特定目录,导入即可使用
- captcha是一个图形验证码生成包,复制到特定目录,导入即可使用
-
将验证码文件部分保存到redis中,以使后面校验用
- 将验证码存放到redis 3数据库中
# ./lgshop/dev.py
"verify_code": {
# 验证码
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/2",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
}
- 用http方式,将图片数据传回前端
# ./verifications/views.py
from django.shortcuts import render
from django.views import View
from .libs.captcha.captcha import captcha
from django_redis import get_redis_connection
from django import http
class ImageCodeView(View):
"""图形验证码"""
def get(self,request,uuid):
'''
:param request:
:param uuid: 通用唯一识别符,用于标识唯一图片验证码属于哪个用户的
:return: image/jpg
'''
# 生成图片验证码
text, image = captcha.generate_captcha()
# print(text, image)
# 保存图像验证码,保存到redis
redis_conn = get_redis_connection('verify_code')
# name time value
redis_conn.setex('img_%s' % uuid, 300, text)
# 响应图形验证码
return http.HttpResponse(image, content_type='image/png')
4、生成图形验证码子路由定义
# ./verifications/urls.py
from django.urls import path, re_path
from . import views
urlpatterns = [
# 图形验证码 \w [A-Za-z0-9_]- uuid 78b4d5b7-5157-4b2a-bf48-ba616e169d66
re_path(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view())
]
- 注:[\w-]+:\w表示匹配字母数字及下划线,[]表示匹配里面包含的字符,+表示匹配多次
5、前端代码实现
5.1 JS方法实现
- 当注册页面一刷,图形验证码就应该更新并显示出来
- vue.js 中有一个方法:mounted(),页面加载完成之后会被调用的方法
- 在mounted()方法中,向后端发送一个请求,申请一个图形验证码
- 发送请求前,还需要生成一个uuid (common.js中generateUUID()可以生成uuid)
- 因 mounted()和 图形验证码点击事件都要调用 生成图形验证码调用
# ./static/js/register.js
data: {
// 数据对象
// ... ...
image_code_url: '',
uuid: '',
// 页面加载完成之后会被调用的方法
mounted(){
// 生成图形验证码
this.generate_image_code()
},
methods: {
// 生成图片验证码
generate_image_code(){
// uuid 发生变化
this.uuid = generateUUID();
this.image_code_url = '/image_codes/'+ this.uuid +'/'
},