IDEA实现ssm整合快速开发CRUD——修改

上篇：基础环境搭建以及查询、新增功能地址：

IDEA实现ssm整合快速开发CRUD——基础环境搭建
IDEA实现ssm整合快速开发CRUD——查询
IDEA实现ssm整合快速开发CRUD——新增

1、CRUD-修改对话框

2、CRUD-修改逻辑

• 1、点击编辑
• 2、弹出用户修改的模态框（显示用户信息）
• 3、点击更新，完成用户修改

2.1、添加员工修改的模态框（index.jsp）

<!-- 员工修改的模态框（即弹出的对话框）================================================================================== -->
    <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">
                                <%--<input type="text" name="empName" class="form-control" id="empName_update_input" placeholder="empName">--%>
                                <%--<span class="help-block"></span>--%>
                                <%--静态控件：form-control-static（即不显示输入框）--%>
                                <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@atguigu.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" id="dept_update_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_update_btn">更新</button>
                </div>
            </div>
        </div>
    </div>
    <%--=================================================================================================--%>

2.2、为edit编辑按钮绑定单击事件（创建员工修改模态框并回显员工信息）

 //=======================================================================================
        //为edit编辑按钮绑定单击事件（有点特殊）
        //因为我们是按钮创建之前就绑定了click单击事件，所以绑定不上
        //1）、可以在创建按钮的时候绑定（比较繁琐，耦合度高）
        //2）、绑定点击.live（）：可以为后面添加的元素也绑定一个事件
        //但是新版jquery没有live，使用on进行替代（在整个文档document中选择指定的后代元素.edit_btn绑定事件）
        $(document).on("click",".edit_btn",function () {
            //alert("edit");
            //1、查出员工信息，显示员工信息
            getEmp($(this).attr("edit-id"));
            //2、查出部门信息，显示部门列表
            //此处和视频的不一致（视频为"#empUpdateModal select"）
            getDepts("#dept_update_select");
            //3、把员工的id传递给模态框的更新按钮(使更新按钮可以根据id修改员工信息)
            $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
            //弹出模态框
            $("#empUpdateModal").modal({
                //背景删除设置："static"表示设置为点击背景不删除
                backdrop:"static"
            });
        });

        //1、查出员工信息，显示员工信息
        function getEmp(id) {
            $.ajax({
                url:"${APP_PATH}/emp/" + id,
                type:"GET",
                success:function (result) {
                    console.log(result);
                    /*{"code":100,"msg":"处理成功！",
                    "extend":{"emp":{"empId":1005,"empName":"adminf","gender":"f","email":"haha@163.com","dId":2,
                    "department":{"deptId":2,"deptName":"测试部"}}}}*/
                    var empDate = result.extend.emp;
                    $("#empName_update_static").text(empDate.empName);
                    $("#email_update_input").val(empDate.email);
                    $("#empUpdateModal input[name=gender]").val([empDate.gender]);
                    $("#dept_update_select").val([empDate.dId]);
                }
            });
        }
        //==================================================================================

2.2.1、在EmployeeController类中添加getEmp()方法

/**
     * 根据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);
    }

2.2.2、在EmployeeService类中添加getEmp()方法

 /**
     * 按照员工id查询员工信息
     * @param id
     * @return
     */
    public Employee getEmp(Integer id) {
        Employee employee = employeeMapper.selectByPrimaryKey(id);
        return employee;
    }

2.2.3、为editBtn编辑按钮添加一个自定义的属性，来表示当前员工id

editBtn.attr("edit-id",item.empId);

2.3、为更新按钮绑定单击事件

   //点击更新，更新员工信息
        $("#emp_update_btn").click(function () {
            //验证邮箱是否合法
            //1、校验邮箱信息
            var email = $("#email_update_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if (!regEmail.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",
                //type:"POST",
                //data:$("#empUpdateModal form").serialize() + "&_method=PUT",
                data:$("#empUpdateModal form").serialize(),

                success:function (result) {
                    //alert(result.msg);
                    //1、关闭模态框
                    $("#empUpdateModal").modal("hide");
                    //2、跳转到更新后的页面
                    to_page(currentPage);
                }
            });
        });

2.3.1、在web.xml配置文件中注册HttpPutFormContentFilter过滤器

 <!--配置HttpPutFormContentFilter过滤器，解析除POST外的 PUT、PATCH和DELETE的表单数据-->
    <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>

2.3.2、在EmployeeController类中添加updateEmp()方法

    /**
     * ajax发送PUT请求引发的血案
     * 如果直接发送ajax=PUT形式的请求，请求体中有数据，但是Employee对象封装不上
     *
     * 解决办法：在web.xml配置文件中注册HttpPutFormContentFilter过滤器
     * 1、我们要能支持直接发送PUT的请求以及封装请求体中的数据
     * 2、然后配置上HttpPutFormContentFilter：
     * 它的作用：将请求体中的数据解析包装成一个map。request被重新包装
     *
     * 员工更新方法（根据id更新）
     * @param employee
     * @return
     *
     */
    @RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
    @ResponseBody
    public Msg updateEmp( Employee employee){
        employeeService.updateEmp(employee);
        return Msg.success();
    }

2.3.3、在EmployeeService类中添加updateEmp()方法

/**
     * 根据员工id更新员工信息
     * @param employee
     */
    public void updateEmp(Employee employee) {
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

修改功能完成