之前我們都是使用本地JSON來顯示發票清單。這節課我們將調用一個UI5公共的OData Service
1.由于本地開發訪問OData服務https://services.odata.org/V2/Northwind/Northwind.svc/會產生跨域問題,所以這里我們需要使用代理
新建一個終端:執行:npm i -D ui5-middleware-simpleproxy 將此包作為新的開發依賴項安裝在package.json中
2.在ui5.yaml文件中加入
specVersion: '3.0'
metadata:name: ui5.walkthrough
type: application
framework:name: OpenUI5version: "1.134.0"libraries:- name: sap.m- name: sap.ui.core- name: themelib_sap_horizon
server:customMiddleware:- name: ui5-middleware-simpleproxyafterMiddleware: compressionmountPath: /V2configuration:baseUri: "https://services.odata.org"
3.manifest.json調整
{"_version": "1.65.0","sap.app": {"id": "ui5.walkthrough","i18n": "i18n/i18n.properties","title": "{{appTitle}}","description": "{{appDescription}}","type": "application","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": {"dependencies": {"minUI5Version": "1.108.0","libs": {"sap.ui.core": {},"sap.m": {}}},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "ui5.walkthrough.i18n.i18n","supportedLocales": [""],"fallbackLocale": ""}},"invoice": {"dataSource": "invoiceRemote"}},"rootView": {"viewName": "ui5.walkthrough.view.App","type": "XML","id": "app"},"resources": {"css": [{"uri": "css/style.css"}]}}}