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

相关推荐
橙子家33 分钟前
浏览器缓存之【身份与会话管理】:Cookies 和 Private state tokens
前端
葫芦和十三1 小时前
图解 MongoDB 09|explain 再读:从 queryPlanner 到 executionStats
后端·mongodb·agent
To_OC1 小时前
LC 49 字母异位词分组:想到哈希表很简单,选对 key 才是精髓
javascript·算法·leetcode
葫芦和十三1 小时前
图解 MongoDB 10|覆盖查询:让索引把活干完,根本不用回表
后端·mongodb·agent
最新资讯动态2 小时前
HDC 2026 | 对话鲸鸿动能:存量时代,品牌如何夺回营销“主动权”?
前端
最新资讯动态2 小时前
游戏出海,从产品走向体系
前端
最新资讯动态2 小时前
20人团队跑出百万DAU、大厂也来抢量:谁在鸿蒙生态跑出加速度
前端
最新资讯动态2 小时前
千万开发者背后,鸿蒙商业化的B面
前端
大鸡腿同学3 小时前
从 CoT 思维链到 ReAct:智能 Agent 到底是怎么 “思考” 的?
后端
爱勇宝4 小时前
AI 时代:智商决定起点,情商决定走多远
前端·ai编程