SSM-2020/10/21-员工管理系统-5

员工修改

更新信息

如果将请求直接改为PUT，就会发现数据无法修改，请求体中有数据但Employee封装不上

原因：

• tomcat:

  1. 将请求体中的数据，封装一个map

  2. request.getParameter(“empName”)就会从这个map中取值

  3. SpringMVC封装POJO对象的时候，会把POJO种每个属性的值，request.getParamter(“email”);

  4. Tomcat检测到PUT请求就不会封装请求体数据为map，只有POST请求才会封装请求体

解决办法：
使用SpringMVC提供的过滤器HttpPutFormContentFilter

它的作用，将请求体中的数据解析包装成一个map，request被重新包装,request.getParameter()被重写，就会从自己封装的map中取数据

在web.xml中添加过滤器

<filter>
  <filter-name>HttpPutFormContentFilter</filter-name>
  <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>HttpPutFormContentFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

index.jsp

//点击更新，更新员工信息
$("#emp_update_btn").click(function () {
    //1.验证邮箱是否合法
    var email = $("#email_update_input").val();
    var regEmaill = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ ;
    if(!regEmaill.test(email)){
        // alert("邮箱格式不正确");
        show_validate_msg("#email_update_input","error","邮箱格式不正确");
        return false;
    }else{
        show_validate_msg("#email_update_input","success","");
    }
    //2.发送ajax请求，保存更新的员工数据
    $.ajax({
        url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
        type:"PUT",
        data:$("#empUpdateModal form").serialize(),
        success:function (result) {
            alert(result.msg);
        }
    });
});

现在就成功的更改了用户的数据

接下来就是完善这个更新逻辑，让其与之前的添加功能相同（关闭模态框，显示当前页）

定义一个全局变量currentPage，并在分页信息处赋值

currentPage = result.extend.pageInfo.pageNum;

最后的编辑功能

//点击更新，更新员工信息
$("#emp_update_btn").click(function () {
    //1.验证邮箱是否合法
    var email = $("#email_update_input").val();
    var regEmaill = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ ;
    if(!regEmaill.test(email)){
        // alert("邮箱格式不正确");
        show_validate_msg("#email_update_input","error","邮箱格式不正确");
        return false;
    }else{
        show_validate_msg("#email_update_input","success","");
    }
    //2.发送ajax请求，保存更新的员工数据
    $.ajax({
        url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
        type:"PUT",
        data:$("#empUpdateModal form").serialize(),
        success:function (result) {
            //alert(result.msg);
            //1.关闭模态框
            $("#empUpdateModal").modal("hide");
            //2.回到本页面
            to_page(currentPage);
        }
    });
});

员工删除

效果图：

我们想要实现的功能就是两种，第一种是单项删除，第二种就是选中然后一键删除

逻辑：

1. 单个删除
   • URI：/emp{id} DELETE

单个删除

和之前的编辑差不多

在Controller中添加

@ResponseBody
@RequestMapping(value = "/emp/{id}",method = RequestMethod.DELETE)
public Msg deleteEmpById(@PathVariable("id")Integer id){
    employeeService.deleteEmp(id);
    return Msg.success();
}

Service:

/**
 * 员工删除
 * @param id
 */
public void deleteEmp(Integer id) {
    employeeMapper.deleteByPrimaryKey(id);
}

给删除按钮添加自定义属性”del-id”

index.jsp：

//单个删除
$(document).on("click",".delete_btn",function () {
    //1.弹出确认删除对话框
    var empName = $(this).parents("tr").find("td:eq(1)").text();
    var empId = $(this).attr("del-id");
    //alert($(this).parents("tr").find("td:eq(1)").text());
    if(confirm("确认删除["+empName+"]吗？")){
        //确认，发送ajax请求删除即可
        $.ajax({
           url:"${APP_PATH}/emp/"+empId,
            type:"DELETE",
            success:function (result) {
                alert(result.msg);
                //回到本页
                to_page(currentPage);
            }
        });
    }
});

