用戶注冊（一）之注冊頁面以及圖形驗證碼

 

一、用戶模型設計（用戶表的設計）

　　1. 用戶表字段分析

　　　　1）用戶名

　　　　2）密碼

　　　　3）手機號

　　　　4）郵箱

　　　　5）郵箱是否有效

　　2. 用戶模型設計

　　　　django設計模型開發效率極高，內置了許多功能，包括權限驗證等等，也有自定義的User模型。

　　　　因此我們需要繼承已經寫好的抽象模型類AbstractBaseUser，它有已經封裝好的各種方法，約定俗成的凡是抽象模型類起名都以Abstract來開頭，但是判斷該模型類是否是抽象模型類的依據是，類中需要定義

class Meta:
        abstract   =    True

　　　　這才證明它是一個抽象模型類。

　　　　

　　　　

　　　　在我們繼承了django自帶的用戶模型類之后，我們使用時進行擴充字段即可。

　　3. 在User這個app中的models.py頁面來填寫我們的需要的User模型類

　　　　1）繼承抽象模型類，添加用戶新字段，重寫管理器，方便我們創建用戶，並制定我們的User模型使用我們自定義的管理器

# user/models.py 文件
from django.db import models
from django.contrib.auth.models import AbstractUser, UserManager as _UserManager

# Create your models here.
# 自定義管理器（功能：創建用戶時可以不用填寫email）
class UserManager(_UserManager):
    def create_superuser(self, username, password, email=None, **extra_fields):
        super().create_superuser(username=username, password=password, email=email, **extra_fields)

class User(AbstractUser):
    """
        自定義的User模型，添加moblie,email_active字段
    """
    # 添加手機字段, 第一個'手機號'是數據庫中備注信息，max_length是該字段的最大長度
    # unique是該字段唯一，不能重復，help_text是在我們的admin后台來提示的字段信息
    # error_messages是當插入字段出錯時提示的報錯信息
    mobile = models.CharField('手機號',max_length=11, unique=True,
                    help_text='手機號', error_messages={'unique':'此手機號已注冊'})
    # 添加一個郵箱是否激活的字段，默認值為False，及該郵箱未激活
    email_active = models.BooleanField('郵箱激活狀態',default=False)
    # 源信息，內嵌類，可以給我們的model定義元數據
    class Meta:
        db_table = 'tb_user'  # 指定數據庫表名
        verbose_name = '用戶' # 在admin站點顯示的名稱
        verbose_name_plural = verbose_name # 復數
    # 為了方便在我們調用該類時可以看到我們創建的用戶名稱
    def __str__(self):
        return  self.username
    # 通過 createsuperuser 這個命令創建用戶時，需要的字段
    # 該參數里面的內容需要和我們上方唇膏就的字段名相同
    REQUIRED_FIELDS = ['mobile']
    # user模型相當強大，還有修改必須輸出email這個行為
    # 這時候就需要用到我們的管理器了object，可以查看AbstractUser這個模型類中的管理器 objects = UserManager()
    # UserManager這個就是管理器的內容，我們可以進行重寫部分模塊，來達到我們的自定義管理器的目的
    # 因為我們需要創建用戶時不需要必須填寫email，我們創建用戶時又需要用到createsuperuser這個命令
    # 所以我們需要復寫UserManager這個類中的create_superuser的方法，因為我們創建用戶時，調用的就是這個方法
    # 因為我們創建的自定義管理器不能和繼承自帶管理器的類同名，所以我們給繼承的django的管理器起一個別名，再進行繼承
    # 在上方復寫好了我們自定義的管理器后，需要在User模型類中指定該自定義管理器
    objects = UserManager()

　　　　2）位置在apps文件夾中User應用中的models.py文件中

　　　　　　

　　　　3） 在主目錄下的settings文件中添加我們自定義模型類的地址（告訴整個項目我們的用戶模型類已經修改了，並且位置在XXX）

　　　　　　

# 注明我們的User模型的導入路徑
AUTH_USER_MODEL = 'user.User'
# user.User這個地址是因為我們創建的用戶模型類是在user這個app下的User這個類作為用戶模型類

　　　　4）在pycharm中進行遠程連接我們的虛擬機

　　　　　　　　找到菜單欄中的Tools下面的start  SSH  session ,然后選擇我們的遠程主機地址連接即可。

　　　　　　　　

