1、原始 list.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <title>员工列表</title>
  9. <%
  10.     pageContext.setAttribute("APP_PATH", request.getContextPath());
  11. %>
  12. <!-- web路径：
  13. 不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
  14. 以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
  15.         http://localhost:3306/crud
  16.  -->
  17. <script type="text/javascript"
  18.     src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
  19. <link
  20.     href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
  21.     rel="stylesheet">
  22. <script
  23.     src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  24. </head>
  25. <body>
  26.     <!-- 搭建显示页面 -->
  27.     <div class="container">
  28.         <!-- 标题 -->
  29.         <div class="row">
  30.             <div class="col-md-12">
  31.                 <h1>SSM-CRUD</h1>
  32.             </div>
  33.         </div>
  34.         <!-- 按钮 -->
  35.         <div class="row">
  36.             <div class="col-md-4 col-md-offset-8">
  37.                 <button class="btn btn-primary">新增</button>
  38.                 <button class="btn btn-danger">删除</button>
  39.             </div>
  40.         </div>
  41.         <!-- 显示表格数据 -->
  42.         <div class="row">
  43.             <div class="col-md-12">
  44.                 <table class="table table-hover">
  45.                     <tr>
  46.                         <th>#</th>
  47.                         <th>empName</th>
  48.                         <th>gender</th>
  49.                         <th>email</th>
  50.                         <th>deptName</th>
  51.                         <th>操作</th>
  52.                     </tr>
  53.                     <c:forEach items="${pageInfo.list }" var="emp">
  54.                         <tr>
  55.                             <th>${emp.empId }</th>
  56.                             <th>${emp.empName }</th>
  57.                             <th>${emp.gender=="M"?"男":"女" }</th>
  58.                             <th>${emp.email }</th>
  59.                             <th>${emp.department.deptName }</th>
  60.                             <th>
  61.                                 <button class="btn btn-primary btn-sm">
  62.                                     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
  63.                                     编辑
  64.                                 </button>
  65.                                 <button class="btn btn-danger btn-sm">
  66.                                     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  67.                                     删除
  68.                                 </button>
  69.                             </th>
  70.                         </tr>
  71.                     </c:forEach>
  72.                 </table>
  73.             </div>
  74.         </div>
  76.         <!-- 显示分页信息 -->
  77.         <div class="row">
  78.             <!--分页文字信息  -->
  79.             <div class="col-md-6">当前 ${pageInfo.pageNum }页,总${pageInfo.pages }
  80.                 页,总 ${pageInfo.total } 条记录</div>
  81.             <!-- 分页条信息 -->
  82.             <div class="col-md-6">
  83.                 <nav aria-label="Page navigation">
  84.                 <ul class="pagination">
  85.                     <li><a href="${APP_PATH }/emps?pn=1">首页</a></li>
  86.                     <c:if test="${pageInfo.hasPreviousPage }">
  87.                         <li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum-1}"
  88.                             aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
  89.                         </a></li>
  90.                     </c:if>
  93.                     <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
  94.                         <c:if test="${page_Num == pageInfo.pageNum }">
  95.                             <li class="active"><a href="#">${page_Num }</a></li>
  96.                         </c:if>
  97.                         <c:if test="${page_Num != pageInfo.pageNum }">
  98.                             <li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
  99.                         </c:if>
  101.                     </c:forEach>
  102.                     <c:if test="${pageInfo.hasNextPage }">
  103.                         <li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum+1 }"
  104.                             aria-label="Next"> <span aria-hidden="true">&raquo;</span>
  105.                         </a></li>
  106.                     </c:if>
  107.                     <li><a href="${APP_PATH }/emps?pn=${pageInfo.pages}">末页</a></li>
  108.                 </ul>
  109.                 </nav>
  110.             </div>
  111.         </div>
  113.     </div>
  114. </body>
  115. </html>

此外，还需修改 index.jsp，让它直接跳转 list.jsp 页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:forward page="/emps"/>

然后启动工程，直接来到员工列表页面，效果如下：
QQ截图20211129151045.png