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

保存菜单列表

引言

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

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

保存菜单列表

上一节，我们通过该用户所拥有的 角色id列表 成功获取了 菜单id列表

这一节，我们把前端的 保存菜单列表 进行实现

api接口

上一节，我们把后端的逻辑处理了，忘记把接口进行暴露

这里先把 api接口 进行定义 和 暴露，是一个 get 请求

• 在后端目录 router\user\index.js 文件中

  const Api = {
    rolesGetMenu: '/roles-get-menu'
  }
  
  /* 根据角色获取菜单 */
  router.get(Api.rolesGetMenu, userController.rolesGetMenu)
  

• 在前端目录 src\api\user\index.ts 文件中

  也进行与上述代码类似的一个定义，这里直接贴图

  

保存菜单列表

上面，我们添加好 api 接口后。

我们接下来分析 这个接口何时进行调用。其实只要用户刷新，我们都要重新获取当前用户 所拥有的 菜单id

所以我们应该将其在 路由 的位置处 进行处理，来进行 api 接口的调用，将该用户所拥有的一个 菜单id列表，存放到我们的 Pinia 中。

由于牵扯到 用户 的操作，所以放到 Pinia 中的 user 模块下。

操作文件的位置为：src\store\modules\user.ts

下面是主要的代码

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

    // 生成菜单
    generateTree().then((res: any) => {
      console.log(res, 'res')
      this.SetMenus(res.newMenuList)
      this.SetMenusTree(res.routeList)
      resolve({})
    })
  })
  
  
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      token: '',
      roles: [],
      menus: [], // 菜单
      menusTree: [], // 菜单树
      user: {}, // 用户信息
      userMenusId: [], // 用户拥有的菜单id
    }
  },
  getters: {
    getUserMenusId: (state) => state.userMenusId,
  }
}
  
SetUserMenusId(userMenusId) {
  this.userMenusId = userMenusId
},

后续我们会在 动态菜单 的 相关逻辑中，来使用到我们的 菜单id列表，所以又加了一个 getters 来方便获取。

总结

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

完成了 前端保存 当前用户的 保存菜单列表 的功能。