《零基础学PHP：从入门到实战》教程-模块九：手把手构建你的第一个简易博客系统-4

最新推荐文章于 2026-06-18 23:22:48 发布

原创最新推荐文章于 2026-06-18 23:22:48 发布 · 915 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#php #开发语言

php 专栏收录该内容

153 篇文章

订阅专栏

第4章：用户界面：打造博客前端展示页面

章节介绍

恭喜你！通过第3章的实战，你已经为博客系统注入了强大的“心脏”——后台管理功能。现在，数据已经静静地躺在数据库中，等待着被展示给世界。本章，我们将开启项目的另一个重要篇章：构建用户界面（UI）。

本章学习目标：

掌握在HTML中嵌入PHP代码以动态输出数据的核心方法。
能够根据URL参数（如文章ID）查询并渲染单篇文章详情页。
理解并实现简单的文章分页逻辑。
学会使用模板包含技术（如页头、页脚）来组织代码，提高复用性。
结合前端框架（如Bootstrap）快速搭建美观、响应式的博客页面。

在整个教程中的作用：
本章是项目从“开发者工具”转变为“用户产品”的关键一步。它将后台逻辑与前端展示连接起来，实现数据的动态流动与呈现。你将从纯粹的“数据处理者”转变为“产品塑造者”，亲手打造用户浏览和阅读的体验。
与前面章节的衔接：
我们将直接复用第2章设计的数据库结构和第3章编写的核心数据操作函数（如getAllPosts， getPostById）。本章的重点不再是操作数据，而是如何获取并漂亮地展示这些数据。
本章主要内容概览：
我们将从创建公共的页面模板开始，然后一步步构建博客首页（文章列表）、文章分类页、文章详情页，并实现分页功能。最后，我们会引入Bootstrap框架，让博客界面焕然一新。

核心概念讲解

1. PHP 与 HTML 的混编：动态网页的基石

动态网站的核心在于“动态”——内容根据数据实时变化。PHP作为一种服务器端脚本语言，其强大之处在于能够直接嵌入到HTML中。

原理：当用户请求一个.php文件时，服务器会先执行其中的PHP代码（例如，从数据库查询数据），然后将执行结果（通常是生成的HTML片段）与原有的静态HTML混合，最终将纯HTML发送给用户的浏览器。
应用场景：循环输出文章列表、根据条件显示不同内容（如登录/未登录状态）、填充文章标题和内容等。
最佳实践：尽量保持逻辑与显示的分离。在简单的项目中，可以将PHP代码段（如<?php ... ?>）直接放在HTML中需要动态内容的位置。对于更复杂的项目，建议学习MVC等设计模式。

2. 通过 URL 参数（Query String）传递数据

如何告诉服务器“我想看ID为5的文章”？答案是通过URL参数。

格式：detail.php?id=5&category=php
- ? 标记参数开始。
id=5 是一个键值对参数。
& 用于连接多个参数。
PHP获取方式：使用超全局变量 $_GET。

    $articleId = $_GET[‘id’]; // 获取id参数的值，即 5
    $category = $_GET[‘category’]; // 获取category参数的值，即 ‘php’

安全注意事项：$_GET 中的值来源于用户输入，绝对不可信。必须进行严格的过滤和验证，防止SQL注入等攻击（详见后文安全部分）。

3. 分页逻辑

当文章数量很多时，一次性全部加载到首页会导致页面臃肿、加载缓慢。分页将数据分割成多个“页”，每次只加载一页。

核心参数：
page：当前页码（从1开始）。
limit：每页显示的文章数量（如10篇）。
SQL实现原理：使用 LIMIT 子句。
LIMIT 0, 10 获取第1条到第10条（第1页）。
LIMIT 10, 10 获取第11条到第20条（第2页）。
计算公式：offset = (page - 1) * limit
前端实现：需要计算总页数，并在页面底部生成页码导航链接。

4. 模板包含：公共代码复用

一个网站的页头（Header）、页脚（Footer）、导航栏（Navbar）通常在每个页面都是一样的。将这些部分提取为独立的文件，然后在需要的地方包含进来，可以极大提高代码的可维护性。

PHP函数：
include ‘header.php’;：包含文件，如果失败会发出警告但脚本继续执行。
require ‘header.php’;：包含文件，如果失败是致命错误，脚本停止执行。
应用：通常，header.php 包含<html>, <head>，导航栏等开标签。footer.php 包含页脚信息和 </body></html> 等闭标签。

代码示例

示例1：基础PHP-HTML混编与循环输出文章列表

假设我们有一个从第3章继承的函数 getAllPosts($limit=null)。

<?php
// file: index.php
// 包含数据库配置和函数定义
require_once ‘config/database.php’;
require_once ‘includes/functions.php’;

// 1. 获取所有文章数据（这里先不做分页，获取最新的10篇）
$posts = getAllPosts(10);
?>
<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
    <meta charset=“UTF-8”>
    <title>我的简易博客</title>
</head>
<body>
    <h1>最新文章</h1>
    <?php if (empty($posts)): ?>
        <!-- 当$posts数组为空时，显示提示信息 -->
        <p>暂无文章发布。</p>
    <?php else: ?>
        <!-- 当有文章时，使用foreach循环输出 -->
        <ul>
            <?php foreach ($posts as $post): ?>
            <li>
                <!-- 动态输出文章标题，并链接到详情页，传递文章ID -->
                <h2><a href=“detail.php?id=<?php echo $post[‘id’]; ?>”><?php echo htmlspecialchars($post[‘title’]); ?></a></h2>
                <!-- 动态输出文章摘要 -->
                <p><?php echo nl2br(htmlspecialchars(substr($post[‘content’], 0, 150) . ‘…’)); ?></p>
                <small>
                    发布于: <?php echo $post[‘created_at’]; ?> |
                    分类: <?php echo htmlspecialchars($post[‘category_name’]); ?>
                </small>
            </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
</body>
</html>

运行结果：页面会显示一个包含最新10篇文章标题、摘要、发布时间和分类的列表。每篇文章标题都是一个链接，指向 detail.php?id=文章ID。

示例2：根据URL参数获取并展示单篇文章详情

<?php
// file: detail.php
require_once ‘config/database.php’;
require_once ‘includes/functions.php’;

// 1. 安全检查：检查是否传递了id参数
if (!isset($_GET[‘id’]) || empty($_GET[‘id’])) {
    die(‘错误：未指定文章ID。’);
}

// 2. 获取并验证ID（防止非数字输入）
$postId = (int)$_GET[‘id’]; // (int)强制转换为整数，非数字会变为0
if ($postId <= 0) {
    die(‘错误：无效的文章ID。’);
}

// 3. 调用函数获取文章详情（假设函数已定义）
$post = getPostById($postId);

// 4. 检查文章是否存在
if (!$post) {
    die(‘错误：找不到指定的文章。’);
}
?>
<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
    <meta charset=“UTF-8”>
    <title><?php echo htmlspecialchars($post[‘title’]); ?> - 我的博客</title>
</head>
<body>
    <article>
        <h1><?php echo htmlspecialchars($post[‘title’]); ?></h1>
        <div class=“meta”>
            <span>作者: <?php echo htmlspecialchars($post[‘author_name’]); ?></span> |
            <span>发布时间: <?php echo $post[‘created_at’]; ?></span> |
            <span>分类: <?php echo htmlspecialchars($post[‘category_name’]); ?></span>
        </div>
        <hr>
        <div class=“content”>
            <!-- 使用 nl2br 将换行符转换为 <br> 标签，保持内容格式 -->
            <?php echo nl2br(htmlspecialchars($post[‘content’])); ?>
        </div>
    </article>
    <p><a href=“index.php”>返回首页</a></p>
</body>
</html>

示例3：使用模板包含重构首页

header.php

<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>
        <?php
        // 动态设置页面标题，如果未定义$pageTitle，则使用默认值
echo isset($pageTitle) ? $pageTitle . ‘ - 简易博客’ : ‘我的简易博客’;
        ?>
    </title>
    <link rel=“stylesheet” href=“assets/css/style.css”>
</head>
<body>
    <header>
        <nav>
            <a href=“index.php”>首页</a> |
            <a href=“category.php?cat=php”>PHP</a> |
            <a href=“about.php”>关于</a>
        </nav>
        <h1><a href=“index.php”>我的简易博客</a></h1>
    </header>
    <main>

footer.php

    </main>
    <footer>
        <p>© <?php echo date(‘Y’); ?> 我的简易博客. 保留所有权利。</p>
    </footer>
</body>
</html>

重构后的 index.php

<?php
// file: index.php
require_once ‘config/database.php’;
require_once ‘includes/functions.php’;

$posts = getAllPosts(10);
$pageTitle = “最新文章”; // 定义页面标题，供header.php使用
// 包含页头
require ‘includes/header.php’;
?>

    <h2><?php echo $pageTitle; ?></h2>
    <?php if (empty($posts)): ?>
        <p>暂无文章发布。</p>
    <?php else: ?>
        <div class=“post-list”>
            <?php foreach ($posts as $post): ?>
            <article class=“post-summary”>
                <h3><a href=“detail.php?id=<?php echo $post[‘id’]; ?>”><?php echo htmlspecialchars($post[‘title’]); ?></a></h3>
                <p class=“excerpt”><?php echo nl2br(htmlspecialchars(substr($post[‘content’], 0, 200) . ‘…’)); ?></p>
                <div class=“post-meta”>
                    <time><?php echo $post[‘created_at’]; ?></time> |
                    <span><?php echo htmlspecialchars($post[‘category_name’]); ?></span>
                </div>
            </article>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

<?php
// 包含页脚
require ‘includes/footer.php’;
?>

示例4：基础分页功能实现

<?php
// file: index_with_pagination.php
require_once ‘config/database.php’;
require_once ‘includes/functions.php’;

// 1. 定义分页参数
$currentPage = isset($_GET[‘page’]) ? (int)$_GET[‘page’] : 1; // 当前页码，默认为1
if ($currentPage < 1) {
    $currentPage = 1;
}
$postsPerPage = 5; // 每页显示5篇文章
$offset = ($currentPage - 1) * $postsPerPage; // 计算偏移量
// 2. 获取总文章数（需要一个新函数）
function getTotalPosts() {
    global $conn; // 假设$conn是数据库连接对象
$sql = “SELECT COUNT(*) as total FROM posts WHERE is_published = 1”;
    $result = $conn->query($sql);
    $row = $result->fetch_assoc();
    return (int)$row[‘total’];
}
$totalPosts = getTotalPosts();
$totalPages = ceil($totalPosts / $postsPerPage); // 计算总页数
// 3. 获取当前页的文章
function getPostsPaginated($offset, $postsPerPage) {
    global $conn;
    $sql = “SELECT p.*, c.name as category_name FROM posts p 
            LEFT JOIN categories c ON p.category_id = c.id 
            WHERE p.is_published = 1 
            ORDER BY p.created_at DESC 
            LIMIT ?, ?”;
    $stmt = $conn->prepare($sql);
    $stmt->bind_param(‘ii’, $offset, $postsPerPage); // ‘ii‘ 表示两个整数参数
$stmt->execute();
    return $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
}
$posts = getPostsPaginated($offset, $postsPerPage);

$pageTitle = “文章列表 (第 {$currentPage} 页)”;
require ‘includes/header.php’;
?>

<!-- ... 文章列表循环输出代码同上 ... -->

<!-- 4. 生成分页导航 -->
<nav aria-label=“文章分页”>
    <ul class=“pagination”>
        <!-- 上一页链接 -->
        <li class=“page-item <?php echo ($currentPage <= 1) ? ‘disabled’ : ‘‘; ?>“>
            <a class=“page-link” href=“?page=<?php echo $currentPage - 1; ?>“>上一页</a>
        </li>

        <!-- 页码链接 -->
        <?php for ($page = 1; $page <= $totalPages; $page++): ?>
            <li class=“page-item <?php echo ($page == $currentPage) ? ‘active’ : ‘‘; ?>“>
                <a class=“page-link” href=“?page=<?php echo $page; ?>“><?php echo $page; ?></a>
            </li>
        <?php endfor; ?>

        <!-- 下一页链接 -->
        <li class=“page-item <?php echo ($currentPage >= $totalPages) ? ‘disabled’ : ‘‘; ?>“>
            <a class=“page-link” href=“?page=<?php echo $currentPage + 1; ?>“>下一页</a>
        </li>
    </ul>
</nav>
<p>共 <?php echo $totalPosts; ?> 篇文章， <?php echo $totalPages; ?> 页。</p>

<?php require ‘includes/footer.php’; ?>

实战项目：完善博客前端展示系统

项目需求分析

在本章知识的基础上，我们将系统化地构建一个完整的博客前端，包含以下页面和功能：

