第27步:模拟服务器配置

2024-01-21 18:25:04

说明

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

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

预览

发票列表现在由Mock Server提供

代码

你可以在演练-第27步查看和下载所有文件。

此步骤的文件夹结构

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

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

webapp/test/mockServer.html (New)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</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-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true">
	</script>
</head>
<body class="sapUiBody" id="content">
	<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>

</body>
</html>

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

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

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

webapp/test/mockServer.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<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-resourceroots='{
			"sap.ui.demo.walkthrough": "../"
		}'
		data-sap-ui-oninit="module:sap/ui/demo/walkthrough/test/initMockServer"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true">
	</script>
</head>
<body class="sapUiBody" id="content">
	<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>

我们修改mockServer.html文件并更改页面标题，以将其与生产的开始页面区分开来。在引导过程中，data-sap-ui-resourceroot属性也被更改。命名空间现在指向上面的文件夹("…/")，因为mockServer.html文件现在位于webapp文件夹的子文件夹中。我们现在调用脚本initMockServer.js，而不是直接加载应用程序组件。

webapp/test/initMockServer.js (New)

sap.ui.define([
	"../localService/mockserver"
], function (mockserver) {
	"use strict";

	// initialize the mock server
	mockserver.init();

	// initialize the embedded component on the HTML page
	sap.ui.require(["sap/ui/core/ComponentSupport"]);
});

第一个依赖项是一个名为mockserver.js的文件，稍后将位于localService文件夹中。

我们将要实现的mockserver依赖项是我们的本地测试服务器。在加载组件之前，会立即调用它的init方法。通过这种方式，我们可以捕获所有将转到“真实”服务的请求，并在使用mockServer.html文件启动应用程序时通过测试服务器在本地处理它们。组件本身并不“知道”它现在将在测试模式下运行。

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文件夹中的文件。只需复制内容并删除带有关键发票的外部对象结构，以便该文件由发票项的一个平面数组组成。在这一步的后面，服务器将自动读取该文件。

从webapp文件夹删除旧的Invoices.json文件，它不再使用。

webapp/localService/metadata.xml (New)

<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx">
	<edmx:DataServices m:DataServiceVersion="1.0" m:MaxDataServiceVersion="3.0"
			xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
		<Schema Namespace="NorthwindModel" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
			<EntityType Name="Invoice">
				<Key>
					<PropertyRef Name="ProductName"/>
					<PropertyRef Name="Quantity"/>
					<PropertyRef Name="ShipperName"/>
				</Key>
				<Property Name="ShipperName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false"
							Unicode="true"/>
				<Property Name="ProductName" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false"
							Unicode="true"/>
				<Property Name="Quantity" Type="Edm.Int16" Nullable="false"/>
				<Property Name="ExtendedPrice" Type="Edm.Decimal" Precision="19" Scale="4"/>
				<Property Name="Status" Type="Edm.String" Nullable="false" MaxLength="1" FixedLength="false"
							Unicode="true"/>
			</EntityType>
		</Schema>
		<Schema Namespace="ODataWebV2.Northwind.Model" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
			<EntityContainer Name="NorthwindEntities" m:IsDefaultEntityContainer="true" p6:LazyLoadingEnabled="true"
					xmlns:p6="http://schemas.microsoft.com/ado/2009/02/edm/annotation">
				<EntitySet Name="Invoices" EntityType="NorthwindModel.Invoice"/>
			</EntityContainer>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

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

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

webapp/localService/mockserver.js (New)

sap.ui.define([
	"sap/ui/core/util/MockServer",
	"sap/base/util/UriParameters"
], function (MockServer, UriParameters) {
	"use strict";

	return {
		init: function () {
			// create
			var oMockServer = new MockServer({
				rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
			});

			var oUriParameters = new UriParameters(window.location.href);

			// configure mock server with a delay
			MockServer.config({
				autoRespond: true,
				autoRespondAfter: oUriParameters.get("serverDelay") || 500
			});

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

			// start
			oMockServer.start();
		}
	};

});

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

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

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

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

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

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

尝试用index.html文件和mockServer.html文件调用应用程序，看看有什么不同。如果无法建立真正的服务连接，例如在没有网络连接的情况下，您总是可以回退到本地测试页。

约定

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

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

启动MockServer的脚本名为MockServer.js。

码农公寓

说明

预览

代码

相关文章