Delen via

Een CRUD-API simuleren

  • Artikel

Bij het bouwen van apps werkt u vaak met back-end-API's. Soms zijn deze API's nog niet beschikbaar, of andere teams werken ze bij om te voldoen aan de nieuwste vereisten. Om te voorkomen dat u wacht, maakt u doorgaans een mock-API die de gegevens retourneert die u nodig hebt. Hoewel deze methode u deblokkert, moet u tijd besteden aan het bouwen van een API die u uiteindelijk vervangt door de echte. Om te voorkomen dat u tijd verspilt, kunt u Dev Proxy gebruiken om een CRUD-API te simuleren en de ontwikkeling te versnellen.

Met behulp van de CrudApiPluginAPI kunt u een CRUD-API (Maken, Lezen, Bijwerken, Verwijderen) simuleren met een gegevensarchief in het geheugen. Met behulp van een eenvoudig configuratiebestand kunt u definiëren welke URL's uw mock-API ondersteunt en welke gegevens worden geretourneerd. De invoegtoepassing biedt ook ondersteuning voor CORS voor gebruik tussen domeinen vanuit toepassingen aan de clientzijde.

Waar u MockResponsePlugin statische mockantwoorden kunt definiëren, CrudApiPlugin kunt u een dynamische mock-API definiëren die u kunt gebruiken om met gegevens te communiceren en uw wijzigingen in de mockgegevensset te zien.

Scenario

Stel dat u een app bouwt waarmee gebruikers klanten kunnen beheren. Als u de gegevens wilt ophalen, moet u het /customers eindpunt van de back-end-API aanroepen. Om te voorkomen dat het back-endteam wacht totdat het werk is voltooid, besluit u Dev Proxy te gebruiken om de API te simuleren en de benodigde gegevens te retourneren.

U begint met het inschakelen en configureren van het CrudApiPlugin bestand voor het gebruik van het customers-api.json bestand.

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

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

In het customers-api.json bestand definieert u de API voor mock-klanten.

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

In de baseUrl eigenschap definieert u de basis-URL van de mock-API. In de dataFile eigenschap definieert u het bestand met gesimuleerde klantgegevens. In de actions eigenschap definieert u de ondersteunde acties en hoe deze worden toegewezen aan de HTTP-methoden en -URL's. U wilt uw API gebruiken voor het volgende:

  • alle klanten ophalen door te bellen GET /v1/customers
  • één klant krijgen door te bellen GET /v1/customers/{customer-id}
  • een nieuwe klant toevoegen door te bellen POST /v1/customers,
  • een klant bijwerken door te bellen PATCH /v1/customers/{customer-id},
  • een klant verwijderen door te bellen DELETE /v1/customers/{customer-id}

In uw URL's gebruikt u de {customer-id} parameter, die de invoegtoepassing vervangt door de werkelijke klant-id van de URL. De invoegtoepassing gebruikt ook de {customer-id} parameter in een JSONPath-query om de klant in het gegevensbestand op te zoeken.

In het customers-data.json bestand definieert u de gesimuleerde klantgegevens.

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

U start Dev Proxy en roept het https://api.contoso.com/v1/customers eindpunt aan. Dev Proxy onderschept de aanvraag en retourneert de gesimuleerde klantgegevens.

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

Volgende stap

Meer informatie over de CrudApiPlugin.

CrudApiPlugin

Voorbeelden

Zie ook de gerelateerde Dev Proxy-voorbeelden: