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

约定不等于承诺〃 2023-09-27 15:13 3阅读 0赞

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

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>优点</th> 
   <th>缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>数组分页（逻辑分页）：查询出所有数据，再利用 List 数组截取需要的数据</td> 
   <td>效率高</td> 
   <td>内存占用大</td> 
  </tr> 
  <tr> 
   <td>SQL 分页（物理分页）：只从数据库中查询当前页的数据</td> 
   <td>占用内存小</td> 
   <td>每次都得书写 limit 语句，较为冗余，无法统一管理</td> 
  </tr> 
  <tr> 
   <td>拦截器分页：自定义拦截器实现了拦截所有以 ByPage 结尾的查询语句，并且利用获取到的分页相关参数统一在 SQL 语句后面加上limit分页的相关语句，底层仍是物理分页。</td> 
   <td>方便管理、内存占用小</td> 
   <td>数据量较小的情况可以考虑更高效的分页类型</td> 
  </tr> 
  <tr> 
   <td>RowBounds 分页：与数组分页类似，只是无需编写分页逻辑</td> 
   <td>效率高，适合数据量较小的情况，有效地防止内存溢出</td> 
   <td>内存占用大</td> 
  </tr> 
 </tbody> 
</table>

### 问题阐述 ###

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

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

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

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

相关可运行的代码文件及SQL语句可看[如何创建一个社区的首页帖子分页 - yumuing博客:做技术的朝拜者][- 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博客:做技术的朝拜者][- 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 - limit
            return (current-1) * limit;
        }
    
    	// 获取总页数
        public int getTotal(){
        
            // rows / limit
            if (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 mapper
            PUBLIC "-//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 user
            where 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 mapper
            PUBLIC "-//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_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>

在 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{
        
        @Resource
        public DiscussPostMapper discussPostMapper;
    
        @Override
        public List<DiscussPost> findDiscussPosts(int userId, int offset, int limit) {
        
            return discussPostMapper.selectDiscussPosts(userId,offset,limit);
        }
    
        @Override
        public 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{
        
    
        @Resource
        private UserMapper userMapper;
    
        @Override
        public 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">×</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">
                                        ########     
                                        <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>

![求点赞转发][format_png]

[- yumuing]: https://yumuing.top/archives/23.html
[format_png]: https://img-blog.csdnimg.cn/img_convert/139700953a167e3ee7d470449ce54541.webp?x-oss-process=image/format,png