The development process, the application involves multi-level menu, find some information to achieve the following cases (use springboot + layui + oracle):
Creating a menu table:
-- 创建菜单表
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);
Entity class WxMenu.java:
public class WxMenu {
http://3g.xcjl0834.com
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 {
http://3g.0834jlnk.com
@Autowired
Private WxUserService wxUserService;
http://www.xcjl0834.com
/ **
* Get all menu data
* @return
* /
@ResponseBody
@RequestMapping (value = "/ loadAuthMenus", Method = RequestMethod.GET)
public LayuiJsonFormat <the HashMap > Login (username String, String password, the HttpServletRequest Request) {
// Get all menu data
List <WxMenu> wxMenus wxUserService.getAllMenus = ();
// a menu definition storage
List <WxMenu> menuList = new ArrayList <WxMenu> ( );
// find all of the first-level menu
for (int I = 0; I <wxMenus.size (); I ++) {
// no parent menu level menu, is null
IF (StringUtils.isBlank (wxMenus.get ( I) .getParent_id ())) {
menuList.add (wxMenus.get (I));
}
}
// for called recursively, all the sub-menu obtaining circulation
for (WxMenu MENU: MenuList) {
menu.setChildMenus (getChildmenus (menu.getMenu_id (), wxMenus));
}
// store all menu data back to the front end layui
map .put ( "menus", MenuList);
http://www.0831jl.com
return LayuiJsonFormat.createBySuccess (map.size (), Map);
}
/ **
* recursive submenu
* @param ID
* @param wxMenus
* @return
* /
Private List <WxMenu> getChildmenus (ID String, List <WxMenu> wxMenus) {
// submenu
List <WxMenu> = new new childMenus the ArrayList <> ();
for (WxMenu mENU: wxMenus) {
IF (the StringUtils. isNotBlank (menu.getParent_id ())) {
IF (menu.getParent_id () the equals (ID)) {.
childMenus.add (MENU);
}
}
}
For (WxMenu MENU: childMenus) {
// url dynamic database storage menu, this time is determined url is empty, then the node is a menu (sub-menu exists)
IF (StringUtils.isBlank (menu.getMenu_url ())) {
// recursive call
menu.setChildMenus (getChildmenus (menu.getMenu_id (), wxMenus));
}
}
IF (childMenus.size () == 0) {
return null;
}
return childMenus;
}
}
service class WxUserService.java
public interface WxUserService {
//获取所有菜单
List<WxMenu> getAllMenus();
}
service实现类：
@Service("wxUserService")
public class WxUserServiceImpl implements WxUserService {
@Autowired
private WxUserMapper wxUserMapper;
http://www.0834nanke.com
@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 resultType="com.yinlong.wxmini.entity.WxMenu">
select * from wxmini_menus wm order by wm.menu_sort asc
</select>
</mapper>
最后，前端样式使用 layui ，html + js 如下：
<ul 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" 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>