vite2 + vue3实现curd（三）：实现登录、注册

前言

• 实现需求
• 表单验证
• 防抖和节流
• 登录预验证
• 路由导航守卫

参考

• 路由导航守卫
• 官网
• 参考1
• 参考2

开发步骤

• 向后端发送post请求前需进行表单验证

<script lang="ts">
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        pass: '',
      },
      flag: false,   // 默认该按钮不是禁用状态
      rules: {
        name: [
          {
            required: true,
            message: '请输入用户名！',
            trigger: 'blur',
          },
        ],
        pass: [
          {
            required: true,
            message: '请输入密码！',
            trigger: 'blur',
          },
        ],
      },
    }
  },
}
</script>
 

• 对提交按钮进行防抖和节流操作：提交按钮点击一次后隔2秒才能再次点击，避免用户狂点，减轻服务器压力

<template>
    <div>
        <el-form-item>
            <!-- 提交按钮 -->
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled='flag'
              >Login</el-button
            >
            <el-button @click="resetForm('ruleForm')">Reset</el-button>
        </el-form-item>
    </div>
</template>
 
<script lang="ts">
export default {
  data() {
    return {
      flag: false,   // 默认该按钮不是禁用状态
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.flag = true;
          setTimeout(()=>{
              console.log("可再次提交！")
              this.flag= false;
          }, 2000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
 

• element plus的表单中封装了validate函数，只有通过了表单验证才能向后端发送请求

<script lang="ts">
export default {
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证通过后在这里发送post请求
          alert('submit!')
        } else {
          // 验证未通过的处理
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
 

• 自定义验证规则时，在自定义的规则中添加callback()回调函数，否则验证完后永远无法进入validate函数，这里是一个坑

<script lang="ts">
export default {
  data() {
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名！'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码！'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码！'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次密码不一致！"))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        name: '',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        name: [{ validator: checkName, trigger: 'blur' }],
      },
      flag: false,   // 默认该按钮不是禁用状态
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证通过后的处理
          console.log("success submit!")
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
 

• 使用路由导航守卫：不能直接通过url跳转到控制台，只有当用户登录后才能访问控制台组件

<!-- 发送post请求进行登录，登录成功后将token保存到sessionStorage，同时跳转到控制台 -->
<script lang="ts">
export default {
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.flag = true;
          // 登录 post请求
          const username = this.ruleForm.name;
          const password = this.ruleForm.pass;
          const reqData = {    
            username: username,    
            password,    
          } 
          this.$http.post("user/login", reqData).then((response)=>{
            console.log(response)
            // 将token保存到sessionStorage
            window.sessionStorage.setItem('token', response.data)
            // 跳转到home路由
            this.$router.push('/consoleManage')
          }).catch(error=>{console.error(error)});
          // 登录结束
          setTimeout(()=>{
              console.log("可再次提交！")
              this.flag= false;
          }, 2000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
 

• 在项目入口main.js中全局配置路由导航守卫

// router
import router from './route/index'
 
// 路由导航守卫
router.beforeEach((to, from, next) => {
    // 要跳转到控制台页面时，先查看本地是否存在token，没有则返回登录页面
    if(to.path === '/consoleManage') {
        const tokenStr = window.sessionStorage.getItem('token')
        if(!tokenStr) return next('/userLogin')
    }    
    next() 
})
 

• 登录时表单验证效果
  

• 登录成功后查看sessionStorage
  

• 退出登录

<template>
    <div>
        <el-button type="info" @click="logout">退出登录</el-button>
    </div>
</template>
 
<script>
export default {
    methods: {
        logout() {
            window.sessionStorage.clear();  // 清除sessionStorage中的token
            this.$router.push("/login");   // 跳转到登录路由
        }
    }
};
</script>
 

• 注册用户实现源码

点击查看详情

<template>
    <div class="box">
        <img src="https://pic.imgdb.cn/item/61b812a02ab3f51d91b0a6ca.png" alt="">
        <div class="register_box">
            <span class="regiter_span">注册用户</span>
            <el-form
                ref="ruleForm"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
            >
                <span class="icon_avatar">
                    <el-icon><Avatar /></el-icon>
                </span>
                <el-form-item label="UserName" prop="name">
                <el-input v-model.number="ruleForm.name"></el-input>
                </el-form-item>
                <span class="icon_unlock">
                    <el-icon><Unlock /></el-icon>
                </span>
                <el-form-item label="Password" prop="pass">
                <el-input
                    v-model="ruleForm.pass"
                    type="password"
                    autocomplete="off"
                ></el-input>
                </el-form-item>
                <span class="icon_Sugar">
                    <el-icon><Sugar /></el-icon>
                </span>
                <el-form-item label="ReUsePass" prop="checkPass">
                <el-input
                    v-model="ruleForm.checkPass"
                    type="password"
                    autocomplete="off"
                ></el-input>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" :disabled='flag'
                    >Submit</el-button
                >
                <el-button @click="resetForm('ruleForm')" class="but_re">Reset</el-button>
                </el-form-item>
            </el-form>
            <span class="regiter_link">
                <router-link to="/"> 已有账号，去登录</router-link>
            </span>
        </div>
    </div>
</template>
 
<script lang="ts">
// icon
import { Avatar, Unlock, Sugar } from '@element-plus/icons'
export default {
  components: {
    Unlock,
    Avatar,
    Sugar
  },
  setup() {
    
  },
  data() {
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名！'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码！'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码！'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次密码不一致！"))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        name: '',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        name: [{ validator: checkName, trigger: 'blur' }],
      },
      flag: false,   // 默认该按钮不是禁用状态
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          this.flag = true;
          // 注册 post请求
          const username = this.ruleForm.name;
          const password = this.ruleForm.pass;
          const reqData = {    
            username: username,    
            password,    
          } 
          this.$http.post("user/register", reqData).then((response)=>{
            console.log(response)
            if(response.code == 200 ) {
              console.log("注册成功！")
              // 跳转到home路由
              this.$router.push('/userLogin')
            }
          }).catch(error=>{console.error(error)});
          // 注册结束
          setTimeout(()=>{
              console.log("可再次提交！")
              this.flag= false;
          }, 2000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
 
<style lang="less">
.box {
    width: 100%;
    height: 100%;
}
img {
    float: left;
    height: 810px;
    width: 1556px;
    opacity: 0.7;
}
.register_box {
    width: 450px;
    height: 380px;
    border-radius: 5px;
    border: 2px gray solid;
    float: left;
    position: absolute;
    top: 200px;
    left: 500px;
    background-color: white;
    opacity: 0.7;
}
.regiter_span {
    font-size: larger;
    position: relative;
    top: 15px;
    left: 180px;
}
.el-form {
    position: relative;
    top: 15px;
    padding-right: 20px;
}
.icon_avatar{
    position: relative;
    top: 30px;
    left: 20px;
}
.icon_unlock{
    position: relative;
    top: 30px;
    left: 20px;
}
.icon_Sugar {
    position: relative;
    top: 30px;
    left: 20px;
}
.regiter_link {
    position: relative;
    left: 305px;
    top: 13px;
}
.el-button {
    position: relative;
    top: 35px;
    left: 150px;
}
.el-button {
    position: relative;
    top: 5px;
    left: 20px;
}
.but_re{
    position: relative;
    left: 70px;
}
</style>
 

• 表单验证效果
  

补充

• 发送post请求时报错：415Unsupported media type
• 错误原因：传给后端接口的参数格式不正确
• 解决错误：这是因为我自己封装的axios有问题，注释掉如下代码即可