圖形驗證碼的實現

接口設計

請求方式：GET

請求地址: image_codes/(?P<uuid>[\w-]+)/

響應結果：image/jpg

 

(1) 視圖

class ImageCodeView(View):
    """圖形驗證碼"""

    def get(self, request, uuid):
        """

        :param request:
        :param uuid: 通用唯一識別碼，用於唯一標識該圖形驗證碼屬於哪個用戶的
        :return: image/jpg
        """
        # 接收和校驗參數(uuid)
        # 實現主體業務邏輯（生成-保存-響應 圖形驗證碼）
        # 生成圖形驗證碼
        text, image = captcha.generate_captcha()
        # 保存圖形驗證碼
        redis_conn = get_redis_connection('verify_code')
        # redis_conn.setex('key', 'expires', 'value')
        redis_conn.setex('img_%s' % uuid, constants.IMAGE_CODE_REDIS_EXPIRES, text)
        # 響應圖形驗證碼
        # return http.HttpResponse('響應體', '數據類型')
        return http.HttpResponse(image, content_type='image/jpg')
        # 響應結果

說明：

1. 使用captcha生成圖形驗證碼（生成文字和對應的image）。

2. 向redis的2號庫存鍵值對，鍵是uuid，值是captcha生成的文字。

 

(2) redis數據庫的配置

    # 驗證碼
    "verify_code": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://192.168.18.9:6379/2",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },

爲驗證碼配置的2號庫

(3) 前端邏輯

JS

1. 定義生成UUID的函數

// 生成uuid
function generateUUID() {
    let d = new Date().getTime();
    if(window.performance && typeof window.performance.now === "function"){
        d += performance.now(); //use high-precision timer if available
    }
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        let r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}

2. 定義生成圖形驗證碼的方法

    methods:{  // 定義和實現事件方法
        // 生成圖形驗證碼的方法：封裝的思想，代碼複用
        generate_image_code(){
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },

3. vue生命週期：頁面加載完成會調用生成圖形驗證碼的方法

    mounted(){  // 頁面加載完會被調用的
        // 生成圖形驗證碼
        this.generate_image_code();
    },

 

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 v-bind: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>

說明：

1.  v-model="image_code" : vue data，用戶輸入的圖形驗證碼數據

2. @blur="check_image_code": vue methos，輸入框失去焦點時觸發校驗

3. v-bind:src="image_code_url": vue data，綁定url，用於顯示圖片

4. @click="generate_image_code"，點擊圖片時候觸發生成圖形驗證碼（複用）

 

(4) 流程分析

1. 前端js this.generate_image_code();打斷點

直接放通前端，前端將生成好的uuid拼接爲url向後端發起GET請求

2. 後端視圖text, image = captcha.generate_captcha()打斷點

發現後端接收到了前端發來的GET請求。

點擊Step Over發現text, image = captcha.generate_captcha()代碼生成了文字和圖片信息

繼續單步向下執行到return http.HttpResponse(image, content_type='image/jpg')前，發現redis的2號庫生成key爲img_e8fa2089-8e7f-496c-a80f-de4a960a76d2，value爲9KIT的鍵值對，和上述text吻合。

放通後端

3. 發現前端出現了9KIT的圖片

4. 點擊驗證碼圖片流程分析

點擊圖片後，後端視圖接收到uuid和GET請求的url。

後續步驟同上。