easyui高级控件(上)

权限树

1.一星权限设计(用户权限多对一)

  • 执行数据库脚本
  • 建立实体类
  • 创建dao
  • Web层创建
  • 更改展示的树形菜单

看图分析,如下:
在这里插入图片描述


user
zhangsan
lisi

UserMenu
001 zhangsan
001	lisi
......

menu
001	zhangsan
002	zhangsan
003
004

上面是user与menu是一对多的关系
弊端:一个菜单不能对应多个用户

思考:我们想一个用户对应多个菜单
然后一个菜单可以对应多个用户
其实这就是user与menu的多对多的关系

思路

  1. 菜单不同的原因在于,利用不同menuid进行查询,原本默认查询的是所有菜单,是通过-1去查的;
  2. menuid由来:是登录用户id查询中间表数据所得来的

2.二星权限设计(用户权限多对多)

  • 执行数据库脚本
  • 修改原有的实体类
  • 建立实体类
  • 创建dao
  • 修改原有的dao
  • 新增web的方法
  • 新增登入界面,跳入前端树形菜单

看图分析,如下:
在这里插入图片描述

权限功能

  1. 用户的增删改查(datagrid组件)
  2. 角色的增删改查(datagrid组件) 权限的集合
  3. 权限菜单的删改查(treegrid组件)
  4. 角色授权(tree控件/ztree) 角色所对应权限,需要默认给指定的权限打勾
  5. 给用户赋予角色(用到多层组嵌套)

二星权限代码演示

根据easyui入门代码基础下进行编程。

dao层后台编写

MenuDao

package com.myy.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.myy.entity.TreeNode;
import com.myy.util.JsonBaseDao;
import com.myy.util.JsonUtils;
import com.myy.util.PageBean;
import com.myy.util.StringUtils;

/**
 * 1.查询数据库所有数据用于easyui的tree树形展示(但是直接得来的数据格式easyui不识别)
 * 2.递归查询节点集合,形成子父节点关系,具备层次结构
 * 3.转格式
 * @author myy
 *
 */
public class MenuDao extends JsonBaseDao{
	
 /**
  * List<TreeNode>加上ObjectMapper可以转换成easyui的tree控件识别的json串
 * @param map
 * @param pageBean
 * @return
 * @throws SQLException 
 * @throws IllegalAccessException 
 * @throws InstantiationException 
 */
public List<TreeNode> listTreeNode(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	List<Map<String, Object>> listMenu = this.listMenuAuth(map, pageBean);
    List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
    this.listMapToListTreeNode(listMenu, listTreeNode);
	   return listTreeNode;
   }

/**
 *  按照不同用户登录能够访问不同的菜单
 * @param map
 * @param pageBean
 * @return
 * @throws InstantiationException
 * @throws IllegalAccessException
 * @throws SQLException
 */
public List<Map<String, Object>> listMenuAuth(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	String sql = "select * from t_easyui_menu where true";
	String id = JsonUtils.getParamVal(map, "Menuid");
	if(StringUtils.isNotBlank(id)) {
//		当前节点的ID当作字节父ID进行查询
		sql += " and menuid in ("+id+") ";
	}else {
		sql += " and menuid=000";
	}
	return super.executeQuery(sql, pageBean);
   }

/**
 * List<Map<String, Object>>
 * ->{Menuid:001.Menuname:学生管理,children:[]}
 * 接下来需要递归查询子节点的集合存入当前节点
 *  
 * @param map
 * @param pageBean
 * @return
 * @throws InstantiationException
 * @throws IllegalAccessException
 * @throws SQLException
 */
public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	String sql = "select * from t_easyui_menu where true";
	String id = JsonUtils.getParamVal(map, "Menuid");
	if(StringUtils.isNotBlank(id)) {
//		当前节点的ID当作字节父ID进行查询
		sql += " and parentid="+id;
	}else {
		sql += " and parentid=-1";
	}
	return super.executeQuery(sql, pageBean);
   }



/**
 * 需要将后台数据库查出来的数据格式转换成前台easyui所识别的数据
 * 
 * @param map
 * @param treeNode
 * @throws SQLException 
 * @throws IllegalAccessException 
 * @throws InstantiationException 
 */
public void mapToTreeNode(Map<String, Object> map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
	treeNode.setId(map.get("Menuid").toString());
	treeNode.setText(map.get("Menuname").toString());
	treeNode.setAttributes(map);
	
//	treeNode.setChildren(children);
	Map<String, String[]> childMap = new HashMap<String, String[]>();
	childMap.put("Menuid", new String[] {treeNode.getId()});
//	查询出当前节点所拥有的子节点的集合
	List<Map<String, Object>> listMenu = this.listMenu(childMap, null);
    List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
    this.listMapToListTreeNode(listMenu, listTreeNode);
    treeNode.setChildren(listTreeNode);
}

public void listMapToListTreeNode(List<Map<String, Object>> list,List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException{
   TreeNode treeNode = null;
	for (Map<String, Object> map: list) {
       	treeNode = new TreeNode();
       	this.mapToTreeNode(map, treeNode);
       	listTreeNode.add(treeNode);
       	
	}
}

   
}

listMenuAuth方法记得在listTreeNode调用