　　　　　　　　如果出現了上圖所示的亂碼，則找到File----->Settings------>手動搜索encoding------>SSH  Terminal----->里面的Default  encoding來設置默認編碼從GBK改為UTF-8即可。

　　　　　　　　

　　　　　　　　修改成功后效果圖如下（看到了正常的漢字）：

　　　　　　　　

　　　　5） 連接上存放遠程解釋器的虛擬機后，執行以下命令來創建我們用戶模型類的映射文件：

workon  tzproject                     # 進入我們項目使用的tzproject這個python虛擬環境
cd   first_project/tzproject/         # 進入到我們虛擬機上所存放該項目的位置
ls                                    # 查看一下我們的項目文件夾的內容是否正確
python   manage.py   makemigrations   # 為我們創建的用戶模型類創建映射文件，這里可以指定app的名稱，也可以不指定，因為我們這是第一次創建映射文件，所以除了user這個app中的用戶表需要創建外還需要生成一些權限表等等，所以我們第一次不指定app_name

　　　　　　    效果圖如下：

　　　　　　    

　　　　　　    

　　　　6）創建好映射文件后，我們需要通過migrate命令來通過映射文件在數據庫中創建對應的表

 　　　　　　   壹：創建好映射文件后我們進入mysql數據庫來查看我們的數據庫中的內容

mysql      -uroot   -pqwe123       # 登錄mysql
show       databases；             # 顯示所有數據庫名稱
use        tzproject;              # 進入項目我們對應創建的數據庫
show       tables;                 # 顯示數據庫中的所有表

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　可以看到我創建完映射文件后的數據庫還是空的。

　　　　　　貳：此時需要注釋主目錄下的settings文件中的app注冊中的admin，以及主目錄下的urls.py文件中的admin，因為我們還會創建同名的類，不用它這個（需要注意的是，我們需要在創建完映射文件后，即執行完

makemigrations 這個命令后再注釋admin，不然會報錯的。）

　　　　　　　　　　

　　　　　　　　　　

　　　　　　叄：執行migrate命令在數據庫中創建相應的表

python   manage.py    migrate   # migrate也可以指定app名稱或不指定，不指定就將我們映射文件中的所有表都在數據庫中創建

　　　　　　　　　　

　　　　　　　　　　此時查看我們的數據庫中，可以看到已經創建出了很多的表了：

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　其中 tb_user 就是我們自己寫的用戶模型類創建的表，tb_user_groups 是 tb_user 和 auth_group兩張表的中間表，tb_user_user_permissions 是 tb_user 和auth_permission的中間表。

　　　　　　肆：創建超級管理員，使用createsuperuser命令創建超級管理員

python    manage.py    createsuperuser  # 創建超級用戶
"""
     輸入用戶名，手機號和密碼，郵箱由於我們寫的是自定義管理器，所以取消了必須輸入郵箱的部分    
"""

　　　　　　　　　　

二、功能需求分析

　　1. 接口設計思路

　　　　分析業務邏輯，明確在這個業務中需要涉及到的幾個相關業務，把每個子業務當做一個接口來設計

　　　　分析接口的功能，明確接口的訪問方式和返回數據

　　　　　　接口的請求方式： GET   PUT  POST  DELTE

　　　　　　接口的URL定義

　　　　　　需要接受什么參數（路徑參數，查詢參數，表單，json）

　　　　　　返回的數據及數據格式

　　2. 注冊功能分析

　　　　1） 流程（功能流程圖）.

　　　　　　　　

　　　　　　　　

　　　　2）功能接口（重點：發送一次請求就要作為一個接口）

　　　　　　　　注冊頁面

　　　　　　　　圖形驗證碼

　　　　　　　　用戶名校驗是否注冊

　　　　　　　　手機號校驗是否注冊

　　　　　　　　短信驗證碼

　　　　　　　　注冊保護用戶數據

　　　　3）導入模塊規則

　　　　　　壹. 系統模塊第一部分

　　　　　　貳. django模塊第二部分

　　　　　　叄. 自己寫的代碼

三、注冊頁面

　　1. 接口設計

　　　　1）接口說明

　　　　　　　　

　　　　2）返回數據

　　　　　　　　注冊頁面的html

　　2. 后端代碼

　　　　1）前端頁面（項目目錄下的templates下的user應用下的register.html頁面）

　　　　　　　　　　　　　　　

{% extends 'base/base.html' %}  <!-- 繼承html模板頁面 -->
{% load static %}               <!-- 加載靜態頁面 -->

