如何实现投票系统中每页展示2张图片的分页功能

针对你开发投票系统时遇到的分页展示图片需求（每页2张，点击next加载新页），以下是路由、控制器的具体设计方案，附前端实现思路：

采用查询参数传递页码的方式，URL更直观且支持刷新页面保留当前页状态，以Express框架为例：

// 定义分页获取图片的路由
app.get('/vote/images', voteController.getImagesPage);

如果偏好RESTful风格，也可以将页码放在路径中：app.get('/vote/images/:page', voteController.getImagesPage)，但查询参数更灵活，允许设置默认页码（比如默认展示第1页）。

核心是计算偏移量/跳过条数：偏移量 = (当前页码 - 1) * 每页数量，结合数据库查询实现分页，同时获取总数据量判断是否存在下一页。

SQL数据库（以MySQL + Sequelize为例） #

exports.getImagesPage = async (req, res) => {
  // 从查询参数获取页码，默认第1页
  const page = parseInt(req.query.page) || 1;
  const pageSize = 2; // 每页展示2张图片
  const offset = (page - 1) * pageSize;

  try {
    // 查询分页数据+总条数，用于计算总页数
    const { count: totalImages, rows: images } = await Image.findAndCountAll({
      limit: pageSize,
      offset,
      // 添加排序规则，保证分页顺序稳定（比如按创建时间倒序）
      order: [['createdAt', 'DESC']]
    });

    const totalPages = Math.ceil(totalImages / pageSize);
    const hasNextPage = page < totalPages;

    // 渲染页面，传递分页相关数据给前端
    res.render('vote', {
      images,
      currentPage: page,
      hasNextPage,
      nextPage: page + 1
    });
  } catch (error) {
    console.error('加载图片分页数据失败:', error);
    res.status(500).send('服务器错误');
  }
};

MongoDB（以Mongoose为例） #

exports.getImagesPage = async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const pageSize = 2;
  const skip = (page - 1) * pageSize;

  try {
    // 查询当前页的图片
    const images = await Image.find()
      .sort({ createdAt: -1 })
      .skip(skip)
      .limit(pageSize);

    // 获取图片总数量
    const totalImages = await Image.countDocuments();
    const totalPages = Math.ceil(totalImages / pageSize);
    const hasNextPage = page < totalPages;

    res.render('vote', {
      images,
      currentPage: page,
      hasNextPage,
      nextPage: page + 1
    });
  } catch (error) {
    console.error('加载图片分页数据失败:', error);
    res.status(500).send('服务器错误');
  }
};

在页面模板中（以EJS为例），根据hasNextPage控制按钮显示，点击按钮跳转到对应页码的路由：

<!-- 展示当前页的2张图片 -->
<div class="vote-images">
  <% images.forEach(image => { %>
    <div class="image-item">
      <img src="<%= image.imageUrl %>" alt="投票图片">
      <!-- 这里可以添加投票相关元素 -->
    </div>
  <% }) %>
</div>

<!-- Next按钮 -->
<% if (hasNextPage) { %>
  <a href="/vote/images?page=<%= nextPage %>" class="btn next-btn">Next</a>
<% } else { %>
  <p class="no-more">没有更多图片了</p>
<% } %>

内容的提问来源于stack exchange，提问作者Chris