UI5_Walkthrough_Step 25: Remote OData Service Odata服务

一、基本概念

访问远端odata服务接口获取发票信息显示

odata接口地址：https://services.odata.org/V2/Northwind/Northwind.svc/

二、练习

新建文件夹25,复制练习UI5_Walkthrough_Step 24: Sorting and Grouping 排序和分组 文件夹下内容，可删除之前文件中webapp\Invoices.json文件，

2.1 webapp/manifest.json

manifest.json配置文件中

• "sap.app" 属性中新增dataSources配置，维护OData数据源invoiceRemote,通过"type": "OData"指定数据源类型，url指定数据源地址
• "sap.ui5"中维护的数据模型nvoice 维护由

"invoice": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "Invoices.json"
      }

替换为

"invoice": {
        "dataSource": "invoiceRemote"
      }

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "sap.ui5.walkthrough",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    },
    	  "dataSources": {
            "invoiceRemote": {
              "uri": "V2/Northwind/Northwind.svc/",
              "type": "OData",
              "settings": { 
              "odataVersion": "2.0"
                          }
                    }
	}
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "sap.ui5.walkthrough.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
    "dependencies": {
      "minUI5Version": "1.93",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sap.ui5.walkthrough.i18n.i18n",
          "supportedLocales": [],
          "fallbackLocale": ""
        }
      },
      "invoice": {
        "dataSource": "invoiceRemote"
      }
    }
  }
}

2.2 ui5.yaml

由于跨域访问资源限制，需要使用代理来进行请求转发，运行在本地的项目向中间代理发送请求

http://localhost:8080/webapp/V2/Northwind/Northwind.svc/

代理转发请求到远端服务

https://services.odata.org/V2/Northwind/Northwind.svc/

specVersion: '4.0' 是UI5 Tooling 版本,如果不知道当前是哪个使用的是哪个版本，可以使用ui5 --version 查看

• server:中间代理

运行项目之前，运行项目前需要先安装它项目目录下终端运行命令可安装

npm install ui5-middleware-simpleproxy --save-dev

afterMiddleware: compression 定该中间件在压缩中间件之后执行

mountPath: /webapp/V2意味着所有以/webapp/V2开头的请求都会被代理到baseUri

• framewok:框架和库

 version: "1.143.1"  # 必须确保这个版本存在

specVersion: '4.0'
metadata:
  name: "sap.m.tutorial.walkthrough.25"
type: application
resources:
  configuration:
    paths:
      webapp: .
framework:
  name: OpenUI5
  version: "1.143.1"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: sap.ui.unified 
    - name: themelib_sap_fiori_3
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /webapp/V2
    configuration:
       baseUri: "https://services.odata.org"

2.3 运行结果