SAPUI5 (25) - 了解 OData 和 OpenUI5 的 OData Model

本篇介绍几个比较重要的概念，后续基于 OData Model 实现 CRUD。

• REST

REST (Representational State Transfer) 这个词，是 Roy Thomas Fielding 在他 2000 年的博士论文中提出的，翻译成中文大意为表现层状态传输。由于他是 HTTP 协议（1.0 版和 1.1 版）的主要设计者、Apache 服务器软件的作者之一、Apache 基金会的第一任主席，所以 REST 原则迅速流行起来。当一个软件架构符合 REST 原则，我们称之为 RESTful 架构。

• OData

开放数据协议（Open Data Protocol，缩写 OData）是一种描述如何创建和访问 Restful 服务的 OASIS 标准。该标准由微软发起，前三个版本1.0、2.0、3.0 都是微软开放标准。第四个版本4.0 于 2014 年 3 月 17 日在 OASIS 投票通过成为开放工业标准。

OData 是用来查询和更新数据的一种 Web协议，提供了把存在于应用程序中的数据暴露出来的方式。OData 运用且构建于很多 Web 技术之上，比如 HTTP、Atom Publishing Protocol（AtomPub）和 JSON，提供了从各种应用程序、服务和存储库中访问信息的能力。OData 被用来从各种数据源中暴露和访问信息， 这些数据源包括但不限于：关系数据库、文件系统、内容管理系统和传统 Web 站点。

前面说到 Rest 只是一种设计 Web 服务的思想，不是一种标准化的协议。正由于缺乏标准化，从而导致各家公布的 Restful API 统一通用方面的欠缺。OData 就是为弥补这种欠缺而被提出来的标准协议。

查看 Northwind OData Service

http://services.odata.org/ 这个网站提供了 OData data service 的示例，并且可以对 OData 数据进行 CRUD 操作。我们首先通过查看这些数据，了解 OData 的知识点。

我们先在浏览器中输入 http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/, 网站以 xml 格式提供了 Northwind 示例数据。这个是 Microsoft 经常使用的一个示例数据库，MS Office 套件中的 Access 数据库也可以看到。为了方便数据查看，建议使用 Chrome 的插件：Postman。Chrome 在查看 xml 和 json 数据格式上，比较难看。或者使用 IE 浏览器。以下是使 Postman 插件的查看效果：

以 json 格式显示数据

GET 请求默认以 xml 格式显示，在 URI 后加上 ?$format=json 则以 json 格式显示，如：http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/?$format=json 则以 json 格式显示。

元数据 ( metadata )

在 URI 后面加上 $metadata 则显示元数据:

Request:

• type: GET
• uri：http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/$metadata

Response：

    
        
    
            ...

            
                
                    
                
                
                
                
                
                
                
            
            
                
                
                
                
                
            
            
                ...
            
            
                ...
                
                ...
                
                    
                
                
                    
                    
                
                
                    ...
                

                 ...

            
            
                
            

            ...
            
        
    

