一毅该、創(chuàng)建項(xiàng)目

1.1.創(chuàng)建項(xiàng)目和app

django-admin startproject mysite-login

python manage.py startapp login

1.2.設(shè)置時(shí)區(qū)和語言

Django默認(rèn)使用美國時(shí)間和英語，在項(xiàng)目的settings文件中督怜，如下所示：

LANGUAGE_CODE = 'en-us' 
TIME_ZONE = 'UTC' 
USE_I18N = True
USE_L10N = True
USE_TZ = True

我們把它改為亞洲/上海時(shí)間和中文

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai' 
USE_I18N = True
USE_L10N = True
USE_TZ = False

1.3.啟動(dòng)

運(yùn)行測試一下工程，在本機(jī)的瀏覽器中訪問http://127.0.0.1:8000/

image

二狠角、設(shè)計(jì)數(shù)據(jù)模型

2.1.數(shù)據(jù)庫模型設(shè)計(jì)

作為一個(gè)用戶登錄和注冊(cè)項(xiàng)目号杠，需要保存的都是各種用戶的相關(guān)信息。很顯然丰歌，我們至少需要一張用戶表User究流，在用戶表里需要保存下面的信息：

• 用戶名
• 密碼
• 郵箱地址
• 性別
• 創(chuàng)建時(shí)間

進(jìn)入login/models.py辣吃，代碼如下

# login/models.py
from django.db import models 
class User(models.Model):
    '''用戶表''' 
    gender = (
        ('male','男'),
        ('female','女'),
    )
    name = models.CharField(max_length=128,unique=True)
    password = models.CharField(max_length=256)
    email = models.EmailField(unique=True)
    sex = models.CharField(max_length=32,choices=gender,default='男')
    c_time = models.DateTimeField(auto_now_add=True) 
    def __str__(self):
        return self.name
    class Meta:
        ordering = ['c_time']
        verbose_name = '用戶' 
        verbose_name_plural = '用戶'

各字段含義：

• name必填，最長不超過128個(gè)字符芬探，并且唯一神得，也就是不能有相同姓名；
• password必填偷仿，最長不超過256個(gè)字符（實(shí)際可能不需要這么長）哩簿；
• email使用Django內(nèi)置的郵箱類型，并且唯一酝静；
• 性別使用了一個(gè)choice节榜，只能選擇男或者女，默認(rèn)為男别智；
• 使用__str__幫助人性化顯示對(duì)象信息宗苍；
• 元數(shù)據(jù)里定義用戶按創(chuàng)建時(shí)間的反序排列，也就是最近的最先顯示薄榛；

注意：這里的用戶名指的是網(wǎng)絡(luò)上注冊(cè)的用戶名讳窟，不要等同于現(xiàn)實(shí)中的真實(shí)姓名，所以采用了唯一機(jī)制敞恋。如果是現(xiàn)實(shí)中可以重復(fù)的人名丽啡，那肯定是不能設(shè)置unique的。

2.2.設(shè)置數(shù)據(jù)庫為Mysql

#settings.py
DATABASES = { 'default': { 
    'ENGINE': 'django.db.backends.mysql',
    'NAME': 'database',        #數(shù)據(jù)庫名字                     
    'USER': 'root',          #賬號(hào)
    'PASSWORD': '123456',      #密碼
    'HOST': '127.0.0.1',    #IP
    'PORT': '3306',         #端口
    }
}

init.py里面導(dǎo)入pymysql模塊

# login/init.py
import pymysql  #導(dǎo)入
pymysql.install_as_MySQLdb()

2.3.數(shù)據(jù)庫遷移

注冊(cè)app

#seting.py
INSTALLED_APPS = [ 
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'login',                                            
]

遷移到數(shù)據(jù)庫

python manage.py makemigrations
python manage.py migrate

三硬猫、admin后臺(tái)

3.1.在admin中注冊(cè)模型

# login/admin.py
from django.contrib import admin
from . import models
admin.site.register(models.User)

3.2.創(chuàng)建超級(jí)管理員

python manage.py createsuperuser

然后再增加幾個(gè)測試用戶

image

四补箍、url路由和視圖

前面我們已經(jīng)創(chuàng)建好數(shù)據(jù)模型了，并且在admin后臺(tái)中添加了一些測試用戶啸蜜。下面我們就要設(shè)計(jì)好站點(diǎn)的url路由坑雅、對(duì)應(yīng)的處理視圖函數(shù)以及使用的前端模板了。

4.1.路由設(shè)計(jì)

初步設(shè)想需要下面的四個(gè)URL：

image

考慮到登錄系統(tǒng)屬于站點(diǎn)的一級(jí)功能衬横，為了直觀和更易于接受裹粤，這里沒有采用二級(jí)路由的方式，而是在根路由下直接編寫路由條目冕香，同樣也沒有使用反向解析名（name參數(shù)）蛹尝。

mysite_login/urls.py

from django.urls import path
from django.contrib import admin
from login import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('login/', views.login),
    path('register/', views.register),
    path('logout/', views.logout),
]

4.2.架構(gòu)初步視圖

路由寫好了后豫，就進(jìn)入login/views.py文件編寫視圖的框架悉尾，代碼如下：

login/views.py

from django.shortcuts import render,redirect
def index(request):
    pass
    return render(request,'login/index.html')
def login(request):
    pass
    return render(request,'login/login.html')
def register(request):
    pass
    return render(request,'login/register.html')
def logout(request):
    pass
    return redirect('/index/')

我們先不著急完成視圖內(nèi)部的具體細(xì)節(jié)，而是把框架先搭建起來挫酿。

4.3.創(chuàng)建HTML頁面文件

在項(xiàng)目根路徑的login目錄中創(chuàng)建一個(gè)templates目錄构眯，再在templates目錄里創(chuàng)建一個(gè)login目錄

