Django實戰-用戶注冊和登陸系統

本文轉載自查看原文 2018-09-09 23:48 13194 Django

1.環境搭建和創建項目

1.環境搭建

每當我們開始一個新項目的時候，通常都會搭建一個全新、獨立、隔離的項目環境，這樣做的好處自然不必多說。有很多種建立項目虛擬環境的工具，使用比較普遍的是Python中的virtualenv。安裝好virtualenv工具后，進入想要放置的項目文件夾，建立一個虛擬環境，激活環境，安裝django。

virtualenv -p python3 venv #創建虛擬環境

source venv/bin/activate #激活虛擬環境

pip install django==1.11.7 #安裝django

2.創建項目

在當前虛擬環境，創建django項目，完成后會生成login_site項目文件夾，進入，運行django內置服務器，在本機的瀏覽器中訪問http://127.0.0.1:8000/，這時我們的django服務已經跑起來了。

django-admin startproject login_site

cd login_site
python manage.py startapp login #創建app
python manage.py runserver

Django默認使用美國時間和英語，我們可以將時間和語言更改一下。配置文件主要在setting.py中，

#before
LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

#after
LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True

時間/語言設置

2.數據庫模型設計

2.1.數據庫模型設計

作為一個用戶登錄和注冊項目，需要保存的都是各種用戶的相關信息。很顯然，我們至少需要一張用戶表User，在用戶表里需要保存下面的信息：

用戶名
密碼
郵箱地址
性別
創建時間

進入login/models.py文件,代碼如下，

from django.db import models

# Create your models here.


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個字符，並且唯一，也就是不能有相同姓名；
password必填，最長不超過256個字符（實際可能不需要這么長）；
email使用Django內置的郵箱類型，並且唯一；
性別使用了一個choice，只能選擇男或者女，默認為男；
使用__str__幫助人性化顯示對象信息；
元數據里定義用戶按創建時間的反序排列，也就是最近的最先顯示；

注意：這里的用戶名指的是網絡上注冊的用戶名，不要等同於現實中的真實姓名，所以采用了唯一機制。如果是現實中可以重復的人名，那肯定是不能設置unique的。

2.2.數據庫設置(Mysql)

在settings.py修改，一定要加上前面的導入。或是在init.py里面導入pymysql模塊。

import pymysql         # 一定要添加這兩行！           
pymysql.install_as_MySQLdb()

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'loginsys',        #數據庫名字
        'USER': 'root',          #賬號
        'PASSWORD': '123456',      #密碼
        'HOST': '127.0.0.1',    #IP
        'PORT': '3306',                   #端口
    }
}

2.3.注冊APP

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

數據庫遷移，每次models.py有更改，都要應用以下命令。

python manage.py makemigrations

python manage.py migrate

3.admin后台

3.1.在admin中注冊模型

# login/admin.py

from django.contrib import admin
from . import models

admin.site.register(models.User)

3.2.創建超級管理員

python manage.py createsuperuser

3.3進入admin后台

創建好超級管理員后，就可以啟動我們的開發服務器了，然后在瀏覽器中訪問http://127.0.0.1:8000/admin/地址

注意，圖中下方的認證和授權是admin應用自身的賬戶管理，上面的LOGIN欄目才是我們自己創建的login應用所對應的User模型。

增加測試用戶，

4.URL路由和視圖設置

4.1.路由設計

初步設想需要下面的四個URL：

URL	視圖	模板	說明
/index/	login.views.index()	index.html	主頁
/login/	login.views.login()	login.html	登錄
/register/	login.views.register()	register.html	注冊
/logout/	login.views.logout()	無需專門的頁面	登出

考慮到登錄系統屬於站點的一級功能，為了直觀和更易於接受，這里沒有采用二級路由的方式，而是在根路由下直接編寫路由條目，同樣也沒有使用反向解析名（name參數）。

# login_sys/urls.py

from django.conf.urls import url
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),
]

4.2.視圖初構

路由寫好了，就進入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/')

View Code

我們先不着急完成視圖內部的具體細節，而是把框架先搭建起來。

4.3.創建HTML頁面文件

在項目根路徑的login目錄中創建一個templates目錄，再在templates目錄里創建一個login目錄

在login/templates/login目錄中創建三個文件index.html、login.html以及register.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/templates/login/login.html#}

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

