springboot和vue如何實現遞歸生成多級菜單

小編給大家分享一下springboot和vue如何實現遞歸生成多級菜單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

開發過程中，涉及到多級菜單的應用，找了一些資料案例實現如下（使用springboot+layui+oracle）：

創建菜單表 ：

-- 創建菜單表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),'設置',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),'網站用戶',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;   /**   * 獲取所有菜單數據   * @return   */  @ResponseBody  @RequestMapping(value = "/loadAuthMenus",method = RequestMethod.GET)  public LayuiJsonFormat<HashMap> login(String username, String password, HttpServletRequest request) {     // 獲取所有菜單數據    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調用遞歸，循環獲取所有子菜單    for (WxMenu menu : menuList) {      menu.setChildMenus(getChildmenus(menu.getMenu_id(), wxMenus));    }    //存儲所有菜單，將數據回傳至 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) {      //數據庫動態存儲菜單的url,此時判斷url為空的，則是節點菜單（存在子菜單）      if (StringUtils.isBlank(menu.getMenu_url())) {        // 遞歸調用        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實現類：@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">  <p 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"  class="layui-nav-child">    <dd data-name="console" >     <a class="v-href-menu" lay-href="javascript:void(0)" >{{ child.menu_name }}</a>    </dd>   </dl>  </p> </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>

以上是“springboot和vue如何實現遞歸生成多級菜單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！