其他分享
首页 > 其他分享> > SSM整合_年轻人的第一个增删改查_修改

SSM整合_年轻人的第一个增删改查_修改

作者：互联网

写在前面

SSM整合_年轻人的第一个增删改查_基础环境搭建
SSM整合_年轻人的第一个增删改查_查找
SSM整合_年轻人的第一个增删改查_新增
SSM整合_年轻人的第一个增删改查_修改
SSM整合_年轻人的第一个增删改查_删除
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、修改

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

image

1. 员工修改模态框

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

    		<!-- 为修改 按钮 增加模态框 ，利用按钮的on方法事件绑定-->
		<!-- Modal -->
		<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" id="myModalLabel">员工更新</h4>
					</div>
					<div class="modal-body">
						<!-- 添加表单 -->
						<form class="form-horizontal">
							<!-- 姓名 -->
							<div class="form-group">
								<label for="empName_update_input" class="col-sm-2 control-label">EmpName</label>
								<div class="col-sm-10">
                                    <!-- 输入框改为静态控件，只读-->
									<p class="form-control-static" id="empName_update_input"></p>
									<!-- 用来显示错误提示 -->
									<span class="help-block"></span>
								</div>
							</div>
							<!-- 邮箱 -->
							<div class="form-group">
								<label for="email_update_input" class="col-sm-2 control-label">Email</label>
								<div class="col-sm-10">
									<input type="email" class="form-control" name="email" id="email_update_input"
										placeholder="empName@123.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 for="gender1_update_input"> <input type="radio"
										name="gender" id="gender1_update_input" name="gender" value="M" checked>
										男
									</label>
									<label for="gender2_update_input"> <input type="radio"
										name="gender" id="gender2_update_input" name="gender" value="F">
										女
									</label>
								</div>
							</div>
							<!-- 部门下拉框 -->
							<div class="form-group">
								<label  class="col-sm-2 control-label">DeptName</label>
								<div class="col-sm-10">
									<select class="form-control" name="dId" id="deptName_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. 在修改按钮上添加一个标识，之前在构建员工表时已经添加过

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

        <!-- 添加能直接处理PUT请求的过滤器 -->
    <!-- HttpPutFormContentFilter过时了，使用 FormContentFilter能支持PUT和DELETE-->
    <filter>
        <filter-name>formContentFilter</filter-name>
        <filter-class>org.springframework.web.filter.FormContentFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>formContentFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

  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);
	}

标签：edit,改查,SSM,employee,emp,增删,btn,id,result
来源： https://www.cnblogs.com/wei-ran/p/16131465.html