如何以 mock server 的方式本地启动 SAP UI5 应用，使它不连接服务器端 OData 服务-阿里云开发者社区

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

2021-12-06 104

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我们在做 SAP UI5 开发时，在视图逻辑没有开发完毕时，往往不希望连接服务器端的 OData 服务进行联调，而仅仅连接本地端的测试数据。本文介绍如果启动本地 mock server，将 SAP UI5 项目工程里提前准备好的测试数据，渲染到 SAP UI5 应用的视图上。本文介绍具体方法。因为不需要直接连接后台 OData 服务，因此 manifest.json 的 dataSources 区域也就无需维护真实的服务器端 OData 服务的 url 了：

我们在做 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();
  }
  };
});