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

相关推荐
闲猫2 小时前
Spring AI 对接Deepseek ChatModel 聊天对话
java·前端·spring
葫芦和十三3 小时前
图解 MongoDB 28|块与迁移:balancer 怎么均衡数据
后端
葫芦和十三3 小时前
图解 MongoDB 27|分片策略:范围分片 vs 哈希分片
后端·mongodb·agent
paopaokaka_luck3 小时前
英语单词学习系统的设计与实现(基于艾宾浩斯遗忘曲线的智能复习机制、语音朗读、多题型测试与错题自动收录、Echarts图形化分析)
vue.js·spring boot·后端·echarts
自信的未来4 小时前
JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
java·前端·json
我叫黑大帅4 小时前
MySQL 并发插入竞态问题:原子写入实践指南
后端·mysql·面试
SRET4 小时前
Mineradio 沙盒隔离安装完全指南 | 一键安全运行 Electron 应用!!!
javascript·经验分享·安全·electron·aigc·音视频·ai编程
全栈前端老曹4 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
zhangxingchao5 小时前
AI大模型核心八:从 Agent Skill、长文档 RAG 到知识库更新与训练策略
前端·人工智能·后端
我叫黑大帅5 小时前
别再手动写 updated_at了,这坑我踩过
后端·面试·go