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,
      });
    }
  );
});
相关推荐
Jiaberrr5 分钟前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy29 分钟前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白30 分钟前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、30 分钟前
Web Worker 简单使用
前端
web_learning_32133 分钟前
信息收集常用指令
前端·搜索引擎
tabzzz40 分钟前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
凡人的AI工具箱1 小时前
AI教你学Python 第11天 : 局部变量与全局变量
开发语言·人工智能·后端·python
200不是二百1 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao1 小时前
自动化测试常用函数
前端·css·html5
是店小二呀1 小时前
【C++】C++ STL探索:Priority Queue与仿函数的深入解析
开发语言·c++·后端