首页 (index.php)：展示最新发布的文章列表，支持分页。
文章详情页 (detail.php)：展示单篇文章的完整内容、作者、发布时间等信息。
文章分类页 (category.php)：展示某个分类下的所有文章列表。
响应式布局：使用Bootstrap 5框架，确保网站在手机、平板、电脑上都能良好显示。
导航与搜索：在页头包含主导航栏和一个简单的文章搜索框（搜索功能在第5章实现，本章先做界面）。

技术方案

后端：PHP（数据处理、逻辑控制）、MySQL（数据存储）。
前端：HTML5、CSS3、Bootstrap 5（用于快速构建响应式界面）。
架构：采用模板包含（header.php, footer.php）组织页面结构。

分步骤实现

步骤1：引入Bootstrap并创建基础模板

下载Bootstrap CSS和JS文件，或使用CDN。这里使用CDN。
创建 includes/header.php，在 <head> 中引入Bootstrap。

    <!-- includes/header.php -->
    <!DOCTYPE html>
    <html lang=“zh-CN”>
    <head>
        <meta charset=“UTF-8”>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <title><?php echo isset($pageTitle) ? $pageTitle . ‘ - 简易博客’ : ‘我的简易博客’; ?></title>
        <!-- Bootstrap 5 CSS -->
        <link href=“https:// cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=“stylesheet”>
        <!-- 可在此处添加自定义CSS -->
        <link rel=“stylesheet” href=“/assets/css/custom.css”>
    </head>
    <body>
        <!-- 导航栏 -->
        <nav class=“navbar navbar-expand-lg navbar-dark bg-primary”>
            <div class=“container”>
                <a class=“navbar-brand” href=“/”>零基础PHP博客</a>
                <button class=“navbar-toggler” type=“button” data-bs-toggle=“collapse” data-bs-target=“#navbarNav”>
                    <span class=“navbar-toggler-icon”></span>
                </button>
                <div class=“collapse navbar-collapse” id=“navbarNav”>
                    <ul class=“navbar-nav me-auto”>
                        <li class=“nav-item”><a class=“nav-link” href=“index.php”>首页</a></li>
                        <!-- 动态生成分类导航（需要先从数据库获取分类列表） -->
                        <?php
                        $categories = getAllCategories(); // 假设此函数已定义
foreach ($categories as $cat):
                        ?>
                        <li class=“nav-item”>
                            <a class=“nav-link” href=“category.php?id=<?php echo $cat[‘id’]; ?>”>
                                <?php echo htmlspecialchars($cat[‘name’]); ?>
                            </a>
                        </li>
                        <?php endforeach; ?>
                        <li class=“nav-item”><a class=“nav-link” href=“about.php”>关于</a></li>
                    </ul>
                    <!-- 搜索框（表单action留空，后续实现） -->
                    <form class=“d-flex” action=“search.php” method=“get”>
                        <input class=“form-control me-2” type=“search” name=“q” placeholder=“搜索文章…”>
                        <button class=“btn btn-outline-light” type=“submit”>搜索</button>
                    </form>
                </div>
            </div>
        </nav>
        <main class=“container my-4”>

创建 includes/footer.php，引入Bootstrap JS并关闭标签。

    <!-- includes/footer.php -->
        </main>
        <footer class=“bg-light text-center py-3 mt-5”>
            <div class=“container”>
                <p class=“mb-0”>© <?php echo date(‘Y’); ?> 零基础学PHP实战项目. 本博客系统仅用于学习交流。</p>
            </div>
        </footer>
        <!-- Bootstrap 5 JS Bundle with Popper -->
        <script src=“https:// cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>
    </body>
    </html>

步骤2：实现带分页的博客首页

基于示例4的代码，用Bootstrap的卡片（Card）组件美化文章列表。

<!-- index.php -->
<?php
require_once ‘config/database.php’;
require_once ‘includes/functions.php’;

// ...（分页参数计算代码同示例4）...
$pageTitle = “最新博文”;
require ‘includes/header.php’;
?>

<h2 class=“mb-4”>最新博文</h2>

<?php if (empty($posts)): ?>
    <div class=“alert alert-info” role=“alert”>
        暂时还没有发布任何文章。
</div>
<?php else: ?>
    <div class=“row row-cols-1 row-cols-md-2 g-4”>
        <?php foreach ($posts as $post): ?>
        <div class=“col”>
            <div class=“card h-100 shadow-sm”>
                <div class=“card-body”>
                    <h5 class=“card-title”>
                        <a href=“detail.php?id=<?php echo $post[‘id’]; ?>” class=“text-decoration-none”>
                            <?php echo htmlspecialchars($post[‘title’]); ?>
                        </a>
                    </h5>
                    <p class=“card-text text-muted”>
                        <?php echo nl2br(htmlspecialchars(substr($post[‘content’], 0, 120) . ‘…’)); ?>
                    </p>
                </div>
                <div class=“card-footer bg-white border-top-0”>
                    <small class=“text-muted”>
                        <i class=“bi bi-calendar3”></i> <?php echo date(‘Y-m-d’, strtotime($post[‘created_at’])); ?>
                        &nbsp;|&nbsp;
                        <i class=“bi bi-folder”></i>
                        <a href=“category.php?id=<?php echo $post[‘category_id’]; ?>” class=“text-muted”>
                            <?php echo htmlspecialchars($post[‘category_name’]); ?>
                        </a>
                    </small>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- 分页导航 -->
    <?php if ($totalPages > 1): ?>
    <nav aria-label=“Page navigation” class=“mt-5”>
        <ul class=“pagination justify-content-center”>
            <li class=“page-item <?php echo ($currentPage <= 1) ? ‘disabled’ : ‘‘; ?>“>
                <a class=“page-link” href=“?page=<?php echo $currentPage - 1; ?>“>上一页</a>
            </li>
            <?php for ($page = 1; $page <= $totalPages; $page++): ?>
                <li class=“page-item <?php echo ($page == $currentPage) ? ‘active’ : ‘‘; ?>“>
                    <a class=“page-link” href=“?page=<?php echo $page; ?>“><?php echo $page; ?></a>
                </li>
            <?php endfor; ?>
            <li class=“page-item <?php echo ($currentPage >= $totalPages) ? ‘disabled’ : ‘‘; ?>“>
                <a class=“page-link” href=“?page=<?php echo $currentPage + 1; ?>“>下一页</a>
            </li>
        </ul>
    </nav>
    <?php endif; ?>
<?php endif; ?>

<?php require ‘includes/footer.php’; ?>

步骤3：实现文章分类页

创建 category.php，根据URL中的分类ID筛选文章。

<!-- category.php -->
<?php
require_once ‘config/database.php’;
require_once ‘includes/functions.php’;

// 1. 获取分类ID
if (!isset($_GET[‘id’]) || !is_numeric($_GET[‘id’])) {
    header(‘Location: index.php’); // 跳转到首页
exit();
}
$categoryId = (int)$_GET[‘id’];

// 2. 获取分类信息
function getCategoryById($id) {
    global $conn;
    $sql = “SELECT * FROM categories WHERE id = ?”;
    $stmt = $conn->prepare($sql);
    $stmt->bind_param(‘i’, $id);
    $stmt->execute();
    $result = $stmt->get_result();
    return $result->fetch_assoc();
}
$category = getCategoryById($categoryId);
if (!$category) {
    die(‘分类不存在。’);
}

// 3. 获取该分类下的文章（带分页，逻辑与首页类似，但SQL中增加WHERE category_id = ?）
// 此处省略详细的分页代码，仅展示核心查询逻辑
function getPostsByCategory($categoryId, $offset, $postsPerPage) {
    global $conn;
    $sql = “SELECT p.*, c.name as category_name FROM posts p 
            LEFT JOIN categories c ON p.category_id = c.id 
            WHERE p.is_published = 1 AND p.category_id = ?
            ORDER BY p.created_at DESC 
            LIMIT ?, ?”;
    $stmt = $conn->prepare($sql);
    $stmt->bind_param(‘iii’, $categoryId, $offset, $postsPerPage);
    $stmt->execute();
    return $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
}
// ... 计算分页参数，调用 getPostsByCategory ...

$pageTitle = $category[‘name’] . ‘ - 文章分类’;
require ‘includes/header.php’;
?>

<h2 class=“mb-4”>分类: <span class=“badge bg-secondary”><?php echo htmlspecialchars($category[‘name’]); ?></span></h2>
<!-- 文章列表和分页代码与首页类似，使用 $posts 变量 -->
...
<?php require ‘includes/footer.php’; ?>

项目测试与部署指南

本地测试：

