携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

角色与菜单联动

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

联动

上一节，我们将 角色 的 查询 以及 新增 功能处理完毕。

可以成功的访问数据库中的 角色 信息

这一节处理 角色 和 菜单 的一个联动效果

这一块主要是前端方面的一个逻辑

角色

如何让右侧的菜单进行显示呢？

那就要我们点击 选择左侧的某个 角色 时，右侧的菜单跟着展示

角色 中的一个字段 menuArrId 是一个 数组，里面的值，就是我们用来保存所 选择的 菜单的 id ，

• 点击前效果如下

  

• 点击后效果如下

  

可以很清楚的看到我们的 菜单 还没有进行配置，右侧还并未选中

• 点击左侧表格，获取该行数据

  const menu = ref(null)
  
  
  const handleCurrentChange = (val) => {
    nextTick(() => {
      menu.value?.setCheckedKeys([])
      state.checkedKeys = null
    })
  
    setTimeout(() => {
      state.currentRow = val
    })
  }
  

  可以看到这里使用了 nextTick 以及 setTimeout

  • nextTick

    • 原因的话，就是我们有可能获取到空的 菜单dom，所以避免这种报错，我们还是加上 nextTick

    • 为什么要获取 菜单dom，原因就是我们要清空 菜单树 里面的 所选择的值

  • setTimeout

    • 但是这就会引入另一个问题，我们要保证删除后，再进行添加操作

    • 如果直接写 state.currentRow = val，就会牵扯到我们的 同步和异步，以及 异步 中的 宏任务 和 微任务 问题

    • 它就会先执行 同步任务 中的 state.currentRow = val，再执行 异步任务 中的 nextTick 里面的代码

    • 所以为了避免这种事发生，我们添加了 setTimeout 这个 异步任务，也是 宏任务，保证了都是异步任务后。

    • 再根据 微任务 比 宏任务 先执行，保证了代码的执行顺序

到这里我们的 左右联动 算是做好了

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

完成了 角色与菜单 联动，以及过程中，同步任务，异步任务（宏任务，微任务）的执行顺序