Share
Dans la partie précédente de la série, nous avons expliqué comment utiliser l'API WP REST pour récupérer le contenu du serveur. Nous avons appris à récupérer du contenu pour différentes ressources, y compris des publications, des méta-publications, des balises, des catégories, etc. Il s'agit d'une fonctionnalité puissante, car ce contenu peut être utilisé n'importe où à l'intérieur ou à l'extérieur de WordPress..
Nous avons également appris sur le OPTIONS demander à l'auto-documentation de l'API en répertoriant tous les itinéraires, leurs points de terminaison et leurs arguments respectifs. Cela réduit la nécessité de s'appuyer sur une documentation externe pour l'API et permet de détecter rapidement les modifications, au cas où l'API aurait été mise à jour ou modifiée..
Après avoir examiné ces fonctionnalités, dans le didacticiel actuel, nous allons maintenant concentrer notre attention sur les trois autres opérations de CRUD, à savoir la création, la mise à jour et la suppression de données à l'aide de l'API WP REST..
Dans ce tutoriel, nous allons:
Commençons par analyser quelles ressources prennent en charge les méthodes de création, de mise à jour et de suppression à l'aide de l'API WP REST..
Avant de plonger directement dans la création et la mise à jour de données avec l'API WP REST, nous devons analyser les itinéraires qui prennent en charge les méthodes de création et de mise à jour. Nous faisons cela en vérifiant les itinéraires et les les méthodes propriété dans leurs points d'extrémité. Cela peut être fait en envoyant un courrier séparé OPTIONS demande à des itinéraires individuels, mais un moyen plus pratique consiste à envoyer un OBTENIR demande au / wp-json itinéraire index comme nous l'avons fait dans la partie précédente de la série.
Envoi d'un OBTENIR demande au / wp-json route renvoie un objet contenant toutes les routes et leurs extrémités dans la itinéraires propriété.
C'est dans ces routes individuelles que nous pouvons vérifier si une ressource spécifique prend en charge POSTER, METTRE, et EFFACER méthodes. Commençons par analyser les Des postes Ressource.
le Des postes ressource expose les données avec les deux itinéraires suivants:
/ wp / v2 / posts / wp / v2 / posts / (? P[\ d] +)
Le premier itinéraire pointe vers la collection de l'objet poste et ses méthode la propriété est la suivante:
"méthodes": ["GET", "POST"],
Ce les méthodes propriété montre que le /des postes supports de route OBTENIR et POSTER méthodes de récupération et de création de données, respectivement.
Pour le / posts / (? P route, qui pointe vers un seul Des postes ressource, la les méthodes la propriété est la suivante:
"méthodes": ["GET", "POST", "PUT", "PATCH", "DELETE"],
Comme on peut le voir dans le code ci-dessus, le / posts / (? P route prend en charge la OBTENIR, POSTER, METTRE, PIÈCE, et EFFACER les méthodes.
En examinant les deux itinéraires ci-dessus, nous pouvons conclure que le /des postes route prend en charge la récupération et la création de ressources. Et le / posts / (? P route prend en charge la récupération des ressources ainsi que la mise à jour et la suppression. Bien que cela supporte le POSTER méthode, cette route ne supporte pas la création de ressources comme nous le verrons dans un exemple ci-dessous.
Par conséquent, les itinéraires pointant vers une ressource unique ne peuvent pas être utilisés pour créer du contenu, bien qu'ils prennent en charge la POSTER méthode. En effet, pour ces itinéraires, le POSTER, METTRE, et PIÈCE les méthodes sont utilisées pour mettre à jour le contenu de l'API WP REST.
Pour conclure cette section, résumons les concepts que nous avons appris ici:
Accentsconagua
OBTENIR, POSTER, et EFFACER méthodes en envoyant un OPTIONS demande.POSTER méthode.Après avoir analysé différents itinéraires, nous sommes maintenant prêts à créer du contenu à l’aide de l’API WP REST et nous commencerons par explorer la Des postes Ressource.
Créons une publication en envoyant une demande de test de Postman ou de tout autre client HTTP. Pour ce faire, démarrez votre client HTTP et envoyez un message. POSTER demande au /des postes route. Mais avant cela, rappelez-vous que la création, la suppression et la mise à jour des ressources nécessitent une authentification en tant qu'utilisateur avec edit_posts droits. Nous allons donc utiliser la méthode d’authentification de base que nous avons apprise dans la deuxième partie de cette série..
Initialement, nous envoyons un corps de requête vide avec la requête à des fins de test:
$ POST / wp / v2 / posts
Le serveur retournera un 400 - Mauvaise demande erreur puisque les arguments requis étaient manquants dans le corps de la demande. La réponse suivante sera renvoyée par le serveur:
La réponse indique que l’un des deux contenu, Titre, ou extrait sont nécessaires pour créer un objet post. Ces arguments peuvent être envoyés avec la requête dans le corps de la requête de l’une des trois manières suivantes:
C'est simplement une question de choix d'utiliser l'une de ces méthodes, et nous les étudierons plus en détail plus loin dans ce didacticiel. Mais utilisons maintenant la première méthode pour créer un post.
Pour envoyer des arguments en tant qu’objet JSON dans Postman, passez à la Corps onglet et sélectionnez le brut bouton radio. Ensuite, dans le menu déroulant à droite, sélectionnez le JSON (application / json) option. Dans la zone de texte ci-dessous, vous pouvez ensuite ajouter le corps JSON..
Actuellement, ce corps JSON ne contient qu'une propriété pour le Titre de la poste.
Envoyez la demande en cliquant sur le bouton Envoyer bouton. Si tout se passe bien, le serveur retournera un 201 - Créé statut avec l'objet de publication nouvellement créé comme réponse.
Le statut par défaut de ce poste nouvellement créé est Brouillon. Nous pouvons mettre à jour le statut, ainsi que d'autres propriétés, en envoyant un autre POSTER, METTRE, ou PIÈCE demande. L'identifiant de la poste renvoyée dans mon cas est 232, Je vais donc envoyer une demande au terminal suivant:
$ POST / wp / v2 / posts / 232
Le corps de la requête pour mettre à jour le statut et le contenu propriété ressemble à ceci:
"status": "publier", "contenu": "Ceci est le contenu de l'article"
Après avoir envoyé la demande, le serveur retournera un 200 - OK statut, ce qui signifie que le message a été mis à jour avec succès.
Dans l'exemple ci-dessus, nous avons rencontré les trois arguments suivants pour créer un article:
TitrestatutcontenuLa liste complète des arguments supportés pour la création d’une publication peut être récupérée par un simple OPTIONS demande comme suit:
$ OPTIONS / wp / v2 / posts
Nous pouvons alors vérifier le args propriété dans le POSTER tableau de méthodes.
Maintenant que nous avons appris comment créer et mettre à jour un message, examinons quelques ressources supplémentaires avec lesquelles nous pouvons travailler..
Mise à jour: l'utilisation de méta de page et de page dans l'API WP REST nécessite désormais un plug-in associé disponible sur GitHub par l'équipe API WP REST..
Des méta post peuvent être créées en envoyant un POSTER demande à l'itinéraire suivant:
/ wp / v2 / posts / (? P[\ d] +) / meta
Où (? P est l'ID de la publication parente. Je vais utiliser l'ID du message que nous avons créé dans la section précédente, qui est 232.
De la même manière que nous envoyons un corps de requête pour créer un objet post, un objet JSON comprenant deux propriétés peut être envoyé pour créer un méta post. Ces deux propriétés sont clé et valeur.
"clé": "nom", "valeur": "Bilal"
Les valeurs du clé et valeur les propriétés sont prénom et Bilal respectivement.
Envoyez la demande et le serveur retournera un 201 - Créé code de statut, indiquant que la méta de la publication a été créée avec succès. Le méta-objet post nouvellement créé sera également renvoyé dans la réponse:
Veuillez noter qu'au moment de la rédaction de ce tutoriel, l'API WP REST ne prend pas en charge les valeurs entières pour la création de méta post. Si nous essayons d’envoyer une valeur entière dans l’objet JSON pour créer des méta-posts, un 400 - Mauvaise demande le code d'état sera retourné par le serveur.
"clé": "valeur", "valeur": 12345
Notez les guillemets manquants autour de la valeur 12345. La réponse renvoyée sera comme suit:
Donc, tout ce que vous envoyez avec la demande de création d'une méta doit être au format chaîne.
Jusqu'à présent, dans ce didacticiel, nous utilisons le format JSON dans le corps de la demande pour créer et mettre à jour des ressources. Examinons toutes les options offertes par l'API WP REST pour la création et la mise à jour de données..
Le moyen le plus simple d'envoyer des données avec la demande consiste à les envoyer sous forme de paramètres d'URL. Considérer ce qui suit POSTER demande de création d'un post:
$ POST / wp / v2 / posts? Title = le + titre & contenu = ceci + est + le + contenu
La requête ci-dessus envoie deux paramètres au serveur pour la Titre et le contenu de la poste.
De même, pour créer une méta de publication pour une publication ayant un ID de 232, nous utilisons ce qui suit POSTER demande:
$ POST / wp / v2 / posts / 232 / meta? Clé = nom & valeur = Bilal
La requête ci-dessus créera le méta-objet suivant:
Cette méthode convient mieux lorsque les paramètres sont des chaînes courtes, comme dans l'exemple ci-dessus. Mais à mesure que le nombre de paramètres et la longueur de leurs valeurs augmentent, il devient difficile de les gérer en tant que paramètres URL..
En utilisant cette méthode, nous prenons les arguments comme une paire clé / valeur dans un objet JSON pour les transmettre avec la demande. Jusqu'à présent, nous utilisions Postman pour envoyer des requêtes au serveur. Nous allons maintenant regarder comment nous pouvons implémenter cette méthode en utilisant HTML et jQuery.
Considérez le formulaire simple suivant composé de trois champs pour le Titre, statut, et le contenu:
Lorsque le formulaire ci-dessus est soumis, le code JavaScript (jQuery) suivant est exécuté:
var postForm = $ ('# post-formulaire'); var jsonData = fonction (formulaire) var arrData = form.serializeArray (), objData = ; $ .each (arrData, fonction (index, elem) objData [elem.name] = elem.value;); return JSON.stringify (objData); ; postForm.on ('submit', fonction (e) e.preventDefault (); $ .ajax (url: 'http: // votre-dev-serveur / wp-json / wp / v2 / posts', méthode: 'POST', données: jsonData (postForm), crossDomain: true, contentType: 'application / json', beforeSend: function (xhr) xhr.setRequestHeader ('Autorisation', 'Nom d'utilisateur de base: mot de passe');, succès: fonction (données) console.log (données);, erreur: fonction (erreur) console.log (erreur);););Lors de la soumission du formulaire ci-dessus, nous envoyons une demande AJAX au / wp / v2 / posts route. le jsonData () Cette méthode accepte une instance jQuery du formulaire HTML et convertit ses données au format JSON. Ces données JSON sont ensuite utilisées dans le Les données propriété du $ .ajax () méthode. De plus, nous définissons le type de contenu sur application / json en utilisant le contentType propriété.
Avant d’envoyer la demande, nous définissons l’en-tête pour inclure le Autorisation en-tête pour utiliser la méthode d'authentification de base. Nous avons déjà appris à configurer et utiliser la méthode d’authentification de base dans la deuxième partie de cette série..
Enfin, la demande est envoyée au / wp / v2 / posts route, et un nouveau poste est créé. Cet objet post nouvellement créé est renvoyé par le serveur en tant que réponse et il suffit de le connecter à la console située à l'intérieur du dossier. Succès() méthode.
L'exemple ci-dessus illustre l'utilisation du format JSON pour envoyer des données avec la demande. La source de cet objet JSON peut être autre chose qu'un formulaire HTML, en fonction de l'architecture de votre application..
Notez que pour que le code ci-dessus fonctionne correctement, vous devrez peut-être définir le paramètre En-têtes de contrôle d'accès autorisés champ d'en-tête pour inclure le Autorisation et Type de contenu valeurs. Cela peut être fait en ajoutant le code suivant dans votre WordPress .htaccess fichier:
Ensemble d'en-têtes Access-Control-Allow-Headers "Content-Type, Authorization"
Regardons maintenant l'envoi de données via des formulaires HTML.
Le dernier moyen d’envoyer des données lors de la demande consiste à utiliser des formulaires HTML. Ces formulaires doivent contenir des champs avec le prénom attribut. le prénom attribut sert de nom d'argument comme Titre, statut, contenu, etc. Les valeurs de ces champs servent de valeur à ces arguments.
Nous pouvons utiliser le même formulaire HTML créé dans l'exemple précédent, puis utiliser le code suivant pour créer un nouveau message:
var postForm = $ ('# post-formulaire'); postForm.on ('submit', fonction (e) e.preventDefault (); $ .ajax (url: 'http: // votre-dev-serveur / wp-json / wp / v2 / posts', méthode: 'POST', data: postForm.serialize (), crossDomain: true, beforeSend: function (xhr) xhr.setRequestHeader ('Authorization', 'Nom d'utilisateur de base: mot de passe');, success: function (data) console. log (data);););Le code ci-dessus est identique à l'exemple précédent, sauf que nous avons supprimé le jsonData () méthode et nous envoyons maintenant les données de formulaire en format chaîne en utilisant jQuery sérialiser () méthode. Le code jQuery ci-dessus utilise la valeur par défaut application / x-www-form-urlencoded type de contenu qui envoie les données sous la forme d’une chaîne géante avec des arguments séparés par le Et signe et leurs valeurs étant attribuées à l'aide du = signe. Cela ressemble un peu à l'envoi de données sous forme de paramètres d'URL, sauf que cela n'expose pas les données. C'est un moyen efficace d'envoyer des données si celles-ci ne contiennent que des caractères alphanumériques..
Pour envoyer des données binaires (non alphanumériques), nous utilisons le multipart / form-data type de contenu. Cette méthode peut être utilisée si nous devons télécharger des images ou d’autres fichiers à l’aide de l’API WP REST..
Pour envoyer des données de formulaire dans Postman, vous pouvez basculer vers Corps onglet et ensuite utiliser soit le Données de formulaire ou x-www-form-urlencoded option.
Les arguments peuvent ensuite être définis dans des paires clé / valeur à envoyer avec la requête..
Des informations détaillées sur les différents types de formulaires sont disponibles dans les spécifications du W3C..
multipart / form-data Type de contenuMaintenant que nous avons examiné le x-www-form-urlencoded type de formulaire, qui envoie des données sous la forme d’une chaîne, commençons par explorer un type de codage de formulaire plus avancé, c.-à-d.. multipart / form-data.
le multipart / form-data Le type de contenu est utilisé pour traiter des données binaires. Il peut donc être utilisé pour télécharger des images ou d'autres types de fichiers sur le serveur..
Dans l’exemple suivant, nous utilisons un formulaire HTML simple consistant en un input [type = ”fichier”] et un peu de jQuery pour télécharger des images sur le serveur à l'aide du / wp / v2 / media route.
Considérez le formulaire HTML suivant:
Le code JavaScript suivant sera exécuté lors de l'envoi du formulaire ci-dessus:
var imageForm = $ ('# image-form'), fileInput = $ ('# fichier'), formData = new FormData (); imageForm.on ('submit', fonction (e) e.preventDefault (); formData.append ('fichier', fichierInput [0] .files [0]); $ .ajax (url: 'http: // votre-dev-server / wp-json / wp / v2 / media ', méthode:' POST ', données: formData, crossDomain: true, contentType: false, processData: false, beforeSend: function (xhr) xhr.setRequestHeader ( 'Autorisation', 'Nom d'utilisateur de base: mot de passe');, succès: fonction (données) console.log (données);, erreur: fonction (erreur) console.log (erreur););) ;Ici, nous obtenons d’abord une instance jQuery du formulaire et son champ de saisie. Puis on initialise une nouvelle Données de formulaire objet. le Données de formulaire L’interface permet de construire un ensemble de champs de formulaire avec des paires clé / valeur et utilise le même format que le multipart / form-data type d'encodage de formulaire.
Lorsque le formulaire est soumis, nous l'empêchons de le faire en appelant le .preventDefault () méthode sur l'objet événement. Nous ajoutons ensuite un nouveau champ à la Données de formulaire exemple en utilisant le .ajouter() méthode. le .ajouter() méthode accepte deux arguments pour la prénom et le valeur du champ. L'API REST WP applique le prénom attribut du champ de saisie du fichier à fichier. C'est pourquoi nous avons défini le premier argument, le prénom-être fichier, et pour le second argument, nous passons un objet blob de fichier en faisant référence à l'élément input.
Par défaut, les données transmises dans le Les données propriété du jQuery.ajax () La méthode est traitée dans une chaîne de requête. Étant donné que nous téléchargeons des fichiers image ici, nous ne voulons pas que cela se produise, et pour cela, nous définissons la données de processus propriété à faux. Nous avons également mis le contentType propriété à faux pour prévenir application / x-www-form-urlencoded en cours d'envoi au serveur comme type de contenu par défaut.
Et enfin, nous définissons la Autorisation en-tête pour nous authentifier en tant qu'utilisateur avec edit_posts privilèges.
Veillez à exécuter le script ci-dessus depuis un serveur. Si tout se passe bien et que le fichier est téléchargé, le serveur renverra le nouvel objet multimédia créé..
Cette image peut ensuite être définie comme une image sélectionnée pour un article..
Après avoir examiné de près les moyens de créer et de mettre à jour des ressources à l'aide de l'API WP REST, voyons comment nous pouvons les supprimer..
Supprimer des données avec l’API WP REST est aussi simple que d’envoyer une EFFACER demande à une ressource particulière.
Si nous devons supprimer un article ayant un identifiant de dix, nous envoyons ce qui suit EFFACER demande:
$ DELETE / wp / v2 / posts / 10
Cela déplacera le message dans la corbeille mais ne le supprimera pas définitivement. Pour supprimer définitivement un article, nous utilisons le Obliger argument:
$ DELETE / wp / v2 / posts / 10? Force = true
Notez que le Obliger l'argument est requis lors de la suppression d'une ressource qui ne prend pas en charge la corbeille. Des exemples de telles ressources sont post meta et media.
Cela dit, nous concluons maintenant la partie actuelle de la série.
Dans ce long tutoriel, nous avons examiné la création, la mise à jour et la suppression de différents types de ressources à l'aide de l'API WP REST. Nous avons découvert différentes méthodes pour envoyer des données avec la demande, notamment en envoyant des données sous forme de paramètres d'URL, au format JSON et à l'aide de formulaires. À la fin du didacticiel, nous avons appris la suppression de ressources en envoyant un message. EFFACER demande.
Dans le prochain et dernier volet de la série, nous étudierons la structure interne de l'API WP REST et ses classes. Nous allons également apprendre à étendre l'API pour modifier les réponses du serveur. Rendez-vous dans la suite de la série, restez à l'écoute…
