下面提供一个简单实现的代码:
首先,创建数据库表。在MySQL数据库中创建两张表,日记表和评论表。日记表包含标题、内容、日期、点赞数等字段,评论表包含评论者名字、评论时间、评论内容、点赞数等字段。每个表都需要一个主键。
创建表的SQL语句如下:
CREATE TABLE `diary` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) DEFAULT NULL,
`content` text,
`date` datetime DEFAULT NULL,
`likes` int(11) DEFAULT 0,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `comment` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`diary_id` int(11) NOT NULL,
`name` varchar(255) DEFAULT NULL,
`comment` text,
`date` datetime DEFAULT NULL,
`likes` int(11) DEFAULT 0,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
接下来,创建前端页面。使用Bootstrap框架创建一个表单,让用户能够输入日记内容,并允许他们添加评论和点赞。你可以为每条评论和点赞添加一个表格行:
<form method="post" action="add_diary.php">
<div class="form-group">
<label for="title">日记标题</label>
<input type="text" class="form-control" id="title" name="title" required>
</div>
<div class="form-group">
<label for="content">日记内容</label>
<textarea class="form-control" id="content" name="content" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">发布日记</button>
</form>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">评论者</th>
<th scope="col">评论时间</th>
<th scope="col">评论内容</th>
<th scope="col">点赞数</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($comments as $comment): ?>
<tr>
<th scope="row"><?php echo $comment['id']; ?></th>
<td><?php echo $comment['name']; ?></td>
<td><?php echo $comment['date']; ?></td>
<td><?php echo $comment['comment']; ?></td>
<td><?php echo $comment['likes']; ?></td>
<td>
<button type="button" class="btn btn-outline-success btn-sm">点赞</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
使用JavaScript,可以在点赞按钮按下时向服务器发送ajax请求以使得点赞数更改。
现在,创建PHP文件。当用户提交发布日记表单时,调用add_diary.php中的代码将新的日记添加到数据库中。评论也被添加到数据库中,每当用户单击点赞按钮时,ajax调用将使点赞数增加。
<?php
// 连接数据库
require_once 'db.php';
// 处理添加日记的请求
if (!empty($_POST['title']) && !empty($_POST['content'])) {
$title = $_POST['title'];
$content = $_POST['content'];
$date = date('Y-m-d H:i:s');
// 添加日记到diary表格中
$stmt = $db->prepare('INSERT INTO diary(title, content, date) VALUES (?, ?, ?)');
$stmt->bind_param('sss', $title, $content, $date);
$stmt->execute();
$stmt->close();
// 返回添加的日记的 ID
$diary_id = $db->insert_id;
// 重定向到新的日记页面
header("Location: diary.php?id=$diary_id");
exit();
}
// 显示所有日记和评论
$stmt = $db->prepare('SELECT * FROM comment ORDER BY id DESC');
$stmt->execute();
$comments = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();
$db->close();
// 增加评论点赞数
if (!empty($_POST['comment_id'])) {
$comment_id = (int)$_POST['comment_id'];
$stmt = $db->prepare('UPDATE comment SET likes = likes + 1 WHERE id = ?');
$stmt->bind_param('i', $comment_id);
$stmt->execute();
$stmt->close();
echo 'ok';
exit();
}
最后一步是创建一个后台管理页面,允许管理员查看和编辑日记和评论。为此,我们将需要新建一个文件admin.php,使用session来限制管理员访问。在管理页面中我们也使用Bootstrap框架和表格元素,和一个管理员账户可以修改信息。
<?php
// 连接数据库
require_once 'db.php';
// 检查管理员是否已经登陆
session_start();
if (empty($_SESSION['username'])) {
header('Location: login.php');
exit;
}
// 处理修改日记的请求
if (!empty($_POST['diary_id']) && !empty($_POST['title']) && !empty($_POST['content'])) {
$diary_id = (int)$_POST['diary_id'];
$title = $_POST['title'];
$content = $_POST['content'];
$stmt = $db->prepare('UPDATE diary SET title = ?, content = ? WHERE id = ?');
$stmt->bind_param('ssi', $title, $content, $diary_id);
$stmt->execute();
$stmt->close();
}
// 处理修改评论的请求
if (!empty($_POST['comment_id']) && !empty($_POST['comment'])) {
$comment_id = (int)$_POST['comment_id'];
$comment = $_POST['comment'];
$stmt = $db->prepare('UPDATE comment SET comment = ? WHERE id = ?');
$stmt->bind_param('si', $comment, $comment_id);
$stmt->execute();
$stmt->close();
}
// 获取所有日记和评论
$stmt = $db->prepare('SELECT * FROM diary ORDER BY id DESC');
$stmt->execute();
$diaries = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();
$stmt = $db->prepare('SELECT * FROM comment ORDER BY id DESC');
$stmt->execute();
$comments = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();
$db->close();
?>
<!DOCTYPE html>
<html>
<head>
<title>后台管理</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="mt-3">后台管理</h1>
<p>
<a href="logout.php" class="btn btn-danger float-right">退出</a>
</p>
<h2 class="mt-5">日记列表</h2>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">标题</th>
<th scope="col">内容</th>
<th scope="col">日期</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($diaries as $diary): ?>
<tr>
<th scope="row"><?php echo $diary['id']; ?></th>
<td><?php echo $diary['title']; ?></td>
<td><?php echo $diary['content']; ?></td>
<td><?php echo $diary['date']; ?></td>
<td><a href="edit_diary.php?id=<?php echo $diary['id']; ?>" class="btn btn-primary btn-sm">编辑</a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<h2 class="mt-5">评论列表</h2>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">日记ID</th>
<th scope="col">评论者</th>
<th scope="col">评论时间</th>
<th scope="col">评论内容</th>
<th scope="col">点赞数</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($comments as $comment): ?>
<tr>
<th scope="row"><?php echo $comment['id']; ?></th>
<td><?php echo $comment['diary_id']; ?></td>
<td><?php echo $comment['name']; ?></td>
<td><?php echo $comment['date']; ?></td>
<td>
<form method="post">
<input type="hidden" name="comment_id" value="<?php echo $comment['id']; ?>">
<textarea class="form-control" name="comment" rows="3"><?php echo $comment['comment']; ?></textarea>
<button type="submit" class="btn btn-primary btn-block mt-2">更新评论</button>
</form>
</td>
<td><?php echo $comment['likes']; ?></td>
<td>
<button type="button" class="btn btn-outline-success btn-sm" onclick="like(<?php echo $comment['id']; ?>)">点赞</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function like(comment_id) {
$.post('add_diary.php', {comment_id: comment_id}, function(data) {
if (data == 'ok') {
window.location.reload();
} else {
alert('操作失败,请稍后再试');
}
});
}
</script>
</body>
</html>
这就是一个简单实现的