前端注册功能

根据用户注册效果图，提取出用户模型类字段，进一步分析出 注册逻辑，并完成主要功能。

用户注册页面效果图

1. 生成页面的图片验证码，需要两种触发方式： 默认执行，点击执行
2. 获取输入的用户名
   1. 利用正则校验用户名的合法性
   2. 当用户名正则校验通过，向 后端 发送请求，校验 用户名是否重复
3. 获取密码
   1. 利用正则校验密码的合法性
4. 获取确认密码
   1. 校验 确认密码和密码 是否一致
5. 获取手机号
   1. 利用正则校验手机号的合法性
   2. 当手机号正则校验通过，向 后端 发送请求，校验手机号是否重复
6. 获取用户输入的验证码
   1. 校验验证码是否存在
7. 校验是否选择复选框，必须勾选
8. 点击注册按钮，将信息提交到后端
   

用户表： 用户名、密码、手机号

可以自定义模型类，包含这些字段，在真正的项目开发中，不会自己重写一遍，而是继承 django内置的用户模型类： AbstractUser, 重写自己的字段， 但是需要在 settings.py 中 指明当前的用户模型类

from django.db import models
from django.contrib.auth.models import AbstractUser


# Create your models here.
class User(AbstractUser):
    mobile = models.CharField(max_length=11, verbose_name='手机号')

    class Meta:
        db_table = 'user_t'
        verbose_name = '用户'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.username

在配置文件中指明使用的模型类

# 指定用户模型类
AUTH_USER_MODEL = 'users.User'  # app.模型类

迁移模型类

python manage.py makemigrations users
python manage.py migrate users

API设计

# 用户名传递问题
GET  /users/check/username/xxxx/

django

• 主路由匹配，分布式路由匹配
• 通过路由匹配，获取路径中的用户名，传递给视图类中的get函数。
• 在处理函数中，根据用户名，进行查询，得到对应的用户数量，结果>0则说明重复，否则不重复。
• 返回结果

1. 路由匹配

from django.urls import path
from .views import *
urlpatterns = [
    path('check/username//', CheckUsername.as_view()),
]

2. 视图接口

from rest_framework.views import APIView
from rest_framework.response import Response
from users.models import *

# Create your views here.
class CheckUsername(APIView):
    def get(self, request, username):
        """
        1. 用户名格式不正确，返回 404
        2. 用户名格式正确，用户名重复，返回 400
        3. 用户名格式正确，也不重复，返回 200
        """
        # 1. 判断用户名格式
        # 要求字母开头，中间为字母、数字、下划线，长度5-16
        if not re.find(r'^[a-zA-Z][a-zA-Z0-9_]{4,15}$', username):
        	return Response({"code":404, 'msg':"用户名格式不正确"})
        # 2. 根据用户名查询用户
        n = User.objects.filter(username=username).count()
        # 3. 判断
        if n == 0:
            return Response({"code": 200, 'msg': 'OK'})
        else:
            return Response({"code": 400, 'msg': '用户名重复'})

Vue前端用户名校验

• 用户在文本框输入用户名
• 使用v-model做数据的双向绑定
• 输入完成之后，触发 失焦事件(blur), 执行 校验 用户名的 方法， 具体如下：

// 用户名的校验方法
let validateName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入用户名"));
  }
  // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
  const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
  if (userNameRule.test(value)) {
    // 前端校验，用户名复合规则
    //请求后端， 判断用户名是否重复
    this.$axios
      .get("/users/check/username/" + this.RegisterUser.name + "/"
      )
      .then((res) => {
        // 200代表用户名不重复，可以注册
        console.log("校验用户名是否重复：", res);
        if (res.data.code == 200) {
          this.$refs.ruleForm.validateField("checkPass");
          return callback();
        } else {
          // 用户名重复或者不符合规则
          return callback(new Error(res.data.msg));
        }
      })
      .catch((err) => {
        return Promise.reject(err);
      });
  } else {
    // 前端校验，用户名不符合规则
    return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
  }
};

// 密码的校验方法
let validatePass = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请输入密码"));
  }
  // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
  const passwordRule = /^[a-zA-Z]w{5,17}$/;
  if (passwordRule.test(value)) {
    this.$refs.ruleForm.validateField("checkPass");
    return callback();
  } else {
    return callback(
      new Error("字母开头,长度6-18之间,允许字母数字和下划线")
    );
  }
};
// 确认密码的校验方法
let validateConfirmPass = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请输入确认密码"));
  }
  // 校验是否以密码一致
  if (this.RegisterUser.pass != "" && value === this.RegisterUser.pass) {
    this.$refs.ruleForm.validateField("checkPass");
    return callback();
  } else {
    return callback(new Error("两次输入的密码不一致"));
  }
};

API设计

# 手机号传递
GET  /users/check/mobile/xxxx/

django

1. 路由匹配

from django.urls import path
from user.views import *

urlpatterns = [
    path('check/mobile//', CheckMobile.as_view()),
]

2. 视图接口

class CheckMobile(APIView):
    def get(self, request, mobile):
        """
        1. 手机号格式不正确，返回 404
        2. 手机号重复，返回 400
        3. 手机号格式正确，也不重复，返回 200
        """
        # 1. 校验手机号格式，前后端都需校验
        #手机号以1开头,第二位3-9之间的数字，长度为11,只允许数字
        if not re.findall(r"^1[3-9]d{9}$", mobile):
        	return Response({"code":404, 'msg':"手机号格式不正确"})
        # 2. 根据手机号查询用户数量
        n = User.objects.filter(mobile=mobile).count()
        # 3. 判断并返回结果
        if n == 0:
            return Response({"code":200, 'msg': 'OK'})
        else:
            return Response({"code":400, 'msg': '手机号重复'})

Vue前端手机号校验

• 用户在文本框输入手机号
• 通过 v-model 获取 手机号
• 输入完成之后，触发 失焦事件(blur), 执行 校验 手机号的 方法，具体如下：

// 手机号的校验方法
let validateMobile = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请输入手机号"));
  }
  // 手机号以1开头,第二位3-9之间的数字，长度为11,只允许数字
  const mobileRule = /^1[3-9]d{9}$/;
  if (mobileRule.test(value)) {
    this.$axios.get("/users/check/mobile/" + this.RegisterUser.mobile + "/")
    .then(res=>{
      console.log("验证手机号是否可用:", res)
      if(res.data.code == 200){
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      }else{
        return callback(new Error(res.data.msg))
      }
    }).catch(err=>{
      return Promise.reject(err)
    })
  } else {
    return callback(new Error("手机号不符合格式"));
  }
};