某课算法与数据结构体系课已完结

download：某课算法与数据结构体系课已完结

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

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

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

普通的菜单，点击之后在右边主页面翻开某个功用页面。
一个超链接，但不是外链，是一个在当前系统中翻开的外部网页，点击之后，会在右边的主页面中新开一个选项卡，这个选项卡中显现的是一个外部网页（实质上是经过 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 了。

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

前端渲染
接下来我们再来看一看前端的菜单渲染，前端的动态菜单渲染位于 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.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 路由信息
*/

某课算法与数据结构体系课已完结

download：某课算法与数据结构体系课已完结

相关推荐