注册功能课件详解：前后端

已于 2023-08-23 14:01:46 修改
阅读量203 收藏
点赞数
分类专栏： Django 文章标签： java 前端 开发语言
于 2022-08-02 20:04:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ben_boba/article/details/126128982
版权

路由匹配可变的字符串

path('check/username/<str:username>/', CheckUsername.as_view())

正则匹配

 In [2]: import re
 In [3]: a = re.findall(r'^[a-zA-Z]*(?P<num>\d+)[a-zA-Z]*$', 'sad131231dasda')
 
 In [4]: a
 Out[4]: ['131231']
 
 In [4]: mobile = re.findall(r"1\d{10}", '我的手机号是8615239159680')
 Out[4]: ['15239159680']

True 与 False的判断

[]、（）、{}、""、 None、0、作为判断条件是均为False
if not re.findall(r"2\d{10}", '我的手机号是8615239159680'):
	#代表没有匹配到

模型类查询

#查询用户对象
user = User.objects.get(username=username)
#查询集合
user_query_set = User.objects.filter(username=username)

用户表设计

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

可以自定义模型类，包含这些字段，在真正的项目开发中，不会自己重写一遍，而是继承 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

<用户名>django/路由匹配

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

<用户名>django/视图接口

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前端校验==

// 用户名的校验方法
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之间,允许字母数字下划线"));
  }
};

<密码>==Vue前端校验密码==

// 密码的校验方法
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("两次输入的密码不一致"));
  }
};

<手机号>django/路由

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

urlpatterns = [
    path('check/mobile/<str:mobile>/', CheckMobile.as_view()),
]

<手机号> django/视图

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前端手机号校验==

// 手机号的校验方法
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("手机号不符合格式"));
  }
};

<生成验证码>django/路由

from django.urls import path
from user.views import *
urlpatterns = [
	#/users/image_code/xxx/ 生成图片验证码
    path('image_code/<uuid:uuid>/', ImageCode.as_view()), #也可以<str:uuid>
]

<生成验证码>django/视图

import random
import string
import redis
from django.http.response import HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response
from user.models import *
from captcha.image import ImageCaptcha

class ImageCode(APIView):
    def get(self, request, uuid):
		# 1.接收参数uuid
		
		# 2. 生成随机字符串
        # string.ascii_letters: 所有字母的字符串（大小写）
        # string.digits： 所有的数字字符串（0-9）
        # random.sample： 随机采集指定位数的字符
        salt = ''.join(random.sample(string.ascii_letters + string.digits, 4))
        # 2. 生成 图片验证码 流
        img = ImageCaptcha()
        image = img.generate(salt) #io.BytesIO对象
        #from PIL import Image
        #im = Image.open(image)
        #im.show() #查看生成的图片验证码
        
        # 3. 连接redis
        redis_conn = redis.Redis(host='localhost', port=6379, db=0)

        # 4. 存储图片验证码，设置过期时间10分钟
        redis_conn.setex(str(uuid), 60 * 10, salt)

        # 5. 返回图片流
        return HttpResponse(image, content_type='image/png')

<生成验证码 >==Vue前端生成验证码==

<!--  对img标签进行属性绑定          -->
<img :src="imageCodeUrl" alt="图形验证码" class="pic_code" @click="genImageCode">
<!-- 对img标签进行点击事件绑定 ，点击一次，执行一次方法，请求一次图片  -->

         
<script>
// 使用uuid模块，生成 uuid
import {v4 as uuid4} from 'uuid'   // 提前安装好uuid模块， npm install uuid --save 

export default {
    ...,
    data() {
        return {
        	//如下
            imageCodeID: '', // 实际就是uuid
            imageCodeUrl: '', // 图片验证码的地址
            ...,
        }
    },
    methods: {
    	//如下方法
        genImageCode() {
            //  1. 生成一个uuid
            this.imageCodeID = uuid4();

            // 2. 拼接一个图片地址
            this.imageCodeUrl = '/users/image_code/' + this.imageCodeID + '/'
        }
    },
    mounted() {
        //默认的图片验证码
        this.genImageCode();
    }
}
</script>