{#login/templates/login/register.html#}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注冊</title>
</head>
<body>
<h1>注冊頁面</h1>
</body>
</html>

View Code

保存后，運行服務，試試訪問下以上路由頁面。

5.前端頁面設計

5.1.原生HTML頁面

刪除原來的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>

保存，啟動服務器，可以看到如下圖的頁面：

5.2.引入Bootstrap

下載生產環境下的bootstrap，在項目根目錄（manage.py同級）下新建一個static目錄，並將解壓后的bootstrap-3.3.7-dist目錄，整體拷貝到static目錄中，如下圖所示：

由於Bootstrap依賴JQuery，所以我們需要提前下載並引入JQuery，在static目錄下，新建一個css和js目錄，作為以后的樣式文件和js文件的存放地，將我們的jquery文件拷貝到static/js目錄下。

然后打開項目的settings文件，在最下面添加配置，用於指定靜態文件的搜索目錄：

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

5.3.創建base.html模板

既然要將前端頁面做得像個樣子，那么就不能和前面一樣，每個頁面都各寫各的，單打獨斗。一個網站有自己的統一風格和公用部分，可以把這部分內容集中到一個基礎模板base.html中。現在，在根目錄下的templates中新建一個base.html文件用作站點的基礎模板。

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

<!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個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <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>

View Code

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

5.4.創建頁面導航條

Bootstrap提供了現成的導航條組件

<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>

View Code

其中有一些部分，比如搜索框是我們目前還不需要的，需要將多余的內容裁剪掉。同時，有一些名稱和url地址等需要按我們的實際內容修改。最終導航條的代碼如下：

<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">切換導航條</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/">注冊</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

View Code

5.5.使用Bootstrap靜態文件

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

{% 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個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <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">切換導航條</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/">注冊</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.3.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>

View Code

簡要說明：

通過頁面頂端的{% load staticfiles %}加載后，才可以使用static方法；
通過{% block title %}base{% endblock %}，設置了一個動態的頁面title塊；
通過{% block css %}{% endblock %}，設置了一個動態的css加載塊；
通過{% block content %}{% endblock %}，為具體頁面的主體內容留下接口；
通過{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}將樣式文件指向了我們的實際靜態文件，下面的js腳本也是同樣的道理。

看下效果

5.6.設計登錄頁面

Bootstarp提供了一個基本的表單樣式，代碼如下：

<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>

我們結合Bootstrap和前面自己寫的form表單，修改login/templates/login/login.html成符合項目要求的樣子：

{% 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 %}

說明：

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

在static/css目錄中新建一個login.css樣式文件，這里簡單地寫了點樣式，

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;
}

View Code

最后效果:

6、登錄視圖

6.1.登錄視圖

根據我們在路由中的設計，用戶通過login.html中的表單填寫用戶名和密碼，並以POST的方式發送到服務器的/login/地址。服務器通過login/views.py中的login()視圖函數，接收並處理這一請求。

我們可以通過下面的方法接收和處理請求：

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

還需要在前端頁面的form表單內添加一個{% csrf_token %}標簽,CSRF（Cross-site request forgery）跨站請求偽造，是一種常見的網絡攻擊手段，具體原理和技術內容請自行百科。Django自帶對許多常見攻擊手段的防御機制，CSRF就是其中一種，還有XSS、SQL注入等。

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

這個標簽必須放在form表單內部，但是內部的位置可以隨意。

重新刷新login頁面，確保csrf的標簽生效，然后再次輸入內容並提交。瀏覽器頁面跳轉到了首頁。

6.2.數據驗證

通過唯一的用戶名，使用Django的ORM去數據庫中查詢用戶數據，如果有匹配項，則進行密碼對比，如果沒有匹配項，說明用戶名不存在。如果密碼對比錯誤，說明密碼不正確。

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()
            # 用戶名字符合法性驗證
            # 密碼長度驗證
            # 更多的其它驗證.....
            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.添加提示信息

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

修改一下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()
            # 用戶名字符合法性驗證
            # 密碼長度驗證
            # 更多的其它驗證.....
            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變量，用於保存提示信息。當有錯誤信息的時候，將錯誤信息打包成一個字典，然后作為第三個參數提供給render()方法。這個數據字典在渲染模板的時候會傳遞到模板里供你調用。

為了在前端頁面顯示信息，還需要對login.html進行修改：

{% 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 %}

View Code

把index.html主頁模板也修改一下，刪除原有內容，添加下面的代碼：

{#login/templates/login/index.html#}

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

7.Django表單

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

准備和重構數據用於頁面渲染；
為數據創建HTML表單元素；
接收和處理用戶從表單發送過來的數據

編寫Django的form表單，非常類似我們在模型系統里編寫一個模型。在模型中，一個字段代表數據表的一列，而form表單中的一個字段代表<form>中的一個<input>元素。

7.1.創建表單模型

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)

說明：

要先導入forms模塊
所有的表單類都要繼承forms.Form類
每個表單字段都有自己的字段類型比如CharField，它們分別對應一種HTML語言中<form>內的一個input元素。這一點和Django模型系統的設計非常相似。
label參數用於設置<label>標簽
max_length限制字段輸入的最大長度。它同時起到兩個作用，一是在瀏覽器頁面限制用戶輸入不可超過字符數，二是在后端服務器驗證用戶輸入的長度也不可超過。
widget=forms.PasswordInput用於指定該字段在form表單里表現為<input type='password' />，也就是密碼輸入框。

7.2.修改視圖

使用了Django的表單后，就要在視圖中進行相應的修改：

# 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 = "請檢查填寫的內容！"
        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())

說明：

