BBS項目之登陸功能

 

1.路由層添加一個登陸的路由：

2.視圖層寫login函數：

分析返回的login.html頁面須要哪些字段，

用戶名，密碼，驗證碼，考慮到驗證碼刷新是局部刷新，採用ajax的方式提交數據到後端

驗證碼那一行須要分紅兩段，左邊是input標籤，右邊img標籤

 驗證碼的背景圖片須要動態生成，並且圖片上面要寫字，字體樣式也要導入，所以用到pillow模塊

圖片的顏色須要隨機變化，用random模塊

而後生成畫筆對象和字體對象，字體對象須要百度ttf下載一個字體而後放入本地，第二個參數表示字體高度，不超過圖片高度

採用for循環生成5個隨機驗證碼（數字+小寫字母+大寫字母）

code = '' # 定義一個變量存儲最終驗證碼
for i in range(5):
　　random_int = str(random.randint(0,9))
　　random_lower = chr(random.randint(97,122))
　　random_upper = chr(random.randint(65,90))
　　temp_code = random.choice([random_int,random_lower,random_upper])
# 將產生的字一個一個的寫到圖片上
　　img_draw.text((60+i*45,0),temp_code,get_random(),img_font)  #位置，字體值，顏色，樣式
# code記錄
　　code += temp_code
print(code)

request.session['code'] = code

from io import BytesIO
# 可以幫你保存數據 而且在取的時候會以二進制的形式返回給你

# 生成io對象
io_obj = BytesIO()

#經過io對象保存圖片對象

img_obj.save(io_obj,'png')

#最後取出來返回

return HttpResponse(io_obj.getvalue())

驗證碼局部刷新，點擊驗證碼那個圖片就能夠實現刷新功能

須要給img標籤添加一個點擊事件

$('#id_img').click(function () {
    let oldPath = $(this).attr('src');
    $(this).attr('src',oldPath += '?')
});

接下來是登陸功能的操做

先前端ajax方式點擊提交按鈕的操做獲取錄入的信息：

後端校驗的時候先判斷驗證碼是否一致（忽略大小寫），而後經過auth模塊生成對象

若是驗證碼一致且user_obj存在說明輸入無誤，登陸成功

反之：

或

back_dic是記錄編碼和信息的一個字典，信息包含中文，所以返回須要用JsonResponse取消自動編碼

前端頁面也須要根據返回的字典進行渲染