Zion无代码,数据的读取和显示,无代码怎么调用后端api?

yumo66611小时前技术文章5

阅读本篇前,建议先熟悉《基本操作》,点击链接访问
https://www.yuque.com/functorz_doc/study_path/vmu0vapgqfiu5opu?singleDoc#

数据的读取

数据存在哪里?

在互联网上看到的那些文字、图片、视频、地图等其实都是我们所说的数据。

Tips:

常见的数据类型文本、整数、日期、时间、文件、地理位置、图片、视频等。

在 Zion 中数据可以存在【本地】也可以存在【远程】数据库中。

本地

以下方式是将数据存在【本地】:

  • 直接在输入框中输入的文字
  • 直接上传的图片

远程

被存在【远程】数据库中的数据,读取后可以绑定到对应组件上进行显示。

向【远程】数据库中存储数据需要【数据表】,【数据表】可以在【数据模型】中进行创建。

Tips:

【数据表】的新建和更新需要预览才能生成。

之后就能向【远程】数据库中上传你需要存储的数据。

Tips:

如何辨别数据需要存在哪儿?

【本地】用于存储【静态数据】,就是通常不需要发生变化的数据。

例如:按钮的提示文字、页面背景图片、页面标题、LOGO

【远程】用于存储【动态数据】,时常发生变化的数据。

例如:多张商品详情图、商品详情、商品价格


如何读取【远程】数据库中的数据

在Zion中,可以读取到【远程】数据的方式有

  1. 页面的【远程数据】

【远程数据】可以获取单条数据,也可以获取多条数据。

    1. 单条数据

当将【限额】等于1时,就只向【远程】数据库中读取单条数据。

    1. 多条数据

当将【限额】关闭后,每次请求可以读取多条符合条件的数据。

  1. 列表类组件

列表、选择视图、横向列表、数据选择输入框 这四个组件是 Zion 中的列表类组件,它们可以用来获取多条数据。

Tips:

这当中提到的多条数据,实际上就是我们常说的数组。

如何读取指定的数据

大部分时候,我们并不需要【数据表】中的全部数据,而是会筛选出一些数据进行显示。

这里的常见方式有:过滤、去重、排序。

举个例子:

在excel表中存放了「口红」、「粉底」、「眼影」、「腮红」四个分类的美妆分类,当前只需要显示「口红」类的商品。需要以「分类」等于「口红」作为过滤条件,就会读取所有分类是「口红」的数据。

在 Zion 中想读取指定的数据也需要进行过滤操作,通过添加【过滤条件】来得到指定的数据。

过滤有很多方式,具体可以参考【过滤专讲】

数据读取失败的常见情况

  • 过滤条件设置错误

详见【过滤专讲】(后期更新)

  • 数据模型没有生成

修改数据模型后,没有更新【远程】数据库,导致【远程】数据库中的【数据表】未生成对应的数据存储字段,会导致绑定失败。

  • 算力溢出(50个dau)

不同项目所提供的算力不同,以免费版为例免费项目每秒请求数约为5,当超过这个请求数后,数据读取将会排队。当你项目的活跃用户数量增多时,为了保证正常运行即时购买更高级的版本。

  • 网络延迟

当网络环境不好,出现网络延迟现象,会出现请求数据需要经过很长时间才能返回或者请求失败的情况。

数据的显示

不用担心!不管用什么显示方式,都不会改变数据源

如何让组件显示对应数据

需要呈现的数据类型不同,就需要由不同的组件来进行显示。

例如:文字类数据,绑定到【文字】组件;图片类数据,则绑定到【图片】组件;

不匹配的数据类型将无法进行绑定。

Tips:

  • 【本地数据】和【远程数据】操作区别。

【本地数据】可以直接在 Zion 编辑器的右边属性栏中进行数据输入

【远程数据】数据存在【后台】数据库中,在 Zion 编辑器中需通过点击【+】引用对应的数据。

