日韩一二三区成人电影一区伦,高清无码波多野结衣一二三区,不卡欧美在线欧美性爱小说

新聞中心

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

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

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

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

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

1. 菜單表

首先我們來(lái)看看菜單表的定義，也就是 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)目中，這塊還是用上了遞歸。

2. 前端菜單展示

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

3. 菜單接口

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

/**
 * 獲取路由信息
 *
 * @return 路由信息
 */
@GetMapping("getRouters")
public AjaxResult getRouters() {
    Long userId = SecurityUtils.getUserId();
    List 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í)排列出來(lái)。
menuService.buildMenus 這一步則是將菜單數(shù)據(jù)專為前端所需要的路由數(shù)據(jù)。

一共就這兩個(gè)步驟，我們來(lái)逐一進(jìn)行分析。

先來(lái)看查詢菜單數(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é)點(diǎn)的ID獲取所有子節(jié)點(diǎn)
 *
 * @param list     分類表
 * @param parentId 傳入的父節(jié)點(diǎn)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ù)傳入的某個(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 list, SysMenu t) {
    // 得到子節(jié)點(diǎn)列表
    List childList = getChildList(list, t);
    t.setChildren(childList);
    for (SysMenu tChild : childList) {
        if (hasChild(list, tChild)) {
            recursionFn(list, tChild);
        }
    }
}
/**
 * 得到子節(jié)點(diǎn)列表
 */
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é)點(diǎn)
 */
private boolean hasChild(List list, SysMenu t) {
    return getChildList(list, t).size() > 0;
}

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

selectMenuTreeByUserId：這個(gè)方法的執(zhí)行比較容易，如果當(dāng)前用戶是管理員，那就不用加過濾條件了，直接查詢出所有的類型為 M 和 C 的菜單項(xiàng)即可。
getChildPerms：這個(gè)方法主要是將前面查詢出來(lái)的菜單數(shù)據(jù)進(jìn)行重組，本來(lái)都是一個(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è)邏輯就比較簡(jiǎn)單了。

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

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

[{
 "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)的頁(yè)面。
只有一個(gè)一級(jí)菜單，點(diǎn)擊之后，右邊打開相應(yīng)的頁(yè)面。
一個(gè)外鏈（只有一級(jí)菜單），點(diǎn)擊之后，在新的選項(xiàng)卡中打開新的頁(yè)面。
一個(gè)外鏈（只有一級(jí)菜單），點(diǎn)擊之后，在當(dāng)前系統(tǒng)中打開新的頁(yè)面（第三方頁(yè)面通過 iframe 標(biāo)簽出現(xiàn)在當(dāng)前系統(tǒng)中）。

牢記這四種不同的菜單情況，再來(lái)看 buildMenus 方法，就會(huì)容易很多了（下文我說菜單 1、2、3、4 分別對(duì)應(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;
}

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

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

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

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

/**
 * 獲取路由地址
 *
 * @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 項(xiàng)目動(dòng)態(tài)菜單接口分析                                                

                                                URL鏈接：http://www.5511xx.com/article/cdceese.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

新聞中心

1. 菜單表

2. 前端菜單展示

3. 菜單接口

其他資訊