目录
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!
0前提
温馨提示:我做的思路可能是复杂化了或者说代码写的不规范,如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码,我的后端是写的很简单的没有什么路由分发是直接写的,你可以自由优化
小程序的其他部分你可以看看我往期的文章
1.一些准备
1.1表
帖子表 post
字段名称 | 类型(长度) | 允许空 | 主键 | 外键 | 自增 | 唯一 | 说明 |
---|---|---|---|---|---|---|---|
id | int | 否 | 是 | 否 | 是 | 是 | 帖子id |
title | varchar(20) | 否 | 否 | 否 | 否 | 否 | 标题 |
content | varchar(20) | 否 | 否 | 否 | 否 | 否 | 内容 |
images | varchar(200) | 否 | 否 | 否 | 否 | 否 | 详情表 |
classification | varchar(20) | 否 | 否 | 否 | 否 | 否 | 帖子分类 |
likes | int | 是 | 否 | 否 | 否 | 否 | 点赞数 |
comments | int | 是 | 否 | 否 | 否 | 否 | 评论数 |
shares | int | 是 | 否 | 否 | 否 | 否 | 分享数 |
userId | int | 否 | 否 | 是 | 否 | 否 | 用户id |
communityId | int | 否 | 否 | 是 | 否 | 否 | 小区id |
creatTime | timestamp | 否 | 否 | 是 | 否 | 否 | 创建时间 |
updateTime | timestamp | 否 | 否 | 是 | 否 | 否 | 数据改变时的时间 |
帖子评论表 postComment
字段名称 | 类型(长度) | 允许空 | 主键 | 外键 | 自增 | 唯一 | 说明 |
---|---|---|---|---|---|---|---|
id | int | 否 | 是 | 否 | 是 | 是 | 帖子评论id |
content | varchar(20) | 否 | 否 | 否 | 否 | 否 | 内容 |
images | varchar(200) | 是 | 否 | 否 | 否 | 否 | 详情表 |
postId | int | 否 | 否 | 是 | 否 | 否 | 帖子id |
userId | int | 否 | 否 | 是 | 否 | 否 | 用户id |
creatTime | timestamp | 否 | 否 | 是 | 否 | 否 | 创建时间 |
updateTime | timestamp | 否 | 否 | 是 | 否 | 否 | 数据改变时的时间 |
1.2总体思路
描述:当用户点击帖子之后进入帖子详情页面出现帖子的详情以及这个帖子下方出现对应的帖子评论列表
实现:首先要接受上一个页面传来的帖子id参数以及用到用户id(判断这个帖子被当前用户点赞了),用这2个数据发送给后端,后端根据接收到的参数去数据库表里拿数据返回回来
2.前端
前端:页面加载时先获取url参数的帖子id和获取全局变量中的用户id后调用方法
代码实现:
需要在页面的onload上增加
cpp
onLoad(option) {
const postId = option.id;// 从 URL 参数中获取 postId
const userId = this.$store.state.user.id; // 获取当前用户ID
this.getPostDetails(postId, userId);
},
加上一个查看帖子的方法
//获取帖子详情的信息
async getPostDetails(postId, userId) {
const res = await this.$myRequest({
method: 'get',
url: `/getPostDetails?postId=${postId}&userId=${userId}`
});
if (res.data) {
this.post = res.data;
}
},
3.后端
后端:当接受到前端传来的信息之后到数据库里查询帖子信息以及这个帖子对应的发帖者的头像和昵称,再查询完帖子详情之后去查询对应的帖子评论列表添加到帖子中然后返回信息
代码实现:
cpp
// 获取帖子详情
app.get('/getPostDetails', (req, res) => {
const postId = req.query.postId;
const userId = req.query.userId; // 当前用户ID,用于判断是否点赞
connection.query(
'SELECT post.*, user.name AS nickname, user.avatar,COUNT(pl.id) AS likesByCurrentUser ' +
'FROM post ' +
'INNER JOIN user ON post.userId = user.id ' +
'LEFT JOIN postLike pl ON post.id = pl.postId AND pl.userId = ? ' +
'WHERE post.id = ?',
[userId, postId],
(error, results) => {
if (error) {
console.error(error);
return res.status(500).json({
error: 'false'
});
}
if (results.length === 0) {
// 没有找到对应的帖子
return res.status(404).json({
error: 'Post not found'
});
}
const post = results[0];
// 处理帖子的图片字段,将逗号分割的字符串转为数组
post.images = post.images.split(',');
post.createTime = results.map(post => {
post.createTime = formatTime(post.createTime); // 使用新的格式化时间字段
return post;
});
// 获取帖子评论列表
connection.query(
'SELECT pc.*, user.name AS nickname, user.avatar ' +
'FROM postComment pc ' +
'INNER JOIN user ON pc.userId = user.id ' +
'WHERE pc.postId = ? ' +
'ORDER BY pc.createTime DESC',
[postId],
(commentError, commentResults) => {
if (commentError) {
console.error(commentError);
return res.status(500).json({
error: 'false'
});
}
// 将评论结果添加到帖子详情中
post.commentList = commentResults.map(comment => {
comment.createTime = formatTime(comment.createTime);// 使用新的格式化时间字段
return comment;
});
// 判断当前用户是否已经点赞了帖子
post.isLiked = post.likesByCurrentUser > 0;
// 返回帖子详情
return res.json(post);
}
);
}
);
});