构建简单的 UI

在本节中,您将逐步创建一个简单的网页,该网页将在表格中显示从数据库中获取的产品。

在第 1 部分结束时,您将熟悉:

  • 创建组件
  • 连接数据库并编写 SQL 查询
  • 配置组件以呈现查询结果

添加您的第一个组件 #

现在,让我们按照以下步骤在页面中添加一个表格组件:

  1. 导航到ProductListPage页面
  2. 点击组件旁边的+
  3. 找到表格组件
  4. 将其拖放到右侧的画布上

这将在页面上创建一个新的表格:

image-20220421144102853

让我们说明一下正在发生的事情:

  • 添加新的表格组件后,您应该会看到一些预填充的数据。
  • 一个名为Table1的浮动窗口在表格右侧打开。这是组件的属性窗口,在这里,您可以配置组件的属性。
  • 窗口中的数据属性定义了将在表格中显示的数据。
  • 默认情况下,表的名称设置为Table1。只需双击它即可将其重命名。现在让我们将其更改为Products_Table.

了解表格组件 #

现在让我们花点时间了解一下数组是如何映射到表的列及其值的:

  1. 首先,清除数据窗口里的预填充数据。
  2. 复制粘贴以下 JSON 数据。
  3. 上述步骤将更新现有的预填充数据。您将看到更新后的表格。
  4. 您可以更改值,以快速测试它,我们将数组中的第一个对象的键 one 的值从1修改为ii
  5. 表格中的第一行第一列现在显示为ii
  6. 单击右上角的提交按钮进行预览。
[
  { "one": "1", "two": "2" },
  { "one": "I", "two": "II" }
]

您应该看到您的表格的值,如下图所示:

image-20220421145537752

让我们回到数据窗口,当您将光标放在数据字段中时,您会看到一个浮动窗口:

  1. 数据结构:此字段指定属性字段所期望的数据类型。对于表格组件,预期数据类型是Array<Object>
  2. 解析值:此字段实时显示该字段的输入计算结果。当您编写 JavaScript 代码并且想要检查它是否按预期计算时,这会派上用场。

至此,您已成功在表格中显示静态数据。下面,我们将显示来自模拟数据库的产品数据。

编写你的第一个查询 #

现在,让我们按照以下步骤使用模拟数据库显示所有项:

  1. 首先,让我们单击数据源旁边的+图标。
  2. 选择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、组件以及您对应用程序的任何实体所做的任何更改都是如此。

image-20220421155716761

访问组件的查询结果 #

下一步是在表格组件中显示查询结果,按照以下步骤执行操作:

  1. 返回ProductListPage并选择Products_Table
  2. 打开Product_Table属性,并将以下语句复制到数据中
{{ProductsQuery.data}}

在这里,我们使用查询名称访问整个查询对象:ProductsQuery,该.data属性允许我们附加数据。

现在,您应该看到您的表格显示了ProductsQuery的结果。

下面是截图:

image-20220421160555120

变量和名称 #

在前面的部分中,我们使用名称来访问组件和查询。例如,您通过访问查询名称的属性来访问查询的结果。从这个意义上说,可以将组件、API 和查询视为具有名称的变量。类似于其他编程语言中的变量:

  1. 它们代表一个对象,无论是组件、API 对象还是查询对象
  2. 它们支持一组方法
  3. 他们有一个范围,它们只能从其父页面中访问
  4. 页面中的所有名称都必须是唯一的,无论是组件名称、查询名称还是 API 名称。

正如您将在下一节中看到的,这也是可能的,即组件的状态也可以通过查询访问。此外,页面的所有构建块 - 组件、数据库查询和 API 都可以使用它们的名称访问彼此的数据和状态。

发表评论

您的电子邮箱地址不会被公开。