在login/templates/login目錄中創(chuàng)建三個(gè)文件index.html、login.html以及register.html 早龟，并寫入如下的代碼：

index.html

 <!--login/templates/login/index.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首頁</title>
    </head>
    <body>
        <h1>首頁</h1>
    </body>
</html>

login.html

<!--login/templates/login/login.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登錄</title>
    </head>
    <body>
        <h1>登錄頁面</h1>
    </body>
</html>

register.html

<!--login/templates/login/register.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注冊(cè)</title>
    </head>
    <body>
        <h1>注冊(cè)頁面</h1>
    </body>
</html>

五惫霸、前端頁面設(shè)計(jì)

5.1.原生HTML頁面

login.html文件中的內(nèi)容猫缭，寫入下面的代碼：

<!--login/templates/login/login.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登錄</title>
    </head>
    <body>
        <div style="margin: 15% 40%;">
            <h1>歡迎登錄！</h1>
            <form action="/login/" method="post">
                <p><label for="id_username">用戶名：</label>
                <input type="text" id="id_username" name="username" placeholder="用戶名" autofocus required /></p>

                <p><label for="id_password">密碼：</label>
                <input type="password" id="id_password" placeholder="密碼" name="password" required ></p>
                <input type="submit" value="確定">
            </form>
        </div>
    </body>
</html>

可以看到如下圖的頁面：

image

5.2.引入Bootstrap

Bootstrap3.3.7下載地址

根目錄下新建一個(gè)static目錄壹店，并將解壓后的bootstrap-3.3.7-dist目錄猜丹，整體拷貝到static目錄中，如下圖所示：

image

