写在前面

GitHub：https://github.com/say-hey/ssm_crud
Gitee：https://gitee.com/say-hey/ssm_crud

??有用吗？对于学完Spring、SpringMVC、Mybatis还无从下手的同学来说这是一个很好引子。对于正在学习同一个案例的同学，可能解决一些问题。对于需要这个案例的同学可以直接获取。

??有什么？：xml配置文件编写，引入一个简单的前端框架，使用MyBatis Generator逆向工程生成一些代码，使用框架简单快速搭建一个页面，好用的分页工具PageHelper，简单的前后端分离，发送ajax请求，利用json传递数据，增、删、改、查的简单实现。

??简单吗？内容很简单，涉及Java代码不多，但是对于新手来说，最困难的部分是各种环境搭建、配置文件、版本冲突，如果能够根据错误提示动手解决，那就是一大进步。

??怎么学？如果有时间可以在B站搜索：ssm整合crud，雷丰阳讲的。如果想看到每个功能的实现过程和源码，可以在这里学习，每个步骤都有注释。也可以作为复习快速浏览。

4、修改

回显、更新数据，效果如图

1. 员工修改模态框

1. 与新增相似，在index.jsp添加一个模态框，用户名输入框改为只读

   		
   		
   		
   
   			
   
   				
   
   					
   
   						
   							×
   						
   						
   员工更新
   					
   					
   
   						
   						
   
   							
   							
   
   								EmpName
   								
   
                                       
   									
   
   									
   									
   								
   							
   							
   							
   
   								Email
   								
   
   									
   									
   									
   								
   							
   							
   							
   
   								Gender
   								
   
   									
   									 
   										男
   									
   									 
   										女
   									
   								
   							
   							
   							
   
   								DeptName
   								
   
   									
   								
   							
   
   						
   
   					
   					
   
   						关闭
   						更新
   					
   				
   			
   		
   

2. 在修改按钮上添加一个标识，之前在构建员工表时已经添加过

       //构建员工表
       function build_emps_table(result) {
       	//...
           //1. 在修改删除按钮上统一添加 类标识 edit_btn  delete_btn
           var editBtn = $("").addClass(
           "btn btn-primary btn-sm edit_btn").append("")
           .addClass("glyphicon glyphicon-pencil").append("编辑");
           editBtn.attr("edit-id", item.empId);
           //2. 在 编辑/删除 按钮上添加当前所选对象id.或者从这个的父层查找第一个tr第一个td的值
           var delBtn = $("").addClass(
           "btn btn-danger btn-sm delete_btn").append("")
           .addClass("glyphicon glyphicon-trash").append("删除");
           delBtn.attr("del-id", item.empId);
   
           //...
       }
   

3. 选择元素绑定事件

       //利用on()方法来绑定事件，用参数指定被添加子元素，因为事件在在页面加载时就绑定了，而按钮是在页面加载之后ajax
       //请求发送之后创建，使所以不能用click事件，而document是一开始就存在的
       $(document).on("click",".edit_btn",function(){
   
           //一定要注意的顺序，要查出部门之后再回显！！！！！！！！！！！！！！！！
   
           //查出部门信息
           getDepts("#empUpdateModal select");
   
           //显示模态栏
           $("#empUpdateModal").modal({
               backdrop : "static"
           });
       })
   

2. 回显员工信息

1. 要获取回显哪个员工的信息，可以在构建员工表的按钮上，添加一个属性记录员工id，在上个步骤已经添加

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

