• 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,然后执行成功之后更新帖子按钮的颜色和点赞数

                
                  
                     {{ post.likes }}
                  
        // 处理用户点赞/取消点赞操作
        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;
              }
            },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    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 // 返回更新后的点赞数
                    });
                  }
                );
              }
            );
          }
        }
      );
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
  • 相关阅读:
    mybatis 07: sql标签中 "#{}" 和 "${}" 的作用和比较
    js 深度学习(七)
    【C语言】操作符详解(1)
    计算机毕业设计ssm+vue基本微信小程序的校园生活助手系统
    35岁互联网人只会被清退,是我听过最大的谎言
    uml用例图及其关系、类图及其关系、状态图、活动图、构件图与设计模式
    vue2使用百度地图标记点弹出框添加背景图并且根据数据动态切换
    Spring Boot 整合MinIo文件服务
    Stm32_标准库_12_串口_发送数据
    MySQL:函数盘点
  • 原文地址:https://blog.csdn.net/weixin_52003205/article/details/136400055