文章目录
浏览器在进行大量的信息查询时,服务端需返回对应的页码数据
优点:
- 使用分页可以避免一次性将所有信息都展示出来,优化查询
- 封装起来,可以复用
服务端封装分页工具
- 分页工具类
- 当前页码 current,并计算起始行偏移量offset,用于sql语句的查询
sql中常用offset和order来实现数据分页的功能
select * from table limit 10 检索前10行
select * from table limit 1, 10 从第二行开始,检索10行
select * from table limit #{offset}, #{limit} 从offset行开始,检索limit行
- 显示的最大上限 limit
- 数据总行数 rows
- 查询路径 path
package com.nowcoder.community.entity;
/**
* 封装分页相关的信息
*/
public class Page {
// 当前页码
private int current = 1;
// 显示的最大上限
private int limit = 10;
// 数据总数,计算总页数
private int rows;
// 查询路径,用于复用分页链接
private String path;
public int getCurrent() {
return current;
}
public void setCurrent(int current) {
if(current >= 1){
this.current = current;
}
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
if(limit >= 1 && limit <= 100){
this.limit = limit;
}
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
if(rows >= 0){
this.rows = rows;
}
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
/**
* 获取当前页的起始行
* @return
*/
public int getOffset(){
return (current - 1) * limit;
}
/**
* 获取总页数
* @return
*/
public int getTotal(){
// 总行数 / 每页显示的最大上限
if(rows % limit == 0)
return rows / limit;
else{
return rows/ limit + 1;
}
}
/**
* 获取分页起始页码
* @return
*/
public int getFrom(){
int from = current - 2;
return from < 1? 1: from;
}
/**
* 获取分页结束页码
* @return
*/
public int getTo(){
int to = current + 2;
int total = getTotal();
return to > total? total: to;
}
}
@Controller
public class HomeController {
@Autowired
private DiscussPostService discussPostService;
@Autowired
private UserService userService;
@RequestMapping(path = "/index", method = RequestMethod.GET)
public String getIndexPage(Model model, Page page){
// 方法调用前,Spring MVC会自动实例化Model和Page,并将Page注入到Model中
// 所以,在Thymeleaf中可以直接访问Page对象中的数据
page.setRows(discussPostService.findDiscussPostRows(0));
page.setPath("/index");
List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());
List<Map<String, Object>> discussPosts = new ArrayList<>();
if(list != null){
for(DiscussPost post : list){
Map<String, Object> map = new HashMap<>();
map.put("post", post);
User user = userService.findUserById(post.getUserId());
map.put("user", user);
discussPosts.add(map);
}
}
model.addAttribute("discussPosts", discussPosts);
return "/index";
}
}
@Service
public class DiscussPostService {
@Autowired
private DiscussPostMapper discussPostMapper;
public List<DiscussPost> findDiscussPosts(int userId, int offset, int limit){
return discussPostMapper.selectDiscussPosts(userId, offset, limit);
}
public int findDiscussPostRows(int userId){
return discussPostMapper.selectDiscussPostRows(userId);
}
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.nowcoder.community.dao.DiscussPostMapper">
<sql id="selectFields">
id, user_id, title, content, type, status, create_time, comment_count, score
</sql>
<select id="selectDiscussPosts" resultType="DiscussPost">
select <include refid="selectFields"></include>
from discuss_post
where status != 2
<if test="userId!=0">
and user_id = #{userId}
</if>
order by type desc, create_time desc
limit #{offset}, #{limit}
</select>
<select id="selectDiscussPostRows" resultType="int">
select count(id)
from discuss_post
where status != 2
<if test="userId!=0">
and user_id = #{userId}
</if>
</select>
</mapper>
前端分页组件展示部分
<!-- 分页 -->
<nav class="mt-5" th:if="${page.rows>0}">
<ul class="pagination justify-content-center">
<li class="page-item">
<!--/index?current=1-->
<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
</li>
<li th:class="|page-item ${page.current==1?'disabled':''}|">
<a class="page-link" th:href="@{${page.path}(current=${page.current -1})}">上一页</a>
</li>
<!--生成连续数组-->
<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from, page.to)}">
<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>
</li>
<li th:class="|page-item ${page.current==page.total?'disabled':''}|">
<a class="page-link" th:href="@{${page.path}(current=${page.current +1})}">下一页</a>
</li>
<li class="page-item">
<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
</li>
</ul>
</nav>