對於非POST方法發送數據時，比如GET方法請求頁面，返回空的表單，讓用戶可以填入數據；
對於POST方法，接收表單數據，並驗證；
使用表單類自帶的is_valid()方法一步完成數據驗證工作；
驗證成功后可以從表單對象的cleaned_data數據字典中獲取表單的具體值；
如果驗證不通過，則返回一個包含先前數據的表單給前端頁面，方便用戶修改。也就是說，它會幫你保留先前填寫的數據內容，而不是返回一個空表！

另外，這里使用了一個小技巧，Python內置了一個locals()函數，它返回當前所有的本地變量字典，我們可以偷懶的將這作為render函數的數據字典參數值，就不用費勁去構造一個形如{'message':message, 'login_form':login_form}的字典了。這樣做的好處當然是大大方便了我們，但是同時也可能往模板傳入了一些多余的變量數據，造成數據冗余降低效率。

7.3.修改login界面

Django的表單很重要的一個功能就是自動生成HTML的form表單內容。現在，我們需要修改一下原來的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 %}

瀏覽器生成的HTML源碼

重新啟動服務器，刷新頁面，如下圖所示：

<form class='form-login' action="/login/" method="post">


    <div class="alert alert-warning">密碼不正確！</div>
    <input type='hidden' name='csrfmiddlewaretoken' value='t7MdqJzR7fbiDth5ZQSBpHb22F8sUkjTy32MlEuhXdW8EZPTwcTNuF0PPOHlxKPz' />
    <h2 class="text-center">歡迎登錄</h2>

    <tr><th><label for="id_username">用戶名:</label></th><td><input type="text" name="username" value="jack" maxlength="128" required id="id_username" /></td></tr>
    <tr><th><label for="id_password">密碼:</label></th><td><input type="password" name="password" maxlength="256" required id="id_password" /></td></tr>

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

</form>

7.4.手動渲染表單

直接{{ login_form }}雖然好，啥都不用操心，但是界面真的很丑，往往並不是你想要的，如果你要使用CSS和JS，比如你要引入Bootstarps框架，這些都需要對表單內的input元素進行額外控制，那怎么辦呢？手動渲染字段就可以了。

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

<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'}))

再次刷新頁面，就顯示正常了！

8.圖片驗證碼

為了防止機器人頻繁登錄網站或者破壞分子惡意登錄，很多用戶登錄和注冊系統都提供了圖形驗證碼功能。

驗證碼（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動區分計算機和人類的圖靈測試）的縮寫，是一種區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

圖形驗證碼的歷史比較悠久，到現在已經有點英雄末路的味道了。因為機器學習、圖像識別的存在，機器人已經可以比較正確的識別圖像內的字符了。但不管怎么說，作為一種防御手段，至少還是可以抵擋一些低級入門的攻擊手段，抬高了攻擊者的門檻。

在Django中實現圖片驗證碼功能非常簡單，有現成的第三方庫可以使用，我們不必自己開發（也要能開發得出來，囧）。這個庫叫做django-simple-captcha。

8.1.安裝captcha

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

Django自動幫我們安裝了相關的依賴庫six、olefile和Pillow，其中的Pillow是大名鼎鼎的繪圖模塊。

注冊captcha

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

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

captcha需要在數據庫中建立自己的數據表，所以需要執行migrate命令生成數據表：

python manage.py makemigrations

python manage.py migrate

8.2.添加url路由

根目錄下的urls.py文件中增加captcha對應的網址：

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='驗證碼')

需要提前導入from captcha.fields import CaptchaField，然后就像寫普通的form字段一樣添加一個captcha字段就可以了！

8.4.修改login.html

由於我們前面是手動生成的form表單，所以還要修改一下，添加captcha的相關內容，如下所示:

{% 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 }}用於明確指示用戶，你的驗證碼不正確

查看效果：

其中驗證圖形碼是否正確的工作都是在后台自動完成的，只需要使用is_valid()這個forms內置的驗證方法就一起進行了，完全不需要在視圖函數中添加任何的驗證代碼，非常方便快捷！

9.session會話

因為因特網HTTP協議的特性，每一次來自於用戶瀏覽器的請求（request）都是無狀態的、獨立的。通俗地說，就是無法保存用戶狀態，后台服務器根本就不知道當前請求和以前及以后請求是否來自同一用戶。對於靜態網站，這可能不是個問題，而對於動態網站，尤其是京東、天貓、銀行等購物或金融網站，無法識別用戶並保持用戶狀態是致命的，根本就無法提供服務。你可以嘗試將瀏覽器的cookie功能關閉，你會發現將無法在京東登錄和購物。

為了實現連接狀態的保持功能，網站會通過用戶的瀏覽器在用戶機器內被限定的硬盤位置中寫入一些數據，也就是所謂的Cookie。通過Cookie可以保存一些諸如用戶名、瀏覽記錄、表單記錄、登錄和注銷等各種數據。但是這種方式非常不安全，因為Cookie保存在用戶的機器上，如果Cookie被偽造、篡改或刪除，就會造成極大的安全威脅，因此，現代網站設計通常將Cookie用來保存一些不重要的內容，實際的用戶數據和狀態還是以Session會話的方式保存在服務器端。

