继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

springboot + vue 实现递归生成多级菜单

慕侠6233823
关注TA
已关注
手记 4
粉丝 1
获赞 7

开发过程中,涉及到多级菜单的应用,找了一些资料案例实现如下(使用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>

最后效果图如下:

http://img2.mukewang.com/5df1992900012c0910310427.jpg

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



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP