怎样用django生成图形验证码？
发布时间：2022-03-09 13:59:32 所属栏目：语言 来源：互联网
导读：怎样用django生成图形验证码？验证码的应用场景有很多，我们在登录或者注册网络账号的时候都会用到，因此，下面小编就给大家分享如何实现图形验证码功能，包括有，图形验证码获
|
怎样用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; } }, （编辑：周口站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
