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

@TOC


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

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

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


0前提

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

1.一些准备

1.1表

帖子表 post

字段名称 类型(长度) 允许空 主键 外键 自增 唯一 说明
id int 帖子id
title varchar(20) 标题
content varchar(20) 内容
images varchar(200) 详情表
classification varchar(20) 帖子分类
likes int 点赞数
comments int 评论数
shares int 分享数
userId int 用户id
communityId int 小区id
creatTime timestamp 创建时间
updateTime timestamp 数据改变时的时间

1.2总体思路

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

2.前端

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

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

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

加上一个分享帖子的方法

ini 复制代码
// 分享帖子
    async share(post){
      const postId=post.id
      this.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同级)

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

3.后端

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

css 复制代码
// 分享帖子接口
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,
      });
    }
  );
});
相关推荐
朱 欢 庆3 小时前
云服务器附件备份到本机内网服务器
运维·服务器·前端·经验分享
jyOverQ3 小时前
RabbitMQ 消息积压怎么办?Prefetch、消费者并发与扩容
分布式·后端·rabbitmq
支支დ9 小时前
VO by Vercel 前端特定优势:为什么它是构建 AI 应用的新范式
前端·人工智能
香芋芋圆9 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF9 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
宿67410 小时前
vue3-async
前端·javascript·vue.js
YXWik610 小时前
记录前端请求接口在浏览器请求响应的Preview和Response展示的一样的问题
前端
2501_9289962210 小时前
GPT-4o换DeepSeek迁移成本多少?中科热备解析API聚合平台技术账本
前端·数据库·人工智能
东风破_10 小时前
从跨域到 WebSocket:前端跨域方案、SSE 与双向实时通信详解
前端·后端
原则猫10 小时前
TS 类型工具
前端