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.验证结果

相关推荐
行百里er32 分钟前
WebSocket 在 Spring Boot 中的实战解析:实时通信的技术利器
spring boot·后端·websocket
再学一点就睡1 小时前
前端网络实战手册:15个高频工作场景全解析
前端·网络协议
C_心欲无痕2 小时前
有限状态机在前端中的应用
前端·状态模式
C_心欲无痕2 小时前
前端基于 IntersectionObserver 更流畅的懒加载实现
前端
candyTong2 小时前
深入解析:AI 智能体(Agent)是如何解决问题的?
前端·agent·ai编程
柳杉2 小时前
建议收藏 | 2026年AI工具封神榜:从Sora到混元3D,生产力彻底爆发
前端·人工智能·后端
weixin_462446232 小时前
使用 Puppeteer 设置 Cookies 并实现自动化分页操作:前端实战教程
运维·前端·自动化
仙俊红2 小时前
spring的IoC(控制反转)面试题
java·后端·spring
CheungChunChiu2 小时前
Linux 内核动态打印机制详解
android·linux·服务器·前端·ubuntu
小楼v2 小时前
说说常见的限流算法及如何使用Redisson实现多机限流
java·后端·redisson·限流算法