您当前的位置:首页 > IT编程 > python
| C语言 | Java | VB | VC | python | Android | TensorFlow | C++ | oracle | 学术与代码 | cnn卷积神经网络 | gnn | 图像修复 | Keras | 数据集 | Neo4j | 自然语言处理 | 深度学习 | 医学CAD | 医学影像 | 超参数 | pointnet | pytorch | 异常检测 | Transformers | 情感分类 | 知识图谱 |

自学教程:使用Django实现商城验证码模块的方法

51自学网 2021-10-30 22:35:54
  python
这篇教程使用Django实现商城验证码模块的方法写得很实用,希望能帮到您。

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

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

 验证码获取接口设计

img

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.图形验证码校验效果

img

至此验证码部分就说完了

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


pytorch通过训练结果的复现设置随机种子
pytorch 两个GPU同时训练的解决方案
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。