javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 小程序获取全部数据

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

作者:低代码布道师

最近在开发中遇到了一个需求,需要获取小程序的全部数据,所以这篇文章主要给大家介绍了关于小程序中实现获取全部数据的相关资料,需要的朋友可以参考下

日常在开发小程序的时候,我们的后端服务可以采用云开发的模式,但是云开发限制每次最多获取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,我们是设置了底部边框,这样就好看一点了

总结

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

您可能感兴趣的文章:
阅读全文