萌新分页操作：怎么做社区网站的首页帖子分页展示？

要进行首页帖子展示，就必须学会分页，而在创建分页之前，我们得先认识到，为什么要进行分页？一个大型网站的数据库将容纳大量的数据，而我们进行展示某部分数据时，为了保证浏览速度，不可能一次性地将所有数据进行传输，更何况，不是全部传输过去的数据第一时间就能有效利用，所以，只要每次将需要的数据传输过去就好，即使是后续需要的数据，那也是后面时间点需要完成的工作，为了做到这一点，必须对一个数据整体进行划分，合理地传输并展示给用户，其中，划分出来的每一部分可被称为一页数据，完成划分工作的就是分页操作。而分页操作在 spingboot 及 mybatis 的环境下，可被分为以下几种分页情况：

问题阐述

了解为什么要进行分页以及分页的类型之后，现在如果分发给你一个任务：需要完成社区类型网站的首页以及个人帖子的展示，其中，帖子排序具有以下因素：

• 帖子类型分为普通（0）和置顶（1）
• 帖子状态分为正常（0）、精华（1）和拉黑（2）
• 帖子创建时间：yyyy-MM-dd HH:mm:ss

各个因素顺序越靠前，优先级越高，请将帖子按合理顺序分页且排序，并且在明确当前第几页的情况下，保证当前页码前后两页都可展示并切换（首页、末页为特殊情况），实现首页、上一页、下一页、末页跳转功能即可。

注：为了保证过多无关代码，采用创建时间作为排序因素之一，而不是评价帖子优劣的帖子分数。

相关可运行的代码文件及SQL语句可看如何创建一个社区的首页帖子分页 - yumuing博客:做技术的朝拜者

后端设计

帖子的建表语句如下：

