使用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 :class="lazy" data-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 :class="lazy" data-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 商城验证码模块内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
