EasyUI前后端分离
陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。
Vs
前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json
1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善
前端
userManage.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>人员信息维护界面</title> 8 <link rel="stylesheet" type="text/css" 9 href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css"> 10 <link rel="stylesheet" type="text/css" 11 href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css"> 12 <script type="text/javascript" 13 src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script> 14 <script type="text/javascript" 15 src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script> 16 <script type="text/javascript" 17 src="${pageContext.request.contextPath }/static/js/userManage.js"></script> 18 </head> 19 <body> 20 <!--展示数据 --> 21 <table id="dg"></table> 22 <!--弹窗 --> 23 <div id="dd" class="easyui-dialog" title="编辑窗体" 24 style="width: 400px; height: 200px;" 25 data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'"> 26 <!-- 提交的from表单 --> 27 <form id="ff" method="post"> 28 <input type="hidden" name="SerialNo"> 29 <!-- 30 easyui自带正则 :但是你想要正则规划在easyUI中不存在，easyUI中只是定义了一些常见的正则 31 可以在easyUI中自定义validType:'正则' 32 $.4xtends({validType:xxx 33 34 }) 35 --> 36 <div> 37 <label for="uid">uid:</label> <input class="easyui-validatebox" 38 type="text" name="uid" data-options="required:true" /> 39 </div> 40 <div> 41 <label for="uname">uname:</label> <input class="easyui-validatebox" 42 type="text" name="uname" data-options="required:true" /> 43 </div> 44 <div> 45 <label for="upwd">upwd:</label> <input class="easyui-validatebox" 46 type="text" name="upwd" data-options="required:true" /> 47 </div> 48 </form> 49 </div> 50 <!-- <div id="tb">--> 51 <!-- <a href="#" class="easyui-linkbutton"--> 52 <!-- data-options="iconCls:'icon-edit',plain:true" /a> <a href="#"--> 53 <!-- class="easyui-linkbutton"--> 54 <!-- data-options="iconCls:'icon-help',plain:true" /a>--> 55 <!-- </div>>--> 56 </div> 57 <div id="bb"> 58 <a href="#" class="easyui-linkbutton" onclick="ok()">保存</a> <a href="#" 59 class="easyui-linkbutton">关闭</a> 60 </div> 61 62 63 </div> 64 65 66 </body> 67 </html>
userManage.js
1 $(function(){ 2 var xfq = $("#xfq").val(); 3 $('#dg').datagrid({ 4 url:ctx+'/userAction.action?methodName=list', 5 // 行填充 6 fit:true, 7 // 列填充 8 fitColumns:true, 9 pagination:true, 10 singleSelect:true, 11 columns:[[ 12 {field:'uid',title:'ID',width:100}, 13 {field:'uname',title:'用户名',width:100}, 14 {field:'upwd',title:'密码',width:100,align:'right'} 15 ]], 16 toolbar: [{ 17 iconCls: 'icon-add', 18 handler: function(){ 19 $('#ff').form('clear');//清空文本框的值 20 $('#dd').dialog('open');//打开表格 21 $("#dd").attr("title","增加用户");//增加信息 22 $("#method").val("add"); //通过隐藏ID来设置增加方法 23 } 24 },'-',{ 25 iconCls: 'icon-edit', 26 handler: function(){ 27 $('#dd').dialog('open'); 28 // 到datagrid控件中找需要回填的数据（区别于原来从后台查询） 29 var row = $('#dg').datagrid('getSelected'); 30 if(row){ 31 // get_data.php指的是回填的数据 32 $('#ff').form('load',row); 33 $('#method').val('edit'); 34 }else{ 35 alert("请选择你要修改的行"); 36 } 37 } 38 },'-',{ 39 iconCls: 'icon-remove', 40 handler: function(){ 41 var row =$('#dg').datagrid('getSelected'); 42 if(row){ 43 $.ajax({ 44 url:$("#ctx").val()+'/userAction.action?methodName=remove&&SerialNo='+row.SerialNo, 45 }); 46 $('#dg').datagrid('reload');//刷新方法 47 alert('删除成功'); 48 } 49 else{ 50 alert('删除失败'); 51 } 52 } 53 },'-',{ 54 iconCls: 'icon-reload', 55 handler: function(){alert('刷新按钮')} 56 }] 57 58 }); 59 60 }) 61 62 function ok() { 63 alert('ok'); 64 $('#ff').form('submit', { 65 // url:ctx+'/userAction.action?methodName=edit', 66 url:ctx+'/userAction.action?methodName='+$("#method").val(), 67 success:function(data){ 68 // 针对于后端返回的结果进行处理 69 $('#ff').form('clear'); 70 $('#dd').dialog('close'); 71 $('#dg').datagrid('reload'); 72 } 73 }); 74 }
datagrid_data1.json
1 {"total":28,"rows":[ 2 {"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}, 3 {"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, 4 {"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"}, 5 {"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}, 6 {"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"}, 7 {"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"}, 8 {"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}, 9 {"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"}, 10 {"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"}, 11 {"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"} 12 ]}
UserDao 1 package com.easyui.dao; 2 3 import java.sql.SQLException;
4 import java.util.List; 5 import java.util.Map; 6 7 import com.easyui.util.JsonBaseDao; 8 import com.easyui.util.JsonUtils; 9 import com.easyui.util.PageBean; 10 import com.easyui.util.StringUtils; 11 12 public class UserDao extends JsonBaseDao{ 13 /** 14 * 用户登录或者查询用户分页的公共方法 15 * @param paMap 16 * @param pageBean 17 * @return 18 * @throws InstantiationException 19 * @throws IllegalAccessException 20 * @throws SQLException 21 */ 22 public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean ) throws InstantiationException, IllegalAccessException, SQLException{ 23 String sql="select * from t_easyui_user_version2 where true"; 24 String uid=JsonUtils.getParamVal(paMap, "uid"); 25 String upwd=JsonUtils.getParamVal(paMap, "upwd"); 26 if(StringUtils.isNotBlank(uid)) { 27 sql+=" and uid="+uid; 28 } 29 if(StringUtils.isNotBlank(upwd)) { 30 sql+=" and upwd="+upwd; 31 } 32 return super.executeQuery(sql, pageBean); 33 } 34 /** 35 * 修改 36 * @param paMap 37 * @return 38 * @throws NoSuchFieldException 39 * @throws SecurityException 40 * @throws IllegalArgumentException 41 * @throws IllegalAccessException 42 * @throws SQLException 43 */ 44 public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 45 String sql = "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno=?"; 46 return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, paMap); 47 48 }
1 public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 2 String sql = "insert into t_easyui_user_version2 values(?,?,?)"; 3 return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, paMap); 4 5 } 6 7 8 public int remove(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 9 String sql = "delete from t_easyui_user_version2 where serialno=?"; 10 return super.executeUpdate(sql, new String[] {"SerialNo"}, paMap); 11 12 }
49 /** 50 *新增 51 * @param paMap 52 * @return 53 * @throws NoSuchFieldException 54 * @throws SecurityException 55 * @throws IllegalArgumentException 56 * @throws IllegalAccessException 57 * @throws SQLException 58 */ 59 public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 60 String sql="insert into t_easyui_user_version2 values(?,?,?)"; 61 return super.executeUpdate(sql, new String[] {"uid","uname","upwd"} , paMap); 62 } 63 /** 64 * 删除 65 * @param paMap 66 * @return 67 * @throws NoSuchFieldException 68 * @throws SecurityException 69 * @throws IllegalArgumentException 70 * @throws IllegalAccessException 71 * @throws SQLException 72 */ 73 public int del(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { 74 String sql="delete from t_easyui_user_version2 where SerialNo=?"; 75 return super.executeUpdate(sql, new String[] {"SerialNo"} , paMap); 76 } 77 78 /** 79 * 根据当前用户登录的id去查对应的菜单 80 * @param paMap 81 * @param pageBean 82 * @return 83 * @throws InstantiationException 84 * @throws IllegalAccessException 85 * @throws SQLException 86 */ 87 public List<Map<String, Object>> getMenuByUid(Map<String, String[]> paMap,PageBean pageBean ) throws InstantiationException, IllegalAccessException, SQLException{ 88 String sql="select * from t_easyui_usermenu where true"; 89 String uid=JsonUtils.getParamVal(paMap, "uid"); 90 if(StringUtils.isNotBlank(uid)) { 91 sql+=" and uid="+uid; 92 } 93 94 return super.executeQuery(sql, pageBean); 95 } 96 97 }
UserAction
1 package com.easyui.web; 2 3 import java.util.HashMap; 4 import java.util.List; 5 import java.util.Map; 6 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 import com.fasterxml.jackson.databind.ObjectMapper; 11 import com.easyui.dao.UserDao; 12 import com.easyui.entity.TreeNode; 13 import com.easyui.util.PageBean; 14 import com.easyui.util.ResponseUtil; 15 import com.zking.framework.ActionSupport; 16 17 public class UserAction extends ActionSupport{ 18 19 private UserDao userDao=new UserDao(); 20 /** 21 * 登录成功后跳转index.jsp 22 * @param request 23 * @param response 24 * @return 25 * @throws Exception 26 */ 27 public String login(HttpServletRequest request,HttpServletResponse response) throws Exception { 28 //系统中是否有当前登录用户 29 Map<String, Object> map=null; 30 try { 31 map= this.userDao.list(request.getParameterMap(), null).get(0); 32 33 } catch (Exception e) { 34 request.setAttribute("msg", "用户不存在"); 35 return "login"; 36 } 37 38 // 有 39 //查询用户菜单中间表，获取对应menuid的集合 40 if(map!=null && map.size()>0) { 41 //[{Menuid:002,map...},{Menuid:003..}] 42 //[002,003] 43 StringBuilder sb=new StringBuilder(); 44 List<Map<String, Object>> menuIdArr = this.userDao.getMenuByUid(request.getParameterMap(), null); 45 System.out.println(menuIdArr); 46 for (Map<String, Object> m : menuIdArr) { 47 sb.append(","+m.get("menuId")); 48 //,002,003 49 } 50 request.setAttribute("menuIds", sb.substring(1)); 51 52 return "index"; 53 }else { 54 System.out.println("进来了"); 55 //没有 56 request.setAttribute("msg", "用户不存在"); 57 // 返回登录界面 58 return "login"; 59 } 60 61 } 62 63 64 /** 65 * 数据表格datagrid加载 66 * @param req 67 * @param resp 68 * @return 69 * @throws Exception 70 */ 71 public String list(HttpServletRequest req,HttpServletResponse resp) throws Exception { 72 ObjectMapper om = new ObjectMapper(); 73 PageBean pageBean = new PageBean(); 74 pageBean.setRequest(req); 75 List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean); 76 Map<String, Object> map = new HashMap<String,Object>(); 77 map.put("total", pageBean.getTotal()); 78 map.put("rows", list); 79 80 ResponseUtil.write(resp,om.writeValueAsString(map)); 81 return null; 82 83 84 } 85 86 87 88 /** 89 * form组件提交方法 90 * @param req 91 * @param resp 92 * @return 93 * @throws Exception 94 */ 95 public String edit(HttpServletRequest req,HttpServletResponse resp) throws Exception { 96 int code = this.userDao.edit(req.getParameterMap()); 97 ObjectMapper om = new ObjectMapper(); 98 Map<String, Object> map = new HashMap<String,Object>(); 99 map.put("code", code); 100 ResponseUtil.write(resp,om.writeValueAsString(map)); 101 return null; 102 103 104 } 105 106 /** 107 * 增加 108 * @param req 109 * @param resp 110 * @return 111 * @throws Exception 112 */ 113 public int add(HttpServletRequest req,HttpServletResponse resp) throws Exception { 114 int add = this.userDao.add(req.getParameterMap()); 115 ObjectMapper om=new ObjectMapper(); 116 ResponseUtil.write(resp, om.writeValueAsString(add)); 117 return add; 118 } 119 120 /** 121 * 删除 122 * @param req 123 * @param resp 124 * @return 125 * @throws Exception 126 */ 127 public int del(HttpServletRequest req,HttpServletResponse resp) throws Exception { 128 int del = this.userDao.del(req.getParameterMap()); 129 ObjectMapper om=new ObjectMapper(); 130 ResponseUtil.write(resp, om.writeValueAsString(del)); 131 return del; 132 } 133 134 135 136 }
