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 這里就不展示了。
