jsp权限菜单绑定的基本实现

野性酷女 2022-07-21 11:16 140阅读 0赞

实现一个基本的用户，角色，菜单绑定的基本需求数据建模.先看er图，人员和用户，部门两张表绑定关联关系，同时用户和角色权限进行绑定，权限表和菜单进行绑定，这样，就可以得到该用户绑定的菜单，在菜单表中，父菜单id这一项关联有上一级菜单的菜单id，这样去体现菜单之间的关联关系，同时菜单表中的访问地址URL存放菜单对应的页面的url

![Center][]

在登录的时候，查询出该用户的菜单列表，并按树形结构排列起来，放入session中，这样，前台就能获得绑定的菜单数据，并根据菜单数据去显示菜单

其中将菜单列表转化为树形结构的数据的代码如下

List<TSysMenu> menuList = tSysMenuAdminService.getAllTSysMenuAdmin(null);//获得所有菜单
    	List<TSysMenu> topMenuList = l.getMenuList(menuList);
    	request.getSession(true).setAttribute("menuList", topMenuList);
    
    	public List<TSysMenu> getMenuList(List<TSysMenu> menuList) {
    		List<TSysMenu> result = new ArrayList<TSysMenu>();
    		for(int i = menuList.size() - 1; i >= 0; i--){
    			if(menuList.get(i).getMenuParentId() == 1){
    				TSysMenu menu = menuList.get(i);
    				result.add(menuList.get(i));
    				menuList.remove(i);
    				nodeRecursion(menu,menuList);
    			}
    		}
    		
    		//二级菜单
    		return result;
    	}
    	
    	/**
    	 * 初始化需要用的递归方法
    	 * @param node 数的结点
    	 * @param tList
    	 */
    	public void nodeRecursion(TSysMenu node, List<TSysMenu> tList){
    		List<TSysMenu> tsysMenuList = new ArrayList<TSysMenu>();
    		node.setChildren(tsysMenuList);
    		for(int i=0;i<tList.size();i++){
    			if(tList.get(i) != null && tList.get(i).getMenuParentId().equals(node.getMenuId())){
    				TSysMenu node1=tList.get(i);
    				tsysMenuList.add(node1);
    				//tList.remove(i);
    				//i--;
    				nodeRecursion(node1,tList);
    			}
    		}
    	}

前台的显示处理

前台jsp使用了三个iframe去处理，分为top，left，main，其中top放一级菜单，left放分支菜单，main中为菜单要跳转的页面

top菜单的生成用el表达式的foreach生成，left的菜单有jq去动态拼接html语句，在top菜单点击的同时去在left菜单页面动态去插入拼接好的html语句

代码如下

<div class="headernav">
    	<div class="navchildmenu">
    		<ul id="menuList">
    			<c:forEach items="${menuList}" var="topMenu" varStatus="st">
    				<li tag="landMenu${st.index }"><a target='MainMenu' href="<c:choose><c:when test="${empty topMenu.menuHref}">javascript:void(0);</c:when><c:otherwise>${ctx }${topMenu.menuHref}</c:otherwise></c:choose>" οnfοcus="this.blur();">${topMenu.menuName}</a></li>
    			</c:forEach>
    		</ul>
    	</div>
    </div>
    
    
    <div class="box3">
    	<c:forEach items="${menuList}" var="topMenu" varStatus="st">
    		<c:forEach items="${topMenu.children}" var="landMenu" varStatus="st2">
    				<div id="landMenu${st.index }_leftMenu${st2.index}" style="display: none;">
    					<dl>
    						<dd>
    							<div class="title">
    								<a href="<c:choose><c:when test="${empty landMenu.menuHref}">javascript:void(0);</c:when><c:otherwise>${ctx }${landMenu.menuHref}</c:otherwise></c:choose>" target="MainMenu">
    									<span><img src="${ctx}/static/images/system/leftico01.png" /></span>${landMenu.menuName}
    								</a>
    							</div>
    						</dd>
    					</dl>
    				</div>
    		</c:forEach>
    	</c:forEach>
    </div>

jq控制代码

$(".headernav div").show();
    $("#menuList li").click(function() {
    	var id = $(this).attr("tag");
    	var html = "";
    	$('div[id^='+id+']').each(function(){	//以id开始说有的元素
    		html+=$(this).html();
    	});
    	parent.LeftMenu.navMain.innerHTML = "";
    	parent.LeftMenu.navMain.innerHTML = html;
    	parent.LeftMenu.menuClick();
    });
    
    //登录成功后的默认显示首页
    var tag_first=$("#menuList li a")[0];
    tag_first.click();

[Center]: /images/20220720/6cb3b3b0b5b14e00b60d694a128b65fb.png