本系列的前兩篇文章：

* [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&token=1980816726&lang=zh_CN#rd)
* [如何使用 mock 資料在本地執行 SAP Fiori Elements](https://jerry.blog.csdn.net/article/details/115748969)

本文研究 Fiori Elements 應用本地執行，而不是連線遠端資料庫，消費伺服器 OData 服務的工作原理。

本地執行 SAP Fiori Elements 應用時，訪問的 index.html 為：test 資料夾下的 flpSandboxMockServer.html

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

這個 id 為 sap-ui-bootstrap 的 script 標籤裡，定義了 SAP UI5 bootstrap 需要載入的 JavaScript Resource 檔案：

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

這個 script data-sap-ui-use-mockserver 標籤裡，定義了 為 true：

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

使用 mock server 的標誌位，在 locate-reuse-libs.js 裡被訪問。在 callback 裡執行 mock server 的 init 操作。

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

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

在 mock 模式下執行，metadata 的 url 也指向本地 xml 檔案了：

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

mock server url：/sap/opu/odata/sap/SEPMRA_PROD_MAN/ 和正常模式下執行的 OData server url 相比沒有變化，

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

關鍵的一個方法：

```javascript
  // load local mock data
            oMockServer.simulate(sMetadataUrl, {
                sMockdataBaseUrl: sJsonFilesUrl,
                bGenerateMissingMockData: true
            });
```

看 simulate 方法的註釋：

1. Simulates an existing OData service by sepcifying the metadata URL and the base URL for the mockdata

透過指定 Metadata url 和 mockdata base url，來模擬一個 OData 服務。

2. The mockdata needs to be stored individually for each entity type in a separate JSON file. The name of the JSON file needs to match the name of the entity type.

每個 entity type 的 mockdata 必須單獨存放在一個 json 檔案裡，且 json 檔案的名稱，必須和 entity type 完全一致。

3. 如果沒有提供 mockdata 的 base url，則 mockdata 基於 metadata 被建立。

1981 行的 _refreshData 方法，會載入本地儲存的 json 檔案包含的 mockdata：

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

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210416105054395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)

接下來，是 mockserver 為不同型別的 HTTP 請求，註冊不同的 handler. 這樣，當 mock server 收到 SAP Fiori Elements 應用發起的 HTTP 請求時，這些 handler 會被呼叫，來返回 mock 過的資料。

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

每個 HTTP 請求 handler 在註冊的時候，都會繫結一個 path，如下圖 2179 的正規表示式所示，這代表了該 handler 能夠處理哪些路徑的 HTTP 請求。例如，當 url 包含 metadata 字串時，觸發下圖的 metadata handler，將本地 localService 資料夾內的 metadata.xml，返回給請求的發起方。

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

mock server 響應其他請求的原理類似，這裡就不再贅述了。

使用 mock 資料在本地執行 SAP Fiori Elements 應用的工作原理

相關文章