如何使用模拟数据运行 SAPUI5 Fiori 应用程序 [英] How to run SAPUI5 Fiori application with mock data

问题描述

我在本地 PC 上有一个 Fiori 应用程序，我看到它有一个模型文件夹，里面有一堆带有模拟数据的 json 文件.我想使用此模拟数据在浏览器中运行此应用程序，但找不到有关如何执行此操作的任何文档.您知道 sapui5 期望在本地读取数据而不是从 Odata 服务器读取数据的参数是什么吗?

I have a Fiori application in my local PC and I see it has a model folder with a bunch of json files with mock data. I would like to run this app in a browser with this mock data but cannot find any documentation on how to do this. Do you know what is the parameter sapui5 is expecting to read data locally instead of from Odata server?

我没有使用 SAP Web IDE，(我知道它有一个使用模拟数据运行"的选项)，但没有人说这在幕后做了什么.

I am not using SAP Web IDE, (which i know has an option "run with mock data") but nowhere it is said what this does behind the scenes.

非常感谢.最好的问候，

Thank you very much. Best regards,

推荐答案

使用 SAP Web IDE，MockServer(当您选择使用模拟数据运行"选项时注入)会自动启动.但是您也可以在您的应用程序中手动执行此操作，我们甚至建议这样做还可以在您的应用程序以模拟模式运行的情况下运行自动化测试.

with SAP Web IDE, the MockServer (which is injected when you select the option "run with mock data") is automatically started. But you can also do this manually inside your application, we even recommend this do also be able to run automated tests with your application running in mock mode.

您可以查看全新的 SAPUI5 演练(第 27 步)，了解有关如何从应用程序内部启动 MockServer 的更多详细信息:https://github.com/SAP/openui5/tree/master/src/sap.m/test/sap/m/demokit/tutorial/walkthrough/27

You can check the brandnew SAPUI5 walkthrough (step 27) for more details on how to start the MockServer from inside the application: https://github.com/SAP/openui5/tree/master/src/sap.m/test/sap/m/demokit/tutorial/walkthrough/27

演练的文档只会随 OpenUI5 1.30 版一起发布，但我在这里复制了相关部分，希望对您有所帮助！迈克尔

The documentation for the walkthrough will only be released with OpenUI5 release 1.30 but I copied the relevant parts here, hope it helps! Michael

起始页的文档 (testService.html):我们修改了 index.html 文件的副本并添加了一个新的页面标题，以将其与生产性起始页面区分开来.由于我们显然希望将测试和生产性编码分开，因此我们添加了第二个命名空间 sap.ui.demo.wt.test 指向 test 文件夹，仅在 testService.html 文件中使用.

Documentation for the start page (testService.html): "We modify our copy of the index.html file and add a new page title to distinguish it from the productive start page. Since we clearly want to separate test and productive coding, we add a second namespace sap.ui.demo.wt.test that points to the test folder and is only used in the testService.html file.

此外，我们将组件的初始化切换到 sap.ui.require 语法，因为我们现在确实加载了更多启动应用程序所需的附加文件.第一个依赖项是一个名为 server.js 的文件，它将位于 test/service 文件夹中.我们还将 Shell 和 ComponentContainer 引用替换为 require 语句提供的依赖项.

Additionally, we switch the initialization of the component to the sap.ui.require syntax, because we do now load more additional files required for the startup of our app. The first dependency is a file called server.js that will be located in the test/service folder. We also replace the Shell and the ComponentContainer reference with the dependencies that the require statement provides.

我们刚刚加载并即将实现的新工件是我们的本地测试服务器，在我们实际定义组件之前立即使用 init 方法调用它.通过这种方式，我们可以在使用 testService.html 文件启动应用程序时，捕获将转到真实"服务的所有请求，并由我们的测试服务器在本地处理它."

The new artifact that we just loaded and are about to implement is our local test server that is immediately called with init method before we actually define the component. This way we can catch all requests that would go to the "real" service and process it locally by our test server when launching the app with the testService.html file."

模拟服务器脚本的文档:现在我们已经用 metadata.xml 文件扩展了我们的测试数据，我们可以编写代码来初始化模拟请求的服务器，而不是真正的服务器.

Documentation for the mock server script: "Now that we have extended our test data with the metadata.xml file we can write the code to initialize the server that will simulate the requests instead of the real server.

我们将 MockServer 模块作为依赖项加载并创建一个帮助器对象，该对象定义了一个用于启动服务器的 init 方法.这个方法是在上面testService.html文件中的组件初始化之前调用的.

We load the MockServer module as a dependency and create a helper object that defines an init method to start the server. This method is called before the component initialization in the testService.html file above.

init 方法创建一个与真实服务具有相同 URL 的 MockServer 实例.配置参数 rootURI 中的 URL 现在将由我们的测试服务器而不是真正的服务提供.接下来我们为所有 MockServer 实例设置两个全局配置设置，告诉服务器自动响应并引入一秒的延迟来模仿典型的服务器响应时间.否则，我们将不得不手动调用 MockServer 上的响应方法来模拟调用.

The init method creates a MockServer instance with the same URL as the real service. The URL in configuration parameter rootURI will now be served by our test server instead of the real service. Next we set two global configuration settings for all MockServer instances that tell the server to respond automatically and introduce a delay of one second to imitate a typical server response time. Otherwise, we would have to call the respond method on the MockServer manually to simulate the call.

为了模拟手动后端调用，我们可以简单地使用我们新创建的 metadata.xml 的路径调用 MockServer 实例上的模拟方法.这将从我们的本地文件系统读取测试数据并设置将模拟真实服务的 URL 模式.

In order to simulate a manual backend call we can simply call the simulate method on the MockServer instance with the path to our newly created metadata.xml. This will read the test data from our local file system and set up the URL patterns that will mimic the real service.

最后，我们在 oMockServer 上调用 start.从这一点开始，对 URL 模式 rootURI 的每个请求都将由 MockServer 处理.如果您在浏览器中从 index.html 文件切换到 testService.html 文件，您现在可以看到再次从本地源显示测试数据，但延迟很短.

Finally, we call start on oMockServer. From this point, each request to the URL pattern rootURI will be processed by the MockServer. If you switch from the index.html file to the testService.html file in the browser, you can now see that the test data is displayed from the local sources again, but with a short delay.

这种方法非常适合本地测试，即使没有任何网络连接.通过这种方式，您的开发不依赖于远程服务器的可用性，即运行您的测试.从这一点来看，您有两个不同的入口页面:一个用于真正的连接"应用程序 (index.html)，另一个用于本地测试 (testService.html)."

This approach is perfect for local testing, even without any network connection. This way your development does not depend on the availability of a remote server, i.e. to run your tests. From this point you have two different entry pages: One for the real "connected" app (index.html) and one for local testing (testService.html)."

这篇关于如何使用模拟数据运行 SAPUI5 Fiori 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！