SpringMVC＋Spring＋MyBatis 的综合练习 14 （前端页面之部门列表）

由于上一篇最后谈及的，使用对象返回数据不利于移动端接收，所以在部门页面改用 json 字符串返回，这样只需要在前台页面解析 json 字符串即可。所以，部门页面的展示做了一些调整。逐个说明一下吧。

14.1 DAO 层

DepartmentMapper.java

package com.hh.ssm.dao;

import com.hh.ssm.bean.Department;
import com.hh.ssm.bean.DepartmentExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;

public interface DepartmentMapper {
    long countByExample(DepartmentExample example);

    int deleteByExample(DepartmentExample example);

    int deleteByPrimaryKey(Integer departmentId);

    int insert(Department record);

    int insertSelective(Department record);

    List<Department> selectByExample(DepartmentExample example);

    Department selectByPrimaryKey(Integer departmentId);

    List<Department> selectByExampleWithEmployees(DepartmentExample example);
    
    Department selectByPrimaryKeyWithEmployees(Integer departmentId);
    
    int updateByExampleSelective(@Param("record") Department record, @Param("example") DepartmentExample example);

    int updateByExample(@Param("record") Department record, @Param("example") DepartmentExample example);

    int updateByPrimaryKeySelective(Department record);

    int updateByPrimaryKey(Department record);
}

14.2 Service 层

DepartmentService.java

package com.hh.ssm.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.hh.ssm.bean.Department;
import com.hh.ssm.dao.DepartmentMapper;

@Service
public class DepartmentService {
	
	@Autowired
	DepartmentMapper departmentMapper;

	public List<Department> getAll() {
  	return departmentMapper.selectByExample(null);
	}
}

14.3 Controller 层

DepartmentController.java

package com.hh.ssm.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 org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.hh.ssm.bean.Department;
import com.hh.ssm.bean.Employee;
import com.hh.ssm.bean.ResponseMessage;
import com.hh.ssm.service.DepartmentService;
import com.hh.ssm.service.EmployeeService;
/**
 * 
 * @author HH
 *
 */
@Controller
public class DepartmentController {

	@Autowired
	DepartmentService departmentService;

	/**
	 * 需要导入Jackson包
	 * @param pageNum
	 * @return
	 */
	@RequestMapping("/departments")
	@ResponseBody
	public ResponseMessage getAllDepartmentsJson(@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
		int pageSize = 3;
		PageHelper.startPage(pageNum, pageSize);
		List<Department> departments = departmentService.getAll();
		int navigatePages = 5;
		PageInfo pageInfo = new PageInfo(departments, navigatePages);
		
		return ResponseMessage.success().add("pageInfo", pageInfo);
	}
	
	
	
	/**
	 * 查询员工数据（分页查询）
	 * 
	 * @return
	 */
	//@RequestMapping("/departments")
	public String getAllDepartments(
			@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum, 
			Model model) {

		// 引入PageHelper分页插件进行分页
		// 每页的记录数
		int pageSize = 8;

		PageHelper.startPage(pageNum, pageSize);

		List<Department> departments = departmentService.getAll();

		int navigatePages = 5;
		

		PageInfo pageInfo = new PageInfo(departments, navigatePages);
		
		//System.out.println(pageInfo);
		
		model.addAttribute("pageInfo", pageInfo);
		

		return "departments";

	}

}

14.4 View 层

Department.jsp

