Udostępnij za pośrednictwem

Symulowanie interfejsu API CRUD

  • Artykuł

Podczas tworzenia aplikacji często korzystasz z interfejsów API zaplecza. Czasami te interfejsy API nie są jeszcze dostępne lub inne zespoły aktualizują je w celu spełnienia najnowszych wymagań. Aby uniknąć oczekiwania, zazwyczaj należy utworzyć pozorny interfejs API, który zwraca potrzebne dane. Mimo że to podejście odblokuje Cię, wymaga to poświęcania czasu na tworzenie interfejsu API, który ostatecznie zastępuje się rzeczywistym. Aby uniknąć marnowania czasu, możesz użyć serwera proxy deweloperskiego do symulowania interfejsu API CRUD i przyspieszenia opracowywania.

CrudApiPluginZa pomocą programu można symulować interfejs API CRUD (tworzenie, odczytywanie, aktualizowanie i usuwanie) przy użyciu magazynu danych w pamięci. Korzystając z prostego pliku konfiguracji, można zdefiniować adresy URL obsługiwane przez pozorny interfejs API i dane, które zwraca. Wtyczka obsługuje również mechanizm CORS na potrzeby użycia między domenami z aplikacji po stronie klienta.

MockResponsePlugin Gdzie umożliwia zdefiniowanie statycznych makiety odpowiedzi, umożliwia zdefiniowanie dynamicznego makiety interfejsu API, CrudApiPlugin którego można użyć do interakcji z danymi i wyświetlenia zmian odzwierciedlonych w pozornym zestawie danych.

Scenariusz

Załóżmy, że tworzysz aplikację, która umożliwia użytkownikom zarządzanie klientami. Aby pobrać dane, musisz wywołać /customers punkt końcowy interfejsu API zaplecza. Aby uniknąć oczekiwania na zakończenie pracy przez zespół zaplecza, decydujesz się użyć serwera proxy deweloperskiego do symulowania interfejsu API i zwrócenia potrzebnych danych.

Zacznij od włączenia CrudApiPlugin i skonfigurowania customers-api.json go do korzystania z pliku.

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

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

W pliku zdefiniujesz customers-api.json pozorny interfejs API klientów.

{
  "$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})]"
    }
  ]
}

We właściwości zdefiniujesz baseUrl podstawowy adres URL pozornego interfejsu API. We właściwości zdefiniujesz dataFile plik zawierający pozorne dane klienta. actions We właściwości zdefiniujesz obsługiwane akcje i sposób ich mapowania na metody i adresy URL PROTOKOŁU HTTP. Chcesz użyć interfejsu API do:

  • pobierz wszystkich klientów, dzwoniąc GET /v1/customers
  • uzyskiwanie pojedynczego klienta przez połączenie GET /v1/customers/{customer-id}
  • dodaj nowego klienta, wywołując polecenie POST /v1/customers,
  • zaktualizuj klienta, wywołując polecenie PATCH /v1/customers/{customer-id},
  • usuwanie klienta przez wywołanie polecenia DELETE /v1/customers/{customer-id}

W adresach URL użyjesz parametru {customer-id} , który wtyczka zastępuje rzeczywistym identyfikatorem klienta z adresu URL. Wtyczka używa również parametru {customer-id} w zapytaniu JSONPath, aby wyszukać klienta w pliku danych.

W pliku zdefiniujesz customers-data.json pozorne dane klienta.

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

Uruchom serwer proxy dewelopera i wywołasz https://api.contoso.com/v1/customers punkt końcowy. Serwer proxy dewelopera przechwytuje żądanie i zwraca pozorne dane klienta.

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

Następny krok

Dowiedz się więcej o crudApiPlugin.

CrudApiPlugin

Przykłady

Zobacz również powiązane przykłady serwera proxy deweloperów: