Django實作網站登陸的功能

django版本如下：

1

2

3

<code>[root@dvl-stun-001 testoms]</code><code># python -c "import django;print django.VERSION"</code>

<code>(1, 10, 3, u</code><code>'final'</code><code>, 0)</code>

<code>[root@dvl-stun-001 testoms]</code><code>#</code>

django預設情況下是有一個登陸界面的，就是當你啟動project的時候，在浏覽器裡輸入“外網ip位址/admin“就會看到django預設的登陸界面，如圖：

<a href="https://s3.51cto.com/wyfs02/M02/91/E7/wKioL1j5Z3LxJneeAABpIXtmo_A575.png" target="_blank"></a>

但是我們還是希望可以做出來一個我們内部使用者可以登陸平台的界面，而這篇文章就叫講述如何達到這個目的。

4

5

6

7

8

9

10

<code>INSTALLED_APPS = [</code>

<code>    </code><code>'django.contrib.admin'</code><code>,</code>

<code>    </code><code>'django.contrib.auth'</code><code>,</code>

<code>    </code><code>'django.contrib.contenttypes'</code><code>,</code>

<code>    </code><code>'django.contrib.sessions'</code><code>,</code>

<code>    </code><code>'django.contrib.messages'</code><code>,</code>

<code>    </code><code>'django.contrib.staticfiles'</code><code>,</code>

<code>        </code><code>'app1'</code><code>,</code>

<code>        </code><code>'app2'</code><code>,</code>

<code>]</code>

<code></code>

然後把MIDDLEWARE裡的csrf注釋掉：