确保所有文件（index.php, detail.php, category.php, includes/等）放在正确的目录下。
启动你的Web服务器（如Apache）和MySQL。
在浏览器中访问 http:// localhost/你的项目路径/，检查首页是否能正确显示文章列表。
点击文章标题，跳转到详情页，检查内容是否完整。
点击分类导航，测试分类页是否正常筛选文章。
测试分页功能，点击页码或“上一页/下一页”。

线上部署（预览）：本章主要完成前端界面，完整的部署将在第5章讲解。但你可以将代码上传到支持PHP的虚拟主机，初步感受线上效果。

项目扩展和优化建议

侧边栏：在 includes/header.php 的 <main> 区域改为容器+行+列的Bootstrap网格布局，添加一个侧边栏（sidebar.php），用于显示热门文章、最新评论、分类云等。
文章标签：为文章增加标签功能，需要设计 tags 和 post_tags 关联表，并在详情页显示标签。
阅读量统计：在 posts 表中增加 view_count 字段，在 detail.php 中每次访问时更新。
更优雅的URL：将 detail.php?id=123 优化为 post/123.html 或 post/my-article-title（伪静态，第5章介绍）。

安全测试和漏洞修复环节

漏洞：未对输出进行转义，导致反射型XSS攻击

攻击场景：假设一篇恶意文章的标题被设置为 <script>alert(‘XSS攻击!’)</script>。
漏洞代码（修复前）：<h2><?php echo $post[‘title’]; ?></h2>
攻击测试：当其他用户浏览包含此恶意标题的文章列表时，脚本会被执行。
防护代码（修复后）：

    <!-- 使用 htmlspecialchars 函数对输出进行HTML实体编码 -->
    <h2><?php echo htmlspecialchars($post[‘title’], ENT_QUOTES, ‘UTF-8’); ?></h2>
    <p><?php echo nl2br(htmlspecialchars($post[‘content’])); ?></p>

**原理**：`htmlspecialchars()` 将 `<`, `>`, `”`, `’`, `&` 等特殊字符转换为HTML实体（如 `<` 变为 `&lt;`），使得浏览器将其解释为普通文本而非代码。

最佳实践

1. 行业标准和开发规范

分离关注点：尽可能将PHP业务逻辑（如数据库查询）与HTML表现层分离。即使是简单项目，也应将核心函数放在独立的 includes/functions.php 中。
使用模板包含：始终坚持使用 header.php 和 footer.php，这是迈向更高级模板引擎的第一步。
遵循PSR规范：虽然前端展示层不涉及复杂的类，但仍应保持代码整洁，如统一缩进（4空格）、使用有意义的变量名。

2. 常见错误和避坑指南

错误：未检查变量是否存在或为空：直接使用未定义的数组键（如 $_GET[‘id’]）会导致 Undefined index 警告。
正确做法：使用 isset() 或 empty() 进行判断。

    $id = isset($_GET[‘id’]) ? (int)$_GET[‘id’] : 0;

错误：在HTML中过度嵌套PHP逻辑：导致代码难以阅读和维护。
正确做法：将复杂的逻辑计算放在PHP代码块顶部，模板部分只负责简单的变量输出和循环。
错误：忽略字符编码：导致中文乱码。
正确做法：确保数据库、PHP文件、HTML <meta> 标签都使用统一的UTF-8编码。

3. 性能优化技巧

合理分页：避免一次性查询过多数据。LIMIT 是保护数据库和网络性能的关键。
为列表查询字段添加索引：在 posts 表的 created_at（排序）、category_id（筛选）等字段上添加索引，可以大幅提高查询速度。
减少数据库连接：确保 database.php 中的连接是单例或全局有效的，不要在每次页面请求中创建多个连接。

4. 安全性考虑和建议（必须包含的漏洞案例）

案例1：SQL注入（通过URL参数）

漏洞代码（动态拼接SQL）：

    // 绝对禁止的写法！
$id = $_GET[‘id’];
    $sql = “SELECT * FROM posts WHERE id = “ . $id; // 如果 $id 是 “1; DROP TABLE posts; --”
$result = $conn->query($sql);

防护方案：使用预处理语句（参数化查询）

    // 正确的写法（使用MySQLi预处理）
$id = (int)$_GET[‘id’]; // 先进行类型强制转换
$sql = “SELECT * FROM posts WHERE id = ?”; // 使用占位符 ?
    $stmt = $conn->prepare($sql);
    $stmt->bind_param(‘i’, $id); // ‘i‘ 表示绑定整数类型的参数
