要进行首页帖子展示，就必须学会分页，而在创建分页之前，我们得先认识到，为什么要进行分页？一个大型网站的数据库将容纳大量的数据，而我们进行展示某部分数据时，为了保证浏览速度，不可能一次性地将所有数据进行传输，更何况，不是全部传输过去的数据第一时间就能有效利用，所以，只要每次将需要的数据传输过去就好，即使是后续需要的数据，那也是后面时间点需要完成的工作，为了做到这一点，必须对一个数据整体进行划分，合理地传输并展示给用户，其中，划分出来的每一部分可被称为一页数据，完成划分工作的就是分页操作。而分页操作在 spingboot 及 mybatis 的环境下，可被分为以下几种分页情况：
| 分类 | 优点 | 缺点 |
|---|---|---|
| 数组分页（逻辑分页）：查询出所有数据，再利用 List 数组截取需要的数据 | 效率高 | 内存占用大 |
| SQL 分页（物理分页）：只从数据库中查询当前页的数据 | 占用内存小 | 每次都得书写 limit 语句，较为冗余，无法统一管理 |
| 拦截器分页：自定义拦截器实现了拦截所有以 ByPage 结尾的查询语句，并且利用获取到的分页相关参数统一在 SQL 语句后面加上limit分页的相关语句，底层仍是物理分页。 | 方便管理、内存占用小 | 数据量较小的情况可以考虑更高效的分页类型 |
| RowBounds 分页：与数组分页类似，只是无需编写分页逻辑 | 效率高，适合数据量较小的情况，有效地防止内存溢出 | 内存占用大 |
了解为什么要进行分页以及分页的类型之后，现在如果分发给你一个任务：需要完成社区类型网站的首页以及个人帖子的展示，其中，帖子排序具有以下因素：
各个因素顺序越靠前，优先级越高，请将帖子按合理顺序分页且排序，并且在明确当前第几页的情况下，保证当前页码前后两页都可展示并切换（首页、末页为特殊情况），实现首页、上一页、下一页、末页跳转功能即可。
注：为了保证过多无关代码，采用创建时间作为排序因素之一，而不是评价帖子优劣的帖子分数。
相关可运行的代码文件及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()方法，完整可看 /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()方法，完整可看 /archives/23.html分页（信息）实体类：Page.java
该实体类只是用来承担 Server 查询出来的各种参数以及存有计算总结数字的方法的映射实体，方便 Controller 进行调用。
package ity;// 封装分页信息
public class Page {// 当前页码private int current = 1;// 每页显示上限private int limit =10;// 数据总数private int rows;// 查询对应分页路径，复用分页链接private String path;//toString()、hashCodeequals()、 get() 和 set()方法，完整可看 /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
在进行分页查询帖子时，为了与用户查询个人帖子功能复用，确定以下参数：
注：@Param(“参数别名”)：书写参数别名，需要动态拼接 SQL 语句时，传入的参数有且只有一个，参数之前必须增加 @Param(“参数别名”)，否则会报错。
//package 和 import 语句
/**
* @author yumuuing
* @description 针对表【discuss_post】的数据库操作Mapper
* @Entity ity.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 ity.User
*/
@Mapper
public interface UserMapper extends BaseMapper<User> {User selectOneById(@Param("id") int id);
}
selectOneById：通过 ID 查询对应用户
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis//DTD Mapper 3.0//EN"".dtd">
<mapper namespace="top.yumuingmunity.mapper.UserMapper"><resultMap id="BaseResultMap" type="ity.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>
为了实现复用，使用以下代码，进行判断是否加上 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//DTD Mapper 3.0//EN"".dtd">
<mapper namespace="top.yumuingmunity.mapper.DiscussPostMapper"><resultMap id="BaseResultMap" type="ity.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
//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
//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.UserId())) 获取与匹配在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(Offset(),Limit());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.UserId()));map.put("user",user);discussPosts.add(map);}}model.addAttribute("discussPosts",discussPosts);return "/index";}
}
注意：xmlns:th=“”：导入 thymeleaf 模板标志
主要看帖子列表以及分页部分
在 thymeleaf 中，# 代表调用方法，$ 代表变量。
th:each="map:${discussPosts}：收到后端的传输数据，为 map 集合 List，利用此代码一一遍历，每次遍历出的元素命名为 map
${map.user.headerUrl}、${map.post.title}、${map.user.username}；都是获取 map 里对应的数据
th:utext=：如果不是使用 utext 可能会出现转义字符不显示为正确符号，而是普通字符
${pe==1}、${map.post.status==1}：前一个判断是否为置顶帖子，后一个判断是否为精华帖子，是则存在该元素，否则取消
${#dates.format(ateTime,'yyyy-MM-dd HH:mm:ss')}：调用 dates.format() 方法格式化从 map 取出的帖子创建时间数据
th:if="${ws>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.)}"：#numbers.sequence() 输出从某个数字到某个数字的顺序数字序列，获得的当前页数字赋给 i
th:href="@{${page.path}(current=${i})}" th:text="${i}：点击后进行正确的页数跳转，并显示对应数字
index.html 代码如下：
<!doctype html>
<html lang="en" xmlns:th="">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="icon" href=".png"/><link rel="stylesheet" href=".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=".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">×</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="${pe==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(ateTime,'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="${ws>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.)}"><a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a></li><li th:class="|page-item ${page.current=&#al?'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=${al})}">末页</a></li></ul></nav></div></div><!-- 尾部 --><footer class="bg-dark"><div class="container"><div class="row"><!-- 二维码 --><div class="col-4 qrcode"><img src=".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">######## <img src=".png" style="width:18px;" />######## 号</li></ul></div></div></div></div></div></footer>
</div><script src=".3.1.min.js" crossorigin="anonymous"></script>
<script src=".js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src=".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>
本文发布于:2024-02-04 16:10:24，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170711320957053.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
