第SpringBoot+Vue實現(xiàn)動態(tài)菜單的思路梳理目錄1.整體思路2.前端渲染3.后端菜單生成3.1菜單表3.2菜單接口關(guān)于SpringBoot+Vue3的動態(tài)菜單，松哥之前已經(jīng)寫了兩篇文章了，這兩篇文章主要是從代碼上和大家分析動態(tài)菜單最終的實現(xiàn)方式，但是還是有小伙伴覺得沒太看明白，感覺缺乏一個提綱挈領(lǐng)的思路，所以，今天松哥再整一篇文章和大家再來捋一捋這個問題，希望這篇文章能讓小伙伴們徹底搞清楚這個問題。

1.整體思路

首先我們來看整體思路。

光說思路大家還是云里霧里，我們結(jié)合具體的效果圖來看：

最終菜單顯示效果類似上圖，我把這里的菜單分為了四類：

1.有父有子：像系統(tǒng)管理那種，既有父菜單，又有子菜單。

2.只有一個一級菜單，這種又細分為三種情況：

普通的菜單，點擊之后在右邊主頁面打開某個功能頁面。一個超鏈接，但不是外鏈，是一個在當(dāng)前系統(tǒng)中打開的外部網(wǎng)頁，點擊之后，會在右邊的主頁面中新開一個選項卡，這個選項卡中顯示的是一個外部網(wǎng)頁（本質(zhì)上是通過iframe標(biāo)簽引入的一個外部網(wǎng)頁）。一個超鏈接，并且還是一個外鏈，點擊之后，直接在瀏覽器中打開一個新的選項卡，新的選項卡中展示一個外部鏈接。

整體上來說，就分為這四種情況。其中1、2.1、2.3應(yīng)該都好理解，2.2有的小伙伴可能不清楚，我給大家截個圖看下就知道了：

四種菜單對應(yīng)的JSON格式分別如下：

1.有父有子：

