Partager via

Simuler une API CRUD

  • Article

Lors de la création d’applications, vous interagissez souvent avec les API back-end. 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, elle vous oblige à consacrer du temps à la création d’une API que vous finissez par remplacer 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 de CrudApiPlugin, vous pouvez simuler une API CRUD (Create, Read, Update, Delete) 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 factice 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.

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

Scénario

Par exemple, 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 le et le CrudApiPlugin configurer 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 fictive. Dans la dataFile propriété , vous définissez le fichier qui contient des données client fictives. 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 fictives.

[
  {
    "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 dev Proxy et appelez le point de https://api.contoso.com/v1/customers terminaison. Dev Proxy intercepte la requête et retourne les données client fictives.

[
  {
    "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 :