Fiori學習筆記 - OData介紹和應用（二）

接着上一篇文章繼續寫一下OData的具體應用。

OData可以直接綁定到頁面的entity set，很方便。

Controller：

var odataModel = new sap.ui.model.odata.v2.ODataModel('/DemoService/V2/(S(xogxg1ckcor00ikzn42t0sbk))/OData/OData.svc/', false);
this.getView().setModel(odataModel);

View：

<List items="{/Suppliers}" headerText="Address">
    <DisplayListItem label="{ID}" value="{Name}" type="Navigation"/>
</List>

如果有多個OData Model，可以對不同的Model指定不同的名稱：

this.getView().setModel(odataModel，” ModelName”);

頁面綁定用法和JSONModel相似，直接前面加上相應的名稱就可以了：

<List items=”{ModelName>/Suppliers}”>

OData使用起來代碼量很少，甚至在controller裏一行代碼都不用寫，在manifest.json裏就可以直接配置好OData和DataSource，頁面就可以直接綁定使用了。

直接將ODataModel到頁面上非常方便，但是這種方式對數據要求比較高，也就是說後臺服務返回的數據結構和前端頁面展示的數據非常一致纔可以的。

如果返回的數據不能和所需的一致時，可以在controller裏讀到數據，修改成頁面所需要的數據結構之後，用JSONModel再綁定到頁面。

這裏就用到了OData的read方法

odataModel.read("/Suppliers", {
    urlParameters: '&$format=json',
    success: function(oData) {
        console.log(oData);
    },
    error: function(oData) {}
});

“/Suppliers", 是服務URL末端； urlParameters： 指定返回數據的格式，這裏設置成了JSON格式； success和error分別是成功和失敗的回調函數。

此外，OData讀取數據也支持filter過濾，下面代碼將返回滿足ID和Name兩個過濾條件的數據。

var aFilter = [];
aFilter.push(new sap.ui.model.Filter("ID", sap.ui.model.FilterOperator.EQ, "1"));
aFilter.push(new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.EQ, "Tokyo Traders"));
odataModel.read("/Suppliers", {
    urlParameters: '&$format=json',
    filters: aFilter,
    success: function(oData) {
        console.log(oData);
    },
    error: function(oData) {}
});

update數據的時候可能需要配置header或者options，這個要看不同的服務端設置。測試代碼如下：

var oModifiyData = {
    "Name": "測試",
    "Address": {
        "Street": " Street Name",
        "City": " City Name",
        "State": "CH",
        "ZipCode": "150000",
        "Country": "中國"
    }
};
var oUpdateModel = new sap.ui.model.odata.v2.ODataModel('/DemoService/V2/(S(tigt4zfne0egj3u25bhqq32a))/OData/OData.svc/', true);

oUpdateModel.setHeaders({
    "If-Match":"*"
});
oUpdateModel.update("/Suppliers(1)", oModifiyData, {
    success: function(oData, oResponse){
        alert('update success');
    },
    error: function(oError){}
});

delete與update類似，只是不需要傳修改的數據。

var oDeleteModel = new sap.ui.model.odata.v2.ODataModel('/DemoService/V2/(S(tigt4zfne0egj3u25bhqq32a))/OData/OData.svc/');

oDeleteModel.setHeaders({
    "If-Match":"*"
});
oDeleteModel.remove("/Suppliers(1)", {
    success: function(oData, oResponse){
        alert('delete success');
    },
    error: function(oError){}
});

對應Gateway的操作，也常常會涉及到token的驗證，CSRF TOKEN，在請求服務的時候要fetch token，從服務讀到token。

var oReadTokenModel = new sap.ui.model.odata.v2.ODataModel('/DemoService/V2/(S(tigt4zfne0egj3u25bhqq32a))/OData/OData.svc/');

oReadTokenModel.setHeaders({
    "X-CSRF-TOKEN": "Fetch"
});

oReadTokenModel.refreshSecurityToken(function(data, response) {
    alert(response.headers['x-csrf-token']);
}, function(data) {}, true);

oReadTokenModel.read("?$format=json", {
    'success': function(data, response) {},
    'error': function(data, response) {}
});

"X-CSRF-TOKEN": "Fetch" 以fetch的方式從服務端讀取token

refreshSecurityToken 拿到token後會調用的方法，這裏的response.headers['x-csrf-token']就是取到的token，我們可以將這個token保存起來，在之後需要token的服務調用中配置在header裏。

到這裏OData的應用就差不多了，感興趣的朋友試一下吧：）