Django项目（电商） 第三节 验证码 笔记

最新推荐文章于 2024-09-15 22:31:42 发布
最新推荐文章于 2024-09-15 22:31:42 发布
阅读量209 收藏
点赞数
分类专栏： django 文章标签： python web vue ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuhaiwenpps/article/details/108889644
版权

图形验证码 Redis Vue.js 验证码校验 Django
关键词由CSDN通过智能技术生成

验证码

图形验证码

图形验证码逻辑分析

在这里插入图片描述

· 新建应用Verifications
将图形验证码的文字信息保存到 Redis数据库，为短信验证码做准备。
UUID用于区分该图形验证码属于哪个用户，也可使用其他唯一标识信息来实现。

图形验证码接口设计

请求方式

选项方案
请求方法GET
请求地址image_codes/(?P<uuid>[\w-]+)/

请求参数：路径参数

参数名类型是否必传说明
uuidstring是唯一编号

响应结果
在这里插入图片描述

图形验证码接口定义

图形验证码视图

class ImageCodeView(View):
    '''图像验证码'''
    def get(self,request,uuid):
        '''

        :param uuid: 用于表示该图形验证码属于哪个用户
        :return: image/jpg
        '''
        return HttpResponse('image/jpg')

图形验证码后端逻辑

准备captcha拓展包

captcha拓展包用于后端生成图形 验证码
链接: https://pan.baidu.com/s/1q5F1rrMcTaMd_ap1SXPWDw 提取码: gyes

在这里插入图片描述
准备Redis数据库

"verify_code":{#验证码
        "BACKEND":"django_redis.cache.RedisCache",
        "LOCATION":"redis://127.0.0.1:6379/2",
        "OPTIONS":{
            "CLIENT_CALSS":"django_redis.client.DefaultClient",
        }
    }

图片验证码后端逻辑实现

from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
from verifications.libs.captcha.captcha import captcha
from django_redis import get_redis_connection


class ImageCodeView(View):
    '''图像验证码'''
    def get(self,request,uuid):
        '''

        :param uuid: 用于表示该图形验证码属于哪个用户
        :return: image/jpg
        '''
        #生成验证码，保存到redis，影响图形验证码
        text,image=captcha.generate_captcha()
        redis_conn = get_redis_connection('verify_code')
        # redis_conn.set('img_%s'%uuid,text)
        redis_conn.setex('img_%s'%uuid,300,text)

        # return HttpResponse('image/jpg')

        return HttpResponse(image,content_type='image/jpg')
class GetImageCodeView(View):
    def get(self, request, uuid):
        redis_coon = get_redis_connection('verify_code')
        code_text = redis_coon.get('img_%s' % uuid)
        print(code_text)
        if code_text == None :
            return JsonResponse({'code': 1, "errmsg": '验证码失效，请刷新验证码'})
        else:
            code_text=bytes.decode(code_text)
            return JsonResponse({'code': 0, "errmsg": 'ok', "code_text": code_text})

urls.py

urlpatterns = [
    re_path('image_codes/(?P<uuid>[\w-]+)/', views.ImageCodeView.as_view()),
    re_path('image_code_text/(?P<uuid>[\w-]+)/', views.GetImageCodeView.as_view()),
    ]

图片验证码前端逻辑实现

Vue实现图形验证码展示
register.js

 mounted(){
        this.generate_image_code();
    },
    methods:{
        //check_username:function(){
        //},
        generate_image_code(){
            this.uuid=generateUUID()
            this.image_code_url = '/image_codes/'+this.uuid+"/"
            this.image_code_text_url='/image_code_text/'+this.uuid+"/"
        },
      }

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>

Vue实现图形验证码校验

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" v-model="image_code" @blur="check_image_code">
							<span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span>
						</li>

register.js

   check_image_code(){
            axios.get(this.image_code_text_url,{responseType:"json"})
            .then(response=>{
            if(response.data.code ==0){
                if(response.data.code_text != this.image_code.toUpperCase()){
                this.error_image_code_message="验证码错误"
                this.error_image_code=true
                this.generate_image_code();
                }else{
                this.error_image_code=false}
                }else{
                    this.error_image_code_message=response.data.errmsg
                this.error_image_code=true
                }})
                .catch(error=>{
                console.log(error.response)})
           },

完整的文件内容

views.py

