后台管理系统左侧动态导航栏创建

功能目标:根据不同登录用户,左侧导航栏展示不同功能列表

前端使用: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页面