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