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,
      });
    }
  );
});
相关推荐
哎呦没18 分钟前
SpringBoot框架下的资产管理自动化
java·spring boot·后端
2401_8576009521 分钟前
SpringBoot框架的企业资产管理自动化
spring boot·后端·自动化
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
NiNg_1_2344 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt