登陸功能
需要有登錄用戶名，密碼，動態生成驗證碼和提交按鈕，具體效果如下：
需要先了解的知識點：
1.img標簽的src屬性可以放以下三種：
1.圖片路徑
2.url
3.圖片的二進制資料
2.我們的計算機上面致所有能夠輸出各式各樣的字體樣式
內部其實對應的是一個個.ttf結尾的檔案,免費的ttf字體樣式可以去下面這個網址下載使用，
http://www.zhaozi.cn/ai/2019/fontlist.php?ph=1&classid=32&softsq=%E5%85%8D%E8%B4%B9%E5%95%86%E7%94%A8
3.介紹一下新的圖片相關的模塊
先安裝
pip3 install pillow
再匯入
from PIL import Image,ImageDraw,ImageFont
Image:生成圖片用的
ImageDraw:能夠在圖片上亂涂亂畫
ImageFont:控制字體樣式
4.記憶體管理器模塊
from io import BytesIO,StringIO
BytesIO:臨時幫你存盤資料 回傳的時候資料是二進制
StringIO:臨時幫你存盤資料 回傳的時候資料是字串
視圖函式部分
import random
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO,StringIO
def get_random():
return random.randint(0,255),random.randint(0,255),random.randint(0,255)
def get_code(request):
# 推導步驟1:直接獲取后端現成的圖片二進制資料發送給前端
# with open(r'static/img/111.jpg','rb') as f:
# data = https://www.cnblogs.com/suncolor/p/f.read()
# return HttpResponse(data)
# 推導步驟2:利用pillow模塊動態產生圖片
# img_obj = Image.new('RGB',(430,35),'green')
# img_obj = Image.new('RGB',(430,35),get_random())
# # 先將圖片物件保存起來
# with open('xxx.png','wb') as f:
# img_obj.save(f,'png')
# # 再將圖片物件讀取出來
# with open('xxx.png','rb') as f:
# data = https://www.cnblogs.com/suncolor/p/f.read()
# return HttpResponse(data)
# 推導步驟3:檔案存盤繁瑣IO操作效率低 借助于記憶體管理器模塊
# img_obj = Image.new('RGB', (430, 35), get_random())
# io_obj = BytesIO() # 生成一個記憶體管理器物件 你可以看成是檔案句柄
# img_obj.save(io_obj,'png')
# return HttpResponse(io_obj.getvalue()) # 從記憶體管理器中讀取二進制的圖片資料回傳給前端
# 最終步驟4:寫圖片驗證碼
img_obj = Image.new('RGB', (430, 35), get_random())
img_draw = ImageDraw.Draw(img_obj) # 產生一個畫筆物件
img_font = ImageFont.truetype('static/font/222.ttf',30) # 字體樣式 大小
# 隨機驗證碼 五位數的隨機驗證碼 數字 小寫字母 大寫字母
code = ''
for i in range(5):
random_upper = chr(random.randint(65,90))
random_lower = chr(random.randint(97,122))
random_int = str(random.randint(0,9))
# 從上面三個里面隨機選擇一個
tmp = random.choice([random_lower,random_upper,random_int])
# 將產生的隨機字串寫入到圖片上
"""
為什么一個個寫而不是生成好了之后再寫
因為一個個寫能夠控制每個字體的間隙 而生成好之后再寫的話
間隙就沒法控制了
"""
img_draw.text((i*60+60,-2),tmp,get_random(),img_font)
# 拼接隨機字串
code += tmp
print(code)
# 隨機驗證碼在登陸的視圖函式里面需要用到 要比對 所以要找地方存起來并且其他視圖函式也能拿到
request.session['code'] = code
io_obj = BytesIO()
img_obj.save(io_obj,'png')
return HttpResponse(io_obj.getvalue())
html部分
<body>
<div >
<div >
<div >
<div >
<h1 >登錄</h1>
<label for="id_username">用戶名</label>
<input type="text" id="id_username">
<label for="id_password">密碼</label>
<input type="password" id="id_password">
</div>
<div >
<label for="">驗證碼</label>
<div >
<div >
<input type="text" >
</div>
<div >
{# 這里img標簽的src屬性放的是一個url，訪問頁面時，會自動向這個地址請求拿到圖片資料#}
<img src="https://www.cnblogs.com/get_code" alt="" height="35" id="commit">
</div>
</div>
</div>
<input type="button" value="https://www.cnblogs.com/suncolor/p/登錄">
</div>
</div>
</div>
</body>
<script>
// 動態改變驗證碼,當點擊驗證碼時就重繪
$('#commit').click(function (){
// 1.先獲取到這個src
let oldVal = $(this).attr('src');
// 2.每次點擊給這個src加上一個問號
$(this).attr('src',oldVal+='?')
})
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/502179.html
標籤：Python
下一篇：api進階Day3使用檔案流對檔案進行復制、使用塊讀寫一組位元組，使用byte陣列提高讀寫的效率、回傳當前時間。