由于Bootstrap依賴JQuery硅卢，所以我們需要提前下載并引入JQuery：[下載地址](http://www.jq22.com/jquery-info122)

在static目錄下射窒，新建一個(gè)css和js目錄晒夹，作為以后的樣式文件和js文件的存放地编振，將我們的jquery文件拷貝到static/js目錄下胜臊。

image

然后打開項(xiàng)目的settings文件焰手，在最下面添加配置无切，用于指定靜態(tài)文件的搜索目錄：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

5.3.創(chuàng)建base.html模板

既然要將前端頁面做得像個(gè)樣子妨托，那么就不能和前面一樣速那，每個(gè)頁面都各寫各的蚊俺，單打獨(dú)斗敢辩。一個(gè)網(wǎng)站有自己的統(tǒng)一風(fēng)格和公用部分蔽莱，可以把這部分內(nèi)容集中到一個(gè)基礎(chǔ)模板base.html中。現(xiàn)在责鳍，在根目錄下的templates中新建一個(gè)base.html文件用作站點(diǎn)的基礎(chǔ)模板碾褂。

在Bootstrap文檔中，為我們提供了一個(gè)非常簡單而又實(shí)用的基本模板历葛，代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面正塌，任何其他內(nèi)容都*必須*跟隨其后！ -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
    </head>
    <body>
        <h1>你好恤溶，世界乓诽！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

將它整體拷貝到base.html文件中。

5.4.創(chuàng)建頁面導(dǎo)航條

Bootstrap提供了現(xiàn)成的導(dǎo)航條組件

<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

image

其中有一些部分咒程，比如搜索框是我們目前還不需要的鸠天，需要將多余的內(nèi)容裁剪掉。同時(shí)帐姻，有一些名稱和url地址等需要按我們的實(shí)際內(nèi)容修改稠集。最終導(dǎo)航條的代碼如下：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">
        <span class="sr-only">切換導(dǎo)航條</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Mysite</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="my-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/index/">主頁</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/login/">登錄</a></li>
        <li><a href="/register/">注冊(cè)</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

5.5.使用Bootstrap靜態(tài)文件

{% static '相對(duì)路徑' %}這個(gè)Django為我們提供的靜態(tài)文件加載方法，可以將頁面與靜態(tài)文件鏈接起來

最后饥瓷，base.html內(nèi)容如下：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面剥纷，任何其他內(nèi)容都*必須*跟隨其后！ -->
        <title>{% block title %}base{% endblock %}</title>

        <!-- Bootstrap -->
        <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> {% block css %}{% endblock %} </head>
    <body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">
        <span class="sr-only">切換導(dǎo)航條</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Mysite</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="my-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/index/">主頁</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/login/">登錄</a></li>
        <li><a href="/register/">注冊(cè)</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav> {% block content %}{% endblock %} <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/jquery-3.2.1.js' %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}">    </script>
    </body>
</html></pre>

簡要說明：

• 通過頁面頂端的{% load staticfiles %}加載后呢铆，才可以使用static方法晦鞋；
• 通過{% block title %}base{% endblock %}，設(shè)置了一個(gè)動(dòng)態(tài)的頁面title塊；
• 通過{% block css %}{% endblock %}悠垛，設(shè)置了一個(gè)動(dòng)態(tài)的css加載塊线定；
• 通過{% block content %}{% endblock %}，為具體頁面的主體內(nèi)容留下接口确买；
• 通過{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}將樣式文件指向了我們的實(shí)際靜態(tài)文件斤讥，下面的js腳本也是同樣的道理。

看下效果

image

5.6.設(shè)計(jì)登錄頁面

Bootstarp提供了一個(gè)基本的表單樣式湾趾，代碼如下：

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox"> Check me out </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

如下：

image

我們結(jié)合Bootstrap和前面自己寫的form表單周偎，修改login/templates/login/login.html成符合項(xiàng)目要求的樣子：

{% extends 'login/base.html' %}
{% load staticfiles %}
{% block title %}登錄{% endblock %}
{% block css %} <link rel="stylesheet" href="{% static 'css/login.css' %}"> {% endblock %}

{% block content %} <div class="container">
    <div class="col-md-4 col-md-offset-4">
      <form class='form-login' action="/login/" method="post">
          <h2 class="text-center">歡迎登錄</h2>
          <div class="form-group">
            <label for="id_username">用戶名：</label>
            <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>
          </div>
          <div class="form-group">
            <label for="id_password">密碼：</label>
            <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>
          </div>
          <button type="reset" class="btn btn-default pull-left">重置</button>
          <button type="submit" class="btn btn-primary pull-right">提交</button>
      </form>
    </div>
</div> <!-- /container --> {% endblock %}</pre>

說明：

• 通過{% extends 'base.html' %}繼承了‘base.html’模板的內(nèi)容；
• 通過{% block title %}登錄{% endblock %}設(shè)置了專門的title撑帖；
• 通過block css引入了針對(duì)性的login.css樣式文件蓉坎；
• 主體內(nèi)容定義在block content內(nèi)部
• 添加了一個(gè)重置按鈕。

在static/css目錄中新建一個(gè)login.css樣式文件胡嘿，這里簡單地寫了點(diǎn)樣式蛉艾，

body { 
    background-color: #eee;
}
.form-login {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-login .form-control { 
    position: relative; 
    height: auto; 
    -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
                 box-sizing: border-box; 
    padding: 10px; font-size: 16px;
}
.form-login .form-control:focus { 
    z-index: 2;
}
.form-login input[type="text"] { 
    margin-bottom: -1px; 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0;
}
.form-login input[type="password"] { 
    margin-bottom: 10px; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
}

最后效果

image

六、登錄視圖

6.1.登錄視圖

根據(jù)我們?cè)诼酚芍械脑O(shè)計(jì)衷敌，用戶通過login.html中的表單填寫用戶名和密碼勿侯，并以POST的方式發(fā)送到服務(wù)器的/login/地址。服務(wù)器通過login/views.py中的login()視圖函數(shù)缴罗，接收并處理這一請(qǐng)求助琐。

我們可以通過下面的方法接收和處理請(qǐng)求：

def login(request): 
    if request.method == "POST":
        username = request.POST.get('username')
        password = request.POST.get('password')
        return redirect('/index/')
    return render(request, 'login/login.html')

還需要在前端頁面的form表單內(nèi)添加一個(gè){% csrf_token %}標(biāo)簽：

<form class='form-login' action="/login/" method="post">
  {% csrf_token %}
    <h2 class="text-center">歡迎登錄</h2>
    <div class="form-group">
       ...... 
</form>

進(jìn)入登錄頁面，輸入用戶名面氓，密碼然后跳轉(zhuǎn)到index頁面兵钮。

6.2.數(shù)據(jù)驗(yàn)證

通過唯一的用戶名，使用Django的ORM去數(shù)據(jù)庫中查詢用戶數(shù)據(jù)舌界，如果有匹配項(xiàng)掘譬，則進(jìn)行密碼對(duì)比，如果沒有匹配項(xiàng)呻拌，說明用戶名不存在葱轩。如果密碼對(duì)比錯(cuò)誤，說明密碼不正確藐握。

def login(request):
    if request.method == "POST":
        username = request.POST.get('username', None)
        password = request.POST.get('password', None) if username and password:  # 確保用戶名和密碼都不為空
        username = username.strip() # 用戶名字符合法性驗(yàn)證
        # 密碼長度驗(yàn)證
        # 更多的其它驗(yàn)證.....
        try:
            user = models.User.objects.get(name=username)
        except:
            return render(request, 'login/login.html')
        if user.password == password:
            return redirect('/index/')
    return render(request, 'login/login.html')

6.3.添加提示信息

上面的代碼還缺少很重要的一部分內(nèi)容靴拱，提示信息！無論是登錄成功還是失敗猾普，用戶都沒有得到任何提示信息袜炕，這顯然是不行的。

修改一下login視圖：

def login(request): 
    if request.method == "POST":
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)
        message = "所有字段都必須填寫抬闷！"
        if username and password:  # 確保用戶名和密碼都不為空
            username = username.strip() # 用戶名字符合法性驗(yàn)證
            # 密碼長度驗(yàn)證
            # 更多的其它驗(yàn)證.....
            try:
                user = models.User.objects.get(name=username) 
                if user.password == password: 
                    return redirect('/index/') 
                else:
                message = "密碼不正確妇蛀！"
            except:
            message = "用戶名不存在！"
        return render(request, 'login/login.html', {"message": message}) 
    return render(request, 'login/login.html')

增加了message變量笤成，用于保存提示信息评架。當(dāng)有錯(cuò)誤信息的時(shí)候，將錯(cuò)誤信息打包成一個(gè)字典炕泳，然后作為第三個(gè)參數(shù)提供給render()方法纵诞。這個(gè)數(shù)據(jù)字典在渲染模板的時(shí)候會(huì)傳遞到模板里供你調(diào)用。

為了在前端頁面顯示信息培遵，還需要對(duì)login.html進(jìn)行修改：

{% extends 'login/base.html' %}
{% load staticfiles %}
{% block title %}登錄{% endblock %}
{% block css %} <link rel="stylesheet" href="{% static 'css/login.css' %}"> {% endblock %}

{% block content %} <div class="container">
    <div class="col-md-4 col-md-offset-4">
        <form class='form-login' action="/login/" method="post"> {% if message %} <div class="alert alert-warning">{{ message }}</div> {% endif %}

            {% csrf_token %} <h2 class="text-center">歡迎登錄</h2>
            <div class="form-group">
                <label for="id_username">用戶名：</label>
                <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>
            </div>
            <div class="form-group">
                <label for="id_password">密碼：</label>
                <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>
            </div>
            <button type="reset" class="btn btn-default pull-left">重置</button>
            <button type="submit" class="btn btn-primary pull-right">提交</button>
        </form>
    </div>
