前面已经搭建好了ssm框架了，这一章节就写一下员工的crud了，都是一步步来操作，前台页面使用的Bootstrap来操作。如果idea中搭建ssm不会的可以去看一下《idea-ssm-crud项目实战（二）》好了现在开始了。
最终效果：
页面布局
使用bootstrap布局很简单，使用bootstrap的栅格系统、按钮、表格以及分页插件就好了。
这个布局很简单了就是分为上中下3行就可以了，这个直接使用bootstrap的栅格系统，由于这个很简单直接在代码中写上注释.
首先使用bootstrap的栅格系统https://v3.bootcss.com/css/#grid，如图
看代码
代码语言：javascript复制<div class="container">
<%--按钮--%>
<div class="row">
<%--站4格偏移8格--%>
<div class="col-md-4 col-md-offset-8">
</div>
</div>
<%--内容--%>
<div class="row">
<div class="col-md-12">
</div>
</div>
<%--分页--%>
<div class="row">
<%--显示前面--%>
<div class="col-md-6">
</div>
<%--分页显示--%>
<div class="col-md-6">
</div>
</div>
</div>以上代码很简单了，就是分为了上中下3行，现在开始填代码了。
1.在按钮注释的div中添加一个按钮，这个按钮也在bootstrap官方文档中找如图：
找到自己觉得合适的按钮然后复制代码到按钮的div部分
代码语言：javascript复制<%--站4格偏移8格--%>
<div class="col-md-4 col-md-offset-8">
<button type="button" class="btn btn-primary">添加</button>
</div>声明一下栅格系统是宽度总共是12个格子,现在来解释一下col-md-4 clo-md-offset-8。
这2个样式是该div占4个格子，偏移8个格子，也就是说从第五个格子开始占位。
2.在内容的div中添加一个表格，这个按钮也在bootstrap官方文档中找如图：
在内容区域直接输入以下代码,由于表格的tbody区域都是使用ajax来加载的所以只需要一个table的架子即可。
代码语言：javascript复制<table class="table table-hover">
<thead>
<tr>
<th>员工ID</th>
<th>员工名称</th>
<th>员工性别</th>
<th>员工邮箱</th>
<th>所属部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>3.分页显示位置填上分页插件的代码，这个分页插件也在bootstrap官方文档中找如图：
直接复制以上代码到分页显示的div就可以了，这里都需要使用ajax来获取真实数据来加载所以就先不粘贴了。好了差不多这里已经布局玩了，添加后续在加。
查询所有员工数据
这个查询员工所有数据上一章节已经测试通过了，这里就不再赘述了，现在稍微改造几个地方。
1.为了spring结构更加清晰，将applicationContext.xml分为2个文件，一个是applicationContext-dao.xml和applicationContext-service.xml,代码几乎都没有改变，具体查看github源码。
2.所有ajax返回数据都应该为json格式返回，这样有利于其它平台调用，为了使用返回json方便，统一创建一个message类来返回。
message类代码：
代码语言：javascript复制public class Message {
/**
* code=200成功代码，其它代码可以自定义
*/
private int code;
/**
* 表示成功还是错误
*/
private boolean isSuccess;
/**
* 返回信息
*/
private String msg;
/**
* 返回前台数据源
*/
private Map<String,Object> maps = new HashMap<>();
getter和setter省略.......
/**
* 成功返回
* @return
*/
public static Message getSuccess() {
Message message = new Message();
message.setCode(200);
message.isSuccess = true;
message.setMsg("操作成功");
return message;
}
/**
* 错误返回
* @return
*/
public static Message getError() {
Message message = new Message();
message.setCode(100);
message.isSuccess = false;
message.setMsg("操作失败");
return message;
}
/**
* 数据源添加数据
* @param key
* @param value
* @return
*/
public Message addAttribute(String key,Object value) {
maps.put(key,value);
return this;
}
}好了现在可以写前后台交互的代码了，前台使用ajax交互后台的/employyee/list对应的控制器方法。
1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数
2.首先需要在页面加载之后加载数据需要使用到$(function(){});
查看前端js代码
代码语言：javascript复制<script type="text/javascript">
/**
* 1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数
* 2.首先需要在页面加载之后加载数据需要使用到$(function(){});
*/
$(function(){
//默认获取第一页
pageload(1);
});
function pageload(pageIndex) {
$.ajax({
url:"${pagePath}/employee/list",
data:{
pageIndex : pageIndex,
time : new Date().getDate()
},
type:"GET",
success : function (result) {
console.log(result)
}
});
}
</script>控制器代码
代码语言：javascript复制 @RequestMapping("/list")
@ResponseBody
public Message list(@RequestParam(value = "pageIndex",defaultValue = "1")
Integer pageIndex) throws Exception {
PageHelper.startPage(pageIndex, pageSize);
List<EmployeePoJo> employees = employeeService.findALL(null);
//用PageInfo对结果进行包装,每次连续显示为5页
PageInfo<EmployeePoJo> pageInfo = new PageInfo<>(employees,5);
return Message.getSuccess().addAttribute("pageInfo",pageInfo);
}web.xml的配置就不用多说了，如果需要的可以直接github地址上查看代码,现在运行结果。
从上图可以看出数据获取到前端了,并且非常详细，分页信息，数据源，多少页，多少记录数等等都显示出来了。现在就直接可以拼接前端的标签代码了。
前台显示
前台页面显示需要以下几个方法：
1.显示table内容的方法
代码语言：javascript复制function loadTable(employeeList) {
//给table加上一个id，这里好获取对象
var employeeTable = $("#employeeTable");
$.each(employeeList,function (index, item) {
var tr = $("<tr></tr>");
//将下面的td全部都添加到tr中
$("<td></td>").append(item.empId).appendTo(tr);
$("<td></td>").append(item.empName).appendTo(tr);
$("<td></td>").append(item.gender).appendTo(tr);
$("<td></td>").append(item.email).appendTo(tr);
$("<td></td>").append(item.department.deptName).appendTo(tr);
//创建修改和删除按钮
var btn_eidt_employee = $('<button type="button" class="btn btn-primary eidt_employee">修改</button>');
var btn_del_employee = $('<button type="button" class="btn btn-danger del_employee">删除</button>');
$("<td></td>").append(btn_eidt_employee).append(btn_del_employee).appendTo(tr);
//在将tr添加到tbody中
employeeTable.append(tr);
});
}2.显示分页的方法，我将分页绑定插件的方法分拆了多个方法，上一页，下一页，首页，尾页，和中间页码的一共5个方法
代码语言：javascript复制/**
* 显示分页详细信息
*/
function page_info_show(pageInfo) {
var page_info_area = $("#page_info_area");
page_info_area.empty();
page_info_area.append("当前" pageInfo.pageNum "页,总"
pageInfo.pages "页,总"
pageInfo.total "条记录");
pages = pageInfo.pages;
pageIndex = pageInfo.pageNum;
}
/**
* 分页方法
*/
function paginationFun(pageInfo) {
//添加时都需要先清空一下
pagination.empty();
//首页
firstPageFun();
//将上一页控件添加到分页ul中
previousPageFun();
//分页插件中间部分
page_lis(pageInfo);
//下一页
nextPageFun();
//尾页
lastPageFun();
}最后的显示结果
分页的事件
每个页码绑定事件就很简单了。在写pageload方法当时就只是传入一个pageIndex页码就可以了，现在也就是只需要为页号绑定个事件。
现在就需要给页码的li上加上class="page_li" pageIndex="' item '"，为了后期绑定事件使用，在用jquery事件绑定一下就可以了，看代码。
代码语言：javascript复制pagination = $("#pagination");
/**
* 页码绑定事件
*/
pagination.on("click",".page_li",function () {
pageIndex = $(this).attr("pageIndex");
pageload(pageIndex);
});首页，尾页，上一页，下一页也类似，看看代码吧。
代码语言：javascript复制/**
* 首页事件绑定
*/
pagination.on("click",".firstPage",function () {
pageload(1);
});
/**
* 上一页
*/
pagination.on("click",".previous",function () {
if(pageIndex > 1) {
pageload(pageIndex - 1);
}
});
/**
* 下一页
*/
pagination.on("click",".next",function () {
if(pageIndex < pages) {
pageload(pageIndex 1);
}
});
/**
* 尾页事件绑定
*/
pagination.on("click",".lastPage",function () {
pageload(pages);
});现在分页的是事件就全部绑定成功了,应该很简单吧，好了先写到这里吧，应该有很多人都知道后面该怎么写了吧。
END
