如何以 mock server 的方式本地启动 SAP UI5 应用，使它不链接服务器端 OData 服务

咱们在作 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的原创文章，尽在："汪子熙":