angular api管理_使用Angular和API服务器显示相关表中的数据

angular api管理

Angular是基于Angular JS并扩展其原理的动态Web应用程序的更新框架。 CData API Server使您可以为80多个数据源（包括本地数据库和基于云的数据库）生成REST API。 本文将逐步设置CData API服务器 ，以为QuickBooks Online数据创建基于OData的REST API，并创建一个可以实时访问QuickBooks Online数据的简单单页应用程序（SPA）。

SPA将基于相关的QuickBooks Online表（即：发票和发票行项目）动态构建并填充HTML表格。 在本文逐步介绍大多数代码的同时，您可以下载示例Angular项目以查看完整的源代码并亲自测试功能。

准备开始了吗？ 下载CData API服务器的免费试用版！

设置API服务器

如果尚未这样做，则需要下载CData API Server 。 安装API服务器后，您将需要运行该应用程序，配置该应用程序以连接到您的数据（本文中的说明适用于随附的示例数据库），并配置该应用程序以为任何表创建REST API您希望访问您的SPA。

启用CORS

如果Angular Web应用程序和API服务器位于不同的域中，则Angular将生成跨域请求。 这意味着必须在Angular Web应用程序查询的任何服务器上启用CORS（跨域资源共享）。 我们可以通过导航到API服务器“设置”页面中的“服务器”标签来为API服务器启用CORS。 您将需要调整以下设置：

• 单击复选框以“启用跨域资源共享（CORS）”。
• 单击复选框以“允许所有没有'*'的域”或在Access-Control-Allow-Origin中指定允许连接的域。
• 将Access-Control-Allow-Methods设置为“ GET，PUT，POST，OPTIONS”。
• 将Access-Control-Allow-Header设置为“授权”。
• 单击保存更改。

在线连接到QuickBooks

部署后，通过单击设置->连接并在API Server管理控制台中添加新的连接，提供连接到QuickBooks Online所需的身份验证值和其他连接属性。
QuickBooks Online使用OAuth身份验证标准。 OAuth要求身份验证用户通过浏览器登录。

要使用OAuth进行身份验证，您可以使用嵌入式OAuthClientId，OAuthClientSecret和CallbackURL，也可以通过在Intuit中注册应用程序来获得自己的身份。 您还需要指定CompanyId。
有关使用OAuth的指南，请参见帮助文档的“入门”一章。

配置用户

接下来，创建一个用户以通过API服务器访问您的数据库数据。 您可以在“设置”页面的“用户”选项卡上添加和配置用户。 由于我们仅创建用于查看数据的简单SPA，因此将创建具有只读访问权限的用户。 单击添加，为用户命名，为权限选择GET，然后单击保存更改。

如您在屏幕截图中所见，我们已经为用户配置了读写访问权限。 对于本文，我们将使用关联的authtoken以只读用户身份访问API Server。

访问表

创建用户后，我们准备启用对数据库表的访问。 要启用表，请在“设置”页面的“资源”选项卡上单击“添加资源”按钮。 选择您要访问的数据连接，然后单击下一步。 选择连接后，您可以通过单击表名并单击下一步来开始启用资源。 您将需要一次在一个表中添加资源。 在此示例中，我们启用了所有表。

REST API的样本URL

配置了与数据库的连接，创建了一个用户，并将资源添加到API Server之后，我们现在有了一个基于OData协议的易于访问的REST API，用于这些资源。 在下面，您将看到表列表和访问它们的URL。 有关访问表的信息，您可以导航到API服务器的API页面。 对于URL，您将需要API服务器的地址和端口。 由于我们正在使用Angular，因此我们会将@json参数附加到默认情况下不返回JSON数据的URL的末尾。

表	网址
实体（表）列表	http：// address：port / api.rsc /
表QBO_Invoices的元数据	http：// address：port / api.rsc / QBO_Invoices / $ metadata？@json
QBO_发票数据	http：// address：port / api.rsc / QBO_Invoices

构建单页应用程序与标准OData feed一样，如果您希望限制返回的字段，则可以向查询中添加$ select参数以及其他标准URL参数，例如$ filter，$ orderby，$ skip和$ top。

完成API服务器设置后，我们就可以构建SPA了。 我们将逐步浏览.zip文件中包含的SPA的源文件，并在进行过程时记下任何相关的代码部分。 一些源文件大致基于angular.io的Angular教程。

src / index.html

这是我们SPA的主页，源代码主要由脚本元素组成，以导入必要的Angular库。

src / main.ts

此TypeScript文件引导应用程序。

src / app / app.module.ts

此TypeScript文件创建一个类，其中包括组件和服务的定义，该类将导入必要的模块以创建和运行SPA。

src / app / app-routing.module.ts

此TypeScript文件定义了用于导航SPA内容的路由和路径。

src / app / app.component.css

该文件创建CSS规则集，以修改Web应用程序中的h1和h2元素。

src / app / app.component.ts

此TypeScript文件为我们的SPA创建一个Component并定义模板。 尽管此应用程序很简单，但可以轻松扩展为包括多个路由和组件。

src / app / dashboard.component.css

