某課java全棧工程師：從java后端到全棧高級(jí)電商全棧系統(tǒng)大課

download：java全棧工程師：從java后端到全棧，高級(jí)電商全棧系統(tǒng)大課SpringBoot+Vue3動(dòng)態(tài)菜單完成思緒梳理關(guān)于SpringBoot+Vue3的動(dòng)態(tài)菜單，松哥之前曾經(jīng)寫了兩篇文章了，這兩篇文章主要是從代碼上和大家剖析動(dòng)態(tài)菜單最終的完成方式，但是還是有小同伴覺得沒太看明白，覺得缺乏一個(gè)大綱挈領(lǐng)的思緒，所以，今天松哥再整一篇文章和大家再來捋一捋這個(gè)問題，希望這篇文章能讓小同伴們徹底搞分明這個(gè)問題。1.整體思緒首先我們來看整體思緒。有父有子：像系統(tǒng)管理那種，既有父菜單，又有子菜單。只要一個(gè)一級(jí)菜單，這種又細(xì)分為三種狀況：普通的菜單，點(diǎn)擊之后在右邊主頁面翻開某個(gè)功用頁面。一個(gè)超鏈接，但不是外鏈，是一個(gè)在當(dāng)前系統(tǒng)中翻開的外部網(wǎng)頁，點(diǎn)擊之后，會(huì)在右邊的主頁面中新開一個(gè)選項(xiàng)卡，這個(gè)選項(xiàng)卡中顯現(xiàn)的是一個(gè)外部網(wǎng)頁（實(shí)質(zhì)上是經(jīng)過iframe標(biāo)簽引入的一個(gè)外部網(wǎng)頁）。一個(gè)超鏈接，并且還是一個(gè)外鏈，點(diǎn)擊之后，直接在閱讀器中翻開一個(gè)新的選項(xiàng)卡，新的選項(xiàng)卡中展現(xiàn)一個(gè)外部鏈接。四種菜單對(duì)應(yīng)的JSON格式分別如下：有父有子："M。八it。叫"patk":"/伍。八江。"hidden":false,"redirect11："^Redirect","HwagsSkow"：true,??title11:"系統(tǒng)監(jiān)控、"ic。八":11monitor1',"八。Cache"：fake,"link":nullI"children'1:[{"八〃Me":"Online","path":"。八〃八e”,"hidden":fake」"cokvxpoMnt"：11monitor/onHm/index"j"kneta":{"title”:"在線用戶”，"ico八"："o八仇e","MCacke":falsej—null])>("八〃Me":"Job","path":“job”,"hidden":falsej,,cokv\poMnt,1:11^A.onitor/job/index",u^A.etau:{一汨e":"定時(shí)任務(wù)","icon":^job”,"八。Cache"：f〃ke,"Mk”:nu/()})}復(fù)制代碼只要一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊后是一個(gè)功用頁面:{"path":"hidden":fake,"coi^poMnt":"Layout1^"childreta":[{"八〃Me"："Role","path":"role","kidded":false,"cokv\poMntu:"sgstekw/ro/e/index”,"kv[eta11：1"title":”角色管理”,"icon":"peoples","一。Cache”:false,-k":nuK}U}復(fù)制代碼只要一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊之后在當(dāng)前系統(tǒng)中一個(gè)新的選項(xiàng)卡里翻開一個(gè)網(wǎng)頁：("Http://\A/\A/\Af.javaboL"jupatku:〃/"」"hidden":Fak也^component":"Layout",11title11:FenChin健身官網(wǎng)"，"icon":"guide”』"八oCache":false,"link":nullL"chi/d-en":["八anae":"Wwwjwabog.?？桑?path"："w\A/,1}"hidden":fake,“cokvxp。八c八t":"以八e「Li八k'，"hac切”：{“titl即：“TienChin健身官網(wǎng)〃』"icon":"guide","八。Cache":false,"。八k":"http:〃www.javabog.ofg”]1])復(fù)制代碼只要一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊之后在閱讀器翻開一個(gè)新的選項(xiàng)卡:(,,Http：//",“path":"http://www.Jaw1O0")"hidden":fake,"co^poMvyt":11Layout11,"meta11:{"icon":"guide"."MCache"：falsej"link":"http://www.javabog.OYg"}}復(fù)制代碼依據(jù)以上四種不同的JSON,我們總結(jié)出以下規(guī)律：父組件都是Layout,這里的Layout就相當(dāng)于我們vhr中的Home組件，也就是整個(gè)頁面的框架。假如想在當(dāng)前系統(tǒng)中，新開選項(xiàng)卡翻開一個(gè)功用項(xiàng)，那么這個(gè)菜單項(xiàng)必然有children,即便children中只要一項(xiàng)菜單。假如菜單項(xiàng)是一個(gè)外鏈，那么這個(gè)菜單項(xiàng)就不需求有children了。某種水平上，我們其實(shí)能夠?qū)?、3歸為一類，畢竟3只是展現(xiàn)內(nèi)容的組件固定為InnerLink,2則視狀況而定。整體上，能夠點(diǎn)擊的菜單的path都是父菜單的path+子菜單的path,假如菜單項(xiàng)有父有子，那就正常拼接就行了；假如只要一個(gè)子菜單，那么父菜單的path就是/；假如是一個(gè)外鏈，那就只要父菜單的path了。好了，這就是動(dòng)態(tài)菜單的整體設(shè)計(jì)。前端渲染接下來我們?cè)賮砜匆豢辞岸说牟藛武秩?，前端的?dòng)態(tài)菜單渲染位于tienchin-ui/src/layout/components/Sidebar/Sidebarltem.vue文件中：<template><divv-if="!item.hidden"><templatev-if="hasOneShowingChild(item.children,item)&&(!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"><app-linkv-if="onlyOneChild.meta":to="resolvePath(onlyOneChild.path,onlyOneChild.query)">-iteinn:ii<uiex="resolvePath(oin.lyOMChild..patl^)":class="{'submenu-title-noDropdown'：lisNest}"><svg-icon:icon-class="o^lyOMChild.iw.eta.ico^||((tew.kweta&&itenvMeta.ico八)"/><teMplate^titlexspanclass="menu-title":titl&="hasTitle.(oin.lyOMChild.iM.eta.titley'>{ioin.lyOMCkild.Meta.titie}}</span></teMplate></el-kwenu-ite.^></app-link></template><el-sub-menuv-elseref="subMenuH:index=,,resolvePath(item.path)"popper-append-to-body><templatev-if="item.meta”#title>:ico^-class-''itev^.^eta&& /><spa八class="Me八〃汨e"：七出e=%〃sT汨〃.亡陽e)">{{itekvx.kwe"上也e}}</$pan></template><sidebar-itemv-foU'childinita^.childre^":key=nchild.patk":is-nesdrue”:itekv\="ck〃d"：base-path="resolvePath(ckild.pathy,class="八est-Me八〃”/></el-sub-menu></div></template>復(fù)制代碼這里觸及到幾個(gè)辦法，詳細(xì)的辦法細(xì)節(jié)我就不貼出來了，主要和大家說下完成思緒。10.先看整體上，這個(gè)菜單要是非躲藏的，躲藏的菜單，那么直接一級(jí)菜單及其下的子菜單就都不渲染了。渲染整體上分兩塊，上面的template主要是渲染只要一個(gè)子菜單的狀況，也就是第一小節(jié)的2、3、4三種狀況，下面的渲染正常的有父有子的狀況，也就是第一小節(jié)的菜單lohasOneShowingChild主要是判別這個(gè)菜單項(xiàng)能否只要一個(gè)需求渲染的子菜單，假如有多個(gè)子菜單，但是大局部都是躲藏，只要一個(gè)需求渲染出來，那也算只要一個(gè)子菜單，假如一個(gè)菜單項(xiàng)都沒有子菜單，那也算一個(gè)子菜單，只不過這個(gè)子菜單就是他本身，對(duì)應(yīng)第一小節(jié)第4種狀況。在判別的過程中，將獨(dú)一需求渲染的菜單的數(shù)據(jù)賦值給onlyOneChild變量，那么最終，假如當(dāng)前菜單項(xiàng)只要一個(gè)子菜單，且這個(gè)子菜單沒有子菜單（或者有子菜單但是子菜單不用顯現(xiàn)），并且當(dāng)前菜單也不是必需要渲染的，那就將onlyOneChild的數(shù)據(jù)渲染出來。關(guān)于普通的有父有子的狀況，渲染的時(shí)分，經(jīng)過el-sub-menu標(biāo)簽停止渲染,但是留意子項(xiàng)是sidebar-item,sidebar-item其實(shí)就是當(dāng)前項(xiàng)！換言之，這里的渲染其實(shí)還用到了遞歸（直到?jīng)]有children的時(shí)分完畢），這樣即使菜單有三級(jí)四級(jí)五級(jí)等等，只需不嫌難看，都是能夠渲染出來的。1.后端菜單生成3.1菜單表首先我們來看看菜單表的定義，也就是sys_menuoCREATETABLEsgsaenu(mujdbigint(20)NOTNULLAUTOJNCREMENTCOMMENT'菜單ID',MentowtMevarchar(50)COLLATEutf8mb4_unicode_ciNOTNULLCOMMENT'菜單稱號(hào)'，pare^tjdbigint(20)DEFAULT'O'COMMENT'父菜單ID',。以也八-int(4)DEFAULT'O'COMMENT'顯現(xiàn)次第'，pathvarchar(200)COLLATEutf8mb4_unicode_ciDEFAULT"COMMENT'路由地址'，componentvarchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMEN「組件途徑,，quergvarchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMEN「路由參數(shù)'，反依uvuint(l)DEFAULTTCOMMENT'能否為外鏈(0是1否)‘，心“以cint(l)DEFAULT'O'COMMENT'能否緩存(0緩存1不緩存)’，char⑴COLLATEutf8mb4_unicode_ciDEFAULT"COMMENT'菜單類型(M目錄C菜單F按鈕)visiblechar⑴COLLATEutf8mb4_unicode_ciDEFAULT'O'COMMENT'菜單狀態(tài)(0顯現(xiàn)1躲藏)’，statuschar⑴COLLATEutf8mb4_unicode_ciDEFAULT'O'COMMENT'菜單狀態(tài)(0正常1停用)’，perknsvarchar(lOO)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'權(quán)限標(biāo)識(shí)'，icoKvarchar(lOO)COLLATEutf8mb4_unicode_ciDEFAULTCOMMENT'菜單圖標(biāo)'，createdvarchar(64)COLLATEutf8mb4_unicode_ciDEFAULT"COMMENT'創(chuàng)立者，，creative,datetimeDEFAULTNULLCOMMENT'創(chuàng)立時(shí)間'，update_byvarchar(64)COLLATEutf8mb4_unicode_ciDEFAULT"COMMENT'更新者，，"沁CdatetimeDEFAULTNULLCOMMENT'更新時(shí)間'，remarkvarchar(500)COLLATEutf8mb4_unicode_ciDEFAULTCOMMENT'備注'，PRIMARYKEY)ENGINE=InnoDBAUTOJNCREMENT=3054DEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciCOMMENT='菜單權(quán)限表'；復(fù)制代碼其實(shí)這里很多字段都和我們vhr項(xiàng)目項(xiàng)目很類似，我也就不反復(fù)啰嗦了，我這里主要和小同伴們說一個(gè)字段，那就是menu_type=menu.type表示一個(gè)菜單字段的類型，一個(gè)菜單有三品種型，分別是目錄(M)、菜單(C)以及按鈕(F)o這里所說的目錄，相當(dāng)于我們?cè)趘hr中所說的一級(jí)菜單，菜單相當(dāng)于我們?cè)趘hr中所說的二級(jí)菜單。當(dāng)用戶從前端登錄勝利后，要去動(dòng)態(tài)加載的菜單的時(shí)分，就查詢M和C類型的數(shù)據(jù)即可，F(xiàn)類型的數(shù)據(jù)不是菜單項(xiàng)，查詢的時(shí)分直接過濾掉即可,經(jīng)過menu_type這個(gè)字段能夠輕松的過濾掉F類型的數(shù)據(jù)。小同伴們想想，F(xiàn)類型的數(shù)據(jù)過濾掉之后，剩下的數(shù)據(jù)不就是一級(jí)菜單和二級(jí)菜單了，那不就和vhr又一樣了么！在vhr中，思索到菜單就是只要兩級(jí)：一級(jí)菜單和二級(jí)菜單，一級(jí)菜單是目錄，二級(jí)菜單是則是詳細(xì)的菜單項(xiàng)，沒有三級(jí)菜單！所以在vhr中，查詢菜單的時(shí)分我直接用了一個(gè)一對(duì)多的查詢，將一級(jí)菜單做一的一方，二級(jí)菜單做多的一方,這樣比擬省事。當(dāng)然靈敏度差一點(diǎn)，所以在TienChin項(xiàng)目中，這塊還是用上了遞歸。3.2菜單接口當(dāng)用戶登錄勝利之后，會(huì)自動(dòng)懇求/getRouters接口來獲取菜單信息，我們一同來看下：?獲取路由信息*?@return路由信息*/@GetMapping("getRouters")publicAjaxResultgetRouters(){Longuserid=SecuHtgUtik.getUs"以0；L/st<SysA4enu>kuenus=kv\enuSei<vice.$electMeiauTreeByUserld(u$erld);return.勺axRes川t.success(kv\enuService.bui/dMe八/(Menus));}復(fù)制代碼這里的查詢實(shí)踐上分為兩個(gè)步驟：依據(jù)用戶id查詢到一切的菜單信息，這一步的查詢實(shí)踐上是比擬容易的，就單純的多張表結(jié)合在一同，然后過濾出和當(dāng)前用戶相關(guān)并且菜單類型為M或者C的菜單（類型為F的表示按鈕，就不要了），查詢到菜單信息之后，然后停止一個(gè)遞歸操作，將菜單數(shù)據(jù)的層級(jí)排列出來。menuService.buildMenus這一步則是將菜單數(shù)據(jù)專為前端所需求的路由數(shù)據(jù)。一共就這兩個(gè)步驟，我們來逐一停止剖析。先來看查詢菜單數(shù)據(jù)。?依據(jù)用戶ID查詢菜單*@paramuserid用戶稱號(hào)?return菜單列表*/?OverridepublicList<SysMenu>selectMenuTreeByllserId（Longuserid）{List<Sy$Menu>kvxenus=null;if（SecurityUtils.isAdkv\in.（（A$erld））{kwenus=kv\enuMapperselectMenuTireeAllO；}else(hAenus=kue八uMappe吸se/ectMe八ulVeeBgUser7d(use片d);)returngetChildPer^(FneHus,O);}依據(jù)父節(jié)點(diǎn)的ID獲取一切子節(jié)點(diǎn)*@paramlist分類表@paramparentld傳入的父節(jié)點(diǎn)ID@returnString*/publicList<SysMenu>getChildPerms(List<SysMenu>list,intparentld){List<Sy$Meiau>returiaList=newArrayLi$t<Sy$Meiau>0；for(lterator<Sy$Mek\u>iterator=list.iteratorO；iterator.ka$Next();){SgsMenut=(SysMenu)iterator.M^O；//一、依據(jù)傳入的某個(gè)父節(jié)點(diǎn)ID,遍歷該父節(jié)點(diǎn)的一切子節(jié)點(diǎn)if(t.getPareiatld()==parentld){recursronFn(Iist,t);retunaLi$t.add(t);}}returnretumLrst;)遞歸列表*@paramlist@paramt7privatevoidrecursionFn(List<SysMenu>list,SysMenut){//得到子節(jié)點(diǎn)列表Ust<S9sMechildList=getCkildList^ist,t);t.setCMdren(cMd.Lisf);for(SysMenutCMd:childList){if(hasCMdClist,tCMd)){recursionFn(Ust,tCkild);)]}/**得到子節(jié)點(diǎn)列表privateList<SysMenu>getChildList(List<SysMenu>list,SysMenut){L/st<SysA4enu>tlist=newArrayLrst<SysMeHU>();lteratoir<Sy$Menu>it=list.iterator();while(it.hasNext()){SgsMe八〃八=(SgsMe八〃)if(^.getPare^.tld().longValue()==t.getMeiauld().loiag\/alue()){tlist.add(n);}]returntlist;)/**判別能否有子節(jié)點(diǎn)7privatebooleanhasChild(List<SysMenu>list,SysMenut){returnge.tCMd.Ust(list,t).$izeO>O-,}復(fù)制代碼這里一共觸及到五個(gè)關(guān)鍵辦法，我們來逐一停止剖析：selectMenuTreeByUserld：這個(gè)辦法的執(zhí)行比擬容易，假如當(dāng)前用戶是管理員,那就不用加過濾條件了，直接查詢出一切的類型為M和C的菜單項(xiàng)即可getChildPerms：這個(gè)辦法主要是將前面查詢出來的菜單數(shù)據(jù)停止重組，原本都是一個(gè)匯合中的數(shù)據(jù)，如今在該辦法中處置成樹狀，處置的中心邏輯就是調(diào)用recursionFn辦法將之停止遞歸。recursionFn：這是最為關(guān)鍵的遞歸辦法了,首先調(diào)用getChildList獲取當(dāng)前菜單項(xiàng)的children,然后將獲取到的children設(shè)置給當(dāng)前菜單項(xiàng)，最后還要遍歷獲取到的children,假如這個(gè)children也是有子菜單的，則繼續(xù)調(diào)用recursionFn辦法停止處置。getChildList：這個(gè)是查詢某一個(gè)菜單的子菜單，這個(gè)很容易，假如某一個(gè)菜單的parentld是當(dāng)前菜單的id,那么這個(gè)菜單就是當(dāng)前菜單的子菜單。hasChild：這個(gè)是判別給定的菜單能否有子菜單，這個(gè)邏輯就比擬簡單了。好啦，這個(gè)就是整個(gè)的查詢邏輯，整體上來說是比擬容易的，就是查詢M和C類型的菜單，然后再做一個(gè)遞歸操作，將菜單數(shù)據(jù)變成一個(gè)樹狀數(shù)據(jù)。但是由于SysMenu和前后端所需求的路由數(shù)據(jù)的字段稱號(hào)對(duì)不上，并且格式參數(shù)等都不契合前端的請(qǐng)求，所以還需求再做一個(gè)轉(zhuǎn)換，這就是menuService.buildMenus所做的事情了：構(gòu)建前端路由所需求的菜單*@parammenus菜單列表?return路由列表V?OverridepublicList<RouterVo>buildMenus(List<SysMenu>menus){Us僅RouterV。)routers=newLii^kedList<Router\/o>();for(SgsMe八〃kvxenu：Menus){RouterVorouter=newRouterVoO；routersetHidde^(,,l,,.equals(i^,e^u.get\/isible()y);routersetNa^A.e(getRouteNai^e(^enu));routersetPath(getRouterPath(^eiau));routersetCo^A.poMiat(getCoi^poM^t(i^.eiau));router.setQueryfweHu.5etQueryO);router.setMet^fnewMetaVo(wenu.getbAenuNav^eQ,i^eiau.getlconO,StH八gUtik.equak("1",Fneex.get/sCacheO)」Menu.getP久歷0));List<Sy$Men(A>cMe八〃s=Menu.getCki/dre八0；if(!cMen(A$.i$Ei^pty()&&cMe/utssize。>O&&UserConstants.TYPE.DIR.e^ua^^enu.getMenuTypeO)){router.setAlw?y$Show(true);routersetR.edirectC1noRedirect");router.setChildren(buildMenb(s(cMenus));}elseif(isMenuFrakv\e(kv\en(A)){routersetMeta(nutl);L/st<Router\/o>cMdrenList=newArrayList<Routeir\/o>();RouterVochildire^=newRouterVo();childre^.setPatk(yv\eiau.getPatk());chi/dren.setCokwpo八e八七(kv\e八u.getCoFwpo八e八七0);ckildrensetNakv\e(Strii^gUtils.capitalize(kv\ek\u.getPatkO));childrensetMeta(M\A/MetaVo(kweiau.getMei^uNai^eO,^enu.getlconO,StrMgUtik.equak("廿,八u.get/sCnckeO)」Me八u.getPatA。))；childre^.setQuery(^v\e^u.getQueryO);ckildrenList.add(cMdren);router.setCkildre^childrenList);}elseif(kv\e八u.getPnre八,以0.郵VH〃e。==O&&is/kmerLi八奴kv\e八〃))(router.setA4et^(newMet〃Vo(kv\enu.getMe八uNanAeO,knenu.getlco八0))；routersetPath(,7n);Lis僅Route八/?！礳hildreiaLi^t=newArrayLi$t<RouterVo>0；RouterVochildren=newRouterVoO；StringrouterPath=innerLinkReplaceEach(i^ei^u.getPatk());childrensetPatk(routerPatk);childrensetCokv\poMnt(UserCoiastaiat$.INNER_LINK);chi(dre^setNa^e(StniagUtils.capitalize(routerPathy);cK/TdrensetMea(newMetaVo(mei^u.getb/lenuNa^A.e()Jnaenu.g田con(),kwenu.^etPath()));cMdrenLi$t.add(cMdrei^)routersetChi(dre^.(ckildrenUst);}routers.add(router);]returnrouters;）復(fù)制代碼從這個(gè)辦法的執(zhí)行邏輯上我們能夠看到，這里的菜單數(shù)據(jù)一共分為了四種狀況,其實(shí)剛好就和我們第一小節(jié)所引見的狀況相對(duì)應(yīng)。整體上來看，分支語句外面設(shè)置了組件的最根本的屬性。三個(gè)分支語句：第一個(gè)分支，處置普通的有父有子的狀況。第二個(gè)分支，處置第一小節(jié)第二種狀況。第三個(gè)分支，處置第一小節(jié)第三種狀況。假如三個(gè)分支都沒進(jìn)去，那就是第一小節(jié)的第四種狀況，以及各個(gè)子菜單的狀況了。好了，基于這樣大的思緒，再來看各個(gè)屬性的詳細(xì)設(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ì)照著代碼來和大家說一下：?獲取路由地址*@parammenu菜單信息@return路由地址publicStringgetRouterPath(SysMenumenu){StringrouterPatk=me^u.getPatk();//內(nèi)鏈翻開外網(wǎng)方式if(kv\enu.getPareiatld().int\/alue()!=O&&isInnerLink(n^enu)){routerPath=iiaMrLinkReplaceEack(routerPatk);}//非外鏈并且是一級(jí)目錄(類型為目錄)if(O==kwenu.getPareiatld().int\/aIue()&&Use心0八st。八ts.TYPE_D/R.equ〃ke八”.getMe八〃四pe。)&&UserCtms僅心.NO_FRAME.equHs(MeEu(.get7sFmkv\eO)){routerPath="/"+Kv\eiau.getPath();}//非外鏈并且是一級(jí)