我们只是在一个真实的服务上运行我们的应用程序，但是对于开发和测试我们的应用程序，我们不希望依赖于“真实”服务的可用性，或者在数据服务所在的系统上增加额外的负载。

这个系统就是所谓的后端系统，我们现在将使用一个称为mock server的SAPUI5特性来模拟它。它为本地文件提供服务，但它模拟后端系统比加载本地数据更实际。我们还将更改模型实例化部分，以便模型在描述符中配置，并由SAPUI5自动实例化。这样，我们就不需要关心代码中的模型实例化。

Preview

The list of invoices is now served by the Mock Server

Coding

You can view and download all files at Walkthrough - Step 27.

Folder Structure for this Step

在这一步之后，我们app项目的文件夹结构将测试文件和生产文件清晰地分开。新的测试文件夹现在包含一个新的HTML页面mockServer。它将在测试模式下启动我们的应用程序，而无需调用真正的服务。

新的localService文件夹包含一个元数据。用于模拟服务器OData的xml服务描述文件。使用本地数据模拟实际服务的 mockserver.js文件，以及包含本地测试数据的mockdata子文件夹(invoice .json)。

webapp/test/mockServer.html (New)

<!DOCTYPE html>

<html>

<head>

        <metahttp-equiv="X-UA-Compatible"content="IE=edge">

        <metacharset="utf-8">

        <title>SAPUI5 Walkthrough - Test page</title>

        <script

               id="sap-ui-bootstrap"

                src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

               data-sap-ui-theme="sap_belize"

               data-sap-ui-libs="sap.m"

               data-sap-ui-compatVersion="edge"

               data-sap-ui-preload="async"

               data-sap-ui-resourceroots='{

                       "sap.ui.demo.walkthrough": "../"

               }'>

        </script>

        <script>

               sap.ui.getCore().attachInit(function(){

                       sap.ui.require([

                               "sap/ui/demo/walkthrough/localService/mockserver",

                               "sap/m/Shell",

                               "sap/ui/core/ComponentContainer"

                       ],function(mockserver,Shell,ComponentContainer){

                               mockserver.init();

                               newShell({

                                      app :newComponentContainer({

                                              name :"sap.ui.demo.walkthrough",

                                              settings :{

                                                     id :"walkthrough"

                                              }

                                      })

                               }).placeAt("content");

                       });

               });

        </script>

</head>

<bodyclass="sapUiBody"id="content">

</body>

</html>

复制index.html到webapp/test文件夹中的一个单独文件，并将其命名为mockServer.html。现在我们将使用这个文件在测试模式下运行我们的应用程序，从JSON文件加载模拟数据。测试页面不应该放在应用程序根文件夹中，而应该放在测试文件夹中，以便清楚地将生产代码和测试代码分开。

从现在开始，您有两个不同的入口页面:一个用于真正的“连接”应用程序(index.html)，另一个用于本地测试(mockServer.html)。您可以自由决定是对实际服务数据还是对应用程序中的本地数据执行下一步操作。

请注意：如果到实际服务的连接不可用，或者前面步骤中的代理配置不起作用，则始终可以使用mockServer.html文件。这将显示带有模拟测试数据的应用程序。index.html文件总是从远程服务器加载数据。如果请求失败，发票列表将保持空。

webapp/test/mockServer.html

<!DOCTYPE html>

<html>

        <head>

               <meta http-equiv="X-UA-Compatible" content="IE=edge">

               <meta charset="utf-8">

               <title>Walkthrough - Test page</title>

               <script

                       id="sap-ui-bootstrap"

                       src="/resources/sap-ui-core.js"

                       data-sap-ui-theme="sap_belize"

                       data-sap-ui-libs="sap.m"

                       data-sap-ui-bindingSyntax="complex"

                       data-sap-ui-compatVersion="edge"

                       data-sap-ui-preload="async"

                       data-sap-ui-resourceroots='{

                               "sap.ui.demo.walkthrough": "../"

                       }'>

               </script>

               <script>

                       sap.ui.getCore().attachInit(function () {

                               sap.ui.require([

                                       "sap/ui/demo/walkthrough/localService/mockserver",

                                      "sap/m/Shell",

                                       "sap/ui/core/ComponentContainer"

                               ],function(mockserver,Shell,ComponentContainer){

                                      mockserver.init();

                                      new Shell({

                                              app : new ComponentContainer({

                                                     height: "100%",

                                                     name: "sap.ui.demo.walkthrough"

                                              })

                                      }).placeAt("content");

                               });

                       });

               </script>

        </head>

        <body class="sapUiBody" id="content">

        </body>

