Freigeben über


Simulieren einer CRUD-API

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 das Warten zu vermeiden, erstellen Sie in der Regel eine simulierte API, die die benötigten Daten zurückgibt. Während dieser Ansatz die Blockierung entsperrt, müssen Sie Zeit für die Erstellung einer API aufwenden, die Sie schließlich durch die echte ersetzen. Um zeitaufwendige Zeit zu vermeiden, können Sie Dev Proxy verwenden, um eine CRUD-API zu simulieren und die Entwicklung zu beschleunigen.

Mithilfe der CrudApiPlugin-Api können Sie eine CRUD-API (Create, Read, Update, Delete) mit einem Speicher im Arbeitsspeicher simulieren. Mithilfe einer einfachen Konfigurationsdatei können Sie definieren, welche URLs Ihre Simuliert-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.

MockResponsePlugin Wo Sie statische Simuliertantworten definieren können, können Sie eine dynamische Pseudo-API definieren, CrudApiPlugin die Sie für die Interaktion mit Daten verwenden können, und ihre Änderungen im simulierten Dataset widerzuspiegeln.

Szenario

Angenommen, Sie erstellen eine App, mit der Benutzer Kunden verwalten können. Um die Daten abzurufen, müssen Sie den /customers Endpunkt der Back-End-API aufrufen. Um zu vermeiden, dass das Back-End-Team seine Arbeit abgeschlossen hat, 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 der CrudApiPlugin Datei für die Verwendung der customers-api.json 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 simulierte Kunden-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})]"
    }
  ]
}

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 deren Zuordnung zu den HTTP-Methoden und URLs. Sie möchten Ihre API für Folgendes verwenden:

  • Abrufen aller Kunden durch Anrufen GET /v1/customers
  • rufen Sie einen einzelnen Kunden ab, indem Sie anrufen GET /v1/customers/{customer-id}
  • einen neuen Kunden hinzufügen, indem Sie anrufen POST /v1/customers,
  • aktualisieren Sie einen Kunden, indem Sie anrufen PATCH /v1/customers/{customer-id},
  • Löschen eines Kunden durch 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 Dev Proxy und rufen den https://api.contoso.com/v1/customers Endpunkt auf. 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.

Beispiele

Siehe auch die zugehörigen Dev Proxy-Beispiele: