使用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爬虫入门教程之点点美女图片爬虫代码分享
Sep 02 Python
Python脚本实现格式化css文件
Apr 08 Python
基于wxpython开发的简单gui计算器实例
May 30 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
Nov 05 Python
使用Python写一个贪吃蛇游戏实例代码
Aug 21 Python
python中使用%与.format格式化文本方法解析
Dec 27 Python
python3中获取文件当前绝对路径的两种方法
Apr 26 Python
Python 统计字数的思路详解
May 08 Python
把csv文件转化为数组及数组的切片方法
Jul 04 Python
python3的数据类型及数据类型转换实例详解
Aug 20 Python
使用pth文件添加Python环境变量方式
May 26 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
Nov 12 Python
pytorch通过训练结果的复现设置随机种子
Jun 01 #Python
matplotlib画混淆矩阵与正确率曲线的实例代码
Jun 01 #Python
详细介绍python类及类的用法
教你怎么用PyCharm为同一服务器配置多个python解释器
用python批量解压带密码的压缩包
May 31 #Python
变长双向rnn的正确使用姿势教学
如何在Python项目中引入日志
You might like
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php微信开发之图片回复功能
2018/06/14 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
php命令行模式代码实例详解
2021/02/26 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
详解django自定义中间件处理
2018/11/21 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
为什么python比较流行
2020/06/19 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python定义具名元组实例操作
2021/02/28 Python
ORACLE第二个十问
2013/12/14 面试题
在校硕士自我鉴定
2014/01/23 职场文书
初中家长寄语
2014/04/02 职场文书
2014财务年度工作总结
2014/11/11 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS
MySQL sql模式设置引起的问题
2022/05/15 MySQL