持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

优化左侧菜单

引言

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

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

处理左侧菜单

上一节，我们将项目中存在的 bug ，即 左侧菜单 右侧出现 小箭头 给处理了

我们分析了这个 小箭头 产生的原因，主要是因为有一个 权限 的菜单，但是这个 菜单 不应该在左侧菜单中出现

虽然我们上一节处理了这个问题，但是直接改页面代码，总归是不太好的

这一节，我们进行优化下 左侧菜单，我们将会在路由的处理时，进行修改，让其专门为 路由 以及 左侧菜单 来分别进行生成，来分别使用

优化

首先是在处理 路由 代码的位置处

HandleRoutes() {
  return new Promise((resolve, reject) => {
    if (!this.getMenus.length) {
      // 先获取到当前用户的角色
      // 根据角色id 找到 菜单id

      rolesGetMenu({
        roleId: JSON.stringify(this.getRoles)
      }).then((res: any) => {
        this.SetUserMenusId(res.userMenusId)

        // 生成菜单
        generateTree().then((res: any) => {
          console.log(res, 'res')
          this.SetMenusTree(res.routeList)
          resolve({})
        })
      })
    } else {
      resolve({})
    }
  })
}

可以看到之前在生成代码时，我们用 routeList 作为菜单树，但是此时的 routeList 并不是准确的，并不是我们想要的

所以我们在 generateTree 这个函数中，重新的去处理菜单

这里进行了分开，分别得到 仅有路由的 routeList 和 仅处理菜单树的 routeListTree

而这个 getTree 主要是处理路由，这里加了 flag 的目的，主要是在递归的时候进行判断，来得到不同的结果，如下图

这样就可以优化处理掉 小箭头的问题，而不用修改页面的代码

总结

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

优化了项目中，左侧菜单的 bug 问题