快捷導航

springboot + vue 實現(xiàn)遞歸生成多級菜單(實例代碼)

更新時間：2019年12月12日 08:29:30 作者：北山_

這篇文章主要介紹了springboot + vue 實現(xiàn)遞歸生成多級菜單，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

開發(fā)過程中，涉及到多級菜單的應(yīng)用，找了一些資料案例實現(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),'主頁',null,null,null,1,1,sysdate,-1,sysdate,-1,-1);
insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'控制臺',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);
insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主頁一',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);
insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主頁二',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);

實體類 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();
    //定義 存儲一級菜單
    List<WxMenu> menuList = new ArrayList<WxMenu>();
    // 先找到所有的一級菜單
    for (int i = 0; i < wxMenus.size(); 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));
    }
    //存儲所有菜單，將數(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ù)庫動態(tài)存儲菜單的url,此時判斷url為空的，則是節(jié)點菜單（存在子菜單）
      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實現(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="主頁" lay-direction="2">
    <i class="layui-icon layui-icon-home"></i>
    <cite>{{ menu.menu_name }}</cite>
   </a>
   <dl v-for="child in menu.childMenus" style="padding: 0px !important;" 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>

最后效果圖如下：