開(kāi)發(fā)過(guò)程中,涉及到多級(jí)菜單的應(yīng)用,找了一些資料案例實(shí)現(xiàn)如下(使用springboot+layui+oracle):
創(chuàng)建菜單表 :
-- 創(chuàng)建菜單表 create table wxmini_menus( menu_id number unique, --菜單ID menu_name varchar2(20), menu_url varchar2(200), menu_icon varchar2(100), parent_id number, --父菜單ID status varchar2(10), menu_sort number, last_update_date DATE not null, last_updated_by NUMBER not null, creation_date DATE not null, created_by NUMBER not null, last_update_login NUMBER ); -- 插入菜單記錄 insert into wxmini_menus values((select 1 from dual),'設(shè)置',null,null,null,1,100,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'用戶',null,null,1,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'網(wǎng)站用戶',null,null,1,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'角色管理',null,null,1,1,null,sysdate,-1,sysdate,-1,-1); --主菜單二 insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主頁(yè)',null,null,null,1,1,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'控制臺(tái)',null,null,5,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主頁(yè)一',null,null,5,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主頁(yè)二',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);
實(shí)體類 WxMenu.java:
public class WxMenu { private String menu_id; private String menu_name; private String menu_url; private String menu_icon; private String parent_id; private String parent_menu_name; private String status; private String menu_sort; private String last_update_date; private long last_updated_by; private String creation_date; private long created_by; private long last_update_login; private List<WxMenu> childMenus; ...... } Controller控制層 : @Controller @RequestMapping("/index") public class IndexController { @Autowired private WxUserService wxUserService; /** * 獲取所有菜單數(shù)據(jù) * @return */ @ResponseBody @RequestMapping(value = "/loadAuthMenus",method = RequestMethod.GET) public LayuiJsonFormat<HashMap> login(String username, String password, HttpServletRequest request) { // 獲取所有菜單數(shù)據(jù) List<WxMenu> wxMenus = wxUserService.getAllMenus(); //定義 存儲(chǔ)一級(jí)菜單 List<WxMenu> menuList = new ArrayList<WxMenu>(); // 先找到所有的一級(jí)菜單 for (int i = 0; i < wxMenus.size(); i++) { // 一級(jí)菜單沒(méi)有父菜單,為null if (StringUtils.isBlank(wxMenus.get(i).getParent_id())) { menuList.add(wxMenus.get(i)); } } // for調(diào)用遞歸,循環(huán)獲取所有子菜單 for (WxMenu menu : menuList) { menu.setChildMenus(getChildmenus(menu.getMenu_id(), wxMenus)); } //存儲(chǔ)所有菜單,將數(shù)據(jù)回傳至 layui 前端 map.put("menus", menuList); return LayuiJsonFormat.createBySuccess(map.size(),map); } /** * 遞歸子菜單 * @param id * @param wxMenus * @return */ private List<WxMenu> getChildmenus(String id, List<WxMenu> wxMenus) { // 子菜單 List<WxMenu> childMenus = new ArrayList<>(); for (WxMenu menu : wxMenus) { if (StringUtils.isNotBlank(menu.getParent_id())) { if (menu.getParent_id().equals(id)) { childMenus.add(menu); } } } for (WxMenu menu : childMenus) { //數(shù)據(jù)庫(kù)動(dòng)態(tài)存儲(chǔ)菜單的url,此時(shí)判斷url為空的,則是節(jié)點(diǎn)菜單(存在子菜單) if (StringUtils.isBlank(menu.getMenu_url())) { // 遞歸調(diào)用 menu.setChildMenus(getChildmenus(menu.getMenu_id(), wxMenus)); } } if (childMenus.size() == 0) { return null; } return childMenus; } }
service類 WxUserService.java
public interface WxUserService { //獲取所有菜單 List<WxMenu> getAllMenus(); } service實(shí)現(xiàn)類: @Service("wxUserService") public class WxUserServiceImpl implements WxUserService { @Autowired private WxUserMapper wxUserMapper; @Override public List<WxMenu> getAllMenus() { return wxUserMapper.getAllMenus(); } } mapper: public interface WxUserMapper { List<WxMenu> getAllMenus(); }
mybatis sql :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.yinlong.wxmini.mapper.WxUserMapper"> <!-- 獲取所有菜單 --> <select id="getAllMenus" resultType="com.yinlong.wxmini.entity.WxMenu"> select * from wxmini_menus wm order by wm.menu_sort asc </select> </mapper> 最后,前端樣式使用 layui ,html + js 如下: <ul id="app-4" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu"> <li data-name="home" class="layui-nav-item layui-nav-itemed"> <div v-for="menu in menus" > <a href="javascript:;" lay-tips="主頁(yè)" lay-direction="2"> <i class="layui-icon layui-icon-home"></i> <cite>{{ menu.menu_name }}</cite> </a> <dl v-for="child in menu.childMenus" class="layui-nav-child"> <dd data-name="console" > <a class="v-href-menu" lay-href="javascript:void(0)" >{{ child.menu_name }}</a> </dd> </dl> </div> </li> </ul> <script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}"></script> <script type="text/javascript" th:src="@{/layuiadmin/vue.js}" ></script> <script type="text/javascript" th:src="@{/layuiadmin/layui/jquery-3.2.1.min.js}" ></script> <script> $(document).ready(function(){ $.get("/index/loadAuthMenus", function(data, status){ var vm = new Vue({ el: '#app-4', data: { menus: data.data.menus } }) }); }); </script>
最后效果圖如下:
總結(jié)
以上所述是小編給大家介紹的springboot + vue 實(shí)現(xiàn)遞歸生成多級(jí)菜單,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。