首页 > 代码库 > SSM练手-增删改查-5-修改员工信息

SSM练手-增删改查-5-修改员工信息

  

  

http 的post 和 get 方法确实很难区分,大多数的解释都是,如果是新建一条记录的话就用post,如果是更新一条记录的话就用put.

具体原因不阐述,下面主要介绍修改员工信息的方法。

后台端:

1 web.xml配置 

 使其能够接受PUT请求,且能够从PUT请求中获取数据。

  1)直接发送PUT请求,数据无法封装,原因:  

    * Tomcat:
    * 1、将请求体中的数据,封装一个map。
    * 2、request.getParameter("empName")就会从这个map中取值。
    * 3、SpringMVC封装POJO对象的时候,就可直接获取对象:request.getParamter("email");

  2)AJAX发送PUT请求引发的血案:
  * PUT请求,请求体中的数据,request.getParameter("empName")拿不到
  * Tomcat一看是PUT不会封装请求体中的数据为map,只有POST形式的请求才封装请求体为map

    解决方案;
    * 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
      * 1、配置上HttpPutFormContentFilter:将请求体中的数据解析包装成一个map。
  * 2、request被重新包装,request.getParameter()被重写,就会从自己封装的map中取数据

  在web.xml中进行配置:

  

 <!-- 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>

  <!--HttpPutFormContentFilter:将请求体中的数据解析包装成一个map -->
  <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 后台更新修改后的员工信息:

@RequestMapping(value ="http://www.mamicode.com/emp/updateEmp/{empId}", method = {RequestMethod.PUT})
    @ResponseBody
    public Msg updateEmp(Employee employee){
        int result = employeeService.updateEmp(employee);
        if (result < 0){
            return Msg.fail().add("update-error", "更新异常");
        }
        return Msg.success();
    }

点击编辑的时候,有个员工信息的回显,所以需要在后台根据empId查询对应的员工信息再显示到页面中:

    /**
     * 根据员工id查询员工
     * @param empId 员工id
     * @return
     */
    @RequestMapping(value ="emp/getEmp/{empId}", method = {RequestMethod.GET})
    @ResponseBody
    public Msg getEmpById(@PathVariable("empId") Integer empId){

        if (empId >= 0){
            Employee employee = employeeService.getEmpById(empId);
            return Msg.success().add("employee", employee);
        }else {
            return Msg.fail();
        }
    }

 

前端:
1 修改的模态框:

    <!--修改员工Modal框-->
    <div class="modal fade" id="Emp_Update_Modal" tabindex="-1" role="dialog" aria-labelledby="emp_update_modal_label">
        <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="emp_update_modal_label">修改员工</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="emp_update_form">
                        <div class="form-group">
                            <label for="empName" 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 for="email" class="col-sm-2 control-label">email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="eamil" id="email_update" placeholder="email">
                                <span id="edit_helpBlock2" class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender:</label>
                            <div class="col-sm-offset-2 col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1__update_input" checked="checked" value="M"></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">
                                <select class="form-control" name="dId" id="deptName_select_update">
                                </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 为编辑按钮加上id:

 var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
                                                    .append( $("<span></span>").addClass("glyphicon glyphicon-pencil")

                                                            .append("编辑"));
                //修改的时候 ,获取点击的员工的id
                editBtn.attr("edit-id", item.empId);

3 前端获取员工信息:

        /**
         * 修改:获取员工信息
         */
        function getEmp(empId){
            $.ajax({
                url: "${APP_PATH}/emp/getEmp/"+empId,
                type : "GET",
                success: function (result) {
                    var empData = http://www.mamicode.com/result.extendInfo.employee;"#empName_update_static").text(empData.empName);
                    $("#email_update").val(empData.eamil);
                    $("#Emp_Update_Modal input[name=gender]").val(empData.gender);
                    $("#deptName_select_update").val(empData.dId);
                }
            });
        }

修改第一步:弹出修改模态框

 1) 点击编辑,弹出模态框
2) 查询部门信息,显示在部门下拉框中
3) 查询员工信息,进行回显,员工姓名只显示不允许修改
4) 将员工id赋值给 更新按钮

    $(document).on("click", ".edit_btn", function () {
            //1 查出部门信息,进行回显
            getDeptName("#deptName_select_update");
            //2 查出员工信息,进行回显
            getEmp($(this).attr("edit-id"));
            //3 把员工的 id 传给修改Modal框的更新按钮,获取id后点击更新按钮发送Ajax请求
            $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));

            $("#Emp_Update_Modal").modal({
                backdrop:"static",
                keyboard : true
            });
        });

5  修改第二步:保存修改信息

1) 点击更新按钮,进行邮箱格式验证
2) 将更改的表格内容序列化,发送Ajax请求,存入数据库;
3) 关闭模态框
4) 回到本页面
        $("#emp_update_btn").click(function () {
            var email = $("#email_update").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                show_validate_msg("#email_update", "error", "邮箱格式不正确!");
                return false;
            }else{
                show_validate_msg("#email_update", "success", "");
            }
            $.ajax({
                url: "${APP_PATH}/emp/updateEmp/"+ $(this).attr("edit-id"),
                type : "PUT",
                data : $("#emp_update_form").serialize(),
                success : function (result) {
                    //1 关闭模态框
                    $("#Emp_Update_Modal").modal("hide");
                    //2 回到本页面
                    to_page(currentPage);
                }
            });
        });

效果如图所示:

技术分享

 

SSM练手-增删改查-5-修改员工信息