</div> <!-- /container --> {% endblock %}</pre>

把index.html主頁模板也修改一下浙芙，刪除原有內(nèi)容，添加下面的代碼：

{#login/templates/login/index.html#}
{% extends 'login/base.html' %}
{% block title %}主頁{% endblock %}
{% block content %}
    <h1>歡迎回來籽腕！</h1>
{% endblock %}</pre>

七嗡呼、Django表單

Django的表單給我們提供了下面三個(gè)主要功能：

• 準(zhǔn)備和重構(gòu)數(shù)據(jù)用于頁面渲染；
• 為數(shù)據(jù)創(chuàng)建HTML表單元素皇耗；
• 接收和處理用戶從表單發(fā)送過來的數(shù)據(jù)

7.1.創(chuàng)建表單模型

from django import forms 
class UserForm(forms.Form):
    username = forms.CharField(label="用戶名", max_length=128)
    password = forms.CharField(label="密碼", max_length=256, widget=forms.PasswordInput)

說明：

• 要先導(dǎo)入forms模塊
• 所有的表單類都要繼承forms.Form類
• 每個(gè)表單字段都有自己的字段類型比如CharField南窗，它們分別對(duì)應(yīng)一種HTML語言中<form>內(nèi)的一個(gè)input元素。這一點(diǎn)和Django模型系統(tǒng)的設(shè)計(jì)非常相似郎楼。
• label參數(shù)用于設(shè)置<label>標(biāo)簽
• max_length限制字段輸入的最大長度万伤。它同時(shí)起到兩個(gè)作用，一是在瀏覽器頁面限制用戶輸入不可超過字符數(shù)呜袁，二是在后端服務(wù)器驗(yàn)證用戶輸入的長度也不可超過敌买。
• widget=forms.PasswordInput用于指定該字段在form表單里表現(xiàn)為<input type='password' />，也就是密碼輸入框阶界。

7.2.修改視圖

使用了Django的表單后虹钮，就要在視圖中進(jìn)行相應(yīng)的修改：

login/views.py

from django.shortcuts import render,redirect
from . import models from .forms import UserForm
def index(request):
    pass
return render(request,'login/index.html')
def login(request):
    if request.method == "POST":
        login_form = UserForm(request.POST)
        message = "請(qǐng)檢查填寫的內(nèi)容！"
        if login_form.is_valid():
            username = login_form.cleaned_data['username']
            password = login_form.cleaned_data['password'] 
            try:
                user = models.User.objects.get(name=username) 
                if user.password == password: 
                    return redirect('/index/') else:
                    message = "密碼不正確膘融！"
            except:
            message = "用戶不存在芜抒！"
        return render(request, 'login/login.html', locals())

    login_form = UserForm() 
    return render(request, 'login/login.html', locals())

• 對(duì)于非POST方法發(fā)送數(shù)據(jù)時(shí)，比如GET方法請(qǐng)求頁面托启，返回空的表單宅倒，讓用戶可以填入數(shù)據(jù)；
• 對(duì)于POST方法屯耸，接收表單數(shù)據(jù)拐迁，并驗(yàn)證；
• 使用表單類自帶的is_valid()方法一步完成數(shù)據(jù)驗(yàn)證工作疗绣；
• 驗(yàn)證成功后可以從表單對(duì)象的cleaned_data數(shù)據(jù)字典中獲取表單的具體值线召；
• 如果驗(yàn)證不通過，則返回一個(gè)包含先前數(shù)據(jù)的表單給前端頁面多矮，方便用戶修改缓淹。也就是說哈打，它會(huì)幫你保留先前填寫的數(shù)據(jù)內(nèi)容，而不是返回一個(gè)空表讯壶！

另外料仗，這里使用了一個(gè)小技巧，Python內(nèi)置了一個(gè)locals()函數(shù)伏蚊，它返回當(dāng)前所有的本地變量字典立轧，我們可以偷懶的將這作為render函數(shù)的數(shù)據(jù)字典參數(shù)值，就不用費(fèi)勁去構(gòu)造一個(gè)形如{'message':message, 'login_form':login_form}的字典了躏吊。這樣做的好處當(dāng)然是大大方便了我們氛改，但是同時(shí)也可能往模板傳入了一些多余的變量數(shù)據(jù)，造成數(shù)據(jù)冗余降低效率比伏。

7.3.修改login界面

Django的表單很重要的一個(gè)功能就是自動(dòng)生成HTML的form表單內(nèi)容∈ぢ保現(xiàn)在，我們需要修改一下原來的login.html文件：

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}登錄{% endblock %}
{% block css %}<link href="{% static 'css/login.css' %}" rel="stylesheet"/>{% endblock %}

{% block content %} <div class="container">
    <div class="col-md-4 col-md-offset-4">
      <form class='form-login' action="/login/" method="post"> {% if message %} <div class="alert alert-warning">{{ message }}</div> {% endif %}
          {% csrf_token %} <h2 class="text-center">歡迎登錄</h2> {{ login_form }} <button type="reset" class="btn btn-default pull-left">重置</button>
          <button type="submit" class="btn btn-primary pull-right">提交</button>

      </form>
    </div>
</div> <!-- /container --> {% endblock %}</pre>

瀏覽器生成的HTML源碼

image

image

7.4.手動(dòng)渲染表單

直接{{ login_form }}雖然好，啥都不用操心肤舞，但是界面真的很丑紫新，往往并不是你想要的，如果你要使用CSS和JS李剖，比如你要引入Bootstarps框架芒率，這些都需要對(duì)表單內(nèi)的input元素進(jìn)行額外控制，那怎么辦呢篙顺？手動(dòng)渲染字段就可以了偶芍。

