或：

快速链接：示意图应用路由器配置示例项目文件大赛

亲爱的SAP云平台后台服务的朋友们，大家好。你好你一定想知道为什么我们没有像使用API那样使用它们：从用户界面。你没听见我抱怨吗所以现在是学习如何从用户界面调用后端服务API的时候了像往常一样，我们从最简单的例子开始听起来很有趣它是一个html页面很酷，有高级控制吗？不，只是发短信你称之为用户界面？好的，我们可以使用格式化文本。叹息

让我们从教程开始抱歉，为什么我们需要一个调用REST服务的网页的教程？问题是：REST服务受OAuth保护意味着它需要用户执行OAuth流并获取JWT令牌哦，神秘的奥古斯特…是的我在哪里可以了解它？哦，这里和这里都有很棒的博客谢谢你的提问你欠我一些东西PSST公司那么如何解决这个问题呢？使用App Router那是什么？你可以在这里找到一个很好的教程你欠我的PSSST公司什么是后端服务？哦，是的，谢谢，我忘了默认的短语：本教程是解释详细介绍了SAP云平台后端服务。是的，我欠你…我们可以开始了吗？叹息

目标

在本教程中，我们将学习如何从CloudFoundry中的HTML页面调用受OAuth保护的OData服务（后端服务API）。我们将学习如何克服OAuth2身份验证的问题。很容易，无需自己编码它可以很容易地实现与应用路由器因此，本教程的邮件目标是学习如何配置应用程序路由器以及如何使用它在本教程中，我们将浏览所需的配置文件并详细解释设置。如果你迷路了，看看描述所有相关文件连接的流程图可能会有所帮助我们的目标：这个不错的应用程序，应该能够调用后端服务API：

经验丰富的用户跳到与样本项目文件内容的附录下一篇博客将展示如何使用UI5应用程序实现同样的功能

前提条件

您需要一个正在运行的后端服务API。如果你还没有，大数据开发平台，你可以关注这个博客稍后你可以学习一系列教程

你应该对App Router有一些了解。我已经用简单的例子详细解释了：第1部分、第2部分和第3部分

您应该能够将应用程序部署到Cloud Foundry：这可以通过驾驶舱（见此处）或使用命令行客户端（见此处）完成，这是推荐的方法

节点.js:如果您使用cockpitwebui作为zip文件上传应用程序，那么归档文件需要包含整个内容。在这种情况下，你需要有新产品管理(节点.js)在您的机器上（请参阅此处）如果使用命令行客户端进行部署，则不需要

XSUAA:我们需要一个XSUAA服务实例，它必须包含后端服务所需的作用域。看到这里了吗请参阅附录中的复制粘贴就绪命令，以创建正确配置的实例在下面的示例中，我们使用实例名"XsuaaForHtml"

创建文件夹结构

我们称我们的整个应用程序为"html-to-bs"，因为我们希望以一种舒适的方式从html页面转到后端服务API我们需要一个名为"htmltobs"的项目文件夹，其中包含描述我们的应用程序的清单它包含将要部署的整个应用程序的appfolderappfolder包含App Router的配置文件此外，它还包含webapp文件夹，其中包含我们的UI应用程序在我们的例子中，webapp文件夹只包含一个索引.html代表我们的UI应用程序的文件。

继续并创建此文件夹结构

C:\html\u to\u bs应用文件夹网络应用索引.html包.jsonxs型-应用程序.json清单.yml

在我的文件系统上，看起来是这样的：

接下来的部分将遍历每个配置文件，并详细讨论相关设置

清单

让我们从清单.yml文件，它描述了我们的主要应用程序，它将在SAP云平台、云铸造环境中运行在manifest中，我们定义了一个app name为"html_to_bs"，它在部署后也将用作app URL的前缀

我们定义了一个到XSUAA实例的绑定：

这是必需的，因为我们的app Router将连接到XSUAA以处理OAuth流

注意：如前所述：实例必须包含对后端服务定义的适当范围的外部范围引用。否则您无法从后端服务API

获取与我们的场景相关的数据：在manifest中，我们定义了一个名为"destinations"的环境变量。它包含我们的目的地，应用程序路由器所需的。在我们的示例中，目标指向使用SAP云平台后端服务创建的OData服务的URL。如前所述，此服务受OAuth保护，因此我们将参数"forwardAuthToken"设置为true这很重要，否则服务调用将失败。

注意：目的地的名称必须与应用程序路由器配置文件中稍后使用的名称完全相同。在我们的示例中，我们称之为"env\u destination\u bs\u api"完整的文件内容见附录

应用路由器

应用路由器是SAP提供的组件，我们不需要自己写任何东西。从技术上讲，这是一个节点.js可从npm注册表下载的模块因此，我们只需要在包.json文件

包.json

与往常一样，在我们的示例中，我们只指定最小设置。万一包.json，我们有"依赖项"和"开始脚本"（要更新依赖版本：npm install–save）