我們在做 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 返回的測試數據，應用界面如下：

更多Jerry的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的如何以 mock server 的方式本地启动 SAP UI5 应用，使它不连接服务器端 OData 服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。