目录
1.建立数据库
2.页面显示
3.基本逻辑
4.配置依赖
5.使用pagehelper
6.页面列表
页面
效果
1.建立数据库
create database if not exists my_book;
use my_book;
create table if not exists myBook
(
id int primary key auto_increment,
name varchar(50) not null ,
img varchar(100)
);
insert into myBook value
(0, '那年那兔那些事','1.jpg'),
(0, '三国演义','1.jpg'),
(0, '水浒传1','1.jpg'),
(0, '水浒传2','1.jpg'),
(0, '水浒传3','1.jpg'),
(0, '水浒传3','1.jpg'),
(0, '水浒传4','1.jpg'),
(0, '水浒传5','1.jpg'),
(0, '水浒传6','1.jpg'),
(0, '水浒传7','1.jpg'),
(0, '水浒传8','1.jpg'),
(0, '水浒传9','1.jpg'),
(0, '水浒传10','1.jpg'),
(0, '水浒传11','1.jpg'),
(0, '水浒传12','1.jpg'),
(0, '水浒传13','1.jpg'),
(0, '红楼梦','1.jpg');2.页面显示
一次会显示全部，为了分页显示，引入pagehelper插件
3.基本逻辑
# 分页逻辑
# limit 0,4 pageIndex，pageSize 每一页开始下标，一页多少行
# 第一页
select *from myBook limit 0,4;
# 第二页
select *from myBook limit 4,4;
# 第三页
select *from myBook limit 8,4;
# 第四页
select from myBook limit 12,4;
# 总结
#每一页开始的下标 （pageIndex-1）pageSize
#总共多少页 （total/pageSize+total%pageSize）
4.配置依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.6</version>
</dependency>5.使用pagehelper
查到数据后，需要在页面显示时分页，所以在封装页面时使用分页。
@Override
public PageInfo<Mybook> bookListAll(int pageunm,int pagesize) {
PageHelper.startPage(pageunm,pagesize);
List<Mybook> mybooks = mybookDao.bookListAll();
PageInfo<Mybook> pageInfo = new PageInfo<>(mybooks);
return pageInfo;
}
6.页面列表
图片显示并且有上一页、下一页、首页、尾页、当前页。
页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>列表显示</title>
</head>
<body>
<table border="1px">
<tr style="color:royalblue;">
<td style="text-align:center;">序号</td>
<td style="text-align:center;">书名</td>
<td style="text-align:center;">图片</td>
</tr>
<tr th:each="item:${mybooks.list}">
<td style="text-align:center;" th:text="${item.id}"></td>
<td style="text-align:center;" th:text="${item.name}"></td>
<td style="text-align:center;"><img th:src="@{/file/{header}(header=${item.img})}" width="150px" height="100px"></td>
</tr>
<tr>
<td style="text-align:center;"><a th:if="${mybooks.isFirstPage==false}" th:href="@{/bookList/1}">首页</a>
<a th:if="${mybooks.hasPreviousPage}"
th:href="@{/bookList/{pagenum}(pagenum=${mybooks.pageNum}-1)}">上一页</a></td>
<td style="text-align:center;">当前是第<span th:text="${mybooks.pageNum}"></span>页||总共<span th:text="${mybooks.pages}"></span>页</td>
<td style="text-align:center;"><a th:if="${mybooks.hasNextPage}" th:href="@{/bookList/{pagenum}(pagenum=${mybooks.pageNum}+1)}">下一页</a>
<a th:if="${mybooks.isLastPage==false}" th:href="@{/bookList/{pagenum}(pagenum=${mybooks.pages})}">尾页</a></td>
</tr>
</table>
</body>
</html>
效果