Session依賴Cookie！但與Cookie不同的地方在於Session將所有的數據都放在服務器端，用戶瀏覽器的Cookie中只會保存一個非明文的識別信息，比如哈希值。

Django提供了一個通用的Session框架，並且可以使用多種session數據的保存方式：

保存在數據庫內
保存到緩存
保存到文件內
保存到cookie內

通常情況，沒有特別需求的話，請使用保存在數據庫內的方式，盡量不要保存到Cookie內。

Django的session框架默認啟用，並已經注冊在app設置內，如果真的沒有啟用，那么參考下面的內容添加有說明的那兩行，再執行migrate命令創建數據表，就可以使用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',
]

當session啟用后，傳遞給視圖request參數的HttpRequest對象將包含一個session屬性，就像一個字典對象一樣。你可以在Django的任何地方讀寫request.session屬性，或者多次編輯使用它。

下面是session使用參考：

class backends.base.SessionBase
        # 這是所有會話對象的基類，包含標准的字典方法:
        __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']  # 如果不存在會拋出異常
        __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')

# 類似字典數據類型的內置方法
        keys()
        items()
        setdefault()
        clear()


        # 它還有下面的方法：
        flush()
            # 刪除當前的會話數據和會話cookie。經常用在用戶退出后，刪除會話。

        set_test_cookie()
            # 設置一個測試cookie，用於探測用戶瀏覽器是否支持cookies。由於cookie的工作機制，你只有在下次用戶請求的時候才可以測試。
        test_cookie_worked()
            # 返回True或者False，取決於用戶的瀏覽器是否接受測試cookie。你必須在之前先調用set_test_cookie()方法。
        delete_test_cookie()
            # 刪除測試cookie。
        set_expiry(value)
            # 設置cookie的有效期。可以傳遞不同類型的參數值：
        • 如果值是一個整數，session將在對應的秒數后失效。例如request.session.set_expiry(300) 將在300秒后失效.
        • 如果值是一個datetime或者timedelta對象, 會話將在指定的日期失效
        • 如果為0，在用戶關閉瀏覽器后失效
        • 如果為None，則將使用全局會話失效策略
        失效時間從上一次會話被修改的時刻開始計時。

        get_expiry_age()
            # 返回多少秒后失效的秒數。對於沒有自定義失效時間的會話，這等同於SESSION_COOKIE_AGE.
            # 這個方法接受2個可選的關鍵字參數
        • modification:會話的最后修改時間（datetime對象）。默認是當前時間。
        •expiry: 會話失效信息，可以是datetime對象，也可以是int或None

        get_expiry_date()
            # 和上面的方法類似，只是返回的是日期

        get_expire_at_browser_close()
            # 返回True或False，根據用戶會話是否是瀏覽器關閉后就結束。

        clear_expired()
            # 刪除已經失效的會話數據。
        cycle_key()
            # 創建一個新的會話秘鑰用於保持當前的會話數據。django.contrib.auth.login() 會調用這個方法。

9.1.使用session

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

def login(request):
    if request.session.get('is_login',None):
        return redirect('/index')

    if request.method == "POST":
        login_form = UserForm(request.POST)
        message = "請檢查填寫的內容！"
        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語句，我們不允許重復登錄：

if request.session.get('is_login',None):
    return redirect("/index/")

通過下面的語句，我們往session字典內寫入用戶狀態和數據：

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

你完全可以往里面寫任何數據，不僅僅限於用戶相關！

既然有了session記錄用戶登錄狀態，那么就可以完善我們的登出視圖函數了：

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中的所有內容全部清空，確保不留后患。但也有不好的地方，那就是如果你在session中夾帶了一點‘私貨’，會被一並刪除，這一點一定要注意。

9.2.完善頁面

有了用戶狀態，就可以根據用戶登錄與否，展示不同的頁面，比如導航條內容：

首先，修改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="#">當前在線：{{ request.session.user_name }}</a></li>
                  <li><a href="/logout/">登出</a></li>
              {% else %}
                  <li><a href="/login/">登錄</a></li>
                  <li><a href="/register/">注冊</a></li>
              {% endif %}
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->

通過if判斷，當登錄時，顯示當前用戶名和登出按鈕。未登錄時，顯示登錄和注冊按鈕。

注意其中的模板語言，{{ request }}這個變量會被默認傳入模板中，可以通過圓點的調用方式，獲取它內部的{{ request.session }}，再進一步的獲取session中的內容。其實{{ request }}中的數據遠不止此，例如{{ request.path }}就可以獲取先前的url地址。

再修改一下index.html頁面，根據登錄與否的不同，顯示不同的內容：

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

看下效果：

10.注冊視圖

10.1.創建forms

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

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="確認密碼", 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='驗證碼')

說明：

gender和User模型中的一樣，其實可以拉出來作為常量共用，為了直觀，特意重寫一遍；
password1和password2，用於輸入兩遍密碼，並進行比較，防止誤輸密碼；
email是一個郵箱輸入框；
sex是一個select下拉框；

