Django项目实践（商城）：五、验证（图形验证码、短信验证码）

laoluobo76

已于 2022-01-18 21:00:31 修改

阅读量2.3k

点赞数 1

分类专栏： Django项目 - lgshop商城文章标签： python django vue

于 2021-02-21 16:18:22 首次发布

本文链接：https://blog.csdn.net/laoluobo76/article/details/113358689

版权

在这里插入图片描述

（根据居然老师直播课内容整理）

验证在项目中可能多处使用，还有多种验证方法（本项目只涉及图形验证和短信验证），所以需要将验证独立成一个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是一个图形验证码生成包，复制到特定目录，导入即可使用
将验证码文件部分保存到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 +'/'
        },