SpringBoot+Vue實(shí)現(xiàn)動(dòng)態(tài)菜單的思路梳理

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

1.整體思路

首先我們來(lái)看整體思路。

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

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

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

2.只有一個(gè)一級(jí)菜單，這種又細(xì)分為三種情況：

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

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

四種菜單對(duì)應(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":

"定時(shí)任務(wù)",

"icon":

"job",

"noCache":

false,

"link":

null

2.只有一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊后是一個(gè)功能頁(yè)面：

{

"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.只有一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊之后在當(dāng)前系統(tǒng)中一個(gè)新的選項(xiàng)卡里打開一個(gè)網(wǎng)頁(yè)：

{

"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.只有一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊之后在瀏覽器打開一個(gè)新的選項(xiàng)卡：

{

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

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

2.前端渲染

接下來(lái)我們?cè)賮?lái)看一看前端的菜單渲染，前端的動(dòng)態(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

這里涉及到幾個(gè)方法，具體的方法細(xì)節(jié)我就不貼出來(lái)了，主要和大家說(shuō)下實(shí)現(xiàn)思路。

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

3.后端菜單生成

3.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ù)啰嗦了，我這里主要和小伙伴們說(shuō)一個(gè)字段，那就是menu_type。

menu_type表示一個(gè)菜單字段的類型，一個(gè)菜單有三種類型，分別是目錄（M）、菜單（C）以及按鈕（F）。這里所說(shuō)的目錄，相當(dāng)于我們?cè)趘hr中所說(shuō)的一級(jí)菜單，菜單相當(dāng)于我們?cè)趘hr中所說(shuō)的二級(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.2菜單接口

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

/**

*

獲取路由信息

*

@return

路由信息

@GetMapping("getRouters")

public

AjaxResult

getRouters()

{

Long

userId

=

SecurityUtils.getUserId();

ListSysMenu

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

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é)點(diǎn)的ID獲取所有子節(jié)點(diǎn)

*

@param

list

分類表

*

@param

parentId

傳入的父節(jié)點(diǎn)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ù)傳入的某個(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(ListSysMenu

list,

SysMenu

t)

{

//

得到子節(jié)點(diǎn)列表

ListSysMenu

childList

=

getChildList(list,

t);

t.setChildren(childList);

for

(SysMenu

tChild

:

childList)

{

if

(hasChild(list,

tChild))

{

recursionFn(list,

tChild);

}

}

*

得到子節(jié)點(diǎn)列表

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é)點(diǎn)

private

boolean

hasChild(ListSysMenu

list,

SysMenu

t)

{

return

getChildList(list,

t).size()

這里一共涉及到五個(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)說(shuō)是比較容易的，就是查詢M和C類型的菜單，然后再做一個(gè)遞歸操作，將菜單數(shù)據(jù)變成一個(gè)樹狀數(shù)據(jù)。

但是因?yàn)镾ysMenu和前后端所需要的路由數(shù)據(jù)的字段名稱對(duì)不上，并且格式參數(shù)等都不符合前端的要求，所以還需要再做一個(gè)轉(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;

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

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

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

好了，基于這樣大的思路，再來(lái)看各個(gè)屬性的具體設(shè)置，就很容易了。

首先是可見性hidden，這個(gè)沒啥好說(shuō)的。接下來(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)和大家說(shuō)一下：

/**

*

獲取路由地址

*

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

{

r