今天给大家带来的教程是使用PHP和Bootstrap构建响应式布局，搭建一个简单的留言系统。
这个留言系统是早期博客给我的灵感，所以对于这个系统来说，并没有什么创新，但是对于新手小白来说可以借鉴一二。
网页示例上面这个网站是发布资源的一个网站，为了让人不登录就能发布留言，我首先设置了只带有昵称(nickname)、邮箱(email)、留言内容（message）的数据库：
代码语言：sql复制CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
nickname VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);从上面不难看出，我也在留言数据上加了一个发布时间，这样方便排序和整理。
留言列表我们要获取数据的话，可以创建一个config.php文件用于保存数据库信息，具体操作可以看我之前的文章。然后后端调用这个config.php文件，如下：
代码语言：php复制<?php
// 引入数据库配置文件
include 'config.php';
// 检查是否是 POST 请求
if ($_SERVER["REQUEST_METHOD"] == "POST" && empty($_SESSION['form_submitted'])) {
// 接收表单数据
$nickname = $conn->real_escape_string($_POST['nickname']);
$email = $conn->real_escape_string($_POST['email']);
$message = $conn->real_escape_string($_POST['message']);
// 验证邮箱
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo '<script>showError("email", "无效的邮箱地址！");</script>';
exit;
}
// 检查昵称是否为空
if (empty($_POST['nickname'])) {
echo '<script>showError("nickname", "昵称不能为空！");</script>';
exit;
}
// 检查邮箱是否为空
if (empty($_POST['email'])) {
echo '<script>showError("email", "邮箱不能为空！");</script>';
exit;
}
// 检查留言是否为空
if (empty($_POST['message'])) {
echo '<script>showError("message", "留言内容不能为空！");</script>';
exit;
}
// 准备 SQL 语句并绑定参数
$sql = "INSERT INTO messages (nickname, email, message) VALUES (?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $nickname, $email, $message);
// 执行 SQL 语句
if ($stmt->execute()) {
echo '<script>showSuccess("留言成功！");</script>';
} else {
echo '<script>showError("server", "留言失败：" . ' . json_encode($conn->error) . ');</script>';
}
$stmt->close();
}
// 获取留言总数
$total_sql = "SELECT COUNT(*) AS total FROM messages";
$total_result = $conn->query($total_sql);
$total_row = $total_result->fetch_assoc();
$total_messages = $total_row['total'];
// 获取留言列表
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$limit = 5; // 每页显示10条留言
$start = ($page - 1) * $limit;
$sql = "SELECT id, nickname, email, message, created_at FROM messages ORDER BY id DESC LIMIT $start, $limit";
$result = $conn->query($sql);
?>在这里我对留言为空的状态，都做了相应的提示，其实这里直接也可以在input组件上设置“required”属性就行了，我只是习惯这样去写。
然后为了跟主站保持统一，也是使用的bootstrap来布局。
代码语言：php复制<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<h4 class="m-0 text-center p-2"><i class="bi bi-chat-dots"></i> 留言板</h4><hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<div class="row mb-3">
<div class="col-md-6">
<label for="nickname" class="form-label">昵称</label>
<input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入您的昵称" required>
<div class="invalid-feedback"></div>
</div>
<div class="col-md-6">
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" name="email" placeholder="example@example.com" required>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="mb-2">
<label for="message" class="form-label">留言内容</label>
<textarea class="form-control" id="message" name="message" rows="3" placeholder="有什么想法或者求资源可以在这里告诉我" required></textarea>
<div class="invalid-feedback"></div>
</div>
<button type="submit" class="btn btn-primary mb-2 w-100">提交</button>
<div id="successMessage" class="alert alert-success d-none"></div>
</form>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">输入提示</div>
<div class="card-body">
<p class="card-text">这里可以免登录提交信息并查看留言列表！</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h4 class="m-0 text-center p-2 mt-2"><i class="bi bi-chat-square-dots"></i> 留言列表（<?php echo htmlspecialchars($total_messages); ?>）</h4><hr>
<div class="list-group">
<?php while ($row = $result->fetch_assoc()): ?>
<a href="#" class="list-group-item list-group-item-action">
<h5 class="mb-1">@<?php echo htmlspecialchars($row['nickname']); ?></h5>
<p class="mb-1"><?php echo nl2br(htmlspecialchars($row['message'])); ?></p>
<?php if (isset($_SESSION['username']) && $_SESSION['groupid'] <= 2) { ?>
<small class="text-muted"><?php echo htmlspecialchars($row['email']); ?></small>
<?php } ?>
<small class="text-muted float-end"><?php echo htmlspecialchars($row['created_at']); ?></small>
</a>
<?php endwhile; ?>
</div>
</div>这里我设计了一个小技巧，只有管理员才能查看到留言人的邮箱。这里的登录是检测是否登录主站，大家用来测试的时候就不用加条件了。
代码语言：php复制<?php if (isset($_SESSION['username']) && $_SESSION['groupid'] <= 2) { ?>
<small class="text-muted"><?php echo htmlspecialchars($row['email']); ?></small>
<?php } ?>显示效果如下：
登录网站会显示留言人邮箱需要知道的是，留言多了之后，页面就会显得很长很杂，一般都是设置分页，保证页面整洁有规划。
代码语言：php复制<!-- 分页导航 -->
<nav>
<ul class="pagination justify-content-center mt-2">
<?php
$sql = "SELECT COUNT(*) as count FROM messages";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$total_pages = ceil($row['count'] / $limit);
// 计算上一页和下一页的链接
$prev_page = $page - 1;
$next_page = $page 1;
// 生成上一页链接
if ($prev_page > 0) {
echo "<li class='page-item'><a class='page-link' href='?page=$prev_page'>上一页</a></li>";
} else {
echo "<li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-disabled='true'>上一页</a></li>";
}
// 生成页码链接
for ($i = 1; $i <= $total_pages; $i ) {
$class = $i == $page ? "active" : "";
echo "<li class='page-item $class'><a class='page-link' href='?page=$i'>$i</a></li>";
}
// 生成下一页链接
if ($next_page <= $total_pages) {
echo "<li class='page-item'><a class='page-link' href='?page=$next_page'>下一页</a></li>";
} else {
echo "<li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-disabled='true'>下一页</a></li>";
}
?>
</ul>
</nav>效果如下：
留言列表的分页系统其实这个小界面都是比较简单的，主要是看人前期怎么去设计，需要考虑人性化、合理化、个性化。