单个删除目前功能已经实现了

多选删除

表头需要一个checkbox

<tr>
    <th>
        <input type="checkbox" id="check_all"/>
    </th>
    <th>#</th>
    <th>empName</th>
    <th>gender</th>
    <th>email</th>
    <th>deptName</th>
    <th>操作</th>
</tr>

同时也要给他添加进遍历里

function build_emps_tables(result) {
    //清空table
    $("#emps_table tbody").empty();

    var emps=result.extend.pageInfo.list;
    $.each(emps,function (index,item) {
        var checkBoxTd = $("<td><input type='checkbox' class='check_item' /></td>");

接着编写点击事件

//完成全选/全不选
$("#check_all").click(function () {
    //attr获取checked是undefined
    //我们这些dom原生的属性,attr获取自定义属性的值
    //prop修改和读取dom原生属性的值
   $(".check_item").prop("checked",$(this).prop("checked"));
});

//判断当前选择中的元素是否5个
$(document).on("click",".check_item",function () {
    var flag = $(".check_item:checked").length == $(".check_item").length;
    $("#check_all").prop("checked",flag);
});

这样一个多选功能就完成了

为了增加代码复用，我们修改一下Controller

/**
 * 单个批量二合一
 * 批量删除：1-2-3
 * 单个删除：1
 *
 * @param ids
 * @return
 */
@ResponseBody
@RequestMapping(value = "/emp/{ids}",method = RequestMethod.DELETE)
public Msg deleteEmp(@PathVariable("ids")String ids){
    //批量删除
    if(ids.contains("-")){
        List<Integer> del_ids = new ArrayList<>();
        String[] str_ids = ids.split("-");
        //组装id的集合
        for(String string : str_ids){
            del_ids.add(Integer.parseInt(string));
        }
        employeeService.deleteBatch(del_ids);
        }else{
        Integer id = Integer.parseInt(ids);
        employeeService.deleteEmp(id);
    }
    return Msg.success();
}

以及Service对应的方法

public void deleteBatch(List<Integer> ids) {
    EmployeeExample example = new EmployeeExample();
    EmployeeExample.Criteria criteria = example.createCriteria();
    //delete from xxx where emp_id in(1,2,3)
    criteria.andEmpIdIn(ids);
    employeeMapper.deleteByExample(example);
}

index.jsp也简要修改

//点击全部删除，就批量删除
    $("#emp_delete_all_btn").click(function () {
        //$(".check_item:checked")
        var empNames = "";
        var del_idstr = "";
        $.each($(".check_item:checked"),function () {
           //this
            empNames += $(this).parents("tr").find("td:eq(2)").text()+"，";
            //组装员工id字符串
            del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-"
        });
        //去除empNames多余的,
        empNames = empNames.substring(0,empNames.length-1);
        //去除删除的id多余的-
        del_idstr = del_idstr.substring(0,del_idstr.length-1);
        if(confirm("确认删除["+empNames+"]吗？")){
            //发送ajax请求
            $.ajax({
               url:"${APP_PATH}/emp/"+del_idstr,
               type:"DELETE",
               success:function (result){
                   alert(result.msg);
                   //回到当前页面
                   to_page(currentPage);
               }
            });
        }
    });

这样就完成了一个多选删除的功能，单选删除也同样奏效

到这里整个的增删改查功能就全部做完了

最后的index.jsp

<%--
    web路径：
        不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出现问题
        以/开始的相对路径，找资源，以服务器的路径为标准（http://localhost:3306）需要加上项目名
            http://localhost:3306/crud
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>

    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH}/static/js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
<%--                            部门提交部门id即可--%>
                            <select class="form-control" name="dId" id="dept_add_select">
<%--                                部门名称--%>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>

<%--员工修改的模态框--%>
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <%--                            部门提交部门id即可--%>
                            <select class="form-control" name="dId">
                                <%--  部门名称--%>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <%--显示表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%--                    员工数据等--%>
                </tbody>

            </table>
        </div>
    </div>
    <%--显示分页信息--%>
    <div class="row">
        <%--            分页文字信息--%>
        <div class="col-md-6" id="page_info_area">
            <%--            显示页码等信息--%>
        </div>
        <%--            分页条信息--%>
        <div class="col-md-6" id="page_nav_area">
            <%--            显示分页条信息--%>
        </div>
    </div>
</div>

<script type="text/javascript">

    var totalRecords,currentPage;

    //1.页面加载完成以后，直接去发送一个ajax请求，要到分页数据
    $(function (){
        //去首页
        to_page(1);
    });
    
    function to_page(pn) {
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function (result){
                // console.log(result);
                //1.解析并显示员工数据
                build_emps_tables(result);
                //2.解析并显示分页信息
                build_page_info(result);
                //3.解析并显示分页条数据
                build_page_nav(result);
            }
        });
    }

    function build_emps_tables(result) {
        //清空table
        $("#emps_table tbody").empty();

        var emps=result.extend.pageInfo.list;
        $.each(emps,function (index,item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item' /></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            /**
             * <button class="btn btn-primary btn-sm">
             <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
             编辑
             </button>
             */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前员工id
            editBtn.attr("edit-id",item.empId);

            /**
             * <button class="btn btn-danger btn-sm">
             <span class="glyphicon glyphicon-trash" aria-hidden="true" /></span>
             删除
             </button>
             */
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性，来表示当前员工id
            delBtn.attr("del-id",item.empId);

            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

            //append方法执行完成之后还是返回原来的元素
            $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_table tbody")
        });
    }
    //解析显示分页信息
    function build_page_info(result){
        //清空分页信息
        $("#page_info_area").empty();

        $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"
            +result.extend.pageInfo.pages+"页,总"
            +result.extend.pageInfo.total+"条记录");
        totalRecords = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //解析显示分页条,点击分页要能去下一页等等....
    function build_page_nav(result) {
        //清空
        $("#page_nav_area").empty();

        //page_nav_area
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.extend.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //为元素添加点击翻页的事件
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum-1);
            });
        }

        //构建元素
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            //为元素添加点击翻页的事件
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum+1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }

        //添加首页和前一页的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2,3....遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加后一页和末页的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav元素中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    //清空表单样式及内容
    function reset_form(ele){
        $(ele)[0].reset();
        //清空样式
        $(ele).find("*").removeClass("has-success has-error");
        $(ele).find(".help-block").text("");
    }

    //点击新增按钮弹出模态框
    $("#emp_add_modal_btn").click(function () {
        //清除数据，表单重置
        reset_form($("#empAddModal form"));
        //发送ajax请求，查出部门信息，显示在下拉列表
        getDepts("#empAddModal select");

        //弹出模态框
        $("#empAddModal").modal({
            backdrop:"static"
        });
    });

    //查出所有的部门信息并显示在下拉列表中
    function getDepts(ele) {
        //清空之前下拉列表的值
        $(ele).empty();
        $.ajax({
           url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result) {
                // console.log(result)
                //显示部门信息在下拉列表中
                // $("#dept_add_select").append("")
                $.each(result.extend.depts,function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(ele)
                });
            }
        });
    };

    //校验表单数据
    function validata_add_form(){
        //1. 拿到要检验的数据，使用正则表达式
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if(!regName.test(empName)){
            // alert("用户名可以是2-5位中文或6-16位英文和数字的组合");
            //清空这个元素之前的样式
            show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或6-16位英文和数字的组合");
            return false;
        }else{
            show_validate_msg("#empName_add_input","success","");
        };

        //2. 校验邮箱信息
        var email = $("#email_add_input").val();
        var regEmaill = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ ;
        if(!regEmaill.test(email)){
            // alert("邮箱格式不正确");
            show_validate_msg("#email_add_input","error","邮箱格式不正确");
            return false;
        }else{
            show_validate_msg("#email_add_input","success","");
        };
        return true;
    }

    //显示校验信息
    function show_validate_msg(ele,status,msg){
        //清空这个元素之前的样式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");

        if(status == "success"){
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        }else if(status == "error"){
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }

    //校验用户名是否可用
    $("#empName_add_input").change(function () {
        //发送ajax请求校验用户名是否可用
        var empName = this.value;
        $.ajax({
            url:"${APP_PATH}/checkUser",
            data:"empName="+empName,
            type:"POST",
            success:function (result) {
                if(result.code == 200){
                    show_validate_msg("#empName_add_input","success","用户名可用");
                    $("#emp_save_btn").attr("ajax-va","success");
                }else{
                    show_validate_msg("#empName_add_input","error",result.extend.va_msg);
                    $("#emp_save_btn").attr("ajax-va","error");
                }
            }
        });
    });

    //点击保存，保存员工
    $("#emp_save_btn").click(function () {
        //1.模态框中填写的表单数据提交给服务器进行保存
        //2.先对要提交给服务器的数据进行校验
        if(!validata_add_form()){
            return false;
        };
        //3.判断之前的ajax用户名校验是否成功
        if($(this).attr("ajax-va")=="error"){
            return false;
        };
        //4.发送ajax请求保存员工
        // alert($("#empAddModal form").serialize());
        $.ajax({
            url:"${APP_PATH}/emp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            success:function (result) {
                //alert(result.msg);
                if(result.code == 200){
                    //员工保存成功：
                    //1. 关闭模态框
                    $("#empAddModal").modal('hide');
                    //2. 来到最后一页，显示刚才保存的数据
                    //发送ajax请求显示最后一页数据即可
                    //可以将总记录数当作页码
                    to_page(totalRecords);
                }else{
                    //显示失败信息
                    // console.log(result);
                    //有哪个字段的错误信息，就显示哪个字段
                    if(undefined != result.extend.errorFields.email){
                        //显示邮箱错误信息
                        show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                    }
                    if(undefined != result.extend.errorFields.empName){
                        //显示员工错误信息
                        show_validate_msg("#empName_add_input","error",result.extend.result.extend.errorFields.empName);
                    }
                }
            }
        });
    });

    //1.按钮创建之前就绑定了click，所以绑定不上
    //1).可以在创建按钮的时候绑定事件 2).live()
    //jquery新版没有live，使用on方法进行替代
    $(document).on("click",".edit_btn",function () {
      //alert("edit")

        //1.查出部门信息，并显示部门列表
        getDepts("#empUpdateModal select");

        //2.查出员工信息，显示员工信息
        getEmp($(this).attr("edit-id"));

        //3.把员工的id传递给模态框的更新按钮
        $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
        $("#empUpdateModal").modal({
            backdrop:"static"
        });
    });
    
    function getEmp(id) {
        $.ajax({
            url:"${APP_PATH}/emp/"+id,
            type:"GET",
            success:function (result) {
                // console.log(result);
                var empData = result.extend.emp;
                $("#empName_update_static").text(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModal input[name=gender]").val([empData.gender]);
                $("#empUpdateModal select").val([empData.dId]);
            }
        });
    }

    //点击更新，更新员工信息
    $("#emp_update_btn").click(function () {
        //1.验证邮箱是否合法
        var email = $("#email_update_input").val();
        var regEmaill = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ ;
        if(!regEmaill.test(email)){
            // alert("邮箱格式不正确");
            show_validate_msg("#email_update_input","error","邮箱格式不正确");
            return false;
        }else{
            show_validate_msg("#email_update_input","success","");
        }
        //2.发送ajax请求，保存更新的员工数据
        $.ajax({
            url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
            type:"PUT",
            data:$("#empUpdateModal form").serialize(),
            success:function (result) {
                //alert(result.msg);
                //1.关闭模态框
                $("#empUpdateModal").modal("hide");
                //2.回到本页面
                to_page(currentPage);
            }
        });
    });

    //单个删除
    $(document).on("click",".delete_btn",function () {
        //1.弹出确认删除对话框
        var empName = $(this).parents("tr").find("td:eq(2)").text();
        var empId = $(this).attr("del-id");
        //alert($(this).parents("tr").find("td:eq(1)").text());
        if(confirm("确认删除["+empName+"]吗？")){
            //确认，发送ajax请求删除即可
            $.ajax({
               url:"${APP_PATH}/emp/"+empId,
                type:"DELETE",
                success:function (result) {
                    alert(result.msg);
                    //回到本页
                    to_page(currentPage);
                }
            });
        }
    });

    //完成全选/全不选
    $("#check_all").click(function () {
        //attr获取checked是undefined
        //我们这些dom原生的属性,attr获取自定义属性的值
        //prop修改和读取dom原生属性的值
       $(".check_item").prop("checked",$(this).prop("checked"));
    });

    //判断当前选择中的元素是否5个
    $(document).on("click",".check_item",function () {
        var flag = $(".check_item:checked").length == $(".check_item").length;
        $("#check_all").prop("checked",flag);
    });

    //点击全部删除，就批量删除
    $("#emp_delete_all_btn").click(function () {
        //$(".check_item:checked")
        var empNames = "";
        var del_idstr = "";
        $.each($(".check_item:checked"),function () {
           //this
            empNames += $(this).parents("tr").find("td:eq(2)").text()+"，";
            //组装员工id字符串
            del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-"
        });
        //去除empNames多余的,
        empNames = empNames.substring(0,empNames.length-1);
        //去除删除的id多余的-
        del_idstr = del_idstr.substring(0,del_idstr.length-1);
        if(confirm("确认删除["+empNames+"]吗？")){
            //发送ajax请求
            $.ajax({
               url:"${APP_PATH}/emp/"+del_idstr,
               type:"DELETE",
               success:function (result){
                   alert(result.msg);
                   //回到当前页面
                   to_page(currentPage);
               }
            });
        }
    });


</script>

</body>
</html>

最后的EmployeeController

package com.ceit.crud.controller;

import com.ceit.crud.bean.Employee;
import com.ceit.crud.bean.Msg;
import com.ceit.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 处理员工CRUD请求
 *
 */
@Controller
public class EmployeeController {

    @Autowired
    EmployeeService employeeService;

    /**
     * 单个批量二合一
     * 批量删除：1-2-3
     * 单个删除：1
     *
     * @param ids
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/emp/{ids}",method = RequestMethod.DELETE)
    public Msg deleteEmp(@PathVariable("ids")String ids){
        //批量删除
        if(ids.contains("-")){
            List<Integer> del_ids = new ArrayList<>();
            String[] str_ids = ids.split("-");
            //组装id的集合
            for(String string : str_ids){
                del_ids.add(Integer.parseInt(string));
            }
            employeeService.deleteBatch(del_ids);
            }else{
            Integer id = Integer.parseInt(ids);
            employeeService.deleteEmp(id);
        }
        return Msg.success();
    }



    /**
     * 如果直接发送ajax=PUT形式的请求
     * 封装的数据
     * Employee
     *
     * 问题：
     * 请求体中有数据
     * 但是Employee对象封装不上
     *
     * 原因：
     * tomcat:
     *   1. 将请求体中的数据，封装一个map
     *   2. request.getParameter("empName")就会从这个map中取值
     *   3. SpringMVC封装POJO对象的时候，会把POJO种每个属性的值，request.getParamter("email");
     *
     * AJAX不能直接发PUT请求
     * Tomcat检测到PUT请求就不会封装请求体数据为map，只有POST请求才会封装请求体
     *
     * org.apache.catalina.connector.Request;
     * parseParameters() （3111）
     *
     * 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
     * 配置上HttpPutFormContentFilter
     * 它的作用，将请求体中的数据解析包装成一个map，request被重新包装,request.getParameter()被重写，就会从自己封装的map中取数据
     * 员工更新方法
     * @param employee
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
    public Msg saveEmp(Employee employee){
        employeeService.updateEmp(employee);
        return Msg.success();
    }


    /**
     * 按照员工id查询员工
     * @param id
     * @return
     */
    @RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
    @ResponseBody
    public Msg getEmp(@PathVariable("id") Integer id){
        Employee employee = employeeService.getEmp(id);
        return Msg.success().add("emp",employee);
    }

    //检查用户名是否可用
    @ResponseBody
    @RequestMapping("/checkUser")
    public Msg checkUser(@RequestParam("empName") String empName){
        //先判断用户名是否是合法的表达式;
        String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})";
        if(!empName.matches(regx)){
            return Msg.fail().add("va_msg","用户名必须是6到16位数字和字母的组合或2-5位中文");
        }
        //数据库用户名重复校验
        boolean b = employeeService.checkUser(empName);
        if(b){
            return Msg.success();
        }else{
            return Msg.fail().add("va_msg","用户名不可用");
        }
    }


    /**
     * 员工保存
     * 1.支持JSR303校验
     * 2. 导入Hibernate-validator
     * @param employee
     * @return
     */
    @RequestMapping(value = "/emp",method = RequestMethod.POST)
    @ResponseBody
    public Msg saveEmp(@Valid  Employee employee, BindingResult result){
        if(result.hasErrors()){
            //校验失败应该返回失败，在模态框中显示校验失败的错误信息
            Map<String,Object> map = new HashMap<>();
            List<FieldError> errors = result.getFieldErrors();
            for(FieldError fieldError : errors){
                System.out.println("错误的字段名："+fieldError.getField());
                System.out.println("错误信息："+fieldError.getDefaultMessage());
                map.put(fieldError.getField(),fieldError.getDefaultMessage());
            }
            return Msg.fail().add("errorFields",map);
        }else{
            employeeService.saveEmp(employee);
            return Msg.success();
        }
    }

    /**
     * 导入jackson包
     * @param pn
     * @return
     */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn){
        //这不是一个分页查询
        //引入PageHelper分页插件
        //在查询之前只需要调用,传入页码以及每页的个数
        PageHelper.startPage(pn,5);
        //startPage后面紧跟的这个查询就是一个分页查询
        List<Employee> emps = employeeService.getAll();
        //使用PageInfo包装查询后的结果，只需要将PageInfo交给页面就行了
        //封装了详细的分页信息，包括有我们查询出来的数据,连续显示的页数
        PageInfo page= new PageInfo(emps,5);
        return Msg.success().add("pageInfo",page);
    }
    /**
     * 查询员工数据(分页查询)
     * @return
     */

    //@RequestMapping("/emps")
    public String getEmps(@RequestParam(value = "pn",defaultValue = "1")Integer pn, Model model){
        //这不是一个分页查询
        //引入PageHelper分页插件
        //在查询之前只需要调用,传入页码以及每页的个数
        PageHelper.startPage(pn,5);
        //startPage后面紧跟的这个查询就是一个分页查询
        List<Employee> emps = employeeService.getAll();
        //使用PageInfo包装查询后的结果，只需要将PageInfo交给页面就行了
        //封装了详细的分页信息，包括有我们查询出来的数据,连续显示的页数
        PageInfo page= new PageInfo(emps,5);
        model.addAttribute("pageInfo",page);
        page.getNavigatepageNums();
        return "list";
    }
}

