SSM整合_年轻人的第一个增删改查_查找
wei-ran', 'icon-zhifeiji'],
// ['CSDN', 'https://www.xxxx.com/', 'icon-csdn'],
// ['Github', 'https://github.com/say-hey', 'icon-github'],
// ['Gitee', 'https://gitee.com/say-hey', 'icon-gitee'],
//
2024-10-20 15:15:33
原文
写在前面
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，雷丰阳讲的。如果想看到每个功能的实现过程和源码，可以在这里学习，每个步骤都有注释。也可以作为复习快速浏览。
2、查询
分页查询、ajax请求、json数据、通用返回类型，效果如图
1. 测试分页请求
先配置，然后测试，通过之后进行真正的请求
使用MyBatis分页插件PageHelper进行分页
添加依赖
<!-- mybatis 分页插件pagehelper -->
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
mybatis-config.xml添加插件，注意标签顺序<!-- 使用pagehelper插件 -->
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!-- 分页合理化，如果超出总页数，只显示最后一页，合理显示 -->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
index.jsp最上面添加转发请求<!-- 测试用 -->
<!-- 来到这个页面直接去展示员工的控制器-->
<jsp:forward page="/emps"></jsp:forward>
Controller
package com.ssm.controller; import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ssm.bean.Employee;
import com.ssm.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam; import java.util.List; /**
* 处理员工增删改查请求
*/
@Controller
public class EmployeeController { @Autowired
EmployeeService employeeService; /**
* 测试
* 查询所有员工数据
* 访问index.jsp首页查询所有数据并分页，将数据返回并跳转到list.jsp页面展示
* @param pn 页码，默认第一页
* @param model 传递出去的数据
* @return
*/
@RequestMapping("/emps")
public String testGetEmps(@RequestParam(value = "pn", defaultValue = "1")Integer pn, Model model){
//使用分页插件
//在使用之前只需要调用，传入页码，每页大小
PageHelper.startPage(pn, 5);
//startPage后面紧跟的就是一个分页查询
List<Employee> emps = employeeService.getAll();
//使用pageInfo包装查询后的结果，包括查询出来的数据，员工列表
//封装员工，设置连续显示页码
PageInfo<Employee> info = new PageInfo<>(emps, 5);
//只需要将pageinfo交给页面，里面封装了详细分页信息
model.addAttribute("pageInfo", info);
return "list";
}
}
Service
package com.ssm.service; import com.ssm.bean.Employee;
import com.ssm.dao.EmployeeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import java.util.List; @Service
public class EmployeeService {
@Autowired
EmployeeMapper employeeMapper; /**
* 查询所有员工数据
* @return
*/
public List<Employee> getAll() {
//查询所有
return employeeMapper.selectByExampleWithDept(null);
}
}
在
com.ssm.test中进行测试注意@WebAppConfiguration
package com.ssm.test; import com.github.pagehelper.PageInfo;
import com.ssm.bean.Employee; import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mock.web.MockHttpServletRequest;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit.jupiter.SpringExtension;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext; import java.util.List; //添加springmvc到spring容器
@WebAppConfiguration
//如果您想在测试中使用Spring测试框架功能（例如）@MockBean，则必须使用@ExtendWith(SpringExtension.class)。它取代了不推荐使用的JUnit4@RunWith(SpringJUnit4ClassRunner.class)
@ExtendWith(SpringExtension.class)
@ContextConfiguration(locations = {"classpath:applicationContext.xml","classpath:springmvc.xml"})
public class MvcTest { //传入springmvc的IOC，需要加注解
@Autowired
WebApplicationContext context;
//虚拟mvc请求，获取请求结果
MockMvc mockMvc; //每次使用都初始化
//junit4使用@Before，junit5使用@BeforeEach，在@Test方法之前运行
@BeforeEach()
public void initMockMvc() {
//创建MockMVC，模拟mvc请求
mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
} @Test
public void testPage() throws Exception {
//模拟发送请求拿到返回值，get，参数第八页，返回值
MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "8")).andReturn(); //请求成功后，请求域中会有pageInfo，取出 验证
MockHttpServletRequest request = result.getRequest();
PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
System.out.println("当前页码：" + pageInfo.getPageNum());
System.out.println("总页码：" + pageInfo.getPages());
System.out.println("总记录数：" + pageInfo.getTotal());
System.out.println("在页面连续显示页码"); int[] nums = pageInfo.getNavigatepageNums();
for (int i : nums) {
System.out.print(i + " ");
} System.out.println();
//员工数据也封装在pageinfo中
List<Employee> list = pageInfo.getList();
for(Employee e : list) {
System.out.println( e.getEmpId() + "--" +e.getEmpName() + "--" + e.getEmail());
}
}
}
输出
当前页码：8
总页码：202
总记录数：1010
在页面连续显示页码
6 7 8 9 10
36--b242634--b242634@123.com
37--26a8135--26a8135@123.com
38--5c13f36--5c13f36@123.com
39--da7c437--da7c437@123.com
40--28a4438--28a4438@123.com
2. 搭建分页页面
使用任意方法创建页面，或者如下所示。主要内容是一个表格，可以查看Bootstrap教程，复制需要的样式，然后粘贴，稍微修改。
在
list.jsp页面，添加下面代码<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 是否忽略EL表达式，默认true，导致不能访问jsp域，PATH不生效--%>
<%@ page isELIgnored="false"%>
<html>
<head>
<title>员工列表</title>
<%
/* 设置路径 以“/”开始的相对路径是从服务下开始查找http://localhost:8080 */
pageContext.setAttribute("PATH", request.getContextPath());
%>
<script src="${PATH}/static/jquery-1.12.4.js"></script>
<script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- row行必须包含在container中 -->
<div class="container">
<!-- 定义row行 -->
<!-- 标题 -->
<div class="row">
<!-- 定义col列 -->
<div class="col-md-12">
<h1>SSM_CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-2 col-md-offset-9">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger" id="emp_del_modal_btn">删除</button>
</div>
</div> <!-- 显示表格 -->
<div class="row">
<div class="col-md-12"> <table class="table table-hover" id="emps_table">
<!-- table table-striped--> <!-- 对表格分组 table-thead-tbody-tfoot -->
<thead>
<tr>
<th>
<input type="checkbox" id="check_all">
</th>
<th>#</th>
<th>EmpName</th>
<th>Gender</th>
<th>Email</th>
<th>DeptName</th>
<th>操作</th>
</tr>
</thead>
<tbody> <!-- 手动添加数据测试 --> <tr>
<td></td>
<td style="width: 80px">1</td>
<td>Tom</td>
<td>M</td>
<td style="width: 300px">Tom@123.com</td>
<td>研发部</td>
<td>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
新增
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</td>
</tr> </tbody>
</table>
</div> </div>
<!-- 分页数据 暂时占据位置，之后需要拼接-->
<div class="row"> <div class="col-md-4" id="page_info_area">
当前第xx页，总xx，
总xx条数据
</div>
<div class="col-md-6 col-md-offset-7" id="page_nav_area">
首页 << 1 2 3 4 5 >> 尾页
</div>
</div>
</div>
</body>
</html>
效果如下
3. 显示分页数据（JSTL）
添加JSTL表达式，然后从域中取出数据遍历到表格中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%-- 是否忽略EL表达式，默认true，导致不能访问jsp域，PATH不生效--%>
<%@ page isELIgnored="false" %>
<%-- 添加JSTL表达式 --%>
<%--报错的可以把jstl引入改成：<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<html>
<head>
<title>员工列表</title>
<%
/* 设置路径 以“/”开始的相对路径是从服务下开始查找http://localhost:8080 */
pageContext.setAttribute("PATH", request.getContextPath());
%>
<script src="${PATH}/static/jquery-1.12.4.js"></script>
<script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head>
<body>
<!-- row行必须包含在container中 -->
<div class="container">
<!-- 定义row行 -->
<!-- 标题 -->
<div class="row">
<!-- 定义col列 -->
<div class="col-md-12">
<h1>SSM_CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-2 col-md-offset-9">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger" id="emp_del_modal_btn">删除</button>
</div>
</div> <!-- 显示表格 -->
<div class="row">
<div class="col-md-12"> <table class="table table-hover" id="emps_table">
<!-- table table-striped--> <!-- 对表格分组 table-thead-tbody-tfoot -->
<thead>
<tr>
<th>
<input type="checkbox" id="check_all">
</th>
<th>#</th>
<th>EmpName</th>
<th>Gender</th>
<th>Email</th>
<th>DeptName</th>
<th>操作</th>
</tr>
</thead>
<tbody> <%-- 手动添加数据测试 --%>
<%-- <tr>
<td></td>
<td style="width: 80px">1</td>
<td>Tom</td>
<td>M</td>
<td style="width: 300px">Tom@123.com</td>
<td>研发部</td>
<td>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
新增
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</td>
</tr>--%> <!-- jstl表达式，取出后台发送数据 -->
<c:forEach items="${pageInfo.list}" var="p">
<tr>
<td style="width: 80px">${p.empId}</td>
<td>${p.empName}</td>
<td>${p.gender=="M"?"男":"女"}</td>
<td style="width: 300px">${p.email}</td>
<td>${p.department.deptName}</td>
<td>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
新增
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div> </div>
<!-- 分页数据 暂时占据位置，之后需要拼接-->
<div class="row"> <div class="col-md-4" id="page_info_area">
当前第xx页，总xx，
总xx条数据
</div>
<div class="col-md-6 col-md-offset-7" id="page_nav_area">
首页 << 1 2 3 4 5 >> 尾页
</div>
</div>
</div>
</body>
</html>
访问测试
上述方法是使用JSP页面混合JSTL语言，高耦合。对于分页栏，也可以用相似的方法，使用Bootstrap样式，利用JSTL语句遍历PageHelper数据，具体可以看
https://www.bilibili.com/video/BV17W411g7zP?p=15。
4. 返回分页json数据（Ajax）
使用json格式可以适用更多场景，需要引入
<!-- springmvc 返回json数据，@ResponseBody -->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.10.1</version>
</dependency>
注释掉以前的
/emps重新编写方法，添加@ResponseBody注解，将分页部分移到Service中EmployeeController
@ResponseBody
@RequestMapping("/emps")
public PageInfo getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn) {
PageInfo pageInfo = employeeService.getPage(pn);
return pageInfo;
}
EmployeeService
public PageInfo getPage(Integer pn) {
// 分页查询
PageHelper.startPage(pn, 5);
List<Employee> emps = getAll();
PageInfo<Employee> pageInfo = new PageInfo<>(emps, 5);
return pageInfo;
}
访问
/emps，得到如下数据{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1010,"pages":202,"list":[{"empId":1,"empName":"Tom","gender":"M","email":"Tom@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":2,"empName":"ebeaf0","gender":"M","email":"ebeaf0@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":3,"empName":"0d4141","gender":"M","email":"0d4141@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":4,"empName":"85be92","gender":"M","email":"85be92@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":5,"empName":"2368d3","gender":"M","email":"2368d3@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"lastPage":5,"firstPage":1}
5. 通用返回类型
上面的方法只能传递PageHelper分页数据，如果是添加、删除操作，不能通知页面是否成功，所以要封装一个类，用来传递所有消息。
在
com.ssm.bean中创建类package com.ssm.bean; import java.util.HashMap;
import java.util.Map; /**
* 通用返回类型
*/
public class Msg {
//状态码 2333成功 5555失败
private Integer code;
//提示信息
private String msg;
//用户返回给浏览器的数据
private Map<String,Object> extend = new HashMap<>(); //增加两个静态方法，一个成功，一个失败，再加一个添加数据的方法
public static Msg success() {
Msg result = new Msg();
result.setCode(2333);
result.setMsg("ʅ（´◔౪◔）ʃ");
return result;
}
public static Msg fail() {
Msg result = new Msg();
result.setCode(5555);
result.setMsg("o(ﾟДﾟ)っ啥！");
return result;
}
//添加查询出来的数据,
public Msg add(String key,Object value) {
// getExtend()就是Map的get方法，用于获取当前类的属性，然后再返回当前类，可以链式调用
this.getExtend().put(key, value);
return this;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
修改
/emps方法返回值类型@ResponseBody
@RequestMapping("/emps")
public Msg getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn) {
PageInfo pageInfo = employeeService.getPage(pn);
return Msg.success().add("pageInfo", pageInfo);
}
访问
/emps{"code":2333,"msg":"ʅ（´◔౪◔）ʃ","extend":{"PageInfo":{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1010,"pages":202,"list":[{"empId":1,"empName":"Tom","gender":"M","email":"Tom@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":2,"empName":"ebeaf0","gender":"M","email":"ebeaf0@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":3,"empName":"0d4141","gender":"M","email":"0d4141@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":4,"empName":"85be92","gender":"M","email":"85be92@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":5,"empName":"2368d3","gender":"M","email":"2368d3@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"firstPage":1,"lastPage":5}}}
6. 构建员工列表
使用任意方法创建页面，或者如下所示
现在可以使用json数据，利用ajax发送请求，获取数据然后渲染到页面，就可以将分离前后端
新建一个
index.jsp，将原始index.jsp给名为index2.jsp将
list.jsp中的表格复制过来，并删掉JSTL相关语句<%-- 解决乱码 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 是否忽略EL表达式，默认true，导致不能访问jsp域，PATH不生效--%>
<%@ page isELIgnored="false" %>
<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head> <%
/* 设置路径 以“/”开始的相对路径是从服务下开始查找http://localhost:8080 */
pageContext.setAttribute("PATH", request.getContextPath());
%>
<script src="${PATH}/static/jquery-1.12.4.js"></script>
<script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head>
<body>
<div class="container">
<!-- 定义row行 -->
<!-- 标题 -->
<div class="row">
<!-- 定义col列 -->
<div class="col-md-12">
<h1>SSM_CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-2 col-md-offset-9">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger" id="emp_del_modal_btn">删除</button>
</div>
</div> <!-- 显示表格 -->
<div class="row">
<div class="col-md-12"> <table class="table table-hover" id="emps_table">
<!-- table table-striped--> <!-- 对表格分组 table-thead-tbody-tfoot -->
<thead>
<tr>
<th>
<input type="checkbox" id="check_all">
</th>
<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-4" id="page_info_area"> </div>
<div class="col-md-6 col-md-offset-7" id="page_nav_area"> </div>
</div>
</div>
</body>
</html>
创建ajax请求
<script type="text/javascript">
$(function() {
$.ajax({
url : "${PATH}/emps",
// data : "pn=" + pn,
data : "pn=1",
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) {
//每次构建之前要清空
$("#emps_table tbody").empty(); //获取到员工列表
var emps = result.extend.pageInfo.list;
//利用jQuery的each遍历,index:索引 item：当前对象
$.each(emps, function(index, item) {
//alert(item.empName);
//创建出要展示的<td>标签
var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
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); //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("编辑"); //2. 在 编辑/删除 按钮上添加当前所选对象id.或者从这个的父层查找第一个tr第一个td的值
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("删除");
delBtn.attr("del-id",item.empId); //将俩个按钮放到td中去
var btnTd = $("<td></td>").append(editBtn).append(" ").append(
delBtn);
//append方法执行完之后还返回原来的元素，就是tr，可以继续添加
$("<tr></tr>").append(checkboxTd).append(empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(deptNameTd).append(
btnTd)
//添加到
.appendTo("#emps_table tbody")
});
} </script>
7. 构建分页条
构建分页条，将请求提取为方法
<script type="text/javascript">
//1.页面加载完成后，直接发送ajax请求，要到分页数据
$(function() {
//页面加载后去首页
to_page(1);
}); //2.查询指定页数据
function to_page(pn) {
$.ajax({
url : "${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) {
//每次构建之前要清空
$("#emps_table tbody").empty(); //获取到员工列表
var emps = result.extend.pageInfo.list;
//利用jQuery的each遍历,index:索引 item：当前对象
$.each(emps, function(index, item) {
//alert(item.empName);
//创建出要展示的<td>标签
var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
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); //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("编辑"); //2. 在 编辑/删除 按钮上添加当前所选对象id.或者从这个的父层查找第一个tr第一个td的值
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("删除");
delBtn.attr("del-id",item.empId); //将俩个按钮放到td中去
var btnTd = $("<td></td>").append(editBtn).append(" ").append(
delBtn);
//append方法执行完之后还返回原来的元素，就是tr，可以继续添加
$("<tr></tr>").append(checkboxTd).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.extend.pageInfo.pageNum + "页，总"
+ result.extend.pageInfo.pages + "页，总"
+ result.extend.pageInfo.total + "条数据");
//（后面用到）全局参数，获取总记录数，用来跳到最后一页
totalRecord = result.extend.pageInfo.total;
currentPage = result.extend.pageInfo.pageNum;
} //构建分页栏
function build_page_nav(result) {
//每次构建之前要清空
$("#page_nav_area").empty(); var nav = $("<nav></nav>");
var ul = $("<ul></ul>").addClass("pagination");
//首页，尾页，上一页，下一页
var firstPageLi = $("<li></li>").append(
$("<a></a>").append("首页").attr("href", "#"));
var lastPageLi = $("<li></li>").append(
$("<a></a>").append("尾页").attr("href", "#"));
var prePageLi = $("<li></li>").append(
$("<a></a>").append($("<span></span>").append("«")));
var nextPageLi = $("<li></li>").append(
$("<a></a>").append($("<span></span>").append("»")));
//var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
//var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //判断是否有前一页,如果没有则禁用，否则才添加点击事件
if (result.extend.pageInfo.hasPreviousPage == false) {
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
//为首页上一页添加点击事件
firstPageLi.click(function() {
to_page(1);
})
prePageLi.click(function() {
to_page(result.extend.pageInfo.pageNum - 1);
})
}
//判断是否有后一页，如果没有则禁用，否则才添加点击事件
if (result.extend.pageInfo.hasNextPage == false) {
lastPageLi.addClass("disabled");
nextPageLi.addClass("disabled");
} else {
//为下一页尾页添加点击事件
lastPageLi.click(function() {
to_page(result.extend.pageInfo.pages);
})
nextPageLi.click(function() {
to_page(result.extend.pageInfo.pageNum + 1);
})
} //1.添加首页和前一页
ul.append(firstPageLi).append(prePageLi);
//连续显示的页
$.each(result.extend.pageInfo.navigatepageNums, function(index,
item) {
//2.添加连续的页
var numLi = $("<li></li>").append(
$("<a></a>").append(item).attr("href", "#"));
//设置当前页激活状态，如果当前页就是被遍历的页，添加激活样式
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
//添加点击事件，这个li被点击就跳转 新请求会将数据再次渲染，页面就乱了，需清空
numLi.click(function() {
to_page(item);
});
ul.append(numLi);
});
//3.添加下一页和尾页
ul.append(nextPageLi).append(lastPageLi);
//4.将整个分页栏添加到合适位置
$("#page_nav_area").append(ul); } </script>
8. 页面效果
SSM整合_年轻人的第一个增删改查_查找的更多相关文章
- SSM整合_年轻人的第一个增删改查_基础环境搭建
写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...
- SSM整合_年轻人的第一个增删改查_新增
写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...
- IDEA搭建SSM实现登录、注册，数据增删改查功能
本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...
- Oracle学习总结_day01_day02_表的创建_增删改查_约束
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 更新: SELECT * FROM (SELECT R ...
- ssm学习（四）--完整的增删改查demo
上一篇文章简要介绍了将sping mvc加入整个框架,算是完成了ssm的集成.本节继续前面的内容,结合spring mvc做一个简单的增删改查demo. 1.首先,重写一下GeckoList.jsp页 ...
- 实训第一天--增删改查加hibernate+搭建环境常见问题
1. 搭建环境 安装 1)谷歌浏览器 2)jdk-7u67-windows-i586.exe 3)Tomcat7 4)NavicatforMySQL 两种方式: ftp://172.21.95 ...
- 第一套增删改查(htm+ashx完成)
1.展示人员列表htm文件: <a href="PersonEditAddNew.ashx?action=addnew">添加</a> </p> ...
- Ashx增删改查_动软
1.首先展示列表 ashx 讲究的是个替换 这些就是属于ashx麻烦的地方 public void ProcessRequest(HttpContext context) { context.Resp ...
- springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
随机推荐
- SQL注入工具sqlmap的使用
sqlmap使用 测试注入点 sqlmap -u "URL" 爆数据库 sqlmap -u "URL" --dbs 查看当前库 sqlmap -u " ...
- Django1.11 添加markdown语法支持
pip install markdown 在view.py 的视图界面:导入,圈起来的那两个包 对post进行处理, models.py 详情如下 测试,效果如图
- Java线程池七个参数详解
Java多线程开发时,常常用到线程池技术,这篇文章是对创建java线程池时的七个参数的详细解释. 从源码中可以看出,线程池的构造函数有7个参数,分别是corePoolSize.maximumPoolS ...
- python 面向对象的一些魔法方法和反射
1.with和__enter__,__exit__,__init__配合使用class A: def __init__(self): print('init') def __enter__(self) ...
- vue异步组件？
为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义.Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染Vue.compo ...
- Java有没有goto？
goto 是Java中的保留字,在目前版本的Java中没有使用.(根据James Gosling(Java之父)编写的<The Java Programming Language>一书的附 ...
- SSM-learning
架构流程图: 第一步:建立spring框架: 包括:建立所需要的dao层,sevice层和controller层和实体类,建立spring配置文件,配置自动扫描bean AccountDao: @Re ...
- 文件缓存tmpfs + 数据缓存SSDB（一）
一.文件缓存tmpfs 1.特性 1) 基于内存的文件系统,RAW+SWAP,虚拟内存 2) tmpfs使用虚拟内存,/dev/shm/使用共享内存 3) 访问速度快,可以动态调整大小 4) 没有持久 ...
- 机器学习之linear_model (线性回归算法模型)
1.matplotlib 首先看一下这个静态图绘制模块 静态图形处理 数据分析三剑客 Numpy : 主要为了给pandas提供数据源 pandas : 更重要的数据结构 matplotlib : 静 ...
- 设计一个简单的devops系统
前言 公司设计的RDMS挺好用的,我也照猫画虎简单的设计一个DevOps系统,与大家分享,不足之处欢迎拍砖,以免误人子弟 前置条件 gitlab gitlab-runner k8s 1. gitlab ...