</html>

我们修改mockServer.html文件，并更改页面标题，以将其与生产启动页区分开来。在引导过程中，由于mockServer的原因，data-sap-ui-resourceroots属性也略有更改。html文件不再直接在webapp文件夹中。

此外，我们将组件的初始化切换到sap.ui.require语法，因为我们现在需要加载更多启动应用程序所需的额外文件。第一个依赖项是名为mockserver.js的文件。稍后将位于localService文件夹中的。我们还切换到require语句为实例化Shell和ComponentContainer提供的依赖项，而不是将完整的名称空间用于sap.m.Shell和sap.ui.core.ComponentContainer。

新mockserver.js我们刚刚加载并即将实现的资源是我们的本地测试服务器。它的init方法在我们实际定义组件之前立即被调用。通过这种方式，我们可以捕获所有将进入“real”服务的请求，并在使用mockServer.html文件启动应用程序时通过测试服务器本地处理它们。组件本身并不“知道”它现在将在测试模式下运行。

模拟服务器不需要从代码中的任何其他地方调用，因此我们使用sa .ui。需要异步加载依赖项，而不需要定义全局名称空间。

webapp/localService/mockdata/Invoices.json (New)

[

  {

        "ProductName":"Pineapple",

        "Quantity":21,

        "ExtendedPrice":87.2000,

        "ShipperName":"Fun Inc.",

        "ShippedDate":"2015-04-01T00:00:00",

        "Status":"A"

  },

  {

        "ProductName":"Milk",

        "Quantity":4,

        "ExtendedPrice":9.99999,

        "ShipperName":"ACME",

        "ShippedDate":"2015-02-18T00:00:00",

        "Status":"B"

  },

  {

        "ProductName":"Canned Beans",

        "Quantity":3,

        "ExtendedPrice":6.85000,

        "ShipperName":"ACME",

        "ShippedDate":"2015-03-02T00:00:00",

        "Status":"B"

  },

  {

        "ProductName":"Salad",

        "Quantity":2,

        "ExtendedPrice":8.8000,

        "ShipperName":"ACME",

        "ShippedDate":"2015-04-12T00:00:00",

        "Status":"C"

  },

  {

        "ProductName":"Bread",

        "Quantity":1,

        "ExtendedPrice":2.71212,

        "ShipperName":"Fun Inc.",

        "ShippedDate":"2015-01-27T00:00:00",

        "Status":"A"

  }

]

清理旧Invoices.json文件从webapp文件夹，它已不再使用。 Invoices.json 文件类似于webapp文件夹中的前一个文件。只需复制内容并删除带有关键发票的外部对象结构，以便该文件由一个包含发票项的平面数组组成。此文件将在本步骤稍后由服务器自动读取。

webapp/localService/metadata.xml (New)

<edmx:EdmxVersion="1.0"xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx">

        <edmx:DataServicesm:DataServiceVersion="1.0"m:MaxDataServiceVersion="3.0"

                                         xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">

               <SchemaNamespace="NorthwindModel"xmlns="http://schemas.microsoft.com/ado/2008/09/edm">

                       <EntityTypeName="Invoice">

                               <Key>

                                      <PropertyRefName="ProductName"/>

                                      <PropertyRefName="Quantity"/>

                                      <PropertyRefName="ShipperName"/>

                               </Key>

                               <PropertyName="ShipperName"Type="Edm.String"Nullable="false"MaxLength="40"FixedLength="false"

                                                Unicode="true"/>

                               <PropertyName="ProductName"Type="Edm.String"Nullable="false"MaxLength="40"FixedLength="false"

                                                Unicode="true"/>

                               <PropertyName="Quantity"Type="Edm.Int16"Nullable="false"/>

                               <PropertyName="ExtendedPrice"Type="Edm.Decimal"Precision="19"Scale="4"/>

                       </EntityType>

               </Schema>

               <SchemaNamespace="ODataWebV2.Northwind.Model"xmlns="http://schemas.microsoft.com/ado/2008/09/edm">

                       <EntityContainerName="NorthwindEntities"m:IsDefaultEntityContainer="true"p6:LazyLoadingEnabled="true"

                                                      xmlns:p6="http://schemas.microsoft.com/ado/2009/02/edm/annotation">

                               <EntitySetName="Invoices"EntityType="NorthwindModel.Invoice"/>

                       </EntityContainer>

               </Schema>

        </edmx:DataServices>

