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 :




最后,前端样式使用 layui ,html + js 如下:




最后效果图如下:
springboot + vue 实现递归生成多级菜单_第1张图片

 

如有不足或有误,望各位不吝指教,多多交流,谢谢。

你可能感兴趣的:(springboot,vue.js)