用户的注册

1.注册时的用户名

class UserView(Apiview)
	def get(self,request,username)
		# 用户名以字母开头,长度在5-16之间,允许字母数字下划线
		        if not re.findall(r'^[a-zA-Z]w{4,15}$',username):
            return Response({'msg':'账号不符合要求','code':404})
#         判断是否重复：
        if User.objects.filter(username=username):
            return Response({'msg':'用户名以重复','code':404})
        return Response({'msg':'ok','code':200})

用户名前端：

      // 用户名以字母开头,长度在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之间,允许字母数字下划线"));
      }

2.注册时的手机号

class MobileView(APIView):
    def get(self,request,mobile):
        # // 手机号以1开头, 第二位3 - 9
        # 之间的数字，长度为11, 只允许数字
        if not re.findall(r'^1[3-9]d{9}$',mobile):
            return Response({'msg': '手机号不符合要求', 'code': 404})
#         判断是否重复：
        if User.objects.filter(mobile=mobile):
            return Response({'msg':'手机号重复','code':404})
        return Response({'msg': 'ok', 'code': 200})

注册手机号前端

      // 手机号以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("手机号不符合格式"));
      }
    };

3.生成图片验证码

# 生成验证码：
class ImgView(APIView):
    def get(self,request,uuid):
#     生成一个4位数的验证码：
        check = ''.join(random.sample(string.ascii_letters+string.digits,4))
#       生成图片对象：
        tx = ImageCaptcha()
#       利用图片对象创建图形验证码：
        img = tx.generate(check)
#       连接redis数据库：
        r = redis.Redis(host='localhost',port=6379,db=5)
#       将验证码添加到数据库中：
        r.set(str(uuid),check,ex=300)
#       关闭数据库：
        r.close()
#       返回图片验证码：
        return HttpResponse(img,content_type='image/png')

生成图片验证码前端

    // 生成图片验证码地址
    genImageCode(){
      // 生成一个uuid
      this.imageCodeID = uuid4()
      // 生成一个图片验证码地址
      this.iamgeCodeUrl = "/users/image_code/" + this.imageCodeID + "/"

4.验证码的验证

class YanView(APIView):
    def get(self,request):
#         获取uuid和验证码：
        uuid = request.query_params.get('imageCodeID')
        code = request.query_params.get('imageCode')

#         连接数据库：
        r = redis.Redis(host='localhost',port=6379,db=5)
#         获取出验证码：
        check = r.get(uuid)
#         判断验证码是否过期：
        if not check:
            return Response({'msg':'验证码已过期','code':404})

#         判断验证码是否正确：
        if check.decode().lower() == code.lower():
            return Response({'msg':'验证成功','code':200})
        return Response({'msg':'验证失败','code':404})

校验验证码前端

      // 图片验证码是由字母、数字组成，长度为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,
          }
        })

5.用户的注册

# 注册视图：
class ZhuView(APIView):
    def post(self,request):
#         接收前端传递的账号，密码，手机号，同意
        user = request.data.get('userName')
        pwd = request.data.get('pwd')
        mobile = request.data.get('mobile')
        agree = request.data.get('agree')

#   判断数据是否齐全：
        if not all([user,pwd,mobile,agree]):
            return Response({'msg':'数据不齐全','code':404})

#     判断师傅同意：
        if not agree:
            return Response({'msg':'不同意','code':404})

#         添加到数据库中：
        User.objects.create_user(username=user,password=pwd,mobile=mobile)
        return Response({'msg':'注册成功','code':200})

注册前端

        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;
        }
      });