uniapp+node.js前后端获取平台小区列表，点击切换可以切换小区（社区管理平台的小程序）

@TOC

---

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

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

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

---

0前提

温馨提示：我做的思路可能是复杂化了或者说代码写的不规范，如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码，我的后端是写的很简单的没有什么路由分发是直接写的，你可以自由优化，以及在需要验证用户是否登录和验证用户token是否正确的我没有进行验证，你们可以自行添加 小程序的其他部分你可以看看我往期的文章

1.一些准备

1.1表

小区表community

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	小区id
name	varchar(20)	否	否	否	否	否	名字
address	varchar(20)	否	否	否	否	否	地址
scale	int	否	否	否	否	否	规模
state	int	否	否	否	否	否	审核状态
userId	int	否	否	是	否	否	用户id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

1.2总体思路

描述：当用户点击首页的小区名字时，进入到这个平台的小区列表页，可以看到平台上的小区列表，在每一个小区卡片上都有切换的按钮，点击切换之后进行切换小区的操作，让用户进入到平台的另外一个小区。（我在这个小程序写的就是光列出来平台小区列表，进一步的写法是区分出我的小区和附近小区，我的小区与我相关联的小区，附近的小区是根据我的地址进行距离计算排序的小区，并且还有要保留用户最后一次进入的小区id方便用户下次进入小程序进入的是最后一次进行的小区）

实现：当用户进入到小区列表页时获取平台内的小区列表，点击小区卡片上的切换之后，将小区id赋值到vuex进行更新，同时在vuex里面设置一个变量，这个变量的作用是判断有无切换小区

2.前端

前端：页面加载时调用方法获取平台的小区列表（在这里我没有做分页查询，这个是需要去做的，因为你后面数据越来越多，不可能说一次性获取全部的数据，这样子请求太慢了）；切换小区时，针对小区id和判断是否切换小区的变量进行赋值，然后返回首页，首页显示时根据变量判断是否重新获取一遍当前小区的帖子（小区id我在vuex里面是设置了默认的小区id，让用户最开始一进来进入的是我设置好的默认的小区）

代码实现：

    // 获取小区列表
    async xiaoqu() {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: '/xiaoquList'
        });
        console.log(res.data.data);
        // 假设后端返回错误时包含一个名为 'error' 的字段
        if (res.error) {
          this.$message.error(res.error);
        } else {
          //提取属性
          this.commityList = res.data.data;
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    },
        // 切换小区
    qiehuan(communityId) {
      this.$store.commit('communityId', communityId);
      this.$store.commit('postUpdate', 1);
      uni.showToast({
        title: '切换小区成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000); // 延迟1秒（1000毫秒）后执行navigateBack
    },

在index.js的state设置以下2个变量

communityId: 1, //小区id
postUpdate: 0 //是否更新首页帖子

在mutations里面设置以下2个更新的方法

communityId(state, communityId) {
  state.communityId = communityId;
}
postUpdate(state, postUpdate) {
  state.postUpdate = postUpdate;
}

首页添加显示去判断

onShow() {
  if(this.$store.state.postUpdate==1)
  {
    this.getCommunityPosts()
    this.getxiaoquDetail()
    this.$store.commit('postUpdate', 0);
  }

3.后端

后端：查询数据库里面小区表的小区列表 代码实现：

//获取小区信息列表
app.get('/xiaoquList', (req, res) => {
  //在数据库中查询小区列表信息
  const query =
    `SELECT c.id as communityId, c.name as communityName, c.address, c.scale, c.createTime, c.state,u.name, u.phone FROM community c JOIN user u ON c.userId = u.id`;
  // 获取小区表总行数的查询
  const countQuery = 'SELECT COUNT(*) as totalItems FROM community';
  connection.query(query, (err, results) => {
    if (err) {
      console.log(err)
      return res.json({
        error: '获取小区列表失败请稍后重试',
      });
    }
    // 处理数据库返回的时间格式
    const xiaoquList = results.map(xiaoqu => ({
      id: xiaoqu.communityId,
      nickname: xiaoqu.name,
      phone: xiaoqu.phone,
      name: xiaoqu.communityName,
      address: xiaoqu.address,
      scale: xiaoqu.scale,
      creatTime: formatTime(xiaoqu.createTime),
      state: xiaoqu.state,
    }));
    // 执行获取总行数的查询
    connection.query(countQuery, (err, countResults) => {
      if (err) {
        return res.json({
          error: '获取小区列表总数失败请稍后重试',
        });
      }

      const totalItems = countResults[0].totalItems;

      // 返回小区列表信息和总行数
      res.json({
        data: xiaoquList,
        totalItems,
      });
    });
  });
});

4.验证结果