UI5-文档-4.26-(Optional) Remote OData Service

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

用可公开获得的Northwind OData服务显示并替换发票模型的JSONModel类型，以可视化远程数据。您将会惊讶地发现，要实现这一点，几乎不需要做什么更改!

请注意：这一步是可选的。如果无法使其工作，不要太担心，其余步骤也将处理到目前为止使用的本地JSON数据。

Preview

Products from the OData invoices test service are now shown within our app

Coding

You can view and download all files at Walkthrough - Step 26.

webapp/manifest.json

{
  "_version": "1.12.0",
  "sap.app": {
        ...
        "ach": "CA-UI5-DOC",
        "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"
               }
          },
          "invoice": {
               "dataSource":"invoiceRemote"
          }
        }
  }
}

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

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

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

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

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

在谷歌Chrome中违反同源策略

由于所谓的同源策略，如果服务端点具有与应用程序不同的域/子域、协议或端口，浏览器将拒绝对服务端点的AJAX请求。出于安全原因，浏览器拒绝直接连接到远程URL。根据您的开发环境，您有不同的选择来克服这个限制:

▪SAP Web IDE: Configure a destination

▪Local Development: Configure a local proxy (CORS anywhere)

▪Workaround: Disabling the same-origin policy in the browser (not recommended, only for testing)

Parent topic: Walkthrough

Previous: Step 25: Sorting and Grouping

Next: Step 27: Mock Server Configuration

Related Information

Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests

OData Home Page

API Reference: sap.ui.model.odata.v2.ODataModel

First-Aid Kit

Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)