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中,之后將圖片返回給瀏覽器,頁面得以顯示圖片驗證碼.

源碼