<校验验证码>django/路由

#校验图片验证码
#/users/check_image_code/?imageCodeID=xxx&imageCode=xxxx
path('check_image_code/', CheckImageCode.as_view()),

<校验验证码>django/视图

class CheckImageCode(APIView):
    def get(self, request):
        """
        1. 接收前端发送的参数，imageCodeID & imageCode
        2. 取出redis中的 图片验证码
            如果取不到，说明过期，响应204
            如果取到验证码，进行对比，注意： 统一大小写
        3. 根据对比结果，返回响应
            对比成功，响应200
            对比失败，响应204
        """
        #1. 接收前端发送的参数，imageCodeID & imageCode
        uuid_ = request.query_params.get("imageCodeID")
        image_code_ = request.query_params.get("imageCode")

        # 2. 取出redis中的 图片验证码
        #     如果取不到，说明过期，响应204
        #     如果取到验证码，进行对比，注意： 统一大小写
        redis_conn = redis.Redis(host='localhost', port=6379, db=0)
        image_code = redis_conn.get(uuid_)

        if not image_code:
            return Response({"code":204, 'msg': '验证码过期'})

        # 3.
        # 根据对比结果，返回响应
        # 对比成功，响应200
        # 对比失败，响应204
        if image_code.decode().lower() == image_code_.lower():
            return Response({"code":200, 'msg': 'ok'})
        else:
            return Response({"code":204, 'msg': '验证码错误'})

<校验验证码>==Vue前端验证码校验==

// 校验图片验证码
let validateImageCode = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请输入图片验证码"));
  }
  // 图片验证码是由字母、数字组成，长度为4
  const iamgeCodeRule = /^[a-zA-Z0-9]{4}$/;
  if (iamgeCodeRule.test(value)) {
    this.$axios.get("/users/check_image_code/", {
      params:{
        imageCodeID: this.imageCodeID,
        imageCode: this.RegisterUser.imageCode,
      }
    })
    .then(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("图片验证码不正确！"));
  }
};

<注册>vue

// 用户注册
Register() {
  // 是否同意用户协议
  if(!this.aggree){
    this.flag = true
    return
  }
  // 已勾选，则不显示提示信息
  this.flag = false
  // 通过element自定义表单校验规则，校验用户输入的用户信息
  this.$refs["ruleForm"].validate((valid) => {
    //如果通过校验开始注册
    if (valid) {
      this.$axios
        .post("/users/register/", {
          userName: this.RegisterUser.name,
          pwd: this.RegisterUser.pass,
          mobile: this.RegisterUser.mobile,
          agree: this.aggree,
        })
        .then((res) => {
          // 200代表注册成功，其他的均为失败
          if (res.data.code == 200) {
            // 隐藏注册组件
            this.isRegister = false;
            // 弹出通知框提示注册成功信息
            this.notifySucceed(res.data.msg);
          } else {
            // 弹出通知框提示注册失败信息
            this.notifyError(res.data.msg);
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    } else {
      return false;
    }
  });
},

<注册>django/路由

# /users/register/
path('register/', Register.as_view()),

<注册>django/视图

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

#注册
class Register(APIView):
    def post(self, request):
        # 前端传入 userName, pwd, mobile, agree
        username = request.data.get("userName")
        password = request.data.get("pwd")
        mobile = request.data.get("mobile")
        agree = request.data.get("agree")
        #验证参数
        if not all([username, password, mobile]):
            return Response({"code":204, "msg":"注册信息不完整！"})
        if not agree:
            return Response({"code":204, 'msg':"未同意用户使用协议"})

        # 存入数据库
        User.objects.create_user(username=username, password=password, mobile=mobile)

        # 返回响应
        return Response({"code":200, "msg":"注册成功！"})

RaptorWE
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值