今天给大家带来的教程是使用PHP和Bootstrap构建响应式布局，搭建一个简单的留言系统。
这个留言系统是早期博客给我的灵感，所以对于这个系统来说，并没有太多的创新，但是对于新手小白来说可以借鉴一二。
网页示例
上面这个网站是发布资源的一个网站，为了让人不登录就能发布留言，我首先设置了只带有昵称(nickname)、邮箱(email)、留言内容（message）的数据库。
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文件，如下：
// 引入数据库配置文件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来布局。
<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>留言列表（ echo htmlspecialchars($total_messages); ）</h4><hr><div class="list-group">while ($row = $result->fetch_assoc()):<a href="#" class="list-group-item list-group-item-action"><h5 class="mb-1">@ echo htmlspecialchars($row['nickname']); </h5><p class="mb-1"> echo nl2br(htmlspecialchars($row['message'])); </p>if (isset($_SESSION['username']) && $_SESSION['groupid'] <= 2) {<small class="text-muted"> echo htmlspecialchars($row['email']); </small>}<small class="text-muted float-end"> echo htmlspecialchars($row['created_at']); </small></a>endwhile;</div></div>
这里我设计了一个小技巧，只有管理员才能查看到留言人的邮箱。这里的登录是检测是否登录主站，大家用来测试的时候就不用加条件了。
if (isset($_SESSION['username']) && $_SESSION['groupid'] <= 2) {<small class="text-muted"> echo htmlspecialchars($row['email']); </small>}
显示效果如下：
登录网站会显示留言人邮箱
需要知道的是，留言多了之后，页面就会显得很长很杂，一般都是设置分页，保证页面整洁有规划。
<!-- 分页导航 --><nav><ul class="pagination justify-content-center mt-2">$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>
效果如下：
留言列表的分页系统
其实这个小界面都是比较简单的，主要是看人前期怎么去设计，需要考虑人性化、合理化、个性化。
整理不易，还望支持！
本帖首发于腾讯云开发者社区@小轻论坛
2024-09-05 04:36:57
注册小轻论坛账号
获取更多实用资源及技术
欢迎后台留言求助小轻论坛
欢迎体验小轻密语小程序
▼
●点击文字，了解更多●
「 关注这个号的你可以说是很优秀了 」
▼