DROP TABLE IF EXISTS `discuss_post`;
SET character_set_client = utf8mb4 ;
CREATE TABLE `discuss_post` (`id` int(11) NOT NULL AUTO_INCREMENT,`user_id` varchar(45) DEFAULT NULL,`title` varchar(100) DEFAULT NULL,`content` text,`type` int(11) DEFAULT NULL COMMENT '0-普通; 1-置顶;',`status` int(11) DEFAULT NULL COMMENT '0-正常; 1-精华; 2-拉黑;',`create_time` timestamp NULL DEFAULT NULL,`comment_count` int(11) DEFAULT NULL,`score` double DEFAULT NULL,PRIMARY KEY (`id`),KEY `index_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

用户的建表语句如下：

DROP TABLE IF EXISTS `user`;
SET character_set_client = utf8mb4 ;
CREATE TABLE `user` (`id` int(11) NOT NULL AUTO_INCREMENT,`username` varchar(50) DEFAULT NULL,`password` varchar(50) DEFAULT NULL,`salt` varchar(50) DEFAULT NULL,`email` varchar(100) DEFAULT NULL,`type` int(11) DEFAULT NULL COMMENT '0-普通用户; 1-超级管理员; 2-版主;',`status` int(11) DEFAULT NULL COMMENT '0-未激活; 1-已激活;',`activation_code` varchar(100) DEFAULT NULL,`header_url` varchar(200) DEFAULT NULL,`create_time` timestamp NULL DEFAULT NULL,PRIMARY KEY (`id`),KEY `index_username` (`username`(20)),KEY `index_email` (`email`(20))
) ENGINE=InnoDB AUTO_INCREMENT=101 DEFAULT CHARSET=utf8;

相关帖子数据及用户数据可从如何创建一个社区的首页帖子分页 - yumuing博客:做技术的朝拜者此处获取。

由于帖子数量较为庞大，所以，使用属于物理分页的 SQL 分页和拦截器分页，先从 SQL 分页说起解决方案。我们都知道，在 MVC 架构下，常见思路为使用 Mapper 进行数据库操作，将数据库数据映射到实体类，并由 Server 进行逻辑操作，所得到的结果交由 Controller 进行转发到前端。所以，我们先按照常规思路，创建对应实体类。

用户实体类：User.java

//package 和 import 语句/*** * @TableName user*/
@TableName(value ="user")
@Data
public class User implements Serializable {/*** */@TableId(type = IdType.AUTO)private Integer id;private String username;private String password;private String salt;//加盐private String email;/*** 0-普通用户; 1-超级管理员; 2-版主;*/private Integer type;/*** 0-未激活; 1-已激活;*/private Integer status;/*** 激活码*/private String activationCode;/*** 头像url*/private String headerUrl;private Date createTime;@TableField(exist = false)private static final long serialVersionUID = 1L;//toString()、hashCodeequals()、 get() 和 set()方法，完整可看 https://yumuing.top/archives/23.html

帖子实体类：DiscussPost.java

//package 和 import 语句/*** * @TableName discuss_post*/
@TableName(value ="discuss_post")
@Data
public class DiscussPost implements Serializable {/*** 帖子 ID*/@TableId(type = IdType.AUTO)private Integer id;/*** 用户 ID*/private String userId;/*** 帖子标题*/private String title;/*** 帖子内容*/private String content;/*** 帖子类型 0-普通; 1-置顶;*/private Integer type;/*** 帖子状态 0-正常; 1-精华; 2-拉黑;*/private Integer status;/*** 帖子创建日期*/private Date createTime;/*** 评论数量*/private Integer commentCount;/*** 帖子分数*/private Double score;@TableField(exist = false)private static final long serialVersionUID = 1L;//toString()、hashCodeequals()、 get() 和 set()方法，完整可看 https://yumuing.top/archives/23.html

分页（信息）实体类：Page.java

该实体类只是用来承担 Server 查询出来的各种参数以及存有计算总结数字的方法的映射实体，方便 Controller 进行调用。

• getOffset：获取当前页起始行 = 当前页码 * 每页显示上限-每页显示上限 = (current-1) * limit
• getTotal：获取总页数 = 总行数 / 每页显示上限 = rows / limit （若不能整除，则加一）
• getFrom：获取起始页码，即当前页码前两页，若为首页及第二页，则为1
• getTo：获取截止页码，即当前页码后两页，若为尾页及倒数第二页，则为总页数 total

package top.yumuing.community.entity;// 封装分页信息
public class Page {// 当前页码private int current = 1;// 每页显示上限private int limit =10;// 数据总数private int rows;// 查询对应分页路径，复用分页链接private String path;//toString()、hashCodeequals()、 get() 和 set()方法，完整可看 https://yumuing.top/archives/23.html// 获取当前页起始行public int getOffset(){// current * limit - limitreturn (current-1) * limit;}// 获取总页数public int getTotal(){// rows / limitif (rows % limit == 0){return rows / limit;}else {return rows / limit + 1;}}// 获取起始页码public int getFrom(){int from = current - 2;return from < 1 ? 1 : from;}// 获取截止页码public int getTo(){int to = current +2;int total = getTotal();return to > total ? total : to;}
}

三个实体类创建结束，还有两个 mapper ：DiscussPostMapper.java、UserMapper.java 以及对应的 xml 代码，如下：

DiscussPostMapper.java

在进行分页查询帖子时，为了与用户查询个人帖子功能复用，确定以下参数：

• userId：首页默认为 0，而需要查询用户的帖子就填入对应 userId
• offset：每一页起始行行号
• limit：每页最多显示多少条数据

注：@Param(“参数别名”)：书写参数别名，需要动态拼接 SQL 语句时，传入的参数有且只有一个，参数之前必须增加 @Param(“参数别名”)，否则会报错。

//package 和 import 语句
/**
* @author yumuuing
* @description 针对表【discuss_post】的数据库操作Mapper
* @Entity top.yumuing.community.entity.DiscussPost
*/
@Mapper
public interface DiscussPostMapper extends BaseMapper<DiscussPost> {List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);int selectDiscussPostRows(@Param("userId") int userId);}

UserMapper.java

//package 和 import 语句
/**
* @author yumuuing
* @description 针对表【user】的数据库操作Mapper
* @Entity top.yumuing.community.entity.User
*/
@Mapper
public interface UserMapper extends BaseMapper<User> {User selectOneById(@Param("id") int id);
}

UserMapper.xml

selectOneById：通过 ID 查询对应用户

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="top.yumuing.community.mapper.UserMapper"><resultMap id="BaseResultMap" type="top.yumuing.community.entity.User"><id property="id" column="id" jdbcType="INTEGER"/><result property="username" column="username" jdbcType="VARCHAR"/><result property="password" column="password" jdbcType="VARCHAR"/><result property="salt" column="salt" jdbcType="VARCHAR"/><result property="email" column="email" jdbcType="VARCHAR"/><result property="type" column="type" jdbcType="INTEGER"/><result property="status" column="status" jdbcType="INTEGER"/><result property="activationCode" column="activation_code" jdbcType="VARCHAR"/><result property="headerUrl" column="header_url" jdbcType="VARCHAR"/><result property="createTime" column="create_time" jdbcType="TIMESTAMP"/></resultMap><sql id="Base_Column_List">id,username,password,salt,email,type,status,activation_code,header_url,create_time</sql><select id="selectOneById" resultType="User">select<include refid="Base_Column_List"/>from userwhere id = #{id}</select></mapper>

DiscussPostMapper.xml

为了实现复用，使用以下代码，进行判断是否加上 and user_id = #{userId}

 <if test="userId!=0">and user_id = #{userId}</if>

由于帖子状态为 2 时，为拉黑状态，不可展示给对应用户，所以添加上 order by type desc, create_time desc 语句进行判断，并且帖子类型为普通（0）和置顶（1），帖子展示为最新帖子，故两种属性采用倒序状态。selectDiscussPostRows 查询语句为获取该页帖子行数。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="top.yumuing.community.mapper.DiscussPostMapper"><resultMap id="BaseResultMap" type="top.yumuing.community.entity.DiscussPost"><id property="id" column="id" jdbcType="INTEGER"/><result property="userId" column="user_id" jdbcType="VARCHAR"/><result property="title" column="title" jdbcType="VARCHAR"/><result property="content" column="content" jdbcType="VARCHAR"/><result property="type" column="type" jdbcType="INTEGER"/><result property="status" column="status" jdbcType="INTEGER"/><result property="createTime" column="create_time" jdbcType="TIMESTAMP"/><result property="commentCount" column="comment_count" jdbcType="INTEGER"/><result property="score" column="score" jdbcType="DOUBLE"/></resultMap><sql id="Base_Column_List">id,user_id,title,content,type,status,create_time,comment_count,score</sql><select id="selectDiscussPosts" resultType="DiscussPost">select <include refid="Base_Column_List"></include>from discuss_postwhere status != 2<if test="userId!=0">and user_id = #{userId}</if>order by type  desc, create_time desclimit #{offset},#{limit}</select><select id="selectDiscussPostRows" resultType="int">select count(id)from discuss_postwhere status != 2<if test="userId!=0">and user_id = #{userId}</if></select></mapper>

在 Server 下采用 impl 实现对应接口的方式，这样，以后一旦需要修改数据库时，只需要实现另一个数据库的方法，在修改注入对象即可，无需更改 Controller 实际业务代码：对应接口代码如下：

DiscussPostService.java

//package 和 import 语句/**
* @author yumuuing
* @description 针对表【discuss_post】的数据库操作Service
*/
@Service
public interface DiscussPostService extends IService<DiscussPost> {public List<DiscussPost> findDiscussPosts(int userId,int offset,int limit);public int findDiscussPostsRows(int userId);}

UserService.java

//package 和 import 语句/**
* @author yumuuing
* @description 针对表【user】的数据库操作Service
*/
@Service
public interface UserService extends IService<User> {public User findUserById(int id);}

mysql 的 impl 实现方法：

DiscussPostServiceImpl.java

• findDiscussPosts：该分页下帖子的所有信息
• findDiscussPostsRows：该分页的行数

//package 和 import 语句/**
* @author yumuuing
* @description 针对表【discuss_post】的数据库操作Service实现
*/
@Service
public class DiscussPostServiceImpl extends ServiceImpl<DiscussPostMapper, DiscussPost>implements DiscussPostService{@Resourcepublic DiscussPostMapper discussPostMapper;@Overridepublic List<DiscussPost> findDiscussPosts(int userId, int offset, int limit) {return discussPostMapper.selectDiscussPosts(userId,offset,limit);}@Overridepublic int findDiscussPostsRows(int userId) {return discussPostMapper.selectDiscussPostRows(userId);}
}

UserServiceImpl.java

• findUserById：查询对应用户

//package 和 import 语句/**
* @author yumuuing
* @description 针对表【user】的数据库操作Service实现
*/
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User>implements UserService{@Resourceprivate UserMapper userMapper;@Overridepublic User findUserById(int id) {return userMapper.selectOneById(id);}
}

现在我们已经实现了从 DAO 层到 Server 层的分页操作，其所需参数的查询，现在需要到 Controller 层进行转发到前端，进行调用和 UI 展示了。前端采用 thymeleaf 进行开发，不是严格的前后端开发形式，而是混合开发。

首先，我们得先利用 Page 实体类获取对应的分页信息，利用分页信息将数据库内的对应分页的帖子映射实体放入 discussPostList 中，利用 userServiceImpl.findUserById(Integer.parseInt(post.getUserId())) 获取与匹配在discussPostList 中匹配的 user，注意，用户拥有多个帖子，最好以帖子匹配用户，不然会存在重复信息，以 discussPost 为匹配要求，user 为匹配对象。放入同一个 map 对象中，再将所有的 map 对象放入 List 中，以便传输给前端。利用 model.addAttribute(“discussPosts”,discussPosts) 方法进行传输。

//package 和 import 语句@Controller
public class HomeController {@Autowired@Qualifier("discussPostServiceImpl")private DiscussPostService discussPostServiceImpl;@Autowired@Qualifier("userServiceImpl")private UserService userServiceImpl;@RequestMapping(path = "/index",method = RequestMethod.GET)public String getIndecPage(Model model ,Page page){//获取分页page.setRows(discussPostServiceImpl.findDiscussPostsRows(0));page.setPath("/index");// 获取帖子List<DiscussPost> discussPostList = discussPostServiceImpl.findDiscussPosts(0,page.getOffset(),page.getLimit());List<Map<String,Object>> discussPosts = new ArrayList<>();if (discussPostList != null){for(DiscussPost post: discussPostList){Map<String, Object> map = new HashMap<>();map.put("post",post);User user = userServiceImpl.findUserById(Integer.parseInt(post.getUserId()));map.put("user",user);discussPosts.add(map);}}model.addAttribute("discussPosts",discussPosts);return "/index";}
}

前端调用

注意：xmlns:th=“http://www.thymeleaf.org”：导入 thymeleaf 模板标志

主要看帖子列表以及分页部分

帖子列表

在 thymeleaf 中，# 代表调用方法，$ 代表变量。

• th:each="map:${discussPosts}：收到后端的传输数据，为 map 集合 List，利用此代码一一遍历，每次遍历出的元素命名为 map

• ${map.user.headerUrl}、${map.post.title}、${map.user.username}；都是获取 map 里对应的数据

• th:utext=：如果不是使用 utext 可能会出现转义字符不显示为正确符号，而是普通字符

• ${map.post.type==1}、${map.post.status==1}：前一个判断是否为置顶帖子，后一个判断是否为精华帖子，是则存在该元素，否则取消

• ${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}：调用 dates.format() 方法格式化从 map 取出的帖子创建时间数据

分页

• th:if="${page.rows>0}：如果帖子行数为 0 ，分页部分不存在

• @{${page.path}(current=1)}：表示在域名后面拼接 page.path 变量数据，再加上 ?current=1，括号代表拼接 Get 参数。

• class="|page-item ${page.current==1?'disabled':''}|"：两竖杠代表静态数据，即不会改变数据，而 $ 后代表变量，如果 page.current==1 则无法点击，disabled 在 class 中代表无法点击。其他的类似

• th:each="i:${#numbers.sequence(page.from,page.to)}"：#numbers.sequence() 输出从某个数字到某个数字的顺序数字序列，获得的当前页数字赋给 i

• th:href="@{${page.path}(current=${i})}" th:text="${i}：点击后进行正确的页数跳转，并显示对应数字

index.html 代码如下：

<!doctype html>  
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"><link rel="stylesheet" th:href="@{/css/global.css}" /><title>yumuing 社区-首页</title>
</head>
<body>
<div class="nk-container"><!-- 头部 --><header class="bg-dark sticky-top"><div class="container"><!-- 导航 --><nav class="navbar navbar-expand-lg navbar-dark"><!-- 功能 --><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="index.html">首页</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link position-relative" href="#">消息<span class="badge badge-danger">12</span></a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="#">注册</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="#">登录</a></li><li class="nav-item ml-3 btn-group-vertical dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/></a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="#">个人主页</a><a class="dropdown-item text-center" href="#">账号设置</a><a class="dropdown-item text-center" href="#">退出登录</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary">nowcoder</span></div></li></ul><!-- 搜索 --><form class="form-inline my-2 my-lg-0" action="#"><input class="form-control mr-sm-2" type="search" aria-label="Search" /><button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button></form></div></nav></div></header><!-- 内容 --><div class="main"><div class="container"><div class="position-relative"><!-- 筛选条件 --><ul class="nav nav-tabs mb-3"><li class="nav-item"><a class="nav-link active" href="#">最新</a></li><li class="nav-item"><a class="nav-link" href="#">最热</a></li></ul><button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal">我要发布</button></div><!-- 弹出框 --><div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="publishModalLabel">新帖发布</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="col-form-label">标题：</label><input type="text" class="form-control" id="recipient-name"></div><div class="form-group"><label for="message-text" class="col-form-label">正文：</label><textarea class="form-control" id="message-text" rows="15"></textarea></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" id="publishBtn">发布</button></div></div></div></div><!-- 提示框 --><div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="hintModalLabel">提示</h5></div><div class="modal-body" id="hintBody">发布完毕!</div></div></div></div><!-- 帖子列表 --><ul class="list-unstyled"><li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}"><a href="#"><img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;"></a><div class="media-body"><h6 class="mt-0 mb-3"><a href="#" th:utext="${map.post.title}"></a><span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span><span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span></h6><div class="text-muted font-size-12"><u class="mr-3" th:utext="${map.user.username}">yumuing</u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}"></b><ul class="d-inline float-right"><li class="d-inline ml-2">赞 11</li><li class="d-inline ml-2">|</li><li class="d-inline ml-2">回帖 7</li></ul></div></div></li></ul><!-- 分页 --><nav class="mt-5" th:if="${page.rows>0}"><ul class="pagination justify-content-center"><li class="page-item"><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></div></div><!-- 尾部 --><footer class="bg-dark"><div class="container"><div class="row"><!-- 二维码 --><div class="col-4 qrcode"><img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;" /></div><!-- 公司信息 --><div class="col-8 detail-info"><div class="row"><div class="col"><ul class="nav"><li class="nav-item"><a class="nav-link text-light" href="#">关于我们</a></li><li class="nav-item"><a class="nav-link text-light" href="#">加入我们</a></li><li class="nav-item"><a class="nav-link text-light" href="#">意见反馈</a></li><li class="nav-item"><a class="nav-link text-light" href="#">企业服务</a></li><li class="nav-item"><a class="nav-link text-light" href="#">联系我们</a></li><li class="nav-item"><a class="nav-link text-light" href="#">免责声明</a></li><li class="nav-item"><a class="nav-link text-light" href="#">友情链接</a></li></ul></div></div><div class="row"><div class="col"><ul class="nav btn-group-vertical company-info"><li class="nav-item text-white-50">公司地址：#</li><li class="nav-item text-white-50">联系方式：#</li><li class="nav-item text-white-50">#</li><li class="nav-item text-white-50">######## &nbsp;&nbsp;&nbsp;&nbsp;<img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;" />######## 号</li></ul></div></div></div></div></div></footer>
</div><script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{js/index.js}"></script>
</body>
</html>