UserInfo表既有原生auth_user表的字段,又有你擴展的字段,之後用的接口UserInfo既是本身的用戶表又是原生認證組件的用戶表css
login.htmlhtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css"> {# <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">#} </head> <body> <h3>登陸頁面</h3> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-offset-3"> <form> {% csrf_token %} <div class="form-group"> <label for="user">用戶名</label> <input type="text" id="user" class="form-control"> </div> <div class="form-group"> <label for="pwd">密碼</label> <input type="password" id="pwd" class="form-control"> </div> <div class="form-group"> <label for="pwd">驗證碼</label> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" id="valid_code"> </div> <div class="col-md-6"> <img width="270" height="40" id = "valid_code_img" src="/get_validCode_img/" alt=""> </div> ##src 能夠加靜態文件,也能夠動態, </div> </div> <input type="button" class="btn btn-default login_btn pull-right" value="submit"><span class="error"></span> </form> </div> </div> </div>
validCode.pypython
import random def get_validCode_img(request): def get_random_color(): #隨機生成一個新的圖片背景 return (random.randint(0,255), random.randint(0,255), random.randint(0,255)) #方式一 --> 只須要了解它的流程 # with open("luffy.jpg",'rb')as f: # data = f.read()
#return Httpresponse(data)
#方式二: pip install pillow --> 圖像處理的模塊 # from PIL import Image # img = Image.new("RGB",(270,40), color=get_random_color()) #長度270,高度40,color是動態生成的,顏色三要素color=(0,255,0) # with open("validCode.png", "wb")as f: #先加到磁盤上 # img.save(f,'png') #會生成一個叫validCode.png的圖片 # with open("validCode.png", "rb")as f: #再讀出來;磁盤的處理速度是很慢的 # data = f.read() #方式三: 磁盤內存管理 # from PIL import Image # from io import BytesIO #--->BytesIO就是內存管理 # img = Image.new("RGB",(270,40), color=get_random_color()) # f = BytesIO() #這種方式是放在內存中,f就是內存句柄 # img.save(f,"png") #save到內存裏邊了 # data = f.getvalue() #取出來 #方式四: from PIL import Image, ImageDraw, ImageFont #ImageDraw是畫筆, ImageFont是字體大小 from io import BytesIO import random img = Image.new("RGB",(270,40), color=get_random_color()) #這是剛剛生成的畫板 draw = ImageDraw.Draw(img) #畫筆draw只爲畫板img服務。 draw.text()寫文字 、draw.line()畫線 、draw.point()畫點 kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32) #參數爲字體路徑、大小;ttf字體 ;拿到關於kumo.ttf的字體對象
for i in range(5): random_num = str(random.randint(0,9)) random_low_alpha = chr(random.randint(95,122)) #隨機小寫字母 random_upper_alpha = chr(random.randint(65,90)) #隨機大寫字母 random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) draw.text((i*50+20, 5), random_char, get_random_color(), font=kumo_font)
f = BytesIO() img.save(f,"png") data = f.getvalue()
validCode.pyjquery
width = 270 #要跟上邊的寬高一致 height = 40 for i in range(10): x1 = random.randint(0,width) x2 = random.randint(0,width) y1 = random.randint(0,height) y2 = random.randint(0,height) draw.line((x1,y1,x2,y2), fill = get_random_color()) for i in range(100): draw.point([random.randint(0,width), random.randint(0,width), random.randint(0,height), random.randint(0,height)]) x = random.randint(0,width) y = random.randint(0,height) draw.arc((x, y, x+4, y+4),0, 90, fill=get_random_color())
$("#valid_code_img")[0] <img width="270" height="40" id="valid_code_img" src="http://127.0.0.1:8000/get_validCode_img/??" alt> $("#valid_code_img")[0].src "http://127.0.0.1:8000/get_validCode_img/??" $("#valid_code_img")[0].src+="?" #+="?"添加一次這個就刷新一次驗證碼 "http://127.0.0.1:8000/get_validCode_img/???" $("#valid_code_img")[0].src+="?" "http://127.0.0.1:8000/get_validCode_img/????" $("#valid_code_img")[0].src+="?" "http://127.0.0.1:8000/get_validCode_img/?????" $("#valid_code_img")[0].src+="?" "http://127.0.0.1:8000/get_validCode_img/??????" $("#valid_code_img")[0].src+="?" "http://127.0.0.1:8000/get_validCode_img/???????"
login.htmlajax
<script src="/static/js/jquery-3.2.1.min.js"></script> <script> //刷新驗證碼,不用ajax也能夠 $("#valid_code_img").click(function(){ $(this)[0].src += "?" });
validCode.pydjango
valid_code_str = "" #保存驗證碼字符串,這樣才能驗證 for i in range(5): random_num = str(random.randint(0,9)) random_low_alpha = chr(random.randint(95,122)) random_upper_alpha = chr(random.randint(65,90)) random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) draw.text((i*50+20, 5), random_char, get_random_color(), font=kumo_font) #保存驗證碼字符串 valid_code_str += random_char #作一個累加 print("valid_code_str", valid_code_str) request.session["valid_code_str"] = valid_code_str #保存它,寫一個session ''' 1 sdajsdq33asdf #生成一個隨機字符串, 2 COOKIE {"sessionid":sdajsdq33asdf} #設置一個cookie,返回給cookie那邊一個鍵叫sessionid,值是隨機字符串 3 django-session #數據部分保存到了django_session;在session表進行存儲 session-key session-data sdajsdq33asdf {"valid_code_str":"12345"} ''' f = BytesIO() img.save(f,"png") data = f.getvalue() return HttpResponse(data)
#global valid_code_str 這裏不能把它變成全局變量,這時雖然校驗時能夠拿到valid_code_str,但若是是兩我的一塊訪問,
那麼那個驗證碼的值存的是最後一我的訪問(刷新)的,前面那我的那個就取不到了
應該每一個人的單獨保存,使用會話跟蹤技術,把每一個人校驗的值存到cookie裏邊
views.py
from django.shortcuts import render, HttpResponse, redirect from django.http import JsonResponse from django.contrib import auth # Create your views here. def login(request): if request.method == "POST": response = {"user":None, "msg":None} #先構建一個字典,"user":None默認沒有登陸成功,"msg"裏邊放錯誤信息 user = request.POST.get("user") pwd = request.POST.get("pwd") valid_code = request.POST.get("valid_code") valid_code_str = request.session.get("valid_code_str") if valid_code.upper() == valid_code_str.upper(): #不區分大小寫 user = auth.authenticate(username=user, password=pwd) #用戶認證組件 if user: #把這個user註冊進去,只要登陸成功了request.user就是當前登陸對象用戶,不然它就是個匿名對象。 auth.login(request,user) #request.user == 當初登陸對象 #登陸成功了 #登陸成功,在這裏不能跳轉,用的是ajax請求並非form請求,ajax請求只接收一個數據data response["user"] = user.username #user返回值 else: response["msg"] = "username or password error!" else: #驗證碼校驗失敗,成功了就是null response["msg"] = "valid code error" return JsonResponse(response) #直接把字典放裏邊,它幫咱們序列化,並且在ajax那邊直接拿到對象也不用反序列化。 return render(request,"login.html") def index(request): return render(request,"index.html")
login.htmlbootstrap
//登陸驗證 $(".login_btn").click(function(){ $.ajax({ url:"", type:"post", data:{ user:$("#user").val(), #用戶名的校驗 pwd:$("#pwd").val(), #密碼的校驗 valid_code:$("#valid_code").val(), #驗證碼的校驗 csrfmiddlewaretoken:$("[name = 'csrfmiddlewaretoken']").val(), #form請求的csrf校驗 }, #把這4個值傳了 success: function (data) { console.log(data); if(data.user){ //判斷有沒有值,出錯就把錯誤信息顯示到頁面上 location.href="/index/" //登陸成功就跳轉到index頁面 } else{ $(".error").text(data.msg).css({"color":"red", "margin-left":'10px'}) //拿到error這個標籤;能夠加css } } }) }) </script> </body> </html>
建立超級用戶cookie
C:\Users\Administrator\PycharmProjects\Django\cnblog>python manage.py createsuperuser Username: kris Email address: Password: Password (again): Superuser created successfully.
index.html(返回的一個頁面)session
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>{{ request.user.username}}</h3> </body> </html>
一次請求伴隨屢次請求; PIL; session存儲; 驗證碼刷新;app
滑動驗證碼--->引入這樣一個插件
要先把social-auth-app-django下載下來
C:\Users\Administrator>pip install social-auth-app-django Collecting social-auth-app-django
把它嵌入到咱們的代碼裏邊