PHP实现双图分页：每页显示2张图片的完整方案-php教程-PHP中文网

PHP实现双图分页：每页显示2张图片的完整方案

本文详解如何在web应用中实现“每页仅展示2张图片”的精准分页逻辑，涵盖数据库查询、页码控制、前端导航与安全防护，适用于投票系统、作品展示等需强交互场景。

本文详解如何在web应用中实现“每页仅展示2张图片”的精准分页逻辑，涵盖数据库查询、页码控制、前端导航与安全防护，适用于投票系统、作品展示等需强交互场景。

在构建如《社交网络》式图片投票系统时，“每页固定显示2张图片”并非通用分页的简单缩放，而是一种语义化分页（Semantic Pagination）——它将业务规则（每次比对/投票需且仅需2项）深度耦合到分页逻辑中。这种设计要求后端严格按$pageSize = 2执行数据切片，并确保前端导航清晰、无歧义。以下为基于原生PHP与Laravel双视角的完整实现方案。

一、核心参数与边界控制（关键第一步）

无论使用何种技术栈，必须明确定义并校验三个基础参数：

$pageSize = 2（硬性业务约束，不可由用户修改）
$page = (int)$_GET['page'] ?? 1（强制整型转换，杜绝字符串注入）
$total = $pdo->query("SELECT COUNT(*) FROM images WHERE status = 1")->fetchColumn()（带业务条件的精确计数）

随后进行双重合法性校验：

// 防越界：页码不能小于1，也不能超过理论最大页数
$maxPage = $total > 0 ? ceil($total / 2) : 1;
$page = max(1, min($page, $maxPage));

// 防空页：若总记录数为0，直接返回空数组
if ($total === 0) {
    $images = [];
} else {
    $offset = ($page - 1) * 2;
    $stmt = $pdo->prepare("SELECT id, url, title FROM images WHERE status = 1 ORDER BY created_at DESC LIMIT ?, 2");
    $stmt->execute([$offset]);
    $images = $stmt->fetchAll(PDO::FETCH_ASSOC);
}

✅ 注意：此处使用LIMIT ?, 2而非拼接变量，彻底规避SQL注入；status = 1确保只分页有效图片，体现业务真实性。

二、前端导航：精简、明确、无障碍

因每页仅2图，传统“1 2 3 … 100”页码列表冗余且易误操作。推荐采用极简双态导航：

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

<div class="voting-pager" role="navigation" aria-label="图片投票分页">
  <a href="?page=<?=%20max(1,%20%24page%20-%201)%20?>" class="btn <?= $page <= 1 ? 'disabled' : '' ?>" aria-disabled="<?= $page <= 1 ? 'true' : 'false' ?>">
     ← 上一组
  </a>

  <span class="pager-info">
    第 = $page ?> 组（共 = $maxPage ?> 组）｜ 
    当前显示 = count($images) ?> 张图片
  </span>

  <a href="?page=<?=%20min(%24maxPage,%20%24page%20+%201)%20?>" class="btn <?= $page >= $maxPage ? 'disabled' : '' ?>" aria-disabled="<?= $page >= $maxPage ? 'true' : 'false' ?>">
     下一组 →
  </a>
</div>

使用aria-label和aria-disabled保障屏幕阅读器兼容性
“组”替代“页”，强化业务语义（用户理解为“对比组”而非抽象页码）
实时显示当前组序号与总组数，降低认知负荷

三、Laravel快捷实现（生产环境首选）

若项目已使用Laravel，可一行代码完成全部逻辑，并自动处理SEO优化：

// Controller
public function vote(Request $request)
{
    $images = Image::where('status', 1)
                   ->orderBy('created_at', 'desc')
                   ->paginate(2); // 硬编码2，符合业务需求

    return view('vote.index', compact('images'));
}

Blade模板中渲染：

<!-- 图片展示区（每页必为0、1或2张） -->
@foreach($images as $img)
  <div class="image-card">
    @@##@@url }}" alt="{{ $img->title }}" loading="lazy">
    <button class="vote-btn" data-id="{{ $img->id }}">✓ 投票</button>
  </div>
@endforeach

<!-- 分页导航（Laravel自动添加 rel="prev/next"，利于SEO） -->
<div class="pagination">
  {{ $images->onEachSide(0)->links() }} 
  <!-- onEachSide(0) 移除省略号，仅保留上一组/下一组 -->
</div>