uniapp+node.js前后端做帖子模块:分享帖子和分享页面(社区管理平台的小程序)

目录

  • 0前提
  • 1.一些准备
    • 1.1表
      • 帖子表 post
    • 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数据改变时的时间

1.2总体思路

描述:用户可以点击帖子的分享按钮进行分享帖子或者去页面的左上角点击三个点之后点击分享到聊天界面
实现:首先要加上分享的方法才能进行分享,加上分享的方法之后就可以进行页面的分享了,然后如果想要分享特定的标题和图片比如本文中的分享帖子就是需要给帖子加上一个分享的按钮其类型是share(注意必须是button按钮,不然这个分享调用不起来)

2.前端

前端:当用户想要分享页面时就用默认的标题和图片进行分享,当用户想要分享特定内容帖子的时候,将分享的标题设置为该帖子的标题、将分享的图片设置为帖子的第一张图片。在我这里我是使用到了一个判断变量去判断本次用户的分享是分享帖子还是分享页面,就不会导致第二次分享页面的内容是第一次分享帖子的内容(当然有其他解决方法,这是我的你可以选择更好)。当用户分享帖子时调用接口告诉后端给该帖子的分享数加1

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

// 这是页面分享功能
wx.showShareMenu({
withShareTicket:true,
//设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
menus:[“shareAppMessage”,
“shareTimeline”]
})

加上一个分享帖子的方法

// 分享帖子async share(post){const postId=post.idthis.sharedTitle=post.title;this.sharedImageUrl=post.images[0] // 使用帖子的第一张图片作为缩略图this.isShared = true;const res = await this.$myRequest({method: 'post',url: `/sharePost?postId=${postId}`,});if (res.data.success) {await this.getCommunityPosts();}},

加上分享聊天的方法(需要注意的是这个和methods同级)

      //分享到聊天onShareAppMessage(res) {if (this.isShared == true) {// 分享成功,将分享状态重置为未分享this.isShared = false;return {title: this.sharedTitle, //分享的名称imageUrl: this.sharedImageUrl,}}else{return {title: '分享给你快点开看看呀', //分享的名称}}},

3.后端

后端:当接受到前端传来的信息之后到数据库里给这个帖子的分享数加一(本文的本次功能实现主要还是前端实现,如果你不需要分享数这种数据完全就可以只写前端就好了)

// 分享帖子接口
app.post('/sharePost', (req, res) => {const postId = req.query.postId;console.log(postId)connection.query('UPDATE post SET shares = shares + 1 WHERE id = ?',[postId],(error) => {if (error) {console.error(error);return res.status(500).json({error: 'false',});}return res.json({success: true,});});
});

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

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

相关文章

d2-crud-plus 使用小技巧(二)—— 路由跳转查询

需求 项目中要在a.vue界面点击表格中数据,携带参数跳转到b.vue界面,并进行查询。需要在d2-crud-plus框架下实现。 解决方法 使用插槽将要点击的数据添加上点击事件,在点击事件中添加路由跳转,并携带参数。 在目标界面使用对外…

单页面应用的优缺点

单页面应用(SPA,Single Page Application)是一种特殊的Web应用,其所有页面操作和交互都通过JavaScript、AJAX、HTML5和CSS3等前端技术在浏览器中完成,无需每次请求都重新加载整个页面。这种应用的设计模式在近年来越来…

js中的递归

理解 在函数内部可以调用其他函数,如果这个函数在内部调用了自身,那么这个函数就是递归函数 递归的优点 代码简洁性,递归可以用简介的代码实现复杂的问题逻辑清晰易于理解 递归缺点 调用栈溢出,递归中如何递归层次过深,超过了js引擎的调用栈深度限制,就会导致出现 "最…

GIN与Echo:选择正确Go框架的指南

您是否在Go中构建Web应用?选择正确的框架至关重要!GIN和Echo是两个热门选择,每个都有其优势和特点。本指南将详细介绍每个框架的特性、速度、社区热度以及它们各自擅长的项目类型。最后,您将能够为您的下一个Web项目选择完美的框架…

C++11常用知识分享(一)【列表初始化 || 简化声明 || 范围for || 左右值 || 可变参数模板】

目录 一. 列表初始化 1)用法 2) initializer_list 小节: 二,简化声明 1) ,auto 2) ,decltype类 3),nullptr 三,范围for 四,C11后,STL容器变化 五&#xff0c…

一篇文章教会你如何在IOS真机上完美运行React Native

一篇文章教会你如何在IOS真机上完美运行React Native 项目初始化项目配置可能遇到的问题没有账号也没有Team设备上没有打开开发者模式,也没有信任开发者证书 无线调试 项目初始化 在终端使用**npx react-native init ProjectName**初始化React Native项目。 进入项…