可以通過{{ login_form.name_of_field }}獲取每一個(gè)字段，然后分別渲染德玫，如下例所示：

<div class="form-group"> {{ login_form.username.label_tag }}{{ login_form.username}} </div>
<div class="form-group"> {{ login_form.password.label_tag }}{{ login_form.password }} </div>

然后匪蟀，在form類里添加attr屬性即可，如下所示修改login/forms.py

from django import forms 
class UserForm(forms.Form):
    username = forms.CharField(label="用戶名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(label="密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))

再次刷新頁面宰僧，就顯示正常了材彪！

八、圖片驗(yàn)證碼

為了防止機(jī)器人頻繁登錄網(wǎng)站或者破壞分子惡意登錄琴儿，很多用戶登錄和注冊(cè)系統(tǒng)都提供了圖形驗(yàn)證碼功能段化。

驗(yàn)證碼（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測試）的縮寫，是一種區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序造成∠匝可以防止惡意破解密碼、刷票晒屎、論壇灌水喘蟆，有效防止某個(gè)黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試缓升。

圖形驗(yàn)證碼的歷史比較悠久，到現(xiàn)在已經(jīng)有點(diǎn)英雄末路的味道了蕴轨。因?yàn)闄C(jī)器學(xué)習(xí)港谊、圖像識(shí)別的存在，機(jī)器人已經(jīng)可以比較正確的識(shí)別圖像內(nèi)的字符了尺棋。但不管怎么說，作為一種防御手段绵跷，至少還是可以抵擋一些低級(jí)入門的攻擊手段膘螟，抬高了攻擊者的門檻。

在Django中實(shí)現(xiàn)圖片驗(yàn)證碼功能非常簡單碾局，有現(xiàn)成的第三方庫可以使用荆残，我們不必自己開發(fā)（也要能開發(fā)得出來，囧）净当。這個(gè)庫叫做django-simple-captcha内斯。

8.1.安裝captcha

直接安裝：pip install django-simple-captcha

Django自動(dòng)幫我們安裝了相關(guān)的依賴庫six、olefile和Pillow像啼，其中的Pillow是大名鼎鼎的繪圖模塊俘闯。

注冊(cè)captcha

在settings中，將‘captcha’注冊(cè)到app列表里：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'login',
    'captcha',
]

captcha需要在數(shù)據(jù)庫中建立自己的數(shù)據(jù)表忽冻，所以需要執(zhí)行migrate命令生成數(shù)據(jù)表：

python manage.py migrate

8.2.添加url路由

根目錄下的urls.py文件中增加captcha對(duì)應(yīng)的網(wǎng)址：

from django.conf.urls import url
from django.conf.urls import include
from django.contrib import admin
from login import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^login/', views.login),
    url(r'^register/', views.register),
    url(r'^logout/', views.logout),
    url(r'^captcha', include('captcha.urls'))  # 增加這一行
]

8.3.修改forms.py

如果上面都OK了真朗，就可以直接在我們的forms.py文件中添加CaptchaField了。

from django import forms
from captcha.fields import CaptchaField
class UserForm(forms.Form):
    username = forms.CharField(label="用戶名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(label="密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    captcha = CaptchaField(label='驗(yàn)證碼')

需要提前導(dǎo)入from captcha.fields import CaptchaField僧诚，然后就像寫普通的form字段一樣添加一個(gè)captcha字段就可以了遮婶！

8.4.修改login.html

由于我們前面是手動(dòng)生成的form表單，所以還要修改一下湖笨，添加captcha的相關(guān)內(nèi)容旗扑，如下所示：

{% extends 'login/base.html' %}
{% load staticfiles %}
{% block title %}登錄{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock %}

{% block content %}
<div class="container">
    <div class="col-md-4 col-md-offset-4">
      <form class='form-login' action="/login/" method="post"> {% if message %} <div class="alert alert-warning">{{ message }}</div> {% endif %}
          {% csrf_token %} <h2 class="text-center">歡迎登錄</h2>
          <div class="form-group"> {{ login_form.username.label_tag }}
              {{ login_form.username}} </div>
          <div class="form-group"> {{ login_form.password.label_tag }}
              {{ login_form.password }} </div>

          <div class="form-group"> {{ login_form.captcha.errors }}
              {{ login_form.captcha.label_tag }}
              {{ login_form.captcha }} </div>

          <button type="reset" class="btn btn-default pull-left">重置</button>
          <button type="submit" class="btn btn-primary pull-right">提交</button>

      </form>
    </div>
</div>
<!-- /container -->
{% endblock %}

這里額外增加了一條{{ login_form.captcha.errors }}用于明確指示用戶，你的驗(yàn)證碼不正確

查看效果：

image

其中驗(yàn)證圖形碼是否正確的工作都是在后臺(tái)自動(dòng)完成的慈省，只需要使用is_valid()這個(gè)forms內(nèi)置的驗(yàn)證方法就一起進(jìn)行了臀防，完全不需要在視圖函數(shù)中添加任何的驗(yàn)證代碼，非常方便快捷边败！

九清钥、session會(huì)話

因?yàn)橐蛱鼐W(wǎng)HTTP協(xié)議的特性，每一次來自于用戶瀏覽器的請(qǐng)求（request）都是無狀態(tài)的放闺、獨(dú)立的祟昭。通俗地說，就是無法保存用戶狀態(tài)怖侦，后臺(tái)服務(wù)器根本就不知道當(dāng)前請(qǐng)求和以前及以后請(qǐng)求是否來自同一用戶篡悟。對(duì)于靜態(tài)網(wǎng)站谜叹，這可能不是個(gè)問題，而對(duì)于動(dòng)態(tài)網(wǎng)站搬葬，尤其是京東荷腊、天貓、銀行等購物或金融網(wǎng)站急凰，無法識(shí)別用戶并保持用戶狀態(tài)是致命的女仰，根本就無法提供服務(wù)。你可以嘗試將瀏覽器的cookie功能關(guān)閉抡锈，你會(huì)發(fā)現(xiàn)將無法在京東登錄和購物疾忍。
為了實(shí)現(xiàn)連接狀態(tài)的保持功能，網(wǎng)站會(huì)通過用戶的瀏覽器在用戶機(jī)器內(nèi)被限定的硬盤位置中寫入一些數(shù)據(jù)床三，也就是所謂的Cookie一罩。通過Cookie可以保存一些諸如用戶名、瀏覽記錄撇簿、表單記錄聂渊、登錄和注銷等各種數(shù)據(jù)。但是這種方式非常不安全四瘫，因?yàn)镃ookie保存在用戶的機(jī)器上汉嗽，如果Cookie被偽造、篡改或刪除找蜜，就會(huì)造成極大的安全威脅诊胞，因此，現(xiàn)代網(wǎng)站設(shè)計(jì)通常將Cookie用來保存一些不重要的內(nèi)容锹杈，實(shí)際的用戶數(shù)據(jù)和狀態(tài)還是以Session會(huì)話的方式保存在服務(wù)器端撵孤。

