使用Django实现商城验证码模块的方法
作者:测试轩 发布时间:2023-11-04 04:46:23
标签: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.图形验证码校验效果
至此验证码部分就说完了
来源:https://blog.csdn.net/qq_34508740/article/details/117432643
0
投稿
猜你喜欢
- 先来看一个老掉牙的故事:福特说,我在设计汽车之前,到处去问人们“需要一个什么样的更好的交通工具?”,几乎所有人的答案都是 ── 一匹“更快的
- 使用在Safari和WebKit中可用的CSS高级特性,你可以为你的网站和网络应用带来一个新的级别的令人兴奋的东西。WebKit是Safar
- Insert 和 Update假设现在你要把下面的数据插入到数据库中.ID = 3TheDate=mktime(0,0,0,8,31,200
- 首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中。第二,代码中一定要有日志记录和完善的报错并记录报
- 有2个不同的方法增加用户:通过使用GRANT语句或通过直接操作MySQL授权表。比较好的方法是使用GRANT语句,因为他们是更简明并且好像错
- 原来字母还可以组合成各种动物图案,真是佩服设计师的奇思妙想,很可爱,超级有趣的组合!Bembo's Zoo 猴子:羊是牛吗,勤劳的水
- 最近在做文章页盖楼显示的项目,数据来源是跟贴系统生成的UTF8格式的JSON数据。文章页的HTML编码格式是GB2312,在javascri
- 解决了ACCESS数据库路径的问题!采用DBType=0或DBType=1来区分AC库还是MSSQL库具体采用AC库时应注意的事项,请看程序
- 我在用 ASP 写一个数据库的应用的时候,总是被那些看起来好好的SQL语句执行起来产生的错误代码搞得头疼,请问有没有更好的解决办法啊?有,我
- 全文索引在 MySQL 中是一个 FULLTEXT 类型索引。FULLTEXT 索引用于 MyISAM 表,可以在 CREATE TABLE
- 相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Floa
- modelform是model衍生出来的form .modelform的用法非常死.首先在models.py里创建模型表.所有的form组件
- 本文实例讲述了Symfony2实现从数据库获取数据的方法。分享给大家供大家参考,具体如下:假设有一张表:test, 字段:name,colo
- 一、去除空格strip()" xyz ".strip() &n
- 隐藏你的.php文件 隐藏你的.php文件 今天做PHP在线手册镜像的时候看到了这个方法,哈哈,以前都没有注意到,所以说,手册是
- 在许多用SQL Server实现的新的企业系统设计中,系统设计师需要在给数据结构和管理应用程序逻辑的定位上做出具有关键性意义的决定。SQL
- 效果: 思路:利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV。代码:<
- 代码如下:---找出促销活动中销售额最高的职员 ---你刚在一家服装销售公司中找到了一份工作,此时经理要求你根据数据库中的两张表
- 随着网络的发展,人们通过各种方式使用它。今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等。事实
- HTML5 中 div section article 的区别刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对