Spring+SpringMVC+Mybatis实现增删改查--（五）SSM修改员工页面搭建

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@lcz.com"><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)@ResponseBodypublic 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@lcz.com"><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@lcz.com"><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("编辑");//为编辑按钮添加一个自定义的属性，来表示当前员工的ideditBtn.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>

Spring+SpringMVC+Mybatis实现增删改查--（五）SSM修改员工页面搭建相关推荐

整合SSM（Spring+SpringMVC+MyBatis）-增删改查（上）
新建maven web工程,添加web.xml 添加pom文件以及依赖,update项目.然后添加maven依赖. <project xmlns="http://maven.apach ...
Spring Boot (十五)： Spring Boot + Jpa + Thymeleaf 增删改查示例
<p>这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例.</p> 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭 ...
MyBatis实现增删改查功能（总）
文章目录 MyBatis实现增删改查功能(总) 一.创建数据库.表.数据二.MyBatis的Maven项目创建三.MyBatis的Maven模块创建四.配置jar包pom.xml 五.MyBat ...
mybatis实现增删改查xml配置和后端Java编程完整教程
mybatis实现增删改查xml配置和后端编程教程 SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8&quo ...
mybatis完整增删改查入门实例
mybatis完整增删改查入门实例编程步骤 ①创建Java工程. ②导入jar包. ③创建sqlMapConfig.xml配置文件,这是mybatis的入口. ④创建数据库,数据库表user_c,插 ...
idea使用mybatis写增删改查
idea应用mybatis写增删改查 entity层 private Integer id;private String userCode;private String userName;privat ...
MyBatis的增删改查操作
MyBatis的增删改查操作简单实现一下MyBatis的增删改查,并且在控制台输出结果. 文章目录 MyBatis的增删改查操作 MyBatis的简单入门一.查询操作二.增加操作三.修改操作 ...
Mybatis实现增删改查
文章目录 Mybatis实现增删改查一.mybatis的配置 1.1 添加相应的jar包 1.2 配置mybatis.xml文件 1.3 创建数据库 1.4 创建实体类 1.5 创建接口实现的方法 ...
java ssm框架做增删改查,使用SSM框架组合实现增删改查的功能
基于ssm框架组合的增删改查功能 ssm框架组合之前已经搭建完成了,下面基于该框架组合实现增删改查的功能,首先创建一个数据库和一张表: CREATE DATABASE `ssmteam` /*!401 ...

Spring+SpringMVC+Mybatis实现增删改查--（五）SSM修改员工页面搭建

Spring+SpringMVC+Mybatis实现增删改查--（五）SSM修改员工页面搭建相关推荐

最新文章

热门文章