Session依賴Cookie！但與Cookie不同的地方在于Session將所有的數(shù)據(jù)都放在服務(wù)器端竭望，用戶瀏覽器的Cookie中只會(huì)保存一個(gè)非明文的識(shí)別信息邪码，比如哈希值。

Django提供了一個(gè)通用的Session框架咬清，并且可以使用多種session數(shù)據(jù)的保存方式：

• 保存在數(shù)據(jù)庫內(nèi)
• 保存到緩存
• 保存到文件內(nèi)
• 保存到cookie內(nèi)

通常情況闭专，沒有特別需求的話，請(qǐng)使用保存在數(shù)據(jù)庫內(nèi)的方式旧烧，盡量不要保存到Cookie內(nèi)影钉。

Django的session框架默認(rèn)啟用，并已經(jīng)注冊(cè)在app設(shè)置內(nèi)掘剪，如果真的沒有啟用平委，那么參考下面的內(nèi)容添加有說明的那兩行，再執(zhí)行migrate命令創(chuàng)建數(shù)據(jù)表夺谁，就可以使用session了廉赔。

# Application definition
 INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',    # 這一行
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',       
    'django.contrib.sessions.middleware.SessionMiddleware',  # 這一行
    'django.middleware.common.CommonMiddleware',   
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

當(dāng)session啟用后肉微，傳遞給視圖request參數(shù)的HttpRequest對(duì)象將包含一個(gè)session屬性，就像一個(gè)字典對(duì)象一樣蜡塌。你可以在Django的任何地方讀寫request.session屬性碉纳，或者多次編輯使用它。

下面是session使用參考：

class backends.base.SessionBase # 這是所有會(huì)話對(duì)象的基類馏艾，包含標(biāo)準(zhǔn)的字典方法:
    __getitem__(key)
        Example: fav_color = request.session['fav_color'] __setitem__(key, value)
        Example: request.session['fav_color'] = 'blue'
    __delitem__(key)
        Example: del request.session['fav_color']  # 如果不存在會(huì)拋出異常
    __contains__(key)
        Example: 'fav_color' in request.session
    get(key, default=None)
        Example: fav_color = request.session.get('fav_color', 'red')
    pop(key, default=__not_given)
        Example: fav_color = request.session.pop('fav_color', 'blue')

 # 類似字典數(shù)據(jù)類型的內(nèi)置方法
    keys()
    items()
    setdefault()
    clear() # 它還有下面的方法：
    flush() # 刪除當(dāng)前的會(huì)話數(shù)據(jù)和會(huì)話cookie劳曹。經(jīng)常用在用戶退出后，刪除會(huì)話琅摩。
    set_test_cookie() # 設(shè)置一個(gè)測試cookie铁孵，用于探測用戶瀏覽器是否支持cookies。由于cookie的工作機(jī)制迫吐，你只有在下次用戶請(qǐng)求的時(shí)候才可以測試库菲。
    test_cookie_worked() # 返回True或者False账忘，取決于用戶的瀏覽器是否接受測試cookie志膀。你必須在之前先調(diào)用set_test_cookie()方法。
    delete_test_cookie() # 刪除測試cookie鳖擒。
    set_expiry(value) # 設(shè)置cookie的有效期溉浙。可以傳遞不同類型的參數(shù)值：
    ? 如果值是一個(gè)整數(shù)蒋荚，session將在對(duì)應(yīng)的秒數(shù)后失效戳稽。例如request.session.set_expiry(300) 將在300秒后失效.
    ? 如果值是一個(gè)datetime或者timedelta對(duì)象, 會(huì)話將在指定的日期失效
    ? 如果為0，在用戶關(guān)閉瀏覽器后失效
    ? 如果為None期升，則將使用全局會(huì)話失效策略
    失效時(shí)間從上一次會(huì)話被修改的時(shí)刻開始計(jì)時(shí)惊奇。

    get_expiry_age() # 返回多少秒后失效的秒數(shù)。對(duì)于沒有自定義失效時(shí)間的會(huì)話播赁，這等同于SESSION_COOKIE_AGE.
        # 這個(gè)方法接受2個(gè)可選的關(guān)鍵字參數(shù)
    ? modification:會(huì)話的最后修改時(shí)間（datetime對(duì)象）颂郎。默認(rèn)是當(dāng)前時(shí)間。
    ?expiry: 會(huì)話失效信息容为，可以是datetime對(duì)象乓序，也可以是int或None

    get_expiry_date() # 和上面的方法類似，只是返回的是日期
    get_expire_at_browser_close() # 返回True或False坎背，根據(jù)用戶會(huì)話是否是瀏覽器關(guān)閉后就結(jié)束替劈。
    clear_expired() # 刪除已經(jīng)失效的會(huì)話數(shù)據(jù)。
    cycle_key() # 創(chuàng)建一個(gè)新的會(huì)話秘鑰用于保持當(dāng)前的會(huì)話數(shù)據(jù)得滤。django.contrib.auth.login() 會(huì)調(diào)用這個(gè)方法陨献。

