專業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)
引言
老生常談了！
今天我想來和大家聊聊這個(gè)前端的動(dòng)態(tài)菜單，要如何設(shè)計(jì)才顯得專業(yè)！還是以我們的 TienChin 項(xiàng)目為例，大家一起來看看。
先來一張截圖看看效果：
那么這樣的菜單是如何設(shè)計(jì)出來的呢？
今天我也不想和大家聊過多的技術(shù)細(xì)節(jié)，就聊聊這個(gè)路由是如何設(shè)計(jì)的，一旦大家明白了路由是如何設(shè)計(jì)的，剩下的問題都是細(xì)枝末節(jié)的問題了。
1. 路由設(shè)計(jì)
有的小伙伴做過 vhr，知道 vhr 里的動(dòng)態(tài)菜單實(shí)現(xiàn)方式，松哥和大家一樣，也是在不斷學(xué)習(xí)不斷進(jìn)步中，今天我想和大家探討 TienChin 項(xiàng)目中動(dòng)態(tài)菜單的實(shí)現(xiàn)方案，看看是否是一種更佳的解決方案。
1.1 菜單設(shè)計(jì)
先來和小伙伴們回顧下 vhr 中的方案：
在 vhr 中，權(quán)限的控制，只控制到二級(jí)菜單，也就是一級(jí)菜單和權(quán)限沒關(guān)系。舉個(gè)例子，現(xiàn)在有一級(jí)菜單 A 和 二級(jí)菜單 B，B 是 A 中的菜單，現(xiàn)在假設(shè)：
- 如果當(dāng)前用戶權(quán)限可以查看 B 菜單，那么 A 菜單會(huì)自動(dòng)顯示出來。
- 如果當(dāng)前用戶權(quán)限無法查看 B 菜單，且 A 菜單中也沒有其他子菜單可以展示，那么 A 菜單就不會(huì)顯示出來。
換言之，A 菜單顯示與否，主要看它里邊有沒有子菜單需要展示，如果有，A 菜單就顯示，如果沒有，A 菜單就不顯示。
vhr 中的思路是這樣的。
在 TienChin 項(xiàng)目中，這一塊有一些變化：
如果 A 中只有一個(gè) B，那么似乎就沒有必要再做一個(gè)兩級(jí)菜單了，直接把 B 展示出來不就行了？用戶操作也方便！
這是第一個(gè)不一樣的地方。
1.2 路由數(shù)據(jù)
基于第一點(diǎn)，就涉及到一個(gè)問題，就是路由接口該如何設(shè)計(jì)？最主要是接口返回的數(shù)據(jù)格式應(yīng)該是什么樣子的？
首先有一點(diǎn)小伙伴們應(yīng)該知道，這里的路由是一個(gè)嵌套路由，也就是一級(jí)菜單中嵌套著二級(jí)菜單。即使這個(gè)地方在展示的時(shí)候，不存在層級(jí)關(guān)系，例如上圖中的促銷活動(dòng)，但是底層的數(shù)據(jù)結(jié)構(gòu)也應(yīng)該是嵌套路由。
好啦，不賣關(guān)子了，我們來看一段路由 JSON：
[{
"name": "Monitor",
"path": "/monitor",
"hidden": false,
"redirect": "noRedirect",
"component": "Layout",
"alwaysShow": true,
"meta": {
"title": "系統(tǒng)監(jiān)控",
"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": "定時(shí)任務(wù)",
"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
}
}]
}]
這里我舉了兩個(gè)菜單的例子，這兩個(gè)例子比較具有代表性，這個(gè)菜單最終顯示效果大概類似下面這樣：
系統(tǒng)監(jiān)控
- 在線用戶
- 定時(shí)任務(wù)
角色管理
大概顯示效果如上圖。
接下來我就來說一下這里幾個(gè)典型屬性：
- redirect：noRedirect 表示該路由在面包屑導(dǎo)航中不可被點(diǎn)擊。
- alwaysShow：如果這個(gè)屬性設(shè)置為 false，那么當(dāng)當(dāng)前菜單只有一個(gè)子菜單的時(shí)候，默認(rèn)情況下就只會(huì)顯示子菜單，而忽略父菜單（如 1.1 小節(jié)所述），但是如果將該屬性設(shè)置為 true，則無論當(dāng)前菜單有幾個(gè)子菜單，都會(huì)將當(dāng)前菜單展示出來（這就類似于 vhr 中的效果了）。
- 每一個(gè)父菜單都有自己的 path，每一個(gè) children 也有自己的 path，父菜單的 path 加上每一個(gè) children 的 path，共同組成每一個(gè) children 的路徑。
- 再來看第二個(gè)角色管理這個(gè)菜單項(xiàng)，由于它的父菜單中只有一個(gè)子菜單項(xiàng)，并且父菜單中也沒有 alwaysShow 屬性，所以這個(gè)菜單項(xiàng)在最終展示的時(shí)候，就只展示里邊的角色管理，父菜單則不會(huì)展示出來（正好，生成的 JSON 中也沒說父菜單的名字、圖標(biāo)等屬性）。
當(dāng)然，不是說你的 JSON 這么寫就自動(dòng)這么顯示，JSON 中的東西只是一個(gè)標(biāo)記，最終怎么顯示，還要看渲染：
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</div>
還有一個(gè)函數(shù)我就沒有列出來了，反正我們看名字也大概知道每一個(gè)函數(shù)的含義。
大家看，這個(gè) div 中實(shí)際上分為了兩部分，上面 template 專門用來處理 children 中只有一項(xiàng)的情況（角色管理），具體處理方式就是把 children 拿出來顯示，其他的則不考慮，具體執(zhí)行的時(shí)候不一定是只有一個(gè) children，也有可能壓根就沒有 children，此時(shí)直接顯示 parent 即可（參考 1.3 小節(jié)）。
下面的 el-submenu 則處理 children 有多個(gè)的情況（系統(tǒng)監(jiān)控）。
另外這里涉及到了一個(gè) resolvePath，也是特別關(guān)鍵的一個(gè)方法，我們來大致看下：
resolvePath(routePath, routeQuery) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
if (routeQuery) {
let query = JSON.parse(routeQuery);
return { path: path.resolve(this.basePath, routePath), query: query }
}
return path.resolve(this.basePath, routePath)
}
這個(gè)函數(shù)的主要左右，就是處理菜單的路徑問題。
我們來看下這個(gè)具體的判斷邏輯：
- 如果這個(gè)菜單的路徑是一個(gè)外鏈（判斷邏輯是查看這個(gè) path 是否有 http 或者 https 等前綴），即 isExternal 返回 true，就把這個(gè)路徑原封不動(dòng)返回。
- 如果這個(gè)菜單的父菜單的路徑是一個(gè)外鏈，則將父菜單的 path 原封不懂返回。
- 如果有查詢參數(shù)，就把參數(shù)加上。
- 最后通過 path.resolve 對(duì)路徑進(jìn)行一個(gè)簡單運(yùn)算。
有的小伙伴可能對(duì) path.resolve 不熟悉，我簡單說下：
path.resolve() 方法可以將多個(gè)路徑解析為一個(gè)規(guī)范化的絕對(duì)路徑，它的處理方式類似于對(duì)這些路徑逐一進(jìn)行 cd 操作，然而與 cd 操作不同的是，這些路徑可以是文件，并且可不必實(shí)際存在（resolve() 方法不會(huì)利用底層的文件系統(tǒng)判斷路徑是否存在，而只是進(jìn)行路徑字符串操作）。例如：
path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')
相當(dāng)于：
cd foo/bar cd /tmp/file/ cd .. cd a/../subfile pwd
舉個(gè)簡單的例子：
path.resolve('/foo/bar', './baz')
// 輸出結(jié)果為
'/foo/bar/baz'
path.resolve('/foo/bar', '/tmp/file/')
// 輸出結(jié)果為
'/tmp/file'
path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif')
// 當(dāng)前的工作路徑是 /home/javaboy/node，則輸出結(jié)果為
'/home/javaboy/node/wwwroot/static_files/gif/image.gif'
現(xiàn)在大家知道菜單跳轉(zhuǎn)的路徑是怎么來的了吧！
1.3 外鏈問題
在 TienChin 項(xiàng)目中，菜單還存在一個(gè)外鏈的問題。
這個(gè)外鏈有兩種不同的顯示思路：
- 點(diǎn)擊外鏈，直接打開一個(gè)新的選項(xiàng)卡，在新的選項(xiàng)卡中展示新的頁面。
- 點(diǎn)擊外鏈，在當(dāng)前項(xiàng)目中打開一個(gè)新的選項(xiàng)卡，選項(xiàng)卡中展示新的內(nèi)容。
對(duì)于第一種情況我就不和大家演示了，對(duì)于第二種情況，我截個(gè)圖給大家看下：
就是在當(dāng)前項(xiàng)目的選項(xiàng)卡中，展示一個(gè)外部鏈接的內(nèi)容。
我們先來看第一種情況。即點(diǎn)擊菜單之后，就在一個(gè)新的選項(xiàng)卡中打開網(wǎng)頁，這種菜單的 JSON 格式如下：
{
"name": "Http://www.javaboy.org",
"path": "http://www.javaboy.org",
"hidden": false,
"component": "Layout",
"meta": {
"title": "TienChin健身官網(wǎng)",
"icon": "guide",
"noCache": false,
"link": "http://www.javaboy.org"
}
}
這個(gè)大家看，也沒有 children，因?yàn)椴恍枰?，這個(gè)顯示的時(shí)候，就當(dāng)成了只有一個(gè) children 來處理，然后菜單項(xiàng)的 path 是一個(gè) http 路徑，一點(diǎn)擊，自然就跳到新的選項(xiàng)卡了。
對(duì)于第二種情況，即點(diǎn)擊外鏈，在當(dāng)前項(xiàng)目中打開一個(gè)新的選項(xiàng)卡，選項(xiàng)卡中展示鏈接的內(nèi)容，它的 JSON 結(jié)構(gòu)類似下面這樣：
{
"name": "Http://www.javaboy.org",
"path": "/",
"hidden": false,
"component": "Layout",
"meta": {
"title": "TienChin健身官網(wǎng)",
"icon": "guide",
"noCache": false,
"link": null
},
"children": [
{
"name": "Www.javaboy.org",
"path": "www.javaboy.org",
"hidden": false,
"component": "InnerLink",
"meta": {
"title": "TienChin健身官網(wǎng)",
"icon": "guide",
"noCache": false,
"link": "http://www.javaboy.org"
}
}
]
}
這個(gè)其實(shí)也沒啥好說的，類似于上面系統(tǒng)監(jiān)控的那種情況，但是只有一個(gè)子菜單，在菜單渲染的時(shí)候，也是只渲染一個(gè)子菜單。由于父子菜單的 path 都不是以 http 或者 https 之類的地址開頭，所以這個(gè)鏈接最終生成的 path 是 /www.javaboy.org，然后這個(gè)路徑的內(nèi)容將展示在 InnerLink 組件上，最終就是大家上圖中所看到的效果了。
好啦，這就是前端菜單的各種情況，后端菜單如何按照需要返回?cái)?shù)據(jù)，咱們繼續(xù)～
2. 菜單表
首先我們來看看菜單表的定義，也就是 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 '路由參數(shù)', `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 '菜單狀態(tài)（0顯示 1隱藏）', `status` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '菜單狀態(tài)（0正常 1停用）', `perms` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '權(quán)限標(biāo)識(shí)', `icon` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '#' COMMENT '菜單圖標(biāo)', `create_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '創(chuàng)建者', `create_time` datetime DEFAULT NULL COMMENT '創(chuàng)建時(shí)間', `update_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者', `update_time` datetime DEFAULT NULL COMMENT '更新時(shí)間', `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='菜單權(quán)限表';
其實(shí)這里很多字段都和我們 vhr 項(xiàng)目項(xiàng)目很相似，我也就不重復(fù)啰嗦了，我這里主要和小伙伴們說一個(gè)字段，那就是 menu_type。
menu_type 表示一個(gè)菜單字段的類型，一個(gè)菜單有三種類型，分別是目錄（M）、菜單（C）以及按鈕（F）。這里所說的目錄，相當(dāng)于我們?cè)?vhr 中所說的一級(jí)菜單，菜單相當(dāng)于我們?cè)?vhr 中所說的二級(jí)菜單。
當(dāng)用戶從前端登錄成功后，要去動(dòng)態(tài)加載的菜單的時(shí)候，就查詢 M 和 C 類型的數(shù)據(jù)即可，F(xiàn) 類型的數(shù)據(jù)不是菜單項(xiàng)，查詢的時(shí)候直接過濾掉即可，通過 menu_type 這個(gè)字段可以輕松的過濾掉 F 類型的數(shù)據(jù)。小伙伴們想想，F(xiàn) 類型的數(shù)據(jù)過濾掉之后，剩下的數(shù)據(jù)不就是一級(jí)菜單和二級(jí)菜單了，那不就和 vhr 又一樣了么！
在 vhr 中，考慮到菜單就是只有兩級(jí)：一級(jí)菜單和二級(jí)菜單，一級(jí)菜單是目錄，二級(jí)菜單是則是具體的菜單項(xiàng)，沒有三級(jí)菜單！所以在 vhr 中，查詢菜單的時(shí)候我直接用了一個(gè)一對(duì)多的查詢，將一級(jí)菜單做一的一方，二級(jí)菜單做多的一方，這樣比較省事。當(dāng)然靈活度差一點(diǎn)，所以在 TienChin 項(xiàng)目中，這塊還是用上了遞歸。
3. 前端菜單展示
接下來，前端菜單展示分為了幾種情況？這個(gè)前文中已經(jīng)和大家聊過了，這里不再贅述。
4. 菜單接口
當(dāng)用戶登錄成功之后，會(huì)自動(dòng)請(qǐng)求 /getRouters 接口來獲取菜單信息，我們一起來看下：
/**
* 獲取路由信息
*
* @return 路由信息
*/
@GetMapping("getRouters")
public AjaxResult getRouters() {
Long userId = SecurityUtils.getUserId();
List<SysMenu> menus = menuService.selectMenuTreeByUserId(userId);
return AjaxResult.success(menuService.buildMenus(menus));
}
這里的查詢實(shí)際上分為兩個(gè)步驟：
- 根據(jù)用戶 id 查詢到所有的菜單信息，這一步的查詢實(shí)際上是比較容易的，就單純的多張表聯(lián)合在一起，然后過濾出和當(dāng)前用戶相關(guān)并且菜單類型為 M 或者 C 的菜單（類型為 F 的表示按鈕，就不要了），查詢到菜單信息之后，然后進(jìn)行一個(gè)遞歸操作，將菜單數(shù)據(jù)的層級(jí)排列出來。
menuService.buildMenus這一步則是將菜單數(shù)據(jù)專為前端所需要的路由數(shù)據(jù)。
一共就這兩個(gè)步驟，我們來逐一進(jìn)行分析。
先來看查詢菜單數(shù)據(jù)。
/**
* 根據(jù)用戶ID查詢菜單
*
* @param userId 用戶名稱
* @return 菜單列表
*/
@Override
public List<SysMenu> selectMenuTreeByUserId(Long userId) {
List<SysMenu> menus = null;
if (SecurityUtils.isAdmin(userId)) {
menus = menuMapper.selectMenuTreeAll();
} else {
menus = menuMapper.selectMenuTreeByUserId(userId);
}
return getChildPerms(menus, 0);
}
/**
* 根據(jù)父節(jié)點(diǎn)的ID獲取所有子節(jié)點(diǎn)
*
* @param list 分類表
* @param parentId 傳入的父節(jié)點(diǎn)ID
* @return String
*/
public List<SysMenu> getChildPerms(List<SysMenu> list, int parentId) {
List<SysMenu> returnList = new ArrayList<SysMenu>();
for (Iterator<SysMenu> iterator = list.iterator(); iterator.hasNext(); ) {
SysMenu t = (SysMenu) iterator.next();
// 一、根據(jù)傳入的某個(gè)父節(jié)點(diǎn)ID,遍歷該父節(jié)點(diǎn)的所有子節(jié)點(diǎn)
if (t.getParentId() == parentId) {
recursionFn(list, t);
returnList.add(t);
}
}
return returnList;
}
/**
* 遞歸列表
*
* @param list
* @param t
*/
private void recursionFn(List<SysMenu> list, SysMenu t) {
// 得到子節(jié)點(diǎn)列表
List<SysMenu> childList = getChildList(list, t);
t.setChildren(childList);
for (SysMenu tChild : childList) {
if (hasChild(list, tChild)) {
recursionFn(list, tChild);
}
}
}
/**
* 得到子節(jié)點(diǎn)列表
*/
private List<SysMenu> getChildList(List<SysMenu> list, SysMenu t) {
List<SysMenu> tlist = new ArrayList<SysMenu>();
Iterator<SysMenu> it = list.iterator();
while (it.hasNext()) {
SysMenu n = (SysMenu) it.next();
if (n.getParentId().longValue() == t.getMenuId().longValue()) {
tlist.add(n);
}
}
return tlist;
}
/**
* 判斷是否有子節(jié)點(diǎn)
*/
private boolean hasChild(List<SysMenu> list, SysMenu t) {
return getChildList(list, t).size() > 0;
}
這里一共涉及到五個(gè)關(guān)鍵方法，我們來逐一進(jìn)行分析：
- selectMenuTreeByUserId：這個(gè)方法的執(zhí)行比較容易，如果當(dāng)前用戶是管理員，那就不用加過濾條件了，直接查詢出所有的類型為 M 和 C 的菜單項(xiàng)即可。
- getChildPerms：這個(gè)方法主要是將前面查詢出來的菜單數(shù)據(jù)進(jìn)行重組，本來都是一個(gè)集合中的數(shù)據(jù)，現(xiàn)在在該方法中處理成樹狀，處理的核心邏輯就是調(diào)用 recursionFn 方法將之進(jìn)行遞歸。
- recursionFn：這是最為關(guān)鍵的遞歸方法了，首先調(diào)用 getChildList 獲取當(dāng)前菜單項(xiàng)的 children，然后將獲取到的 children 設(shè)置給當(dāng)前菜單項(xiàng)，最后還要遍歷獲取到的 children，如果這個(gè) children 也是有子菜單的，則繼續(xù)調(diào)用 recursionFn 方法進(jìn)行處理。
- getChildList：這個(gè)是查詢某一個(gè)菜單的子菜單，這個(gè)很容易，如果某一個(gè)菜單的 parentId 是當(dāng)前菜單的 id，那么這個(gè)菜單就是當(dāng)前菜單的子菜單。
- hasChild：這個(gè)是判斷給定的菜單是否有子菜單，這個(gè)邏輯就比較簡單了。
好啦，這個(gè)就是整個(gè)的查詢邏輯，整體上來說是比較容易的，就是查詢 M 和 C 類型的菜單，然后再做一個(gè)遞歸操作，將菜單數(shù)據(jù)變成一個(gè)樹狀數(shù)據(jù)。
但是因?yàn)?SysMenu 和前后端所需要的路由數(shù)據(jù)的字段名稱對(duì)不上，并且格式參數(shù)等都不符合前端的要求，所以還需要再做一個(gè)轉(zhuǎn)換，這就是 menuService.buildMenus 所做的事情了，在分析 menuService.buildMenus 方法之前，再來捋一捋菜單的四種情況，我們先來回顧下四種菜單格式：
[{
"name": "Monitor",
"path": "/monitor",
"hidden": false,
"redirect": "noRedirect",
"component": "Layout",
"alwaysShow": true,
"meta": {
"title": "系統(tǒng)監(jiān)控",
"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": "定時(shí)任務(wù)",
"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": "http://www.javaboy.org",
"hidden": false,
"component": "Layout",
"meta": {
"title": "TienChin健身官網(wǎng)",
"icon": "guide",
"noCache": false,
"link": "http://www.javaboy.org"
}
},{
"name": "Http://www.javaboy.org",
"path": "/",
"hidden": false,
"component": "Layout",
"meta": {
"title": "TienChin健身官網(wǎng)",
"icon": "guide",
"noCache": false,
"link": null
},
"children": [
{
"name": "Www.javaboy.org",
"path": "www.javaboy.org",
"hidden": false,
"component": "InnerLink",
"meta": {
"title": "TienChin健身官網(wǎng)",
"icon": "guide",
"noCache": false,
"link": "http://www.javaboy.org"
}
}
]
}]
這四種菜單 JSON，從上往下顯示效果依次是：
- 一級(jí)菜單中有二級(jí)菜單，一級(jí)菜單不可點(diǎn)擊，二級(jí)菜單點(diǎn)擊后在右邊打開相應(yīng)的頁面。
- 只有一個(gè)一級(jí)菜單，點(diǎn)擊之后，右邊打開相應(yīng)的頁面。
- 一個(gè)外鏈（只有一級(jí)菜單），點(diǎn)擊之后，在新的選項(xiàng)卡中打開新的頁面。
- 一個(gè)外鏈（只有一級(jí)菜單），點(diǎn)擊之后，在當(dāng)前系統(tǒng)中打開新的頁面（第三方頁面通過 iframe 標(biāo)簽出現(xiàn)在當(dāng)前系統(tǒng)中）。
牢記這四種不同的菜單情況，再來看 buildMenus 方法，就會(huì)容易很多了（下文我說菜單 1、2、3、4 分別對(duì)應(yīng)上面的四種情況）：
/**
* 構(gòu)建前端路由所需要的菜單
*
* @param menus 菜單列表
* @return 路由列表
*/
@Override
public List<RouterVo> buildMenus(List<SysMenu> menus) {
List<RouterVo> routers = new LinkedList<RouterVo>();
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<SysMenu> 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<RouterVo> childrenList = new ArrayList<RouterVo>();
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<RouterVo> childrenList = new ArrayList<RouterVo>();
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;
}
這個(gè)方法一個(gè)核心思想就是格式轉(zhuǎn)換，其他的都沒啥，不過看似簡單的邏輯里邊，其實(shí)也隱藏了很多實(shí)現(xiàn)細(xì)節(jié)。
這個(gè)方法細(xì)看的話，會(huì)有很多地方感覺比較繞。但是，小伙伴們仔細(xì)回顧一下在該文章中，松哥將前端展示出來的菜單分為了四種情況，根據(jù)那四種顯示的情況，再來看這里的數(shù)據(jù)組裝邏輯，就很好懂了。
首先我們來看 router 基本屬性的設(shè)置：
- 首先是可見性 hidden，這個(gè)沒啥好說的。
- 接下來是菜單的 name 屬性，name 屬性分為了兩種情況：路由的 name 屬性是菜單表中的 path 字段值且首字母大寫（菜單 1、3、4）；如果在一級(jí)菜單中，出現(xiàn)了一個(gè)菜單 C（本來這一級(jí)別只有 M），并且還不是外鏈，那么就設(shè)置菜單的 name 為空字符串（相當(dāng)于此時(shí)不需要 name 屬性了，對(duì)應(yīng)菜單 2 的情況）。
- 接下來是路由的 path，設(shè)置 path 的時(shí)候也分好種情況，松哥對(duì)照著代碼來和大家說一下：
/**
* 獲取路由地址
*
* @param menu 菜單信息
* @return 路由地址
*/
public String getRouterPath(SysMenu menu) {
String routerPath = menu.getPath();
// 內(nèi)鏈打開外網(wǎng)方式
if (menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
routerPath = innerLinkReplaceEach(routerPath);
}
// 非外鏈并且是一級(jí)目錄（類型為目錄）
if (0 == menu.getParentId().intValue() && UserConstants.TYPE_DIR.equals(menu.getMenuType())
&& UserConstants.NO_FRAME.equals(menu.getIsFrame())) {
routerPath = "/" + menu.getPath();
}
// 非外鏈并且是一級(jí)目錄（類型為菜單）
else if (isMenuFrame(menu)) {
routerPath = "/";
}
return routerPath;
}
a. 首先獲取從數(shù)據(jù)庫中查詢到的 path 屬性。 b. 如果當(dāng)前組件不是一級(jí)菜單，并且是在內(nèi)部組件中展示，那么除去這個(gè) path 里邊的 http 或者 https（對(duì)應(yīng)菜單 4 的 children 的情況）。 c. 如果當(dāng)前組件是一級(jí)菜單并且是 M 型并且不是外鏈，那么就在原有的 path 上加上 / 前綴（對(duì)應(yīng)菜單 1 的一級(jí)菜單的 path 情況）。 d. 如果當(dāng)前組件是一級(jí)菜單，且是 C 型菜單，那么設(shè)置 path 為 /（對(duì)應(yīng)菜單 2、4 中一級(jí)菜單的 path 情況）。 e. 其他情況，菜單都是從數(shù)據(jù)庫查到什么返回什么。
- 接下來是設(shè)置前端 component，這個(gè)菜單項(xiàng)用哪個(gè) 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. 首先默認(rèn)的組件是 Layout（菜單1、2、3、4 的一級(jí)菜單）。 b. 如果配置的時(shí)候就有 component，并且當(dāng)前菜單項(xiàng)也不是外鏈，那么就使用配置的 component（菜單 1、2 的子菜單情況）。 c. 如果不是一級(jí)菜單（是一個(gè)子菜單），并且是一個(gè)在當(dāng)前系統(tǒng)展示的外鏈，那么就使用 InnerLink 這個(gè)組件（這個(gè)組件中有一個(gè) iframe 標(biāo)簽可以把外鏈展示出來，如菜單 4 的子菜單情況）。 d. 如果配置的時(shí)候沒有設(shè)置組件并且菜單類型是 M（二級(jí)菜單中還有三級(jí)菜單的情況），那么就設(shè)置顯示組件為 ParentView。
component 就分為這幾種情況。
- 接下來就是 query 和 meta 這兩個(gè)參數(shù)就沒啥好說的。
接下來就是三個(gè)分支的情況了。
- 首先第一個(gè) if，處理的就是常規(guī)情況，一級(jí)菜單中有二級(jí)菜單的情況（對(duì)應(yīng)菜單 1 的一級(jí)菜單情況）。
- 第二個(gè)分支處理一級(jí) C 型菜單是非外鏈的情況（對(duì)應(yīng)菜單 2 的情況），此時(shí)自動(dòng)給該菜單項(xiàng)加上一個(gè) children。
- 第三個(gè)分支是處理一級(jí) M 型菜單是外鏈的情況（對(duì)應(yīng)菜單 4 的情況），此時(shí)自動(dòng)給該菜單加上一個(gè) children。
- 如果三個(gè)分支都不進(jìn)去，實(shí)際上就是菜單 3 的情況了。
好啦，這就是菜單接口分析的全部內(nèi)容了，有點(diǎn)繞
更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
更多關(guān)于Vue 多級(jí)菜單設(shè)計(jì)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了?面試問題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了vue-router子路由的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
使用el-form-item設(shè)置標(biāo)簽長度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了解決vue scoped scss 無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue.js數(shù)據(jù)綁定操作,結(jié)合實(shí)例形式詳細(xì)分析了vue.js數(shù)據(jù)綁定的各種常見操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-04-04
淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
vue中watch的實(shí)際開發(fā)學(xué)習(xí)筆記
watch是Vue實(shí)例的一個(gè)屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),這個(gè)方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實(shí)際開發(fā)筆記,需要的朋友可以參考下2022-11-11
Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖，引入組件設(shè)置寬高100%，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue項(xiàng)目結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能(實(shí)例代碼)
這篇文章主要介紹了Vue項(xiàng)目中結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03