如何以 mock server 的方式本地啟動 SAP UI5 應用，使它不連接配接伺服器端 OData 服務

我們在做 SAP UI5 開發時，在視圖邏輯沒有開發完畢時，往往不希望連接配接伺服器端的 OData 服務進行聯調，而僅僅連接配接本地端的測試資料。

本文介紹如果啟動本地 mock server，将 SAP UI5 項目工程裡提前準備好的測試資料，渲染到 SAP UI5 應用的視圖上。

本文介紹具體方法。

因為不需要直接連接配接背景 OData 服務，是以 manifest.json 的 dataSources 區域也就無需維護真實的伺服器端 OData 服務的 url 了：

sap.ui5 區域裡，定義該應用的根視圖 (rootView）為 SmartTable:

SmartTable.view.xml 的源代碼：

<mvc:View 
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="sap.ui.demo.smartControls.SmartTable"
    xmlns:smartTable="sap.ui.comp.smarttable">
    <smartTable:SmartTable 
        id="smartTable_ResponsiveTable"
        tableType="ResponsiveTable" 
        editable="false"
        entitySet="Products" 
        header="Products" 
        showRowCount="true"
        useExportToExcel="false" 
        enableAutoBinding="true">
    </smartTable:SmartTable>
</mvc:View>      

controller 什麼都不用實作：

component.js 也不用實作:

主要的邏輯位于 sap.ui.core 的 Init hook 實作函數裡。附加元件目工程檔案夾 test/service 下面的 server.js, 啟動這個 mock server，然後将 sap.ui.demo.smartControls 這個 Component，放置到ComponentContainer，即 Component 容器裡渲染成最後的 HTML 源代碼：

主要代碼：

sap.ui.getCore().attachInit(function() {
  sap.ui.require([
    "sap/ui/demo/smartControls/test/service/server"
  ], function(server) {
    server.init();
    new sap.ui.core.ComponentContainer({
    name: "sap.ui.demo.smartControls",
    height: "100%"
    }).placeAt("content");
  });
    });      

Mock server 的核心邏輯在這個 server.js 裡：

使用的是 SAP UI5 提供的标準 Mock server，位于目錄 sap/ui/core/util/MockServer 下面。

sap.ui.define([
    "sap/ui/core/util/MockServer"
], function (MockServer) {
    "use strict";
    return {
  init: function () {
    var oMockServer = new MockServer({
    rootUri: "/here/goes/your/serviceUrl/"
    });
    MockServer.config({
    autoRespond: true, 
    autoRespondAfter: 1000
    });
    var sPath = jQuery.sap.getModulePath("sap.ui.demo.smartControls.test.service");
    oMockServer.simulate(sPath + "/metadata.xml", sPath);
    
    oMockServer.attachAfter(sap.ui.core.util.MockServer.HTTPMETHOD.GET, function(oEvent) {
    var oXhr = oEvent.getParameter("oXhr");
    var aResultFiltered = [];
    var fGetUriParameter = function(sUri, sKey) {
        var sValue = "";
        var aParams = decodeURIComponent(sUri).replace("?", "&").split("&");
        aParams.some(function(sPairs) {
      if (sKey === sPairs.split("=")[0]) {
        sValue = sPairs.split("=")[1];
        return true;
      }
        });
        return sValue;
    };
    var sSearchText = fGetUriParameter(oXhr.url, "search");
    if (sSearchText) {
        var aResults = oEvent.getParameter("oFilteredData").results;
        aResults.forEach(function(oEntry) {
      if (JSON.stringify(oEntry).indexOf(sSearchText) > -1) {
        aResultFiltered.push(oEntry);
      }
        });
        oEvent.getParameter("oFilteredData").results = aResultFiltered;
    }
    });
    oMockServer.start();
  }
    };
});      

為了配合 mock server 工作，本地必須儲存一個 metadata.xml:

同時将本地測試資料，以 json 檔案的形式維護在工程裡：

檔案名必須為 metadata.xml 裡定義的同名 entitySet：

最後本地讀取 mock server 傳回的測試資料，應用界面如下：