cms之day4( vue、ant design vue自定义验证model form、路由守卫；session与token登录鉴权)

最新推荐文章于 2023-03-31 15:34:59 发布

w18789476022

最新推荐文章于 2023-03-31 15:34:59 发布

阅读量1.2k

点赞数

分类专栏： nodejs之cms练习文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/w18789476022/article/details/122015266

版权

本文介绍了在Vue.js项目中使用Ant Design Vue的表单自定义验证，以及JWT token在登录鉴权中的应用，包括路由守卫、前端token管理与无感刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- day4

day4

1. `axios ant-design vue`前端

1. `vue`父子组件传值

子传父

// 子组件 search.vue 提交时emit

handleSubmit() {
     
      // 传递name至父组件
      this.$emit('searchName', this.search.name)
    }

// 父组件 manageList.vue
 <search v-on:searchName="getSearchName" />
   getSearchName(name) {
     
      console.log(name)
    }

父传子

今天暂时没用到，链接粘在这里可可爱爱

传送门

2. `vue`之`watch`

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

 watch: {
   
            num(newVal, oldVal) {
   
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }

 watch: {
   
            num: {
   
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
   
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

 watch: {
   
            num: {
   
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
   
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
                deep:true
            }
        }

3. watch和computed区别

watch 观察监听页面上的vue实例. eg.const vm=new vue({}),当需要在数据变化响应时，执行异步操作，或高性能操作，选择watch。

computed:关联多个实时计算的对象，当这个对象中的其中一个改变时都会触发这个属性；具有缓存能力。

4. ant deisgn vue使用model form时自定义验证

// addManager.vue 
rules: {
   
        mobile: [{
    required: true, trigger: ['change', 'blur'], validator: tools.validatorMobile }],
        email: [{
    required: true, trigger: ['change', 'blur'], validator: tools.validatorEmail }]
      },
       psw: [{
    required: true, trigger: ['blur', 'change'], validator: tools.validatorPsw }],

// too.js
// 验证手机号 FormModel
  validatorMobile(rule, value, callback) {
   
    // 如果为空值，就抛出错误
    if (!value) {
   
      callback(new Error('请输入手机号!'))
    } else {
   
      // 正则判断手机号格式的格式，正则判断失败抛出错误，否则直接callback()
      if (!/^1[2-9]\d{9}$/.test(value)) {
   
        callback(new Error('手机号格式不正确!'))
      } else {
   
        callback()
      }
    }
  },
  //   验证邮箱 FormModel
  validatorEmail(rule, value, callback) {
   
    // 正则判断手机号格式的格式，正则判断失败抛出错误，否则直接callback()
    if (value) {
   
      if