某课 java全栈工程师：从java后端到全栈，高级电商全栈系统大课

download：java全栈工程师：从java后端到全栈，高级电商全栈系统大课

Spring Boot+Vue3 动态菜单完成思绪梳理
关于 Spring Boot + Vue3 的动态菜单，松哥之前曾经写了两篇文章了，这两篇文章主要是从代码上和大家剖析动态菜单最终的完成方式，但是还是有小同伴觉得没太看明白，觉得缺乏一个大纲挈领的思绪，所以，今天松哥再整一篇文章和大家再来捋一捋这个问题，希望这篇文章能让小同伴们彻底搞分明这个问题。

1. 整体思绪
   首先我们来看整体思绪。

有父有子：像系统管理那种，既有父菜单，又有子菜单。
只要一个一级菜单，这种又细分为三种状况：

普通的菜单，点击之后在右边主页面翻开某个功用页面。
一个超链接，但不是外链，是一个在当前系统中翻开的外部网页，点击之后，会在右边的主页面中新开一个选项卡，这个选项卡中显现的是一个外部网页（实质上是经过 iframe 标签引入的一个外部网页）。
一个超链接，并且还是一个外链，点击之后，直接在阅读器中翻开一个新的选项卡，新的选项卡中展现一个外部链接。

四种菜单对应的 JSON 格式分别如下：

有父有子：

{

"name": "Monitor",
"path": "/monitor",
"hidden": false,
"redirect": "noRedirect",
"component": "Layout",
"alwaysShow": true,
"meta": {
    "title": "系统监控",
    "icon": "monitor",
    "noCache": false,
    "link": null
},
"children": [{
    "name": "Online",
    "path": "online",
    "hidden": false,
    "component": "monitor/online/index",
    "meta": {
        "title": "在线用户",
        "icon": "online",
        "noCache": false,
        "link": null
    }
}, {
    "name": "Job",
    "path": "job",
    "hidden": false,
    "component": "monitor/job/index",
    "meta": {
        "title": "定时任务",
        "icon": "job",
        "noCache": false,
        "link": null
    }
}]

}
复制代码

只要一个一级菜单，且一级菜单点击后是一个功用页面：

{

"path": "/",
"hidden": false,
"component": "Layout",
"children": [{
    "name": "Role",
    "path": "role",
    "hidden": false,
    "component": "system/role/index",
    "meta": {
        "title": "角色管理",
        "icon": "peoples",
        "noCache": false,
        "link": null
    }
}]

}
复制代码

只要一个一级菜单，且一级菜单点击之后在当前系统中一个新的选项卡里翻开一个网页：

{

"name": "Http://www.javaboy.org",
"path": "/",
"hidden": false,
"component": "Layout",
"meta": {
    "title": "TienChin健身官网",
    "icon": "guide",
    "noCache": false,
    "link": null
},
"children": [
    {
        "name": "Www.javaboy.org",
        "path": "www.javaboy.org",
        "hidden": false,
        "component": "InnerLink",
        "meta": {
            "title": "TienChin健身官网",
            "icon": "guide",
            "noCache": false,
            "link": "http://www.javaboy.org"
        }
    }
]

}
复制代码

只要一个一级菜单，且一级菜单点击之后在阅读器翻开一个新的选项卡：

{

"name": "Http://www.javaboy.org",
"path": "http://www.javaboy.org",
"hidden": false,
"component": "Layout",
"meta": {
    "title": "TienChin健身官网",
    "icon": "guide",
    "noCache": false,
    "link": "http://www.javaboy.org"
}

}
复制代码
依据以上四种不同的 JSON，我们总结出以下规律：

父组件都是 Layout，这里的 Layout 就相当于我们 vhr 中的 Home 组件，也就是整个页面的框架。
假如想在当前系统中，新开选项卡翻开一个功用项，那么这个菜单项必然有 children，即便 children 中只要一项菜单。
假如菜单项是一个外链，那么这个菜单项就不需求有 children 了。
某种水平上，我们其实能够将 2、3 归为一类，毕竟 3 只是展现内容的组件固定为 InnerLink，2 则视状况而定。
整体上，能够点击的菜单的 path 都是父菜单的 path + 子菜单的 path，假如菜单项有父有子，那就正常拼接就行了；假如只要一个子菜单，那么父菜单的 path 就是 /；假如是一个外链，那就只要父菜单的 path 了。

好了，这就是动态菜单的整体设计。

2. 前端渲染
   接下来我们再来看一看前端的菜单渲染，前端的动态菜单渲染位于 tienchin-ui/src/layout/components/Sidebar/SidebarItem.vue 文件中：
   
   复制代码
   这里触及到几个办法，详细的办法细节我就不贴出来了，主要和大家说下完成思绪。

