微搭低代码入门06分页查询

目录

  • 1 创建自定义代码
  • 2 编写分页代码
  • 3 创建页面
  • 4 创建变量
  • 5 配置数据列表
  • 总结

我们在数据模型章节介绍了微搭后端服务编写的三种方式,包括Http请求、自定义代码、云函数。本篇我们详细讲解一下利用自定义代码开发分页查询的功能。

1 创建自定义代码

打开控制台,点击APIs,点击+号创建
在这里插入图片描述
选择自定义代码
在这里插入图片描述
输入名称
在这里插入图片描述
点击编辑API方法,进入方法的创建
在这里插入图片描述
默认会生成一个代码模板

/**
* 使用 npm 包 node-fetch 发送http请求, 详细使用文档可以参考
*  https://github.com/node-fetch/node-fetch
*/
const fetch = require('node-fetch');

module.exports = async function (params, context) {
  // 这里是方法入参
  console.log(params);

/**
 * 可以在这里编写业务逻辑,例如:
 * 1. 使用 node-fetch 通过 HTTP 方式请求外部数据,并对获取的数据进行加工;
 * 2. 使用 context.database API 来直接操作云开发云数据库;
 * 3. 使用 context.callModel 来操作其他数据模型数据;
 * 4. 使用 context.callConnector 来使用API;
 * 5. 使用 context.app.callFunction 来调用同环境的云开发云函数;
 */
  const response = await fetch(`https://reqres.in/api/users?page=${params.page}&per_page=${params.per_page}`);
  const result = await response.json();

  // 这里返回数据,和出参结构映射
  return result;
};

自定义代码只能使用nodejs编写,第一行require是引入了自定义代码的内置包,用来获取网络请求

const fetch = require('node-fetch');

具体的逻辑要写在给定的大括号里,这里module.exports是nodejs导出的语法,这个表示等号后边的函数要默认导出给微搭调用

方法的话有两个入参,分别是params和context,params对应我们自定义代码调用时候传入的参数,context表示运行时环境,里边有很多对象、方法可供我们使用,比如我们这个案例是演示分页方法,我们使用callModel来编写代码

代码执行完毕需要返回出参,我们这里用return语句进行返回,返回的出参必须是JSON对象,否则代码执行的时候会报错

2 编写分页代码

了解了自定义代码的结构后,我们就来实现一下分页逻辑,在代码中输入如下

module.exports = async function (params, context) {
  // 这里是方法入参
  console.log(params);

/**
 * 可以在这里编写业务逻辑,例如:
 * 1. 使用 node-fetch 通过 HTTP 方式请求外部数据,并对获取的数据进行加工;
 * 2. 使用 context.database API 来直接操作云开发云数据库;
 * 3. 使用 context.callModel 来操作其他数据模型数据;
 * 4. 使用 context.callConnector 来使用API;
 * 5. 使用 context.app.callFunction 来调用同环境的云开发云函数;
 */
  const result = await context.callModel({
    name: 'cpxx_qbvuq9h', // 数据模型标识,可以前往「数据源 - 数据模型」列表页查看
    methodName: 'wedaGetRecords', // 数据模型方法标识,支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法
    params: {
      pageNo:params.pageNo,
      pageSize:params.pageSize
    }, // 数据模型方法的入参
  });


  // 这里返回数据,和出参结构映射
  return result;
};

这里的name要从数据模型的基本属性中粘贴
在这里插入图片描述
分页查询需要传入每页大小和页码,我们在params里进行传入

代码写好之后需要手动添加入参
在这里插入图片描述
添加好之后就可以点击方法测试进行测试了
在这里插入图片描述
在这里插入图片描述
提交参数里,因为我们的页码和每页大小都是数字,所以先可以都写为1

点击运行测试就可以看到执行的结果,点击出参自动映射,完成出参的编写
在这里插入图片描述

3 创建页面

AIP写好之后就可以开发功能了,先创建一个分页查询的页面
在这里插入图片描述

4 创建变量

在代码区点击新建
在这里插入图片描述
选择新建外部API查询
在这里插入图片描述
选择我们刚刚创建的API
在这里插入图片描述

