在本节中,您将逐步创建一个简单的网页,该网页将在表格中显示从数据库中获取的产品。
在第 1 部分结束时,您将熟悉:
- 创建组件
- 连接数据库并编写 SQL 查询
- 配置组件以呈现查询结果
添加您的第一个组件 #
现在,让我们按照以下步骤在页面中添加一个表格组件:
- 导航到ProductListPage页面
- 点击组件旁边的
+
- 找到表格组件
- 将其拖放到右侧的画布上
这将在页面上创建一个新的表格:
让我们说明一下正在发生的事情:
- 添加新的表格组件后,您应该会看到一些预填充的数据。
- 一个名为
Table1
的浮动窗口在表格右侧打开。这是组件的属性窗口,在这里,您可以配置组件的属性。 - 窗口中的数据属性定义了将在表格中显示的数据。
- 默认情况下,表的名称设置为
Table1
。只需双击它即可将其重命名。现在让我们将其更改为Products_Table
.
了解表格组件 #
现在让我们花点时间了解一下数组是如何映射到表的列及其值的:
- 首先,清除数据窗口里的预填充数据。
- 复制粘贴以下 JSON 数据。
- 上述步骤将更新现有的预填充数据。您将看到更新后的表格。
- 您可以更改值,以快速测试它,我们将数组中的第一个对象的键
one
的值从1
修改为ii
。 - 表格中的第一行第一列现在显示为
ii
。 - 单击右上角的提交按钮进行预览。
[
{ "one": "1", "two": "2" },
{ "one": "I", "two": "II" }
]
您应该看到您的表格的值,如下图所示:
让我们回到数据窗口,当您将光标放在数据字段中时,您会看到一个浮动窗口:
- 数据结构:此字段指定属性字段所期望的数据类型。对于表格组件,预期数据类型是
Array<Object>
。 - 解析值:此字段实时显示该字段的输入计算结果。当您编写 JavaScript 代码并且想要检查它是否按预期计算时,这会派上用场。
至此,您已成功在表格中显示静态数据。下面,我们将显示来自模拟数据库的产品数据。
编写你的第一个查询 #
现在,让我们按照以下步骤使用模拟数据库显示所有项:
- 首先,让我们单击
数据源
旁边的+
图标。 - 选择MySQL并将数据源重命名为
Mysql Mock DB
。
Connection Mode: Read / Write
Host Address: demomovies.c.methodot.com
Port: 33060
Database Name: fakeapi
User: root
Password: password
接下来,单击新建查询
按钮,编写查询语句。通过双击现有查询重命名为ProductsQuery
。
SELECT id, productName, category, mrp FROM products ORDER BY id;
查询会在创建后立即保存,您无需显式保存。任何 API、组件以及您对应用程序的任何实体所做的任何更改都是如此。
访问组件的查询结果 #
下一步是在表格组件中显示查询结果,按照以下步骤执行操作:
- 返回
ProductListPage
并选择Products_Table
- 打开
Product_Table
属性,并将以下语句复制到数据中
{{ProductsQuery.data}}
在这里,我们使用查询名称访问整个查询对象:ProductsQuery
,该.data
属性允许我们附加数据。
现在,您应该看到您的表格显示了ProductsQuery
的结果。
下面是截图:
变量和名称 #
在前面的部分中,我们使用名称来访问组件和查询。例如,您通过访问查询名称的属性来访问查询的结果。从这个意义上说,可以将组件、API 和查询视为具有名称的变量。类似于其他编程语言中的变量:
- 它们代表一个对象,无论是组件、API 对象还是查询对象
- 它们支持一组方法
- 他们有一个范围,它们只能从其父页面中访问
- 页面中的所有名称都必须是唯一的,无论是组件名称、查询名称还是 API 名称。
正如您将在下一节中看到的,这也是可能的,即组件的状态也可以通过查询访问。此外,页面的所有构建块 - 组件、数据库查询和 API 都可以使用它们的名称访问彼此的数据和状态。