共用方式為

模擬 CRUD API

  • 發行項

建置應用程式時，您通常會與後端 API 互動。 有時候，這些 API 尚無法使用，或其他小組正在更新它們以符合最新的需求。 為了避免等候，您通常會建立模擬 API 來傳回您需要的數據。 雖然此方法會解除封鎖您，但您需要花時間建置最終取代為實際 API 的 API。 若要避免浪費時間，您可以使用 Dev Proxy 來模擬 CRUD API 並加速開發。

CrudApiPlugin您可以使用 來模擬 CRUD (建立、讀取、更新、刪除) API 與記憶體內部資料存放區。 使用簡單的組態檔，您可以定義模擬 API 支援的 URL 及其傳回的數據。 外掛程式也支援從用戶端應用程式使用跨網域的CORS。

MockResponsePlugin其中 可讓您定義靜態模擬回應，可讓您CrudApiPlugin定義動態模擬 API，讓您可用來與數據互動，並查看模擬數據集中反映的變更。

案例

假設您正在建置可讓使用者管理客戶的應用程式。 若要取得數據，您必須呼叫 /customers 後端 API 的端點。 為了避免等待後端小組完成其工作，您決定使用Dev Proxy來模擬API並傳回您需要的數據。

首先啟用 ， CrudApiPlugin 並將它設定為使用 customers-api.json 檔案。

{
  "name": "CrudApiPlugin",
  "enabled": true,
  "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
  "configSection": "customersApi"
}

{
  "customersApi": {
    "apiFile": "customers-api.json"
  }
}

在 檔案中 customers-api.json ，您會定義模擬客戶 API。

{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.14.1/crudapiplugin.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

在 屬性中 baseUrl ，您會定義模擬 API 的基底 URL。 在屬性中 dataFile ，您會定義包含模擬客戶數據的檔案。 在屬性中 actions ，您會定義支持的動作，以及它們對應至 HTTP 方法和 URL 的方式。 您要使用 API 來：

  • 透過通話取得所有客戶 GET /v1/customers
  • 透過通話取得單一客戶 GET /v1/customers/{customer-id}
  • 藉由呼叫 POST /v1/customers來新增客戶。
  • 藉由呼叫 PATCH /v1/customers/{customer-id}更新客戶，
  • 透過通話刪除客戶 DELETE /v1/customers/{customer-id}

在您的 URL 中，您會使用 {customer-id} 參數，外掛程式會取代為來自 URL 的實際客戶識別碼。 外掛程式也會使用 {customer-id} JSONPath 查詢中的 參數，在數據檔中查閱客戶。

在檔案中 customers-data.json ，您會定義模擬客戶數據。

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

您啟動 Dev Proxy 並呼叫 https://api.contoso.com/v1/customers 端點。 Dev Proxy 會攔截要求並傳回模擬客戶數據。

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

後續步驟

深入瞭解 CrudApiPlugin。

CrudApiPlugin

範例

另請參閱相關的 Dev Proxy 範例：