django項(xiàng)目登錄中使用圖片驗(yàn)證碼的實(shí)現(xiàn)方法
應(yīng)用下創(chuàng)建untils文件夾放置封裝圖片驗(yàn)證碼的函數(shù)
創(chuàng)建validCode.py文件定義驗(yàn)證碼規(guī)則
import random
def get_random_color():
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
def get_valid_code_img(request):
# 方式:
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import random
img = Image.new("RGB", (270, 40), color=get_random_color())#生成一個(gè)寬270*高40的畫(huà)布,背景顏色隨機(jī)
draw = ImageDraw.Draw(img)#進(jìn)行繪畫(huà)
kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32)#字體 字體大小
valid_code_str = ""
for i in range(5):
random_num = str(random.randint(0, 9))#0-9的隨機(jī)數(shù) 9
random_low_alpha = chr(random.randint(97, 122))#a 到 z 隨機(jī)的一個(gè)小寫(xiě)字母 b
random_upper_alpha = chr(random.randint(65, 90))#A 到 Z 隨機(jī)的一個(gè)大寫(xiě)字母 Q
random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) #2
draw.text((i * 50 + 20, 5), random_char, get_random_color(), font=kumo_font) #往長(zhǎng)方形上寫(xiě)字
# 保存驗(yàn)證碼字符串
valid_code_str += random_char #85656
width=270
height=40
for i in range(10):
# draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())#畫(huà)小點(diǎn)
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color()) #小線段
request.session["valid_code_str"] = valid_code_str
f = BytesIO()
img.save(f, "png") #png
data = f.getvalue()
return data
建路由
# 登錄
path('login/', login.login,name='login'),
# 圖片驗(yàn)證碼
re_path('get_valid_code_img/', login.get_valid_code_img, name='get_valid_code_img'),
寫(xiě)后臺(tái)方法
from blog.utils import validCode # 引入自定義的驗(yàn)證碼
#頁(yè)面返回方法
from django.shortcuts import render, HttpResponse, redirect
#哈希加密
from django.contrib.auth.hashers import make_password, check_password
#數(shù)據(jù)庫(kù)
from blog.models import Article, Comment, Member, Praise, Web, Image
# 登陸
def login(request):
res = {'status': None, 'info': None}
if request.method == 'POST':
valid_code = request.POST.get("valid_code")
valid_code_str = request.session.get("valid_code_str")
print(valid_code, valid_code_str)
if valid_code.upper() == valid_code_str.upper():
# 查詢(xún)用戶(hù)和密碼是否正確
username = request.POST.get('username')
pwd = request.POST.get('pwd')
username_obj = Member.objects.filter(member_name=username).first()
if not username_obj:
res['status'] = 3
res['info'] = '用戶(hù)名不存在'
return HttpResponse(json.dumps(res))
if check_password(pwd, username_obj.member_pwd):
res['status'] = 1
res['info'] = '登錄成功'
request.session['member_name'] = username
request.session['member_id'] = Member.objects.filter(member_name=username).first().member_id
response_new = HttpResponse(json.dumps(res)) # 把這個(gè)結(jié)果告訴給前臺(tái),ajax
return response_new
else:
res['status'] = 0
res['info'] = '帳號(hào)/密碼錯(cuò)誤'
return HttpResponse(json.dumps(res))
else:
res['status'] = 2
res['info'] = '驗(yàn)證碼錯(cuò)誤'
return HttpResponse(json.dumps(res))
return render(request, 'blog/login.html', locals())
# 生成圖片驗(yàn)證碼
def get_valid_code_img(request):
img_data = validCode.get_valid_code_img(request)
return HttpResponse(img_data)
前端登錄的表單
{#登陸的表單#}
<form action="{% url 'blog:login' %}" method="post" id="login">
<input type="text" class="name" name="username" Placeholder="Username" required=""/>
<input type="password" class="password" name="pwd" Placeholder="Password" required=""/>
{% csrf_token %}
<input type="text" name="valid_code" placeholder="驗(yàn)證碼">
<img width="270" height="36" id="valid_code_img" src="/blog/get_valid_code_img/" alt=""
onclick="this.src='/blog/get_valid_code_img/?'+Math.random()">
<div class="login-agileits-bottom">
<h6><a href="javascript:;" type="button" id="onsubmit">登陸</a></h6>
</div>
</form>
{#登陸的表單結(jié)束#}
前端提交登錄表單的jquery
{# 登陸的jquery #}
$(document).ready(function () {
$('#onsubmit').click(function () {
$.post('/blog/login/', $('#login').serialize(), function (data) {
if (data['status'] == 1) {
layer.msg(data.info);
location.href = "{% url 'index' %}";
} else {
layer.msg(data['info'])
}
}, 'json')
})
})
{# 登陸的jquery結(jié)束 #}
頁(yè)面效果

總結(jié)
以上所述是小編給大家介紹的django項(xiàng)目登錄中使用圖片驗(yàn)證碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 詳解Django自定義圖片和文件上傳路徑(upload_to)的2種方式
- Django實(shí)現(xiàn)前臺(tái)上傳并顯示圖片功能
- Django實(shí)現(xiàn)后臺(tái)上傳并顯示圖片功能
- Django實(shí)現(xiàn)圖片上傳功能步驟解析
- Django {{ MEDIA_URL }}無(wú)法顯示圖片的解決方式
- Django 實(shí)現(xiàn)將圖片轉(zhuǎn)為Base64,然后使用json傳輸
- django 讀取圖片到頁(yè)面實(shí)例
- django中的圖片驗(yàn)證碼功能
- Django 實(shí)現(xiàn)前端圖片壓縮功能的方法
- Django 實(shí)現(xiàn)圖片上傳和下載功能
相關(guān)文章
Python實(shí)現(xiàn)中文數(shù)字轉(zhuǎn)換為阿拉伯?dāng)?shù)字的方法示例
這篇文章主要介紹了Python實(shí)現(xiàn)中文數(shù)字轉(zhuǎn)換為阿拉伯?dāng)?shù)字的方法,涉及Python字符串遍歷、轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
Python中查看變量的類(lèi)型內(nèi)存地址所占字節(jié)的大小
這篇文章主要介紹了Python中查看變量的類(lèi)型,內(nèi)存地址,所占字節(jié)的大小,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Python實(shí)現(xiàn)尋找回文數(shù)字過(guò)程解析
這篇文章主要介紹了Python實(shí)現(xiàn)尋找回文數(shù)字過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
Python神經(jīng)網(wǎng)絡(luò)TensorFlow基于CNN卷積識(shí)別手寫(xiě)數(shù)字
這篇文章主要介紹了Python神經(jīng)網(wǎng)絡(luò)TensorFlow基于CNN卷積識(shí)別手寫(xiě)數(shù)字的實(shí)現(xiàn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-10-10
使用python求解迷宮問(wèn)題的三種實(shí)現(xiàn)方法
關(guān)于迷宮問(wèn)題,常見(jiàn)會(huì)問(wèn)能不能到達(dá)某點(diǎn),以及打印到達(dá)的最短路徑,下面這篇文章主要給大家介紹了關(guān)于如何使用python求解迷宮問(wèn)題的三種實(shí)現(xiàn)方法,需要的朋友可以參考下2022-03-03
python實(shí)現(xiàn)二維數(shù)組的對(duì)角線遍歷
這篇文章主要為大家詳細(xì)介紹了python實(shí)現(xiàn)二維數(shù)組的對(duì)角線遍歷,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-03-03