from django.shortcuts import render
from django.views import View
from django.http import HttpResponse,JsonResponse
from verifications.libs.captcha.captcha import captcha
from django_redis import get_redis_connection


class ImageCodeView(View):
    '''图像验证码'''
    def get(self,request,uuid):
        '''

        :param uuid: 用于表示该图形验证码属于哪个用户
        :return: image/jpg
        '''
        #生成验证码，保存到redis，影响图形验证码
        text,image=captcha.generate_captcha()
        redis_conn = get_redis_connection('verify_code')
        # redis_conn.set('img_%s'%uuid,text)
        redis_conn.setex('img_%s'%uuid,30,text)

        # return HttpResponse('image/jpg')

        return HttpResponse(image,content_type='image/jpg')


class GetImageCodeView(View):
    def get(self, request, uuid):
        redis_coon = get_redis_connection('verify_code')
        code_text = redis_coon.get('img_%s' % uuid)
        print(code_text)
        if code_text == None :
            return JsonResponse({'code': 1, "errmsg": '验证码失效，请刷新验证码'})
        else:
            code_text=bytes.decode(code_text)
            return JsonResponse({'code': 0, "errmsg": 'ok', "code_text": code_text})

register.js

//es6
let vm = new Vue({
    el: "#app",
    //修改vue读取变量的语法
    delimiters:['[[',']]'],
    data:{
    // v-model
    username:"",
    password:"",
    password2:"",
    mobile:"",
    allow:"",
    image_code_url:'',
    image_code_text_url:'',
    uuid:'',
    image_code:'',
    //v-show
    error_name:false,
    error_password:false,
    error_password2:false,
    error_mobile:false,
    error_allow:false,
    error_image_code:false,

    // error_message
    error_name_message:"",
    error_mobile_message:"",
    error_image_code_message:"",
    },
    //页面加载完成后会被调用的方法
    mounted(){
        this.generate_image_code();
    },
    methods:{
        //check_username:function(){
        //},
        generate_image_code(){
            this.uuid=generateUUID()
            this.image_code_url = '/image_codes/'+this.uuid+"/"
            this.image_code_text_url='/image_code_text/'+this.uuid+"/"
        },
        check_username(){
            let re = /^[a-aA-XZ0-9_-]{5,20}$/;
            if(re.test(this.username)){
            //匹配成功不展示
                this.error_name=false
            }else{
            this.error_name =true
            this.error_name_message= '请输入5-20个字符的用户名'
            }
            if(this.error_name == false){
                let url='/users/usernames/'+this.username+'/count/'

                axios.get(url,{

                    responseType:'json'
            })
            //请求成功的处理
            .then(response=>{
                if (response.data.count == 1){
                //
                    this.error_name_message='用户名已经存在'
                    this.error_name=true
                }else{
                    this.error_name=false
                }
            })
            //请求失败的处理
            .catch(error=>{
                console.log(error.response)
            })
            }
        },
        check_password(){
        let re = /^[a-aA-XZ0-9_-]{8,20}$/;
            if(re.test(this.password)){
            //匹配成功不展示
                this.error_password=false
                }else{
                this.error_password = true
                }
        },
        check_password2(){
            if(this.password != this.password2){
                this.error_password2 = true
            }else{
                this.error_password2 = false
            }
        },
        check_mobile(){
        let re = /^1[3456789]\d{9}$/;
        if (re.test(this.mobile)){
            this.error_mobile = false
        }else{
            this.error_mobile = true
            this.error_mobile_message = "请输入正确的手机号码"
        }
        if(this.error_name == false){
                let url='/users/mobiles/'+this.mobile+'/count/'

                axios.get(url,{
                    responseType:'json'
            })
            //请求成功的处理
            .then(response=>{
                if (response.data.count == 1){
                //
                    this.error_mobile_message='手机号已经存在'
                    this.error_mobile=true
                }else{
                    this.error_mobile=false
                }
            })
            //请求失败的处理
            .catch(error=>{
                console.log(error.response)
            })
            }
        },
        check_allow(){
            if(!this.allow){
                this.error_allow = true
            }else{
                this.error_allow = false
            }
        },
        check_image_code(){
            axios.get(this.image_code_text_url,{responseType:"json"})
            .then(response=>{
            if(response.data.code ==0){
                if(response.data.code_text != this.image_code.toUpperCase()){
                this.error_image_code_message="验证码错误"
                this.error_image_code=true
                this.generate_image_code();
                }else{
                this.error_image_code=false}
                }else{
                    this.error_image_code_message=response.data.errmsg
                this.error_image_code=true
                }})
                .catch(error=>{
                console.log(error.response)})
           },
        on_submit(){//表单提交
            if(this.error_name == true || this.error_password || this.error_password2 || this.error_mobile == true || this.error_allow == true || this.error_image_code == true|| this.username == "" || this.password == "" || this.password2 == "" || this.mobile == "" || this.allow == false){
        //禁止表单提交
            window.event.returnValue=false
        }
        },
    }
})
wuhaiwenpps
关注
专栏目录
Python第三阶段学习redis day01
JanLEE
07-10 235
Redis-day01-note Redis介绍 特点及优点 1、开源的，使用C编写，基于内存且支持持久化 2、高性能的Key-Value的NoSQL数据库 3、支持数据类型丰富，字符串strings，散列hashes，列表lists，集合sets，有序集合sorted sets 等等 4、支持多种编程语言（C C++ Python Java PHP ... ） 5、单进程单线程 与其他数据库对比 1、MySQL : 关系型数据库，表格，基于磁盘，慢 2、MongoDB：键值对文档型数据库，值为类
python中数据类型存储_浅谈Python中的数据类型
weixin_39798943的博客
12-21 542
浅谈Python内置对象类型——数字篇(附py2和py3的区别之一)Python是一门面向对象的编程设计语言，程序中每一样东西都可以视为一个对象。Python内置对象可以分为简单类型和容器类型，简单类型主要是数值型数据，而容器类型是可以包含其他对象类型的集体，如序列、元组、映射等。在简单类型对象中，Python的数值数据包括整型(int)、长整型(long)、浮...文章python进阶者2020...
Django项目（六）图形验证码的实现
m0_55584761的博客
12-30 1432
这次我们完成图形验证码的实现过程 图形验证码逻辑分析 准备captcha扩展包 captcha扩展包用于后端生成图形验证码 图形验证码后端逻辑 from django.shortcuts import render from django.views import View from verifications.libs.captcha.captcha import captcha from django_redis import get_redis_connection from django.htt
生成验证码图片的第三方包——captcha
user_san的博客
10-19 3916
1、在Django工程的apps中，新建子应用verifications ，里面新建包libs，存放生成图片验证码的扩展包captcha 2、安装Pillow的图片库 添加captcha完成后,如果直接使用会报错: 报错原因：captcha 框架, 需要依赖 Pillow 这个包 在虚拟环境–安装 Python 处理图片的库 Pillow： pip install Pillow -i https://pypi.tuna.tsinghua.edu.cn/simple captcha 这个框架中有一个
Python3版本使用captcha(图片验证码)错误总结
weixin_44340326的博客
03-29 3719
1.提示错误 ModuleNotFoundError: No module named 'cStringIO' 解决方法: 将’cStringIO’改为’io’ from io import StringIO 2.提示错误 AttributeError: module 'string' has no attribute 'uppercase' AttributeError: module 's...
attributeError:'module' object has no attribute ** 解决办法
diandu3502的博客
01-23 2277
写了一个小脚本，执行的时候报错： 1 Traceback (most recent call last): 2 File "F:/test/qrcode.py", line 109, in generateQr 3 img = qrcode.make(textcontent) 4 AttributeError: 'module' object has no at...
登录验证码实现（Captcha）
热门推荐
红袖添香的博客
07-20 1万+
登录验证码 登录验证是一般系统都会有的功能，验证的方式也多种多样，比如输入式验证码，拖动式验证条，拖动式验证拼图等等。 我们这里先实现常规的输入验证码的方式，右边显示验证码图片，点击可刷新，左边输入验证码。如下图为实现的效果。 实现案例 验证码的实现需要前后端协同，脱离彼此则不可用，故将前后端的实现放在一起，不再另写前端教程。 后端 1.添加依赖 打开kitty-admin 工程，添加maven依赖。 pom.xml <!-- kaptcha --> <depende.
Django 框架学习基础笔记
Delong
04-09 2991
Django 千锋培训读书笔记DjangoDjango简介BS架构web项目搭建1 -- 虚拟环境1.定义视图-View2.为视图设置url-confDjango项目6 - 模板1.定义模板配置2.定义模板文件静态资源：虚拟环境补充View配置url-pattern技巧请求方式表单传参接收请求参数接收Get请求参数接收Post请求参数补充：接收多值参数 = getlist()Get和Post请求区...
网上商城实战笔记包含源码
04-24
4. **API接口开发**：商城系统往往需要与第三方服务交互，如支付平台（如支付宝、微信支付）、物流跟踪API等，需要开发符合RESTful原则的API接口。 5. **安全性**：网络安全至关重要，包括用户数据加密、防止SQL...
零基础也能快速上手的python实战项目----美多商城
技术专家
06-08 804
美多商城属于B2C电商平台，商城销售自营商品给顾客。系统前台包括商品列表、商品详情、商品搜索、购物车、订单支付、评论、用户中心等核心业务功能，系统后台包括商品管理、运营管理、用户管理、系统设置等系统管理功能。通过该项目，学员能够学习包括PythonWeb、Django+前端、Vue等技术框架， MySQL数据库存储、读写分离操作以及Redis缓存和RabbitMQ等技术解决方案。......
django-simple-captcha验证码的使用
。
12-07 951
第三方库：django-simple-captcha 一、安装配置captcha： 1. 【Terminal】使用命令行安装 pip install django-simple-captcha 2. 把captcha添加到Django项目下的settings.py文件已安装app中 INSTALLED_APPS = [ …… 'captcha', ] 3. 【Terminal】...
图片验证码接口（干货）
Passerby_one的博客
10-06 1415
1.django 缓存设置 django的六种缓存（mysql+redis） ：https://www.cnblogs.com/xiaonq/p/7978402.html#i6 1.1 安装Django缓存模块 pip install django-redis==4.12.1 1.2 syl/settings.py 中配置缓存 # 缓存配置 CACHES = { # django存缓默认位置,redis 0号库 # default: 连接名称 "default": {
Django项目实战——3—(图形验证码后端逻辑、短信验证码、短信验证码后端逻辑)
weixin_42118531的博客
08-04 1207
1、图形验证码后端逻辑 准备captcha扩展包 captcha扩展包用于后端生成图形验证码,captcha扩展包可以从网上百度找到相关代码和文件，fonts是支持的字体文件，包含有actionj.ttf、Arial.ttf、Georgia.ttf。 生成验证码文件：apps/verifications/libs/captcha/captcha.py #!/usr/bin/env python # -*- coding: utf-8 -*- # refer to `https://bitbucket.o
Python项目实战 3.1：验证码.图形验证码
mengnf的专栏
01-14 1440
Python项目实战：验证码.图形验证码
使用Captcha做验证码，存到数据库中，登录时候后端做判空，过期，错误提示，样式配置
weixin_45559862的博客
03-24 1123
pom依赖 <!--验证码--> <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</artifactId> <version>0.0.9</version> </dependency> <!--时间工具--> <dependency> .
【python】django中图形验证码
weixin_56721790的博客
05-20 813
生成验证码图片的第三方包–captcha 一、准备 captcha 扩展包 我们生成图形验证码, 需要借助外部框架: captcha. 这里有大牛的captcha包 二、安装Pillow的图片库 1. 添加captcha完成后,如果直接使用会报错: 报错原因：captcha 框架, 需要依赖 Pillow 这个包 在虚拟环境–安装 Python 处理图片的库 Pillow： # 注意: 需要安装: pip install Pillow -i https://pypi.tuna.tsi
Springboot集成Kaptcha
wx774891的博客
09-08 269
1.添加pom依赖 <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</artifactId> <version>0.0.9</version> </dependency> <dependency> <groupId>commons-io&lt.
Tcl lnit error: Can’t find a usable init.tcl in the following directories 问题解决
最新发布
梦想闹钟
09-15 565
实际研究后发现，其实py2exe已经把打包需要的lib放在dist文件夹下了，但是打包后的程序运行后却没有去lib下找，而是去找系统自带的环境变量里找，所以找不到。这个问题出现在我用py2exe打包了一个包含tkinter的图形化界面，在当前电脑上运行无问题，在移动到新电脑上后提示报错、getcwd用于获取当前工作目录绝对路径，在设置环境的变量的时候它用的是绝对路径-所以也导致了在当前电脑上能用而移动后不能用。解决方法是在你的程序里重新设置下环境变量，而且是用相对路径的形式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值