用户注册练习

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

用户注册页面效果图

在这里插入图片描述

注册逻辑

在这里插入图片描述

  1. 生成页面的图片验证码,需要两种触发方式: 默认执行,点击执行

  2. 获取输入的用户名

    1. 利用正则校验用户名的合法性

    2. 当用户名正则校验通过,向 后端 发送请求,校验 用户名是否重复

  3. 获取密码

    1. 利用正则校验密码的合法性

  4. 获取确认密码

    1. 校验 确认密码和密码 是否一致

  5. 获取手机号

    1. 利用正则校验手机号的合法性

    2. 当手机号正则校验通过,向 后端 发送请求,校验手机号是否重复

  6. 获取用户输入的验证码

    1. 校验验证码是否存在

  7. 校验是否选择复选框,必须勾选

  8. 点击注册按钮,将信息提交到后端

 

用户表设计

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

可以自定义模型类,包含这些字段,在真正的项目开发中,不会自己重写一遍,而是继承 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=>{
              
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值