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">

<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>

最后效果图如下:

总结

以上所述是小编给大家介绍的springboot + vue 实现递归生成多级菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上是 springboot + vue 实现递归生成多级菜单(实例代码) 的全部内容, 来源链接: utcz.com/z/328242.html

回到顶部