SpringMVC＋Spring＋MyBatis 的综合练习 13 （前端页面之员工列表）

最初的功能不用太复杂，单纯展示员工和部门列表，实现翻页功能。为了能比较和练习，同时实现员工列表和部门列表，分别采用了不同的实现方式。在页面设计上均使用了 Bootstrap 框架，引入了 JSTL 表达式等。

13.1 Bootstrap 的引入

本来没啥好说的，又不打算专门写关于 Bootstrap 的章节，所以就利用页面搭建的过程中穿插总结一下。
注意：必须引入jQuery，而且还要在 Bootstrap 的引入之前。

方式一：通过CDN引入
在 Bootstrap 的中文官网上，可以找到 Bootstrap 中文网联合又拍云存储共同推出的开放 CDN 服务 - BootCDN 的链接，对广泛的前端开源库提供了稳定的存储和带宽的支持，例如 Bootstrap、jQuery 等。找到 Bootstrap 和 jQuery 的链接（导航上也有对应的按钮）会打开相应的界面，罗列着各个版本的CDN，点击【复制 < script > 标签】即可复制到剪贴板，然后直接粘贴到 jsp 文件中 head 标签中的 meta 标签后面。下面是个引入的例子。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这样引入后，只要 Tomcat 服务器是联网的，就能正确在页面展示 Bootstrap 的样式。

方式二：使用本地文件
先将 Bootstrap 和 jQuery 的文件下载到本地，参见前文中的目录结构，然后直接引用本地文件。为了构建路径的方便，先设置一个 APP_PATH 属性供后面引用文件时使用，同时该属性也能用于发起请求。代码如下：

<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

这种方式不需要联网，单机练习比较好用。

13.2 首页（index.jsp）

这里就放了两个链接，向后台发 get 请求，对应的 Controller 拦截后处理，再将结果返回到前台。代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!-- 引入JSTL -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<title>SSM Practice </title>
</head>

<body>
    <!-- 下面是使用 Bootstrap 的开始，所有的内容都要在这个类为 container 的 div 下面 -->
    <div class="container">
        <h1 class="page-header"><a href="${APP_PATH }/employees">员工管理</a></h1>
        <h1 class="page-header"><a href="${APP_PATH }/department.jsp">部门管理</a></h1>
    </div>
</body>

</html>

可以看出两个请求是不一样的，

员工请求是直接发的
部门请求是转向了另一个 jsp 文件，后面详细说。

13.3 员工列表

首页发的 /employees 请求后，Controller 拦截到请求开始处理（代码），转发到 /WEB-INF/view/employees.jsp 页面，在 Request 域中封装了 PageInfo 对象，保存了查询结果（list）和分页信息。页面代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入JSTL -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet"
    href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<script
    src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>员工列表</title>

</head>

<body>
  <div class="container">
    <h1 class="page-header">员工管理</h1>
      <div class="row">
        <h3 class="page-header col-md-10">员工列表</h3>
        <button class="page-header col-sd-1 btn btn-info">
          <span class="glyphicon glyphicon-plus"></span> 新增
        </button>
        <button class="page-header col-sd-1 btn btn-danger">
          <span class="glyphicon glyphicon-trash"></span> 删除
        </button>
      </div>

      <br>
      <div class="row">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th class="col-md-1">#</th>
              <th class="col-md-1">部门名称</th>
              <th class="col-md-1">员工姓名</th>
              <th class="col-md-1">性别</th>
              <th class="col-md-2">电子邮箱</th>
              <th class="col-md-2">创建时间</th>
              <th class="col-md-2">更新时间</th>
              <th class="col-md-2">操作</th>
            </tr>
          </thead>
          <tbody>
            <c:forEach items="${pageInfo.list }" var="employee">
              <tr>
                <td class="col-md-1" style="vertical-align: middle;">${employee.employeeId }</td>
                <td class="col-md-1" style="vertical-align: middle;">${employee.department.departmentName }</td>
                <td class="col-md-1" style="vertical-align: middle;">${employee.employeeName }</td>
                <td class="col-md-1" style="vertical-align: middle;">${employee.employeeGender }</td>
                <td class="col-md-2" style="vertical-align: middle;">${employee.employeeEmail }</td>
                <td class="col-md-2" style="vertical-align: middle;"><fmt:formatDate
                                    value="${employee.gmtCreate }" pattern="yyyy-MM-dd" /></td>
                <td class="col-md-2" style="vertical-align: middle;"><fmt:formatDate
                                    value="${employee.gmtModified }" pattern="yyyy-MM-dd" /></td>
                <td class="col-md-2" style="vertical-align: middle;">
                  <button class="btn btn-primary btn-xs">
                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                  </button>
                  <button class="btn btn-danger btn-xs">
                    <span class="glyphicon glyphicon-trash"></span> 删除
                  </button>
                </td>
              </tr>
            </c:forEach>

              <tr>
                <td style="vertical-align: middle;" colspan="5" class="col-md-6">当前
                            第 ${pageInfo.pageNum } 页，共 ${pageInfo.pages } 页，共有
                            ${pageInfo.total } 条记录。</td>
                <td style="vertical-align: middle;" colspan="3" class="col-md-6"
                            align="right">
                  <nav aria-label="Page navigation">
                    <ul class="pagination pagination">
                        <li><a href="${APP_PATH }/employees?pageNum=1">首页</a></li>
                      <c:if test="${pageInfo.hasPreviousPage }">
                        <li><a href="${APP_PATH }/employees?pageNum=${pageInfo.pageNum-1 }"
                            aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>
                      </c:if>
                      <c:forEach items="${pageInfo.navigatepageNums }" var="navigatePageNum">
                        <c:if test="${navigatePageNum == pageInfo.pageNum }">
                          <li class="active"><a href="#">${navigatePageNum } <span
                                class="sr-only">(current)</span></a></li>
                        </c:if>
                        <c:if test="${navigatePageNum != pageInfo.pageNum }">
                          <li><a href="${APP_PATH }/employees?pageNum=${navigatePageNum }">${navigatePageNum }</a></li>
                        </c:if>
                      </c:forEach>
                      <c:if test="${pageInfo.hasNextPage }">
                        <li><a href="${APP_PATH }/employees?pageNum=${pageInfo.pageNum+1 }"
                            aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>
                      </c:if>
                        <li><a href="${APP_PATH }/employees?pageNum=${pageInfo.pages }">末页</a></li>
                  </ul>
                </nav>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</body>
</html>

总结：
1. 使用 c:forEach 标签遍历 pageInfo 中的结果集 list ，填充结果行。
2. list 的长度最大为 pageSize。
3. 分页信息是直接从 pageInfo 中得到的。
4. 分页导航栏的绘制以及对应的请求链接，都是和 pageInfo 中的分页信息相关。
5. PageHelper 插件很好用，设定分页和取值都非常方便、直观。
6. 个人对前端技术的不足，表现在分页导航按钮对齐等美观问题上，在 department.jsp 中已经解决。
7. 这种方式是在返回的 Model 中封装了 PageInfo 对象，对于移动端可能还是存在问题的。