在本节中，您将逐步创建一个简单的网页，该网页将在表格中显示从数据库中获取的产品。
在第 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 都可以使用它们的名称访问彼此的数据和状态。