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

关注

原创 2023-04-28 13:44:47 1.4k 阅读 AI 写同款· GEO 优化 ›

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

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

问题阐述

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

帖子类型分为普通（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 - 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">&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>