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 // 返回更新后的点赞数
                });
              }
            );
          }
        );
      }
    }
  );
});
相关推荐
博客zhu虎康9 分钟前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海22 分钟前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
哈喽姥爷34 分钟前
Spring Boot---自动配置原理和自定义Starter
java·spring boot·后端·自定义starter·自动配置原理
王源骏1 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码1 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby1 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹1 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel2 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh2 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js