index.js

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree&&Menuid=001,002',
	    onClick: function(node){
//	    	alert(node.attributes.menuURL);//在用户点击的时候显示
	    	var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
	    	if($("#menuTab").tabs('exists',node.text)){
	    		$("#menuTab").tab('select',node.text)
	    	}else{
	    		$('#menuTab').tabs('add',{    
		    	    title:node.text,    
		    	    content:content,    
		    	    closable:true 
		    	}); 
	    	}
	    }
	}); 
	
})

写的死数据是001,002菜单。怎么写活数据?

运行结果
在这里插入图片描述
简单的用户登录界面 login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户登录界面</title>
</head>
<body>
	<form
		action="${pageContext.request.contextPath }/userAction.action?methodName=login"
		method="post">
		账号:<input type="text" name="uid"><br> 密码:<input
			type="text" name="upwd"><br> <input type="submit"
			value="登录">
	</form>

</body>
</html>

UserDao

package com.myy.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.myy.util.JsonBaseDao;
import com.myy.util.JsonUtils;
import com.myy.util.PageBean;
import com.myy.util.StringUtils;

public class UserDao extends JsonBaseDao {
  /**
   * 用于查询用户分页列表所用
   * 用于用户登录所用
 * @param map
 * @param pageBean
 * @return
 * @throws SQLException 
 * @throws IllegalAccessException 
 * @throws InstantiationException 
 */
public List<Map<String, Object>> list(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	String sql="select * from t_easyui_user_version2 where true ";
	String uid = JsonUtils.getParamVal(map, "uid");
	String upwd = JsonUtils.getParamVal(map, "upwd");
	if(StringUtils.isNotBlank(uid)) {
		sql += " and uid = "+uid;
	}
	if(StringUtils.isNotBlank(upwd)) {
		sql += " and upwd = "+upwd;
	}
	
	  return super.executeQuery(sql, pageBean);
  }



/**
 * 通过用户登录的唯一账号,在用户父权限中间表中获取菜单ID的集合
 * @param map
 * @param pageBean
 * @return
 * @throws SQLException 
 * @throws IllegalAccessException 
 * @throws InstantiationException 
 */
public List<Map<String, Object>> getMenuseByUser(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	String sql="select * from t_easyui_usermenu where true ";
	String uid = JsonUtils.getParamVal(map, "uid");
	if(StringUtils.isNotBlank(uid)) {
		sql += " and uid = "+uid;
	}
	  return super.executeQuery(sql, pageBean);
  }

}

UserAction

package com.myy.web;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.myy.dao.UserDao;
import com.myy.framework.ActionSupport;

public class UserAction extends ActionSupport {
  private UserDao userDao = new UserDao();
  
  public String login(HttpServletRequest req,HttpServletResponse resp) {
	  String code="index";
//	  登录
	  try {
		List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null);
	if(list.size()==1 && list != null) {
//		用户存在
		List<Map<String,Object>> menuList = this.userDao.getMenuseByUser(req.getParameterMap(), null);
		StringBuilder sb = new StringBuilder();
		for (Map<String, Object> map : menuList) {
			sb.append(","+map.get("menuId"));
		}
//		,001,002 第一个下标开始截取
		req.setAttribute("menuIds", sb.substring(1));
	}else {
//		用户不存在
		req.setAttribute("msg", "用户不存在");
		code = "login";
	}
	  
	  } catch (InstantiationException | IllegalAccessException | SQLException e) {
		e.printStackTrace();
		code = "login";
	}
	return code;
	  
  }
}

配置mvc.xml

<?xml version="1.0" encoding="UTF-8"?>

<config>
	
	<action path="/menuAction" type="com.myy.web.MenuAction">
	</action>
	<action path="/userAction" type="com.myy.web.UserAction">
	<forward name="index" path="/index.jsp" redirect="false" />
    <forward name="login" path="/login.jsp" redirect="false" />
	</action>
</config>

index主页

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/easyui5/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui5/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/index.js"></script>
<title>后台管理主界面</title>

</head>
<!--menuAction.action?methodName=menuTree  -->
<body class="easyui-layout">
    <input type="hidden" id="menuIds" value="${menuIds}">
	<div data-options="region:'north',border:false"
		style="height: 60px; background: #B3DFDA; padding: 10px">north
		region</div>
	<div data-options="region:'west',split:true,title:'West'"
		style="width: 150px; padding: 10px;">
		
		左侧菜单栏加载
		<ul id="tt">
		
		</ul> 
		</div>
	<div
		data-options="region:'east',split:true,collapsed:true,title:'East'"
		style="width: 100px; padding: 10px;">east region</div>
	<div data-options="region:'south',border:false"
		style="height: 50px; background: #A9FACD; padding: 10px;">south
		region</div>
	<div data-options="region:'center',title:'Center'">
	<div id="menuTab" class="easyui-tabs" style="height:800px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        默认首页展示内容  
    </div>   
   
</div>  
	
	</div>
</body>
</html>

index.js得到主页面的子菜单

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=menuTree&&Menuid='+$("#menuIds").val(),
	    onClick: function(node){
//	    	alert(node.attributes.menuURL);//在用户点击的时候显示
	    	var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
	    	if($("#menuTab").tabs('exists',node.text)){
	    		$("#menuTab").tab('select',node.text)
	    	}else{
	    		$('#menuTab').tabs('add',{    
		    	    title:node.text,    
		    	    content:content,    
		    	    closable:true 
		    	}); 
	    	}
	    }
	}); 
	
})

运行结果:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值