uniapp+node.js前后端做帖子模块:帖子的点赞/取消点赞(社区管理平台的小程序)


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

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

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


0前提

温馨提示:我做的思路可能是复杂化了或者说代码写的不规范,如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码,我的后端是写的很简单的没有什么路由分发是直接写的,你可以自由优化
小程序的其他部分你可以看看我往期的文章

1.一些准备

1.1表

帖子表 post

字段名称类型(长度)允许空主键外键自增唯一说明
idint帖子id
titlevarchar(20)标题
contentvarchar(20)内容
imagesvarchar(200)详情表
classificationvarchar(20)帖子分类
likesint点赞数
commentsint评论数
sharesint分享数
userIdint用户id
communityIdint小区id
creatTimetimestamp创建时间
updateTimetimestamp数据改变时的时间

帖子点赞表 postLike

字段名称类型(长度)允许空主键外键自增唯一说明
idint帖子点赞id
postIdint帖子id
userIdint用户id
creatTimetimestamp创建时间
updateTimetimestamp数据改变时的时间

1.2总体思路

当用户点击帖子上的点赞按钮之后,调用点赞/取消点赞的方法,向后端传入用户id和帖子id,在后端进行判断是点赞还是取消点赞执行不同的操作,执行成功之后更新帖子按钮的颜色和点赞数

2.点赞前端

当用户想要进行点赞操作时还需要去阻拦一下用户,查看一下用户有没有登陆,如果登录之后才可以进入到这个发帖页(我这里是没有写的是直接默认根据用户登陆了,写的话思路就是查询本地存储是否有token和用户信息)。当用户进行点赞操作之后,向后端传入这个用户的id和被点赞/取消点赞的帖子id,然后执行成功之后更新帖子按钮的颜色和点赞数

            <view class="icons">
              <view>
                <uni-icons :type="post.isLiked ? 'hand-up-filled' : 'hand-up'" @click="handleLike(post)"></uni-icons> {{ post.likes }}
              </view>
    // 处理用户点赞/取消点赞操作
    async handleLike(post) {
          const userId = this.$store.state.user.id;
          const res = await this.$myRequest({
            method: 'post',
            url: '/like',
            data: {
              postId: post.id,
              userId: userId
            }
          });
          if (res.data.error) {
            uni.showToast({
              title: '点赞失败',
              icon: 'none'
            });
          } else {
            post.isLiked = !post.isLiked;
            post.likes = res.data.likesCount;
          }
        },

3.后端

后端:当接受到前端传来的信息之后到数据库里面去新增这一条帖子信息,这里也是需要验证用户信息的就是验证前端传来的token解析之后是否和传来的用户id是一致的(不过我没加😊,这个验证可以自己搞搞加
当接受到前端传来的信息时去查看一下这个帖子是否被当前用户点赞,如果被当前用户点赞过则执行的是取消点赞的操作,如果用户没有被用户点赞过则执行的是点赞操作
取消点赞:删除帖子点赞表中对应帖子id和用户id的数据,更新帖子表的点赞数减一并且返回点赞数
点赞操作:增加一条帖子点赞表的数据,更新帖子表的点赞数加一并且返回点赞数(这样子前端就不用再去重新查询一遍帖子列表来获取数据了)

// 点赞/取消点赞接口
app.post('/like', (req, res) => {
  const postId = req.body.postId;
  const userId = req.body.userId;
  connection.query(
    'SELECT COUNT(*) as likesCount FROM postLike WHERE postId = ? AND userId = ?',
    [postId, userId],
    (error, results) => {
      if (error) {
        return res.status(500).json({
          error: 'false'
        });
      }
      if (results[0].likesCount > 0) {
        connection.query( // 用户已经点赞,取消点赞
          'DELETE FROM postLike WHERE postId = ? AND userId = ?',
          [postId, userId],
          (deleteError) => {
            if (deleteError) {
              console.error(deleteError);
              return res.status(500).json({
                error: 'false'
              });
            }
            connection.query( // 更新帖子表点赞数减1
              'UPDATE post SET likes = likes - 1 WHERE id = ?',
              [postId],
              (updateError) => {
                if (updateError) {
                  console.error(updateError);
                  return res.status(500).json({
                    error: 'false'
                  });
                }
                res.json({
                  likesCount: results[0].likesCount - 1 // 返回更新后的点赞数
                });
              }
            );
          }
        );
      } else { // 用户未点赞,进行点赞
        connection.query(
          'INSERT INTO postLike (postId, userId) VALUES (?, ?)',
          [postId, userId],
          (insertError) => {
            if (insertError) {
              console.error(insertError);
              return res.status(500).json({
                error: 'false'
              });
            }
            // 更新帖子表点赞数加1
            connection.query(
              'UPDATE post SET likes = likes + 1 WHERE id = ?',
              [postId],
              (updateError) => {
                if (updateError) {
                  console.error(updateError);
                  return res.status(500).json({
                    error: 'false'
                  });
                }
                res.json({
                  likesCount: results[0].likesCount + 1 // 返回更新后的点赞数
                });
              }
            );
          }
        );
      }
    }
  );
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值