使用Django实现商城验证码模块的方法


Posted in Python onJune 01, 2021

本文主要涉及图形验证码的相关功能,主要包括,图形验证码获取、验证码文字存储、验证码生成等。

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

 验证码获取接口设计

使用Django实现商城验证码模块的方法

uuid作为路径参数,唯一标识验证码所属用户

新建应用

验证码的相关逻辑我们用一个单独的app处理,所以这里需要新建一个叫verifications的app,建好app后,打开views.py视图文件,编写一个验证码的视图类

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

然后配置路由

项目路由配置:

path('', include('apps.verifications.urls')),配置app的路由

path('image_codes/``uuid:uuid``/', views.ImageCodeView.as_view()),

验证码处理相关准备工作

准备captcha扩展包

​ 把captcha扩展包放到verifications的lib目录下,然后需要安装Python的图片处理库,pip install Pillow

准备Redis数据库

redis用来存储图片验证码上的数字,后面会用来做校验

"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: UUID
        :return: image/jpg
        """
        # 生成图形验证码
        text, image = captcha.generate_captcha()

        # 保存图形验证码
        # 使用配置的redis数据库的别名,创建连接到redis的对象
        redis_conn = get_redis_connection('verify_code')
        # 使用连接到redis的对象去操作数据存储到redis
        # redis_conn.set('key', 'value') # 因为没有有效期
        # 图形验证码必须要有有效期的:设计是300秒有效期
        # redis_conn.setex('key', '过期时间', 'value')
        redis_conn.setex('img_%s' % uuid, 300, text)

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

图形验证码前端逻辑

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>

3.图形验证码展示和存储效果

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

3.图形验证码校验效果

使用Django实现商城验证码模块的方法

至此验证码部分就说完了

到此这篇关于使用Django实现商城验证码模块的方法的文章就介绍到这了,更多相关Django 商城验证码模块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
跟老齐学Python之用Python计算
Sep 12 Python
Python中splitlines()方法的使用简介
May 20 Python
pandas DataFrame数据转为list的方法
Apr 11 Python
python将处理好的图像保存到指定目录下的方法
Jan 10 Python
浅谈python新式类和旧式类区别
Apr 26 Python
Python制作微信好友背景墙教程(附完整代码)
Jul 17 Python
使用 Python 读取电子表格中的数据实例详解
Apr 17 Python
基于Python测试程序是否有错误
May 16 Python
Python Celery异步任务队列使用方法解析
Aug 10 Python
python tkinter的消息框模块(messagebox,simpledialog)
Nov 07 Python
聊一聊python常用的编程模块
May 14 Python
OpenCV中resize函数插值算法的实现过程(五种)
Jun 05 Python
pytorch通过训练结果的复现设置随机种子
Jun 01 #Python
matplotlib画混淆矩阵与正确率曲线的实例代码
Jun 01 #Python
详细介绍python类及类的用法
教你怎么用PyCharm为同一服务器配置多个python解释器
用python批量解压带密码的压缩包
May 31 #Python
变长双向rnn的正确使用姿势教学
如何在Python项目中引入日志
You might like
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
js创建数组的简单方法
2016/07/27 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python 使用get_argument获取url query参数
2017/04/28 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python输入二维数组方法
2018/04/13 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python实现flappy bird小游戏
2018/12/24 Python
python生成随机红包的实例写法
2019/09/02 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
几个Shell Script面试题
2012/08/31 面试题
翻译专业应届生求职信
2013/11/23 职场文书
高中生自我评语大全
2014/01/19 职场文书
高一英语教学反思
2014/01/22 职场文书
旅游市场营销方案
2014/03/09 职场文书
个人工作主要事迹
2014/05/08 职场文书
消防安全标语
2014/06/07 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
优秀班主任申报材料
2014/12/16 职场文书