A développement Application API rest – partie 5: ajout de paramètres personnalisés et de contacts supplémentaires
Dans la dernière partie de cette série, nous avons développé la base de l’application en utilisant Facebook REACT et avons intégré une solution simple qui permet aux utilisateurs de fournir l’essence de la sagesse éternelle au besoin. Cette fois, nous nous concentrerons sur deux aspects principaux: l’ajout de paramètres personnalisés aux sites WordPress afin de faciliter la vie en offrant un grand nombre de citations et l’ajout de petits éléments supplémentaires à React. Pour rappel rapide de la configuration générale, nous avons lancé l’installation WordPress locale sur http:\/\/walden.dev\/ Et fournit du contenu via l’API rest. Nous lisons ce contenu dans l’application React locale que nous exécutons sur http:\/\/www.thoreauapp.dev\/ – Oui.
Bon, au boulot! L’introduction de paramètres personnalisés dans l’API rest est restée simple jusqu’à présent, en n’utilisant que l’API rest pour revenir à une liste de messages que nous avons ensuite analysés et visualisés. Cependant, nous pouvons également choisir d’étendre l’API et d’ajouter des paramètres personnalisés entièrement personnalisés. Comme le document le souligne clairement, cela implique deux choses: créer une fonctionnalité dans wordpress pour gérer nos paramètres personnalisés. Enregistrez le chemin pour le rendre disponible via l’API rest. Vérifions si l’option \
Testez le paramètre personnalisé pour ajouter l’API de repos de base.
\/ * *
* obtenez le titre du dernier article de l’auteur!
* *
@ Param Array $Data Function option.
Chaîne de retour | le titre du dernier message était nul, * sinon, null.
* \/
Fonction my _ AWESOME func ($Data) {
$post = get _ Post (array (
« auteur» = > $expéditeur
Utilisez React.
Ce n’est pas grand chose, étant donné que nous n’avons que quelques offres, mais si nous en avons des milliers? Les choses peuvent rapidement devenir risquées. Au lieu de cela, nous allons utiliser un paramètre personnalisé pour obtenir une liste de tous les identifiants de poste, en choisir un au hasard dans la liste, puis télécharger les données vous – même à chaque fois. Commençons par configurer les paramètres personnalisés. Le code suivant est basé sur une combinaison d’exemples de documentation API rest et de tutoriels Delicious Brains. Encore une fois, il est au bas de la fonction. Php dans le répertoire des sujets actifs:
Renvoie tous les identifiants de poste
Fonction Walden _ get all post ids () {
$all _ post id = get posts (array (
\
« post _ type» = > « message»,
« champ» = > « id»,
));
Renvoie $all _ post ID;
}
Ajouter Walden \/ V1 \/ get all post ID path
Add _ action (‘rest API init’, Function () {
Register _ rest route (‘Walden \/ v1’, ‘get all post ID \/’, array (
« méthode» = > « obtenir»,
« callback» = > « Walden _ get all post id»,
));
}); Quand nous appellerons maintenant http:\/\/walden.dev\/wp-json\/walden\/v1\/get-all-post-ids , we received a clean set of Post id:
Maintenant, nous avons apporté quelques changements rapides au Code React pour utiliser les données au lieu de ce que nous avons fait précédemment. Nous passerons d’abord le nouveau paramètre personnalisé et l’URL du post API rest précédent: reactdom. Rendu
Getallid: fonction () {
Console. Log (‘getallids called’);
$. Ajax
URL: ceci. Accessoires. Idurl,
Type de données: \
Cache: false,
Succès: fonctions (données)
Voilà. Définir l’état ({données: données});
Voilà. Sélectionnez andomquote ();
}. Liaison (ceci),
Erreur: fonctions (xhr, Status, Err) {
Console. Erreur (this.props.url, Status, err.tostring ();
}. BIND (this)
});
},
Selectrandomquote: function () {
Var randomnumber = maths. Plancher (math.random () * ceci. Statut Données Longueur);
Var selectedquote = ceci. Statut Date [no];
Voilà. Définir l’état ({selectedquote id: selectedquote});
Voilà. Getquote ();
},
Getquote: function () {
$. Ajax
URL: ceci. Accessoires. URL de données + ceci. Statut Selectedquoteid,
Type de données: \
Cache: false,
Succès: fonctions (données)
Voilà. Définir l’état ({selectedquotecontent: data.content.rendered});
}. Liaison (ceci),
Erreur: fonctions (xhr, Status, Err) {
Console. Erreur (this.props.url, Status, err.tostring ();
}. BIND (this)
});
},
Componentdidmount: function () {
Voilà. Getallid ();
}, nous apporterons également des modifications mineures au contenu transmis dans la composante devis afin de rétablir les modifications ci – dessus:
Nous laisserons ces améliorations potentielles au lecteur en tant qu’exercice, mais il y a un petit aspect à traiter à ce stade. À ce stade, nous sommes toujours en train de réorganiser la sortie HTML de WordPress en utilisant cette approche légèrement menaçante qui semble dangereuse
Définissez l’entité innerHTML dans la composante devis. Ce serait idéal si nous pouvions gérer cette œuvre dans WordPress plutôt que d’être un peu maladroits dans React. Var Quota = réaction. Créer une classe créer une classe ({0}
Rendu: fonctions () {
Retour (
);
}
}); Heureusement, cela est relativement facile en ajoutant un champ supplémentaire au paramètre existant en utilisant le champ Register _ API décrit dans la documentation rest API. Encore une fois, en s’appuyant sur le tutoriel Delicious Brain mentionné précédemment, nous réorganisons le Code existant en fonction. Php ajoute un champ supplémentaire à la réponse ci – dessous qui contient une version de devis belle, conviviale et claire: \/ \/ retourner le contenu clair pour les messages
Fonction Walden _ return plaintext content ($Object, $Field name, $Request) {
Renvoie l’étiquette Strip _ Tag (HTML entity decode ($object [‘Content’] [‘rendered’]);
}
Ajouter _ action (‘rest API init’, ‘Setup rest route’);
Ajouter _ action (‘rest API init’, ‘add Plaintext Response’);
Ajouter Walden \/ V1 \/ get all post ID path
Configuration _ rest route () {fonctions
Register _ rest route (‘Walden \/ v1’, ‘get all post ID \/’, array (
« méthode» = > « obtenir»,
« callback» = > « Walden _ get all post id»,
));
}
Fonction add _ plaintext Response () {
Demande d’ajout d’un contenu clair pour un billet personnel
Register _ API Field
« envoyer»,
« texte clair»,
Transporteur (
‘get _ Callback’ = > ‘Walden return plaintext content’,
()
}
Pour s’assurer que nos paramètres personnalisés fonctionnent toujours http:\/\/walden.dev\/wp-json\/walden\/v1\/get-all-post-ids – Oui. Voyons si nous utilisons http:\/\/walden.dev\/wp-json\/wp\/v2\/posts\/4 – Oui.
Votre application. Si nécessaire, vous pouvez également ajouter des champs supplémentaires aux paramètres standard. Restez à l’écoute de la dernière partie de cette série, nous allons résumer le contenu et vous donner un aperçu rapide de l’interaction avec les services externes par l’intermédiaire de l’API. Comme toujours, si vous avez des questions ou des suggestions, veuillez nous contacter via les commentaires ci – dessous et nous faire savoir! Image surlignée: geralt