<%@ 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">
<!--  
<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>
-->
<%
	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" id="title">
			<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>
		<div class="row" id="tablediv">
			<table class="table table-striped table-hover" id="departmentTable">
				<thead>
					<tr>
						<th class="col-md-1">#</th>
						<th class="col-md-7">部门名称</th>
						<th class="col-md-1">创建时间</th>
						<th class="col-md-1">更新时间</th>
						<th class="col-md-2">操作</th>
					</tr>
				</thead>
				<tbody id="tableBody">
				</tbody>
			</table>
		</div>
		<div class="row" id="page">
			<table class="table">
				<tr id="pageline">
					<td id="pageInformation" class="col-md-6"
						style="vertical-align: middle;"></td>
					<td id="pageNavigator" class="col-md-6" align="right"></td>
				</tr>
			</table>
		</div>
	</div>
	<script>
		// 1. 页面加载完成后，直接发送 ajax 请求, 显示首页
		$(function() {
			goto_PageNum(1);
		});
		//*********************************************
		// 抽取页面切换的 ajax 请求方法，跳转到指定页码
		function goto_PageNum(pn) {
			$.ajax({
				url : "${APP_PATH}/departments",
				data : "pageNum=" + pn,
				type : "GET",
				success : function(result) {
					//1. 解析并显示表格数据
					buildDepartmentTable(result);
					//2. 解析并显示分页信息
					buildPageInfomation(result);
					//3. 解析并显示分页导航条
					buildPageNavigator(result);
				}
			});
		}
		// ****解析并显示表格数据****
		// console.log(result);
		/** Controller 传回的 json 字符串：result
		{"responseCode":100,"responseMessage":"处理成功！",
		"returnMap":{
			"pageInfo":{"pageNum":1,"pageSize":3,"size":3,"startRow":1,"endRow":3,"total":7,"pages":3,
				"list":[
					{"departmentId":1,"departmentName":"董事会","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null},
					{"departmentId":2,"departmentName":"总经办","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null},
					{"departmentId":3,"departmentName":"市场部","gmtCreate":1515600000000,"gmtModified":1515600000000,"employees":null}],
				"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,
				"hasPreviousPage":false,"hasNextPage":true,
				"navigatePages":5,"navigatepageNums":[1,2,3],
				"navigateFirstPage":1,"navigateLastPage":3,"firstPage":1,"lastPage":3}}}
		 */
		function buildDepartmentTable(result) {
			$("#tableBody").empty();
			var departments = result.returnMap.pageInfo.list;
			$.each(departments, function(index, item) {
				//alert(index + " : " + item.departmentName);
				var departmentIdTd = $("<td></td>").addClass("col-md-1").append(
						item.departmentId);
				var departmentNameTd = $("<td></td>").addClass("col-md-7").append(
						item.departmentName);
				var gmtCreateTd = $("<td></td>").addClass("col-md-1").append(
						getLocalTime(item.gmtCreate));
				var gmtModifiedTd = $("<td></td>").addClass("col-md-1").append(
						getLocalTime(item.gmtModified));
				var editButton = $("<button></button>").addClass(
						"btn btn-primary btn-xs").append(
						$("<span></span>").addClass("glyphicon glyphicon-pencil")).append(
						" 编辑");
				var deleteButton = $("<button></button>").addClass(
						"btn btn-danger btn-xs").append(
						$("<span></span>").addClass("glyphicon glyphicon-trash")).append(
						" 删除");
				var operationTd = $("<td></td>").addClass("col-md-2")
						.append(editButton).append(" ").append(deleteButton);
				$("<tr></tr>").append(departmentIdTd).append(departmentNameTd).append(
						gmtCreateTd).append(gmtModifiedTd).append(operationTd).appendTo(
						"#tableBody");
				// 如果最后一页显示的条数不够一页，补充空行,单纯这么补貌似不够啊。。。。。
				var ps = result.returnMap.pageInfo.pageSize;
				var s = result.returnMap.pageInfo.size;
				if (s < ps) {
					for (var i = 0; i < (ps - s); i++) {
						var emptyTR = $("<tr></tr>");
						for (var j = 0; j < 5; j++) {
							emptyTR.append($("<td></td>"));
						}
						emptyTR.appendTo("#tableBody");
					}
				}
			});
		}
		//******************************************
		// 页码信息文字
		function buildPageInfomation(result) {
			//当前 第 页，共 页，共有 条记录。
			$("#pageInformation").empty();
			$("#pageInformation").append(
					"当前 第 " + result.returnMap.pageInfo.pageNum + " 页，共 "
							+ result.returnMap.pageInfo.pages + " 页，共有 "
							+ result.returnMap.pageInfo.total + " 条记录");
		}
		//******************************************
		/* 
		 <nav aria-label="Page navigation">
		 <ul class="pagination">
		 <li>
		 <a href="#" >«
		 </a>
		 </li>
		 <li><a href="#">1</a></li>
		 <li>
		 <a href="#" aria-label="Next">
		 <span aria-hidden="true">»</span>
		 </a>
		 </li>
		 </ul>
		 </nav> 
		 */
		// 页码导航按钮
		function buildPageNavigator(result) {
			$("#pageNavigator").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			var ps = result.returnMap.pageInfo.pageSize;
			var pn = result.returnMap.pageInfo.pageNum;
			// 创建 首页 按钮 并加入到 <ul></ul> 中
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首 页"));
			ul.append(firstPageLi);
			// 创建 上一页 按钮 并加入到 <ul></ul> 中
			var previousPageLi = $("<li></li>").append($("<a></a>").append("上一页"));
			ul.append(previousPageLi);
			// 首页时 禁用 上一页 和 首页 按钮
			if (result.returnMap.pageInfo.hasPreviousPage == false) {
				firstPageLi.addClass("disabled");
				previousPageLi.addClass("disabled");
			} else {
				firstPageLi.click(function() {
					goto_PageNum(1);
				});
				previousPageLi.click(function() {
					goto_PageNum(pn - 1);
				});

			}
			// 创建 数字页码 按钮（index 是索引，item 是显示的页码数字） 并加入到 <ul></ul> 中
			$.each(result.returnMap.pageInfo.navigatepageNums, function(index, item) {
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				//高亮当前页码
				if (result.returnMap.pageInfo.pageNum == item) {
					numLi.addClass("active");
				}
				ul.append(numLi);
				numLi.click(function() {
					goto_PageNum(item);
				});
			});
			// 创建 下一页 按钮 并加入到 <ul></ul> 中
			var nextPageLi = $("<li></li>").append($("<a></a>").append("下一页"));
			ul.append(nextPageLi);
			// 创建 末页 按钮 并加入到 <ul></ul> 中
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末 页"));
			ul.append(lastPageLi);
			// 末页时 禁用 下一页 和 末页 按钮
			if (result.returnMap.pageInfo.hasNextPage == false) {
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			} else {
				nextPageLi.click(function() {
					goto_PageNum(pn + 1);
				});
				lastPageLi.click(function() {
					goto_PageNum(result.returnMap.pageInfo.pages);
				});
			}
			// 把 <ul></ul> 加入 到 <nav></nav> 中，再加入到 表格
			//$("#pageNavigator").append($("<nav></nav>").append(ul));
			$("<nav></nav>").append(ul).appendTo($("#pageNavigator"));
		}

		function getLocalTime(nS) {
			return new Date(parseInt(nS)).toLocaleDateString();
		}
	</script>
</body>
</html>

14.5 总结：

页面最初加载后，发送 ajax 请求，取回第一页的内容
因为是列表显示，分页信息都会随着页码变化而变化，所以整个页面的动态部分都是通过解析 json 串和 json DOM拼接成的。如果是表单类（Tab类，每页显示一条记录）则只需要拼接页码信息和页码导航按钮组。

要想使用 json DOM解析，则必须引入 Jackson 依赖。

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.3</version>
</dependency>

解决了页码信息和页码导航按钮组的对齐问题。先定义新的 div，然后定义表格，两列，各占6个栅格，td 标签上下居中对齐，按钮组右对齐。

整个页面完成后的样子大概是这样的。

下一步应该是完善页面中的按钮功能。