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中,之后将图片返回给浏览器,页面得以显示图片验证码.

源码