在上篇博文中，我们通过Spring单元测试发送模拟MVC请求已经获取到了数据，那么接下来，我们要做的便是将数据显示在我们的jsp页面上

​​BootStrap样式​​

搭建BootStrap分页页面并分页显示数据_html


使用这个样式后，我们的页面展示：（此时我们已经将所查询的数据引入了）

搭建BootStrap分页页面并分页显示数据_数据_02


页面代码 注意我们要引入jstl标签库

<%@ 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:3306)；需要加上项目名
    http://localhost:3306/crud
 -->
<script type="text/javascript"
  src="${APP_PATH }/static/js/jquery-1.12.4.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="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>员工编号</th>
            <th>员工姓名</th>
            <th>所属部门</th>
            <th>操作</th>
          </tr>
          <c:forEach items="${pageinfo.list }" var="emp">
            <tr>
              <th></th>
              <th>${emp.userId }</th>
              <th>${emp.userName }</th>
              <th>${emp.dept.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="${APP_PATH }/emps?pn=1">首页</a></li>
          <c:if test="${pageinfo.hasPreviousPage }">
            <li><a href="${APP_PATH }/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="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
            </c:if>

          </c:forEach>
          <c:if test="${pageinfo.hasNextPage }">
            <li><a href="${APP_PATH }/emps?pn=${pageinfo.pageNum+1 }"
              aria-label="Next"> <span aria-hidden="true">»</span>
            </a></li>
          </c:if>
          <li><a href="${APP_PATH }/emps?pn=${pageinfo.pages}">末页</a></li>
        </ul>
        </nav>
      </div>
    </div>
    
  </div>
</body>
</html>

到这里，我们便实现分页查询数据了。