IT干货网

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

sanshao 2022年03月09日 SAP 189 0

到目前为止,我们已经使用了本地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)


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!