功能特点
- 发表留言:用户可以输入昵称和留言内容并提交。
- 显示留言:以倒序(最新的留言在最上面)的方式展示所有留言。
- 删除留言:管理员可以通过点击删除按钮来移除指定的留言。
- 简单防注入:对用户输入进行基本的过滤和转义,防止简单的 XSS 攻击。
- 响应式设计:留言板界面在桌面和移动设备上都能良好显示。
第一步:准备数据库
你需要一个 MySQL 数据库,在数据库中执行以下 SQL 语句来创建一个用于存储留言的表 messages。

(图片来源网络,侵删)
-- 创建一个名为 `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/)。
config.php- 数据库配置文件index.php- 主页面,用于显示和发表留言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
// 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();
?>
第三步:部署和运行
- 环境准备:确保你的电脑上安装了 PHP 和 MySQL 环境(XAMPP, WAMP, MAMP 或 Docker)。
- 放置文件:将
config.php,index.php,delete.php这三个文件放到你的 Web 服务器根目录下的一个文件夹里(htdocs/guestbook/)。 - 配置数据库:打开
config.php文件,修改DB_USER,DB_PASS,DB_NAME为你自己的数据库信息。 - 创建数据库表:登录到你的 MySQL 数据库管理工具(如 phpMyAdmin),执行第一步提供的 SQL 语句来创建
messages表。 - 访问:在浏览器中访问
http://localhost/guestbook/index.php,你就可以看到留言板界面了。
如何改进和扩展?
这个留言板是一个很好的起点,你可以基于它进行很多扩展:
- 用户登录系统:增加用户注册和登录功能,只有登录用户才能发表留言,并且只能删除自己的留言。
- 分页功能:当留言很多时,使用
LIMIT和OFFSET实现分页显示。 - 富文本编辑器:集成如 TinyMCE 或 CKEditor 这样的富文本编辑器,让用户可以发表带格式的留言(加粗、图片等)。
- 管理员后台:创建一个单独的管理员页面,管理员可以删除任何留言,并管理用户。
- 防止垃圾信息:增加验证码(CAPTCHA)来防止机器人自动发布垃圾留言。
- 回复功能:为每条留言增加回复功能,形成嵌套的评论结构。
- AJAX 提交:使用 JavaScript 和 AJAX 来提交和显示新留言,无需刷新整个页面,提升用户体验。

(图片来源网络,侵删)
