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 childMenus;   ......}Controller控制层 :@Controller@RequestMapping("/index")public class IndexController {   @Autowired  private WxUserService wxUserService;   /**   * 获取所有菜单数据   * @return   */  @ResponseBody  @RequestMapping(value = "/loadAuthMenus",method = RequestMethod.GET)  public LayuiJsonFormat login(String username, String password, HttpServletRequest request) {     // 获取所有菜单数据    List wxMenus = wxUserService.getAllMenus();    //定义 存储一级菜单    List menuList = new ArrayList();    // 先找到所有的一级菜单    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 getChildmenus(String id, List wxMenus) {    // 子菜单    List 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 getAllMenus();}service实现类：@Service("wxUserService")public class WxUserServiceImpl implements WxUserService {   @Autowired  private WxUserMapper wxUserMapper;   @Override  public List getAllMenus() {    return wxUserMapper.getAllMenus();  }}mapper：public interface WxUserMapper {  List getAllMenus();}

mybatis sql ：

       select * from wxmini_menus wm order by wm.menu_sort asc   最后，前端样式使用 layui ，html + js 如下：

•  

           {{ menu.menu_name }}    

     

      {{ child.menu_name }}    

   

   

以上是“springboot和vue如何实现递归生成多级菜单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！