Partager via

Simuler une API CRUD

  • Article

Lors de la création d’applications, vous interagissez souvent avec les API principales. Parfois, ces API ne sont pas encore disponibles, ou d’autres équipes les mettent à jour pour répondre aux dernières exigences. Pour éviter d’attendre, vous créez généralement une API fictive qui retourne les données dont vous avez besoin. Bien que cette approche vous débloque, il vous oblige à passer du temps à créer une API que vous remplacez par la vraie. Pour éviter de perdre du temps, vous pouvez utiliser le proxy de développement pour simuler une API CRUD et accélérer le développement.

À l’aide du CrudApiPluginfichier , vous pouvez simuler une API CRUD (Créer, Lire, Mettre à jour, Supprimer) avec un magasin de données en mémoire. À l’aide d’un fichier de configuration simple, vous pouvez définir les URL que votre API fictif prend en charge et les données qu’elle retourne. Le plug-in prend également en charge CORS pour l’utilisation inter-domaines à partir d’applications côté client.

Là où vous MockResponsePlugin pouvez définir des réponses fictives statiques, vous CrudApiPlugin pouvez définir une API fictive dynamique que vous pouvez utiliser pour interagir avec les données et voir vos modifications reflétées dans le jeu de données fictif.

Scénario

Supposons que vous créez une application qui permet aux utilisateurs de gérer les clients. Pour obtenir les données, vous devez appeler le /customers point de terminaison de l’API back-end. Pour éviter d’attendre que l’équipe back-end termine son travail, vous décidez d’utiliser le proxy de développement pour simuler l’API et retourner les données dont vous avez besoin.

Vous commencez par activer CrudApiPlugin et configurer celui-ci pour utiliser le customers-api.json fichier.

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

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

Dans le customers-api.json fichier, vous définissez l’API des clients fictifs.

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

Dans la baseUrl propriété, vous définissez l’URL de base de l’API fictif. Dans la dataFile propriété, vous définissez le fichier qui contient des données client fictifs. Dans la actions propriété, vous définissez les actions prises en charge et la façon dont elles sont mappées aux méthodes et URL HTTP. Vous souhaitez utiliser votre API pour :

  • obtenir tous les clients, en appelant GET /v1/customers
  • obtenir un seul client, en appelant GET /v1/customers/{customer-id}
  • ajouter un nouveau client, en appelant POST /v1/customers,
  • mettre à jour un client, en appelant PATCH /v1/customers/{customer-id},
  • supprimer un client, en appelant DELETE /v1/customers/{customer-id}

Dans vos URL, vous utilisez le {customer-id} paramètre, que le plug-in remplace par l’ID client réel de l’URL. Le plug-in utilise également le {customer-id} paramètre dans une requête JSONPath pour rechercher le client dans le fichier de données.

Dans le customers-data.json fichier, vous définissez les données client fictifs.

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

Vous démarrez le proxy de développement et appelez le https://api.contoso.com/v1/customers point de terminaison. Le proxy de développement intercepte la requête et retourne les données client fictifs.

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

Étape suivante

En savoir plus sur crudApiPlugin.

CrudApiPlugin

Exemples

Consultez également les exemples de proxy de développement associés :