PHP留言板项目之五 —— 5.留言列表
PHP留言板项目之五 —— 5.留言列表
list.php，代码如下所示：
<?php
// 包含数据库连接文件（确保conn.php返回有效的$conn连接对象）
require('./db.php');
// 初始化数据数组
$data = array();
// 执行SQL查询（添加连接对象和错误处理）
$sql = "SELECT * FROM guestbook";
$rs = mysqli_query($conn, $sql); // 添加$conn连接对象
// 检查查询是否成功
if (!$rs) {
die("查询失败: " . mysqli_error($conn)); // 输出错误信息并终止
}
// 循环获取数据
while($row = mysqli_fetch_assoc($rs)){
// 对输出内容进行HTML转义（防止XSS）
$escaped_row = array_map('htmlspecialchars', $row);
$data[] = $escaped_row;
}
// 释放结果集
mysqli_free_result($rs);
// 关闭数据库连接（根据实际需求决定是否保留）
// mysqli_close($conn);
// 安全输出数据（仅用于调试，生产环境应使用模板引擎）
/*
echo "<pre>";
print_r($data);
echo "</pre>";
*/
// 包含HTML模板（确保list.html路径正确）
require('./list.html');
?>留言列表list.html，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言列表</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/bootstrap.bundle.min.js"></script>
</head>
<body>
<a href="add.php" class="btn btn-primary">添加</a>
<br>
<h1>留言列表</h1>
<!-- table>tr*3>td*7 -->
<table class="table table-hover">
<tr>
<td>编号</td>
<td>昵称</td>
<td>留言标题</td>
<td>留言内容</td>
<td>添加时间</td>
<td>
</td>
<td>
</td>
</tr>
<tbody id="myList">
<?php foreach($data as $v) {?>
<tr >
<td><?php echo $v['id'];?></td>
<td><?php echo $v['nickname'];?></td>
<td><?php echo $v['txtTitle'];?></td>
<td><?php echo $v['txtContent'];?></td>
<td><?php echo $v['addtime'];?></td>
<td><a href="del.php?id=<?php echo $v['id'];?>" class="btn btn-danger" onclick="deleteRow()">删除</a></td>
<td><a href="edit.php?id=<?php echo $v['id'];?>" class="btn btn-primary">编辑</a></td>
</tr>
<?php }?>
</tbody>
</table>
</body>
</html>
<script>
function deleteRow(){
const index = 1; // 索引从0开始，所以第二行是索引1
const list = document.getElementById('myList');
const rows = list.getElementsByTagName('tr');
if (rows.length > index) {
const confirmDelete = confirm('确定要删除这一行吗？');
if (confirmDelete) {
list.removeChild(rows[index]);
}
} else {
alert('没有那么多行可以删除！');
}
}
</script>预览：