{

"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

2.只有一個一級菜單，且一級菜單點擊后是一個功能頁面：

{

"path":

"/",

"hidden":

false,

"component":

"Layout",

"children":

[{

"name":

"Role",

"path":

"role",

"hidden":

false,

"component":

"system/role/index",

"meta":

{

"title":

"角色管理",

"icon":

"peoples",

"noCache":

false,

"link":

null

3.只有一個一級菜單，且一級菜單點擊之后在當(dāng)前系統(tǒng)中一個新的選項卡里打開一個網(wǎng)頁：

{

"name":

"Http://",

"path":

"/",

"hidden":

false,

"component":

"Layout",

"meta":

{

"title":

"TienChin健身官網(wǎng)",

"icon":

"guide",

"noCache":

false,

"link":

null

},

"children":

[

{

"name":

"W",

"path":

"",

"hidden":

false,

"component":

"InnerLink",

"meta":

{

"title":

"TienChin健身官網(wǎng)",

"icon":

"guide",

"noCache":

false,

"link":

""

}

}

]

4.只有一個一級菜單，且一級菜單點擊之后在瀏覽器打開一個新的選項卡：

{

"name":

"Http://",

"path":

"",

"hidden":

false,

"component":

"Layout",

"meta":

{

"title":

"TienChin健身官網(wǎng)",

"icon":

"guide",

"noCache":

false,

"link":

""

}

根據(jù)以上四種不同的JSON，我們總結(jié)出以下規(guī)律：

父組件都是Layout，這里的Layout就相當(dāng)于我們vhr中的Home組件，也就是整個頁面的框架。如果想在當(dāng)前系統(tǒng)中，新開選項卡打開一個功能項，那么這個菜單項必然有children，即使children中只有一項菜單。如果菜單項是一個外鏈，那么這個菜單項就不需要有children了。某種程度上，我們其實可以將2、3歸為一類，畢竟3只是展示內(nèi)容的組件固定為InnerLink，2則視情況而定。整體上，可以點擊的菜單的path都是父菜單的path+子菜單的path，如果菜單項有父有子，那就正常拼接就行了；如果只有一個子菜單，那么父菜單的path就是/；如果是一個外鏈，那就只有父菜單的path了。

好了，這就是動態(tài)菜單的整體設(shè)計。

2.前端渲染

接下來我們再來看一看前端的菜單渲染，前端的動態(tài)菜單渲染位于tienchin-ui/src/layout/components/Sidebar/SidebarItem.vue文件中：

template

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

}"

svg-icon

:icon-/

template

#titlespan

:title="hasTitle(onlyOneChild.meta.title)"{{

onlyOneChild.meta.title

}}/span/template

/el-menu-item

/app-link

/template

el-sub-menu

v-else

ref="subMenu"

:index="resolvePath(item.path)"

popper-append-to-body

template

v-if="item.meta"

#title

svg-icon

:icon-/

span

:title="hasTitle(item.meta.title)"{{

item.meta.title

}}/span

/template

sidebar-item

v-for="child

in

item.children"

:key="child.path"

:is-nest="true"

:item="child"

:base-path="resolvePath(child.path)"

/

/el-sub-menu

/div

/template

這里涉及到幾個方法，具體的方法細節(jié)我就不貼出來了，主要和大家說下實現(xiàn)思路。

先看整體上，這個菜單要是非隱藏的，隱藏的菜單，那么直接一級菜單及其下的子菜單就都不渲染了。渲染整體上分兩塊，上面的template主要是渲染只有一個子菜單的情況，也就是第一小節(jié)的2、3、4三種情況，下面的渲染正常的有父有子的情況，也就是第一小節(jié)的菜單1。hasOneShowingChild主要是判斷這個菜單項是否只有一個需要渲染的子菜單，如果有多個子菜單，但是大部分都是隱藏，只有一個需要渲染出來，那也算只有一個子菜單，如果一個菜單項都沒有子菜單，那也算一個子菜單，只不過這個子菜單就是他自身，對應(yīng)第一小節(jié)第4種情況。在判斷的過程中，將唯一需要渲染的菜單的數(shù)據(jù)賦值給onlyOneChild變量，那么最終，如果當(dāng)前菜單項只有一個子菜單，且這個子菜單沒有子菜單（或者有子菜單但是子菜單不用顯示），并且當(dāng)前菜單也不是必須要渲染的，那就將onlyOneChild的數(shù)據(jù)渲染出來。對于普通的有父有子的情況，渲染的時候，通過el-sub-menu標(biāo)簽進行渲染，但是注意子項是sidebar-item，sidebar-item其實就是當(dāng)前項！換言之，這里的渲染其實還用到了遞歸（直到?jīng)]有children的時候結(jié)束），這樣即便菜單有三級四級五級等等，只要不嫌難看，都是可以渲染出來的。

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

'路由參數(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項目中，這塊還是用上了遞歸。

3.2菜單接口

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

/**

*

獲取路由信息

*

@return

路由信息

@GetMapping("getRouters")

public

AjaxResult

getRouters()

{

Long

userId

=

SecurityUtils.getUserId();

ListSysMenu

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

ListSysMenu

selectMenuTreeByUserId(Long

userId)

{

ListSysMenu

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

ListSysMenu

getChildPerms(ListSysMenu

list,

int

parentId)

{

ListSysMenu

returnList

=

new

ArrayListSysMenu

for

(IteratorSysMenu

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(ListSysMenu

list,

SysMenu

t)

{

//

得到子節(jié)點列表

ListSysMenu

childList

=

getChildList(list,

t);

t.setChildren(childList);

for

(SysMenu

tChild

:

childList)

{

if

(hasChild(list,

tChild))

{

recursionFn(list,

tChild);

}

}

*

得到子節(jié)點列表

private

ListSysMenu

getChildList(ListSysMenu

list,

SysMenu

t)

{

ListSysMenu

tlist

=

new

ArrayListSysMenu

IteratorSysMenu

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(ListSysMenu

list,

SysMenu

t)

{

return

getChildList(list,

t).size()

這里一共涉及到五個關(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所做的事情了：

/**

*

構(gòu)建前端路由所需要的菜單

*

@param

menus

菜單列表

*

@return

路由列表

@Override

public

ListRouterVo

buildMenus(ListSysMenu

menus)

{

ListRouterVo

routers

=

new

LinkedListRouterVo

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()));

ListSysMenu

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);

ListRouterVo

childrenList

=

new

ArrayListRouterVo

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("/");

ListRouterVo

childrenList

=

new

ArrayListRouterVo

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;

從這個方法的執(zhí)行邏輯上我們可以看到，這里的菜單數(shù)據(jù)一共分為了四種情況，其實剛好就和我們第一小節(jié)所介紹的情況相對應(yīng)。

整體上來看，分支語句外面設(shè)置了組件的最基本的屬性。三個分支語句：

第一個分支，處理普通的有父有子的情況。第二個分支，處理第一小節(jié)第二種情況。第三個分支，處理第一小節(jié)第三種情況。如果三個分支都沒進去，那就是第一小節(jié)的第四種情況，以及各個子菜單的情況了。

好了，基于這樣大的思路，再來看各個屬性的具體設(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);

}

//

非外鏈并且是一級目錄（類型為目錄）

if

(0

==

menu.getParentId().intValue()

UserConstants.TYPE_DIR.equals(menu.getMenuType())

UserConstants.NO_FRAME.equals(menu.getIsFrame()))

{

r