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'
        });
      }
      // 更新帖子评论数加1
      connection.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.验证结果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/438484.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CVPR 2022 Oral | Bailando: 基于编舞记忆和Actor-Critic GPT的3D舞蹈生成

目录 测试结果: 02 提出的方法 测试结果: 预测有3个步骤,速度比较慢 02 提出的方法 1. 针对舞蹈序列的VQ-VAE和编舞记忆 与之前的方法不同,我们不学习从音频特征到 3D 关键点序列的连续域的直接映射。相反,我们先让…

Springboot 的几种配置文件形式

方式一:多个yml文件 步骤1:创建多个配置文件 application.yml #主配置文件 application-dev.yml #开发环境的配置 application-prod.yml #生产环境的配置 application-test.yml #测试环境的配置步骤2:applicaiton.yml中指定配置 在a…

算法Day05_707.设计链表

推荐阅读 算法day01_ 27. 移除元素、977.有序数组的平方 算法day02_209.长度最小的子数组 算法day03_ 59.螺旋矩阵II 算法Day04_203.移除链表元素 目录 推荐阅读707.设计链表题目思路解法单链表解法双链表解法 707.设计链表 题目 你可以选择使用单链表或者双链表,设…

桶装水系统订水送水软件有哪些实用功能?

桶装水配送系统送水订水小程序预约水票开发定制桶装水管理软件特色; 1、订水软件界面简洁明了,操作简单易上手 2、桶装水管理软件正式版软件的功能全面,涉及到了桶装水后台管理的全部流程 3、财务报表可以自动计算出桶装水销售的详细数据 4、仓库管理、仓…

Android14音频进阶:AudioTrack与AudioFlinger创建数据通道(五十八)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只…

代码训练LeetCode(3)移除元素

代码训练(3)LeetCode之移除元素 Author: Once Day Date: 2024年3月6日 漫漫长路,才刚刚开始… 全系列文章可参考专栏: 十年代码训练_Once-Day的博客-CSDN博客 参考文章: 27. 移除元素 - 力扣(LeetCode)力扣 (LeetCode) 全球极客挚爱的技…

Ubuntu 22.04桥接wifi上网,设置静态IP

记录一下整个过程 打开虚拟网络编辑器,配置桥接模式到主机无线网卡,如图 配置虚拟机网络适配器,设置为桥接模式,勾选“复制” 打开虚拟机,打开终端 cd /etc/netplan目录下有 .yaml 配置文件,用vim编辑器打…

《MySQL实战45讲》课程大纲

1MySQL实战45讲-01基础架构:一条SQL查询语句是如何执行的?2MySQL实战45讲-02日志系统:一条SQL更新语句是如何执行的?3MySQL实战45讲-03事务隔离:为什么你改了我还看不见?4MySQL实战45讲-04深入浅出索引&…

基于云效构建部署Springboot项目到ACK

介绍 为了提高项目迭代的速度加速交付产品给客户,我们通常会选择CICD工具来减少人力投入产生的成本,开源的工具比如有成熟的Jenkins,但是本文讲的是阿里云提高的解决方案云效平台,通过配置流水线的形式实现项目的快速部署到服务器…

React-Redux简单使用

1.配置环境 1.1开启项目 npx create-react-app react-redux-pro 1.2安装配套工具 说明:安装Redux Toolkit和react-redux。Redux Toolkit(RTK)~官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式;react-redux-用来…

Spring Boot 多环境配置

Spring Boot 多环境配置 在现代的软件开发中,通常需要将应用程序部署到不同的环境中,如开发环境、生产环境和测试环境等。每个环境可能需要不同的配置参数,例如数据库连接信息、日志级别等。在 Spring Boot 中,我们可以通过简单的…

Ubuntu安装conda以后,给jupyter安装C++内核

前言 大家都知道,jupyter notebook 可以支持python环境,可以在不断点调试的情况下,打印出当前结果,如果代码错了也不影响前面的内容。于是我就想有没有C环境的,结果还真有。 参考文章: 【分享】Ubuntu安装…

如何排查合并问题——《OceanBase诊断系列》之七

1. 前言 OceanBase数据库的存储引擎以 LSM-Tree 架构为基础,区分静态基线数据(存储在只读SSTable)和动态增量数据(存储在可读写MemTable)。其中 SSTable 是只读的,一旦生成就不再被修改,存储于…

怎么给3d模型贴图?---模大狮模型网

在3D建模软件中给模型贴图是一种常见的操作,可以让模型外表更加生动和具有视觉效果。 给3D模型贴图: 准备贴图:首先需要准备好你要用来贴图的纹理图片,确保图片符合模型的尺寸和比例。 导入贴图:在3D建模软件中打开模…

多模态入门

VIT处理图像 CNN VS Transformer 多模态BLIP模型 网络结构 视觉编码器: 就是 ViT 的架构。将输入图像分割成一个个的 Patch 并将它们编码为一系列 Image Embedding,并使用额外的 [CLS] token 来表示全局的图像特征。视觉编码器不采用之前的基于目标检测器的形式,因为 ViLT 和…

YOLOv9(2):YOLOv9网络结构

1. 前言 本文仅以官方提供的yolov9.yaml来进行简要讲解。 讲解之前,还是要做一些简单的铺垫。 Slice层不做任何的操作,纯粹是做一个占位层。这样一来,在parse_model时,ch[n]可表示第n层的输出通道。 Detect和DDetect主要区别还…

Media Encoder 2024:未来媒体编码的新纪元 mac/win版

随着科技的飞速发展,媒体内容已成为我们日常生活中不可或缺的一部分。为了满足用户对高质量视频内容不断增长的需求,Media Encoder 2024应运而生,它凭借卓越的技术和创新的特性,重塑了媒体编码的未来。 Media Encoder 2024软件获…

计算机的基础知识

计算机的特点及应用: 图灵说–计算就是基于规则的符号串变换从20世纪80年代开始,发达国家开始研制第五代计算机,研究的目标是能够打破以往计算机固有的体系结构,使计算机能够具有像人一样的思维、推理和判断能力,向智…

mysql的语法总结2

命令: mysql -u 用户名 -p mysql登录 命令:create database u1 创建数据库u1 查询数据库 使用数据库u1 创建表department 查询表department ALTER TABLE 表名 操作类型; 操作类型可以有以下的操作: 添加列&#x…

SpringMVC | SpringMVC的“入门“

目录: Spring MVC入门 :Spring MVC 概述第一个Spring MVC应用SpringMVC 的 “工作流程” Spring MVC入门 : 作者简介 :一只大皮卡丘,计算机专业学生,正在努力学习、努力敲代码中! 让我们一起继续努力学习! 该文章参考学习教材为&a…
最新文章