Spring+SpringMVC+Mybatis实现增删改查--(五)SSM修改员工页面搭建
修改员工:
1.在index.jsp页面点击“编辑”弹出编辑对话框
2.去数据库查询部门列表,显示在编辑对话框中
3.去数据库查询员工信息,并显示在编辑对话框中
4完成更新,这里发送POST请求,REST风格用于区别增删改查。
新增员工的具体流程步骤
1.点击编辑弹出用户修改的模态框(显示用户信息)
(1)如果直接在按钮上绑定点击事件,是不起作用的
$(“.edit_btn”).click(function(){ alert(“edit”); });
(2)在jquery帮助文档中搜索按钮绑定事件on
(3)按钮的具体绑定事件
//给编辑按钮绑定点击 事件 $(document).on("click",".edit_btn",function(){ //alert("edit"); //1.查出部门信息,并显示部门列表 //发送ajax请求,查出部门信息,显示在下拉列表中 getDepts("#empUpdateModal select"); //2.查出员工信息,并显示员工信息 getEmp($(this).attr("edit-id")); //3.把员工的id传递给模态框的更新按钮 $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id")); $("#emp_update_btn") //弹出模态框 $("#empUpdateModal").modal({ backrop:"static" }); });
(4)编辑模态框的源码
<!--员工修改的模态框 --> <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">×</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_add_input" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <p class="form-control-static" id="empName_update_static"></p> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="email_add_input" 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 protected]"> <span class="help-block"></span> </div> </div> <!-- 性别 --> <div class="form-group"> <label for="email_add_input" 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 for="email_add_input" 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.查出部门信息同上一文章,
3.查出员工信息
(1)发出ajax请求
//查询员工信息 function getEmp(id){ $.ajax({ url:"${APP_PATH}/emp/"+id, type:"GET", success:function(result){ //console.log(result); var empData=result.data.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]); } }); }
(2)EmployeeController调用employeeService的更新方法
/** * 员工更新方法 * * @param employee * @return */ @RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT) @ResponseBody public Msg saveEmp(Employee employee) { employeeService.updateEmp(employee); return Msg.success(); }
4.更新操作
(1)校验邮箱信息
(2)发送ajax请求保存员工数据(关闭对话框、回到本页面)
//点击更新,更新员工信息 $("#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_add_input","error","邮箱格式不正确"); return false; }else{ show_validate_msg("#email_add_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); } }); });
这里我们要能支持直接发送PUT之类的请求爱要封装请求体中的数据,配置上HttpPutForContentFilter。它的作用是将请求体中的数据解析包装成一个map。request被重新包装,request.getParameter()被重写,就会从自己封装的map中取数据。
在web.xml中配置HttpPutForContentFilter过滤器
<!-- 配置过滤器 --> <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页面源码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工列表</title> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路径: 不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。 以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名 http://localhost:3306/crud --> <script type="text/javascript" src="${APP_PATH }/static/js/jquery-3.3.1.min.js"></script> <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <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">×</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_add_input" 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 for="email_add_input" 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 protected]"> <span class="help-block"></span> </div> </div> <!-- 性别 --> <div class="form-group"> <label for="email_add_input" 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 for="email_add_input" 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">×</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_add_input" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <p class="form-control-static" id="empName_update_static"></p> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="email_add_input" 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 protected]"> <span class="help-block"></span> </div> </div> <!-- 性别 --> <div class="form-group"> <label for="email_add_input" 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 for="email_add_input" 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> <!-- 分割线 --> <!-- 搭建显示页面 --> <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">删除</button> </div> </div> <br> <!-- 显示表格数据 --> <div class="row"> <div class="col-md-12"> <table class="table table-hover" id="emps_table"> <thead> <tr> <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 totalRecord;//总记录数 var 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_table(result); //2、解析并显示分页信息 build_page_info(result); //3、解析显示分页条数据 build_page_nav(result); } }); } //解析并显示员工数据 function build_emps_table(result){ //清空table表格 $("#emps_table tbody").empty(); var emps=result.data.pageInfo.list;//所有的员工数据 //遍历所有的员工数据 $.each(emps,function(index,item){ //alert(item.empName); //构建表格 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 edit_btn"> <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); var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除"); var btnTd=$("<td></td>").append(editBtn).append(" ").append(delBtn); //append方法执行完成以后还是返回原来的元素 $("<tr></tr>").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.data.pageInfo.pageNum+"页,总共"+result.data.pageInfo.pages+"页,总共"+result.data.pageInfo.total+"记录数"); totalRecord=result.data.pageInfo.total;//将总记录数保存到全局变量中 currentPage=result.data.pageInfo.pageNum;//将当前页保存到全局变量 } /** <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> */ //解析并显示分页条,点击分页能去下一页.. function build_page_nav(result){ //page_nav_area //清空列表 $("#page_nav_area").empty(); var ul=$("<ul></ul>").addClass("pagination"); //首页 var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#")); //前一页 var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //如果没有前页的话,首页和前页隐藏 if(result.data.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); }else{ //为元素添加点击翻页的事件 //首页的点击事件 firstPageLi.click(function(){ to_page(1); }); //前一页的点击事件 prePageLi.click(function(){ to_page(result.data.pageInfo.pageNum -1); }); } //后一页 var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //末页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#")); //如果没有下一页的话,下一页的末页隐藏 if(result.data.pageInfo.hasNextPage == false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); }else{ //下一页的点击事件 nextPageLi.click(function(){ to_page(result.data.pageInfo.pageNum +1); }); //末页的点击事件 lastPageLi.click(function(){ to_page(result.data.pageInfo.pages); }); } //添加首页和前一页 ul.append(firstPageLi).append(prePageLi); //遍历给ul添加页码提示 $.each(result.data.pageInfo.navigatepageNums,function(index,item){ var numLi = $("<li></li>").append($("<a></a>").append(item)); //按钮加深颜色 if(result.data.pageInfo.pageNum==item){ numLi.addClass("active"); } //页码的点击事件 numLi.click(function () { to_page(item); }); //遍历给ul添加页码提示 ul.append(numLi); }); //添加下一页和末页的提示 ul.append(nextPageLi).append(lastPageLi); //把ul加入到nav元素中 var navEle=$("<nav></nav>").append(ul); //把nav元素放到div中 navEle.appendTo("#page_nav_area"); } //表单重置方法清空表单样式及内容 function reset_form(ele){ $(ele)[0].reset();//清空表单内容 //清空表单样式 $(ele).find("*").removeClass("has-error has-success"); $(ele).find(".help-block").text(""); } //点击新增按钮弹出新增对话框的点击事件 $("#emp_add_modal_btn").click(function () { //清除表单数据(表单完整重置(表单的数据,表单的样式)) reset_form("#empAddModal form"); //发送ajax请求,查出部门信息,显示在下拉列表中 getDepts("#empAddModal select"); //弹出模态框 $("#empAddModal").modal({ backrop:"static" }); }); //查出所有的部门信息并显示在下拉列表中 function getDepts(ele){ $(ele).empty(); $.ajax({ url:"${APP_PATH}/depts", type:"GET", success:function(result){ //{"code":0,"msg":"处理成功"," //data":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}} //显示部门信息在下拉列表中 $.each(result.data.depts,function(){ var optionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId); optionEle.appendTo(ele); }); } }); } //校验表单数据的方法 function validate_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 regEmail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if (!regEmail.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("success"==status){ $(ele).parent().addClass("has-success"); $(ele).next("span").text(msg); }else if ("error"==status) { $(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==0){ show_validate_msg("#empName_add_input","success","用户名可用"); $("#emp_save_btn").attr("ajax-va","success"); }else{ show_validate_msg("#empName_add_input","error",result.data.va_msg); $("#emp_save_btn").attr("ajax-va","error"); } } }); }); //新增对话框中的保存按钮事件,保存按钮 $("#emp_save_btn").click(function () { //0.对要提交给服务器的表单数据进行校验 if(!validate_add_form()){ return false; }; //0.判断之前的ajax用户名校验是否成功,如果成功才往下走 if($(this).attr("ajax-va")=="error"){ return; } //1.新增对话框中填写的表单信息提交给服务器进行保存 //2.发送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==0) { //员工保存成功之后,关闭模态框 ,来到最后一页显示刚才保存的数据 //1.关闭模态框 $("#empAddModal").modal('hide'); //2.来到最后一页,显示最后一页 to_page(totalRecord); }else{ //显示失败信息 //console.log(result); //有哪个字段的错误信息就显示哪个字段的 //{"code":1,"msg":"失败","data":{"errorFields":{"email":"邮箱格式不正确"}}} if(undefined!=result.data.errorFields.email){ //显示邮箱错误信息 show_validate_msg("#email_add_input","error",result.data.errorFields.email); } if(undefined!=result.data.errorFields.empName){ //显示员工名字的错误信息 show_validate_msg("#empName_add_input","error",result.data.errorFields.empName); } } } }); }); //给编辑按钮绑定点击 事件 $(document).on("click",".edit_btn",function(){ //alert("edit"); //1.查出部门信息,并显示部门列表 //发送ajax请求,查出部门信息,显示在下拉列表中 getDepts("#empUpdateModal select"); //2.查出员工信息,并显示员工信息 getEmp($(this).attr("edit-id")); //3.把员工的id传递给模态框的更新按钮 $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id")); $("#emp_update_btn") //弹出模态框 $("#empUpdateModal").modal({ backrop:"static" }); }); //查询员工信息 function getEmp(id){ $.ajax({ url:"${APP_PATH}/emp/"+id, type:"GET", success:function(result){ //console.log(result); var empData=result.data.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 regEmail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if (!regEmail.test(email)) { //alert("邮箱格式不正确"); //清空这个元素之前的样式 show_validate_msg("#email_add_input","error","邮箱格式不正确"); return false; }else{ show_validate_msg("#email_add_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); } }); }); </script> </body> </html>