uniapp+node.js前后端做帖子模块：获取帖子列表（社区管理平台的小程序）

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

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	否	否	是	否	否	数据改变时的时间

帖子评论表 postComment

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	帖子评论id
content	varchar(20)	否	否	否	否	否	内容
images	varchar(200)	是	否	否	否	否	详情表
postId	int	否	否	是	否	否	帖子id
userId	int	否	否	是	否	否	用户id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	数据改变时的时间

帖子点赞表 postLike

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	帖子点赞id
postId	int	否	否	是	否	否	帖子id
userId	int	否	否	是	否	否	用户id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	数据改变时的时间

1.2总体思路

我这里做的社区管理平台的小程序，一个平台有很多小区，每一个小区都有自己的帖子模块，这里就是做的帖子模块的功能，用户进入首页时是进入到默认小区的首页。
当进入小区时，获取这个小区的帖子列表，还要区分用户是登陆情况还是没有登录下的获取帖子列表，当时用户登陆了之后还需要重新查询一下帖子列表，因为帖子列表上的帖子的点赞状态和用户有关，我们需要去判断一下帖子列表其中的帖子是否被这个用户点赞过然后变化帖子的点赞状态（在本文展示代码没有去判断用户是否登录，是直接默认用户登陆之后的去获取小区的帖子列表）

返回的帖子列表里面的帖子信息包括（发帖人头像和昵称，帖子分类，帖子标题，帖子内容，帖子图片，点赞数，回复数，分享数，是否被当前用户点赞，帖子的发布时间）

2.前端

前端：当进入首页时，页面加载的时候获取当前小区的帖子列表。在methods里面写好获取帖子列表的方法再去到onLoad里面去调用这个方法。先去全局变量vuex去获取到用户id和小区id（这个可以页面加载的时候先去获取本地数据然后赋值到全局变量中）然后发起请求url拼接参数（或者你可以将这个数据写在data里面，如果写在url后端接收就是req.query，如果是data就是req.body），然后将返回回来的帖子列表赋值到本页面中

<view class="tiezilist">
  <view v-for="(post, index) in postList" :key="index" class="tiezi" >
       <!-- 用户头像和昵称 +帖子分类-->
    <view class="head">
      <view class="zuo">
        <image :src="post.avatar" mode="" class="img1"></image>
        <view >
          <text>{{ post.nickname }}</text></br>
          <text>{{ post.createTime }}</text>
        </view>
      </view>
      <view class="you">
       #{{ post.classification }}
      </view>
    </view>
    <!-- 帖子标题、内容和图片 -->
    <view class="" @click="goTieziDetails(post.id)">
      <view class="title">{{ post.title }}</view>
      <view class="content">{{ post.content }}</view>
      <view class="img">
        <image v-for="(image, imgIndex) in post.images" :key="imgIndex" :src="image" mode="" class="img3"></image>
      </view>
    </view>
        <!-- 点赞、评论、分享图标和数字 -->
        <view class="icons">
          <view>
            <uni-icons :type="post.isLiked ? 'hand-up-filled' : 'hand-up'" @click="handleLike(post)"></uni-icons> {{ post.likes }}
          </view>
          <view>
            <uni-icons type="chat"></uni-icons>{{ post.comments }}
          </view>
          <view>
            <button @click="share(post)" open-type="share"   class="button">
              <uni-icons type="redo"></uni-icons></i>{{ post.shares }}
            </button>
          </view>
        </view>
  </view>
</view>

  onLoad() {
    this.getCommunityPosts();
    }，
  methods: {
    // 获取小区帖子列表
    async getCommunityPosts() {
      const communityId = this.$store.state.communityId;
      const userId = this.$store.state.user.id; // 当前用户ID
      const res = await this.$myRequest({
        method: 'get',
        url: '/getCommunityPosts?communityId=' + communityId + '&userId=' + userId
      });
      //去判断帖子列表里面每一个帖子被用户点赞的的数据是不是大于0的是大于0点赞状态没有大于0就没有点赞状态
      if (res.data) {
        this.postList = res.data.map(post => {
          post.isLiked = post.likesByCurrentUser > 0;
          return post;
        });
      }
    },}

3.后端

后端：当前端传来用户id和小区id时去数据库里面查询这个小区id对应的帖子数据，再去查其中帖子点赞表里面的数据的对应用户id点赞过的帖子id，还有处理一下帖子里面的图片将字符串转为数组和帖子发布的时间处理一下

// 获取小区的帖子列表
app.get('/getCommunityPosts', (req, res) => {
  const userId = req.query.userId
  const communityId = req.query.communityId
  connection.query(
    'SELECT post.*, user.name, user.avatar, COUNT(pl.id) AS likesByCurrentUser ' +
    'FROM post ' +
    'INNER JOIN user ON post.userId = user.id ' +
    'LEFT JOIN postLike pl ON post.id = pl.postId AND pl.userId = ? ' +
    'WHERE post.communityId = ? ' +
    'GROUP BY post.id',
    [userId, communityId],
    (error, results) => {
      if (error) {
        console.error(error);
        return res.status(500).json({
          error: 'false'
        });
      }
      // 处理帖子的图片字段，将逗号分割的字符串转为数组
      results = results.map(post => {
        post.images = post.images.split(',');
        post.createTime = formatTime(post.createTime); //将数据库中的时间格式转为前端显示的格式
        return post;
      });
      return res.json(results);
    }
  );
});