# vue-element-admin-dynamic-menu **Repository Path**: george_ren/vue-element-admin-dynamic-menu ## Basic Information - **Project Name**: vue-element-admin-dynamic-menu - **Description**: vue-element-admin 的动态菜单改造版本，菜单数据来自后端 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2406 - **Created**: 2025-03-23 - **Last Updated**: 2025-03-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README https://gitee.com/panjiachen/vue-element-admin 的动态菜单改造版本，菜单数据来自后端 ## 主要改造 - 已经去除了 mock `src/main.js`，改为了请求后端接口，可在 `vue.config.js` 中配置 - 动态生成菜单的主要逻辑在 `src/router/generator-routers.js`、`src/store/modules/permission.js` - 增加了动态菜单 api，按照 mock 数据的格式换了后端登录、用户信息、退出登录的 api `src/api/user.js` - 静态路由部分注释掉了 `src/router/index.js` - 增加了额外的响应码的处理 `src/utils/request.js` - 更改了登录页面 `src/views/login/index.vue` - 一点点样式、配置常量相关的修改 - 未考虑用户角色 具体更改请看 https://gitee.com/renjianzhi/vue-element-admin-dynamic-menu/commit/bfeb47f51b744f8d4023b8194041ff558ad6e441 ## 菜单表示例 ``` create table flexi.flexi_menu ( id int auto_increment comment '主键id' primary key, create_by bigint default 0 not null comment '创建人', create_time datetime default CURRENT_TIMESTAMP not null comment '创建时间', update_by bigint default 0 not null comment '更新人', update_time datetime default CURRENT_TIMESTAMP not null comment '更新时间', parent_id int default 0 not null comment '父菜单id', parent_name varchar(50) default '' not null comment '父菜单名称', ancestors varchar(255) default '' not null comment '祖先 id 列表', sort int default 1000 not null comment '菜单展示顺序', type int default 1 not null comment '菜单类型(目录/菜单)', status int default 1 not null comment '菜单状态', name varchar(50) not null comment '菜单名', name_i18n varchar(255) null comment '菜单名国际化', route_name varchar(50) not null comment '路由 name', route_params varchar(255) null comment '路由参数', path varchar(255) null comment '路由 path / 外链地址', component varchar(50) not null comment '路由 component', redirect varchar(255) null comment '跳转 path', icon varchar(50) null comment '菜单图标', hidden bit default b'0' not null comment '是否隐藏', external bit default b'0' not null comment '是否外部链接', cache bit default b'0' not null comment '是否缓存', permission varchar(255) null comment '权限标识', provider varchar(50) null comment '提供者' ) comment '管理后台菜单表;'; 示例数据 INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:53:40', 0, '2024-10-17 08:53:40', 0, '', '', 1000, 1, 2, '控制台', '', 'dashboard', null, '/', 'RouteView', '/profile', 'dashboard', false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:53:40', 0, '2024-10-17 08:53:40', 0, '', '', 1000, 1, 2, '代码生成', '', 'gen', null, null, 'Layout', '/gen/genList', 'skill', false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, '生成列表', '', 'genList', null, null, 'gen/index', null, null, false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, '扫描数据表', '', 'genScan', null, null, 'gen/scan', null, null, false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:53:40', 0, '2024-10-17 08:53:40', 0, '', '', 1000, 1, 2, 'UI设计', '', 'design', null, null, 'Layout', '/design/scheme', 'tree-table', false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-11-13 07:25:33', 0, '2024-11-13 07:25:33', 21, '', '', 1000, 2, 2, 'UI设计方案', null, 'scheme', null, null, 'design/index', null, null, false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-11-13 07:25:33', 0, '2024-11-13 07:25:33', 21, '', '', 1000, 2, 2, 'UI设计器', null, 'designer', null, null, 'design/designer', null, null, true, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, '新增或修改', '', 'genAddEdit', null, null, 'gen/add_edit', null, null, true, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, '列编辑', '', 'genColumns', null, null, 'gen/columns', null, null, true, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, '代码对比', '', 'genDiff', null, null, 'gen/diff', null, null, true, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, 'SQL生成', '', 'genSql', null, null, 'gen/sql', null, null, false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-10-17 08:55:46', 0, '2024-10-17 08:55:46', 18, '', '', 1000, 2, 2, '表关系', '', 'genRelation', null, null, 'gen_relation/index', null, null, false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-11-13 07:25:33', 0, '2024-11-13 07:25:33', 21, '', '', 1000, 2, 2, 'UI组件库', null, 'components', null, null, 'design_components/index', null, null, false, false, false, null, 'vea'); INSERT INTO flexi.flexi_menu (create_by, create_time, update_by, update_time, parent_id, parent_name, ancestors, sort, type, status, name, name_i18n, route_name, route_params, path, component, redirect, icon, hidden, external, cache, permission, provider) VALUES (0, '2024-11-13 07:25:33', 0, '2024-11-13 07:25:33', 21, '', '', 1000, 2, 2, '物料管理', null, 'material', null, null, 'design_material/index', null, null, true, false, false, null, 'vea'); ``` ## API响应示例 ### 退出登录 ``` {"code":200,"message":"OK"} ``` ### 登录 ``` { "code": 200, "data": { "token": "JWT token" }, "message": "OK" } ``` ### 用户信息 ``` { "code": 200, "data": { "roles": [ "user" ], "introduction": "", "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif", "name": "超级管理员" }, "message": "OK" } ``` ### 菜单 ``` { "code": 200, "data": [ { "path": "/", "name": "dashboard", "component": "RouteView", "redirect": "/profile", "parentId": 0, "id": 17, "meta": { "title": "控制台", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": "dashboard", "permission": null, "roles": null } }, { "path": null, "name": "gen", "component": "Layout", "redirect": "/gen/genList", "parentId": 0, "id": 18, "meta": { "title": "代码生成", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": "skill", "permission": null, "roles": null } }, { "path": null, "name": "genList", "component": "gen/index", "redirect": null, "parentId": 18, "id": 19, "meta": { "title": "生成列表", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "genScan", "component": "gen/scan", "redirect": null, "parentId": 18, "id": 20, "meta": { "title": "扫描数据表", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "design", "component": "Layout", "redirect": "/design/scheme", "parentId": 0, "id": 21, "meta": { "title": "UI设计", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": "tree-table", "permission": null, "roles": null } }, { "path": null, "name": "scheme", "component": "design/index", "redirect": null, "parentId": 21, "id": 22, "meta": { "title": "UI设计方案", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "designer", "component": "design/designer", "redirect": null, "parentId": 21, "id": 23, "meta": { "title": "UI设计器", "show": false, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "genAddEdit", "component": "gen/add_edit", "redirect": null, "parentId": 18, "id": 25, "meta": { "title": "新增或修改", "show": false, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "genColumns", "component": "gen/columns", "redirect": null, "parentId": 18, "id": 26, "meta": { "title": "列编辑", "show": false, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "genDiff", "component": "gen/diff", "redirect": null, "parentId": 18, "id": 27, "meta": { "title": "代码对比", "show": false, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "genSql", "component": "gen/sql", "redirect": null, "parentId": 18, "id": 28, "meta": { "title": "SQL生成", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "genRelation", "component": "gen_relation/index", "redirect": null, "parentId": 18, "id": 29, "meta": { "title": "表关系", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "components", "component": "design_components/index", "redirect": null, "parentId": 21, "id": 30, "meta": { "title": "UI组件库", "show": true, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } }, { "path": null, "name": "material", "component": "design_material/index", "redirect": null, "parentId": 21, "id": 31, "meta": { "title": "物料管理", "show": false, "hideChildren": null, "hiddenHeaderContent": null, "keepAlive": null, "target": null, "icon": null, "permission": null, "roles": null } } ], "message": "OK" } ```