百战商城商品数据云函数化改造总结_百战_3

百战商城商品数据云函数化改造总结

一、核心目标

将首页商品列表数据从本地写死数据/HTTP请求，迁移到云开发数据库+云函数调用。

二、实施步骤

1. 准备商品数据

创建云数据库集合：goose
导入准备好的 goose.json 测试数据
确认字段结构：id、name、tag、image、price 等

2. 创建云函数

新建云函数：goose_data
核心功能：从 goose 集合分页查询数据

3. 云函数代码逻辑

javascript 复制代码

const db = cloud.database()

exports.main = async (event, context) => {
  const page = event.page || 1  // 接收页码参数
  const skipNum = (page - 1) * 10  // 计算跳过的数据量
  
  return  db.collection('goose')
    .skip(skipNum)
    .limit(10)
    .get()
}

4. 前端调用改造

原HTTP请求：

javascript 复制代码

// 注释掉原有HTTP请求
// wx.request({...})

改为云函数调用：

javascript 复制代码

wx.cloud.callFunction({
  name: 'goose_data',
  data: {
    page: this.data.page
  }
}).then(res => {
  // 处理返回数据
})

5. 数据处理优化

数据合并：上拉加载时，将新数据追加到原有数据后
空数据判断：当返回数组长度为0时，提示"暂无数据"
页码管理：触底时自动增加页码，实现分页加载

三、关键代码片段

数据合并逻辑

javascript 复制代码

  wx.cloud.callFunction({
          name: 'goose_data',
          data: {
            page: this.data.page
          }
        }).then(res => {
          //console.log(res.result.data)
          this.setData({
            goodsData:this.data.goodsData.concat(res.result.data)
          })
        })

空数据提示

javascript 复制代码

if (res.result.data.length === 0) {
  wx.showToast({
    title: '被你看光了~',
    icon: 'none'
  })
}

四、注意事项

云函数部署：修改后务必"上传并部署"
数据格式：确保云函数返回数据格式与原数据结构一致
分页计算 ：正确计算 skip 值实现分页
加载状态：合理管理加载状态，避免重复请求

五、效果验证

首次加载显示前10条数据
上拉触底加载下一页数据
数据加载完毕后显示友好提示
总数据量正确展示（26条数据）

六、扩展思考

可添加搜索功能，在云函数中实现按名称搜索
可添加分类筛选功能
可优化图片加载，使用云存储CDN加速

通过本次改造，项目数据管理更加规范，为后续功能扩展打下基础。