小程序中实现获取全部数据
日常在开发小程序的时候,我们的后端服务可以采用云开发的模式,但是云开发限制每次最多获取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,我们是设置了底部边框,这样就好看一点了
总结
有人说低代码只能是拖拽编程,写一些简单的应用,其实大概率是主观论断。拖拽只不过是用来组装界面,后端逻辑还是需要自己实现的。既然前端和后端都可以做,那就没啥干不了的应用,如果感兴趣,照着教程练一练吧,说不定会有新的想法。
小程序中实现获取全部数据相关推荐
- 小程序中神秘的用户数据
前面 上一篇文章手把手教会你小程序登录鉴权介绍了小程序如何进行登录鉴权,那么一般小程序的用户标识可以使用上文所述微信提供的jscode2session接口来换取,小程序还提供了一个getUserInf ...
- 微信小程序中如何获取用户手机号授权登录
随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务.而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一.因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录. 步骤一 ...
- 如何在微信小程序中授权获取手机号码
小程序获取手机号码 1.获取手机号码前提条件 该小程序为非个人开发者,且完成了认证的小程序开放(不包含海外主体).需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口 ...
- 微信小程序中IOS获取不到时间(年、月)
微信小程序中获取时间戳IOS不兼容 new Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 把"-" ...
- 微信小程序 php读取数据,在微信小程序中如何获取输入数据
这篇文章主要介绍了微信小程序简单实现form表单获取输入数据功能,涉及微信小程序针对form表单的事件绑定及数据获取等相关操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序简单实现form表单获 ...
- 公众号获取用户手机号_小程序中如何获取微信用户绑定的手机号
小程序官方文档中介绍: 获取微信用户绑定的手机号,需先调用wx.login接口. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发. 注 ...
- 微信小程序中处理 获取用户地址的回调
handleChooseAddress () {// 选择用户地址,初次调用该方法会弹出授权窗口,授权信息会被保存到 scope.address 属性中// 如果用户点击的是[取消],scope.ad ...
- 微信小程序——从后台获取数据库数据并在前台显示(前端+后端+数据库)
因为人工测试的时候需要统计数据都在纸上,统计起来很麻烦.所以我想做个小程序来辅助我测试,但我之前没学过小程序,所以就一点一点搞吧.今天这篇主要讲从后台获取数据库数据并在前台显示(类似背单词小程序的点击 ...
- GoEasy在微信小程序中的应用
目录 介绍: 正文: 登录自己的微信公众平台 初始化GoEasy对象 接收消息 发送消息 最后: 介绍: GoEasy作为快速构建web实时通讯体系API之一,能够让websocket变得更简单! 正 ...
最新文章
- mongodb 索引去重_朋友问你 MongoDB 是什么?给他看这篇就好了
- php如何查询数据是否存在,PHP判断数据库中的记录是否存在的方法,php数据库_PHP教程...
- 如何在Android平台下进行Socket通信
- GDCM:gdcm::ByteSwapFilter的测试程序
- cisco 2600的密码破解
- Mac OS 通过配置窗口来连接远程主机
- angular8多选框实现点击整行任意位置<tr>就可以选中多选框
- JavaScript 自执行函数和 jQuery扩展方法
- JVM学习手册(X):查看堆内存使用情况以及排错
- ::在c++中什么意思
- 计算机操作员评分标准,计算机操作员EXCEL操作竞赛样卷与评分标准.doc
- 磨刀不误砍柴工,掌握DEVC++的一些实用技巧
- gnuplot绘图程序中对线型(linetype)、点型(pointtype)、线条宽度(linewidth)、点大小(pointsize)、图样
- 阿龙学堂-中缀-后缀表达式的计算
- 双模sa_NSA/SA双模5G基站才是通信运营商决胜未来的关键!
- 基于eclipse的android项目实战—博学谷(新功能四)签到
- 中华英才网爬虫程序解析(2)-多线程threading模块
- TerraSAR-X雷达遥感卫星
- 【阅读】Extrinsic 6DoF Calibration of 3D LiDAR and Radar
- logisim文件的使用