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

管理员表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进行绑定值,用户填写完信息之后申请就好,申请小区管理需要进入页面加载时获取平台内小区列表,将小区列表数据放在选择器中让用户进行选择(这里的选择器数据进一步优化是需要加上加载更多,分页数据的)

代码实现:

cpp 复制代码
        // 申请小区
    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
    }
cpp 复制代码
 // 获取小区列表
    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操作-返回信息) 代码实现:

cpp 复制代码
//获取小区信息列表
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.验证结果

相关推荐
苍何4 小时前
字节发力,豆包大模型2.0 震撼来袭(附 Trae 实测)
后端
苍何4 小时前
不会剪辑的人,开始用 AI 批量出爆款了
后端
苍何4 小时前
百度 APP 正式接入 OpenClaw,所有人限时免费!
后端
Aric_Jones4 小时前
JavaScript 从入门到精通:完整语法指南
开发语言·javascript·ecmascript
岱宗夫up4 小时前
FastAPI入门(上篇):快速构建高性能Python Web API
开发语言·前端·python·fastapi
紫陌涵光5 小时前
112. 路径总和
java·前端·算法
漠月瑾-西安5 小时前
CVE-2025-55182漏洞解析:你的React项目安全吗?
前端·安全·react.js
No丶slovenly5 小时前
flutter笔记-输入框
前端·笔记·flutter
国产化创客6 小时前
ESP32+Web实现智能气象站
前端·物联网·智能家居·智能硬件
Volunteer Technology6 小时前
DynamicTP动态线程池(四)
java·spring boot·后端·spring