{% block title %}               <!-- 重寫該頁面自己的標題名稱 -->
    用戶注冊
{% endblock %}

{% block css_self %}            <!-- 重寫該頁面自己的css樣式 -->
    <link rel="stylesheet" href="{% static 'css/user/auth.css' %}">
{% endblock %}

{% block main %}                <!-- 重寫該頁面自己的主要內容 -->
    <!-- container start -->
    <main id="container">
  <div class="register-contain">
    <div class="top-contain">
      <h4 class="please-register">請注冊</h4>
      <a href="javascript:void(0);" class="login">立即登錄 &gt;</a>
    </div>
    <form action="" method="post" class="form-contain">
      <div class="form-item">
        <input type="text" placeholder="請輸入用戶名" name="username" class="form-control" autocomplete="off">
      </div>
      <div class="form-item">
        <input type="password" placeholder="請輸入密碼" name="password" class="form-control">
      </div>
      <div class="form-item">
        <input type="password" placeholder="請輸入確認密碼" name="password_repeat" class="form-control">
      </div>
      <div class="form-item">
        <input type="tel" placeholder="請輸入手機號" name="telephone" class="form-control" autocomplete="off" autofocus>
      </div>
      <div class="form-item">
        <input type="text" placeholder="請輸入圖形驗證碼" name="captcha_graph" class="form-captcha">
        <a href="javascript:void(0);" class="captcha-graph-img">
          <img src="{% static 'images/captcha.png' %}" alt="驗證碼" title="點擊刷新">
        </a>
      </div>
      <div class="form-item">
        <input type="text" placeholder="請輸入短信驗證碼" name="sms_captcha" class="form-captcha" autocomplete="off">
        <a href="javascript:void(0);" class="sms-captcha" title="發送驗證碼">獲取短信驗證碼</a>
      </div>
      <div class="form-item">
        <input type="submit" value="立即注冊" class="register-btn">
      </div>
    </form>
  </div>
</main>
    <!-- container end -->
{% endblock %}

　　　　2）視圖（first_project---->apps---->user--->views.py）

　　　　　　　　

from django.shortcuts import render
# 我們的類視圖需要繼承View這個類，所以我們需要導入該模塊
from django.views import View

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

# 注冊頁面（由於我們的注冊頁面之后還會發送post請求，為了避免麻煩，所以我們使用類視圖，不用函數視圖）
# def register(request):
#     return render(request, 'user/register.html')
class RegisterView(View):
    # 注冊視圖
    def get(self,request):
        return render(request, 'user/register.html')

    def post(self,request):
        pass

　　　　3）url（first_project---->apps---->user--->urls.py）

　　　　　　　　

　　　　4)主路由中設置分路由

　　　　　　　　

四、圖形驗證碼

　　1. 接口設計

　　　　1）接口說明

 　　　　　　　  

　　　　　　　　需要注意的是：我們添加的這個參數是為了避免我們的頁面被瀏覽器緩存，造成無法刷新的狀況。

 　　　　2）返回數據

　　　　　　　　驗證碼圖片

　　　　 3）分析

　　　　　　　　由於我們圖形驗證碼，用戶名校驗是否注冊，手機號校驗是否注冊，短信驗證碼這幾個接口都是屬於校驗的功能，所以我們可以新建app專門用來校驗，方便我們以后進行復用。　

　　　　　　　　壹：創建校驗app

　　　　　　　　　　① 右鍵選擇菜單欄中Tools下的start  SSH session連接虛擬機，並選中你需要連接的虛擬機

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　連接成功效果如下：

　　　　　　　　　　　　　　

　　　　　　　　　　② 進入到我們的項目目錄下的apps目錄下創建我們的校驗app（verivication），需要注意的是，記得進入正確的python虛擬環境

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　

workon   tzproject                         # 進入正確的python虛擬環境
cd first_project/tzproject/apps/           # 進入項目目錄下的apps目錄下
python ../manage.py startapp verivication  # 創建verivication應用（用來校驗）

　　　　　　　　　　③ 下載新建的app到本地

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　下載成功后可以看到本地頁出現了該文件夾：

　　　　　　　　　　　　　　

　　　　　　　　　　④ 注冊app（在主目錄下的settings文件中進行注冊）

　　　　　　　　　　　　　　

　　2. 后端代碼

　　　　1）驗證碼視圖（first_project----->apps---->verivication---->views.py）