为了更清楚看出文档结构，我省略了不相关的部分。
介绍一下元数据的重点。元数据用于定义 Odata 的数据结构。下面的图来自 [Manually creating a data model to use in SAP Web IDE's Mock Data server] (
https://www.sap.com/developer/tutorials/hcp-webide-create-odata-model.html)，能够很好地说明 metadata 的构成：

image

• dataServiceVesion: data service 的版本
• EntitiContainer 总体确定包括那些 EntitySet，比如 Northwind 包括 Products, Suppliers 等等。

    
    
    
    
    
    
    

    ...

• EntitySet 下包含 EntityType，比如 Suppliers 这个 Set 下面包含 Supplier 这个 Entity。Entity 中包含 key 和 Properties:

查看 Entity Set

Request:

• Type: GET
• URL: http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/Suppliers/?$format=json

Response:

{
  "odata.metadata": "http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/$metadata#Suppliers",
  "value": [
    {
      "ID": 0,
      "Name": "Exotic Liquids",
      "Address": {
        "Street": "NE 228th",
        "City": "Sammamish",
        "State": "WA",
        "ZipCode": "98074",
        "Country": "USA"
      },
      "Location": {
        "type": "Point",
        "coordinates": [
          -122.03547668457,
          47.6316604614258
        ],
        "crs": {
          "type": "name",
          "properties": {
            "name": "EPSG:4326"
          }
        }
      },
      "Concurrency": 0
    },
    {
      "ID": 1,
      "Name": "Tokyo Traders",
      "Address": {
        "Street": "NE 40th",
        "City": "Redmond",
        "State": "WA",
        "ZipCode": "98052",
        "Country": "USA"
      },
      "Location": {
        "type": "Point",
        "coordinates": [
          -122.107711791992,
          47.6472206115723
        ],
        "crs": {
          "type": "name",
          "properties": {
            "name": "EPSG:4326"
          }
        }
      },
      "Concurrency": 0
    }
  ]
}

查看单条 Entity

比如，我们想查看第一个供应商：

Request:

• Type: GET
• URL: http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/Suppliers(0)/?$format=json

Response:

{
  "odata.metadata": "http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/$metadata#Suppliers/@Element",
  "ID": 0,
  "Name": "Exotic Liquids",
  "Address": {
    "Street": "NE 228th",
    "City": "Sammamish",
    "State": "WA",
    "ZipCode": "98074",
    "Country": "USA"
  },

  ...

}

查看 Entity 的相关 Property

比如，查看第一个供应商的名称：

Request:

• Type: GET
• URL: http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/Suppliers(0)/Name?$format=json

Response:

{
  "odata.metadata": "http://services.odata.org/V3/(S(i2ebiza3pghgcecz3upusotg))/OData/OData.svc/$metadata#Edm.String",
  "value": "Exotic Liquids"
}

先了解这么多，还有 Navigation properties 等，以后再说。

OpenUI5 OData Model

SAP 提供了 sap.ui.model.odata.ODataModel，sap.ui.model.odata.v2.ODataModel 和 sap.ui.model.odata.v4.ODataModel。sap.ui.model.odata.ODataModel 已经过时。Odata v2 model 目前支持到 OData 2.0。Odata v4 model 支持到 OData 4.0，但仅支持绑定模式。不支持代码模式，应该还在开发过程中。建议使用 Odata v2 model。

Odata v2 model 和 Odata model 的变化和区别请参见：OData v2 Model

image

OData Model 属于服务器端的数据模型，也就是说，客户端必须请求后，根据服务器的应答，才能看到请求的数据。

Same-origin 政策

OData 是一种基于 Web 的协议，数据访问受到 Same-origin policy 的限制。什么是 Same-origin policy? 根据 WIKI 的解释：

In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.

并且给出了一些示例方便我们理解：

image

如果我们直接对 services.odata.com 的进行 CRUD，因为违背了Same-origin 策略，会产生错误。解决办法：

• 使用代理，比如https://cors-anywhere.herokuapp.com/
• 在 SAP Web IDE 中通过 HCP (Hana Cloud Platform) 账号，由 SAP Web IDE 代理。

参考帖子：stackoverflow: access cross origin resources

通过 OData model 读取 OData 数据

v2 模型提供了两种方法，一是通过代码，二是通过数据绑定。我们先来看通过代码如何访问 OData 数据：

var sServiceUrl = "http://services.odata.org/V3/Northwind/Northwind.svc/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);         

sap.ui.getCore().setModel(oModel);

oModel.read("/Products(1)", {
    success: function(oData, oResponse){
        console.log(oData);
        console.log(oResponse);
    },
    error: function(oError){
        console.log(oError);
    }
})

运行程序，Chrome 浏览器返回如下错误（ F12 查看）

Failed to load resource: the server responded with a status of 501 (Not Implemented)

index.html:1 XMLHttpRequest cannot load http://services.odata.org/V3/Northwind/Northwind.svc/$metadata. Response for preflight has invalid HTTP status code 501

将 var sServiceUrl = "http://services.odata.org/V3/Northwind/Northwind.svc/"; 语句改为：

var sServiceUrl = "https://cors-anywhere.herokuapp.com/http://services.odata.org/V3/Northwind/Northwind.svc/";

可以正常返回 oData 和 oResponse 。

第二种方法是通过控件绑定 OData 数据：

var sServiceUrl = "https://cors-anywhere.herokuapp.com/http://services.odata.org/V3/Northwind/Northwind.svc/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);    

sap.ui.getCore().setModel(oModel);

var oText = new sap.m.Text({
    text: "Product name: {ProductName}"
});

var oPage = new sap.m.Page("masterPage", {
    title: "Product 1 information",
    content: [oText]
});
oPage.bindElement("/Products(1)");

var oApp = new sap.m.App();
oApp.addPage(oPage);
oApp.placeAt("content");

参考

• RESTful API 最佳实践
• OData 的初步认识
• OData v2 model
• Manually creating a data model to use in SAP Web IDE's Mock Data server
• Same-origin policy