EsayUi 增删改

最新推荐文章于 2020-06-29 02:59:08 发布

冷曦ge

最新推荐文章于 2020-06-29 02:59:08 发布

阅读量60

点赞数

本文链接：https://blog.csdn.net/lengxige/article/details/97824048

版权

easyui的crud

1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善
前后端分离的好处：美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json
简单而言就是后台java工程师的工作：写方法返回数据前端：只管展示数据
而以前陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。

案列(前后端分离)

在之前的代码基础下：
写一个jsp页面(userManage):

<%@ 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/black/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/userManage.js"></script>
<title>人员信息维护界面</title>
</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 id="ff" method="post">
    <!-- 隐藏域提交   --> 
    <input type="hidden"  name="SerialNo" />
    <div>   
        <label for="uid" style="margin-left: 80px">uid:</label>   
        <input class="easyui-validatebox"  type="text" name="uid" data-options="required:true" />   
    </div>   
    <div>   
        <label for="uname" style="margin-left: 59px">uname:</label>   
        <input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />   
    </div> 
     <div>   
        <label for="upwd" style="margin-left: 66px">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()" id="name" value="edit">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>
</body>
</html>

Dao方法（UserDao）：

package com.lzy.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.lzy.util.JsonBaseDao;
import com.lzy.util.JsonUtils;
import com.lzy.util.PageBean;
import com.lzy.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 InstantiationException
  * @throws IllegalAccessException
  * @throws SQLException
  */
 public List<Map<String, Object>> getMenu(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);
 }
 /**
  * 修改
  * @param map
  * @return
  * @throws Exception
  */
 public int edit(Map<String, String[]> map) throws Exception{
  String sql = "update t_easyui_user_version2 set uid = ?,uname=?,upwd=? where serialno=?";
  return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"},map);
 }
 /**
  * 增加
  * @param pamap
  * @return
  * @throws Exception
  */
 public int add(Map<String, String[]> pamap) throws Exception {
  String sql = "insert into t_easyui_user_version2(uid,uname,upwd) value(?,?,?)";
  return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, pamap);
 }
 /**
  * 删除
  * @param pamap
  * @return
  * @throws Exception
  */
 public int del(Map<String, String[]> pamap) throws Exception {
  String sql = "delete from t_easyui_user_version2 where SerialNo = ?";
  return super.executeUpdate(sql, new String[] {"SerialNo"}, pamap);
 }
}

web层(UserAction):

package com.lzy.web;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.lzy.dao.UserDao;
import com.lzy.util.PageBean;
import com.lzy.util.ResponseUtil;
import com.zking.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 != null && list.size()==1) {
   //用户存在
    List<Map<String, Object>> menuList=this.userDao.getMenu(req.getParameterMap(), null);
    StringBuilder sb=new StringBuilder();
    for (Map<String, Object> map : menuList) {
     sb.append(","+map.get("menuId"));
    }
    req.setAttribute("menuIds", sb.substring(1));
   }else {
   //用户不存在
    req.setAttribute("msg", "用户不存在");
    code="login";
   }
  } catch (InstantiationException | IllegalAccessException | SQLException e) {
   e.printStackTrace();
   code="login";
  }
  return code;
 }
 /**
  * easyui的datargrid的数据来源
  * @param req
  * @param resp
  * @return
  */
 public String list(HttpServletRequest req,HttpServletResponse resp) {
  Map<String, Object> map=new HashMap<String, Object>();
  PageBean pageBean=new PageBean();
  pageBean.setRequest(req);
  try {
   List<Map<String, Object>> list=this.userDao.list(req.getParameterMap(), pageBean);
   map.put("rows", list);
   ObjectMapper om=new ObjectMapper();
   ResponseUtil.write(resp, om.writeValueAsString(map));
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
 }
 /**
  * 修改
  * @param req
  * @param resp
  * @return
  * @throws Exception
  */
 public String edit(HttpServletRequest req,HttpServletResponse resp) throws Exception {
  this.userDao.edit(req.getParameterMap());
  ObjectMapper om=new ObjectMapper();
  Map<String, Object> map=new HashMap<String, Object>();
  map.put("code", 1);
  map.put("msg", "成功");
  ResponseUtil.write(resp, om.writeValueAsString(map));
  return null;
 }
 /**
  * 增加
  * @param req
  * @param resp
  * @return
  * @throws Exception
  */
 public String add(HttpServletRequest req,HttpServletResponse resp) throws Exception{
  int add = this.userDao.add(req.getParameterMap());
  ObjectMapper om = new ObjectMapper();
  ResponseUtil.write(resp, om.writeValueAsString(add));
  return null;
 }
 /**
  * 删除
  * @param req
  * @param resp
  * @return
  * @throws Exception
  */
 public String del(HttpServletRequest req,HttpServletResponse resp) throws Exception{
  int del = this.userDao.del(req.getParameterMap());
  ObjectMapper om = new ObjectMapper();
  ResponseUtil.write(resp, om.writeValueAsString(del));
  return null;
 }
}

userManage.js

$(function(){
 $('#dg').datagrid({    
     url:'../userAction.action?methodName=list', 
        /*分页*/
     pagination:true,
     /*把右边挤满*/
     fitColumns:true,
     /*展示全屏*/
     /*fit: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');
     $('#name').text('增加');
     $('#name').attr('value','add');
     $('#dd').dialog('open');
    }
      },'-',{
       iconCls: 'icon-edit',
    handler: function(){
     //打开窗体
     $('#dd').dialog('open');
     //获取选中的的数据
     var row = $('#dg').datagrid('getSelected');
     if(row){
      //回显到表单里
      $('#ff').form('load',row);
     }else{
      alert('请选中你要修改的项!');
     }
    }
      },'-',{
       iconCls: 'icon-remove',
    handler: function(){
     var row = $('#dg').datagrid('getSelected');
     if(row){
      if(confirm('你确定要删除吗?')){
       $('#name').text('删除');
       $('#name').attr('value','del');
       //自动刷新
       $('#ff').form('load',row);
       ok();
      }
     }
     else{
      alert('请选中你要删除的项!');
     }
    }
      }]
 }); 
})
function ok(){
 $('#ff').form('submit', {    
     url:'../userAction.action?methodName=edit',    
     success:function(data){    
         //将json串转成json对象
         var res=eval('('+data+')');
         //如果返回1代表成功  0代表失败 还有业务逻辑需要处理的话 就由前端完成
         if(res.code==1){
          //关闭窗体
          $('#dd').dialog('close');
          //重新加载
          $('#dg').datagrid('reload');
          alert($('#name').text()+'成功!');
       $('#ff').form('clear');
         }
     }    
 });
}

配置xml:

<?xml version="1.0" encoding="UTF-8"?>
<config>
 <action path="/menuAction" type="com.lzy.web.MenuAction">
 </action>
 
 <action path="/userAction" type="com.lzy.web.UserAction">
      <forward name="index" path="/index.jsp" redirect="false" />
      <forward name="login" path="/login.jsp" redirect="false" />
 </action>
</config>

冷曦ge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EsayUi 增删改

easyui的crud1、datagrid布局2、dialog布局3、form布局4、通用的JsonBaseDao增删改方法5、dao层6、web层7、功能完善前后端分离的好处：美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。在开发前约定数据交互的格式。java工程师的工作：写方法返回数据如tree_data1.json美工：只管展示tree_dat...
复制链接

扫一扫