大主宰之灵路天蚕土豆,国际完美世界下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

TienChin 項目動態(tài)菜單接口分析

本文一定要結(jié)合??Vue 里，多級菜單要如何設(shè)計才顯得專業(yè)？??一文一起食用效果良好，否則可能會看不懂。

做過 vhr 的小伙伴應(yīng)該都知道動態(tài)菜單是咋回事，就是不同權(quán)限的用戶登錄成功之后，可以看到不同的菜單項，這在前后端不分的項目中，其實是很好實現(xiàn)的，然而在前后端分離項目中，實現(xiàn)起來略微有一些麻煩，不過不管怎么說，想要實現(xiàn)，總是有辦法的，并且辦法還不止一個！今天松哥就來和大家聊一聊 TienChin 項目中動態(tài)菜單的實現(xiàn)方案，一起來學(xué)習(xí)一個不同于 vhr 的動態(tài)菜單實現(xiàn)思路。

TienChin 項目基于 RuoYi-Vue 腳手架，所以接下來的分析也是在說 RuoYi-Vue 這個腳手架中動態(tài)菜單的實現(xiàn)方案。

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 '路由參數(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)識',
  `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)建時間',
  `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='菜單權(quán)限表';

其實這里很多字段都和我們 vhr 項目項目很相似，我也就不重復(fù)啰嗦了，我這里主要和小伙伴們說一個字段，那就是 menu_type。

menu_type 表示一個菜單字段的類型，一個菜單有三種類型，分別是目錄（M）、菜單（C）以及按鈕（F）。這里所說的目錄，相當(dāng)于我們在 vhr 中所說的一級菜單，菜單相當(dāng)于我們在 vhr 中所說的二級菜單。

當(dāng)用戶從前端登錄成功后，要去動態(tài)加載的菜單的時候，就查詢 M 和 C 類型的數(shù)據(jù)即可，F(xiàn) 類型的數(shù)據(jù)不是菜單項，查詢的時候直接過濾掉即可，通過 menu_type 這個字段可以輕松的過濾掉 F 類型的數(shù)據(jù)。小伙伴們想想，F(xiàn) 類型的數(shù)據(jù)過濾掉之后，剩下的數(shù)據(jù)不就是一級菜單和二級菜單了，那不就和 vhr 又一樣了么！

在 vhr 中，考慮到菜單就是只有兩級：一級菜單和二級菜單，一級菜單是目錄，二級菜單是則是具體的菜單項，沒有三級菜單！所以在 vhr 中，查詢菜單的時候我直接用了一個一對多的查詢，將一級菜單做一的一方，二級菜單做多的一方，這樣比較省事。當(dāng)然靈活度差一點，所以在 TienChin 項目中，這塊還是用上了遞歸。

2. 前端菜單展示

接下來，前端菜單展示分為了幾種情況？這個松哥在之前的文章中已經(jīng)和大家聊過了，具體可以參考Vue 里，多級菜單要如何設(shè)計才顯得專業(yè)？一文，這里不再贅述。

3. 菜單接口

當(dāng)用戶登錄成功之后，會自動請求 /getRouters 接口來獲取菜單信息，我們一起來看下：

/**
 * 獲取路由信息
 *
 * @return 路由信息
 */
@GetMapping("getRouters")
public AjaxResult getRouters() {
    Long userId = SecurityUtils.getUserId();
    List menus = menuService.selectMenuTreeByUserId(userId);
    return AjaxResult.success(menuService.buildMenus(menus));
}

這里的查詢實際上分為兩個步驟：

根據(jù)用戶 id 查詢到所有的菜單信息，這一步的查詢實際上是比較容易的，就單純的多張表聯(lián)合在一起，然后過濾出和當(dāng)前用戶相關(guān)并且菜單類型為 M 或者 C 的菜單（類型為 F 的表示按鈕，就不要了），查詢到菜單信息之后，然后進行一個遞歸操作，將菜單數(shù)據(jù)的層級排列出來。
menuService.buildMenus 這一步則是將菜單數(shù)據(jù)專為前端所需要的路由數(shù)據(jù)。

一共就這兩個步驟，我們來逐一進行分析。

先來看查詢菜單數(shù)據(jù)。

/**
 * 根據(jù)用戶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);
}
/**
 * 根據(jù)父節(jié)點的ID獲取所有子節(jié)點
 *
 * @param list     分類表
 * @param parentId 傳入的父節(jié)點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();
        // 一、根據(jù)傳入的某個父節(jié)點ID,遍歷該父節(jié)點的所有子節(jié)點
        if (t.getParentId() == parentId) {
            recursionFn(list, t);
            returnList.add(t);
        }
    }
    return returnList;
}
/**
 * 遞歸列表
 *
 * @param list
 * @param t
 */
