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,
      });
    }
  );
});
相关推荐
崔庆才丨静觅24 分钟前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60611 小时前
完成前端时间处理的另一块版图
前端·github·web components
KYGALYX1 小时前
服务异步通信
开发语言·后端·微服务·ruby
掘了1 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅1 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
爬山算法2 小时前
Hibernate(90)如何在故障注入测试中使用Hibernate?
java·后端·hibernate
崔庆才丨静觅2 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment2 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅2 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端