五. 管理员维护
分支: git checkout -b 5.0.0_admin_page
1. 任务清单
-
分页显示 Admin 数据
- 不带关键词分页
- 带关键词分页
-
新增 Admin
-
更新 Admin
-
单条删除 Admin
2. 分页
2.1 目标
- 将数据库中的 Admin 数据在页面上以分页形式显示
- 在后端将 “带关键词” 和 “不带关键词” 的分页合并为统一套代码
2.2 思路
2.3 代码
2.3.1 配置
- 引入 PageHelper - atcrowdfunding03-admin-component
- 确认是否加入了依赖
- 无需引入, 之前已引入
<!-- Mybatis 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>
- 在 SqlSessionFactoryBean 配置 Mybatis 插件
<!-- 配置 sqlSessionFactoryBean -->
<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 配置插件 -->
<property name="plugins">
<array>
<!-- 配置 PageHelper 分页插件 -->
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<!--使用下面的方式配置参数,一行配置一个 -->
<value>
<!-- 配置数据库方言, 告诉 PageHelper 当前使用的数据库 -->
dialect=mysql
<!-- 配置页码的合理化修正 -->
<!-- 如果 pageNum<=0 会查询第一页,如果 pageNum>总页数 会查询最后一页 -->
reasonable=true
</value>
</property>
</bean>
</array>
</property>
</bean>
2.3.2 接口流程
- AdminMapper.xml
- 小技: <
Ctrl + Shift + N
搜索文件>
<!-- 自定义 start -->
<select id="selectAdminByKeyword" resultMap="BaseResultMap">
select id, login_acct, user_pswd, user_name, email, create_time
from t_admin
where login_acct like concat("%", #{keyword}, "%")
or user_name like concat("%", #{keyword}, "%")
or email like concat("%", #{keyword}, "%")
</select>
<!-- 自定义 end -->
- 2.3.3 AdminMapper 接口中声明方法
/**
* 根据 keyword 查询管理员信息
*
* @param keyword
* @return
*/
List<Admin> selectAdminByKeyword(String keyword)
- 服务接口: AdminService.java
/**
* 根据 keyword 查看分页数据
*
* @param keyword
* @param pageNum
* @param pageSize
* @return
*/
PageInfo<Admin> getPageInfo(String keyword, Integer pageNum, Integer pageSize);
- 服务实现 : AdminServiceImpl.java
@Override
public PageInfo<Admin> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
// 1. 调用 PageHelper 的静态方法开启分页功能
// 这里充分体现了 PageHelper 的"非侵入式"设计: 原本要做的查不必有任何修改
PageHelper.startPage(pageNum, pageSize);
// 2. 执行查询
List<Admin> list = adminMapper.selectAdminByKeyword(keyword);
// 3. 封装到 PageInfo 对象中
return new PageInfo<>(list);
}
- 控制层: AdminHandler.java
/**
* 获取分页信息
*
* @param keyword
* @param pageNum
* @param pageSize
* @param modelMap
* @return
*/
@RequestMapping("/admin/get/page.html")
public String getPageInfo(
// 使用 @RequestParam 注解的 defaultValue 属性, 指定默认值, 在请求中没有携带对应参数时使用默认值
// keyword 默认值使用空字符串, 和 SQL 语句配合实现两种情况适配
@RequestParam(value="keyword", defaultValue="") String keyword,
@RequestParam(value="pageNum", defaultValue="1") Integer pageNum,
@RequestParam(value="pageSize", defaultValue="5") Integer pageSize,
ModelMap modelMap
) {
// 调用 adminService 获取 PageInfo 对象
PageInfo<Admin> pageInfo = adminService.getPageInfo(keyword, pageNum, pageSize);
// 将 PageInfo 对象传入模型
modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO, pageInfo);
return "admin-page";
}
- 对应的常量
public static final String ATTR_NAME_PAGE_INFO = "pageInfo";
- 前端 JSP 页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zn-CN">
<%@include file="/WEB-INF/include-head.jsp" %>
<body>
<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
<div class="row">
<%@include file="/WEB-INF/include-sidebar.jsp" %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
</div>
<div class="panel-body">
<form class="form-inline" role="form" style="float:left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input class="form-control has-success" type="text" placeholder="请输入查询条件">
</div>
</div>
<button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
</button>
</form>
<button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
class=" glyphicon glyphicon-remove"></i> 删除
</button>
<button type="button" class="btn btn-primary" style="float:right;"
onclick="window.location.href='add.html'"><i class="glyphicon glyphicon-plus"></i> 新增
</button>
<br>
<hr style="clear:both;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>账号</th>
<th>名称</th>
<th>邮箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${ empty requestScope.pageInfo.list }">
<tr>
<td colspan="6" align="center">抱歉!没有查询到数据!</td>
</tr>
</c:if>
<c:if test="${ !empty requestScope.pageInfo.list }">
<c:forEach items="${ requestScope.pageInfo.list }" var="admin" varStatus="myStatus">
<tr>
<td>${ myStatus.count }</td>
<td><input type="checkbox"></td>
<td>${ admin.loginAcct }</td>
<td>${ admin.userName }</td>
<td>${ admin.email }</td>
<td>
<button type="button" class="btn btn-success btn-xs"><i
class=" glyphicon glyphicon-check"></i></button>