本文主要涉及圖形驗(yàn)證碼的相關(guān)功能，主要包括，圖形驗(yàn)證碼獲取、驗(yàn)證碼文字存儲(chǔ)、驗(yàn)證碼生成等。

驗(yàn)證碼獲取接口設(shè)計(jì)

uuid作為路徑參數(shù)，唯一標(biāo)識(shí)驗(yàn)證碼所屬用戶

驗(yàn)證碼的相關(guān)邏輯我們用一個(gè)單獨(dú)的app處理，所以這里需要新建一個(gè)叫verifications的app，建好app后，打開views.py視圖文件，編寫一個(gè)驗(yàn)證碼的視圖類

class ImageCodeView(View): '''圖形驗(yàn)證碼''' def get(self, request, uuid):''':param request: 請(qǐng)求對(duì)象:param uuid: 唯一標(biāo)識(shí)圖形驗(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的圖片處理庫(kù)，pip install Pillow

準(zhǔn)備Redis數(shù)據(jù)庫(kù)

redis用來(lái)存儲(chǔ)圖片驗(yàn)證碼上的數(shù)字，后面會(huì)用來(lái)做校驗(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ù)庫(kù)的別名，創(chuàng)建連接到redis的對(duì)象redis_conn = get_redis_connection(’verify_code’)# 使用連接到redis的對(duì)象去操作數(shù)據(jù)存儲(chǔ)到redis# redis_conn.set(’key’, ’value’) # 因?yàn)闆](méi)有有效期# 圖形驗(yàn)證碼必須要有有效期的：設(shè)計(jì)是300秒有效期# redis_conn.setex(’key’, ’過(guò)期時(shí)間’, ’value’)redis_conn.setex(’img_%s’ % uuid, 300, text)# 響應(yīng)圖形驗(yàn)證碼: image/jpgreturn 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)證碼請(qǐng)求地址this.image_code_url = '/image_codes/' + this.uuid + '/'; }, ......}

2.register.html

<li> <label>圖形驗(yàn)證碼:</label> <input type='text' name='image_code' class='msg_input'> <img :src='http://www.leifengta.com.cn/bcjs/image_code_url' @click='generate_image_code' alt='圖形驗(yàn)證碼' class='pic_code'> <span class='error_tip'>請(qǐng)?zhí)顚憟D形驗(yàn)證碼</span></li>

3.圖形驗(yàn)證碼展示和存儲(chǔ)效果

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' class='msg_input'> <img :src='http://www.leifengta.com.cn/bcjs/image_code_url' @click='generate_image_code' alt='圖形驗(yàn)證碼' class='pic_code'> <span 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 = ’請(qǐng)?zhí)顚憟D片驗(yàn)證碼’;this.error_image_code = true; } else {this.error_image_code = false; }},

3.圖形驗(yàn)證碼校驗(yàn)效果

至此驗(yàn)證碼部分就說(shuō)完了

到此這篇關(guān)于使用Django實(shí)現(xiàn)商城驗(yàn)證碼模塊的方法的文章就介紹到這了,更多相關(guān)Django 商城驗(yàn)證碼模塊內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！