WordPress: Services Web RESTful : utilisation d’une API de service Web

WordPress: Services Web RESTful : utilisation d'une API de service Web

Dans cette série sur les services Web RESTful, nous avons appris à implémenter à la fois un service Web RESTful et un composant client à l’aide de Node.js, Express.js et JavaScript. Les trois premiers versements se sont principalement concentrés sur le code des services Web côté serveur. Il est maintenant temps de porter notre attention sur le côté client de l’équation, c’est-à-dire le consommateur de notre service. Les services RESTful sont sans état afin que tout client utilisant le protocole HTTP puisse accéder aux données. Le client peut être un navigateur, une application native, un appareil IoT ou toute autre technologie prenant en charge le protocole HTTP ou HTTPS. Étant donné que nous travaillons avec JavaScript, il est logique que nous utilisions un navigateur pour accéder à notre service.

Affichage des données d’objet

Dans Supporting CRUD Operations, nous avons récupéré des données d’objet via des liens HTML. Cela fonctionnait assez bien, mais les données n’étaient en aucun cas traitées côté client, de sorte que les données JSON étaient affichées sous leur forme brute :

Données JSON pour le 2ème véhicule

Mettons à jour la page index.html pour afficher les données du véhicule de manière plus significative.

Pour commencer, nous allons créer un tout nouveau fichier index.html où les liens pointent vers le serveur que nous avons créé dans le didacticiel Prise en charge des opérations CRUD. Voici le balisage pour cela jusqu’à présent:



  
    
    
    

    Démo des services Web RESTful%MINIFYHTMLcf9ba4ec0749dc09a1a88062a26f28e210%%MINIFYHTMLcf9ba4ec0749dc09a1a88062a26f28e211%
  
    
    
    
    
    
    %MINIFYHTMLcf9ba4ec0749dc09a1a88062a26f28e25%

Important : si vous n’avez pas activé CORS sur le serveur, vous obtiendrez une erreur « CORS header ‘Access-Control-Allow-Origin’ missing » lorsque vous contacterez le serveur sur un domaine différent. Le code suivant permet au serveur d’indiquer au navigateur qu’il est autorisé à utiliser une origine supplémentaire :

const cors = require('cors');
app.use(cors());

Ensuite, nous allons intercepter le lien de navigation et appeler le point de terminaison du serveur via AJAX afin de pouvoir rester sur la page et afficher les données du véhicule sous une forme :

$(() => {
  $('#getterLinks a').click(evt => {
    evt.preventDefault();
    const link = evt.target.href;
    // clear the form
    $("#vehicleForm :input").val("");
    $.getJSON(link, (data) => {
      $("#vehicleForm :input").each((index, elm) => {
        const $elm = $(elm);
        $elm.val(data[$elm.attr('name')]);
      });
      $lblResults.text("");
      $buttons.prop('disabled', false);
    }).fail((response, textStatus, xhr) => {
      console.log("Couldn't load vehicle!");
      $buttons.prop('disabled', true);
    });
  });
});

Voici le balisage de notre formulaire :

En l’occurrence, j’ai mappé les noms de champs de formulaire à ceux de l’objet JSON afin que nous puissions simplement itérer sur chacun pour récupérer l’attribut JSON correspondant :

$.getJSON(link, (data) => {
  $("#vehicleForm :input").each((index, elm) => {
    $elm = $(elm);
    $elm.val(data[$elm.attr('name')]);
  });
}).fail((err) => {
  console.log( err );
});

Affichage des messages à l’utilisateur

Parfois, il ne suffit pas de définir le contenu du formulaire. Pour les mises à jour et les exceptions, vous souhaiterez informer l’utilisateur du succès ou de l’échec. Nous allons ajouter une étiquette au-dessus du formulaire à cet effet, ainsi qu’une fonction qui définit le message :

="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Consuming RESTful Web Services Demo

En plus de définir la valeur de l’étiquette, la fonction showUserMessage(), illustrée ci-dessous, efface également le message après 5 secondes, de sorte que le message ne s’affiche que s’il est pertinent pour l’action précédente :

$(() => {
  const $lblResults = $('#lblResults');
  const $buttons    = $(':input[type="button"]');
  
  const showUserMessage = (msg, disableButtons) => {
    $('.container').get(0).scrollIntoView(200);
    $lblResults.text(msg);
    setTimeout(() => $lblResults.text(''), 5000);
    $buttons.prop('disabled', disableButtons);
  };
// ...

Nous pouvons maintenant appeler showUserMessage() à partir de nos gestionnaires de réussite et d’échec AJAX :

$.getJSON(link, (data) => {
  $("#vehicleForm :input").each((index, elm) => {
    const $elm = $(elm);
    $elm.val(data[$elm.attr('name')]);
  });
  showUserMessage("", false);
}).fail((response, textStatus, xhr) => {
  showUserMessage("Couldn't load vehicle!", true);
});

Dans une application réelle, on peut définir différentes classes sur l’étiquette du message pour distinguer les erreurs des notifications de réussite, mais cela dépasse le cadre de cet article.

js api

Modification des données d’objet

Cette fois-ci, les champs de formulaire – à l’exception de l’ID – sont modifiables, nous pouvons donc mettre à jour leurs valeurs en place. Lorsque nous sommes prêts, nous pouvons soumettre le contenu du formulaire en cliquant sur un bouton que nous pouvons placer au bas du formulaire :


Le clic sur le bouton invoque le gestionnaire suivant :

$("#btnUpdate").click((evt) => {
  const form = evt.target.form;
  const id   = $("#vehicleForm input[name=id]").val();
  $.ajax({
    url: `${form.action}/${id}`,
    type: "POST",
    data: $(form).serialize(),
    success: (data, textStatus, xhr) => {
      showUserMessage('Vehicle successfully updated.', false);
    },
    error: (xhr, textStatus, errorThrown) => {
      showUserMessage(xhr.responseText, true);
    }
  });
});

Suppression des données d’objet

Plutôt que de supprimer un véhicule spécifique, comme nous l’avons fait précédemment, le bouton Supprimer s’applique désormais à tout véhicule actuellement affiché dans le formulaire. Voici le balisage du bouton :


Le code qui invoque l’API est très similaire à celui de la mise à jour, avec deux différences majeures :

  1. Le type de requête HTTP est DELETE.
  2. Le contenu du formulaire est effacé après une suppression réussie.
$("#btnDelete").click((evt) => {
  const form = evt.target.form;
  const id   = $("#vehicleForm input[name=id]").val();
  $.ajax({
    url: `${form.action}/${id}`,
    type: "DELETE",
    success: (data, textStatus, xhr) => {
      showUserMessage(xhr.responseText, true);
      // clear the form
      $("#vehicleForm :input").val("");
    },
    error: (xhr, textStatus, errorThrown) => {
      showUserMessage(xhr.responseText, true);
    }
  });
});

Conclusion

Et cela conclut cette série sur l’utilisation des services Web RESTful en JavaScript. Voici une démo qui présente les fonctionnalités d’aujourd’hui :

All the CMS Templates You Could Ask For.

WordPress: Services Web RESTful : utilisation d'une API de service Web

2M+ items from the worlds largest marketplace for CMS Templates, Themes & Design Assets. Whether that's what you need, or you're just after a few Stock Photos - all of it can be found here at Envato Market.



WordPress: Services Web RESTful : utilisation d'une API de service Web

#Services #Web #RESTful #utilisation #dune #API #service #Web