该文件创建CSS规则集，以修改HTML中的table，th和td元素。

src / app / dashboard.component.html

该文件定义了SPA的仪表板组件的布局。 该模板包括用于选择表和相关表的下拉菜单，用于指示哪些字段是表的外键的下拉菜单，用于显示父表数据HTML表以及用于显示子表数据的另一个HTML表。 。

根据* ngIf指令中的条件启用/禁用不同的部分，并使用* ngFor指令循环遍历返回的数据，并根据对API Server的调用结果动态构建菜单和表。

所有对API Server的调用以及对变量的值分配均在DashboardComponent和AppService类中进行。

表

src / app / app.service.ts

此TypeScript文件构建用于从API服务器检索数据的服务。 在其中，我们具有以下功能：检索表列表，检索特定表的列列表以及从表中检索数据。 我们还有一个类，表示由API服务器返回的表的元数据。

API_Table

API服务器为表返回的元数据包括表的名称，种类和URL。 如果我们决定基于SPA，则仅使用名称字段，但在需要其他信息的情况下传递整个对象。

表

构造函数（）

在构造函数中，我们创建Http类的私有实例，并根据之前创建的用户的用户/身份验证凭据设置Authorization HTTP标头。 然后，我们在HTTP请求中包含此标头。

表

getTables（）

此函数返回表列表。 通过向API服务器的基本URL发出HTTP GET请求（包括Authorization标头），从API服务器检索该列表：http：// localhost：8153 / api.rsc

表

getColumns（）

此函数返回由tableName指定的表的列列表。 由于$ metadata端点默认情况下返回XML格式的数据，因此我们在URL中传递@json参数，以确保我们从API Server获得了JSON数据。 有了JSON数据后，我们就可以向下钻取以检索列名列表。

表

getTableDataByColumns（tableName：string，columnList：string）

此函数返回指定表和列的数据行。 我们在URL中传递tableName，然后将列列表（逗号分隔的字符串）作为$ select URL参数的值传递。 如果没有请求的特定列，我们将不使用$ select URL参数发送请求所有列。

表

getAllTableDataById（tableName：string，idColumn：string，idValue：string）

此函数根据指定的ID列和值返回指定表的数据行。 我们在URL中传递tableName，然后使用ID列和值来请求与主表中特定条目有关的数据。

表

getAllTableDataById（tableName：string，idColumn：string，idValue：string）

此函数根据指定的ID列和值返回指定表的数据行。 我们在URL中传递tableName，然后使用ID列和值来请求与主表中特定条目有关的数据。

表

src / app / dashboard.component.ts

在此TypeScript文件中，我们定义了对SPA中的事件做出React的函数； 在这些函数中，我们从AppService调用函数，并使用结果填充SPA的各个元素。 这些函数非常简单，可以根据需要将值分配给不同的变量。

ngOnInit（）

在此函数中，我们从AppService调用getTables函数。 由于getTables从我们的API Server表查询返回原始数据对象，因此我们只需要将每个结果中的name字段压入可用表的数组中，而不必压入整个对象。

表

tableChanged（）

每当用户从SPA的下拉菜单中选择一个表时，就会调用此函数。 该函数调用API服务器以检索给定表的列列表，该表将填充另一个下拉菜单。 该函数还检索所选表的数据，该数据用于填充HTML表。

表

subTableChanged（）

每当用户从下拉菜单中选择相关表时，就会调用此函数。 该函数调用API服务器以检索给定表的列列表，该表将填充另一个下拉菜单。

表

rowClicked（keyValue：字符串）

每当单击主表中的一行数据时，就会调用此函数。 它捕获行的ID值（基于主表的选定列），并调用API Server，以根据选择的ID从相关表中检索数据。 然后，将所得的数据用于填充HTML表。

表

运行单页应用程序

配置好数据连接并查看SPA的源文件后，我们现在可以运行单页应用程序了。 您将需要在计算机上安装node.js和npm才能运行SPA。 示例下载中包括一个预先配置的package.json文件。

您可以通过从SPA的根目录下的命令行运行npm install来安装所需的模块。 要启动SPA，只需在同一目录中运行npm start即可。

SPA启动时，您将看到标题和下拉菜单以选择表格。 表列表是从API服务器检索的，包括配置API服务器时作为资源添加的所有表。

选择表格后，将显示列的下拉列表，允许您选择与表格和子表格相关的关键列。

选择主表和键列后，您可以选择相关的子表。

选择子表后，将显示列的下拉列表，允许您选择与表和子表相关的关键列。

选择表和列后，将显示主表中的数据。 您可以单击HTML表中的一行，以从子表中检索与您单击的条目相对应的相关行项目。

免费试用和更多信息

既然您已经看到了在动态网页上连接数据库数据的基本示例，请访问我们的API服务器页面以阅读有关API服务器的更多信息并下载API服务器。

开始使用来自本地和基于云的数据库，应用程序和服务（如QuickBooks Online）中的实时数据来构建动态网页。

准备开始了吗？ 下载CData API服务器的免费试用版！

翻译自: https://www.javacodegeeks.com/2019/05/displaying-data-related-tables-using-angular.html

angular api管理