数据库控制动态菜单显示（SSM框架）

2025-01-29 技术教程

① 数据库设计：

数据库映射的POJO类

@JsonIgnoreProperties(ignoreUnknown = true)@Table(name="MENU")public class Menu { @Id private String menuNumber; //菜单编号 private String menuName; //菜单名称 private String menuUrl; //菜单URL private String parentMenu; //父级菜单 private Integer menuPermissions; //菜单访问权限 //Setter和Getter及toString()省略 }

②通过mybaites访问数据的Mapper类

public interface MenuMapper { //通过菜单的父级菜单和菜单的权限获取菜单（初始化时要获取所有的一级菜单） @Select("select * from MENU where LENGTHB(Parent_Menu) = #{menulevel} and Menu_Permissions=#{permissions}") List<Menu> selectMenuByLevelAndPer(@Param("menulevel")int menulevel,@Param("permissions")int permissions);}③服务层Service``@Servicepublic class MenuServiceImp implements MenuService{ @Autowired private MenuMapper menuMapper； @Override public List<Menu> getMenuByParent(String parentMenu,Integer menuPermissions) { // TODO Auto-generated method stub Menu menu = new Menu(); menu.setParentMenu(parentMenu); menu.setMenuPermissions(menuPermissions); List<Menu> menuList = menuMapper.select(menu); //“menuMapper.select(menu)” 函数通过JPA实现 return menuList; } @Override public List<Menu> getMenuByLevel(Integer menulevel,Integer menuPermissions) { // TODO Auto-generated method stub if(menulevel<=0) return null; //通过父级菜单查询 System.out.println(menulevel+" ==== " + menuPermissions); if(menuPermissions==null) return menuMapper.selectMenuByLevel(menulevel); else return menuMapper.selectMenuByLevelAndPer(menulevel, menuPermissions); }}

④控制器Controller

@RequestMapping("/getMenuInit") public @ResponseBody List<Menu> getMenuInit(Integer perminsion){ System.out.println("getMenuInit" +"=="+ perminsion); //System.out.println(menuService.getAllMenu().toString()); return menuService.getMenuByLevel(1, perminsion); } @RequestMapping("/getMenu") public @ResponseBody List<Menu> getMenu(String parentMenu,Integer perminsion){ System.out.println(" getMenu:" + parentMenu+" == "+ perminsion); //System.out.println(menuService.getAllMenu().toString()); return menuService.getMenuByParent(parentMenu, perminsion); }

⑤前端页面设计
初始化调 jQuery函数：访问所有的一级菜单

` var flag=0; $("#showDiv").html("") $.ajax( { url:"/menu/getMenuInit", data:{"perminsion":"2"}, type:"post", dataType:"json", success:function(data) { for(var i=0;i<data.length;i++){ var menu = data[i]; $("#showDiv").append("<li class='nav-item'>" +"<a href='javascript:;'" +"onclick='getMenu(" +menu.menuNumber+"," +menu.menuPermissions+"," +i+")'>"+ menu.menuName+ "</a></li>") } } })

单击时调用函数 ```function getMenu(parentMenu,perminsion,divid){ var div = document.getElementById("showDiv").getElementsByTagName("li")[divid] if(parentMenu.length%2!=0) parentMenu="0"+parentMenu; if(div.getElementsByTagName("li").length>1){ for(var i=0;i<div.getElementsByTagName("li").length;i++) div.getElementsByTagName("li")[i].innerHTML="" return false } $.ajax( { url:"/menu/getMenu", data:{"parentMenu":parentMenu,"perminsion":perminsion}, type:"post", dataType:"json", success:function(data) { var HTML=div.innerHTML for(var i=0;i<data.length;i++){ var menu = data[i]； menuNumber=menu.menuNumber.substring(1,menu.menuNumber.length); HTML=HTML+"<li><a>"+menu.menuName+"</a></li>" } div.innerHTML = HTML; } });

}

```