10.2.完善register.html

同樣地，類似login.html文件，我們在register.html中編寫forms相關條目：

{% extends 'login/base.html' %}

{% block title %}注冊{% 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">歡迎注冊</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.注冊視圖

進入/login/views.py文件，現在來完善我們的register()視圖：

def register(request):
    if request.session.get('is_login', None):
        # 登錄狀態不允許注冊。你可以修改這條原則！
        return redirect("/index/")
    if request.method == "POST":
        register_form = RegisterForm(request.POST)
        message = "請檢查填寫的內容！"
        if register_form.is_valid():  # 獲取數據
            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 = '用戶已經存在，請重新選擇用戶名！'
                    return render(request, 'login/register.html', locals())
                same_email_user = models.User.objects.filter(email=email)
                if same_email_user:  # 郵箱地址唯一
                    message = '該郵箱地址已被注冊，請使用別的郵箱！'
                    return render(request, 'login/register.html', locals())

                # 當一切都OK的情況下，創建新用戶

                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/')  # 自動跳轉到登錄頁面
    register_form = RegisterForm()
    return render(request, 'login/register.html', locals())

從大體邏輯上，也是先實例化一個RegisterForm的對象，然后使用is_valide()驗證數據，再從cleaned_data中獲取數據。

重點在於注冊邏輯，首先兩次輸入的密碼必須相同，其次不能存在相同用戶名和郵箱，最后如果條件都滿足，利用ORM的API，創建一個用戶實例，然后保存到數據庫內。

看一下注冊的頁面：

注冊成功在admin后台可以看到注冊的用戶

10.4.密碼加密

用戶注冊的密碼應該加密才對

對於如何加密密碼，有很多不同的途徑，其安全程度也高低不等。這里我們使用Python內置的hashlib庫，使用哈希值的方式加密密碼，可能安全等級不夠高，但足夠簡單，方便使用，不是么？

首先在login/views.py中編寫一個hash函數：

import hashlib

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

然后，我們還要對login()和register()視圖進行一下修改：

#login

if user.password == hash_code(password):  # 哈希值和數據庫內的值進行比對

#register

new_user.password = hash_code(password1)  # 使用加密密碼

views.py全部代碼

# login/views.py

from django.shortcuts import render,redirect
from . import models
from .forms import UserForm,RegisterForm
import hashlib

def index(request):
    pass
    return render(request,'login/index.html')

def login(request):
    if request.session.get('is_login', None):
        return redirect("/index/")
    if request.method == "POST":
        login_form = UserForm(request.POST)
        message = "請檢查填寫的內容！"
        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 == hash_code(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())


def register(request):
    if request.session.get('is_login', None):
        # 登錄狀態不允許注冊。你可以修改這條原則！
        return redirect("/index/")
    if request.method == "POST":
        register_form = RegisterForm(request.POST)
        message = "請檢查填寫的內容！"
        if register_form.is_valid():  # 獲取數據
            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 = '用戶已經存在，請重新選擇用戶名！'
                    return render(request, 'login/register.html', locals())
                same_email_user = models.User.objects.filter(email=email)
                if same_email_user:  # 郵箱地址唯一
                    message = '該郵箱地址已被注冊，請使用別的郵箱！'
                    return render(request, 'login/register.html', locals())

                # 當一切都OK的情況下，創建新用戶

                new_user = models.User.objects.create()
                new_user.name = username
                new_user.password = hash_code(password1)  # 使用加密密碼
                new_user.email = email
                new_user.sex = sex
                new_user.save()
                return redirect('/login/')  # 自動跳轉到登錄頁面
    register_form = RegisterForm()
    return render(request, 'login/register.html', locals())

def logout(request):
    if not request.session.get('is_login',None):
        return redirect('/index/')
    request.session.flush()

    return redirect('/index/')

def hash_code(s, salt='mysite_login'):
    h = hashlib.sha256()
    s += salt
    h.update(s.encode())  # update方法只接收bytes類型
    return h.hexdigest()

views.py全部代碼

View Code

重啟服務器，進入注冊頁面，新建一個用戶，然后進入admin后台，查看用戶的密碼情況：

再使用該用戶登錄一下，大功告成！

可以看到密碼長度根據你哈希算法的不同，已經變得很長了，所以前面model中設置password字段時，不要想當然的將max_length設置為16這么小的數字。

11.使用Django發送郵件

通常而言，我們在用戶注冊成功，實際登陸之前，會發送一封電子郵件到對方的注冊郵箱中，表示歡迎。進一步的還可能要求用戶點擊郵件中的鏈接，進行注冊確認。

下面就讓我們先看看如何在Django中發送郵件吧。

11.1.在Django中發送郵件

其實在Python中已經內置了一個smtp郵件發送模塊，Django在此基礎上進行了簡單地封裝。

首先，我們需要在項目的settings文件中配置郵件發送參數，分別如下：

EMAIL_USE_SSL = True
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'
EMAIL_PORT = 465
EMAIL_HOST_USER = 'xxxxxxxx@qq.com'
EMAIL_HOST_PASSWORD = 'x x x x x x x'
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

第一行指定SSL加密，qq郵箱有此要求，第二行發送郵件的后端模塊，大多數情況下照抄！
第三行，不用說，發送方的smtp服務器地址，建議使用新浪家的；
第四行，smtp服務端口，qq郵箱默認為465；
第五行，你在發送服務器的用戶名；
第六行，對應用戶的密碼。

特別說明：

郵箱要支持smtp服務，且打開，某些郵件公司可能不開放smtp服務
某些公司要求使用ssl安全機制
某些smtp服務對主機名格式有要求

配置好了參數，就可以先測試一下郵件功能了。

在項目根目錄下新建一個send_mail.py文件，然后寫入下面的內容：

import os
from django.core.mail import send_mail

os.environ['DJANGO_SETTINGS_MODULE'] = 'projectname.settings'

if __name__ == '__main__':   

    send_mail(
        '來自www.xxxxx.com的測試郵件',
        '歡迎訪問www.xxxxx.com，這里是xx站點，本站專注於xx內容的分享！',
        'xxx@qq.com',
        ['xxx@qq.com'],
    )



#HTML格式郵件
import os
from django.core.mail import EmailMultiAlternatives

os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'

if __name__ == '__main__':

    subject, from_email, to = '來自www.xxxxx.com的測試郵件', 'xxx@qq.com', 'xxx@qq.com'
    text_content = '歡迎訪問www.xxxxx.com，這里是xx站點，專注於xx技術的分享！'
    html_content = '<p>歡迎訪問<a href="http://www.baidu.com" target=blank>www.xxx.com</a>，這里是xx的站點，專注於xx技術的分享！</p>'
    msg = EmailMultiAlternatives(subject, text_content, from_email, [to])
    msg.attach_alternative(html_content, "text/html")
    msg.send()

對於send_mail方法，第一個參數是郵件主題subject；第二個參數是郵件具體內容；第三個參數是郵件發送方，需要和你settings中的一致；第四個參數是接受方的郵件地址列表。請按你自己實際情況修改發送方和接收方的郵箱地址。

運行send_mail.py文件，注意不是運行Django服務器。然后到你的目的地郵箱查看郵件是否收到。

12. 郵件注冊確認

12.1.創建模型

既然要區分通過和未通過郵件確認的用戶，那么必須給用戶添加一個是否進行過郵件確認的屬性。

另外，我們要創建一張新表，用於保存用戶的確認碼以及注冊提交的時間。

全新、完整的/login/models.py文件如下：

from django.db import models

# Create your models here.

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)
    has_confirmed = models.BooleanField(default=False)

    def __str__(self):
        return self.name

    class Meta:
        ordering = ["-c_time"]
        verbose_name = "用戶"
        verbose_name_plural = "用戶"


