当前位置: 首页 > news >正文

uniapp+node.js前后端做帖子模块:发布帖子评论(社区管理平台的小程序)

目录

  • 0前提
  • 1.一些准备
    • 1.1表
      • 帖子表 post
      • 帖子评论表 postComment
    • 1.2总体思路
  • 2.前端
  • 3.后端
  • 4.验证结果


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

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

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


0前提

温馨提示:我做的思路可能是复杂化了或者说代码写的不规范,如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码,我的后端是写的很简单的没有什么路由分发是直接写的,你可以自由优化,以及在需要验证用户是否登录和验证用户token是否正确的我没有进行验证,你们可以自行添加
小程序的其他部分你可以看看我往期的文章

1.一些准备

1.1表

帖子表 post

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

帖子评论表 postComment

字段名称类型(长度)允许空主键外键自增唯一说明
idint帖子评论id
contentvarchar(20)内容
imagesvarchar(200)详情表
postIdint帖子id
userIdint用户id
creatTimetimestamp创建时间
updateTimetimestamp数据改变时的时间

1.2总体思路

描述:当用户在帖子详情页时,该页面下方有一个帖子评论框以及发送按钮,当用户想要点赞时在输入框输入文字点击发送即可
实现:首先加一个绝对定位于页面底部的评论输入框和发送按钮,然后编写发送评论的方法,用户评论的时候需要验证用户是否登录,如果没有登录还需要让用户去登陆才能发布评论,后端接受到用户评论的信息之后保存到帖子评论表里面去,并且返回一个评论信息,前端接受返回的数据之后添加到现在的评论列表数组里面去(不采用发布评论之后就重新获取一次评论列表是因为感觉如果后期这个帖子评论数量很多的话,那重新获取一次帖子评论列表又太慢了,不如直接让后端返回回来数据添加到现有的评论列表里面去;当然这个是因为没有用滚动加载每一次获取数据时只获取部分的原因,如果你每次获取数据只获取部分数据好像也行)

2.前端

前端:页面加载时先获取url参数的帖子id和获取全局变量中的用户id后调用方法
获取用户当前输入框的信息以及用户id,将用户的评论信息传入到后端中

代码实现:

// 发布评论async publishComment() {const userId = this.$store.state.user.id;const res = await this.$myRequest({method: 'post',url: '/publishComment',data: {postId: this.post.id,userId: userId,content: this.newComment.content,}});if (res.data.error) {uni.showToast({title: '发布评论失败',icon: 'none'});} else {// 添加新评论到评论列表中const newComment = res.data.comment;this.post.commentList.unshift(newComment); // 添加到评论列表的开头// 更新帖子评论数this.post.comments++;// 清空输入框内容this.newComment.content = "";}},

3.后端

后端:当接受到前端传来的信息之后将评论信息保存对应的帖子评论表中,并且返回这次评论的信息(用户昵称,头像,评论时间,评论内容等)给前端添加到页面的评论列表里面(这里需要去验证一下用户是否是正确的token的,我没有验证你们可以加)
代码实现:

// 发布帖子评论接口
app.post('/publishComment', (req, res) => {const postId = req.body.postId;const userId = req.body.userId;const content = req.body.content;connection.query('INSERT INTO postComment (postId, userId, content) VALUES (?, ?, ?)',[postId, userId, content],(error) => {if (error) {console.error(error);return res.status(500).json({error: 'false'});}// 更新帖子评论数加1connection.query('UPDATE post SET comments = comments + 1 WHERE id = ?',[postId],(updateError) => {if (updateError) {console.error(updateError);return res.status(500).json({error: 'false'});}// 获取刚插入的评论的信息connection.query('SELECT pc.*, user.name AS nickname, user.avatar ' +'FROM postComment pc ' +'INNER JOIN user ON pc.userId = user.id ' +'WHERE pc.id = LAST_INSERT_ID()', // 获取刚插入的评论信息(selectError, selectResults) => {if (selectError) {console.error(selectError);return res.status(500).json({error: 'false'});}if (selectResults.length === 0) {return res.status(500).json({error: 'Comment not found'});}const newComment = selectResults[0];// 处理评论时间字段,将数据库中的时间格式转为前端显示的格式newComment.createTime = formatTime(newComment.createTime);// 返回成功信息和评论的信息res.json({success: 'true',comment: newComment});});});});
});

4.验证结果

当在底部发布评论时评论列表新增一条评论
在这里插入图片描述
在这里插入图片描述

相关文章:

  • 链表中的经典问题——反转链表
  • C#拾遗补漏之goto跳转语句
  • Centos安装mysql8
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • 部署LVS+Keepalived高可用群集(抢占模式,非抢占模式,延迟模式)
  • MySQL利用逻辑备份恢复误删的数据库
  • vue 总结
  • redis使用笔记
  • 【Linux】线程封装_互斥
  • 怎么看待Groq
  • Redis缓存三大问题-穿透、击穿、雪崩
  • html地铁跑酷
  • map和set(二)——AVL树的简单实现
  • SQL之常用字符串函数
  • php开发100问?
  • JavaScript 如何正确处理 Unicode 编码问题!
  • 30秒的PHP代码片段(1)数组 - Array
  • 4. 路由到控制器 - Laravel从零开始教程
  • Android 架构优化~MVP 架构改造
  • echarts花样作死的坑
  • ECS应用管理最佳实践
  • EventListener原理
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • JavaScript新鲜事·第5期
  • TCP拥塞控制
  • 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 基于遗传算法的优化问题求解
  • 简单数学运算程序(不定期更新)
  • 今年的LC3大会没了?
  • 微信小程序设置上一页数据
  • 【云吞铺子】性能抖动剖析(二)
  • 仓管云——企业云erp功能有哪些?
  • 移动端高清、多屏适配方案
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • #微信小程序:微信小程序常见的配置传值
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • (1)Nginx简介和安装教程
  • (笔试题)分解质因式
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (区间dp) (经典例题) 石子合并
  • (三十五)大数据实战——Superset可视化平台搭建
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • .mysql secret在哪_MYSQL基本操作(上)
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .NET Core 项目指定SDK版本
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • .NET值类型变量“活”在哪?
  • .project文件
  • @Autowired自动装配
  • @GlobalLock注解作用与原理解析