uniapp+node.js前后端做帖子模块:查看帖子(获取帖子详情以及对应的帖子评论列表)(社区管理平台的小程序)

目录


👍 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!


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);
        }
      );
    }
  );
});
相关推荐
2501_916008894 小时前
全面介绍Fiddler、Wireshark、HttpWatch、SmartSniff和firebug抓包工具功能与使用
android·ios·小程序·https·uni-app·iphone·webview
webYin4 小时前
解决 Uni-App 运行到微信小程序时 “Socket合法域名校验出错” 问题
微信小程序·小程序·uni-app
天下代码客13 小时前
使用electronc框架调用dll动态链接库流程和避坑
前端·javascript·vue.js·electron·node.js
weixin1997010801614 小时前
【性能提升300%】仿1688首页的Webpack优化全记录
前端·webpack·node.js
说私域15 小时前
日本零售精髓赋能下 链动2+1模式驱动新零售本质回归与发展格局研究
人工智能·小程序·数据挖掘·回归·流量运营·零售·私域运营
不倒翁玩偶16 小时前
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
前端·npm·node.js
奔跑的web.16 小时前
UniApp 路由导航守
前端·javascript·uni-app
特立独行的猫a16 小时前
主要跨端开发框架对比:Flutter、RN、KMP、Uniapp、Cordova,谁是未来主流?
flutter·uni-app·uniapp·rn·kmp·kuikly
一心赚狗粮的宇叔17 小时前
03.Node.js依赖包补充说明及React&Node.Js项目
前端·react.js·node.js
-嘟囔着拯救世界-18 小时前
【2026 最新版】OpenAI 祭出王炸 GPT-5.3-Codex!Win11 + VSCode 部署保姆级教程
vscode·gpt·chatgpt·node.js·node·codex·gpt5