</edmx:Edmx>

元数据文件包含关于服务接口的信息，不需要手工编写。可以通过调用服务URL并在末尾添加$metadata(例如，在我们的示例http://services.odata.org/v2/northwind/northwind.svc/$ metadata)直接从“真实”服务访问它。mock服务器将读取这个文件来模拟实际的OData服务，并以适当的格式返回来自本地源文件的结果，以便应用程序可以使用它(XML或JSON格式)。

为了简单起见，我们从原来的Northwind OData元数据文档中删除了场景中不需要的所有内容。我们还将status字段添加到元数据中，因为它在真正的Northwind服务中不可用。

webapp/localService/mockserver.js (New)

sap.ui.define([

        "sap/ui/core/util/MockServer"

],function(MockServer){

        "use strict";

        return{

               init:function(){

                       // create

                       var oMockServer =newMockServer({

                               rootUri:"https://services.odata.org/V2/Northwind/Northwind.svc/"

                       });

                       var oUriParameters = jQuery.sap.getUriParameters();

                       // configure

                       MockServer.config({

                               autoRespond:true,

                               autoRespondAfter: oUriParameters.get("serverDelay")||1000

                       });

                       // simulate

                       var sPath = jQuery.sap.getModulePath("sap.ui.demo.walkthrough.localService");

                       oMockServer.simulate(sPath +"/metadata.xml", sPath +"/mockdata");

                       // start

                       oMockServer.start();

               }

        };

});

现在我们已经添加了OData服务描述文件元数据。在xml文件中，我们可以编写代码来初始化模拟服务器，然后模拟对真正的Northwind服务器的任何OData请求。

我们将MockServer模块作为依赖项加载，并创建一个helper对象，该对象定义一个init方法来启动服务器。此方法在mockServer.html文件中的组件初始化之前调用init方法，使用与实际服务调用相同的URL创建一个MockServer实例。

配置参数rootURI.json中的URL文件描述符必须与清单中为数据源定义的uri完全相同。这可以是一个绝对URL，也可以是一个相对URL，例如在SAP Web IDE中。URL现在将由我们的测试服务器而不是实际服务提供。接下来，我们设置两个全局配置设置，告诉服务器自动响应，并引入1秒延迟来模拟典型的服务器响应时间。否则，我们将不得不手动调用MockServer上的response方法来模拟调用。

要模拟服务，只需在MockServer实例上调用模拟方法，并提供到新创建的元数据.xml的路径。这将从本地文件系统读取测试数据，并设置URL模式来模拟实际服务。

最后，我们调用oMockServer上的start。从现在开始，对URL模式rootURI的每个请求都将由MockServer处理。如果你从索引中切换。到mockServer的html文件。浏览器中的html文件，现在您可以看到测试数据再次从本地源显示出来，但是延迟较短。延迟可以用URI参数serverDelay指定，默认值是1秒。

这种方法非常适合本地测试，即使没有任何网络连接。这样，您的开发就不依赖于远程服务器的可用性，即运行测试。

尝试使用索引调用应用程序。html文件和模型服务器。查看html文件的区别。如果无法进行真正的服务连接，例如在没有网络连接的情况下，您总是可以回到本地测试页面。

Conventions

　　▪webapp/test文件夹只包含非生产性代码。

　　▪Mock数据和启动MockServer的脚本存储在webapp/localService文件夹中。

　　▪启动MockServer的脚本称为MockServer .js。

Parent topic: Walkthrough

Previous: Step 26:
(Optional) Remote OData Service

Next: Step 28: Unit
Test with QUnit

Related Information

Mock Server

API Reference: sap.ui.core.util.MockServer

Create a
Northwind Destination

UI5-文档-4.27-Mock Server Configuration的更多相关文章

  1. VMware workstation 虚拟机安装帮助文档（以windows server 2003为例）

    本次安装以Windows server 2003为例: 1.在桌面上双击VMware快捷方式打开,并点击文件>新建虚拟机 2.这里选择默认的“典型”,点击下一步 3.选择浏览,找到windows ...

  2. Java服务器端生成报告文档：使用SQL Server Report Service（SSRS）

    SQL Server Report Service(SSRS)提供了Asp.Net和WinForm两类客户端组件封装,因此使用C#实现SSRS报表的导出功能,仅需要使用相应的组件即可. Java操作S ...

  3. api文档设计工具：RAML、Swagger

    api文档设计工具是用来描述和辅助API开发的. 一.RAML https://raml.org/ https://wenku.baidu.com/view/9523238d5ef7ba0d4b733 ...

  4. Spring Boot文档

    本文来自于springboot官方文档 地址:https://docs.spring.io/spring-boot/docs/current/reference/html/ Spring Boot参考 ...

  5. (转载)中文Appium API 文档

    该文档是Testerhome官方翻译的源地址:https://github.com/appium/appium/tree/master/docs/cn官方网站上的:http://appium.io/s ...

  6. 中文Appium API 文档

    该文档是Testerhome官方翻译的源地址:https://github.com/appium/appium/tree/master/docs/cn官方网站上的:http://appium.io/s ...

  7. WebBrowser打开Word文档的一些注意事项

    WebBrowser打开Word文档的一些注意事项 分类: C#word2010-03-31 21:26 5640人阅读 评论(3) 收藏 举报 webbrowser文档browser工具object ...

  8. 使用RAP搭建前端Mock Server

    转载自:<前后端分离--构建前端Mock Server--windows部署rap>http://www.cnblogs.com/dothin/p/5361883.html mock:模拟 ...

  9. Java | Spring Boot Swagger2 集成REST ful API 生成接口文档

      Spring Boot Swagger2 集成REST ful API 生成接口文档 原文 简介 由于Spring Boot 的特性,用来开发 REST ful 变得非常容易,并且结合 Swagg ...

  10. Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现

    文档集是 SharePoint Server 2010 中的一项新功能,它使组织能够管理单个可交付文档或工作产品(可包含多个文档或文件).文档集是特殊类型的文件夹,它合并了唯一的文档集属性以及文件夹和 ...

随机推荐

  1. search bar 创建的一些文章

    1.   http://blog.csdn.net/oscarxie/article/details/1434608 2.   http://blog.csdn.net/oscarxie/articl ...

  2. 作为一名IT从业者，你在工作和学习中，遇到哪些问题

    版权声明:襄阳雷哥的版权声明 https://blog.csdn.net/FansUnion/article/details/28448975 大家都是IT从业者,遇到的问题多少与类似. 假设能把这些 ...

  3. 上产使用MQ的三点注意

    安全性考量:在正式环境中使用消息队列中间件服务一定要做相关的安全性设置.包括启用消息队列服务的用户名和密码.启用消息队列服务自带的SSL加密设置.如果您使用的消息队列服务不自带SSL加密,则一定要自己 ...

  4. Oracle 实例恢复

    -======================= -- Oracle 实例恢复 --======================= 一.Oracle实例失败 Oracle实例失败多为实例非一致性关闭所 ...

  5. git add -A、git add -u、git add .区别

    git add各命令及缩写 git add各命令 缩写 git add --all git add -A git add --update git add -u git add . Git Versi ...

  6. Django模板语言（常用语法规则）

    Django模板语言 The Django template language 模板中常用的语法规则 {最新版本的Django语法可能有改变,不支持的操作可能支持了.[HTML教程 - 基本元素/标签 ...

  7. Visual Studio2010不能安装Silverlight4_Tools,提示语言不一致

    天在装Silverlight4_Tools时出现“必须先安装与 Silverlight Tools 4 语言版本相一致的 Visual Studio 2010.Visual Web Developer ...

  8. 【Android】Android版本和API Level对应关系

    API Level Notes Android 4.4 19 KITKAT Platform Highlights Android 4.3 18 JELLY_BEAN_MR2 Platform Hig ...

  9. 小峰servlet/jsp（1）

    一.scriptlet标签: 通过scriptlet标签我们可以可以在jsp理嵌入java代码: 第一种:<%! %>  可以在里面定义全局变量.方法.类: 第二种:<% %> ...

  10. 技巧：利用putty通过win7访问ubuntu

    .用apt-get直接安装SSHD服务所需相关软件包: sudo apt-get install openssh-server .开启服务: sudo /etc/init.d/sshd start p ...