class ConfirmString(models.Model):
    code = models.CharField(max_length=256)
    user = models.OneToOneField('User')
    c_time = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.user.name + ":   " + self.code

    class Meta:

        ordering = ["-c_time"]
        verbose_name = "確認碼"
        verbose_name_plural = "確認碼"

說明：

User模型新增了has_confirmed字段，這是個布爾值，默認為False，也就是未進行郵件注冊；
ConfirmString模型保存了用戶和注冊碼之間的關系，一對一的形式；
code字段是哈希后的注冊碼；
user是關聯的一對一用戶；
c_time是注冊的提交時間,"-c_time"表示降序排列.

這里有個問題可以討論一下：是否需要創建ConfirmString新表，可否都放在User表里？我認為如果全都放在User中，不利於管理，查詢速度慢，創建新表有利於區分已確認和未確認的用戶。最終的選擇可以根據你的實際情況具體分析。

模型修改和創建完畢，需要執行migrate命令，一定不要忘了。

順便修改一下admin.py文件，方便我們在后台修改和觀察數據。

# login/admin.py

from django.contrib import admin

# Register your models here.

from . import models

admin.site.register(models.User)
admin.site.register(models.ConfirmString)

12.2.修改視圖

首先，要修改我們的register()視圖的邏輯：

def register(request):
    if request.session.get('is_login', None):
        # 登錄狀態不允許注冊。你可以修改這條原則！
        return redirect("/index/")
    if request.method == "POST":
        register_form = forms.RegisterForm(request.POST)
        message = "請檢查填寫的內容！"
        if register_form.is_valid():  # 獲取數據
            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 = '用戶已經存在，請重新選擇用戶名！'
                    return render(request, 'login/register.html', locals())
                same_email_user = models.User.objects.filter(email=email)
                if same_email_user:  # 郵箱地址唯一
                    message = '該郵箱地址已被注冊，請使用別的郵箱！'
                    return render(request, 'login/register.html', locals())

                # 當一切都OK的情況下，創建新用戶

                new_user = models.User()
                new_user.name = username
                new_user.password = hash_code(password1)  # 使用加密密碼
                new_user.email = email
                new_user.sex = sex
                new_user.save()

                code = make_confirm_string(new_user)
                send_email(email, code)

                message = '請前往注冊郵箱，進行郵件確認！'
                return render(request, 'login/confirm.html', locals())  # 跳轉到等待郵件確認頁面。
    register_form = forms.RegisterForm()
    return render(request, 'login/register.html', locals())

