jeecg boot 企业级应用管理后台 （五）菜单模块介绍 从0开始 (持续更新)

Jeecg 的菜单模块是其重要组成部分，管理和展示应用程序中的导航菜单。以下是关于 Jeecg 菜单模块的详细介绍，涵盖了数据库、前端和后端的各个部分。

数据库部分

Jeecg 的菜单模块在数据库中通常涉及以下几个表：

1. 菜单表（sys_menu）：存储菜单的基本信息，如菜单名称、路径、图标、父级菜单等。

   CREATE TABLE `sys_menu` (
     `id` BIGINT NOT NULL AUTO_INCREMENT,
     `name` VARCHAR(50) NOT NULL COMMENT '菜单名称',
     `path` VARCHAR(200) NOT NULL COMMENT '菜单路径',
     `icon` VARCHAR(50) COMMENT '菜单图标',
     `parent_id` BIGINT DEFAULT NULL COMMENT '父级菜单ID',
     `order_num` INT DEFAULT 0 COMMENT '排序',
     PRIMARY KEY (`id`)
   );
   

2. 角色菜单关联表（sys_role_menu）：存储角色和菜单的对应关系。

   CREATE TABLE `sys_role_menu` (
     `role_id` BIGINT NOT NULL COMMENT '角色ID',
     `menu_id` BIGINT NOT NULL COMMENT '菜单ID',
     PRIMARY KEY (`role_id`, `menu_id`)
   );
   

后端部分

菜单页面路径 (\jeecg-module-system\jeecg-system-biz\src\main\java\org\jeecg\modules\system\controller\SysPermissionController.java)

后端主要采用 Spring Boot 框架进行开发，以下是一些关键点：

1. Controller：处理菜单的增删改查请求。

   @RestController
   @RequestMapping("/sys/menu")
   public class MenuController {
       
       @Autowired
       private MenuService menuService;
   
       @GetMapping
       public List<Menu> getAllMenus() {
           return menuService.getAllMenus();
       }
   
       @PostMapping
       public void addMenu(@RequestBody Menu menu) {
           menuService.saveMenu(menu);
       }
   
       @PutMapping
       public void updateMenu(@RequestBody Menu menu) {
           menuService.updateMenu(menu);
       }
   
       @DeleteMapping("/{id}")
       public void deleteMenu(@PathVariable Long id) {
           menuService.deleteMenu(id);
       }
   }
   

2. Service：负责业务逻辑处理，如获取菜单列表、保存菜单、更新菜单、删除菜单等。

   @Service
   public class MenuService {
   
       @Autowired
       private MenuRepository menuRepository;
   
       public List<Menu> getAllMenus() {
           return menuRepository.findAll();
       }
   
       public void saveMenu(Menu menu) {
           menuRepository.save(menu);
       }
   
       public void updateMenu(Menu menu) {
           menuRepository.save(menu);
       }
   
       public void deleteMenu(Long id) {
           menuRepository.deleteById(id);
       }
   }
   

3. Repository：负责与数据库进行交互，通常使用 JPA 或者 MyBatis。

   @Repository
   public interface MenuRepository extends JpaRepository<Menu, Long> {
   }
   

前端部分

菜单页面路径 (\src\views\system\menu\index.vue)

前端部分通常采用 Vue.js 进行开发，以下是一些关键点：

1. 菜单组件：展示菜单的树形结构，并提供增删改查功能。

   <template>
       <div class="menu-container">
           <el-tree
               :data="menuList"
               node-key="id"
               :props="defaultProps"
               @node-click="handleNodeClick">
           </el-tree>
           <el-button @click="handleAddMenu">新增菜单</el-button>
       </div>
   </template>
   
   <script>
   export default {
       data() {
           return {
               menuList: [],
               defaultProps: {
                   children: 'children',
                   label: 'name'
               }
           };
       },
       created() {
           this.fetchMenus();
       },
       methods: {
           fetchMenus() {
               this.$axios.get('/sys/menu')
                   .then(response => {
                       this.menuList = response.data;
                   })
                   .catch(error => {
                       this.$message.error('获取菜单失败');
                   });
           },
           handleNodeClick(node) {
               // 处理菜单节点点击事件
           },
           handleAddMenu() {
               // 处理新增菜单事件
           }
       }
   };
   </script>
   

2. 路由：配置菜单路由，动态加载菜单。

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '@/views/Home.vue';
   import Menu from '@/views/Menu.vue';
   
   Vue.use(Router);
   
   const router = new Router({
       routes: [
           {
               path: '/',
               name: 'Home',
               component: Home,
               children: [
                   {
                       path: 'menu',
                       name: 'Menu',
                       component: Menu
                   }
               ]
           }
       ]
   });
   
   export default router;
   

Jeecg 的菜单模块结合了前后端的开发，使得用户可以方便地管理和展示应用程序中的导航菜单。通过 Spring Boot 进行后端处理，Vue.js 进行前端展示，整个流程高效且易于维护。