1,django目錄結構(需要用到的文件用紅箭頭標記):
2,首先在templates模版目錄下創建login.html文件
3,將bootstrap導入到static/plugins目錄下 PS:Bootstrap是Twitter推出的一個用於前端開發的開源工具包,有很豐富的前端各種案例
4,首先在templates下創建login.html登陸首頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"></link> </head> <body> <div class="container"> <form class="form-horizontal" action="/login/" method="post"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" name="pwd" class="form-control" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> <span style="color:red;"> {{ status }}</span> </div> </div> </form> </div> <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="static/plugins/bootstrap/js/bootstrap.js"></script> </body> </html>
5,先把login.html加到django的路由表里面,django的路由文件是urls.py
from django.conf.urls import include, url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', include(admin.site.urls)), url(r'^home/', views.home), url(r'^son/', views.son), url(r'^login/',views.login), ]
6,路由文件添加好后,在vies.py中添加登陸認證邏輯
def login(request): print request.method if request.method == "POST": #login.html是用POST方式提交,這里判斷是POST方式后,就開始處理玩家的輸入 input_email = request.POST['email'] #獲取login.html用戶的輸入,取name的值 <input type="email" name="email" class="form-control" placeholder="Email"> input_pwd = request.POST['pwd'] #獲取login.html用戶的輸入,取name的值 <input type="password" name="pwd" class="form-control" placeholder="Password"> if input_email == 'lei@qq.com' and input_pwd == "123": from django.shortcuts import redirect #導入django的重定向模塊 return redirect("http://www.baidu.com") #重定向到百度 else: return render(request, 'login.html',{'status':'ERROR Incorrect username or password'}) #如果用戶輸入的賬號密碼不對,就提示錯誤信息"ERROR Incorrect username or password" ,login.html頁面采用模版來渲染這段錯誤提示 return render(request,'login.html')
7,驗證效果
首先故意輸錯,看頁面提示什么
輸入錯誤的賬號密碼后,頁面提示紅色錯誤
這次輸入正確的賬號密碼,正常是會跳轉到http://www.baidu.com 這里就不展示了。