先看整体上，这个菜单要是非躲藏的，躲藏的菜单，那么直接一级菜单及其下的子菜单就都不渲染了。
渲染整体上分两块，上面的 template 主要是渲染只要一个子菜单的状况，也就是第一小节的 2、3、4 三种状况，下面的渲染正常的有父有子的状况，也就是第一小节的菜单 1。
hasOneShowingChild 主要是判别这个菜单项能否只要一个需求渲染的子菜单，假如有多个子菜单，但是大局部都是躲藏，只要一个需求渲染出来，那也算只要一个子菜单，假如一个菜单项都没有子菜单，那也算一个子菜单，只不过这个子菜单就是他本身，对应第一小节第 4 种状况。在判别的过程中，将独一需求渲染的菜单的数据赋值给 onlyOneChild 变量，那么最终，假如当前菜单项只要一个子菜单，且这个子菜单没有子菜单（或者有子菜单但是子菜单不用显现），并且当前菜单也不是必需要渲染的，那就将 onlyOneChild 的数据渲染出来。
关于普通的有父有子的状况，渲染的时分，经过 el-sub-menu 标签停止渲染，但是留意子项是 sidebar-item，sidebar-item 其实就是当前项！换言之，这里的渲染其实还用到了递归（直到没有 children 的时分完毕），这样即使菜单有三级四级五级等等，只需不嫌难看，都是能够渲染出来的。

3. 后端菜单生成
   3.1 菜单表
   首先我们来看看菜单表的定义，也就是 sys_menu。
   CREATE TABLE sys_menu (
   menu_id bigint(20) NOT NULL AUTO_INCREMENT COMMENT '菜单ID',
   menu_name varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '菜单称号',
   parent_id bigint(20) DEFAULT '0' COMMENT '父菜单ID',
   order_num int(4) DEFAULT '0' COMMENT '显现次第',
   path varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '路由地址',
   component varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '组件途径',
   query varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '路由参数',
   is_frame int(1) DEFAULT '1' COMMENT '能否为外链（0是 1否）',
   is_cache int(1) DEFAULT '0' COMMENT '能否缓存（0缓存 1不缓存）',
   menu_type char(1) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '菜单类型（M目录 C菜单 F按钮）',
   visible char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '菜单状态（0显现 1躲藏）',
   status char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '菜单状态（0正常 1停用）',
   perms varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '权限标识',
   icon varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '#' COMMENT '菜单图标',
   create_by varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创立者',
   create_time datetime DEFAULT NULL COMMENT '创立时间',
   update_by varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
   update_time datetime DEFAULT NULL COMMENT '更新时间',
   remark varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '备注',
   PRIMARY KEY (menu_id)
   ) ENGINE=InnoDB AUTO_INCREMENT=3054 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='菜单权限表';
   复制代码
   其实这里很多字段都和我们 vhr 项目项目很类似，我也就不反复啰嗦了，我这里主要和小同伴们说一个字段，那就是 menu_type。
   menu_type 表示一个菜单字段的类型，一个菜单有三品种型，分别是目录（M）、菜单（C）以及按钮（F）。这里所说的目录，相当于我们在 vhr 中所说的一级菜单，菜单相当于我们在 vhr 中所说的二级菜单。
   当用户从前端登录胜利后，要去动态加载的菜单的时分，就查询 M 和 C 类型的数据即可，F 类型的数据不是菜单项，查询的时分直接过滤掉即可，经过 menu_type 这个字段能够轻松的过滤掉 F 类型的数据。小同伴们想想，F 类型的数据过滤掉之后，剩下的数据不就是一级菜单和二级菜单了，那不就和 vhr 又一样了么！

在 vhr 中，思索到菜单就是只要两级：一级菜单和二级菜单，一级菜单是目录，二级菜单是则是详细的菜单项，没有三级菜单！所以在 vhr 中，查询菜单的时分我直接用了一个一对多的查询，将一级菜单做一的一方，二级菜单做多的一方，这样比拟省事。当然灵敏度差一点，所以在 TienChin 项目中，这块还是用上了递归。
3.2 菜单接口
当用户登录胜利之后，会自动恳求 /getRouters 接口来获取菜单信息，我们一同来看下：
/**

• 获取路由信息
  *
• @return 路由信息
  */

@GetMapping("getRouters")
public AjaxResult getRouters() {

Long userId = SecurityUtils.getUserId();
List menus = menuService.selectMenuTreeByUserId(userId);
return AjaxResult.success(menuService.buildMenus(menus));

}
复制代码
这里的查询实践上分为两个步骤：

依据用户 id 查询到一切的菜单信息，这一步的查询实践上是比拟容易的，就单纯的多张表结合在一同，然后过滤出和当前用户相关并且菜单类型为 M 或者 C 的菜单（类型为 F 的表示按钮，就不要了），查询到菜单信息之后，然后停止一个递归操作，将菜单数据的层级排列出来。
menuService.buildMenus 这一步则是将菜单数据专为前端所需求的路由数据。

