图片验证码
图片验证码生成与展示图片验证码认证 用户注册 图片验证码
uuid, 唯一身份标识码， 在用户注册之前，网站没有任何东西来区分不同的客户端， 因此在客户端生成一个 uuid， django中通过不同的uuid来区分不同的客户端。
路由匹配
from django.urls import pathfrom user.views import *urlpatterns = [#/users/image_code/xxx/ 生成图片验证码 path('image_code/
视图接口
import randomimport stringimport redisfrom django.http.response import HttpResponsefrom rest_framework.views import APIViewfrom rest_framework.response import Responsefrom user.models import *from captcha.image import ImageCaptchaclass ImageCode(APIView): def get(self, request, uuid):# 1.接收参数uuid# 2、生成随机字符串 # string.ascii_letters: 所有字母的字符串（大小写） # string.digits： 所有的数字字符串（0-9） # random.sample： 随机采集指定位数的字符 salt = ''.join(random.sample(string.ascii_letters + string.digits, 4)) # 2、生成 图片验证码 流 img = ImageCaptcha() image = img.generate(salt) #io.BytesIO对象 #from PIL import Image #im = Image.open(image) #im.show() #查看生成的图片验证码 # 3、连接redis redis_conn = redis.Redis(host='localhost', port=6379, db=0) # 4、存储图片验证码，设置过期时间10分钟 redis_conn.setex(str(uuid), 60 * 10, salt) # 5、返回图片流 return HttpResponse(image, content_type='image/png')
Vue前端加载图片验证码定义方法genImageCode
生成uuid拼接图片验证码的url 将拼接好的图片验证码url绑定到 img 标签中默认的图片验证码，初始加载页面时，需要 在钩子函数中 执行方法主动生成图片验证码，定义图片的点击事件，触发方法，生成新的uuid，重新请求图片验证码
图片验证码认证 django后端
路由配置
#校验图片验证码#/users/check_image_code/?imageCodeID=xxx&imageCode=xxxxpath('check_image_code/', CheckImageCode.as_view()),
视图接口
class CheckImageCode(APIView): def get(self, request): """ 1、接收前端发送的参数，imageCodeID & imageCode 2、取出redis中的 图片验证码 如果取不到，说明过期，响应204 如果取到验证码，进行对比，注意： 统一大小写 3、根据对比结果，返回响应 对比成功，响应200 对比失败，响应204 """ #1、接收前端发送的参数，imageCodeID & imageCode uuid_ = request.query_params.get("imageCodeID") image_code_ = request.query_params.get("imageCode") # 2、取出redis中的 图片验证码 # 如果取不到，说明过期，响应204 # 如果取到验证码，进行对比，注意： 统一大小写 redis_conn = redis.Redis(host='localhost', port=6379, db=0) image_code = redis_conn.get(uuid_) if not image_code: return Response({"code":204, 'msg': '验证码过期'}) # 3. # 根据对比结果，返回响应 # 对比成功，响应200 # 对比失败，响应204 if image_code.decode().lower() == image_code_.lower(): return Response({"code":200, 'msg': 'ok'}) else: return Response({"code":204, 'msg': '验证码错误'})
Vue前端校验输入的图片验证码// 校验图片验证码let validateImageCode = (rule, value, callback) => { if (value === "") { return callback(new Error("请输入图片验证码")); } // 图片验证码是由字母、数字组成，长度为4 const iamgeCodeRule = /^[a-zA-Z0-9]{4}$/; if (iamgeCodeRule.test(value)) { this.$axios.get("/users/check_image_code/", { params:{ imageCodeID: this.imageCodeID, imageCode: this.RegisterUser.imageCode, } }) .then(res => { if(res.data.code == 200){ this.$refs.ruleForm.validateField("checkPass"); return callback(); }else{ return callback(new Error(res.data.msg)) } }).catch(err => { return Promise.reject(err) }) } else { return callback(new Error("图片验证码不正确！")); }};
用户注册 Vue前端接口点击注册，触发函数如下：
// 用户注册Register() { // 是否同意用户协议 if(!this.aggree){ this.flag = true return } // 已勾选，则不显示提示信息 this.flag = false // 通过element自定义表单校验规则，校验用户输入的用户信息 this.$refs["ruleForm"].validate((valid) => { //如果通过校验开始注册 if (valid) { this.$axios .post("/users/register/", { userName: this.RegisterUser.name, pwd: this.RegisterUser.pass, mobile: this.RegisterUser.mobile, agree: this.aggree, }) .then((res) => { // 200代表注册成功，其他的均为失败 if (res.data.code == 200) { // 隐藏注册组件 this.isRegister = false; // 弹出通知框提示注册成功信息 this.notifySucceed(res.data.msg); } else { // 弹出通知框提示注册失败信息 this.notifyError(res.data.msg); } }) .catch((err) => { return Promise.reject(err); }); } else { return false; } });},
django后端路由匹配
# /users/register/path('register/', Register.as_view()),
视图接口
from rest_framework.views import APIViewfrom rest_framework.response import Responsefrom user.models import *#注册class Register(APIView): def post(self, request): # 前端传入 userName, pwd, mobile, agree username = request.data.get("userName") password = request.data.get("pwd") mobile = request.data.get("mobile") agree = request.data.get("agree") #验证参数 if not all([username, password, mobile]): return Response({"code":204, "msg":"注册信息不完整！"}) if not agree: return Response({"code":204, 'msg':"未同意用户使用协议"}) # 存入数据库 User.objects.create_user(username=username, password=password, mobile=mobile) # 返回响应 return Response({"code":200, "msg":"注册成功！"})