咱们在做 SAP UI5 开发时，在视图逻辑没有开发结束时，往往不心愿连贯服务器端的 OData 服务进行联调，而仅仅连贯本地端的测试数据。

本文介绍如果启动本地 mock server，将 SAP UI5 我的项目工程里提前准备好的测试数据，渲染到 SAP UI5 利用的视图上。

本文介绍具体方法。

  1. 因为不须要间接连贯后盾 OData 服务，因而 manifest.json 的 dataSources 区域也就无需保护实在的服务器端 OData 服务的 url 了：

sap.ui5 区域里，定义该利用的根视图 (rootView）为 SmartTable:

  1. 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 也不必实现:

  1. 次要的逻辑位于 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的原创文章，尽在："汪子熙":