运维随录实战(5)之centos搭建jenkins

一,搭建jenkins准备 下载安装jdk环境 -》版本 jdk11 下载安装maven环境 -》版本 maven 3.8.8 git -》版本 1.8.3.1 yum install git jenkins安装版本:2.414.3 下载地址:https://get.jenkins.io/war-stable/2.414.3/jenkins.war 注:jenkins版本与jdk版本有一定的对应关…

力扣550 游戏玩法分析 IV

目录 题目描述 思路整理 1. 首次登录日期 2. 第二天登录 3. 计算比率 实现思路 完整代码及解释 题目描述 Table: Activity ----------------------- | Column Name | Type | ----------------------- | player_id | int | | device_id | int | | ev…

117.移除链表元素(力扣)

题目描述 代码解决 class Solution { public:ListNode* removeElements(ListNode* head, int val) {//删除头节点while(head!NULL&&head->valval){ListNode*tmphead;headhead->next;delete tmp;}//删除非头节点ListNode*curhead;while(cur!NULL&&cur-&g…

安卓虚拟机ART和Dalvik

目录 一、JVM和Dalvik1.1 基于栈的虚拟机字节码指令执行过程 1.2 基于寄存器的虚拟机 二、ART与Dalvikdex2aotAndroid N的运作方式 三、总结 一、JVM和Dalvik Android应用程序运行在Dalvik/ART虚拟机,并且每一个应用程序对应有一个单独的Dalvik虚拟机实例。 Dalvik…

python入门第十七节常用的高级函数

常用的高级函数 常用的高阶函数filter(function, iterable)map(func, *iterables)reduce(function, iterable[, initial]) 常用的高阶函数 定义:参数或返回值为其他函数的函数 filter(function, iterable) function:函数(function 必需能够…

Vue.js 实用技巧:深入理解 Vue.set 方法

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

20 个不同的 Python 函数实例

Python 是一种广泛使用的高级编程语言,其函数是 Python 编程中至关重要的概念之一。函数是一段可以重复使用的代码块,可以接收输入参数并返回输出结果。使用函数能够提高代码的可读性、可维护性和重用性。 基础知识 在 Python 中,函数使用关…

异常值检测-箱线图 头歌代码注释

方法一: import pandas as pd import matplotlib.pyplot as plt from scipy import stats import numpy as npdata pd.read_csv("src/death.csv", index_colUnnamed: 0)data data.dropna(axis1, threshdata.shape[0] * 0.2) data data.dropna(axis0, …

【如何在Docker中,修改已经挂载的卷(Volume)】

曾梦想执剑走天涯,我是程序猿【AK】 提示:添加投票!!! 目录 简述概要知识图谱 简述概要 如何在Docker中,修改已经挂载的卷(Volume) 知识图谱 在Docker中,修改已经挂载…

C#双向链表实现:在当前节点后插入新数据的方法Insert()

目录 1.定义一个泛型节点类并自动属性 2.定义链表类&#xff0c;并实现Append、Print、MoveFirst、 Insert 3.Main方法 1.定义一个泛型节点类并自动属性 /// <summary> /// 定义泛型节点类 /// </summary> /// <typeparam name"T">泛型运算符&…

本地navicate连接vm虚拟机中的mysql5.7docker容器

一&#xff0c;配置 前提是我已经启动的mysql5.7容器 使用 docker ps -a 查看所有的容器 使用 docker exec -it c4f9 bash 进入mysql命令行&#xff0c;注意这个c4f9是容器唯一id&#xff0c;不用写全连接mysql mysql -uroot -p123456&#xff0c;连接成功后 输入 show datab…

蓝桥杯——123

123 二分等差数列求和前缀和数组 题目分析 连续一段的和我们想到了前缀和&#xff0c;但是这里的l和r的范围为1e12&#xff0c;明显不能用O(n)的时间复杂度去求前缀和。那么我们开始观察序列的特点&#xff0c;可以按照等差数列对序列进行分块。如上图&#xff0c;在求前10个…

LDA(Latent Dirichlet Allocation,隐含狄利克雷分布)模型简单使用

LDA&#xff08;Latent Dirichlet Allocation&#xff0c;隐含狄利克雷分布&#xff09;模型 机器学习高级算法中LDA算法有线性判别分析&#xff08;Linear Discriminant Analysis&#xff0c;LDA&#xff09;和隐含狄利克雷分布&#xff08;Latent Dirichlet Allocation&…

Android的多线程和异步处理

在Android开发中&#xff0c;多线程和异步处理是处理耗时操作、提高应用响应性和性能的关键技术。以下是一些关于Android多线程和异步处理的基本概念和实践&#xff1a; 1. **主线程&#xff08;UI线程&#xff09;**&#xff1a; - Android应用的主线程负责处理UI操作和事…