View Code

make_confirm_string()是創建確認碼對象的方法，代碼如下：

def make_confirm_string(user):
    now = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    code = hash_code(user.name, now)
    models.ConfirmString.objects.create(code=code, user=user,)
    return code

在文件頂部要先導入datetime模塊。

make_confirm_string()方法接收一個用戶對象作為參數。首先利用datetime模塊生成一個當前時間的字符串now，再調用我們前面編寫的hash_code()方法以用戶名為基礎，now為‘鹽’，生成一個獨一無二的哈希值，再調用ConfirmString模型的create()方法，生成並保存一個確認碼對象。最后返回這個哈希值。

send_email(email, code)方法接收兩個參數，分別是注冊的郵箱和前面生成的哈希值，代碼如下：

def send_email(email, code):

    from django.core.mail import EmailMultiAlternatives
    subject = '來自www.xxxxx.com的測試郵件'
    text_content = '歡迎訪問www.xxxxx.com，這里是xx站點，專注於xx技術的分享！'
    html_content = '<p>歡迎注冊<a href="http://{}/confirm/?code={}" target="blank>www.xxx.com</a>，這里是xx的站點，專注於xx技術的分享！</p>'.format('127.0.0.1',code,settings.CONFIRM_DAYS)
    msg = EmailMultiAlternatives(subject, text_content, from_email, [to])
    msg.attach_alternative(html_content, "text/html")
    msg.send()

首先我們需要導入settings配置文件from django.conf import settings。

郵件內容中的所有字符串都可以根據你的實際情況進行修改。其中關鍵在於<a href=''>中鏈接地址的格式，我這里使用了硬編碼的'127.0.0.1:8000'，請酌情修改，url里的參數名為code，它保存了關鍵的注冊確認碼，最后的有效期天數為設置在settings中的CONFIRM_DAYS。所有的這些都是可以定制的！

下面是郵件相關的settings配置：

EMAIL_USE_SSL = True
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'
EMAIL_PORT = 465
EMAIL_HOST_USER = 'xxxxxxxx@qq.com'
EMAIL_HOST_PASSWORD = 'x x x x x x x'
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
CONFIRM_DAYS = 7

12.3.處理郵件確認請求

首先，在根目錄的urls.py中添加一條url：

url(r'^confirm/$', views.user_confirm),

其次，在login/views.py中添加一個user_confirm視圖。

def user_confirm(request):
    code = request.GET.get('code', None)
    message = ''
    try:
        confirm = models.ConfirmString.objects.get(code=code)
    except:
        message = '無效的確認請求!'
        return render(request, 'login/confirm.html', locals())

    c_time = confirm.c_time
    now = datetime.datetime.now()
    if now > c_time + datetime.timedelta(settings.CONFIRM_DAYS):
        confirm.user.delete()
        message = '您的郵件已經過期！請重新注冊!'
        return render(request, 'login/confirm.html', locals())
    else:
        confirm.user.has_confirmed = True
        confirm.user.save()
        confirm.delete()
        message = '感謝確認，請使用賬戶登錄！'
        return render(request, 'login/confirm.html', locals())

說明：

通過request.GET.get('code', None)從請求的url地址中獲取確認碼;
先去數據庫內查詢是否有對應的確認碼;
如果沒有，返回confirm.html頁面，並提示;
如果有，獲取注冊的時間c_time，加上設置的過期天數，這里是7天，然后與現在時間點進行對比；
如果時間已經超期，刪除注冊的用戶，同時注冊碼也會一並刪除，然后返回confirm.html頁面，並提示;
如果未超期，修改用戶的has_confirmed字段為True，並保存，表示通過確認了。然后刪除注冊碼，但不刪除用戶本身。最后返回confirm.html頁面，並提示。

這里需要一個confirm.html頁面，我們將它創建在/login/templates/login/下面：

{% extends 'base.html' %}
{% block title %}注冊確認{% endblock %}
{% block content %}
    <div class="row">
        <h1 class="text-center">{{ message }}</h1>
    </div>
    <script>
        window.setTimeout("window.location='/login/'",2000);
    </script>
{% endblock %}

頁面中通過JS代碼，設置2秒后自動跳轉到登錄頁面。

12.4.修改登錄規則

既然未進行郵件確認的用戶不能登錄，那么我們就必須修改登錄規則，如下所示：

