uniapp+node.js前后端做帖子模块:查看帖子(获取帖子详情以及对应的帖子评论列表)(社区管理平台的小程序)

news/2024/7/27 11:30:16/文章来源:https://blog.csdn.net/weixin_52003205/article/details/136459904

目录

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


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

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

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


0前提

温馨提示:我做的思路可能是复杂化了或者说代码写的不规范,如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码,我的后端是写的很简单的没有什么路由分发是直接写的,你可以自由优化
小程序的其他部分你可以看看我往期的文章

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总体思路

描述:当用户点击帖子之后进入帖子详情页面出现帖子的详情以及这个帖子下方出现对应的帖子评论列表
实现:首先要接受上一个页面传来的帖子id参数以及用到用户id(判断这个帖子被当前用户点赞了),用这2个数据发送给后端,后端根据接收到的参数去数据库表里拿数据返回回来

2.前端

前端:页面加载时先获取url参数的帖子id和获取全局变量中的用户id后调用方法

代码实现:
需要在页面的onload上增加

  onLoad(option) {const postId = option.id;// 从 URL 参数中获取 postIdconst userId = this.$store.state.user.id; // 获取当前用户IDthis.getPostDetails(postId, userId);},

加上一个查看帖子的方法

//获取帖子详情的信息async getPostDetails(postId, userId) {const res = await this.$myRequest({method: 'get',url: `/getPostDetails?postId=${postId}&userId=${userId}`});if (res.data) {this.post = res.data;}},

3.后端

后端:当接受到前端传来的信息之后到数据库里查询帖子信息以及这个帖子对应的发帖者的头像和昵称,再查询完帖子详情之后去查询对应的帖子评论列表添加到帖子中然后返回信息
代码实现:

// 获取帖子详情
app.get('/getPostDetails', (req, res) => {const postId = req.query.postId;const userId = req.query.userId; // 当前用户ID,用于判断是否点赞connection.query('SELECT post.*, user.name AS nickname, user.avatar,COUNT(pl.id) AS likesByCurrentUser ' +'FROM post ' +'INNER JOIN user ON post.userId = user.id ' +'LEFT JOIN postLike pl ON post.id = pl.postId AND pl.userId = ? ' +'WHERE post.id = ?',[userId, postId],(error, results) => {if (error) {console.error(error);return res.status(500).json({error: 'false'});}if (results.length === 0) {// 没有找到对应的帖子return res.status(404).json({error: 'Post not found'});}const post = results[0];// 处理帖子的图片字段,将逗号分割的字符串转为数组post.images = post.images.split(',');post.createTime = results.map(post => {post.createTime = formatTime(post.createTime); // 使用新的格式化时间字段return post;});// 获取帖子评论列表connection.query('SELECT pc.*, user.name AS nickname, user.avatar ' +'FROM postComment pc ' +'INNER JOIN user ON pc.userId = user.id ' +'WHERE pc.postId = ? ' +'ORDER BY pc.createTime DESC',[postId],(commentError, commentResults) => {if (commentError) {console.error(commentError);return res.status(500).json({error: 'false'});}// 将评论结果添加到帖子详情中post.commentList = commentResults.map(comment => {comment.createTime = formatTime(comment.createTime);// 使用新的格式化时间字段return comment;});// 判断当前用户是否已经点赞了帖子post.isLiked = post.likesByCurrentUser > 0;// 返回帖子详情return res.json(post);});});
});

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

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

相关文章

初阶数据结构之---二叉树的顺序结构-堆

引言 今天要讲的堆,不是操作系统虚拟进程地址空间中(malloc,realloc等开空间的位置)的那个堆,而是数据结构中的堆,它们虽然名字相同,却是截然不同的两个概念。堆的底层其实是完全二叉树&#x…

Web核心

JavaWeb技术栈 B/S架构:Browser/Server , 浏览器/服务器 架构模式,其特点为,客户端只需要浏览器,应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器,获取Web资源,服务器把Web资源…

3.7号freeRtoS

1. 串口通信 配置串口为异步通信 设置波特率,数据位,校验位,停止位,数据的方向 同步通信 在同步通信中,数据的传输是在发送端和接收端之间通过一个共享的时钟信号进行同步的。这意味着发送端和接收端的时钟需要保持…

Postman(注册,使用,作用)【详解】

目录 一、Postman 1. Postman介绍 2. 安装Postman 3. 注册帐号再使用(可保存测试记录) 4. 创建workspace 5. 测试并保存测试记录 一、Postman postman工具可以发送不同方式的请求,浏览器只能发送get请求(所有用这个工具) 在前后端分离开发模式下,前端技术人员…

服务器配置禁止IP直接访问,只允许域名访问

联网信息系统需设置只允许通过域名访问,禁止使用IP地址直接访问,建议同时采用云防护技术隐藏系统真实IP地址且只允许云防护节点IP访问服务器,提升网络安全防护能力。 一、Nginx 修改配置文件nginx.conf,在server段里插入正则表达式…

某准网招聘接口逆向之WebPack扣取

​​​​​逆向网址 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20v 逆向链接 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vc2VhcmNoP3BhZ2VOdW09MSZxdWVyeT1weXRob24mdHlwZT01 逆向接口 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vYXBpX3RvL3NlYXJjaC9qb2IuanNvbg 逆向过程 请求方式:GET 参数构成…

qt 添加 Mingw 组件 qt没有被正确安装,请运行make install QT License check failed! Giving up…

已经安装了qt,想添加mingw组件,步骤 1、双击打开MaintenanceTool.exe, 2、 3、这里只有mingw7.3.0 64-bit的qt库,选上,并在下面的tools中选择对应版本的mingw编译器,以及CDB Debugger。对于其他版本的Mi…

【解决方案】ArcGIS Engine二次开发时,运行后出现“正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain...”

我们在做ArcGIS Engine二次开发时,特别是新手,安装好了开发环境,满怀信心的准备将按照教程搭建好的框架在Visual Studio中进行运行。点击运行后,却出现了“正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化…

【码银送书第十三期】《ChatGPT原理与架构》

OpenAI 在 2022 年 11 月推出了人工智能聊天应用—ChatGPT。它具有广泛的应用场景,在多项专业和学术基准测试中表现出的智力水平,不仅接近甚至有时超越了人类的平均水平。这使得 ChatGPT 在推出之初就受到广大用户的欢迎,被科技界誉为人工智能…

GPT-4 等大语言模型(LLM)如何彻底改变客户服务

GPT-4革命:如何用AI技术重新定义SEO策略 在当今快节奏的数字时代,客户服务不再局限于传统的电话线或电子邮件支持。 得益于人工智能 (AI) 和自然语言模型 (NLM)(例如 GPT-4)的进步,客户服务正在经历革命性的转变。 在这…

Web3 之路:构建开放、透明的数字生态系统

随着区块链技术的迅速发展,Web3正在成为数字世界的新引擎,重新定义着我们的生活和工作方式。在这个数字化的时代,我们目睹着一个全新的网络生态正在逐渐成形,其中开放性和透明性是其核心特征。让我们深入探讨,Web3如何…

HttpResponse响应模块设计与实现(http模块三)

目录 类功能 类定义 类实现 编译测试 类功能 类定义 // HttpResponse响应模块功能设计 class HttpResponse { private:int _statu;bool _redirect_flag; // 重定向标志std::string _body;std::string _redirect_url; // 重定向地址std::unordered_map<std::string, std…

WinCE USB驱动架构及术语明析

一、层式驱动的概念。 WinCE驱动多为层式驱动&#xff0c;分为MDD和PDD两层。 MDD包含通用的驱动代码&#xff0c;向操作系统提供了驱动接口&#xff0c;该层代码调用PDD功能访问硬件。 PDD部分包含与硬件平台相关的特殊代码&#xff0c;不具有通用性。 之所以要分层&#xff0…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Marquee)

跑马灯组件&#xff0c;用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动&#xff0c;不超过时不滚动。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Ma…

Swift SwiftUI 学习笔记 2024

Swift SwiftUI 学习笔记 2024 一、资源 视频资源 StanfordUnivercity 公开课 2023: https://cs193p.sites.stanford.edu/2023 教程 Swift 初识&#xff1a;基础语法&#xff1a;https://docs.swift.org/swift-book/documentation/the-swift-programming-language/guidedtour/…

Java基础 - 8 - 算法、正则表达式、异常

一. 算法 什么是算法&#xff1f; 解决某个实际问题的过程和方法 学习算法的技巧&#xff1f; 先搞清楚算法的流程&#xff0c;再直接去推敲如何写算法 1.1 排序算法 1.1.1 冒泡排序 每次从数组中找出最大值放在数组的后面去 public class demo {public static void main(S…

Python+更改镜像源下载库+PyCharm+汉化+第一个项目配置

文章目录 一、Python二、更改镜像源下载库三、PyCharm四、汉化五、第一个项目配置 2024年3月5日 操作环境&#xff1a; Win11-23H2 Python-3.12.2 PyCharm-2023.3.4 一、Python https://www.python.org/ 点击Download&#xff0c;查看对应的版本&#xff08; prerelease…

Springboot+vue的物业管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的物业管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的物业管理系统&#xff0c;采用M&#xff08;model&#xff09;V&#xff…

最简k8s部署(AWS Load Balancer Controller使用)

问题 我需要在k8s集群里面部署springboot服务&#xff0c;通过k8s ingress访问集群内部的springboot服务&#xff0c;应该怎么做&#xff1f; 这里假设已经准备好k8s集群&#xff0c;而且也准备好springboot服务的运行镜像了。这里我们将精力放在k8s服务编排上面。 一图胜千言…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Image)

Image为图片组件&#xff0c;常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源&#xff0c;支持png、jpg、jpeg、bmp、svg、webp和gif类型的图片格式。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&am…