根据用户注册效果图,提取出用户模型类字段,进一步分析出 注册逻辑,并完成主要功能。
用户注册页面效果图
注册逻辑
-
生成页面的图片验证码,需要两种触发方式: 默认执行,点击执行
-
获取输入的用户名
-
利用正则校验用户名的合法性
-
当用户名正则校验通过,向 后端 发送请求,校验 用户名是否重复
-
-
获取密码
-
利用正则校验密码的合法性
-
-
获取确认密码
-
校验 确认密码和密码 是否一致
-
-
获取手机号
-
利用正则校验手机号的合法性
-
当手机号正则校验通过,向 后端 发送请求,校验手机号是否重复
-
-
获取用户输入的验证码
-
校验验证码是否存在
-
-
校验是否选择复选框,必须勾选
-
点击注册按钮,将信息提交到后端
用户表设计
用户表: 用户名、密码、手机号
可以自定义模型类,包含这些字段,在真正的项目开发中,不会自己重写一遍,而是继承 django内置的用户模型类: AbstractUser
, 重写自己的字段, 但是需要在 settings.py 中 指明当前的用户模型类
在python项目,子应用的model文件里创建模型类
from django.db import models
# python会给我们自动创建一个用户表,我们只需要导入,应用一下就行了,也可以自己创建模型类
from django.contrib.auth.models import AbstractUser
# Create your models here.
# 定义类继承python创建的表
class User(AbstractUser):
# 新增手机号字段
mobile = models.CharField(max_length=11,verbose_name='手机号')
class Meta:
verbose_name='用户表'
verbose_name_plural=verbose_name
db_table = 'tb_user'
def __str__(self):
return self.username
创建好后,我们需要在根项目里的settings中配置一下
AUTH_USER_MODEL = 'user.User' # 使用自定义用户模型类 子应用名.模型类
然后我们就可以执行迁移操作了:
# 生成迁移文件
python manage.py makemigrations users
# 执行迁移操作
python manage.py migrate users
获取输入的用户名利用正则校验用户名的合法性,当用户名正则校验通过,向 后端发送请求,校验用户名是否重复 :
前端:
if(!value){
return callback(new Error('用户名不能为空'))
}else{
const username_rule=/^[a-zA-Z][a-zA-Z0-9]{2,16}$/
if(username_rule.test(value)){
this.$axios.get('/users/check/username/'+value+'/')
.then(resp=>{
console.log('请求判断用户名')
if(resp.data.code == 200){
this.$refs.ruleForm.validateField('cheskPass')
return callback()
}else{
return callback(new Error(resp.data.msg))
}
})
.catch(err=>{