一共就这两个步骤，我们来逐一停止剖析。
先来看查询菜单数据。
/**

• 依据用户ID查询菜单
  *
• @param userId 用户称号
• @return 菜单列表
  */

@Override
public List selectMenuTreeByUserId(Long userId) {

List menus = null;
if (SecurityUtils.isAdmin(userId)) {
    menus = menuMapper.selectMenuTreeAll();
} else {
    menus = menuMapper.selectMenuTreeByUserId(userId);
}
return getChildPerms(menus, 0);

}
/**

• 依据父节点的ID获取一切子节点
  *
• @param list 分类表
• @param parentId 传入的父节点ID
• @return String
  */

public List getChildPerms(List list, int parentId) {

List returnList = new ArrayList();
for (Iterator iterator = list.iterator(); iterator.hasNext(); ) {
    SysMenu t = (SysMenu) iterator.next();
    // 一、依据传入的某个父节点ID,遍历该父节点的一切子节点
    if (t.getParentId() == parentId) {
        recursionFn(list, t);
        returnList.add(t);
    }
}
return returnList;

}
/**

• 递归列表
  *
• @param list
• @param t
  */

private void recursionFn(List list, SysMenu t) {

// 得到子节点列表
List childList = getChildList(list, t);
t.setChildren(childList);
for (SysMenu tChild : childList) {
    if (hasChild(list, tChild)) {
        recursionFn(list, tChild);
    }
}

}
/**

• 得到子节点列表
  */

private List getChildList(List list, SysMenu t) {

List tlist = new ArrayList();
Iterator it = list.iterator();
while (it.hasNext()) {
    SysMenu n = (SysMenu) it.next();
    if (n.getParentId().longValue() == t.getMenuId().longValue()) {
        tlist.add(n);
    }
}
return tlist;

}
/**

• 判别能否有子节点
  */

private boolean hasChild(List list, SysMenu t) {

return getChildList(list, t).size() > 0;

}
复制代码
这里一共触及到五个关键办法，我们来逐一停止剖析：

selectMenuTreeByUserId：这个办法的执行比拟容易，假如当前用户是管理员，那就不用加过滤条件了，直接查询出一切的类型为 M 和 C 的菜单项即可。
getChildPerms：这个办法主要是将前面查询出来的菜单数据停止重组，原本都是一个汇合中的数据，如今在该办法中处置成树状，处置的中心逻辑就是调用 recursionFn 办法将之停止递归。
recursionFn：这是最为关键的递归办法了，首先调用 getChildList 获取当前菜单项的 children，然后将获取到的 children 设置给当前菜单项，最后还要遍历获取到的 children，假如这个 children 也是有子菜单的，则继续调用 recursionFn 办法停止处置。
getChildList：这个是查询某一个菜单的子菜单，这个很容易，假如某一个菜单的 parentId 是当前菜单的 id，那么这个菜单就是当前菜单的子菜单。
hasChild：这个是判别给定的菜单能否有子菜单，这个逻辑就比拟简单了。

好啦，这个就是整个的查询逻辑，整体上来说是比拟容易的，就是查询 M 和 C 类型的菜单，然后再做一个递归操作，将菜单数据变成一个树状数据。
但是由于 SysMenu 和前后端所需求的路由数据的字段称号对不上，并且格式参数等都不契合前端的请求，所以还需求再做一个转换，这就是 menuService.buildMenus 所做的事情了：
/**

• 构建前端路由所需求的菜单
  *
• @param menus 菜单列表
• @return 路由列表
  */

@Override
public List buildMenus(List menus) {

List routers = new LinkedList();
for (SysMenu menu : menus) {
    RouterVo router = new RouterVo();
    router.setHidden("1".equals(menu.getVisible()));
    router.setName(getRouteName(menu));
    router.setPath(getRouterPath(menu));
    router.setComponent(getComponent(menu));
    router.setQuery(menu.getQuery());
    router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), StringUtils.equals("1", menu.getIsCache()), menu.getPath()));
    List cMenus = menu.getChildren();
    if (!cMenus.isEmpty() && cMenus.size() > 0 && UserConstants.TYPE_DIR.equals(menu.getMenuType())) {
        router.setAlwaysShow(true);
        router.setRedirect("noRedirect");
        router.setChildren(buildMenus(cMenus));
    } else if (isMenuFrame(menu)) {
        router.setMeta(null);
        List childrenList = new ArrayList();
        RouterVo children = new RouterVo();
        children.setPath(menu.getPath());
        children.setComponent(menu.getComponent());
        children.setName(StringUtils.capitalize(menu.getPath()));
        children.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), StringUtils.equals("1", menu.getIsCache()), menu.getPath()));
        children.setQuery(menu.getQuery());
        childrenList.add(children);
        router.setChildren(childrenList);
    } else if (menu.getParentId().intValue() == 0 && isInnerLink(menu)) {
        router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon()));
        router.setPath("/");
        List childrenList = new ArrayList();
        RouterVo children = new RouterVo();
        String routerPath = innerLinkReplaceEach(menu.getPath());
        children.setPath(routerPath);
        children.setComponent(UserConstants.INNER_LINK);
        children.setName(StringUtils.capitalize(routerPath));
        children.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), menu.getPath()));
        childrenList.add(children);
        router.setChildren(childrenList);
    }
    routers.add(router);
}
return routers;

}
复制代码
从这个办法的执行逻辑上我们能够看到，这里的菜单数据一共分为了四种状况，其实刚好就和我们第一小节所引见的状况相对应。
整体上来看，分支语句外面设置了组件的最根本的属性。三个分支语句：

