@TOC

---

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

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

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

---

0前提

温馨提示：我做的思路可能是复杂化了或者说代码写的不规范，如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码，我的后端是写的很简单的没有什么路由分发是直接写的，你可以自由优化，以及在需要验证用户是否登录和验证用户token是否正确的我没有进行验证，你们可以自行添加 小程序的其他部分你可以看看我往期的文章

1.一些准备

1.1表

活动表activty

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	活动id
title	varchar(20)	否	否	否	否	否	标题
content	varchar(20)	否	否	否	否	否	内容
coverImage	varchar(50)	否	否	否	否	否	封面表
images	varchar(200)	否	否	否	否	否	详情表
starTime	datetime	否	否	否	否	否	活动开始时间
endTime	datetime	否	否	否	否	否	活动结束时间
maxPeople	int	否	否	否	否	否	活动最大人数
address	varchar(20)	否	否	否	否	否	活动地址
classification	varchar(20)	否	否	否	否	否	活动分类
adminId	int	否	否	是	否	否	管理员id
communityId	int	否	否	是	否	否	小区id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

活动报名表activtyRegistration

字段名称	类型（长度）	允许空	主键	外键	自增	唯一	说明
id	int	否	是	否	是	是	活动报名id
name	varchar(20)	否	否	否	否	否	姓名
gender	int	否	否	否	否	否	性别
phone	varchar(20)	否	否	否	否	否	手机号
state	int	否	否	否	否	否	审核状态
userId	int	否	否	是	否	否	用户id
activtyId	int	否	否	是	否	否	活动 id
creatTime	timestamp	否	否	是	否	否	创建时间
updateTime	timestamp	否	否	是	否	否	更新时间

1.2总体思路

描述：在平台上有多个小区，每个小区都有自己的小区活动，小区管理可以在管理端进行发布小区活动，用户可以在平台上的小区的活动列表页上看到发布出来的小区活动，并且针对于这个小区活动用户可以进行一个报名。所以这里的小区活动模块存在着三个页面，一个是小区活动列表页，一个是小区活动详情页，一个是小区活动报名页。

实现：当用户进入小区活动列表页时，自动获取这个小区的活动列表，当用户点击活动卡片时会跳转到小区活动详情页，如果这个活动的报名截止时间与现在的时间对比，没有过期那就显示报名按钮，还有进入页面时判断一下当前用户是否报名参与了这个活动，还有活动人数，如果活动报名人数超过了活动上限也是不能给用户进行报名的，还有小区活动应该具有活动分类，用户可以选择活动分类查看自己想看的活动，以及活动列表页可以加一个筛选搜索

2.前端

前端：获取活动列表在页面加载时获取（是获取当前小区id对应的小区活动列表，小区id去vuex里面拿），获取活动详情先去接受上一个页面传入的活动id去获取活动详情，报名活动的时候让用户填写对应信息之后传入后端用户id好活动id进行报名

代码实现：

      // 获取活动列表
    async activityList() {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: '/activityList?communityId=' + this.$store.state.communityId
        });
        console.log(res.data.data);
        // 假设后端返回错误时包含一个名为 'error' 的字段
        if (res.error) {
          this.$message.error(res.error);
        } else {
          //提取属性
          this.huodonList = res.data.data;
        }
      } catch (error) {
        // 捕获异常，显示通用错误消息或者其他处理
        console.error('请求发生错误:', error);
      }
    }

 // 获取小区活动详情
   async activityDetails(activityId) {
      try {
        const res = await this.$myRequest({
          method: 'get',
          url: `/activityDetails?activityId=${activityId}`
        });
        console.log(res.data.data);
        if (res.error) {
          this.$message.error(res.error);
        } else {
          this.activity = res.data.data;
        }
      } catch (error) {
        console.error('请求发生错误:', error);
      }
    },

 // 报名活动
    async applyActivity() {
      console.log(this.gender);
      if (!this.name || !this.phone || !this.idCard || !this.gender) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      try {
        const res = await this.$myRequest({
          method: 'post',
          url: '/applyActivity',
          data: {
            name: this.name,
            phone: this.phone,
            idCard: this.idCard,
            gender: this.gender,
            activityId: this.activityId,
            userId: this.$store.state.user.id
          }
        });
        uni.showToast({
          title: '报名成功',
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000); // 延迟1秒（1000毫秒）后执行navigateBack
      } catch (error) {
        console.error('报名失败:', error);
        uni.showToast({
          title: '报名失败，请稍后再试',
          icon: 'none'
        });
      }
    },

3.后端

后端：报名活动，获取小区活动列表，获取小区活动详情（接口编写逻辑：接口名字-接收前端传值-sql语句-sql操作-返回信息） 代码实现：

// 报名活动接口
app.post('/applyActivity', (req, res) => {
  const {
    name,
    phone,
    idCard,
    gender,
    userId,
    activityId
  } = req.body;

  // 在这里编写将报名信息保存到数据库的逻辑，以下是一个示例
  const query =
    'INSERT INTO activityregistration (name, phone, idCard,gender, userId,activityId)  VALUES (?, ?, ?, ?, ?, ?)';
  connection.query(query, [name, phone, idCard, gender, userId, activityId], (err, results) => {
    if (err) {
      console.error('报名活动失败:', err);
      return res.json({
        error: '报名活动失败，请稍后再试'
      });
    }

    res.json({
      message: '报名活动成功'
    });
  });
});
// 获取活动信息列表  
app.get('/activityList', (req, res) => {
  const communityId = req.query.communityId
  console.log(communityId);
  const query = `SELECT * from activity where communityId=? ORDER BY createTime DESC`; // 根据创建时间降序排序  
  connection.query(query, [communityId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '获取热点列表失败请稍后重试',
      });
    }

    // 遍历结果集，仅修改创建时间字段  
    results.forEach(activity => {
      activity.createTime = formatTime(activity.createTime);
    });

    // 返回处理后的结果集  
    res.json({
      data: results,
    });
  });
});
// 获取活动详情
app.get('/activityDetails', (req, res) => {
  console.log(req.query);
  const activityId = req.query.activityId
  const query = `SELECT * from  activity where id=? ORDER BY createTime DESC`; // 根据创建时间降序排序  
  connection.query(query, [activityId], (err, results) => {
    if (err) {
      console.log(err);
      return res.json({
        error: '获取热点信息失败请稍后重试',
      });
    }
    results[0].createTime = formatTime(results[0].createTime);
    results[0].starTime = formatTime(results[0].starTime);
    results[0].endTime = formatTime(results[0].endTime);
    results[0].images = convertImagesToArray(results[0].images);
    // 返回处理后的结果集  
    res.json({
      data: results[0],
    });
  });
});

4.验证结果