小程序中实现获取全部数据的图文教程

日常在开发小程序的时候,我们的后端服务可以采用云开发的模式,但是云开发限制每次最多获取100条的数据,如果我们需要获取全部数据,必须自己构造后端服务。本篇我们介绍一下如何获取全部数据。

定义api

微搭中定义后端服务是写api。登录控制台,创建api

小程序中实现获取全部数据的图文教程

创建的时候我们选择自定义

小程序中实现获取全部数据的图文教程

输入名称和标识

小程序中实现获取全部数据的图文教程

在APIs方法旁边点击立即新建

小程序中实现获取全部数据的图文教程

输入名称和标识,意图选择查询列表,类型选择自定义代码

小程序中实现获取全部数据的图文教程

官方自定义代码模板

编制后台方法的时候,先需要找到官方的代码模板,我们可以在官方文档中寻找,代码模板如下:

module.exports = async function (params, context) {
  const result = await context.database.collection('数据库集合名称').get();

  // 在这里返回这个方法的结果,需要与出参定义的结构映射
  return {
_id: 123456
  };
};

这里的params就是我们的入参,而return就是出参。

小程序中实现获取全部数据的图文教程

零基础做开发的,往往这里很难理解,因为理解不到位也就写不对代码。

云开发数据库介绍

云开发的数据库是一个文档型数据库,里边的集合相当于我们传统数据库的表,表里的记录是一个个的对象,而对象的每个属性相当于数据库表中的列。要想进入云开发数据库,可以从产品列表里找到云开发cloudbase进入

小程序中实现获取全部数据的图文教程

进入之后可以看到你已经开通的环境

小程序中实现获取全部数据的图文教程

然后打开数据库就可以看到所有的集合

小程序中实现获取全部数据的图文教程

如何获取集合的名称

我们在API访问集合时,需要用到集合的名称,集合的名称先需要在微搭中找到你需要的数据源的标识

小程序中实现获取全部数据的图文教程

粘贴这个标识,在数据库中去找到这个集合

小程序中实现获取全部数据的图文教程

找到集合名称就可以进行后端代码的编写了

实现获取全部数据

在API的自定义代码编辑窗口贴入如下代码:

module.exports = async function (params, context) {
  const db = context.database;
  const MAX_LIMIT = 100
  // 先取出集合记录总数
  const countResult = await db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count()
  const total = countResult.total
  // 计算需分几次取
  const batchTimes = Math.ceil(total / 100)
  // 承载所有读操作的 promise 的数组
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
const promise = db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
tasks.push(promise)
  }
  // 等待所有
  return (await Promise.all(tasks)).reduce((acc, cur) => {
return {
  data: acc.data.concat(cur.data),
  errMsg: acc.errMsg,
}
  })
};

这里需要解释一下代码的意思,首先呢这个方法有两个参数,一个是params,一个是context。params相当于调用方法时传入的参数,而context相当于上下文,我们可以从上下文中获取很多内容,比如我们就从上下文获取了当前的数据库

const db = context.database

然后通过db.collection可以访问具体的集合,访问的时候要传入我们从数据库中获取到的集合名称

db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview')

集合拿到之后,可以访问集合里的各种方法,比如我们先调用count方法来获取集合的总记录条数

db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count()

我们的逻辑是每次获取100条,就要知道可以分多少个批次获取,因此做了一个计算,来获取有多少个批次

const batchTimes = Math.ceil(total / 100)

skip方法可以每次跳过多少条记录,limit是每次取多少条,因此有了循环去获取数据的代码,每次获取到的数据我们都把他放到一个数组中,数组添加数据可以调用push方法

for (let i = 0; i < batchTimes; i++) {
const promise = db.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
tasks.push(promise)
  }

但是这样的数据不是我们最终想要的结果,我们需要处理一下返回结果。数据库的方法都是异步调用,因此我们用await Promis.all(tasks)来等待数据全部返回,返回的是一个数组,调用reduce方法来让数组最终返回成一个对象,对象有两个属性,data属性返回所有数据,errMsg返回调用的结果

理解了代码之后,就需要点击方法测试来验证代码是否正确

小程序中实现获取全部数据的图文教程

看到测试成功之后,点击出参映射就完成了所有的工作

小程序展示所有数据

有了后端方法之后我们就需要调用APIs,在变量中创建一个模型变量,选择我们刚刚创建的APIs,并选择方法

小程序中实现获取全部数据的图文教程

如果想展示数据,我们需要添加一个普通容器,里边添加一个文本组件

小程序中实现获取全部数据的图文教程

选中普通容器,在通用配置里,绑定循环展示

小程序中实现获取全部数据的图文教程

绑定的时候选择data

小程序中实现获取全部数据的图文教程

选择文本组件,绑定文本内容

小程序中实现获取全部数据的图文教程

从循环对象里选择name即可

小程序中实现获取全部数据的图文教程

小程序中实现获取全部数据的图文教程

为了让内容好看一点,我们可以给普通容器增加一点内边距

小程序中实现获取全部数据的图文教程

可以增加一点边框的效果

小程序中实现获取全部数据的图文教程

边框我们只保留下边框,我们点击样式代码编辑,输入如下样式

小程序中实现获取全部数据的图文教程

border-bottom:1px solid rgba(0,0,0,0.6)

边框一共有四个方向,分别是top、left、right、bottom,我们是设置了底部边框,这样就好看一点了

总结

有人说低代码只能是拖拽编程,写一些简单的应用,其实大概率是主观论断。拖拽只不过是用来组装界面,后端逻辑还是需要自己实现的。既然前端和后端都可以做,那就没啥干不了的应用,如果感兴趣,照着教程练一练吧,说不定会有新的想法。

(0)
上一篇 2022-11-08 09:30
下一篇 2022-11-08 09:41