Django achieve image verification code

Django achieve the image verification code

Renderings:

Realization of ideas:

Registration page enter verification code label:

<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"In view of the function for receiving, as:

pic_code = request.POST.get('pic_code')

v-model="image_code"It used to obtain the value of two-way binding in vue, as:

data:{image_code:''}

@blur="check_image_code"Vue check method used to call in, such as:

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 attribute is bound shorthand, complete the form: v-bind:src="image_code_url", be careful not to be written like this: src="{{ image_code_url }}"/.

This is because the binding property CAPTCHA image is dynamically generated, each new image path are different, so src dynamically assigned.

So vue in datathe field to this statement:

data:{
    image_code_url: ''
}

@click="generate_image_code">Is a mouse click, is to "change the picture", js corresponding method is as follows:

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);
        }
}

When the page loads, the method request verification picture should be loaded by default (ie generate_image_codemethod), implementation is:

mounted: function () {
        // 向服务器获取图片验证码
        this.generate_image_code();
}

When the generate_image_codemethod is finished, it will return a url, which reads: 主机名+/image_code/+图片唯一uuidWhen src tag with url will automatically load, namely server requests picture.

Background t should be provided to generate image view function verification code, name it ImageCodeView, as follows:

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')

CaptchaIs a verification picture generated graphics tools

After generating code, the field will need to be placed redis, after which the picture is returned to the browser, the page to be displayed image verification code.

Source