　　　　　　　　壹：由於生成圖形驗證碼的功能可以直接在網上找，下載使用即可。

　　　　　　　　　　嫌麻煩也可以直接使用我的這個百度雲中存放的：

　　　　　　　　　　　　鏈接：https://pan.baidu.com/s/1MlvO3bKoQHS8JEEjqjkCbA 

　　　　　　　　　　　　提取碼：g1bx 

　　　　　　　　　　該模塊需要依賴於pillow模塊，所以我們需要在python虛擬環境中安裝該模塊

　　　　　　　　　　　　

　　　　　　　　貳： 將網上下載好的生成驗證碼功能模塊復制到我們的untils文件夾下

　　　　　　　　　　  

　　　　　　　　　　  

　　　　　　　　叄：在我們需要的視圖中導入該模塊

　　　　　　　　　　  

　　　　　　　　肆：在創建好的校驗app的視圖中填寫生成並保存驗證碼的過程（first_project----->apps---->verivication---->views.py）

　　　　　　　　　　  

# 一、系統模塊
import logging               # 記錄日志我們需要導入日志模塊

# 二、django模塊
from django.shortcuts import render   # django渲染頁面模塊
from django.http import  HttpResponse # django的響應模塊（本視圖由於我們返回圖片驗證碼需要使用它）

# 三、自己的庫
from untils.captcha.captcha import captcha  # 導入生成圖形驗證碼的第三方模塊
from . import  constants                    # 導入我們創建的用來存放常量的py文件


# 日志器
logger = logging.getLogger('django')     # 生成一個名叫django的日志器

# 生成圖形驗證碼
def image_code_view(request):
    """
    功能：生成驗證碼
    url : /image_code/
    :param request:
    :return:
    """
    # 1. 生成驗證碼（隨機生成字符和圖片）
    text,image = captcha.generate_captcha() # 調用該方法會給我們返回兩個值，一個是驗證碼的文字內容，一個是驗證碼的圖片
    # 2. 在后端保存驗證碼（為了之后校驗驗證碼是否正確，所以現在我們需要保存驗證碼）
    request.session['image_code'] = text    # 將驗證碼文字部分存放在session中
    # 給驗證碼一個過期時間，為了方便日后修改，我們在校驗app中創建一個constants.py的文件，用來存放常量
    # 導入方式為 from  .  import  constants
    request.session.set_expiry(constants.IMAGE_CODE_EXPIRES) # 設置session過期時間
    # 3. 記錄一個日志
    logger.info('Image_code:{}'.format(text))
    # 4. 返回驗證碼圖片
    # image存儲的是圖片的二進制數據，content指定了返回的數據內容，
    # content_type指定了返回數據的類型，告訴瀏覽器我們返回的是一張圖片
    return HttpResponse(content=image, content_type='image/jpg')

　　　　2）驗證碼路由url（first_project----->apps---->verivication---->urls.py）

　　　　　　　　　　  

　　　　3） 設置主路由中的分路由

　　　　　　　　　　  

　　　　4） 注冊頁面上的驗證碼部分改成我們剛剛寫好的url（html代碼）

　　　　　　　　將我們原來圖形驗證碼的圖片的位置換成我們的url：

　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　修改前

　　　　　　　　　　　　　 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　修改后

　　　　　　　　　　　　　這個時候我們刷新我們的注冊頁面時，我們的圖形驗證碼也會隨之刷新。效果圖如下：

　　　　　　　　　　　　　

　　　　5） 實現我們點擊驗證碼即可以刷新驗證碼

　　　　　　　　壹：新建一個注冊頁面對應的js文件（first_project------>static------>js------>user------>register.js）

　　　　　　　　　　　　    

　　　　　　　　貳：在我們的register.html頁面導入這個js文件

　　　　　　　　　　　　　

<!-- 重寫該頁面自己的js -->
{% block script_self %}
    <script src="{% static 'js/user/register.js' %}"></script>
{% endblock %}

　　　　　　　　叄： 填寫js文件內容（實現刷新圖形驗證碼，文件位置：first_project------>static------>js------>user------>register.js）

　　　　　　　　　　 

$(()=>{  //es6中的用法
    // 1. 點擊刷新我們的圖片驗證碼
    $('.captcha-graph-img img').click(function () {
        // 重新加載一下圖片驗證碼的src即可
        $(this).attr('src','../verification/image_code/?rand=' + Math.random());
    });
});