本地

【本地】数据在右侧属性栏中输入后在 Zion 编辑器中可以直接显示

但【列表类组件】在绑定本地数据时,依然会显示为【item】。

远程

【数据库数据】可以获取单条数据,也可以获取多条数据。

  1. 单条数据

当只获取单条记录时,可以显示这条记录里所有记录内容

  1. 多条数据

当将【限额】关闭后,每次请求可以读取多条符合条件的数据。

这时由于存在多条数据,无法得知具体要显示哪条数据中的什么内容,因此只能显示获取到数据的聚合数据(count、max、min、sum、avg)。

Tips:

【远程数据】获取的数据可以绑定在任意当前页面的任意图层的组件中。

当你需要获取多条数据,又想显示每条数据中的详细内容时,就需要使用列表类组件。

  • 列表类组件

当需要获取多条数据,并让这些数据都以相同的样式进行呈现。

Tips:

列表类组件获取的数据,只能在该组件内部的各图层中进行使用。

【列表项数据】就是取出多条数据中的一条,index代表它的的排序,从0开始计算。

本地+远程

存储在本地的数据和远程读取的数据可以搭配使用。

举个例子:

在界面上显示商品的价格,显示格式为【价格:xxx】

【价格:】是固定的数据(静态数据),【xxx】是不同商品的价格(动态数据)

特殊例子:

当列表绑定的数据表在【远程】数据库中还没添加数据,并在列表容器中添加了一些静态数据,这时进行预览,列表将不会显示任何数据。因为这时列表并没有读取到任何数据也就无法显示。

例如:列表组件要展示美妆商品,在列表容器中添加了【名称】、【价格】这些文字,但是在【远程】数据库中还未添加数据记录。这是点击【预览】就看不到任何数据。

Tips:

  • 【本地数据】和【远程数据】显示区别。

【本地数据】绑定后,在 Zion 编辑器中可以直接显示

【远程数据】绑定后,在 Zion 编辑器中媒体数据(图片、视频、文件))不会直接显示对应内容;非媒体类型数据显示的为对应数据名称。


数据样式调整

右边属性栏

选中组件后可在右边属性栏的【样式】选项卡下,调整数据的显示样式。

例如:文字的大小粗细、图片的裁切方式。

数据格式调整

以下数据在选择之后可以进行【格式】的选择:

  • 日期
    • 当前日期时间(时间戳)
    • 当前日期
  • 时间
  • 地理距离
返回列表

上一篇:Excel做网页 学生成绩网上查

没有最新的文章了...

相关文章

抓取网页源代码工具测度的方法(在线抓取网页源码)

小编今天给大家分享一个非常实用的工具——抓取网页源代码测度工具。相信大家在日常的网络使用中,经常会遇到需要获取网页源代码的情况。那么这个工具就能帮助我们快速、准确地抓取所需的网页源代码,让我们更加便捷...

[Jsoup] HTML解析器,轻松获取网页内容

Jsoup简介jsoup 是一款Java的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据...

防止学生查看答案,竟然让Chrome禁止查看源码功能

Chrome现在是很多人的主力浏览器,用户多了需求也会很多。Chrome每天都会收到很多意见和功能需求。然而有一个需求很奇怪,要求Chrome禁止查看网页源码的功能。这是怎么回事呢?1.问题背景我们都...

网页内容无法复制,怎么才能识别成文字?

现在我们在网上搜索资料,大部分都是只能查看,想要下载需要收费,直接复制也被限制,那么有什么方法可以把这样的网页资料直接识别成文字到Word文档中呢?方法1:查看源代码在需要复制的页面处右击,选择“查看...

Excel做网页 学生成绩网上查

本文介绍一个由Excel 2003生成成绩网页的实例,其人机交互性和信息保密性都很强。该网页实现的效果是:在“请输入你的标识码”处输入学生的标识码,按回车键或单击空白处,这个学生的各种信息就会一目了然...