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

注销發表於2021-04-17
Mock

本系列的前兩篇文章：

  • 在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用
  • 如何使用 mock 資料在本地執行 SAP Fiori Elements

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

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

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

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

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

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

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

關鍵的一個方法：

  // 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 服務。

  1. 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 完全一致。

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

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

在這裡插入圖片描述

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

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

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

更多Jerry的原創文章，盡在："汪子熙":

相關文章