一、需要知道的新知識點
1、刷新驗證碼。給src屬性加一個？號。加個？會重新去請求
//#給驗證碼刷新 $(".vialdCode_img").click(function () { 方式一：dom方法#} $(this)[0].src+="?"#} 方式二：jQuery的attr方法#} $(this).attr("src",$(this).attr("src")+'?') }) })
2、當登錄成功跳轉，或者注冊成功跳轉
$(".register").click(function () {
location.href = '/register/'
});
3、超時后消失
setTimeout(foo, 3000)
function foo() { $(".error").html("") }
4、auth模塊的使用
模塊的導入：
from django.contrib import auth
幾個使用方法：
1 、authenticate() ：驗證用戶輸入的用戶名和密碼是否相同
提供了用戶認證，即驗證用戶名以及密碼是否正確,一般需要username password兩個關鍵字參數
user = authenticate(username='someone',password='somepassword')
2 、login(HttpRequest, user)：登錄
該函數接受一個HttpRequest對象，以及一個認證了的User對象
此函數使用django的session框架給某個已認證的用戶附加上session id等信息。
from django.contrib.auth import authenticate, login def my_view(request): username = request.POST['username'] password = request.POST['password'] user = authenticate(username=username, password=password) if user: login(request, user) # Redirect to a success page. ... else: # Return an 'invalid login' error message. ... 復制代碼
3 、logout(request) 注銷用戶
該函數接受一個HttpRequest對象，無返回值。當調用該函數時，當前請求的session信息會全部清除。該用戶即使沒有登錄，使用該函數也不會報錯。
from django.contrib.auth import logout
def logout_view(request):
logout(request)
# Redirect to a success page.
4 、user對象的 is_authenticated()
要求：
1、用戶登錄后才能訪問某些頁面
2、如果用戶沒有登錄就訪問該頁面的話直接跳轉登錄頁面
3、用戶在跳轉的登錄界面中完成登錄后，自動訪問跳轉到之前訪問的地址
def my_view(request): if not request.user.is_authenticated(): return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
在后台用request.user.is_authenticated()判斷用戶是否已經登錄，如果true則可以向前台展示request.user.name
USer對象的幾個方法
2.2 、創建用戶:create_user
from django.contrib.auth.models import User user = User.objects.create_user（username='',password='',email=''）
2.3 、check_password(passwd)：密碼檢查
用戶需要修改密碼的時候 首先要讓他輸入原來的密碼 ，如果給定的字符串通過了密碼檢查，返回 True
2.4 、修改密碼： set_password()
user = User.objects.get(username='') user.set_password(password='') user.save
二、具體實現的登錄
urls.py
1 urlpatterns = [ 2 url(r'^admin/', admin.site.urls), 3 url(r'^login/$', views.login), 4 url(r'^index/$', views.index), 5 url(r'^get_vaildCode_img/$', views.get_vaildCode_img), 6 url(r'^log_out/$', views.log_out), 7
view.py
1 def login(request): 2 if request.method=="GET": 3 return render(request, "login.html") 4 else: 5 username = request.POST.get("username") 6 password = request.POST.get("password") 7 vialdCode = request.POST.get("vialdCode") 8 ret = {"flag":False,"error_msg":None} 9 if vialdCode.upper() == request.session.get("keep_valid_code").upper(): 10 user = auth.authenticate(username=username, password=password) 11 if user: 12 #如果驗證成功就讓登錄 13 auth.login(request,user) 14 ret["flag"] = True 15 else: 16 ret["error_msg"] = "用戶名和密碼錯誤" 17 else: 18 ret["error_msg"] = "驗證碼錯誤" 19 return HttpResponse(json.dumps(ret)) 20 21 def index(request): 22 #驗證是不是當前進來的那個用戶，如果用戶已經登錄了就可以看到頁面 23 # 如果沒有登錄就不讓看見主頁面，就直接返回登錄頁面 24 if not request.user.is_authenticated(): 25 return redirect("/login/") 26 else: 27 return render(request, "index.html") 28 29 def log_out(request): 30 auth.logout(request) 31 return redirect("/login/") 32 def get_vaildCode_img(request): 33 # 方式一：這樣的方式吧路徑寫死了，只能是那一張圖片 34 # import os 35 # path = os.path.join(settings.BASE_DIR,"static","image","3.jpg") 36 # with open(path,"rb") as f: 37 # data = f.read() 38 # return HttpResponse(data) 39 # 方式二：每次都顯示不同的圖片，利用pillow模塊，安裝一個pillow模塊 40 # from PIL import Image 41 # img = Image.new(mode="RGB",size=(120,40),color="green") #首先自己創建一個圖片,參數size=(120,40) 代表長和高 42 # f = open("validcode.png","wb")#然后把圖片放在一個指定的位置 43 # img.save(f,"png") #保存圖片 44 # f.close() 45 # with open("validcode.png","rb") as f: 46 # data = f.read() 47 # return HttpResponse(data) 48 # 方式三： 49 # 方式二也不怎么好，因為每次都要創建一個保存圖片的文件，我們可以不讓吧圖片保存到硬盤上， 50 # 在內存中保存，完了自動清除，那么就引入了方式三：利用BytesIO模塊 51 # from io import BytesIO 52 # from PIL import Image 53 # img = Image.new(mode="RGB",size=(120,40),color="blue") 54 # f = BytesIO() #內存文件句柄 55 # img.save(f,"png") #保存文件 56 # data = f.getvalue()#打開文件(相當於python中的f.read()) 57 # return HttpResponse(data) 58 59 # 方式四：1、添加畫筆，也就是在圖片上寫上一些文字 60 # 2、並且字體隨機，背景顏色隨機 61 from io import BytesIO 62 from PIL import Image,ImageDraw,ImageFont 63 import random 64 #隨機創建圖片 65 img = Image.new(mode="RGB",size=(120,40),color=(random.randint(0,255),random.randint(0,255),random.randint(0,255))) 66 draw = ImageDraw.Draw(img,"RGB") 67 # 畫干擾線 68 for i in range(5): 69 x1 = random.randint(0, 120) 70 y1 = random.randint(0, 40) 71 x2 = random.randint(0, 120) 72 y2 = random.randint(0, 40) 73 74 draw.line((x1, y1, x2, y2), fill=(random.randint(0,255),random.randint(0,255),random.randint(0,255))) 75 76 font = ImageFont.truetype("static/font/kumo.ttf",20) #20表示20像素 77 78 str_list = [] #吧每次生成的驗證碼保存起來 79 # 隨機生成五個字符 80 for i in range(5): 81 random_num = str(random.randint(0, 9)) # 隨機數字 82 random_lower = chr(random.randint(65, 90)) # 隨機小寫字母 83 random_upper = chr(random.randint(97, 122)) # 隨機大寫字母 84 random_char = random.choice([random_num, random_lower, random_upper]) 85 print(random_char,"random_char") 86 str_list.append(random_char) 87 # (5 + i * 24, 10)表示坐標，字體的位置 88 draw.text((5+i*24,10),random_char,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font) 89 print(str_list,"str_list") 90 f = BytesIO()#內存文件句柄 91 img.save(f,"png") #img是一個對象 92 data = f.getvalue() #讀取數據並返回至HTML 93 valid_str = "".join(str_list) 94 print(valid_str,"valid_str") 95 request.session["keep_valid_code"] = valid_str #吧保存到列表的東西存放至session中 96 return HttpResponse(data)
template
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> 9 <link rel="stylesheet" href="/static/css/login.css"> 10 </head> 11 <body> 12 <div class="container"> 13 <div class="row"> 14 <div class="col-md-1=10"> 15 <form class="form-horizontal" id="form_data" action="/login/" method="post"> 16 {% csrf_token %} 17 <div class="form-group"> 18 <label for="username" class="col-sm-2 control-label">用戶名</label> 19 <div class="col-sm-5"> 20 <input type="text" class="form-control" id="username" placeholder="username" name="username"> 21 </div> 22 </div> 23 <div class="form-group"> 24 <label for="password" class="col-sm-2 control-label">密碼</label> 25 <div class="col-sm-5"> 26 <input type="password" class="form-control" id="password" placeholder="password" name="password"> 27 </div> 28 </div> 29 <div class="form-group"> 30 <div class="row"> 31 <div class="col-md-6 col-md-offset-1"> 32 {# 文字部分#} 33 <label for="vialdCode" class="col-sm-2 control-label">驗證碼</label> 34 <div class="col-sm-5"> 35 <input type="text" class="form-control vialdCode_text" id="vialdCode" placeholder="驗證碼" name="vialdCode"> 36 </div> 37 {# 圖片部分#} 38 <div class="col-md-5"> 39 <img class="vialdCode_img" src="/get_vaildCode_img/" alt="" width="200px" height="100px"> 40 {# <a href=""></a> #} 41 </div> 42 </div> 43 44 </div> 45 </div> 46 <div class="form-group"> 47 <div class="col-sm-offset-2 col-sm-10"> 48 <div class="checkbox"> 49 <label> 50 <input type="checkbox"> 下次自動登錄 51 </label> 52 </div> 53 </div> 54 </div> 55 <div class="form-group"> 56 <div class="col-sm-offset-2 col-sm-10"> 57 <p> 58 <button type="button" class="btn btn-success login">登錄</button> 59 <span class="error has-error"></span></p> 60 <p> 61 <button type="button" class="btn btn-primary register">注冊</button> 62 </p> 63 </div> 64 </div> 65 </form> 66 </div> 67 </div> 68 </div> 69 <script src="/static/jquery-3.2.1.min.js"></script> 70 <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 71 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> 72 73 <script> 74 $(function () { 75 //給登錄按鈕增加事件 76 $(".login").click(function () { 77 function foo() { 78 $(".error").html("") 79 } 80 81 //用post的話就可以不用ajax了，ajax里面都包括了 82 $.post({ 83 url: '/login/', 84 headers: {"X-CSRFToken": $.cookie('csrftoken')}, 85 data: $("#form_data").serialize(), 86 {# contentType:'application/json',#} 87 success: function (data) { 88 var data = JSON.parse(data); 89 console.log(typeof data); 90 if (data["flag"]) { 91 window.location.href = '/index/' 92 } 93 else { 94 $(".error").html(data["error_msg"]); 95 setTimeout(foo, 3000) 96 } 97 } 98 }) 99 }); 100 101 //給注冊按鈕增加事件 102 $(".register").click(function () { 103 window.location.href = '/register/' 104 }); 105 106 //#給驗證碼刷新 107 $(".vialdCode_img").click(function () { 108 {# 方式一：dom方法#} 109 {# $(this)[0].src+="?"#} 110 {# 方式二：jQuery的attr方法#} 111 $(this).attr("src",$(this).attr("src")+'?') 112 }) 113 }) 114 115 </script> 116 </body> 117 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 </head> 9 <body> 10 <h1>hello{{ request.user.username }}</h1> 11 <button><a href="/log_out/">注銷</a></button> 12 </body> 13 </html>
1 .container { 2 margin-top: 100px; 3 margin-left: 330px; 4 } 5 6 .error { 7 color: red; 8 } 9 10 .btn { 11 width: 200px; 12 } 13 .vialdCode_img{ 14 width: 200px; 15 height: 40px; 16 }