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.验证结果

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode连接远程服务器步骤

在插件商店安装Remote - SSH插件2. 之后左侧插件下方会出现如下按钮: 3. 点进去点击设置,然后点击弹出来的第一个config文件进行配置 4.按照如下信息填写并保存,刷新ssh列表即可

【蓝桥杯】路径之谜(DFS)

一.题目描述 小明冒充 X 星球的骑士,进入了一个奇怪的城堡。 城堡里边什么都没有,只有方形石头铺成的地面。 假设城堡地面是 nn 个方格。如下图所示。 按习俗,骑士要从西北角走到东南角。可以横向或纵向移动,但不能斜着走&#x…

ARM地址映射表

硬件控制原理 只有Load/start指令可以读写硬件控制器量的寄存器,从而操作硬件地址划分图如下(其中IO(SFR)用来操控硬件的):注意:对于一个32位的处理器,里面的所有寄存器都是32位地址,所以范围位2的32次方,…

Numpy 数组转换为 Pandas DataFrame

参考:Convert Numpy Array to Pandas DataFrame Numpy 介绍 Numpy是Python中一个非常强大的科学计算库,它提供了许多高效的数组操作方法。Pandas是另一个重要的数据处理库,它基于Numpy,并提供了更高级别的数据分析和处理工具。在…

让娃学习效率更高的“可视化”时间管理器

如果要问,老母亲在娃开学后,蕞着急孩子哪一种坏习惯,那时间管理肯定榜上有名! 做作业的时候,才写了5分钟,已经没有耐心了,东摸摸西看看,一会说肚子疼想上厕所,一会又拿出…

2023年06月CCF-GESP编程能力等级认证Scratch图形化编程三级真题解析

本文收录于专栏《Scratch等级认证CCF-GESP真题解析》,专栏总目录・点这里 一、单选题(共15题,共30分) 第1题 高级语言编写的程序需要经过以下( )操作,可以生成在计算机上运行的可执行代码。 A:编辑 B:保存 C:调试 D:编译 答案:D 第2题 小球角色,执行以下程序…

牛客每日一题之 前缀和

目录 题目介绍: 算法原理: 前缀和: 代码实现: 题目介绍: 题目链接:【模板】前缀和_牛客题霸_牛客网 算法原理: 先讲讲暴力解法每次求出数组下标r之前元素的和,再减去数组下标l-…

C#开源且免费的Windows桌面快速预览神器 - QuickLook

前言 今天给大家推荐一款由C#开源且免费的Windows桌面快速预览神器:QuickLook。 工具介绍 QuickLook是一款在Windows操作系统上的实用工具,它提供了一种快速预览文件内容的方式。通过使用QuickLook,用户可以在不打开文件的情况下&#xff…

浅谈社会工程学攻击

一、前言 1.1 社会工程学起源 社会工程学是黑客米特尼克在《欺骗的艺术》中所提出,其初始目的是让全球的网民们能够懂得网络安全,提高警惕,防止没必要的个人损失。但在我国黑客集体中还在不断使用其手段欺骗无知网民制造违法行为,…

RUST 每日一省:发布到crates.io

github是开源代码分享的地方,rust的开源项目除了github,我们还可以将其发布到 crates.io 上,然后其它用户就可以使用cargo进行安装使用了。其实步骤很简单,只有三条命令了,我们一次来看一下。 1、cargo package 首先&a…

计讯物联环保数采仪TS910全力打造绿色宜居生态环境

植树造林自古以来就有调节气候、涵养水源、减轻大气污染的益处。如今,随着科技的迅速发展,我们除了能够以植树造林来改善生活环境,保持生态系统,还能通过物联网、大数据、云计算、边缘计算、人工智能等新一代信息技术集成应用于监…

最小生成树的扩展应用

1146. 新的开始 - AcWing题库 //建立一个虚拟远点 import java.util.*;public class Main{static int N 310;static int[][] w new int[N][N];static int[] dist new int[N];static boolean[] st new boolean[N];static int n, res;public static int prim(){Arrays.fill…