UI5-文档-4.27-Mock Server Configuration
我们只是在一个真实的服务上运行我们的应用程序,但是对于开发和测试我们的应用程序,我们不希望依赖于“真实”服务的可用性,或者在数据服务所在的系统上增加额外的负载。
这个系统就是所谓的后端系统,我们现在将使用一个称为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
API Reference: sap.ui.core.util.MockServer
Create a
Northwind Destination
UI5-文档-4.27-Mock Server Configuration的更多相关文章
- VMware workstation 虚拟机安装帮助文档(以windows server 2003为例)
本次安装以Windows server 2003为例: 1.在桌面上双击VMware快捷方式打开,并点击文件>新建虚拟机 2.这里选择默认的“典型”,点击下一步 3.选择浏览,找到windows ...
- Java服务器端生成报告文档:使用SQL Server Report Service(SSRS)
SQL Server Report Service(SSRS)提供了Asp.Net和WinForm两类客户端组件封装,因此使用C#实现SSRS报表的导出功能,仅需要使用相应的组件即可. Java操作S ...
- api文档设计工具:RAML、Swagger
api文档设计工具是用来描述和辅助API开发的. 一.RAML https://raml.org/ https://wenku.baidu.com/view/9523238d5ef7ba0d4b733 ...
- Spring Boot文档
本文来自于springboot官方文档 地址:https://docs.spring.io/spring-boot/docs/current/reference/html/ Spring Boot参考 ...
- (转载)中文Appium API 文档
该文档是Testerhome官方翻译的源地址:https://github.com/appium/appium/tree/master/docs/cn官方网站上的:http://appium.io/s ...
- 中文Appium API 文档
该文档是Testerhome官方翻译的源地址:https://github.com/appium/appium/tree/master/docs/cn官方网站上的:http://appium.io/s ...
- WebBrowser打开Word文档的一些注意事项
WebBrowser打开Word文档的一些注意事项 分类: C#word2010-03-31 21:26 5640人阅读 评论(3) 收藏 举报 webbrowser文档browser工具object ...
- 使用RAP搭建前端Mock Server
转载自:<前后端分离--构建前端Mock Server--windows部署rap>http://www.cnblogs.com/dothin/p/5361883.html mock:模拟 ...
- Java | Spring Boot Swagger2 集成REST ful API 生成接口文档
Spring Boot Swagger2 集成REST ful API 生成接口文档 原文 简介 由于Spring Boot 的特性,用来开发 REST ful 变得非常容易,并且结合 Swagg ...
- Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现
文档集是 SharePoint Server 2010 中的一项新功能,它使组织能够管理单个可交付文档或工作产品(可包含多个文档或文件).文档集是特殊类型的文件夹,它合并了唯一的文档集属性以及文件夹和 ...
随机推荐
- call和apply的意义和区别
区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(f ...
- PYTHON之MOCK WEB接口
在日常的测试工作中,有时会有需要调用外部接口,拿到返回数据用以满足当前的测试任务的需求.但是当外部接口不可用,或者没有提供测试用环境时,我们就需要自己来mock一个接口的返回内容了,先让我们看一看下面 ...
- 使用MQ要考虑的问题
一般现代软件系统都会用到MQ,几乎所有开发人员也都会想到用MQ,但真正能用好的人估计不多,因为要用好MQ有很多方面问题要考虑: 1.在原直接交互的系统间增加MQ中间层,MQ的性能.可靠程度会严重影响原 ...
- 【转】每天一个linux命令(6):rmdir 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/10/27/2742076.html 今天学习一下linux中命令: rmdir命令.rmdir是常用的命 ...
- 深入理解ASP.NET MVC(2)
系列目录 请求是如何进入MVC框架的(inbound) 当一个URL请求到来时,系统调用一个注册的IHttpModules:UrlRoutingModule,它将完成如下工作: 一.在RouteTab ...
- 解决在sass中使用calc不能包含变量的问题。
今天写sass的时候,发现在sass中使用calc,如果calc中包含一个变量,不会产生效果,看代码: .app-inner { display: flex; height: calc(100% - ...
- CentOS 7安装和配置ssh
1. 安装openssh-server yum install -y openssl openssh-server 2. 修改配置文件 用vim打开配置文件/etc/ssh/sshd_config ...
- bzoj2763 飞行路线
Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并 ...
- MySQL 误删用户
误删除root用户&误删除所有用户 #----------------------------------------------------------------------------- ...
- Linux中make, make install命令分别是什么
用于linux源码安装软件,一般下载源码包得到文件:xxxx.tgz====================================1.解包软件 tar zxf xxxx.tgz======= ...