前端資源准備好index.html和login.html
目錄結構：
urls.py設置：
from django.views.generic import TemplateView
urlpatterns = [ # path('admin/', admin.site.urls), path('admin/', admin.site.urls), path('', TemplateView.as_view(template_name="index.html"),name = "index"), path('login/', TemplateView.as_view(template_name="login.html"),name = "login"), # ] ] + static("/", document_root="./static")
static那個是靜態資源路徑
index是首頁，默認進入此頁，點擊登錄按鈕跳出登錄頁，要在index.html中進行配置：
調整下login的view
urlpatterns = [ # path('admin/', admin.site.urls), path('admin/', admin.site.urls), path('', TemplateView.as_view(template_name="index.html"),name = "index"), path('login', LoginView.as_view(template_name="login.html"),name = "login"), # ] ] + static("/", document_root="./static")
login.html修改
調整action，配置csrf
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" > <title>慕學在線網登錄</title> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/login.css"> </head> <body> <div class="dialog" id="jsDialog"> <!--提示彈出框--> <div class="successbox dialogbox" id="jsSuccessTips"> <h1>成功提交</h1> <div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div> <div class="cont"> <h2>您的需求提交成功！</h2> <p></p> </div> </div> <div class="noactivebox dialogbox" id="jsUnactiveForm" > <h1>郵件驗證提示</h1> <div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div> <div class="center"> <img src="../images/send.png"/> <p>我們已經向您的郵箱<span class="green" id="jsEmailToActive">12@13.com</span>發送了郵件，<br/>為保證您的賬號安全，請及時驗證郵箱</p> <p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去郵箱驗證</a></p> <p class="zy_success upmove"></p> <p style="display: none;" class="sendE2">沒收到，您可以查看您的垃圾郵件和被過濾郵件，也可以再次發送驗證郵件（<span class="c5c">60s</span>）</p> <p class="sendE">沒收到，您可以查看您的垃圾郵件和被過濾郵件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次發送驗證郵件</span></p> </div> </div> </div> <div class="bg" id="dialogBg"></div> <header> <div class="c-box fff-box"> <div class="wp header-box"> <p class="fl hd-tips">慕學在線網，在線學習平台！</p> <ul class="fr hd-bar"> <li>服務電話：<span>33333333</span></li> <li class="active"><a href="/login/">[登錄]</a></li> <li><a href="register.html">[注冊]</a></li> </ul> </div> </div> </header> <section> <div class="c-box bg-box"> <div class="login-box clearfix"> <div class="hd-login clearfix"> <a class="index-logo" href="index.html"></a> <h1>用戶登錄</h1> <a class="index-font" href="index.html">回到首頁</a> </div> <div class="fl slide"> <div class="imgslide"> <ul class="imgs"> <li><a href=""><img width="483" height="472" src="../images/mysql.jpg" /></a></li> <li><a href=""><img width="483" height="472" src="../images/mysql.jpg" /></a></li> <li><a href=""><img width="483" height="472" src="../images/mysql.jpg" /></a></li> </ul> </div> <div class="unslider-arrow prev"></div> <div class="unslider-arrow next"></div> </div> <div class="fl form-box"> <h2>帳號登錄</h2> <form action="login" method="post" autocomplete="off"> <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' /> <div class="form-group marb20 "> <label>用 戶 名</label> <input name="username" id="account_l" type="text" placeholder="手機號/郵箱" /> </div> <div class="form-group marb8 "> <label>密 碼</label> <input name="password" id="password_l" type="password" placeholder="請輸入您的密碼" /> </div> <div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div> <div class="auto-box marb38"> <a class="fr" href="forgetpwd.html">忘記密碼？</a> </div> <input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登錄 > " /> <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' /> {% csrf_token %} </form> <p class="form-p">沒有慕學在線網帳號？<a href="register.html">[立即注冊]</a></p> </div> </div> </div> </section> <script src="../js/jquery.min.js" type="text/javascript"></script> <script src="../js/unslider.js" type="text/javascript"></script> <script src="../js/login.js" type="text/javascript"></script> </body> </html>
urls.py：
urlpatterns = [ # path('admin/', admin.site.urls), path('admin/', admin.site.urls), path('', TemplateView.as_view(template_name="index.html"),name = "index"), path('login', user_login,name = "login"), # ] ] + static("/", document_root="./static")
views.py
from django.shortcuts import render # Create your views here. from django.http import JsonResponse from django.contrib.auth import authenticate,login,logout from django.contrib.auth.backends import ModelBackend from .models import UserProfile from django.db.models import Q class CustomBanckend(ModelBackend): def authenticate(self, request, username=None, password=None, **kwargs): try: user = UserProfile.objects.get(Q(username=username)|Q(email=username)) if user.check_password(password): return user except Exception as e: return None def user_login(request): # print('aaaaaaaaaa') if request.method == "POST": userName = request.POST.get('username',"") passWord = request.POST.get('password',"") user = authenticate(username=userName, password=passWord) if user is not None: login(request,user) return render(request,"index.html",{}) else: # print('bbbbbbbbbbbbbbbb') return render(request,"login.html",{"msg":"用戶名密碼錯誤"}) elif request.method == "GET": # print('cccccccccccc') return render(request, "login.html", {})
重新編寫了
class CustomBanckend(ModelBackend)
用戶驗證會進入此函數進行驗證。