基于DWR的快速增删查改：增删查改源码实例分析

[html] view plain copy

<span style="color:#ff6666;">1.web.xml文件</span>  

[html] view plain copy

<web-app xmlns="https://xmlns.jcp.org/xml/ns/javaee  

[html] view plain copy

xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"  

[html] view plain copy

        xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee  

                      https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"  

         version="3.1">  

  <servlet>  

    <display-name>DWR Servlet</display-name>  

    <servlet-name>dwr-invoker</servlet-name>  

    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  

    <init-param>  

      <param-name>debug</param-name>  

      <param-value>true</param-value>  

    </init-param>  

    <init-param>  

      <param-name>crossDomainSessionSecurity</param-name>  

      <param-value>false</param-value>  

    </init-param>  

    <init-param>  

      <param-name>allowScriptTagRemoting</param-name>  

      <param-value>true</param-value>  

    </init-param>  

    <init-param>  

      <param-name>activeReverseAjaxEnabled</param-name>  

      <param-value>true</param-value>  

    </init-param>  

    <init-param>  

      <param-name>maxWaitAfterWrite</param-name>  

      <param-value>1000</param-value>  

    </init-param>  

  </servlet>  

  <servlet-mapping>  

    <servlet-name>dwr-invoker</servlet-name>  

    <url-pattern>/zxy/*</url-pattern>  

  </servlet-mapping>  

</web-app>  

[html] view plain copy

<span style="color:#ff6666;">2.dwr.xml文件</span>  

<!DOCTYPE dwr PUBLIC

[html] view plain copy

"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"  

[html] view plain copy

     "https://getahead.org/dwr/dwr30.dtd">  

;dwr>  

<allow>  

    <!--new 每一次ajax请求 后台的service类是由dwr来帮助我们实例化-->  

    <create creator="new" javascript="salaryService">  

      <param name="class"  value="com.oracle.service.impl.SalaryServiceImpl"></param>  

    </create>  

    <create creator="new" javascript="dept2Service">  

        <param name="class"  value="com.oracle.service.impl.DeptServiceImpl"></param>  

    </create>  

    <create creator="new" javascript="message2Service">  

        <param name="class"  value="com.oracle.service.impl.Message2ServiceImpl"></param>  

    </create>  

    <convert converter="bean" match="com.oracle.bean.*"></convert>  

</allow>  

;/dwr>  

[html] view plain copy

<span style="color:#ff6666;">3.pom.xml</span>  

 <dependency>  

      <groupId>junit</groupId>  

      <artifactId>junit</artifactId>  

      <version>4.11</version>  

      <scope>test</scope>  

    </dependency>  

    <!--mysql驱动包-->  

    <dependency>  

      <groupId>mysql</groupId>  

      <artifactId>mysql-connector-java</artifactId>  

      <version>5.1.38</version>  

    </dependency>  

    <dependency>  

      <groupId>com.alibaba</groupId>  

      <artifactId>druid</artifactId>  

      <version>1.0.29</version>  

    </dependency>  

    <!--dbutils数据库的帮助包-->  

    <dependency>  

      <groupId>commons-dbutils</groupId>  

      <artifactId>commons-dbutils</artifactId>  

      <version>1.6</version>  

    </dependency>  

    <dependency>  

      <groupId>org.projectlombok</groupId>  

      <artifactId>lombok</artifactId>  

      <version>1.16.18</version>  

    </dependency>  

    <dependency>  

      <groupId>commons-io</groupId>  

      <artifactId>commons-io</artifactId>  

      <version>2.5</version>  

    </dependency>  

    <dependency>  

      <groupId>commons-fileupload</groupId>  

      <artifactId>commons-fileupload</artifactId>  

      <version>1.3.3</version>  

    </dependency>  

    <dependency>  

      <groupId>javax.servlet.jsp</groupId>  

      <artifactId>javax.servlet.jsp-api</artifactId>  

      <version>2.3.1</version>  

      <scope>provided</scope>  

    </dependency>  

    <dependency>  

      <groupId>javax.servlet</groupId>  

      <artifactId>javax.servlet-api</artifactId>  

      <version>3.1.0</version>  

      <scope>provided</scope>  

    </dependency>  

    <!-- https://mvnrepository.com/artifact/org.directwebremoting/dwr -->  

    <dependency>  

      <groupId>org.directwebremoting</groupId>  

      <artifactId>dwr</artifactId>  

      <version>3.0.M1</version>  

    </dependency>  

    <!-- https://mvnrepository.com/artifact/commons-logging/commons-logging -->  

    <dependency>  

      <groupId>commons-logging</groupId>  

      <artifactId>commons-logging</artifactId>  

      <version>1.2</version>  

    </dependency>  

4.JSP页面

[html] view plain copy

<%@ page language="java" contentType="text/html;charset=UTF-8"%>  

<!DOCTYPE html>  

<html lang="en">  

<script>  

    var _hmt = _hmt || [];  

    (function() {  

        var hm = document.createElement("script");  

        hm.src = "https://hm.baidu.com/hm.js?423018cd79b81f5cc860db07ec9c192a";  

        var s = document.getElementsByTagName("script")[0];  

        s.parentNode.insertBefore(hm, s);  

    })();  

</script>  

<head>  

    <meta charset="UTF-8">  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <meta http-equiv="X-UA-Compatible" content="ie=edge">  

    <script type='text/javascript' src='${pageContext.request.contextPath}/zxy/interface/salaryService.js'></script>  

    <script type='text/javascript' src='${pageContext.request.contextPath}/zxy/engine.js'></script>  

    <script type='text/javascript' src='${pageContext.request.contextPath}/zxy/util.js'></script>  

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>  

    <title>DWR+BootStarp的增删查改</title>  

</head>  

<script>  

    //1.查询所有的信息  

    function queryByPage()  

    {  

        salaryService.queryByPage(1,10,function (dataArray){  

            $("#context").html("");  

            console.log(dataArray);  

            $.each(dataArray,function(index,$jqObj){  

                //data 这个数据 dom对象 不是jquery对象  

                // dom对象转换为jquery对象$(data)  

                //jquery对象转换为dom对象$(data)[0]  

                var tr="<tr>";  

                tr+="<td><input type='checkbox' value='"+$jqObj.workcode+"'></td>";  

                tr+="<td>"+$jqObj.uname+"</td>";  

                tr+="<td>"+$jqObj.dept+"</td>";  

                tr+="<td>"+$jqObj.base_salary+"</td>";  

                tr+="<td>"+$jqObj.extract+"</td>";  

                tr+="<td>"+$jqObj.leav+"</td>";  

                tr+="<td>"+$jqObj.sick+"</td>";  

                tr+="<td>"+$jqObj.pk+"</td>";  

                tr+="</tr>";  

                $("#context").append(tr);  

            });  

        })  

    }  

    //新增保存  

    function save()  

    {  

        var workcode=$("#workcode").val();  

        var uname=$("#uname").val();  

        var dept=$("#dept").val();  

        var base_salary=$("#base_salary").val();  

        var extract=$("#extract").val();  

        var leav=$("#leav").val();  

        var sick=$("#sick").val();  

        var pk=$("#pk").val();  

        var obj={workcode:workcode,uname:uname,dept:dept,base_salary:base_salary,extract:extract,leav:leav,sick:sick,pk:pk};  

         if(workcode=="") {  

             salaryService.save(obj, function (result) {  

                 if (result == true) {  

                     alert("新增成功");  

                     queryByPage();  

                 }  

             });  

         }  

         else  

         {  

             salaryService.edit(obj,function(result){  

                 if (result == true) {  

                     alert("编辑成功");  

                     queryByPage();  

                 }  

                 });  

         }  

         init();  

  }  

//删除时需要确认  

function removeAll()  

{  

    //获取所有选中的tr种的checkbox的属性  

    var checkids=[];  

    var checkList=$("#context :checkbox");  

    $.each(checkList,function(index,data){ //$each 来遍历 数据 是dom元素 要转换为jquery才可以  

     var context=document.getElementById("context"); //dom元素 操作的都是属性  

        var $jqObj=$(data);  

        var statu=$jqObj.prop("checked");  

        if(statu==true)  

        {  

            checkids.push(parseInt($jqObj.val()));  

        }  

    })  

    salaryService.remove(checkids,function(result){  

        if(result==true)  

        {  

            alert("删除成功");  

            queryByPage();  

        }  

    })  

}  

function edit(){  

    var checkids=[];  

    var checkList=$("#context :checkbox");  

    $.each(checkList,function(index,data){  

        var $jqObj=$(data);  

        var statu=$jqObj.prop("checked");  

        if(statu==true)  

        {  

            checkids.push(parseInt($jqObj.val()));  

        }  

    });  

     if(checkids.length!=1)  

    {  

        alert("编辑数据有且只能选择一条数据");  

    }  

    else  

    {  

        salaryService.queryById(checkids[0],function(result){  

            $("#workcode").val(result.workcode);  

           $("#uname").val(result.uname);  

            $("#dept").val(result.dept);  

            $("#base_salary").val(result.base_salary);  

         $("#extract").val(result.extract);  

           $("#leav").val(result.leav);  

            $("#sick").val(result.sick);  

          $("#pk").val(result.pk);  

        });  

    }  

}  

function init()  

{  

    $("#workcode").val("");  

    $("#uname").val("");  

    $("#dept").val("");  

    $("#base_salary").val("");  

    $("#extract").val("");  

    $("#leav").val("");  

    $("#sick").val("");  

    $("#pk").val("");  

}  

</script>  

<body onload="queryByPage()">  

<a href="#" class="btn btn-success">联系我们</a>  

<p class="panel panel-success">  

    <p class="panel-heading">  

        <h3 class="panel-title">工资信息列表</h3>  

    </p>  

    <p class="panel-body">  

        <button class="btn btn-success" onclick="init()">增加</button>  

        <button class="btn btn-success" onclick="edit()">编辑</button>  

        <button class="btn btn-success" onclick="removeAll()">删除</button>  

    </p>  

</p>  

<table class="table table-bordered table-striped table-hover">  

    <thead>  

    <tr>  

        <th>选择</th>  

        <th>姓名</th>  

        <th>部门</th>  

        <th>基本工资</th>  

        <th>提成工资</th>  

        <th>事假</th>  

        <th>病假</th>  

        <th>社保</th>  

    </tr>  

    </thead>  

    <tbody id="context">  

    </tbody>  

</table>  

<ul class="pagination">  

    <li><a href="#">首页</a></li>  

    <li><a href="#">上一页</a></li>  

    <li><a href="#">1</a></li>  

    <li><a href="#">2</a></li>  

    <li class="active"><a href="#" >3</a></li>  

    <li><a href="#">4</a></li>  

    <li><a href="#">5</a></li>  

    <li><a href="#">下一页</a></li>  

    <li><a href="#">尾页</a></li>  

</ul>  

<p class="panel panel-success">  

    <p class="panel-heading">  

        <h3 class="panel-title">工资信息详情</h3>  

    </p>  

    <ul class="panel-body">  

        <form class="form-inline">  

            <p class="input-group hidden" >  

                <span class="input-group-addon">用户编号</span>  

                <input type="text" id="workcode" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">姓名</span>  

                <input type="text" id="uname" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">部门</span>  

                <input type="text" id="dept" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">基本工资</span>  

                <input type="text" id="base_salary" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">业务提成</span>  

                <input type="text" id="extract" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">事假</span>  

                <input type="text" id="leav" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">病假</span>  

                <input type="text" id="sick" class="form-control">  

            </p>  

            <p class="input-group">  

                <span class="input-group-addon">社保</span>  

                <input type="text" id="pk" class="form-control">  

            </p>  

        </form>  

</p>  

<p class="panel-footer">  

    <button class="btn btn-success">重置</button>  

    <button class="btn btn-success" onclick="save()" >保存</button>  

</p>  

</p>  

</body>  

<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>  

<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>  

<script>  

    $(function(){  

        //页面上的元素  2种  

        //1.页面一加载就存在元素 click  

        //2.后期 通过js来动态添加的 live bind jquery1.9 使用  

        console.log("....");  

        $("#context").on("click","tr",function(){  

            var statu=$(this).find("input[type='checkbox']").prop("checked");  

            if(statu==true)  

            {  

                $(this).find("input[type='checkbox']").prop("checked",false);  

            }  

            else  

            {  

                $(this).find("input[type='checkbox']").prop("checked",true);  

            }  

        })  

    });  

</script>  

</html>  

[html] view plain copy

<span style="color:#333399;">5.后台</span>  

[html] view plain copy

<span style="color:#ff6666;">utils包中</span>  

public class DbUtils {  

    private static final String DRIVER="com.mysql.jdbc.Driver";  

    private static final String URL="jdbc:mysql://10.10.44.12:3306/salary";  

    private static final String USERNAME="root";  

    private static final String PASSWORD="123456";  

    public static DataSource getDS()  

    {  

        DruidDataSource ds=new DruidDataSource();  

        ds.setDriverClassName(DRIVER);  

        ds.setUrl(URL);  

        ds.setUsername(USERNAME);  

        ds.setPassword(PASSWORD);  

     return ds;  

    }  

}  

<span style="color:#ff6666;">bean包</span>  

@Data  

public class Salary {  

    private int workcode;  

    private String uname;  

    private String dept;  

    private BigDecimal base_salary;  

    private BigDecimal extract;  

    private BigDecimal leav;  

    private BigDecimal sick;  

    private BigDecimal pk;  

}  

<span style="color:#ff6666;">dao包中</span>  

public interface SalaryDao {  

    boolean save(Salary bean) throws SQLException;  

    boolean edit(Salary bean) throws SQLException;  

    boolean remove(int pk) throws SQLException;  

    Salary queryById(int pk) throws SQLException;  

    List<Salary> queryByPage(int pageindex, int pagesize) throws SQLException;  

}  

public class SalaryDaoImpl implements SalaryDao {  

    private QueryRunner qr=new QueryRunner(DbUtils.getDS());  

    public boolean save(Salary bean) throws SQLException {  

        String sql="insert into t_salary values(null,?,?,?,?,?,?,?)";        int row=qr.update(sql,bean.getUname(),bean.getDept(),bean.getBase_salary(),bean.getExtract(),bean.getLeav(),bean.getSick(),bean.getPk());  

        return row>0;  

    }  

    @Override  

    public boolean edit(Salary bean) throws SQLException {  

        String sql="UPDATE t_salary SET  uname=?, dept=?, base_salary=?, extract=?, leav=?, sick=?, pk=? WHERE workcode=?";        int row=qr.update(sql,bean.getUname(),bean.getDept(),bean.getBase_salary(),bean.getExtract(),bean.getLeav(),bean.getSick(),bean.getPk(),bean.getWorkcode());  

        return row>0;  

    }  

    public boolean remove(int pk) throws SQLException {  

        String sql="delete from t_salary where workcode=?";  

        int row=qr.update(sql,pk);  

        return false;  

    }  

    public Salary queryById(int pk) throws SQLException {  

        String sql="select * from t_salary where workcode=?";  

        Salary salary=qr.query(sql,pk,new BeanHandler<Salary>(Salary.class));  

        return salary;  

    }  

    public List<Salary> queryByPage(int pageindex, int pagesize) throws SQLException {  

        //1.先查询总记录数  

        String sql="select count(1) from t_salary";  

        Long pageTotal=qr.query(sql,new ScalarHandler<Long>());  

        //2.根据每页显示的条目数 去分页  

        Long pagesum=pageTotal%pagesize==0?pageTotal/pagesize:pageTotal/pagesize+1;  

        //3.控制 pageindex<1  >总页数  

        if(pageindex<=1)  

        {  

            pageindex=1;  

        }  

        if(pageindex>=pagesum)  

        {  

            pageindex=pagesum.intValue();  

        }  

        //真正去分页  2  20  

        sql="select * from t_salary order by workcode desc limit "+(pageindex-1)*pagesize+","+pagesize;  

        List<Salary> salaryList = qr.query(sql, new BeanListHandler<Salary>(Salary.class));  

        return salaryList;  

    }  

}  

<span style="color:#ff6666;">  

service包中</span>  

public interface SalaryService {  

    boolean save(Salary bean);  

    boolean edit(Salary bean);  

    boolean remove(int[] pk)；  

    Salary queryById(int pk) throws SQLException;  

    List<Salary> queryByPage(int pageindex, int pagesize) throws SQLException;  

}  

public class SalaryServiceImpl implements SalaryService{  

    private SalaryDao dao=new SalaryDaoImpl();  

    public boolean save(Salary bean)  {  

        try {  

            dao.save(bean);  

            return true;  

        } catch (SQLException e) {  

            e.printStackTrace();  

           return false;  

        }  

    }  

    public boolean edit(Salary bean) {  

        try {  

            dao.edit(bean);  

            return true;  

        } catch (SQLException e) {  

            e.printStackTrace();  

            return false;  

        }  

    }  

    @Override  

    public boolean remove(int[] pks) {  

        try {  

           for(int pk:pks ) {  

               dao.remove(pk);  

           }  

          return true;  

        } catch (SQLException e) {  

            e.printStackTrace();  

            return false;  

        }  

    }  

    public Salary queryById(int pk) throws SQLException {  

        return dao.queryById(pk);  

    }  

    @Override  

    public List<Salary> queryByPage(int pageindex, int pagesize) throws SQLException {  

        return dao.queryByPage(pageindex,pagesize);  

    }  

}