5 配置数据列表

添加数据列表组件,切换到fx表达式,绑定我们的变量
在这里插入图片描述

总结

本篇我们讲解了一下自定义代码的使用,随着应用开发的深入,后端的代码还是需要自己编写的,掌握编写的思路就可以自由的实现出自己想要的逻辑来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/599745.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Adaboost (BiLSTM-Adaboost ELM-Adaboost RF--Adaboost RVM-Adaboost SVM-Adaboost)

Adaboost Adaboost(多输入单输出matlab)代码获取戳此处代码获取戳此处 Adaboost是一种迭代式集成学习算法,全称为“Adaptive Boosting”,即自适应增强。该算法的核心思想是针对同一个训练集训练不同的分类器(弱分类器&…

win10禁止自动更新的终极方法

添加注册表值 1.运行,输入regedit 2.打开注册表编辑器依次进入以下路径“计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings”。 3.在Settings项中,新建DWORD(32位)值(D),重命名为以下命名“Fl…

《ESP8266通信指南》12-Lua 固件烧录

往期 《ESP8266通信指南》11-Lua开发环境配置-CSDN博客 《ESP8266通信指南》10-MQTT通信(Arduino开发)-CSDN博客 《ESP8266通信指南》9-TCP通信(Arudino开发)-CSDN博客 《ESP8266通信指南》8-连接WIFI(Arduino开发…

【C语言】用数组和函数实现扫雷游戏

用数组和函数实现扫雷游戏 游戏界面&#xff1a; 代码如下&#xff1a; game.h #pragma once #include <stdio.h> #include <stdlib.h> #include <time.h> #define EASY_COUNT 10 #define ROW 9 #define COL 9 #define ROWS ROW2 #define COLS COL2 //初始…

PXE批量安装

系统装机的三种引导方式 u盘光盘网络装机 光盘&#xff1a; 1.类似于usb模式 2.刻录模式 系统安装过程 加载boot loader Boot Loader 是在操作系统内核运行之前运行的一段小程序。通过这段小程序&#xff0c;我们可以初始化硬件设备、建立内存空间的映射图&#xff0c;从…

jmeter分布式集群压测

目的&#xff1a;通过多台机器同时运行 性能压测 脚本&#xff0c;模拟更好的并发压力 简单点&#xff1a;就是一个人&#xff08;控制机&#xff09;做一个项目的时候&#xff0c;压力有点大&#xff0c;会导致结果不理想&#xff0c;这时候找几个人&#xff08;执行机&#x…

java10基础(this super关键字 重写 final关键字 多态 抽象类)

目录 一. this和super关键字 1. this关键字 2. super关键字 二. 重写 三. final关键字 四. 多态 五. 抽象类 1. 抽象方法 2. 抽象类 3. 面向抽象设计 一. this和super关键字 1. this关键字 this 当前对象的引用 this.属性 this.方法名() this() -- 调用构造函数 …

电源功率模组: 完整的设计和验证流程解决四个维度的设计挑战

概述 电动汽车、新能源、光伏、风电等领域广泛使用高功率开关电源功率模组。IGBT和MOSFET是模组中常用器件。本文讨论这些技术&#xff0c;以及为实现高达1700伏特电压、1600安培电流、温度稳定和低电磁辐射的复杂指标带来的设计挑战。本文也总结今天的设计方法和优缺点。最后…

Java毕业设计 基于SpringBoot vue企业信息管理系统

Java毕业设计 基于SpringBoot vue企业信息管理系统 SpringBoot 企业信息管理系统 功能介绍 员工&#xff1a;登录 个人中心 修改密码 个人信息 会议管理 公告管理 个人计划管理 通讯录管理 外出登记管理 请假管理 上下班打卡管理 管理员&#xff1a;登录 个人中心 修改密码 …

跨越语言界限,多语言盲盒小程序带你领略全球风情

在全球化的今天&#xff0c;我们生活在一个多元文化的世界中&#xff0c;不同的语言、风俗、习惯共同构成了这个五彩斑斓的地球村。为了让每个人都能轻松体验到世界各地的独特风情&#xff0c;一款创新的多语言盲盒小程序应运而生&#xff0c;它跨越了语言的界限&#xff0c;让…

【linux-IMX6ULL中断配置流程】

目录 1. Cortex-A7和GIC中断概述1. 1 Cortex-A7中断系统&#xff1a;1. 2 GIC中断控制器简介&#xff1a; 2. 中断配置概述3. 底层中断文件配置3.1 对启动文件.s的配置思路3.2 对中断函数配置思路 4. 上层中断配置流程 1. Cortex-A7和GIC中断概述 学习IMX6UL的中断处理系统&…

页面嵌套,界面套娃,除了用iframe,还有其他方式吗?

UIOTOS可以了解下&#xff0c;uiotos.net&#xff0c;通过连线来代替脚本逻辑开发&#xff0c;复杂的交互界面&#xff0c;通过页面嵌套轻松解决&#xff0c;是个很新颖的思路&#xff0c;前端零代码&#xff01; 蓝图连线尤其是独创的页面嵌套和属性继承技术&#xff0c;好家…

独有病眼花,春风吹不落。 (二维坐标压缩成一个点,并查集)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 3 8 1 1 D 1 1 R 1 2 D 2 1 D 2 2 R 3 1 R 3 2 R 2 3 D 输出 8 思路&#xff1a; 根据题意&#xff0c;要求连接线段后&#xff0c;操作多少次&#xff0c;连接的线段闭合&…

javaweb学习笔记1

1、基本概念 1.1、前言 web开发&#xff1a; web&#xff0c;网页的意思&#xff0c;www.baidu.com 静态web html,css 提供给所有人看的数据始终不会发生变化&#xff01; 动态web 淘宝&#xff0c;几乎是所有的网站&#xff1b; 提供给所有人看的数据始终会发生变化&…

00后设计师如何通过咸鱼接单实现副业月入过万?

大家好&#xff0c;我是一个00后&#xff0c;拥有6年设计经验的平面/包装/品牌设计师。在裸辞探索自由职业的过程中&#xff0c;误打误撞地通过咸鱼接单做副业&#xff0c;首月收入竟然超过了万元&#xff01;在这里&#xff0c;我将分享具体的实操经验、心得体会以及一些额外的…

c++游戏小技巧16:实例1(地牢生成算法)

1.前言 (头图) &#xff08;其实最开始是想写恶魔轮盘的&#xff0c;但没想到它竟然更新了&#xff09; &#xff08;等我有时间在更&#xff0c;最近很忙&#xff0c;玩第五玩的&#xff09; 想法来源&#xff1a;房间和迷宫&#xff1a;一个地牢生成算法https://indienova…

【牛客】值周

原题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 差分。 因为l<100000000,所以数组开1e8。 唯一需要注意的点就是前面给b[0]单独赋值为1&#xff08;因为如果在循环中给b[0]赋值&…

MIT加州理工等革命性KAN破记录,发现数学定理碾压DeepMind!KAN论文解读

KAN的数学原理 如果f是有界域上的多元连续函数&#xff0c;那么f可以被写成关于单个变量和加法二元操作的连续函数的有限组合。更具体地说&#xff0c;对于光滑函数f&#xff1a;[0, 1]ⁿ → R&#xff0c;有 f ( x ) f ( x 1 , … , x n ) ∑ q 1 2 n 1 Φ q ∑ p 1 n …

解决Pyppeteer下载chromium慢或者失败的问题[INFO] Starting Chromium download.

文章目录 1.进入网址2.选择上面对应自己系统的文件夹进去3. 然后找到自己的python环境中的site-packages中pyppeteer中的chromium_downloader.py文件并打开 在首次使用Pyppeteer时需要下载chromium 1.进入网址 https://registry.npmmirror.com/binary.html?pathchromium-bro…

贪心算法应用例题

最优装载问题 #include <stdio.h> #include <algorithm>//排序int main() {int data[] { 8,20,5,80,3,420,14,330,70 };//物体重量int max 500;//船容最大总重量int count sizeof(data) / sizeof(data[0]);//物体数量std::sort(data, data count);//排序,排完数…