9.1.使用session

首先，修改login/views.py中的login()視圖函數(shù)：

def login(request):
    if request.session.get('is_login',None):
        return redirect('/index')
    if request.method == "POST":
        login_form = UserForm(request.POST)
        message = "請(qǐng)檢查填寫的內(nèi)容懂更！"
        if login_form.is_valid():
            username = login_form.cleaned_data['username']
            password = login_form.cleaned_data['password'] 
            try:
                user = models.User.objects.get(name=username)
                if user.password == password:
                    request.session['is_login'] = True
                    request.session['user_id'] = user.id
                    request.session['user_name'] = user.name
                    return redirect('/index/') 
                else:
                    message = "密碼不正確湿故！"
            except:
                message = "用戶不存在阿趁！"
        return render(request, 'login/login.html', locals())

    login_form = UserForm()
    return render(request, 'login/login.html', locals())

通過下面的if語句，我們不允許重復(fù)登錄：

<pre style="margin: 0px 0px 0px 22px; white-space: pre-wrap; word-wrap: break-word; font-size: 12px !important; font-family: "Courier New" !important;">if request.session.get('is_login',None): return redirect("/index/")</pre>

通過下面的語句坛猪，我們往session字典內(nèi)寫入用戶狀態(tài)和數(shù)據(jù)：

request.session['is_login'] = True
request.session['user_id'] = user.id
request.session['user_name'] = user.name

你完全可以往里面寫任何數(shù)據(jù)脖阵，不僅僅限于用戶相關(guān)！

既然有了session記錄用戶登錄狀態(tài)墅茉，那么就可以完善我們的登出視圖函數(shù)了：

def logout(request):
    if not request.session.get('is_login', None): # 如果本來就未登錄命黔，也就沒有登出一說
        return redirect("/index/")
    request.session.flush() # 或者使用下面的方法
    # del request.session['is_login']
    # del request.session['user_id']
    # del request.session['user_name']
    return redirect("/index/")

flush()方法是比較安全的一種做法，而且一次性將session中的所有內(nèi)容全部清空就斤，確保不留后患悍募。但也有不好的地方，那就是如果你在session中夾帶了一點(diǎn)‘私貨’洋机，會(huì)被一并刪除坠宴，這一點(diǎn)一定要注意。

9.2.完善頁面

有了用戶狀態(tài)绷旗，就可以根據(jù)用戶登錄與否喜鼓，展示不同的頁面，比如導(dǎo)航條內(nèi)容：
首先衔肢，修改base.html文件：

<div class="collapse navbar-collapse" id="my-nav">
    <ul class="nav navbar-nav">
        <li class="active"><a href="/index/">主頁</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
    {% if request.session.is_login %}
        <li><a href="#">當(dāng)前在線：{{ request.session.user_name }}</a></li>
        <li><a href="/logout/">登出</a></li>
    {% else %}
        <li><a href="/login/">登錄</a></li>
        <li><a href="/register/">注冊(cè)</a></li>
    {% endif %}
    </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

通過if判斷庄岖，當(dāng)?shù)卿洉r(shí)，顯示當(dāng)前用戶名和登出按鈕角骤。未登錄時(shí)隅忿，顯示登錄和注冊(cè)按鈕。

注意其中的模板語言邦尊，{{ request }}這個(gè)變量會(huì)被默認(rèn)傳入模板中背桐，可以通過圓點(diǎn)的調(diào)用方式，獲取它內(nèi)部的{{ request.session }}蝉揍，再進(jìn)一步的獲取session中的內(nèi)容链峭。其實(shí){{ request }}中的數(shù)據(jù)遠(yuǎn)不止此，例如{{ request.path }}就可以獲取先前的url地址疑苫。

再修改一下index.html頁面熏版，根據(jù)登錄與否的不同，顯示不同的內(nèi)容：

{% extends 'base.html' %}
{% block title %}主頁{% endblock %}
{% block content %}
    {% if request.session.is_login %}
        <h1>你好,{{ request.session.user_name }}捍掺！歡迎回來撼短！</h1>
    {% else %}
        <h1>你尚未登錄，只能訪問公開內(nèi)容挺勿！</h1>
    {% endif %}
{% endblock %}

看下效果：

image

image

十曲横、注冊(cè)視圖

10.1.創(chuàng)建forms

在/login/forms.py中添加一個(gè)新的表單類：

class RegisterForm(forms.Form):
    gender = (
        ('male', "男"),
        ('female', "女"),
    )
    username = forms.CharField(label="用戶名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'}))
    password1 = forms.CharField(label="密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    password2 = forms.CharField(label="確認(rèn)密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label="郵箱地址", widget=forms.EmailInput(attrs={'class': 'form-control'}))
    sex = forms.ChoiceField(label='性別', choices=gender)
    captcha = CaptchaField(label='驗(yàn)證碼')

說明：

• gender和User模型中的一樣，其實(shí)可以拉出來作為常量共用，為了直觀禾嫉，特意重寫一遍灾杰；
• password1和password2，用于輸入兩遍密碼熙参，并進(jìn)行比較艳吠，防止誤輸密碼；
• email是一個(gè)郵箱輸入框孽椰；
• sex是一個(gè)select下拉框昭娩；

10.2.完善register.html

同樣地，類似login.html文件黍匾，我們?cè)趓egister.html中編寫forms相關(guān)條目：