def login(request):
    if request.session.get('is_login', None):
        return redirect("/index/")
    if request.method == "POST":
        login_form = forms.UserForm(request.POST)
        message = "請檢查填寫的內容！"
        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 not user.has_confirmed:
                    message = "該用戶還未通過郵件確認！"
                    return render(request, 'login/login.html', locals())
                if user.password == hash_code(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 = forms.UserForm()
    return render(request, 'login/login.html', locals())

關鍵是下面的部分：

if not user.has_confirmed:
    message = "該用戶還未通過郵件確認！"
    return render(request, 'login/login.html', locals())

最后，貼出view.py的整體代碼，供大家參考：

from django.shortcuts import render,redirect
from . import models
from . import forms
import hashlib
from django.conf import settings

def make_confirm_string(user):
    now = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    code = hash_code(user.name, now)
    models.ConfirmString.objects.create(code=code, user=user,)
    return code

def send_email(email,code):
    from django.core.mail import EmailMultiAlternatives

    subject, from_email, to = '來自www.robindongblog.com的測試郵件','1361623944@qq.com','1505955202@qq.com'
    text_content = '歡迎注冊訪問www.robindongblog.com，這里是wo的博客和教程站點，本站專注於Python和Django技術的分享！'
    html_content = '''
                    <p>感謝注冊<a href="http://{}/confirm/?code={}" target=blank>robin-dong.github.io</a>，\
                    這里是wo的博客和教程站點，專注於Python和Django技術的分享！</p>
                    <p>請點擊站點鏈接完成注冊確認！</p>
                    <p>此鏈接有效期為{}天！</p>
                    '''.format('127.0.0.1:8000', code, settings.CONFIRM_DAYS)
    msg = EmailMultiAlternatives(subject, text_content, from_email, [to])
    msg.attach_alternative(html_content, "text/html")
    msg.send()
    print('done')

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

# Create your views here.
def index(request):
    pass
    return render(request,'login/index.html')

def login(request):
    if request.session.get('is_login', None):
        return redirect("/index/")
    if request.method == "POST":
        login_form = forms.UserForm(request.POST)
        message = "請檢查填寫的內容！"
        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 not user.has_confirmed:
                    message = "該用戶還未通過郵件確認！"
                    return render(request, 'login/login.html', locals())
                if user.password == hash_code(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 = forms.UserForm()
    return render(request, 'login/login.html', locals())


def register(request):
    if request.session.get('is_login', None):
        # 登錄狀態不允許注冊。你可以修改這條原則！
        return redirect("/index/")
    if request.method == "POST":
        register_form = forms.RegisterForm(request.POST)
        message = "請檢查填寫的內容！"
        if register_form.is_valid():  # 獲取數據
            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 = '用戶已經存在，請重新選擇用戶名！'
                    return render(request, 'login/register.html', locals())
                same_email_user = models.User.objects.filter(email=email)
                if same_email_user:  # 郵箱地址唯一
                    message = '該郵箱地址已被注冊，請使用別的郵箱！'
                    return render(request, 'login/register.html', locals())

                # 當一切都OK的情況下，創建新用戶

                new_user = models.User()
                new_user.name = username
                new_user.password = hash_code(password1)  # 使用加密密碼
                new_user.email = email
                new_user.sex = sex
                new_user.save()

                code = make_confirm_string(new_user)
                send_email(email, code)

                message = '請前往注冊郵箱，進行郵件確認！'
                return render(request, 'login/confirm.html', locals())  # 跳轉到等待郵件確認頁面。
    register_form = forms.RegisterForm()
    return render(request, 'login/register.html', locals())

    
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/")

def user_confirm(request):
    code = request.GET.get('code', None)
    message = ''
    try:
        confirm = models.ConfirmString.objects.get(code=code)
    except:
        message = '無效的確認請求!'
        return render(request, 'login/confirm.html', locals())

    c_time = confirm.c_time
    now = datetime.datetime.now()
    if now > c_time + datetime.timedelta(settings.CONFIRM_DAYS):
        confirm.user.delete()
        message = '您的郵件已經過期！請重新注冊!'
        return render(request, 'login/confirm.html', locals())
    else:
        confirm.user.has_confirmed = True
        confirm.user.save()
        confirm.delete()
        message = '感謝確認，請使用賬戶登錄！'
        return render(request, 'login/confirm.html', locals())

View Code

12.5.功能展示

首先，通過admin后台刪除原來所有的用戶。

進入注冊頁面，如下圖所示：

點擊提交，此時激活郵件已發送，但還是not confirmed狀態，還不能登入，進入你的測試郵箱，查看注冊郵件：

點擊鏈接，自動跳轉到確認成功提示頁面，2秒后再跳轉到登錄頁面。這個時候再次查看admin后台，可以看到用戶已經處於登錄確認狀態，並且確認碼也被自動刪除了，不會第二次被使用：

使用該用戶正常登錄吧！Very Good！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 無廢話MVC入門教程九[實戰一：用戶注冊與登陸] Django之博客系統：用戶注冊和Profile Django學習筆記（9）—— 開發用戶注冊與登錄系統基於jsp+servlet的javaweb實現最基本的用戶注冊登陸注銷功能 Django Web開發【4】用戶注冊與管理 Django實戰(一)-----用戶登錄與注冊系統4（表單） Django實現用戶注冊登錄 Django實現用戶注冊登錄 Django實戰(一)-----用戶登錄與注冊系統6（session會話、注冊視圖） python實戰flask簡易登陸注冊