使用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实现从字符串中找出字符1的位置以及个数的方法
Aug 25 Python
跟老齐学Python之类的细节
Oct 13 Python
用Python计算三角函数之acos()方法的使用
May 15 Python
Python中的id()函数指的什么
Oct 17 Python
python 3.6.4 安装配置方法图文教程
Sep 18 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
Aug 05 Python
pytorch 批次遍历数据集打印数据的例子
Dec 30 Python
python常用运维脚本实例小结
Feb 14 Python
浅谈Python 函数式编程
Jun 20 Python
Python+unittest+requests+excel实现接口自动化测试框架
Dec 23 Python
使用Django的JsonResponse返回数据的实现
Jan 15 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
Feb 18 Python
pytorch通过训练结果的复现设置随机种子
Jun 01 #Python
matplotlib画混淆矩阵与正确率曲线的实例代码
Jun 01 #Python
详细介绍python类及类的用法
教你怎么用PyCharm为同一服务器配置多个python解释器
用python批量解压带密码的压缩包
May 31 #Python
变长双向rnn的正确使用姿势教学
如何在Python项目中引入日志
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
php include类文件超时问题处理
2015/02/06 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP创建XML接口示例
2019/07/04 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
使用TensorFlow实现SVM
2018/09/06 Python
python视频按帧截取图片工具
2019/07/23 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python with标签使用方法解析
2020/01/17 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
民事代理词范文
2015/05/25 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