{% extends 'login/base.html' %}
{% block title %}注冊(cè){% endblock %}
{% block content %}
    <div class="container">
        <div class="col-md-4 col-md-offset-4">
            <form class='form-register' action="/register/" method="post">
                {% if message %}
                    <div class="alert alert-warning">{{ message }}</div>
                {% endif %}
                {% csrf_token %}
                <h2 class="text-center">歡迎注冊(cè)</h2>
                <div class="form-group">
                    {{ register_form.username.label_tag }}
                    {{ register_form.username}}
                </div>
                <div class="form-group">
                    {{ register_form.password1.label_tag }}
                    {{ register_form.password1 }}
                </div>
                <div class="form-group">
                    {{ register_form.password2.label_tag }}
                    {{ register_form.password2 }}
                </div>
                <div class="form-group">
                    {{ register_form.email.label_tag }}
                    {{ register_form.email }}
                </div>
                <div class="form-group">
                    {{ register_form.sex.label_tag }}
                    {{ register_form.sex }}
                </div>
                <div class="form-group">
                    {{ register_form.captcha.errors }}
                    {{ register_form.captcha.label_tag }}
                    {{ register_form.captcha }}
                </div>

                <button type="reset" class="btn btn-default pull-left">重置</button>
                <button type="submit" class="btn btn-primary pull-right">提交</button>
            </form>
        </div>
    </div> <!-- /container -->
{% endblock %} 

10.3.注冊(cè)視圖

進(jìn)入/login/views.py文件栏渺，現(xiàn)在來完善我們的register()視圖：

def register(request):
    if request.session.get('is_login', None): # 登錄狀態(tài)不允許注冊(cè)。你可以修改這條原則锐涯！
        return redirect("/index/")
    if request.method == "POST":
        register_form = RegisterForm(request.POST)
        message = "請(qǐng)檢查填寫的內(nèi)容磕诊！"
        if register_form.is_valid():  # 獲取數(shù)據(jù)
            username = register_form.cleaned_data['username']
            password1 = register_form.cleaned_data['password1']
            password2 = register_form.cleaned_data['password2']
            email = register_form.cleaned_data['email']
            sex = register_form.cleaned_data['sex']
            if password1 != password2:  # 判斷兩次密碼是否相同
                message = "兩次輸入的密碼不同！"
                return render(request, 'login/register.html', locals())
            else:
                same_name_user = models.User.objects.filter(name=username)
                if same_name_user:  # 用戶名唯一
                    message = '用戶已經(jīng)存在纹腌，請(qǐng)重新選擇用戶名霎终！'
                    return render(request, 'login/register.html', locals())
                same_email_user = models.User.objects.filter(email=email)
                if same_email_user:  # 郵箱地址唯一
                    message = '該郵箱地址已被注冊(cè)，請(qǐng)使用別的郵箱壶笼！'
                    return render(request, 'login/register.html', locals()) # 當(dāng)一切都OK的情況下神僵，創(chuàng)建新用戶
                new_user = models.User.objects.create()
                new_user.name = username
                new_user.password = password1
                new_user.email = email
                new_user.sex = sex
                new_user.save()
                return redirect('/login/')  # 自動(dòng)跳轉(zhuǎn)到登錄頁面
    register_form = RegisterForm()
    return render(request, 'login/register.html', locals())

從大體邏輯上雁刷，也是先實(shí)例化一個(gè)RegisterForm的對(duì)象覆劈，然后使用is_valide()驗(yàn)證數(shù)據(jù)，再從cleaned_data中獲取數(shù)據(jù)沛励。

重點(diǎn)在于注冊(cè)邏輯责语，首先兩次輸入的密碼必須相同，其次不能存在相同用戶名和郵箱目派，最后如果條件都滿足坤候，利用ORM的API，創(chuàng)建一個(gè)用戶實(shí)例企蹭，然后保存到數(shù)據(jù)庫內(nèi)白筹。

看一下注冊(cè)的頁面：

image

注冊(cè)成功在admin后臺(tái)可以看到注冊(cè)的用戶

image

10.4.密碼加密

用戶注冊(cè)的密碼應(yīng)該加密才對(duì)

對(duì)于如何加密密碼，有很多不同的途徑谅摄，其安全程度也高低不等徒河。這里我們使用Python內(nèi)置的hashlib庫，使用哈希值的方式加密密碼送漠，可能安全等級(jí)不夠高顽照，但足夠簡單，方便使用，不是么代兵？

首先在login/views.py中編寫一個(gè)hash函數(shù)：

import hashlib 
def hash_code(s, salt='mysite'):# 加點(diǎn)鹽
    h = hashlib.sha256()
    s += salt
    h.update(s.encode()) # update方法只接收bytes類型
    return h.hexdigest()

然后尼酿，我們還要對(duì)login()和register()視圖進(jìn)行一下修改：

#login.html
if user.password == hash_code(password):  # 哈希值和數(shù)據(jù)庫內(nèi)的值進(jìn)行比對(duì)
#register.html
new_user.password = hash_code(password1)  # 使用加密密碼

image

views.py全部代碼

重啟服務(wù)器，進(jìn)入注冊(cè)頁面植影，新建一個(gè)用戶裳擎，然后進(jìn)入admin后臺(tái)，查看用戶的密碼情況：

image

再使用該用戶登錄一下思币，大功告成句惯！

可以看到密碼長度根據(jù)你哈希算法的不同，已經(jīng)變得很長了支救，所以前面model中設(shè)置password字段時(shí)抢野，不要想當(dāng)然的將max_length設(shè)置為16這么小的數(shù)字。