仓库管理系统-14-前端之侧边栏区域Aside的集中式状态管理菜单和动态路由

文章目录

• 1 获取对应权限菜单信息
• • 1.1 数据库表(menu)
  • 1.2 后端代码
  • • 1.2.1 Menu.java
    • 1.2.2 MenuMapper.java
    • 1.2.3 MenuService.java
    • 1.2.4 MenuServiceImpl.java
    • 1.2.5 MenuController.java
  • 1.3 数据返回前端
  • • 1.3.1 UserController.java
    • 1.3.2 Login.vue
• 2 集中式状态管理vuex
• • 2.1 编写store文件(store/index.js)
  • 2.2 注册store(main.js)
  • 2.3 数据存到store(Login.vue)
  • 2.4 数据从store取出(Aside.vue)
• 3 自动生成路由
• • 3.1 store/index.js(动态路由)
  • 3.2 router/index.js(静态路由)
  • 3.3 Aside.vue(菜单渲染)
  • 3.4 App.vue(监听菜单变化)

添加菜单表，使用集中式状态管理vuex，自动生成动态路由。

1 获取对应权限菜单信息

先前通过手动在/router/index.js中配置路由，然后通过模拟菜单数据，使用v-for渲染菜单。

在vue-router对象中首先初始化公共路由，比如（404，login）等，然后在用户登陆成功，根据用户的角色信息，获取对应权限菜单信息menuList，并将后台返回的menuList转换成我们需要的router数据结构，然后通过vue-router新添的router.addRouter(routes)方法，同时我们可以将转后的路由信息保存于vuex，这样我们可以在我们的Aside组件中获取我们的全部路由信息，并且渲染我们的左侧菜单栏，让动态路由实现。

1.1 数据库表(menu)

CREATE TABLE `menu` (