2. 查询要回显的员工信息

   ajax请求getEmp()

       //----------------------修改------------------------
       //利用on()方法来绑定事件，用参数指定被添加子元素，因为事件在在页面加载时就绑定了，而按钮是在页面加载之后ajax
       //请求发送之后创建，使所以不能用click事件，而document是一开始就存在的
       $(document).on("click",".edit_btn",function(){
   
           //一定要注意的顺序，要查出部门之后再回显！！！！！！！！！！！！！！！！
   
           //2.查出部门信息
           getDepts("#empUpdateModal select");
           //1.查出员工信息
           getEmp($(this).attr("edit-id"));
   
           //显示模态栏
           $("#empUpdateModal").modal({
               backdrop : "static"
           });
       })
   
       //ajax查询员工信息  REST风格编程 GET path/emp/1
       function getEmp(id){
           $.ajax({
               url:"${PATH}/emp/"+id,
               type:"GET",
               success:function(result){
                   console.log(result)
                   $("#empName_update_input").text(result.extend.emp.empName);
                   $("#email_update_input").val(result.extend.emp.email);
                   $("#empUpdateModal input[name=gender]").val([result.extend.emp.gender]);
                   $("#deptName_update_select").val([result.extend.emp.dId]);
                   //回显注意顺序，先查出部门，再回显
                   //alert(result.extend.emp.dId)
                   //$("#empUpdateModal select").attr("value",result.extend.emp.dId);
               }
           });
       }
   

   EmployeeController

   	/**
   	 * 查询用户，用于修改模态框回显
   	 * REST风格
   	 * @param id
   	 * @return
   	 */
   	@ResponseBody
   	@RequestMapping(value="/emp/{id}",method = RequestMethod.GET)
   	public Msg getEmp(@PathVariable("id")Integer id) {
   		Employee employee = employeeService.getEmp(id);
   		return Msg.success().add("emp", employee);
   	}
   

   EmployeeService

   	/**
   	 * 根据id查用户
   	 * @param id
   	 * @return
   	 */
   	public Employee getEmp(Integer id) {
   		Employee employee = employeeMapper.selectByPrimaryKey(id);
   		return employee;
   	}
   

3. 修改请求

1. 验证修改之后的邮箱格式

   		//给更新模态框表单验证邮箱
   		$("#email_update_input").change(function(){
   			form_checkemail("#email_update_input");
   		})
   

2. 获取要更新的员工id，保存id更新用

   		//利用on()方法来绑定事件，用参数指定被添加子元素，因为事件在在页面加载时就绑定了，而按钮是在页面加载之后ajax
   		//请求发送之后创建，使所以不能用click事件，而document是一开始就存在的
   		$(document).on("click",".edit_btn",function(){
   			
   			//一定要注意的顺序，要查出部门之后再回显！！！！！！！！！！！！！！！！
   			
   			//2.查出部门信息
   			getDepts("#empUpdateModal select");
   			//1.查出员工信息
   			getEmp($(this).attr("edit-id"));
   			//3.保存id更新用
   			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
   			//显示模态栏
   			$("#empUpdateModal").modal({
   				backdrop : "static"
   			});
   		})
   

3. 配置处理PUT的过滤器

       
       
       
           formContentFilter
           org.springframework.web.filter.FormContentFilter
       
       
           formContentFilter
           /*
       
   

4. 发送PUT请求

   //给更新按钮添加更新 REST风格编程 PUT path/emp/1
       //方法一：普通请求 type=POST;data:xxx&_method=PUT，就是添加一个_method=PUT，在表单中使用时一般设为hidden
       //hiddenHttpMethodFilter过滤器会把普通请求转成PUT，DELETE
       /*$("#emp_update_btn").click(function(){
           $.ajax({
               url:"${PATH}/emp/"+$(this).attr("edit-id"),
   				type:"POST",
   				data:$("#empUpdateModal form").serialize()+"&_method=PUT",
   				success:function(result){
   					console.log(result)
   				}
   			});
   		});*/
       //方法二：添加过滤器FormContentFilter,不要添加HttpPutFormContentFilter，他过时了
       $("#emp_update_btn").click(function(){
           $.ajax({
               url:"${PATH}/emp/"+$(this).attr("edit-id"),
               type:"PUT",
               data:$("#empUpdateModal form").serialize(),
               success:function(result){
                   console.log(result)
                   //成功之后
                   //1.关闭模态框
                   $("#empUpdateModal").modal("hide");
                   //2.回到本页面，全局参数，在分页数据部分记录的
                   to_page(currentPage);
               }
           });
       });
   

5. 实现更新

   EmployeeController

       /**
        * 更新操作
        * PUT
        * 注意添加过滤器；FormContentFilter
        * @param employee
        * @return
        */
       @ResponseBody
       @RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
       public Msg updateEmp(Employee employee) {
           System.out.println("待更新对象："+employee);
           employeeService.updateEmp(employee);
           return Msg.success();
       }
   

   EmployeeService

   	/**
   	 * 根据id更新用户
   	 * updateByPrimaryKeySelective(employee)根据id有选择的更新
   	 * @param employee
   	 */
   	public void updateEmp(Employee employee) {
   		employeeMapper.updateByPrimaryKeySelective(employee);
   	}