const validatePass = (rule, value, callback) => {
    if (!value) {
      callback(new Error('请确认密码'))
    } else if (value !== data.form.password) {
      callback(new Error('两次输入密码不一致'))
    } else {
      callback()
    }
}

@PostMapping("/register")
public Result register(@RequestBody User user) {
    if (RoleEnum.USER.name().equals(user.getRole())) {
        userService.register(user);
    } else {
        return Result.error("您的参数输入错误");
    }
    return Result.success();
}

/**
 * 注册
 */
public void register(User user) {
    // 1. 校验用户账号是否存在
    User dbUser = userMapper.selectByUsername(user.getUsername());
    if (dbUser != null) {
        throw new CustomException("账号已存在");
    }
    // 校验密码是否为空
    if (ObjectUtil.isEmpty(user.getPassword())) {
        throw new CustomException("密码不能为空");
    }
    if (ObjectUtil.isEmpty(user.getName())) {
        user.setName(user.getUsername());  // 设置用户的名称为账号名称
    }
    userMapper.insert(user);
}

<insert id="insert">
    insert into user (username, password, name, avatar, role, sex, phone)
    values (#{username}, #{password}, #{name}, #{avatar}, #{role}, #{sex}, #{phone})
</insert>

// 点击登录按钮的时候会触发这个方法
  const login = () => {
    formRef.value.validate((valid => {
      if (valid) {
        // 调用后台的接口
        request.post('/login', data.form).then(res => {
          if (res.code === '200') {
            ElMessage.success("登录成功")
            router.push('/')
            localStorage.setItem('canteen-user', JSON.stringify(res.data))
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })).catch(error => {
      console.error(error)
    })
  }