1、准備工作
創建必要的目錄和文件，導入js，css，bootstrap等，目錄結構如下：
2、配置文件添加static路徑
settings.py
|
1
2
3
4
|
STATIC_URL =
'/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,
'static'
),
)
|
3、引用文件（js\css\bootstrap）
login.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>登錄</title>
<link rel=
"stylesheet"
href=
"/static/plugin/bootstrap/css/bootstrap.css"
>
<link rel=
"stylesheet"
href=
"/static/css/common.css"
>
</head>
<body>
<script type=
"text/javascript"
src=
"/static/js/jquery-2.1.4.min.js"
></script>
<script type=
"text/javascript"
src=
"/static/plugin/bootstrap/js/bootstrap.js"
></script>
</body>
</html>
|
4、在bootstrap網頁中隨便找一個登錄框
login.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<form
class
=
"form-horizontal"
>
<div
class
=
"form-group"
>
<
label
for
=
"inputEmail3"
class
=
"col-sm-2 control-label"
>Email</
label
>
<div
class
=
"col-sm-10"
>
<input type=
"email"
class
=
"form-control"
id=
"inputEmail3"
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"
class
=
"form-control"
id=
"inputPassword3"
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>
</div>
</div>
</form>
|
5、添加路由
urls.py
|
1
2
3
4
5
|
from app01
import
views
urlpatterns = [
url(r
'^admin/'
, admin.site.urls),
url(r
'^login/'
, views.login),
]
|
app01/views.py
|
1
2
|
def login(request):
return
render(request,
'login.html'
)
|
6、form表單提交到的地方
login.html
|
1
|
<form
class
=
"form-horizontal"
action=
"/login/"
>
|
7、input設置name屬性
login.html
|
1
2
|
<input type=
"email"
class
=
"form-control"
name=
"email"
placeholder=
"Email"
>
<input type=
"password"
class
=
"form-control"
name=
"pwd"
placeholder=
"Password"
>
|
8、定義表單提交的方式：method=‘post’
login.html
|
1
|
<form
class
=
"form-horizontal"
action=
"/login/"
method=
"post"
>
|
9、判斷用戶請求方式，修改login函數
如果是get請求，返回login.html頁面
如果是post請求，檢驗用戶輸入是否正確，對了就跳轉，反之就提示錯誤
views.py
|
1
2
3
4
5
6
7
8
9
10
11
|
from django.shortcuts
import
render
from django.shortcuts
import
redirect
def login(request):
if
request.method ==
'POST'
:
input_email = request.POST[
'email'
]
input_pwd = request.POST[
'pwd'
]
if
input_email ==
'user1@qq.com'
and input_pwd ==
'123'
:
else
:
return
render(request,
"login.html"
,{
"status"
:
"用戶名密碼錯誤"
})
return
render(request,
'login.html'
)
|
10、在提交按鈕的后面加入錯誤提示的span標簽
login.html
|
1
2
|
<button type=
"submit"
class
=
"btn btn-default"
>Sign
in
</button>
<span style=
"color: red"
>{{ status }}</span>
|
11、暫時屏蔽表單提交的403錯誤（以后跨站請求偽造的時候會解決）
settings.py
|
1
2
3
4
5
6
7
8
9
10
|
MIDDLEWARE_CLASSES = [
'django.middleware.security.SecurityMiddleware'
,
'django.contrib.sessions.middleware.SessionMiddleware'
,
'django.middleware.common.CommonMiddleware'
,
#
'django.middleware.csrf.CsrfViewMiddleware'
, #把此行注釋
'django.contrib.auth.middleware.AuthenticationMiddleware'
,
'django.contrib.auth.middleware.SessionAuthenticationMiddleware'
,
'django.contrib.messages.middleware.MessageMiddleware'
,
'django.middleware.clickjacking.XFrameOptionsMiddleware'
,
]
|
12、驗證結果
