小白學Python-使用Django實現商城驗證碼模塊

本文主要涉及圖形驗證碼的相關功能，主要包括，圖形驗證碼獲取、驗證碼文字存儲、驗證碼生成等。

圖形驗證碼接口設計和定義

驗證碼獲取接口設計

uuid做爲路徑參數，惟一標識驗證碼所屬用戶

新建應用

驗證碼的相關邏輯咱們用一個單獨的app處理，因此這裏須要新建一個叫verifications的app，建好app後，打開views.py視圖文件，編寫一個驗證碼的視圖類

class ImageCodeView(View):
    """圖形驗證碼"""
    def get(self, request, uuid):
        """
        :param request: 請求對象
        :param uuid: 惟一標識圖形驗證碼所屬於的用戶
        :return: image/jpg
        """
        pass

而後配置路由

項目路由配置：

path('', include('apps.verifications.urls')),配置app的路由

path('image_codes/``uuid:uuid``/', views.ImageCodeView.as_view()),

驗證碼處理相關準備工做

• 準備captcha擴展包

​ 把captcha擴展包放到verifications的lib目錄下，而後須要安裝Python的圖片處理庫，pip install Pillow

• 準備Redis數據庫

redis用來存儲圖片驗證碼上的數字，後面會用來作校驗

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

• 圖形驗證碼後端邏輯實現

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

    def get(self, request, uuid):
        """
        實現圖形驗證碼邏輯
        :param uuid: UUID
        :return: image/jpg
        """
        # 生成圖形驗證碼
        text, image = captcha.generate_captcha()

        # 保存圖形驗證碼
        # 使用配置的redis數據庫的別名，建立鏈接到redis的對象
        redis_conn = get_redis_connection('verify_code')
        # 使用鏈接到redis的對象去操做數據存儲到redis
        # redis_conn.set('key', 'value') # 由於沒有有效期
        # 圖形驗證碼必需要有有效期的：設計是300秒有效期
        # redis_conn.setex('key', '過時時間', 'value')
        redis_conn.setex('img_%s' % uuid, 300, text)

        # 響應圖形驗證碼: image/jpg
        return http.HttpResponse(image, content_type='image/jpg')

圖形驗證碼前端邏輯

• Vue實現圖形驗證碼展現

1.register.js

mounted(){
    // 生成圖形驗證碼
    this.generate_image_code();
},
methods: {
    // 生成圖形驗證碼
    generate_image_code(){
        // 生成UUID。generateUUID() : 封裝在common.js文件中，須要提早引入
        this.uuid = generateUUID();
        // 拼接圖形驗證碼請求地址
        this.image_code_url = "/image_codes/" + this.uuid + "/";
    },
    ......
}

2.register.html

<li>
    <label>圖形驗證碼:</label>
    <input type="text" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="圖形驗證碼" class="pic_code">
    <span class="error_tip">請填寫圖形驗證碼</span>
</li>

3.圖形驗證碼展現和存儲效果

• Vue實現圖形驗證碼校驗

1.register.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 :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>

2.register.js

check_image_code(){
    if(!this.image_code) {
        this.error_image_code_message = '請填寫圖片驗證碼';
        this.error_image_code = true;
    } else {
        this.error_image_code = false;
    }
},

3.圖形驗證碼校驗效果

至此驗證碼部分就說完了

下節預告：用戶登陸模塊