$stmt->execute();
    $result = $stmt->get_result();

**原理**：预处理语句将SQL代码与数据分开发送至数据库服务器，数据会被当作纯粹的参数处理，不会被解析为SQL指令的一部分，从根本上杜绝了注入。

案例2：存储型XSS（通过文章内容）

攻击场景：攻击者在发布文章时，在内容中插入恶意脚本 <script>stealCookie()</script>。
漏洞代码（未过滤的输入和输出）：

    // 发布文章时（第3章内容），未过滤直接存入数据库
$content = $_POST[‘content’]; // 恶意脚本在此
$sql = “INSERT INTO posts (content) VALUES (‘$content’)”;
    // 展示文章时（本章内容），未转义直接输出
echo $post[‘content’]; // 脚本在这里被执行！

防护方案：输入验证 + 输出转义

    // 1. 输入时进行验证和清理（发布环节）
// 可以使用 strip_tags() 移除所有HTML标签，但有时需要保留格式（如<p>）
// 更安全的方式是使用HTML净化器库（如HTMLPurifier），或只允许特定的安全标签。
// 对于简单的博客，可以在保存时做基本过滤：
$content = trim($_POST[‘content’]);
    // $content = strip_tags($content, ‘<p><a><br><strong><em><ul><li><ol>‘); // 示例：允许一些基本标签
// 2. 输出时进行转义（展示环节）— 这是最后且必需的防线
echo htmlspecialchars($post[‘content’], ENT_QUOTES, ‘UTF-8’);
    // 如果允许一些HTML标签，需使用更复杂的净化输出，或使用 nl2br(htmlspecialchars(...)) 仅保留换行。

案例3：CSRF跨站请求伪造（后台管理功能）

攻击场景：用户登录了博客后台且未退出。此时访问了一个恶意网站，该网站包含一个自动提交的表单，向你的博客后台发送“删除文章(id=1)”的请求。由于浏览器会自动携带用户的Cookie（登录会话），这个请求会被服务器认为是用户自己发出的，从而导致文章被删。
漏洞代码（无防护的删除操作）：

    <!-- 恶意网站上的代码 -->
    <form action=“http:// 你的博客/admin/delete_post.php” method=“POST”>
        <input type=“hidden” name=“post_id” value=“1”>
    </form>
    <script>document.forms[0].submit();</script>

防护方案：使用CSRF Token
1. 生成Token：在用户登录后或每次显示表单时，生成一个唯一的随机令牌，存入Session。

        // 在显示删除表单的页面
$_SESSION[‘csrf_token’] = bin2hex(random_bytes(32)); // 生成一个强随机令牌

2.  **嵌入Token**：将该令牌作为隐藏域放入表单。

        <form action=“delete_post.php” method=“POST”>
            <input type=“hidden” name=“post_id” value=“<?php echo $post[‘id’]; ?>“>
            <input type=“hidden” name=“csrf_token” value=“<?php echo $_SESSION[‘csrf_token’]; ?>“>
            <button type=“submit”>删除</button>
        </form>

3.  **验证Token**：在处理表单提交的脚本中，验证提交的Token是否与Session中的一致。

        // delete_post.php
        session_start();
        if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
            if (!isset($_POST[‘csrf_token’]) || $_POST[‘csrf_token’] !== $_SESSION[‘csrf_token’]) {
                die(‘CSRF令牌验证失败，操作无效。’);
            }
            // 令牌验证通过，执行删除操作...
            unset($_SESSION[‘csrf_token’]); // 使用一次后即销毁
}

练习题与挑战

基础练习题

题目：修复一个存在XSS漏洞的代码片段。给定代码 echo “<h1>” . $_GET[‘search_term’] . “的搜索结果</h1>”;，请写出修复后的安全代码。

难度：★☆☆☆☆
提示：使用 htmlspecialchars 函数对用户输入进行转义。
参考答案：

        $safeSearchTerm = htmlspecialchars($_GET[‘search_term’], ENT_QUOTES, ‘UTF-8’);
        echo “<h1>{$safeSearchTerm}的搜索结果</h1>”;

题目：编写一段PHP+HTML代码，循环输出一个数组 $fruits = [‘苹果‘， ‘香蕉’, ‘橙子’];，要求以无序列表 <ul> 的形式展示。

