分页机制工具

浏览器在进行大量的信息查询时，服务端需返回对应的页码数据
优点：

• 使用分页可以避免一次性将所有信息都展示出来，优化查询
• 封装起来，可以复用

服务端封装分页工具

• 分页工具类
  • 当前页码 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>