最后的EmployeeService

package com.ceit.crud.service;

import com.ceit.crud.bean.Employee;
import com.ceit.crud.bean.EmployeeExample;
import com.ceit.crud.dao.EmployeeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class EmployeeService {

    @Autowired
    EmployeeMapper employeeMapper;

    /**
     * 查询所有员工
     * @return
     */
    public List<Employee> getAll(){
    //Auto-generated method stub
        return employeeMapper.selectByExampleWithDept(null);
    }

    /**
     * 员工保存方法
     */
    public void saveEmp(Employee employee){
        employeeMapper.insertSelective(employee);
    }

    /**
     * 检验用户名是否可用
     *
     * @param empName
     * @return true 代表当前姓名可用 false 代表不可用
     */
    public boolean checkUser(String empName) {
        EmployeeExample example = new EmployeeExample();
        EmployeeExample.Criteria criteria = example.createCriteria();
        criteria.andEmpNameEqualTo(empName);
        long count = employeeMapper.countByExample(example);
        return count==0;
    }

    public Employee getEmp(Integer id) {
        Employee employee = employeeMapper.selectByPrimaryKey(id);
        return employee;
    }

    /**
     * 员工更新
     * @param employee
     * @return
     */
    public void updateEmp(Employee employee){
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

    /**
     * 员工删除
     * @param id
     */
    public void deleteEmp(Integer id) {
        employeeMapper.deleteByPrimaryKey(id);
    }

    public void deleteBatch(List<Integer> ids) {
        EmployeeExample example = new EmployeeExample();
        EmployeeExample.Criteria criteria = example.createCriteria();
        //delete from xxx where emp_id in(1,2,3)
        criteria.andEmpIdIn(ids);
        employeeMapper.deleteByExample(example);
    }
}

最后的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

  <display-name>Archetype Created Web Application</display-name>

  <!--1.启动Spring的容器  -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>

  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

<!-- 2.spring mvc的前端控制器，拦截所有请求-->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

<!--  3.字符编码过滤器  一定要放在所有过滤器之前-->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceRequestEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>forceResponseEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- 4.使用Rest风格的URI  将页面普通的POST请求转为指定的delete或put请求 -->
  <filter>
    <filter-name>hiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>hiddenHttpMethodFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <filter>
    <filter-name>HttpPutFormContentFilter</filter-name>
    <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>HttpPutFormContentFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

最后的Employee

package com.ceit.crud.bean;

import org.hibernate.validator.constraints.Length;

import javax.validation.constraints.Email;
import javax.validation.constraints.Pattern;

public class Employee {
    private Integer empId;

    @Pattern(regexp = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})"
            ,message = "用户名必须是2-5位中文或6-16位英文和数字的组合")
    private String empName;

    private String gender;

