本文主要涉及圖形驗(yàn)證碼的相關(guān)功能，主要包括，圖形驗(yàn)證碼獲取、驗(yàn)證碼文字存儲、驗(yàn)證碼生成等。
圖形驗(yàn)證碼接口設(shè)計(jì)和定義
驗(yàn)證碼獲取接口設(shè)計(jì)
uuid作為路徑參數(shù)，唯一標(biāo)識驗(yàn)證碼所屬用戶
新建應(yīng)用
驗(yàn)證碼的相關(guān)邏輯我們用一個單獨(dú)的app處理，所以這里需要新建一個叫verifications的app，建好app后，打開views.py視圖文件，編寫一個驗(yàn)證碼的視圖類
class ImageCodeView(View):
"""圖形驗(yàn)證碼"""
def get(self, request, uuid):
"""
:param request: 請求對象
:param uuid: 唯一標(biāo)識圖形驗(yàn)證碼所屬于的用戶
:return: image/jpg
"""
pass
然后配置路由
項(xiàng)目路由配置：
path('', include('apps.verifications.urls')),配置app的路由
path('image_codes/``uuid:uuid``/', views.ImageCodeView.as_view()),
驗(yàn)證碼處理相關(guān)準(zhǔn)備工作
準(zhǔn)備captcha擴(kuò)展包
把captcha擴(kuò)展包放到verifications的lib目錄下，然后需要安裝Python的圖片處理庫，pip install Pillow
準(zhǔn)備Redis數(shù)據(jù)庫
redis用來存儲圖片驗(yàn)證碼上的數(shù)字，后面會用來做校驗(yàn)
"verify_code": { # 驗(yàn)證碼
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/2",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
},
圖形驗(yàn)證碼后端邏輯實(shí)現(xiàn)
class ImageCodeView(View):
"""圖形驗(yàn)證碼
"""
def get(self, request, uuid):
"""
實(shí)現(xiàn)圖形驗(yàn)證碼邏輯
:param uuid: UUID
:return: image/jpg
"""
# 生成圖形驗(yàn)證碼
text, image = captcha.generate_captcha()
# 保存圖形驗(yàn)證碼
# 使用配置的redis數(shù)據(jù)庫的別名，創(chuàng)建連接到redis的對象
redis_conn = get_redis_connection('verify_code')
# 使用連接到redis的對象去操作數(shù)據(jù)存儲到redis
# redis_conn.set('key', 'value') # 因?yàn)闆]有有效期
# 圖形驗(yàn)證碼必須要有有效期的：設(shè)計(jì)是300秒有效期
# redis_conn.setex('key', '過期時間', 'value')
redis_conn.setex('img_%s' % uuid, 300, text)
# 響應(yīng)圖形驗(yàn)證碼: image/jpg
return http.HttpResponse(image, content_type='image/jpg')
圖形驗(yàn)證碼前端邏輯
Vue實(shí)現(xiàn)圖形驗(yàn)證碼展示
1.register.js
mounted(){
// 生成圖形驗(yàn)證碼
this.generate_image_code();
},
methods: {
// 生成圖形驗(yàn)證碼
generate_image_code(){
// 生成UUID。generateUUID() : 封裝在common.js文件中，需要提前引入
this.uuid = generateUUID();
// 拼接圖形驗(yàn)證碼請求地址
this.image_code_url = "/image_codes/" + this.uuid + "/";
},
......
}
2.register.html
li>
label>圖形驗(yàn)證碼:/label>
input type="text" name="image_code" id="pic_code" class="msg_input">
img :src="image_code_url" @click="generate_image_code" alt="圖形驗(yàn)證碼" class="pic_code">
span class="error_tip">請?zhí)顚憟D形驗(yàn)證碼/span>
/li>
3.圖形驗(yàn)證碼展示和存儲效果
Vue實(shí)現(xiàn)圖形驗(yàn)證碼校驗(yàn)
1.register.html
li>
label>圖形驗(yàn)證碼:/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="圖形驗(yàn)證碼" 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 = '請?zhí)顚憟D片驗(yàn)證碼';
this.error_image_code = true;
} else {
this.error_image_code = false;
}
},
3.圖形驗(yàn)證碼校驗(yàn)效果
至此驗(yàn)證碼部分就說完了
到此這篇關(guān)于使用Django實(shí)現(xiàn)商城驗(yàn)證碼模塊的方法的文章就介紹到這了,更多相關(guān)Django 商城驗(yàn)證碼模塊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- Django自定義插件實(shí)現(xiàn)網(wǎng)站登錄驗(yàn)證碼功能
- Django驗(yàn)證碼的生成與使用示例
- django 發(fā)送手機(jī)驗(yàn)證碼的示例代碼
- Django 生成登陸驗(yàn)證碼代碼分享
- Python 中Django驗(yàn)證碼功能的實(shí)現(xiàn)代碼
- Django框架登錄加上驗(yàn)證碼校驗(yàn)實(shí)現(xiàn)驗(yàn)證功能示例
- django項(xiàng)目登錄中使用圖片驗(yàn)證碼的實(shí)現(xiàn)方法
- 基于Django的python驗(yàn)證碼(實(shí)例講解)
