功能特点

  • 发表留言:用户可以输入昵称和留言内容并提交。
  • 显示留言:以倒序(最新的留言在最上面)的方式展示所有留言。
  • 删除留言:管理员可以通过点击删除按钮来移除指定的留言。
  • 简单防注入:对用户输入进行基本的过滤和转义,防止简单的 XSS 攻击。
  • 响应式设计:留言板界面在桌面和移动设备上都能良好显示。

第一步:准备数据库

你需要一个 MySQL 数据库,在数据库中执行以下 SQL 语句来创建一个用于存储留言的表 messages

网页留言板源码 php
(图片来源网络,侵删)
-- 创建一个名为 `mydb` 的数据库(如果还没有的话)
CREATE DATABASE IF NOT EXISTS mydb DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- 使用这个数据库
USE mydb;
-- 创建 `messages` 表
CREATE TABLE IF NOT EXISTS `messages` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nickname` varchar(50) NOT NULL,
  `content` text NOT NULL,
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='留言板数据表';

第二步:创建文件

将以下代码分别保存为三个文件,并将它们放在你 Web 服务器(如 Apache, Nginx)的同一个目录下(guestbook/)。

  1. config.php - 数据库配置文件
  2. index.php - 主页面,用于显示和发表留言
  3. delete.php - 处理删除留言的脚本

文件 1: config.php

这个文件包含了数据库的连接信息。请务必修改这里的用户名、密码和数据库名

<?php
// 数据库配置信息
define('DB_HOST', 'localhost');    // 数据库主机
define('DB_USER', 'root');         // 数据库用户名
define('DB_PASS', 'your_password'); // 数据库密码
define('DB_NAME', 'mydb');         // 数据库名
// 创建数据库连接
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
// 设置字符集,防止中文乱码
$conn->set_charset("utf8mb4");
?>

文件 2: index.php

这是留言板的核心文件,集成了显示留言列表和发表留言的表单。

<?php
require_once 'config.php';
// 处理发表留言的逻辑
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit'])) {
    $nickname = trim($_POST['nickname']);
    $content = trim($_POST['content']);
    // 简单的验证
    if (!empty($nickname) && !empty($content)) {
        // 对用户输入进行转义,防止SQL注入
        $nickname_safe = $conn->real_escape_string($nickname);
        $content_safe = $conn->real_escape_string($content);
        // 插入数据库
        $sql = "INSERT INTO messages (nickname, content) VALUES ('$nickname_safe', '$content_safe')";
        if ($conn->query($sql) === TRUE) {
            // 插入成功,重定向到当前页面,防止刷新页面重复提交
            header("Location: index.php");
            exit();
        } else {
            echo "错误: " . $sql . "<br>" . $conn->error;
        }
    } else {
        $error_message = "昵称和留言内容不能为空!";
    }
}
// 获取所有留言,按时间倒序排列
$sql = "SELECT id, nickname, content, create_time FROM messages ORDER BY create_time DESC";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简易留言板</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            background: #fff;
            padding: 20px 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .message-form {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #ecf0f1;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* 确保padding不会影响宽度 */
        }
        .form-group textarea {
            height: 100px;
            resize: vertical;
        }
        .btn-submit {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn-submit:hover {
            background-color: #2980b9;
        }
        .message-list {
            list-style: none;
            padding: 0;
        }
        .message-item {
            background: #fff;
            border: 1px solid #e0e0e0;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            position: relative;
        }
        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .message-nickname {
            font-weight: bold;
            color: #2c3e50;
        }
        .message-time {
            font-size: 0.85em;
            color: #7f8c8d;
        }
        .message-content {
            color: #555;
            word-wrap: break-word;
        }
        .btn-delete {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.85em;
            transition: background-color 0.3s;
        }
        .btn-delete:hover {
            background-color: #c0392b;
        }
        .error-message {
            color: #e74c3c;
            background-color: #fadbd8;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
            border: 1px solid #e74c3c;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>简易留言板</h1>
    <!-- 发表留言的表单 -->
    <div class="message-form">
        <form action="index.php" method="POST">
            <div class="form-group">
                <label for="nickname">昵称:</label>
                <input type="text" id="nickname" name="nickname" required>
            </div>
            <div class="form-group">
                <label for="content">留言内容:</label>
                <textarea id="content" name="content" required></textarea>
            </div>
            <button type="submit" name="submit" class="btn-submit">发表留言</button>
        </form>
        <?php if (isset($error_message)): ?>
            <div class="error-message"><?php echo $error_message; ?></div>
        <?php endif; ?>
    </div>
    <!-- 留言列表 -->
    <h2>留言列表</h2>
    <ul class="message-list">
        <?php if ($result->num_rows > 0): ?>
            <?php while($row = $result->fetch_assoc()): ?>
                <li class="message-item">
                    <div class="message-header">
                        <span class="message-nickname"><?php echo htmlspecialchars($row["nickname"]); ?></span>
                        <span class="message-time"><?php echo date("Y-m-d H:i:s", strtotime($row["create_time"])); ?></span>
                    </div>
                    <div class="message-content"><?php echo nl2br(htmlspecialchars($row["content"])); ?></div>
                    <div style="text-align: right; margin-top: 10px;">
                        <a href="delete.php?id=<?php echo $row['id']; ?>" class="btn-delete" onclick="return confirm('确定要删除这条留言吗?');">删除</a>
                    </div>
                </li>
            <?php endwhile; ?>
        <?php else: ?>
            <li class="message-item">暂无留言,快来抢沙发吧!</li>
        <?php endif; ?>
    </ul>
</div>
</body>
</html>
<?php
$conn->close();
?>

文件 3: delete.php

这个文件负责处理删除请求,它接收一个留言的 ID,然后从数据库中删除对应的记录。

网页留言板源码 php
(图片来源网络,侵删)
<?php
// 1. 包含数据库配置
require_once 'config.php';
// 2. 检查是否通过GET方法传入了ID
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $id = (int)$_GET['id']; // 将ID转换为整数,防止SQL注入
    // 3. 准备SQL删除语句
    $sql = "DELETE FROM messages WHERE id = $id";
    // 4. 执行删除操作
    if ($conn->query($sql) === TRUE) {
        // 删除成功,重定向回留言板首页
        header("Location: index.php");
        exit();
    } else {
        echo "删除失败: " . $conn->error;
    }
} else {
    // 如果没有提供有效的ID,则重定向回首页
    header("Location: index.php");
    exit();
}
// 5. 关闭数据库连接
$conn->close();
?>

第三步:部署和运行

  1. 环境准备:确保你的电脑上安装了 PHP 和 MySQL 环境(XAMPP, WAMP, MAMP 或 Docker)。
  2. 放置文件:将 config.php, index.php, delete.php 这三个文件放到你的 Web 服务器根目录下的一个文件夹里(htdocs/guestbook/)。
  3. 配置数据库:打开 config.php 文件,修改 DB_USER, DB_PASS, DB_NAME 为你自己的数据库信息。
  4. 创建数据库表:登录到你的 MySQL 数据库管理工具(如 phpMyAdmin),执行第一步提供的 SQL 语句来创建 messages 表。
  5. 访问:在浏览器中访问 http://localhost/guestbook/index.php,你就可以看到留言板界面了。

如何改进和扩展?

这个留言板是一个很好的起点,你可以基于它进行很多扩展:

  • 用户登录系统:增加用户注册和登录功能,只有登录用户才能发表留言,并且只能删除自己的留言。
  • 分页功能:当留言很多时,使用 LIMITOFFSET 实现分页显示。
  • 富文本编辑器:集成如 TinyMCE 或 CKEditor 这样的富文本编辑器,让用户可以发表带格式的留言(加粗、图片等)。
  • 管理员后台:创建一个单独的管理员页面,管理员可以删除任何留言,并管理用户。
  • 防止垃圾信息:增加验证码(CAPTCHA)来防止机器人自动发布垃圾留言。
  • 回复功能:为每条留言增加回复功能,形成嵌套的评论结构。
  • AJAX 提交:使用 JavaScript 和 AJAX 来提交和显示新留言,无需刷新整个页面,提升用户体验。
网页留言板源码 php
(图片来源网络,侵删)