功能目标:根据不同登录用户,左侧导航栏展示不同功能列表
前端使用:easyui/js
根据用户权限展示不同的菜单栏
导航栏创建
<div data-options="region:'west';title:'菜单栏'" style="width:200px">
<ul data-options="iconCls:'icon-heart'" id="menuTree"></ul>
</div>
动态创建导航栏js代码
<script>
$(function(){
$('#menuTree').tree({
//后台根据用户查询出来权限菜单集合
url:'/util/menuList',
//node:你点击的那个节点的所有信息
onClick: function(node){
var titleName = node.text;
var icon=node.icon;
var url = node.url;
console.log(url);
//有地址才是子菜单,才需要进行面板的打开
if(url){
//根据名称判断这个页面是否已经存在
if($("#mainTab").tabs("exists",titleName)){
//如果存在就选中相应的面板
$("#mainTab").tabs("select",titleName)
}else{
//如果不存在,就新建一个页签面板
$('#mainTab').tabs('add',{
title:titleName,//页签面板名字
//新建页签的内容content
content: '<iframe scrolling="auto" ' +
'frameborder="0" width="100%" height="100%" ' +
'src="'+url+'"></iframe>',
closable: true,//是否开启页签关闭功能
iconCls:icon//页签图标
});
}
}
}
});
})
</script>
content内容分析,这个很重要,关于页面的iframe问题
//生成页签内容,
content: '<iframe scrolling="auto" ' +
'frameborder="0" width="100%" height="100%" ' +
'src="'+url+'"></iframe>',
//url是查询出来的node中存的信息
//以url:/employee/index为列分析后台流程
@Controller
@RequestMapping("/employee")
public class EmployeeController {
@RequestMapping("/index")
public String index(){
return "employee/employee";
}
}
这里return “employee/employee”;
则是返回,reviews目录下的employee文件下的employee.jsp文件
然后在这个content中显示这个页面
主页面用的是嵌套iframe,如下图所示
iframe标签了解一下
然后就是employee.jsp页面的一些数据展示和功能操作了,具体的这一块儿就不详写了
接下来我们,分析这个路径–>url:’/util/menuList’,
直接代码
@Controller
@RequestMapping("/util")
public class UtilController {
@RequestMapping("/menuList")
@ResponseBody
public List<Menu> menuList(){
return menuService.findAllMenus();
}
}
接着我们去找到findAllMenus();这个方法的具体内容
@Override
public List<Menu> findAllMenus() {
//1.准备父容器装父菜单
List<Menu> parents=new ArrayList<>();
//2.先拿到所有菜单
Employee employee = UserContext.getUser();
//通过登录用户拿到他的菜单集合
List<Menu> menus = menuRepository.findByLoginUser(employee.getId());
//3.遍历子菜单,并从子菜单中拿到父菜单
for(int i=0;i<menus.size();i++){
//通过子菜单拿到他的父菜单
Menu childrenMenu = menus.get(i);
//子菜单拿到父菜单
Menu menuParent = childrenMenu.getParent();
//判断父菜单中有不有这个菜单,没有就将父菜单放进去
if(!parents.contains(menuParent)){
//如果父容器不包含这个菜单,就将他放到父容器中
parents.add(menuParent);
}
//把子菜单放到父菜单里面去
//父菜单获得子类菜单容器,再添加
menuParent.getChildren().add(childrenMenu);
}
//返回父容器
return parents;
}
补充–>jpa中的使用原生jql语句的查询
//获取菜单的Repository接口,jpa中使用原生jql语句查询
@Query("select distinct m from Employee o join o.roles r join r.permissions p join p.menu m where o.id=?1")
List<Menu> findByLoginUser(Long id);
总结:根据用户权限生成其对应权限下的菜单栏,需要注意的点,那两个路径,一个是左侧菜单栏查询路径,都是后台的方法拿到其结果值,并将其封装到一个对象中,前台解析并展示出来的,一个就是哪个content中的url,因为content中内容是一个iframe标签,所以其展示的内容,就通过url来分别确定了,通过这个url找到我们期望展示的页面,想想employee/employee这个路径,以及employee.jsp页面