ssm框架整合入門系列——查詢-分頁顯示數據(pageHelper的使用)
查詢也就是顯示操作，在該項目下具體表現為：
- 訪問
index.jsp頁面 index.jsp頁面發送出查詢員工列表請求EmployeeController來接受請求，查出員工數據- 來到
list.jsp頁面進行展示
修改index.jsp為：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<jsp:forward page="/emps"></jsp:forward>
在com.liantao.crud.controller下新建EmployeeController.java
package com.liantao.crud.controller;
import java.util.List;
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 com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.liantao.crud.bean.Employee;
import com.liantao.crud.service.EmployeeService;
/**
* 處理員工的crud請求
* @author liantao.me
*
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/*
* 查詢員工數據（分頁查詢）
* @return
*/
@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
//引入PageHelper分頁插件
//查詢之前需要調用,,傳入頁碼，以及每頁的大小
PageHelper.startPage(pn,5);
//startPage后面緊跟的是這個查詢就是一個分頁查詢
List<Employee> emps = employeeService.getAll();
//使用pageInfo包裝查詢后的結果，只需要將Pageinfo交給頁面就行了
//封裝了詳細的分頁信息，包括我們查出來的數據,傳入連續顯示的數據
PageInfo page = new PageInfo(emps,5);
model.addAttribute("pageInfo",page);
return "list";
}
}
在com.liantao.crud.service下新建EmployeeService.java
package com.liantao.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestParam;
import com.github.pagehelper.PageHelper;
import com.liantao.crud.bean.Employee;
import com.liantao.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
EmployeeMapper employeeMapper;
/**
* 查詢所有員工數據（分頁查詢）
* @return
*/
public List<Employee> getAll() {
// TODO Auto-generated method stub
return employeeMapper.selectByExampleWithDept(null);
}
}
並引入pageHelper插件，添加dependency:
<!-- 引入pageHelper分頁插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
然后再mybatis-config.xml中注冊，添加plugins(plugins要添加在typeAliases):
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
pageHelp插件使用文檔可參照：地址
在WEB-INF的views目錄下新建list.jsp頁面
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>員工列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
This is my JSP page. <br>
</body>
</html>
單元測試
在com.liantao.crud.test新建一個測試類MvcTest.java，添加代碼：
package com.liantao.crud.test;
import java.util.List;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mock.web.MockHttpServletRequest;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
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 com.github.pagehelper.PageInfo;
import com.liantao.crud.bean.Employee;
/**
* 使用Spring測試模塊提供的測試請求功能，測試curd請求的正確性
* @author asus
*
*/
@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration(locations={"classpath:applicationContext.xml","file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"})
public class MvcTest {
//傳入SpringMvc的ioc
@Autowired
WebApplicationContext context;
//虛擬mvc請求，獲取到處理結果
MockMvc mockMvc;
@Before
public void initMockMvc(){
mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
}
@Test
public void testPage() throws Exception{
//模擬請求拿到返回值
MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "1"))
.andReturn();
//請求成功以后，請求域中會有pageInfo,我們可以取出pageInfo進行驗證
MockHttpServletRequest request = result.getRequest();
PageInfo pi = (PageInfo)request.getAttribute("pageInfo");
System.out.println("當前頁碼："+pi.getPageNum());
System.out.println("總頁碼："+pi.getPages());
System.out.println("總記錄數："+pi.getTotal());
System.out.println("再也沒需要連續顯示的頁碼：");
int[] nums = pi.getNavigatepageNums();
for(int i:nums){
System.out.println(" "+i);
}
//獲取員工數據
List<Employee> list = pi.getList();
for(Employee employee : list){
System.out.println("ID:"+employee.getEmpId()+"==>Name"+employee.getEmpName());
}
}
}
結果：
succeed
用bootstrap編寫顯示頁面
由於，我們Index.jsp的forward，所以我們要編寫的頁面應該是list.jsp
bootstrap文檔：地址
代碼如下：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>員工列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 引入jquery -->
<script type="text/javascript" src="${path}/ssm-crud/static/js/jquery-1.12.4.js"></script>
<!-- 引入css、js -->
<link href="${path}/ssm-crud/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${path}/ssm-crud/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<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">新增</button>
<button class="btn btn-danger">刪除</button>
</div>
</div>
<!-- 顯示表格數據 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list }" var="emp">
<tr>
<th>${emp.empId }</th>
<th>${emp.empName }</th>
<th>${emp.gender=="M"?"男":"女" }</th>
<th>${emp.email }</th>
<th>${emp.department.deptName}</th>
<th>
<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>
</th>
</tr>
</c:forEach>
</table>
</div>
</div>
<!-- 顯示分頁信息 -->
<div class="row">
<!-- 分頁文字信息 -->
<div class="col-md-6">
當前${pageInfo.pageNum }頁,總${pageInfo.pages }頁,總${pageInfo.total }條記錄
</div>
<!-- 分頁條信息 -->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${path }/ssm-crud/emps?pn=1">首頁</a></li>
<!-- 判斷是否有上一頁，以便顯示點擊按鈕 -->
<c:if test="${pageInfo.hasPreviousPage }">
<li>
<a href="${path }/ssm-crud/emps?pn=${pageInfo.pageNum-1 }" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<!-- 遍歷頁碼 -->
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
<c:if test="${page_Num == pageInfo.pageNum }">
<li class="active"><a href="#">${page_Num }</a></li>
</c:if>
<c:if test="${page_Num != pageInfo.pageNum }">
<li><a href="${path }/ssm-crud/emps?pn=${page_Num }">${page_Num }</a></li>
</c:if>
</c:forEach>
<!-- 判斷是否有下一頁 -->
<c:if test="${pageInfo.hasNextPage }">
<li>
<a href="${path }/ssm-crud/emps?pn=${pageInfo.pageNum+1 }" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="${path }/ssm-crud/emps?pn=${pageInfo.pages }">末頁</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
效果如圖：
在不用ajax技術，我們是這樣請求的。下一篇將在這基礎上改為發送ajax請求進行員工數據的查詢