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

@TOC


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

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

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


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 数据改变时的时间

帖子点赞表 postLike

字段名称 类型(长度) 允许空 主键 外键 自增 唯一 说明
id int 帖子点赞id
postId int 帖子id
userId int 用户id
creatTime timestamp 创建时间
updateTime timestamp 数据改变时的时间

1.2总体思路

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

2.点赞前端

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

ini 复制代码
            <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的数据,更新帖子表的点赞数减一并且返回点赞数 点赞操作:增加一条帖子点赞表的数据,更新帖子表的点赞数加一并且返回点赞数(这样子前端就不用再去重新查询一遍帖子列表来获取数据了)

javascript 复制代码
// 点赞/取消点赞接口
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 // 返回更新后的点赞数
                });
              }
            );
          }
        );
      }
    }
  );
});
相关推荐
小白学习日记34 分钟前
【复习】HTML常用标签<table>
前端·html
丁总学Java1 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
姜学迁1 小时前
Rust-枚举
开发语言·后端·rust
yanlele1 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
爱学习的小健1 小时前
MQTT--Java整合EMQX
后端
懒羊羊大王呀1 小时前
CSS——属性值计算
前端·css
北极小狐2 小时前
Java vs JavaScript:类型系统的艺术 - 从 Object 到 any,从静态到动态
后端
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
用户3157476081352 小时前
前端之路-了解原型和原型链
前端
永远不打烊2 小时前
librtmp 原生API做直播推流
前端