RuoYi-Vue项目添加新的菜单与子菜单

前言

在RuoYi-Vue项目中，菜单与数据库相连，如果需要添加新的菜单就需要在数据库中增加相应的记录。

插入模板

其实诸如这些教程会详细说明如何使用官方的代码生成模块来创建菜单记录，所以就不详细展开了，这里主要说明记录有什么需要注意的地方。

当然，官方的代码生成可以提供SQL参考，官方的原有材料也可以提供借鉴。没错，我说的就是最开始的时候根目录下的sql文件夹。其中的两个官方内置的sql文件中给出了sys_menu菜单的样例：

-- 一级菜单
insert into sys_menu values('1', '系统管理', '0', '1', 'system',           null, '', 1, 0, 'M', '0', '0', '', 'system',   'admin', sysdate(), '', null, '系统管理目录');
-- 二级菜单
insert into sys_menu values('100',  '用户管理', '1',   '1', 'user',       'system/user/index',        '', 1, 0, 'C', '0', '0', 'system:user:list',        'user',          'admin', sysdate(), '', null, '用户管理菜单');
-- 用户管理按钮
insert into sys_menu values('1000', '用户查询', '100', '1',  '', '', '', 1, 0, 'F', '0', '0', 'system:user:query',          '#', 'admin', sysdate(), '', null, '');

不难看出，在插入菜单的过程中，点击后展开子菜单的项标记为M，点击后跳转到指定页面的子菜单项为C，与按钮相关的菜单项为F；同时，一级菜单的parent_id为0，而二级菜单的parent_id与一次菜单的menu_id一致。而其他内容都对菜单显示的影响关系不大。

也就是说，如果我们需要在现有的菜单中添加一级菜单，那就需要设置menu_type为M，parent_id为0。为了让菜单在页面上显示，还需要设置visible为0、status为0、is_frame为1。而二级菜单，不同之处仅在于menu_type为C，parent_id为上一级菜单的menu_id，三级菜单同理。

除了这些字段，对于一级菜单，我们并不需要他能够跳转到什么地方，那么在这里就只需要将component属性设置为NULL，而perms属性设置为空字符串''即可。而二级菜单需要跳转到固定的地方，所以component属性需要与前端保持一致。

比如，我在views文件夹下创建了pixiv文件夹，在其中放了一个index.vue文件，那么component属性就设置为pixiv/index。而如果你使用的是官方的代码生成模块，你就会发现在api文件夹下还有额外的一个js文件。别慌，这个文件只是单纯的封装了一下提交的过程，从而让我们的页面能够更专注于业务的实现。类似这种：

export function listImages(query) {
  return request({
    url: '/pixiv/gallery',
    method: "GET",
    params: query
  })
}

当然，我们会发现一个问题：这样子封装的话，是无法使用Restful风格对API进行请求的。

这也是为什么从头到尾RuoYi框架并没有使用Restful风格的API。

当然，你会说这应当是规范。但是另外还有一部分人会认为规范的存在就是会影响到交付的效率的，这就单纯是个人偏好了，没什么值得争论的。

对于刚入门的朋友，不如直接用数据库客户端修改，这样能够对照到每一列的含义与数据。对于比较熟悉的朋友……还需要我说么？（诶嘿~⭐）

前端显示

完成了数据库信息录入，接下来就是前端内容展示了。对于展示过程，也没有什么需要额外设置的，菜单栏立即生效。

但是如果需要二级菜单能够点击并跳转访问，那么就需要二级菜单对应到前端的真实组件地址。这个地址就是之前我们在数据库中设置的component属性。

官方的代码生成模块中直接给定了一个表格模板，使用肯定是没问题的，不使用也没关系，只需要与需求尽可能贴合就好了。

完成了前端、数据库，那么接下来完善后端就能够启动并调试了。