private void recursionFn(List list, SysMenu t) {
    // 得到子節(jié)點列表
    List childList = getChildList(list, t);
    t.setChildren(childList);
    for (SysMenu tChild : childList) {
        if (hasChild(list, tChild)) {
            recursionFn(list, tChild);
        }
    }
}
/**
 * 得到子節(jié)點列表
 */
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;
}
/**
 * 判斷是否有子節(jié)點
 */
private boolean hasChild(List list, SysMenu t) {
    return getChildList(list, t).size() > 0;
}

這里一共涉及到五個關(guān)鍵方法，我們來逐一進行分析：

selectMenuTreeByUserId：這個方法的執(zhí)行比較容易，如果當(dāng)前用戶是管理員，那就不用加過濾條件了，直接查詢出所有的類型為 M 和 C 的菜單項即可。
getChildPerms：這個方法主要是將前面查詢出來的菜單數(shù)據(jù)進行重組，本來都是一個集合中的數(shù)據(jù)，現(xiàn)在在該方法中處理成樹狀，處理的核心邏輯就是調(diào)用 recursionFn 方法將之進行遞歸。
recursionFn：這是最為關(guān)鍵的遞歸方法了，首先調(diào)用 getChildList 獲取當(dāng)前菜單項的 children，然后將獲取到的 children 設(shè)置給當(dāng)前菜單項，最后還要遍歷獲取到的 children，如果這個 children 也是有子菜單的，則繼續(xù)調(diào)用 recursionFn 方法進行處理。
getChildList：這個是查詢某一個菜單的子菜單，這個很容易，如果某一個菜單的 parentId 是當(dāng)前菜單的 id，那么這個菜單就是當(dāng)前菜單的子菜單。
hasChild：這個是判斷給定的菜單是否有子菜單，這個邏輯就比較簡單了。

好啦，這個就是整個的查詢邏輯，整體上來說是比較容易的，就是查詢 M 和 C 類型的菜單，然后再做一個遞歸操作，將菜單數(shù)據(jù)變成一個樹狀數(shù)據(jù)。

但是因為 SysMenu 和前后端所需要的路由數(shù)據(jù)的字段名稱對不上，并且格式參數(shù)等都不符合前端的要求，所以還需要再做一個轉(zhuǎn)換，這就是 menuService.buildMenus? 所做的事情了，在分析 menuService.buildMenus? 方法之前，我覺得大家有必要先來回顧一下Vue 里，多級菜單要如何設(shè)計才顯得專業(yè)？一文，再來捋一捋菜單的四種情況，我們先來回顧下四種菜單格式：

[{
 "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": "定時任務(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，從上往下顯示效果依次是：

一級菜單中有二級菜單，一級菜單不可點擊，二級菜單點擊后在右邊打開相應(yīng)的頁面。
只有一個一級菜單，點擊之后，右邊打開相應(yīng)的頁面。
一個外鏈（只有一級菜單），點擊之后，在新的選項卡中打開新的頁面。
一個外鏈（只有一級菜單），點擊之后，在當(dāng)前系統(tǒng)中打開新的頁面（第三方頁面通過 iframe 標(biāo)簽出現(xiàn)在當(dāng)前系統(tǒng)中）。

牢記這四種不同的菜單情況，再來看 buildMenus 方法，就會容易很多了（下文我說菜單 1、2、3、4 分別對應(yīng)上面的四種情況）：

/**
 * 構(gòu)建前端路由所需要的菜單
 *
 * @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;
}

這個方法一個核心思想就是格式轉(zhuǎn)換，其他的都沒啥，不過看似簡單的邏輯里邊，其實也隱藏了很多實現(xiàn)細節(jié)。

這個方法細看的話，會有很多地方感覺比較繞。但是，小伙伴們仔細回顧一下Vue 里，多級菜單要如何設(shè)計才顯得專業(yè)？一文，在該文章中，松哥將前端展示出來的菜單分為了四種情況，根據(jù)那四種顯示的情況，再來看這里的數(shù)據(jù)組裝邏輯，就很好懂了。

首先我們來看 router 基本屬性的設(shè)置：

首先是可見性 hidden，這個沒啥好說的。
接下來是菜單的 name 屬性，name 屬性分為了兩種情況：路由的 name 屬性是菜單表中的 path 字段值且首字母大寫（菜單 1、3、4）；如果在一級菜單中，出現(xiàn)了一個菜單 C（本來這一級別只有 M），并且還不是外鏈，那么就設(shè)置菜單的 name 為空字符串（相當(dāng)于此時不需要 name 屬性了，對應(yīng)菜單 2 的情況）。
接下來是路由的 path，設(shè)置 path 的時候也分好種情況，松哥對照著代碼來和大家說一下：

/**
 * 獲取路由地址
 *
 * @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)<                                                

                                                本文題目：TienChin 項目動態(tài)菜單接口分析                                                

                                                網(wǎng)站地址：http://fisionsoft.com.cn/article/cdceese.html

新聞中心

1. 菜單表

2. 前端菜單展示

3. 菜單接口

其他資訊