EasyUI(前后端分离增删改查)

简介
我们要用前端easyui来实现美化，用datagrid布局，dialog布局还有from布局来把原来的html转成jsp
前后端分离

前后端分离的好处
1、美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际，在开发前约定数据交互的格式，项目可以同步进行，缩短了项目周期
2、解耦了前端与后端的工作内容

代码

1.UserDao

public class UserDao extends JsonBaseDao {
	
	/**
	 * 用户登录或者查询用户分页信息的公共方法
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean)throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_user_version2 where true ";
		String uid = JsonUtils.getParamVal(paMap, "uid");
		String upwd = JsonUtils.getParamVal(paMap, "upwd");
		if(StringUtils.isNotBlank(uid)) {
			sql += " and uid = "+uid;
		}
		if(StringUtils.isNotBlank(upwd)) {
			sql += " and upwd = "+upwd;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	/**
	 * 添加
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "insert into t_easyui_user_version2(uid,uname,upwd) values(?,?,?)";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, paMap);
	}
	
	/**
	 * 删除
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int del(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "delete from t_easyui_user_version2 where SerialNo=?";
		return super.executeUpdate(sql, new String[] {"SerialNo"}, paMap);
	}
	/**
	 * 修改
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql = "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno=?";
		return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, paMap);
	}
	/**
	 * 根据ID查询
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> getMenuByUid(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_usermenu where true ";
		String uid = JsonUtils.getParamVal(paMap, "uid");
		if(StringUtils.isNotBlank(uid)) {
			sql += " and uid = "+uid;
		}
		return super.executeQuery(sql, pageBean);
	}
	
}

2.UserAction(子控制器)

public class UserAction extends ActionSupport {
	private UserDao userDao = new UserDao();
	
	/**
	 * @param req
	 * @param resp
	 * @return
	 */
	public String login(HttpServletRequest req,HttpServletResponse resp) {
//		系统中是否存在当前用户
		try {
			Map<String, Object> map = null;
			try {
				map = this.userDao.list(req.getParameterMap(), null).get(0);
			} catch (Exception e) {
				req.setAttribute("msg", "用户不存在");
				return "login";
			}
//		查询用户菜单中间表，获取对应的menuid的集合
			if(map != null && map.size() > 0) {
//				[{Menuid:002,...},{Menuid:003}]
				StringBuilder sb = new StringBuilder();
				List<Map<String, Object>> menuIdArr = this.userDao.getMenuByUid(req.getParameterMap(), null);
				for (Map<String, Object> m : menuIdArr) {
//					002,003
					sb.append(","+m.get("menuId"));
				}
				req.setAttribute("menuIds", sb.substring(1));
				return "index";
			}else {

				req.setAttribute("msg", "用户不存在");
				return "login";
			}
			
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
		}	
		return null;
	}
	
	/**
	 * 数据表格data加载方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws Exception
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
		ObjectMapper om = new ObjectMapper();
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean);
//		[{},{},{}]-->{"total":28,"row":[{},{},{}]}
		Map<String, Object> map = new HashMap<>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
	
	/**
	 * form组件提交方法
	 * @param req
	 * @param resp
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 * @throws Exception
	 */
	public String edit(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
		int code=this.userDao.edit(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<>();
		map.put("code", code);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
	
	public String add(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
		int code=this.userDao.add(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<>();
		map.put("code", code);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
	
	public String del(HttpServletRequest req,HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException, Exception {
		int code=this.userDao.del(req.getParameterMap());
		ObjectMapper om = new ObjectMapper();
		Map<String, Object> map = new HashMap<>();
		map.put("code", code);
		ResponseUtil.write(resp, om.writeValueAsString(map));
		return null;
	}
	
}

3.userManager.jsp配合userManager.js

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script>
</head>
<body>
<!-- 展示数据 -->
<table id="dg"></table>

<!-- 弹窗 -->
<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;"   
 data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">   
		
		<!-- 提交的form表单 -->
	<form id="ff" method="post">
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }" >
	<!-- 把SerialNo传值到获useManage.js取id -->
	<input type="hidden" name="SerialNo">
	<!-- 间接的设置了方法值 -->
    <input type="hidden" id="method">
	<!-- 
		easyui自带正则:
		但是如果你想要正则规则在easyui中不存在，easyui只是定义了一些常见的正则，
		那么可以在easyui中自定义validType:'xxx,这个xxx就代表一种正则'
			$.extends({validType:xxx
			})
	 -->
	    <div>   
	        <label for="uid">uid:</label>   
	        <input class="easyui-validatebox" type="text" name="uid" data-options="required:true" />   
	    </div>
	    <div>   
	        <label for="uname">uname:</label>   
	        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
	    </div>
	    <div>   
	        <label for="upwd">upwd:</label>   
	        <input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />   
	    </div>
	</form> 
</div> 

<div id="bb">
	<a href="#" class="easyui-linkbutton" onclick="ok()">保存</a>
	<a href="" class="easyui-linkbutton">关闭</a>
</div>

</body>

3.2userManager.js

$(function(){
	var ctx = $("#ctx").val();
	$('#dg').datagrid({    
	    url:ctx+'/userAction.action?methodName=list', 
//	    行填充
	    fit:true,
//	    列填充
	    fitColumns:true,
	    pagination:true,
	    singleSelect:true,
	    columns:[[    
	        {field:'uid',title:'ID',width:100},    
	        {field:'uname',title:'用户名',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]],
	    toolbar: [{
    		iconCls: 'icon-add',
    		handler: function(){
    			$('#ff').form('clear');
    			$('#dd').dialog('open');
    			$('#method').val('add');
    			$('#dg').datagrid('reload');
    		}
    	},'-',{
    		iconCls: 'icon-edit',
    		handler: function(){
    			$('#dd').dialog('open');
//    			到datagrid控件中找需要回填的数据（区别于原来从后台查询）
    			var row = $('#dg').datagrid('getSelected');
    			if(row){
//    			get_data.php指的是回填的数据
    				$('#ff').form('load',row);
    				$('#method').val('edit');
    			}else{
    				alert('请选中你要修改的行');
    			}
    		}
    	},'-',{
    		iconCls: 'icon-remove',
    		handler: function(){
//    			选中要删除的行
    			var row = $('#dg').datagrid('getSelected');
    			if(row){
    				$.ajax({
    					//传一个删除del方法跟serialNo列名值
        			    url:ctx+'/userAction.action?methodName=del&&SerialNo='+row.SerialNo,
        			});
    				$('#dg').datagrid('reload');//刷新方法
    				alert('删除成功');
    			}else{
    				alert('请选中你要删除的行');
    			}
    		}
    	},'-',{
    		iconCls: 'icon-reload',
    		handler: function(){
    			$('#dg').datagrid('reload');//刷新方法
    		}
    	}]

	}); 

})

function ok() {
	$('#ff').form('submit', {
		url:ctx+'/userAction.action?methodName='+$("#method").val(),  
		success:function(data){ 
//	        针对于后端返回的结果进行处理
			$('#ff').form('clear');
			$('#dd').dialog('close');
			$('#dg').datagrid('reload');
		}    
	});