Django实现图片验证码
Posted lulujunsir
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django实现图片验证码相关的知识,希望对你有一定的参考价值。
Django中图片验证码的实现
效果图:
实现思路:
注册页面提供验证码输入标签:
<label>图形验证码:</label>
<input type="text" name="pic_code" id="pic_code" v-model="image_code" @blur="check_image_code">
<img :src="image_code_url" @click="generate_image_code">
<span v-show="error_image_code">[[ error_image_code_message ]]</span>
name="pic_code"
用来在视图函数中接收,如:pic_code = request.POST.get('pic_code')
v-model="image_code"
用来在vue中获取双向绑定的值,如:data:{image_code:''}
@blur="check_image_code"
用来调用vue中的校验方法,如:methods:{//校验图形验证码 check_image_code: function () { // 校验非空 if (this.image_code == "") { this.error_image_code_message = "图形验证码不能为空"; this.error_image_code = false; } }}
:src="image_code_url"
是vue中绑定src属性的简写,完整形式为:v-bind:src="image_code_url"
,要注意不能写成这样:src="{{ image_code_url }}"/
.绑定这个属性是因为验证码图片是动态生成的,每一个新的图片路径均不同,所以src需要动态赋值.
于是vue中的
data
中要声明这个字段:data:{ image_code_url: '' }
@click="generate_image_code">
是一个鼠标点击事件,作用是"换图片",其对应的js方法如下:methods:{ generateUUID: function () { var d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); //use high-precision timer if available } var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; }, // 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性 generate_image_code: function () { // 生成一个编号 : 严格一点的使用uuid保证编号唯一, 不是很严谨的情况下,也可以使用时间戳 this.image_code_id = this.generateUUID(); // 设置页面中图片验证码img标签的src属性 this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/"; console.log(this.image_code_url); } }
当页面加载时,请求验证码图片的方法应该被默认加载(即generate_image_code
方法),实现方式为:
mounted: function () {
// 向服务器获取图片验证码
this.generate_image_code();
}
当
generate_image_code
方法执行完毕,会返回一个url,其内容为:主机名+/image_code/+图片唯一uuid
,当src标签有了url就会自动加载,即向服务器请求图片.
后台应提供t生成图片验证码的视图函数,将其命名为ImageCodeView
,内容如下:
class ImagecodeView(View):
def get(self, request, uuid):
# 生成图形验证码数据:字符code,图片image,得到验证码字符以及图片
text, code, image = captcha.generate_captcha()
# 获取redis连接对象
redis_cli = get_redis_connection('verify_code')
# 向redis中写数据
redis_cli.setex(uuid, constants.IMAGE_CODE_EXPIRES, code)
return http.HttpResponse(image, content_type='image/png')
Captcha
是一个生成图形验证码图片的工具
生成验证码后,将需要的字段放在redis中,之后将图片返回给浏览器,页面得以显示图片验证码.
以上是关于Django实现图片验证码的主要内容,如果未能解决你的问题,请参考以下文章