难度：★☆☆☆☆
提示：使用 foreach 循环和 echo。
参考答案：

        <ul>
        <?php foreach ($fruits as $fruit): ?>
            <li><?php echo htmlspecialchars($fruit); ?></li>
        <?php endforeach; ?>
        </ul>

进阶练习题

题目：假设你的文章详情页URL格式为 detail.php?id=文章ID。现在要求实现“上一篇”和“下一篇”的功能。请描述你的实现思路，并写出核心的SQL查询语句。

难度：★★☆☆☆
提示：查询比当前文章ID大/小且已发布的文章中，时间最接近的一篇。
参考答案思路：

        // 上一篇：SELECT * FROM posts WHERE id < ? AND is_published = 1 ORDER BY id DESC LIMIT 1
        // 下一篇：SELECT * FROM posts WHERE id > ? AND is_published = 1 ORDER BY id ASC LIMIT 1
        // 注意处理边界情况（没有上一篇或下一篇）。

题目：在分页导航中，如果总页数很多（例如100页），全部显示出来会非常冗长。请改进示例4中的分页代码，使其只显示当前页前后各2页的页码，并用“…”表示省略。例如：当前在第8页，总页数20，应显示：1 … 6 7 [8] 9 10 … 20。

难度：★★★☆☆
提示：在 for 循环内部增加逻辑判断，决定是输出页码、输出省略号还是跳过。
解题提示：可以计算一个页码范围（$startPage = max(1, $currentPage - 2);， $endPage = min($totalPages, $currentPage + 2);），然后在循环中判断，如果页码在范围外且不是第一页或最后一页，则用省略号替代（注意省略号只应出现一次）。

综合挑战题

题目：创建一个简单的“文章归档”页面 archive.php。该页面以年份和月份为单位，分组展示所有已发布的文章。例如：

    ## 2023年
### 12月
- 文章A
    - 文章B
    ### 08月
- 文章C
    ## 2022年
...

请设计数据库查询语句和前端展示代码。

难度：★★★★☆
提示：使用SQL的 YEAR(created_at) 和 MONTH(created_at) 函数来分组。PHP端需要使用嵌套数组或循环来组织数据。查询语句可参考：SELECT id, title, YEAR(created_at) as year, MONTH(created_at) as month FROM posts WHERE is_published=1 ORDER BY created_at DESC。
扩展：将月份的数字转换为中文（如“12月”）。

章节总结

通过本章的学习和实践，你已经成功地为你博客系统的“心脏”——后台管理功能，打造了一个美观且实用的“面孔”和“躯干”。让我们回顾一下核心收获：

重点知识回顾：

动态内容生成：掌握了在HTML中嵌入PHP代码，通过循环、条件判断将数据库中的数据动态渲染成网页内容。
数据驱动页面：学会了通过 $_GET 获取URL参数，并据此查询和显示特定的内容（如单篇文章、特定分类文章）。
分页技术：理解了分页对于用户体验和性能的重要性，并实现了基础的分页逻辑与导航。
代码组织：通过使用 include 和 require 包含公共模板文件（header.php, footer.php），大幅提升了代码的复用性和可维护性。
前端美化：实践了使用Bootstrap前端框架，快速构建出专业、响应式的博客界面。

技能掌握要求：
能够独立编写一个从数据库读取数据并动态展示的列表页和详情页。
能够实现带分页功能的文章列表。
能够使用Bootstrap等工具对页面进行基础的美化与布局。
至关重要的是：深刻理解输出转义（防御XSS）和输入验证的重要性，并在代码中付诸实践。
进一步学习建议：
深入前端：如果你想让博客界面更加独特和精美，可以进一步学习CSS3动画、JavaScript（特别是ES6+）以及现代前端框架（如Vue.js或React）的基础知识，它们可以让你创建更交互式的用户体验。
探索模板引擎：当项目变得复杂时，原生PHP混编会变得难以管理。可以了解如Smarty、Blade（Laravel框架自带）或Twig等模板引擎，它们能更清晰地将逻辑与视图分离。
准备上线：你已经拥有了一个功能相对完整的本地博客。下一章，我们将为它添加最后的关键功能（评论、搜索），并进行安全加固和性能优化，最终将它部署到互联网上，让你的作品被更多人看到！
你已经完成了从数据库设计到后台逻辑，再到前端展示的全栈开发闭环。坚持住，胜利在望！