第一个分支，处置普通的有父有子的状况。
第二个分支，处置第一小节第二种状况。
第三个分支，处置第一小节第三种状况。
假如三个分支都没进去，那就是第一小节的第四种状况，以及各个子菜单的状况了。

好了，基于这样大的思绪，再来看各个属性的详细设置，就很容易了。

首先是可见性 hidden，这个没啥好说的。
接下来是菜单的 name 属性，name 属性分为了两种状况：路由的 name 属性是菜单表中的 path 字段值且首字母大写（菜单 1、3、4）；假如在一级菜单中，呈现了一个菜单 C（原本这一级别只要 M），并且还不是外链，那么就设置菜单的 name 为空字符串（相当于此时不需求 name 属性了，对应菜单 2 的状况）。
接下来是路由的 path，设置 path 的时分也分好种状况，松哥对照着代码来和大家说一下：

/**

• 获取路由地址
  *
• @param menu 菜单信息
• @return 路由地址
  */

public String getRouterPath(SysMenu menu) {

String routerPath = menu.getPath();
// 内链翻开外网方式
if (menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
    routerPath = innerLinkReplaceEach(routerPath);
}
// 非外链并且是一级目录（类型为目录）
if (0 == menu.getParentId().intValue() && UserConstants.TYPE_DIR.equals(menu.getMenuType())
        && UserConstants.NO_FRAME.equals(menu.getIsFrame())) {
    routerPath = "/" + menu.getPath();
}
// 非外链并且是一级目录（类型为菜单）
else if (isMenuFrame(menu)) {
    routerPath = "/";
}
return routerPath;

}
复制代码
a. 首先获取从数据库中查询到的 path 属性。
b. 假如当前组件不是一级菜单，并且是在内部组件中展现，那么除去这个 path 里边的 http 或者 https（对应菜单 3 的 children 的状况）。
c. 假如当前组件是一级菜单并且是 M 型并且不是外链，那么就在原有的 path 上加上 / 前缀（对应菜单 1 的一级菜单的 path 状况）。
d. 假如当前组件是一级菜单，且是 C 型菜单，那么设置 path 为 /（对应菜单 2、3 中一级菜单的 path 状况）。
e. 其他状况，菜单都是从数据库查到什么返回什么。

接下来是设置前端 component，这个菜单项用哪个 component 组件显现出来。

/**

• 获取组件信息
  *
• @param menu 菜单信息
• @return 组件信息
  */

public String getComponent(SysMenu menu) {

String component = UserConstants.LAYOUT;
if (StringUtils.isNotEmpty(menu.getComponent()) && !isMenuFrame(menu)) {
    component = menu.getComponent();
} else if (StringUtils.isEmpty(menu.getComponent()) && menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
    component = UserConstants.INNER_LINK;
} else if (StringUtils.isEmpty(menu.getComponent()) && isParentView(menu)) {
    component = UserConstants.PARENT_VIEW;
}
return component;

}
复制代码
a. 首先默许的组件是 Layout（菜单1、2、3、4 的一级菜单）。
b. 假如配置的时分就有 component，并且当前菜单项也不是外链，那么就运用配置的 component（菜单 1、2 的子菜单状况）。
c. 假如不是一级菜单（是一个子菜单），并且是一个在当前系统展现的外链，那么就运用 InnerLink 这个组件（这个组件中有一个 iframe 标签能够把外链展现出来，如菜单 4 的子菜单状况）。
d. 假如配置的时分没有设置组件并且菜单类型是 M（二级菜单中还有三级菜单的状况），那么就设置显现组件为 ParentView。
component 就分为这几种状况。

接下来就是 query 和 meta 这两个参数就没啥好说的。

接下来就是三个分支的状况了。
其他属性都比拟容易，我就不啰嗦啦～