//    @Email
    @Pattern(regexp = "^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$"
            ,message = "邮箱格式不正确")
    private String email;

    private Integer dId;

    private Department department;

    public Department getDepartment() {
        return department;
    }

    public Employee() {
        super();
    }

    public Employee(Integer empId, String empName, String gender, String email, Integer dId) {
        this.empId = empId;
        this.empName = empName;
        this.gender = gender;
        this.email = email;
        this.dId = dId;
    }

    public void setDepartment(Department department) {
        this.department = department;
    }

    public Integer getEmpId() {
        return empId;
    }

    public void setEmpId(Integer empId) {
        this.empId = empId;
    }

    public String getEmpName() {
        return empName;
    }

    public void setEmpName(String empName) {
        this.empName = empName == null ? null : empName.trim();
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender == null ? null : gender.trim();
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email == null ? null : email.trim();
    }

    public Integer getdId() {
        return dId;
    }

    public void setdId(Integer dId) {
        this.dId = dId;
    }
}

以上就是与之前进行过修改的所有代码了

总结

这里画一个图来总结一下思路

如果要部署到真实的服务器，使用maven构建war包就好了

注意点：

1. 新增，修改，引入数据校验（前后端）

2. 删除，单个&批量

3. mybatis generator-xxMapper

4. ajax,SpringMVC-@ResponseBody

源码下载

🌸🌸🌸完结撒花🌸🌸🌸