我們在做 SAP UI5 開發時，在檢視邏輯沒有開發完畢時，往往不希望連線伺服器端的 OData 服務進行聯調，而僅僅連線本地端的測試資料。

本文介紹如果啟動本地 mock server，將 SAP UI5 專案工程裡提前準備好的測試資料，渲染到 SAP UI5 應用的檢視上。

本文介紹具體方法。

1. 因為不需要直接連線後臺 OData 服務，因此 manifest.json 的 dataSources 區域也就無需維護真實的伺服器端 OData 服務的 url 了：

![](https://img-blog.csdnimg.cn/img_convert/783590b87281a1f653389315b6dd8581.png)

sap.ui5 區域裡，定義該應用的根檢視 (rootView）為 SmartTable:

![](https://img-blog.csdnimg.cn/img_convert/c96233eaf10bc30957badd905487909e.png)

2. SmartTable.view.xml 的原始碼：

```xml
<view xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllername="sap.ui.demo.smartControls.SmartTable" xmlns:smarttable="sap.ui.comp.smarttable">
	<smarttable id="smartTable_ResponsiveTable" tabletype="ResponsiveTable" editable="false" entityset="Products" header="Products" showrowcount="true" useexporttoexcel="false" enableautobinding="true">
	</smarttable>
</view>
```

![](https://img-blog.csdnimg.cn/img_convert/e1d14dbf4185e2d2c5309161c384dbb8.png)

controller 什麼都不用實現：

![](https://img-blog.csdnimg.cn/img_convert/0bc9efce050ebee1f184ad9040e1da1e.png)

component.js 也不用實現:

![](https://img-blog.csdnimg.cn/img_convert/63cc95aeeb6fc2d4801a892af76979dc.png)

3. 主要的邏輯位於 sap.ui.core 的 Init hook 實現函式里。載入專案工程資料夾 test/service 下面的 server.js, 啟動這個 mock server，然後將 sap.ui.demo.smartControls 這個 Component，放置到ComponentContainer，即 Component 容器裡渲染成最後的 HTML 原始碼：

![](https://img-blog.csdnimg.cn/img_convert/2c443e0c0e2524755edf8b1b9b024735.png)

主要程式碼：

```javascript
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 裡：

![](https://img-blog.csdnimg.cn/img_convert/d0b011a57a6331e819fd447887dd38e2.png)

使用的是 SAP UI5 提供的標準 Mock server，位於目錄 sap/ui/core/util/MockServer 下面。
```javascript
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
			});

為了配合 mock server 工作，本地必須儲存一個 metadata.xml:

![](https://img-blog.csdnimg.cn/img_convert/c23c910b138397afd82c637d28d3f907.png)

同時將本地測試資料，以 json 檔案的形式維護在工程裡：

![](https://img-blog.csdnimg.cn/img_convert/654479ddcdb96901ba5d4c6e859ee43b.png)

檔名必須為 metadata.xml 裡定義的同名 entitySet：

![](https://img-blog.csdnimg.cn/img_convert/ffc2fee80f3371e091305123b20a6058.png)

最後本地讀取 mock server 返回的測試資料，應用介面如下：

![](https://img-blog.csdnimg.cn/img_convert/cb0f0bb02e09ddabd315c621ae47d154.png)

如何以 mock server 的方式本地啟動 SAP UI5 應用，使它不連線伺服器端 OData 服務

相關文章