第26步:远程OData服务

最新推荐文章于 2024-08-07 10:09:49 发布

真的是我太天真

最新推荐文章于 2024-08-07 10:09:49 发布

阅读量328

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/#/topic/44062441f3bd4c67a4f665ae362d1109

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

本博客介绍如何从远程OData服务获取数据并将其可视化。通过在组件的描述符文件中配置数据源，利用Northwind OData服务展示了产品数据。然而，由于同源策略限制，实际运行时会出现跨域问题，需要通过CORS解决。博客还提到了在无法运行远程服务时如何使用模拟服务器进行替代。

摘要由CSDN通过智能技术生成

说明

到目前为止，我们已经使用了本地JSON数据，但是现在我们将访问一个真正的OData服务来可视化远程数据。

在实际使用中，数据通常驻留在远程服务器上，并通过OData服务进行访问。我们将向清单添加一个数据源配置，并用公开可用的Northwind OData服务替换invoice模型的JSONModel类型，以可视化远程数据。你会惊讶地发现，要做到这一点，几乎不需要做什么改变!

注意
如果您不能让它运行，也不要太担心，其余步骤也将使用到目前为止使用过的本地JSON数据。在第27步:模拟服务器配置中，您将学习如何模拟后端系统以实现类似的工作场景。但是，您至少应该阅读关于远程OData服务的这一章来了解非本地数据源。

预览

在这里插入图片描述

来自OData发票测试服务的产品现在显示在我们的应用程序中

代码

你可以在演练-第26步查看和下载所有文件。

webapp/manifest.json
在这里插入图片描述

{
	"_version": "1.21.0",
	"sap.app": {
		...
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"invoiceRemote": {
				"uri": "https://services.odata.org/V2/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0"
				}
			}
		}
	},
	"sap.ui": {
		...
	},
	"sap.ui5": {
		...
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
					"supportedLocales": [
						""
					],
					"fallbackLocale": ""
				}
			},
			"invoice": {
				"dataSource": "invoiceRemote"
			}
		},
		"resources": {
		...

在描述符文件的sap.app部分，我们添加了一个数据源配置。使用invoiceRemote，我们指定了一个允许自动模型实例化的配置对象。我们指定了服务的类型(OData)和模型版本(2.0)。在这一步中，我们使用位于 https://services.odata.org/V2/Northwind/Northwind.svc/ 的公开可用的Northwind OData服务。因此，URI指向官方的Northwind OData服务。

注意
为了避免下面描述的跨域问题，典型的过程是在数据源的URI属性中只维护一条路径，例如/V2/Northwind/Northwind.svc/。但是，如果实际的OData服务器位于不同的地址，那么也需要使用代理。

在模型部分，我们替换了invoice模型的内容。当模型在组件初始化期间被自动实例化时，这个键值(invoice)仍然用作模型名。但是，键dataSource的值invoiceRemote是对我们上面指定的数据源部分的引用。此配置允许组件在应用程序启动期间检索此模型的技术信息。

现在，我们的组件根据上面指定的设置自动创建sap.ui.model.odata.v2.ODataModel的实例，并使其作为名为invoice的模型可用。当您使用invoicremote数据源时，ODataModel从真正的Northwind OData服务获取数据。我们从Northwind OData服务收到的发票具有与我们之前使用的JSON数据相同的属性( 除了status属性，该属性在Northwind OData服务中不可用 )。

注意
如果你想在组件上有一个默认的模型，你可以在描述符文件中将模型的名称更改为一个空字符串。可以通过调用组件中的this.getModel来检索自动实例化的模型。在基于组件的应用程序的控制器中，你可以调用this.getView().getModel()来获得自动实例化的模型。为了检索已命名的模型，您必须将描述符文件中定义的模型名传递给getModel，也就是说，在组件中，您将调用this.getModel(“invoice”)来获得在描述符中定义的自动生成的发票模型。

你现在可以试着运行应用程序，看看会发生什么-我们会在控制台看到一个与我们的新配置相关的错误:

在这里插入图片描述

违反谷歌Chrome的同源策略

由于所谓的同源策略，因为请求的服务端点与应用有不同的域/子域、协议或端口，所以浏览器拒绝了AJAX请求。浏览器拒绝直接连接到远程URL出于安全原因。根据您的开发环境，您有不同的选择来克服这个限制。有关更多信息，请参见Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)。