<code>MIDDLEWARE = [</code>

<code>    </code><code>'django.middleware.security.SecurityMiddleware'</code><code>,</code>

<code>    </code><code>'django.contrib.sessions.middleware.SessionMiddleware'</code><code>,</code>

<code>    </code><code>'django.middleware.common.CommonMiddleware'</code><code>,</code>

<code>    </code><code>#'django.middleware.csrf.CsrfViewMiddleware',</code>

<code>    </code><code>'django.contrib.auth.middleware.AuthenticationMiddleware'</code><code>,</code>

<code>    </code><code>'django.contrib.messages.middleware.MessageMiddleware'</code><code>,</code>

<code>    </code><code>'django.middleware.clickjacking.XFrameOptionsMiddleware'</code><code>,</code>

<code>    </code><code>'debug_toolbar.middleware.DebugToolbarMiddleware'</code><code>,</code>

此時testoms/testoms/url.py的内容是初始化的，是這樣的：

<code>from django.conf.urls </code><code>import</code> <code>url</code>

<code>from django.contrib </code><code>import</code> <code>admin</code>

<code>urlpatterns = [</code>

<code>    </code><code>url(r</code><code>'^admin/'</code><code>, admin.site.urls),</code>

現在我們在app1裡建立一個小資料表，可以用來存放賬号的密碼，來到testoms/app1裡面，#vim models.py,編輯成如下内容：

11

12

<code>from __future__ </code><code>import</code> <code>unicode_literals</code>

<code>from django.db </code><code>import</code> <code>models</code>

<code>class User(models.Model):</code>

<code>    </code><code>username = models.CharField(max_length=50)</code>

<code>    </code><code>password = models.CharField(max_length=50)</code>

<code>    </code> 

<code>class UserAdmin(admin.ModelAdmin):</code>

<code>    </code><code>list_display = (</code><code>'username'</code><code>,</code><code>'password'</code><code>)</code>

<code>admin.site.register(User，UserAdmin)</code>

看到我們設定了一個叫User的類，裡面有兩個字段分别是username和password，最大位元組數是50，這裡設定的比較簡單，如果想做的更精密一點，可以添加郵箱或者手機号什麼的。

傳回到testoms目錄裡，#python manage.py migrate 就會看到資料庫已經被同步，然後#python manage.py createsuperuser 建立一個超級使用者，這樣可以登陸到django的背景裡。登陸背景之後就會看到app1的菜單欄下面多了一個Users，也就是上面我們設定的那個“類”名：

<a href="https://s3.51cto.com/wyfs02/M00/91/E9/wKiom1j5bimgoni8AAAKTSoHpaA712.png" target="_blank"></a>

然後點選add，随便添加一個使用者，比如user叫“lidakang",密碼是123123：

<a href="https://s5.51cto.com/wyfs02/M01/91/EA/wKiom1j5bveA7-l8AAAfluwMAwQ310.png" target="_blank"></a>

點選save儲存之後，就會看到效果：

<a href="https://s2.51cto.com/wyfs02/M02/91/E9/wKioL1j5cHzC_YiwAAAzfv0PYUE058.png" target="_blank"></a>

可以看到我們已經設定lidakang可以登陸到我們的django裡了，也就是說我們的小資料庫裡多了一條叫lidakang的資料，那麼使用者資訊表已經生成，下面要做的就是使用者登陸功能。

在testoms/app1的views.py裡，修改成這樣的内容：

這段代碼的意思是，規定通過POST的當時擷取到輸入的“賬号”和“密碼”，如果輸入的資料與資料庫User資料表的字段一緻，那麼就跳轉到success.html界面（同時把username這個字段設定叫‘username’），反之就跳轉到fail.html這個頁面。

現在我們就要設定success.html界面以及login.html界面了，在testoms/app1/templates裡面，#vim login.html，内容如下：

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;  </code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;  </code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;Login&lt;/</code><code>title</code><code>&gt;  </code>

<code>  </code><code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>    </code><code>html{</code>

<code>    </code><code>width: 100%;</code>

<code>    </code><code>height: 100%;</code>

<code>    </code><code>overflow: hidden;</code>

<code>    </code><code>font-style: sans-serif;</code>

<code>}</code>

<code>body{</code>

<code>    </code><code>font-family: 'Open Sans',sans-serif;</code>

<code>    </code><code>margin: 0;</code>

<code>    </code><code>background-color: #4A374A;</code>

<code>#login{</code>

<code>    </code><code>position: absolute;</code>

<code>    </code><code>top: 50%;</code>

<code>    </code><code>left:50%;</code>

<code>    </code><code>margin: -150px 0 0 -150px;</code>

<code>    </code><code>width: 400px;</code>

<code>    </code><code>height: 400px;</code>

<code>#login h1{</code>

<code>    </code><code>color: #fff;</code>

<code>    </code><code>text-shadow:0 0 10px;</code>

<code>    </code><code>letter-spacing: 1px;</code>

<code>    </code><code>text-align: center;</code>

<code>    </code><code>width: 430px;</code>

<code>    </code><code>margin-left: -60px;</code>

<code>h1{</code>

<code>    </code><code>font-size: 2em;</code>

<code>    </code><code>margin: 0.67em 0;</code>

<code>input{</code>

<code>    </code><code>width: 278px;</code>

<code>    </code><code>height: 18px;</code>

<code>    </code><code>margin-bottom: 10px;</code>

<code>    </code><code>outline: none;</code>

<code>    </code><code>padding: 10px;</code>

<code>    </code><code>font-size: 13px;</code>

<code>    </code><code>text-shadow:1px 1px 1px;</code>

<code>    </code><code>border-top: 1px solid #312E3D;</code>

<code>    </code><code>border-left: 1px solid #312E3D;</code>

<code>    </code><code>border-right: 1px solid #312E3D;</code>

<code>    </code><code>border-bottom: 1px solid #56536A;</code>

<code>    </code><code>border-radius: 4px;</code>

<code>    </code><code>background-color: #2D2D3F;</code>

<code>.but{</code>

<code>    </code><code>width: 300px;</code>

<code>    </code><code>min-height: 20px;</code>

<code>    </code><code>display: block;</code>

<code>    </code><code>background-color: #4a77d4;</code>

<code>    </code><code>border: 1px solid #3762bc;</code>

<code>    </code><code>padding: 9px 14px;</code>

<code>    </code><code>font-size: 15px;</code>

<code>    </code><code>line-height: normal;</code>

<code>    </code><code>border-radius: 5px;</code>

<code> </code><code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code> </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"login"</code><code>&gt;</code>

<code>&lt;</code><code>h1</code><code>&gt;歡迎登陸陳男神的運維平台！&lt;/</code><code>h1</code><code>&gt;</code>

<code>&lt;</code><code>form</code> <code>method = 'post' </code><code>enctype</code><code>=</code><code>"multipart/form-data"</code><code>&gt;</code>

<code>    </code><code>`uf`.`as_p`</code>

<code>    </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>value = "ok" /&gt;</code>

<code>&lt;/</code><code>form</code><code>&gt;</code>

<code> </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

我在這裡把html和css寫到了一起，是以比較長。儲存退出之後，再建立一個叫success.html界面：

<code>&lt;?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"UTF-8"</code><code>?&gt;</code>

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code> <code>xml:lang</code><code>=</code><code>"en"</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>h1</code><code>&gt;恭喜`username`,登入成功！&lt;/</code><code>h1</code><code>&gt;</code>

一模一樣的，再來一個fail.html界面： 

<code>    </code><code>&lt;</code><code>h1</code><code>&gt;遺憾`username`,登入失敗...&lt;/</code><code>h1</code><code>&gt;</code>

傳回到app1這一層目錄，手動建立一個叫urls.py的檔案，填寫如下内容：

<code>from app1 </code><code>import</code> <code>views</code>

<code>    </code><code>url(r</code><code>'^$'</code><code>, views.login, name=</code><code>'login'</code><code>),</code>

儲存之後，再傳回到testoms/testoms這一層目錄，修改urls.py的内容：　

<code>from django.conf.urls </code><code>import</code> <code>url,include</code>

<code>admin.autodiscover()</code>

<code>from app1 </code><code>import</code> <code>views as app1_views</code>

<code>from app2 </code><code>import</code> <code>views as app2_views</code>

<code>    </code><code>#url(r'^$', app1_views.hello,name='hello'),</code>

<code>    </code><code>url(r</code><code>'^bye/$'</code><code>, app2_views.bye,name=</code><code>'bye'</code><code>),</code>

<code>    </code><code>url(r</code><code>'^login/'</code><code>, include(</code><code>'app1.urls'</code><code>)),　　＃在這裡用到了剛才在 app1下建立的urls.py檔案</code>

重新啟動django，在浏覽器位址欄裡輸入"外網ip位址/login"，就會看到我們的成果： 

<a href="https://s4.51cto.com/wyfs02/M00/91/F3/wKiom1j5p9XgfJtrAAEuYm7ze40153.png" target="_blank"></a>

 輸入我們剛剛建立的lidakang和對應的密碼123123，點選 OK之後，就會看到成功的界面： 

<a href="https://s2.51cto.com/wyfs02/M02/91/EA/wKioL1j5diHwbkusAAA-dSGu8Sw214.png" target="_blank"></a>

而如果輸入的賬号名密碼不比對，比如這裡我随便輸入一個dsada的使用者，那麼就會出來失敗的界面： 

<a href="https://s4.51cto.com/wyfs02/M00/91/F4/wKioL1j5sUCwaC2eAAAfOJmV5Vs709.png" target="_blank"></a>

 本文轉自 蘇幕遮618 51CTO部落格，原文連結:http://blog.51cto.com/chenx1242/1917985