如何以 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 返回的测试数据，应用界面如下：

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

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

SAP UI5 初学者教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 应用开发教程之六十七 - 基于 OData V4 的 SAP UI5 List-Detail(列表-明细)布局的实现方式试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之六十三 - 基于 OData V4 的本地 Mock Server 实现的深入介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之六十三 - 基于 OData V4 的本地 Mock Server 实现的深入介绍
学习本步骤之前,请确保你已经复习了步骤 26 和步骤 62 的知识: SAP UI5 应用开发教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解 SAP UI5 应用开发教程之六 ...
本地启动 SAP Commerce Cloud(Hybris) 产生的五个 Java 进程
五个 Java 进程: 第一个目录:c:\Code\H2011\installer\ 命令行: "C:\Program Files\SapMachine\JDK\11\bin\java.e ...
使用Eclipse本地运行SAP UI5时, UI5库文件的js文件是从本地哪里加载的
what is the location of js when using run as server in Eclipse
使用调试的方式搞清楚SAP UI5应用标题的更改方式
In Fiori launchpad, the page title will display default value "Home". When I click a given ...
SAP UI5 应用开发教程之一百 - 如何修改 SAP UI5 框架的源代码实现，以及使用本地部署的 SAP UI5 SDK 试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
SAP UI5 Cross Application Navigation (跨应用间跳转)的本地模拟实现试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年9月16日为止,目前已经更新了 131 篇,专栏完成度为 43.6% 作者简介 Jerry Wa ...

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

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

最新文章

热门文章