Shulou(Shulou.com)06/03 Report--

小编给大家分享一下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 }}

$(document).ready(function(){ $.get("/index/loadAuthMenus", function(data, status){ var vm = new Vue({ el: '#app-4', data: { menus: data.data.menus } }) }); });

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.