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 分钟前
2026 春涧·前端走向全栈
前端·人工智能·全栈
Piper蛋窝4 分钟前
AI 有你想不到,也它有做不到 | 2025 年深度使用 Cursor/Trae/CodeX 所得十条经验
前端·后端·代码规范
LYFlied19 分钟前
WebAssembly为何能实现极致性能:从设计原理到执行优势
前端·wasm·跨端
一直都在57225 分钟前
Spring框架:AOP
java·后端·spring
sheji341627 分钟前
【开题答辩全过程】以 基于springboot的健身房管理系统为例,包含答辩的问题和答案
java·spring boot·后端
nbsaas-boot41 分钟前
Go 项目中如何正确升级第三方依赖(Go Modules 实战指南)
开发语言·后端·golang
百万蹄蹄向前冲1 小时前
2026云服务器从零 搭建与运维 指南
服务器·javascript·后端
释怀不想释怀1 小时前
vue布局,动态路由
前端·html
桜吹雪2 小时前
Vue 基础:状态管理入门
前端·vue.js
技术小泽2 小时前
OptaPlanner入门以及实战教学
后端·面试·性能优化