优维低代码:对接后台数据 !

EASYOPS_youwei · · 1166 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

在上⼀ 篇中(点我查看上一篇),我们新建了第⼀ 个微应⽤,实现了⼀ 个纯静态的⾸⻚ 。

下⾯,我们尝试对接后台接⼝,动态获取平台上所有⽤户的基本信息,并在表格中展示。

#配置Context获取后台数据

Context(上下⽂数据)是⽤于在多个构件中交换数据的对象, 简单地理解就是数据源。

按来源划分,Context 可以分为 Value(静态常量)和 从Provider获取(从接⼝动态获取)两种, 这个例⼦⾥我们将使⽤第⼆种。

我们可以为每⼀ 个⻚⾯设置 Context,所有构件都可以使⽤配置好的 Context 来作为数据源。

点击左侧⼯具栏的数据视图,点击添加数据。

按下图所示,添加⼀ 个叫 userList 的上下⽂数据, 设置所使⽤的 Provider 和 参数 Args.

Provider 顾名思义, 即数据的 提供者, 是专⻔承载 对接后台接⼝ 能⼒的⼀ 种特殊构件 。在常⻅ 的开发模式下, 我们会将后台接⼝封装成sdk或lib, ⽽ Provider 就是 Next Builder 基于后台接⼝ 封装的。

平台内置了 CMDB 、OSS对象存储 、云服务等⼀ 系列开箱即⽤的 Provider, 你可以在开发者中⼼⾥看到所有 Provider 的列表和⽂档 。这⾥使⽤的providers-of-user-service.user-admin-api-search-all-users-info 也可以看到。

除了已有的 Provider,我们还可以⾃由地对接第三⽅数据。

useProvider:

args:

#使⽤Context渲染构件

搜索并拖动表格构件 brick-table到画布的content 插槽。
修改表格构件的columns 属性,定义出表格的列。这⾥我们需要id 、昵称、电话、email 、创建时间 、状态列。

修改表格构件的dataSource 属性,使⽤刚才声明的userList作为数据源。

修改表格构件的 shouldUpdateUrlParams 属性为 false,表示翻⻚时不更新 URL 参数,采⽤前端 分⻚/排序。

<% CTX.userList %> 是Next Builder 使⽤的语法,称为Evaluate Placeholders 求值占位符,也称为表达式。

求值占位符提供了⼀ 种便利的⽅式,使得编排者可以灵活地在路由、构件的配置中使⽤Context数据、URL参数、构件事件、应⽤配置等信息。

构建并推送后,访问⽤户列表⻚的URL,例如 http://{{服务器IP}}/next/your-first-app/users .

成功!顺利对接后台接⼝,获取⽤户数据并动态渲染在表格中进⾏展示!


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1166 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传