Simulieren einer CRUD-API

  • Artikel

Beim Erstellen von Apps interagieren Sie häufig mit Back-End-APIs. Manchmal sind diese APIs noch nicht verfügbar, oder andere Teams aktualisieren sie, um die neuesten Anforderungen zu erfüllen. Um Wartezeiten zu vermeiden, erstellen Sie in der Regel eine Modell-API, die die benötigten Daten zurückgibt. Dieser Ansatz entsperrt Sie zwar, aber Sie müssen zeitaufwenden, um eine API zu erstellen, die Sie schließlich durch die echte ersetzen. Um Zeit zu vermeiden, können Sie den Dev Proxy verwenden, um eine CRUD-API zu simulieren und die Entwicklung zu beschleunigen.

CrudApiPluginMit können Sie eine CRUD-API (Create, Read, Update, Delete) mit einem In-Memory-Datenspeicher simulieren. Mithilfe einer einfachen Konfigurationsdatei können Sie definieren, welche URLs ihre Modell-API unterstützt und welche Daten zurückgegeben werden. Das Plug-In unterstützt auch CORS für die domänenübergreifende Nutzung von clientseitigen Anwendungen.

Wenn Sie statische MockResponsePlugin Pseudoantworten definieren können, CrudApiPlugin können Sie eine dynamische Pseudo-API definieren, mit der Sie mit Daten interagieren und Ihre Änderungen im Simulierten Dataset sehen können.

Szenario

Angenommen, Sie erstellen eine App, mit der Benutzer Kunden verwalten können. Zum Abrufen der Daten müssen Sie den /customers Endpunkt der Back-End-API aufrufen. Um zu vermeiden, dass das Back-End-Team seine Arbeit beendet, entscheiden Sie sich, dev proxy zu verwenden, um die API zu simulieren und die benötigten Daten zurückzugeben.

Sie beginnen mit dem Aktivieren und Konfigurieren customers-api.json der CrudApiPlugin Datei.

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

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

In der customers-api.json Datei definieren Sie die Api für Simulierte Kunden.

{
  "$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 der baseUrl -Eigenschaft definieren Sie die Basis-URL der Pseudo-API. In der dataFile -Eigenschaft definieren Sie die Datei, die simulierte Kundendaten enthält. In der actions -Eigenschaft definieren Sie die unterstützten Aktionen und wie sie den HTTP-Methoden und URLs zugeordnet werden. Sie möchten Ihre API für Folgendes verwenden:

  • Rufen Sie alle Kunden an, indem Sie anrufen GET /v1/customers
  • rufen Sie einen einzelnen Kunden auf, indem Sie anrufen. GET /v1/customers/{customer-id}
  • fügen Sie einen neuen Kunden hinzu, indem Sie aufrufen POST /v1/customers,
  • aktualisieren Sie einen Kunden, indem Sie aufrufen PATCH /v1/customers/{customer-id},
  • löschen, indem Sie einen Kunden anrufen DELETE /v1/customers/{customer-id}

In Ihren URLs verwenden Sie den {customer-id} Parameter, den das Plug-In durch die tatsächliche Kunden-ID aus der URL ersetzt. Das Plug-In verwendet auch den {customer-id} Parameter in einer JSONPath-Abfrage, um den Kunden in der Datendatei nachzuschlagen.

In der customers-data.json Datei definieren Sie die simulierten Kundendaten.

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

Sie starten den Dev Proxy und rufen den Endpunkt auf https://api.contoso.com/v1/customers . Der Dev Proxy fängt die Anforderung ab und gibt die simulierten Kundendaten zurück.

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

Nächster Schritt

Erfahren Sie mehr über crudApiPlugin.

CrudApiPlugin

Beispiele

Weitere Informationen finden Sie in den entsprechenden Dev Proxy-Beispielen: