版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/PZHU_CG_CSDN/article/details/80299723
基于 SpringMVC、Spring、MyBatis 的增删改查案例。
一、功能及涉及到的技术
功能点：
- 分页
- 数据校验
- jquery前端校验+JSR303后端校验
- ajax
- Rest风格的URI；使用HTTP协议请求方式的动词，来表示对资 源的操作（GET（查询），POST（新增），PUT（修改），DELETE （删除））
技术点：
- 基础框架 - ssm（SpringMVC+Spring+MyBatis）
- 数据库 - MySQL
- 前端框架 - bootstrap快速搭建简洁美观的界面
- 项目的依赖管理 - Maven
- 分页 - pagehelper
- 逆向工程 - MyBatis Generator
二、环境搭建：
- 创建一个maven工程
- 引入项目依赖的jar包
- spring
- springmvc
- mybatis
- 数据库连接池，驱动包
- 其他（jstl，servlet-api，junit）
- 引入bootstrap前端框架
- 编写ssm整合的关键配置文件 • web.xml，spring,springmvc,mybatis，使用mybatis的逆向工程生成对应的bean以 及mapper
- 测试mapper
三、操作流程及部分代码分析：
需要在 JSP 页面中导入 bootstrap 的 css 文件，以及 Jquery 文件。
1.加载页面查询所有员工信息：
效果：
步骤：
- index.jsp页面直接发送ajax请求进行员工分页数据的查询
- 服务器将查出的数据，以json字符串的形式返回给浏览器
- 浏览器收到js字符串。可以使用js对json进行解析，使用js通过 dom增删改改变页面。
- 返回json。实现客户端的无关性
构建表格数据：
//构建表格数据
var buildEempsTtable = function(data){
//在绑定数据前先清除之前的数据。
$("#emps_table tbody").empty();
$.each(data.map.pageInfo.list,function(index,item){
//alert(item.empName);
var checkBoxTd = $("<td></td>").append($('<input type="checkbox" class="checkItem"/>'));
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 telTd = $("<td></td>").append(item.tel);
var deptNameTd = $("<td></td>").append(item.dept.deptName);
//把当前员工的 ID 添加在编辑和删除按钮上，方便后面使用
var editBnt = $("<button></button>").addClass("btn btn-info btn-sm edit-bnt")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
.append("编辑").attr("empId",item.empId);
var deleBnt = $("<button></button>").addClass("btn btn-danger btn-sm delete-bnt")
.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
.append("删除").attr("empId",item.empId);
var bntTd = $("<td></td>").append(editBnt).append(" ").append(deleBnt);
$("<tr></tr>").append(checkBoxTd)
.append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(telTd)
.append(deptNameTd)
.append(bntTd)
.appendTo($("#emps_table tbody"));
});
}
构建导航栏：
//构建导航栏
var buildNavi = function(data){
//清空
$("#pageData").empty();
var curPage = data.map.pageInfo.pageNum;
var pageTotal = data.map.pageInfo.pages;
var total = data.map.pageInfo.total;
$("#pageData").append("当前<kbd>"+curPage+"</kbd>页,共有<kbd>"+pageTotal+"</kbd>页,一共有<kbd>"+total+"</kbd>条数据。");
totalResult = total;
//清空
$("#navi").empty();
var ul = $("<ul></ul>").addClass("pagination");
var firstPage = $("<li></li>").append($("<a></a>").append("首页").attr("herf","#"));
var endPage = $("<li></li>").append($("<a></a>").append("末页").attr("herf","#"));
var lastPage = $("<li></li>").append($("<a></a>").attr("href","#")
.append($("<span></span>").append("«")));
var nextPage = $("<li></li>").append($("<a></a>").attr("href","#")
.append($("<span></span>").append("»")));
currentPage = curPage;
if(curPage <= 1){
lastPage.addClass("disabled");
}
if(curPage >= pageTotal){
nextPage.addClass("disabled");
}
//为上一页、下一页、首页、末页添加点击事件。
lastPage.click(function(){
getEmpData(curPage-1);
});
nextPage.click(function(){
getEmpData(curPage+1);
});
firstPage.click(function(){
getEmpData(1);
});
endPage.click(function(){
getEmpData(pageTotal);
});
//添加首页和上一页
ul.append(firstPage).append(lastPage);
//添加当前显示的导航页
$.each(data.map.pageInfo.navigatepageNums,function(index,item){
//var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","emps?pagenum="+item+""));
var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
if(item == curPage){
numLi.addClass("active");
}
//添加点击事件
numLi.click(function(){
getEmpData(item);
});
ul.append(numLi);
});
//添加下一页和末页
ul.append(nextPage).append(endPage);
$("<nav></nav>").append(ul).appendTo($("#navi"));
}
2.新增员工：
效果：
步骤：
- 在index.jsp页面点击”新增”
- 弹出新增对话框
- 去数据库查询部门列表，显示在对话框中
- 用户输入数据，并进行校验
- jquery前端校验，ajax用户名重复校验，重要数据（后端校验(JSR303)，唯一约束）；
完成保存
- URI:
- /emp/{id} GET 查询员工
- /emp POST 保存员工
- /emp/{id} PUT 修改员工
- /emp/{id} DELETE 删除员工
3.修改员工信息：
效果：
步骤：
- 点击编辑
- 弹出用户修改的模态框（显示用户信息）
- 点击更新，完成用户修改
4.删除员工信息：
效果：
步骤：
- 批量删除：将要删除员工的 ID 拼凑成字符串传到后台去解析，再进行删除。
- 单个删除：直接传 ID 删除。
全选、全不选、复选框的单击事件：
//全选/全部选
$(document).on("click","#checkAll",function(){
/**
var flag = $(this).attr("checked");
在这里获取的是 undefined，最好使用 prop 去获取控件原生的属性值；
而 使用 attr 去获取自定义的属性值。
*/
var flag = $(this).prop("checked");
$(".checkItem").prop("checked",flag);
});
//为员工复选框添加单击事件，当全部选中时触发全选
$(document).on("click",".checkItem",function(){
//1.获取被选中的复选框个数
var checkedItem = $(".checkItem:checked").length;
//2.获取所有的员工复选框个数
var allCheckItem = $(".checkItem").length;
//3.如何相等就触发全选事件
var flag = checkedItem == allCheckItem;
$("#checkAll").prop("checked",flag);
});
四、总结：
由于代码太多就不粘贴了，可以到这里下载项目源代码https://github.com/BZ-CG/ssm-crud