Django blog项目《六》：《注册功能1》用户模型、用户名、手机号、图形验证码、短信验证码功能实现

用户模块分析已经完成，那么接下来就是具体的代码实现了，这一章主要完成用户模型设计和图形验证码、用户名和手机号验证的完成。

一、用户模型设计

用户模型使用django自带的auth中的AbstractUser来进行改写，

1. 添加手机号字段
2. 添加邮箱状态字段

具体实现过程：在 users app 里面的 models.py 里面进行用户模型的修改

1. 对创建超级用户时需要输入email字段

users/models.py

from django.db import models
from django.contrib.auth.models import UserManager as _UserManager


class UserManager(_UserManager):
    """
    重写创建超级用户时需要输入email字段
    """
    def create_superuser(self, username, password, email=None, **extra_fields):

        return super().create_superuser(username=username, password=password, email=email, **extra_fields)

2. 添加mobile和email_active字段

users/models.py

from django.contrib.auth.models import AbstractUser

class Users(AbstractUser):
    """
    重写users模型
    """
    objects = UserManager()
    mobile = models.CharField(
        max_length=11,
 
        help_text="手机号",
        verbose_name="手机号",
        error_messages={
   
            "unique": "手机号已被注册"
        })
    email_active = models.BooleanField(default=False, help_text="邮箱状态")

    class Meta:
        db_table = "tb_users"  # 数据库名
        verbose_name = "用户"  # 指明在admin站点中的名字
        verbose_name_plural = verbose_name  # 显示复数名称

    def __str__(self):
        return self.username

3. 对Users模型进行settings.py配置

自定义的Users模型需要进行配置后才能使用。

settings.py

# 配置自定义的用户模型

AUTH_USER_MODEL = "users.Users"

二、图形验证码

在用户注册时很多字段验证在后续的其他项目时还能使用，为了复用这里重新新建一个app专门用来做用户注册的用户名、手机号、图形验证码、短信验证码的验证。

创建1个新的app verifications，拉到apps里面去。

1. 路由urls.py设置

1. 项目下面的 urls.py

   from django.urls import path, include
   
   urlpatterns = [
       path('', include("verifications.urls")),
   ]
   

2. 应用 verifications/urls.py配置

   from django.urls import re_path
   from verifications import views
   
   
   app_name = "verifications"
   
   urlpatterns = [
       re_path("image_code/<uuid:image_code_id>/", views.ImageCodes.as_view(), name="image_code"),
   
   ]
   

2. JS前端实现

注册功能的js代码不单独放，都统一放在register.js里面

users/register.js

$(function () {
   
    let $img = $('.form-item .captcha-graph-img img'); //获取图片信息
    let sImageCodeId='';  //定义一个空字符串用来放uuid字符串

    generateImageCode();
    // 当点击验证码时刷新验证码
    $img.click(generateImageCode);


    // 生成图片UUID验证码
    function generateUUID() {
   
        let d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
   
            d += performance.now(); //use high-precision timer if available
        }
        let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
   
            let r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c==='x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }

    //生成验证码图片
    function generateImageCode() {
   
        sImageCodeId = generateUUID();  //这里不能有let这相当于对前面的sImageCodeId进行修改
        // console.log("第一个uuid:"+sImageCodeId);
        let imageCodeUrl = '/image_code/'+sImageCodeId+'/';  //拼接图片验证码请求路径
        $img.attr('src',imageCodeUrl);  //给图片添加src链接 路径

    }
});

3. views.py逻辑实现

图形验证码需要使用图形验证码插件，网上有很多现成的代码，这里可以在gitee.com获取captcha图形验证码插件。

在前面settings.py配置redis数据库时只设置了一个为default默认0数据库，将图形验证码和短信验证码的放在为verify_code的1数据库

settings.py中添加验证码存放的数据库

CACHES = {
   
    'default': {
   
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/0',
        'OPTIONS': {
   
            'CLIENT_CLASS': 'django_redis.client.DefaultClient'
        }
    },
    # 新添加存放短信验证码和图形验证码
    'verify_code': {
   
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/1',
        'OPTIONS'<