uniapp+node.js前后端获取平台小区列表，申请小区管理员和申请小区（社区管理平台的小程序）

站长

2024年03月29日 15:06 · 阅读数 8

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

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

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

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	否	否	是	否	否	更新时间

管理员表admin

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	管理员id
name	varchar(20)	否	否	否	否	否	姓名
phone	varchar(20)	否	否	否	否	否	手机号
idCard	varchar(20)	否	否	否	否	否	身份证号
state	int	否	否	否	否	否	审核状态
account	varchar(20)	是	否	否	否	否	默认是用户手机号
password	varchar(20)	是	否	否	否	否	默认是身份证后6位
userId	int	否	否	是	否	否	用户id
communityId	int	否	否	是	否	否	小区id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

1.2总体思路

描述：在平台内小区的新建以及每个小区的管理员用户都可以去进行申请，这样子有利于平台内小区的增多，小区有人管理，小区和小区管理员都是需要进行审核的，后期进一步就是创建小区之后小区内广告收费，小区管理员收取小区内店铺销售分成。

实现：当用户在小区列表页点击申请创建小区或者申请小区管理员就跳转到对应的页面，填写完对应的信息就可以申请了

2.前端

前端：申请小区给页面加输入框并且v-model进行绑定值，用户填写完信息之后申请就好，申请小区管理需要进入页面加载时获取平台内小区列表，将小区列表数据放在选择器中让用户进行选择（这里的选择器数据进一步优化是需要加上加载更多，分页数据的）

代码实现：

        // 申请小区
    async applyCommunity() {
      if (!this.name || !this.address || !this.scale) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      const res = await this.$myRequest({
        method: 'post',
        url: '/applyCommunity',
        data: {
          name: this.name,
          address: this.address,
          scale: this.scale,
          userId: this.$store.state.user.id
        }
      });
      uni.showToast({
        title: '申请成功,请耐心等待审核',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000); // 延迟1秒（1000毫秒）后执行navigateBack
    }

 // 获取小区列表
    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.map((item) => ({
            value: item.id, // 提取id属性
            text: item.name // 提取name属性
          }));
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    },
    // 申请小区管理员
    async applyAdmin() {
      if (!this.communityId || !this.name || !this.phone || !this.idCard) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      const res = await this.$myRequest({
        method: 'post',
        url: '/applyAdmin',
        data: {
          communityId: this.communityId,
          name: this.name,
          phone: this.phone,
          idCard: this.idCard,
          userId: this.$store.state.user.id
        }
      });
      uni.showToast({
        title: '申请成功,请耐心等待审核',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000); // 延迟1秒（1000毫秒）后执行navigateBack
    }

3.后端

后端：获取小区列表，申请小区管理，申请小区（接口编写逻辑：接口名字-sql语句-sql操作-返回信息）代码实现：

//获取小区信息列表
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,
      });
    });
  });
});
//申请小区管理员
app.post('/applyAdmin', (req, res) => {
  console.log(req.body)
  const {
    name,
    phone,
    idCard,
    userId,
    communityId
  } = req.body;
  const query = 'INSERT INTO admin  (name, phone, idCard, userId,communityId) VALUES (?, ?, ?, ?, ?)';
  connection.query(query, [name, phone, idCard, userId, communityId], (err, results) => {
    if (err) {
      return res.json({
        error: '申请小区管理员失败请稍后重试',
      });
    }

    res.json({
      message: '申请小区管理员成功',
    });
  });
});
//申请小区
app.post('/applyCommunity', (req, res) => {
  console.log(req.body)
  const {
    name,
    scale,
    address,
    userId
  } = req.body;
  const query = 'INSERT INTO community  (name, scale, address, userId) VALUES (?, ?, ?, ?)';
  connection.query(query, [name, scale, address, userId], (err, results) => {
    if (err) {
      return res.json({
        error: '申请小区失败请稍后重试',
      });
    }

    res.json({
      message: '申请小区成功',
    });
  });
});

4.验证结果

uniapp+node.js前后端获取平台小区列表，申请小区管理员和申请小区（社区管理平台的小程序）