连接到 MySQL 数据库 #
我们支持各种数据源，并允许您在这些数据源上编写查询，以从应用程序执行不同的操作。在本教程中，您将连接到具有以下表的 MySQL 数据源：
- Business Table: 这包含了从Yelp数据中筛选出来的一些企业的详细信息。
- Review Table: 此表包含与业务表中列出的业务相关联的评论。
现在，让我们使用这个模拟数据源，按照以下步骤为应用程序获取所有数据：
- 首先，单击
数据源旁边的+图标。 - 接下来，您将看到可以连接到的数据源选项的列表。
- 选择MySQL并将数据源重命名为
Mysql Mock DB。 - 接下来，使用以下信息连接数据源。
Connection Mode: Read / Write
Host Address: demomovies.c.methodot.com
Port: 33060
Database Name: yelp
User: root
Password: password要验证此数据源是否有效，您可以单击右下角的测试按钮。您应该会看到一个显示连接状态的弹出窗口。
编写第一个查询 #
数据源连接成功；现在，让我们编写一个简单的数据库查询来从业务表中获取所有业务。
请按照以下步骤进行操作：
- 首先，单击
数据源旁边的+图标。 - 在选项卡下找到已创建的
Mysql Mock DB数据源，然后单击新建查询。 - 这将创建一个新的数据库查询，您可以在整个页面中使用它。
- 将该查询命名为
getBusinessData，然后单击Select。 - 在查询输入框中使用以下查询语句获取数据：
select * from yelp_business;要运行此查询，请单击右上角的运行按钮。
就像这样，我们可以在下面的响应窗口中看到来自数据库查询的响应。
如下图：
下面，让我们将这些数据绑定到强大的表格组件。
将查询绑定到组件 #
在上一节中，您已经创建了一个名为getBusinessData的数据库查询。让我们按照以下步骤将查询绑定到表格组件上：
- 单击资源管理器中
组件旁边的+图标。 - 您将在这里找到一组很棒的UI组件，您可以使用它们来构建应用程序。
- 将
表格拖放到画布上。
现在，只要将表格组件放到画布上，您就会发现一个新的浮动窗口。您可以将其称为组件属性窗口。在这里，您可以找到表格和自定义属性的所有配置。
下面的图片是表格组件及其属性窗口：
现在，让我们看一下表格的属性：
数据: 要向表格中添加数据，我们可以更新属性窗口的数据属性。默认情况下，它有一些初始配置；您可以根据自己的喜好进行更新。但还要确保它只接受数组数据类型。
数据列: 在数据列属性下，您可以配置所有列数据。您可以单击齿轮图标并单独设置列数据类型。
这是表格组件所需的两个基本属性。但是，许多其他属性允许您添加不同的操作和自定义UI。
现在，在表数据属性中，让我们绑定来自数据库查询的响应。为此，您必须使用大括号操作符。
现在将以下内容复制到表格的数据属性中：
{{ getBusinessData.data }}当您将其复制到表数据时，您应该会看到数据神奇地填充到表中。然后，根据您的偏好，您可以自定义列名称，并使用其他属性设置表格组件的样式。下面是表格的截图：
但这里刚刚发生了什么？
在这里，我们使用查询名称getBusinessData访问整个查询对象，并且.data允许我们附加数据。
将表格的数据设置为{{ getBusinessData.data }}还可以确保无论何时加载页面，getBusinessData都会自动运行。但是，您可以通过切换getBusinessData的设置选项卡上的页面加载完成后执行字段来更改此默认行为。
变量和名称 #
在前面的部分中，我们使用了名称来访问组件和查询。例如，您通过访问查询名称的属性来访问查询的结果。从这个意义上说，可以将组件、API和数据库查询视为具有名称的变量。类似于其他编程语言中的变量：
- 它们代表一个对象，无论是组件、API 对象还是查询对象
- 它们支持一组方法
- 他们有一个范围； 它们只能从其父页面中访问
- 页面中的所有名称都必须是唯一的，包括组件名称、查询名称或API名称。
正如您将在下一节中看到的，与此相反的情况也是可能的，查询也可以访问组件的状态。此外，页面的所有构建块（组件、数据库查询和API）都可以使用其名称访问彼此的数据或状态。