Plus souvent qu'autrement, lors de la construction de votre application JavaScript, vous aurez envie de récupérer les données d'un utiliser une source distante ou utiliser une API . J'ai récemment examiné certaines API accessibles au public et découvert qu'il était possible de faire beaucoup de choses intéressantes avec des données provenant de ces sources.
Avec Vue .js vous pouvez littéralement créer une application autour de l'un de ces services et commencer à servir du contenu aux utilisateurs en quelques minutes.
Je vais vous montrer comment créer une application d'actualité simple qui affiche les principaux articles d'actualité du jour. permet aux utilisateurs de filtrer par catégorie d'intérêt en récupérant les données de l'API du New York Times . Vous pouvez trouver le code complet de ce tutoriel ici .
Voici à quoi ressemblera la dernière application:
va suivre ce tutoriel. , vous aurez besoin d’une connaissance de base de Vue.js. Vous pouvez trouver un excellent guide de démarrage pour ici . J'utiliserai également la syntaxe ES6 et vous pourrez obtenir un rappel sur cette ici .
Structure du projet
Nous allons simplifier les choses en nous limitant à deux fichiers: [19659011] ./ app.js ./index.html
app.js contiendra toute la logique de notre application et le fichier index.html contiendra la vue principale de notre application.
Nous allons commencer par quelques balises de base dans index.html :
La plus grande application de nouvelles de l'histoire
VueNews
Ensuite, incluez Vue.js et app.js au bas de . html juste avant la fermeture
:
Facultativement, Foundation peut être inclus pour tirer parti de certains styles préconçus et rendre notre vision encore plus jolie. Incluez ceci dans la balise :
Création d'une application Vue simple
Commençons par créer une nouvelle instance Vue sur l'élément div # app et nous moquerons de la réponse. API utilisant certaines données de test:
// ./app.js
const vm = new Vue ({
el: '#app',
Les données: {
résultats: [
{title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
{title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
{title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
{title: "four the last time", abstract: "lorem ipsum some test dimsum"}
]
}
});
Nous indiquons à Vue quel élément monter, via l'option et et précisons les données que notre application utiliserait via l'option data .
Pour afficher ce modèle Dans la vue de l'application, vous pouvez écrire ce balisage dans l'élément #app :
{{result.title}}.
{{result.abstract}}.
La directive v-for est utilisée pour rendre notre liste de résultats. Nous utilisons également des doubles accolades pour afficher le contenu de chacune d’elles.
Remarque: pour en savoir plus sur la syntaxe du modèle Vue cliquez ici .
Nous avons maintenant le mise en page de base:
Récupération de données à partir de l'API
Pour utiliser l'API NYTimes, vous devez obtenir une clé API. Donc, si vous n'en avez pas déjà une, rendez-vous à la page d'inscription et inscrivez-vous pour obtenir une clé API pour l'API Top Stories .
Création de requêtes Ajax et traitement des réponses
Axios est un client HTTP à base de promesses permettant de formuler des demandes Ajax. Il convient parfaitement à nos besoins. Il fournit une API simple et riche. Il est assez similaire à l'API fetch mais sans la nécessité d'ajouter un polyfill pour les navigateurs plus anciens et certaines autres subtilités .
Nous pouvons maintenant demander à obtenir une liste des principales histoires de la section home une fois que notre application Vue est installée :
// ./app.js
const vm = new Vue ({
el: '#app',
Les données: {
résultats: []
},
monté() {
axios.get ("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
.then (response => {this.results = response.data.results})
}
});
N'oubliez pas: remplacez your_api_key par votre clé d'API obtenue à partir de la zone NYT Dev Network .
Nous pouvons maintenant consulter le fil d'actualité de notre page d'accueil de l'application. Ne vous inquiétez pas de la vue déformée; Nous y reviendrons un peu:
La réponse de l'API du NYT ressemble à ceci, via Vue devtools:
Conseil: Obtenez Vue Devtools pour faciliter le débogage des applications Vue.
Pour rendre notre travail un peu plus soigné et réutilisable, nous allons en faire quelques-uns refactoring et introduire une fonction d’aide pour la construction de nos URL. Nous enregistrerons également getPosts comme méthode pour notre application en l'ajoutant à l'objet méthodes :
Nous pouvons apporter d'autres modifications à notre présentation en introduisant une propriété calculée avec quelques modifications apportées aux résultats d'origine renvoyés par l'API:
// ./app.js
const vm = new Vue ({
el: '#app',
Les données: {
résultats: []
},
monté () {
this.getPosts ('maison');
},
méthodes: {
getPosts (section) {
let url = buildUrl (section);
axios.get (url) .then ((response) => {
this.results = response.data.results;
}). catch (error => {console.log (error);});
}
},
calculé: {
transformationPoints () {
let posts = this.results;
// Ajouter un attribut image_url
posts.map (post => {
let imgObj = post.multimedia.find (media => media.format === "superJumbo");
post.image_url = imgObj? imgObj.url: "http://placehold.it/300x200?text=N/A";
});
// Met Array en morceaux
Soit i, j, chunkedArray = []chunk = 4;
pour (i = 0, j = 0; i <posts.length; i + = chunk, j ++) {
chunkedArray [j] = posts.slice (i, i + chunk);
}
retourne chunkedArray;
}
}
});
Dans le code ci-dessus, dans la propriété traitée de Postes nous attachons un attribut image_url à chaque objet de journal. Nous le faisons en parcourant les résultats de l'API et en recherchant dans le tableau multimédia de chaque résultat pour trouver un type de support au format requis. Nous assignons ensuite l'URL de ce média à l'attribut image_url . Dans les cas où le média n'est pas disponible, nous transformons l'URL par défaut en une image de Placehold.it .
Nous écrivons également une boucle pour regrouper notre tableau de résultats en morceaux de quatre. Ceci corrigera la vue déformée que nous avons vue plus tôt.
Remarque: vous pouvez également effectuer facilement cette opération avec une bibliothèque telle que Lodash .
Les propriétés calculées sont excellentes manipuler des données. Au lieu de créer une méthode et de l'appeler chaque fois que nous avons besoin de diviser notre tableau de publications, nous pouvons simplement la définir en tant que propriété calculée et l'utiliser à notre guise, car Vue mettra à jour automatiquement les transformationPosts calculées. résultats modifiés
Les propriétés calculées sont également mises en cache en fonction de leurs dépendances, aussi longtemps que les résultats ne changent pas, la propriété processingPosts est renvoyée. une version en cache de lui-même. Cela contribuera aux performances, en particulier lors de manipulations de données complexes.
Ensuite, nous modifions notre balisage dans index.html pour afficher nos résultats calculés:
{{post.title}}
{{post.abstract}}
Maintenant, l'application a l'air un peu mieux:
Présentation d'un composant de liste de diffusion
Les composants peuvent être utilisés pour conserver l'application modulaire, et essentiellement étendre HTML. La «liste d’actualités» peut être modifiée en composant. Ainsi, par exemple, si l’application se développe et que la décision est prise d’utiliser la liste d’actualités ailleurs, ce sera facile:
`,
calculé: {
transformationPoints () {
let posts = this.results;
// Ajouter un attribut image_url
posts.map (post => {
let imgObj = post.multimedia.find (media => media.format === "superJumbo");
post.image_url = imgObj? imgObj.url: "http://placehold.it/300x200?text=N/A";
});
// Met Array en morceaux
Soit i, j, chunkedArray = []chunk = 4;
pour (i = 0, j = 0; i < posts.length; i += chunk, j++) {
chunkedArray[j] = posts.slice(i,i+chunk);
}
return chunkedArray;
}
}
});
const vm = new Vue({
el: '#app',
data: {
results: []
},
mounted () {
this.getPosts('home');
},
methods: {
getPosts(section) {
let url = buildUrl(section);
axios.get(url).then((response) => {
this.results = response.data.results;
}). catch (error => {console.log (error);});
}
}
});
Dans le code ci-dessus, nous enregistrons un composant global en utilisant la syntaxe Vue.component (tagName, options) . Il est conseillé d'utiliser un trait d'union lors de la définition des noms de balises, afin qu'elles n'entrent pas en conflit avec les balises HTML standard actuelles ou futures.
Les options supplémentaires que nous avons introduites sont expliquées comme suit:
Props : il s'agit d'un tableau de données que nous voulons transmettre le composant de la portée parente. Nous avons ajouté les résultats car nous les avons chargés à partir de l'instance principale de l'application.
Modèle : nous définissons ici le balisage de la liste d'actualités. Notez que nous avons enveloppé notre liste dans une balise . En effet, un composant doit avoir un seul élément racine, et non plusieurs (cela aurait été créé par notre itération div.row ).
Ajuster notre marge de manœuvre pour utiliser nos nouvelles . -list et transmettant les résultats se présente comme suit:
VueNews
Remarque: les composants peuvent également être créés en tant que composants à fichier unique ( .vue fichiers), puis analysés par un outil de construction tel que webpack . . Bien que cela dépasse le cadre de ce didacticiel, il est recommandé pour les applications plus volumineuses ou plus complexes.
Pour aller plus loin, vous pouvez même aller jusqu'à faire de chaque article un composant et le rendre encore plus modulaire. .
Implémentation des filtres de catégorie
Pour enrichir notre application, nous pouvons maintenant introduire des filtres de catégorie afin de permettre aux utilisateurs d'afficher uniquement certaines catégories d'actualités.
Commençons par enregistrer la liste des sections et la section en cours. visualisé dans notre application:
const SECTIONS = "home, arts, automobiles, livres, business, mode, alimentation, santé, initié, magazine, cinéma, national, nyregion, avis de décès, avis, politique, immobilier, sciences, sports, sundayreview, technologie, théâtre, magazine, voyages, résultats, monde "; // de NYTimes
const vm = new Vue ({
el: '#app',
Les données: {
résultats: [],
sections: SECTIONS.split (','), // crée un tableau des sections
section: 'home', // définit la section par défaut sur 'home'
},
monté () {
this.getPosts (this.section);
},
// ....
});
Ensuite, nous pouvons ajouter ceci dans notre conteneur div # app :
filtrer par catégorie
Lorsque le bouton "Récupérer" est cliqué, nous activons la méthode getPosts pour la section sélectionnée en écoutant l'événement click avec la syntaxe @click .
Touches finales et démos
J'ai décidé d'ajouter quelques touches mineures (facultatives) pour rendre l'expérience de l'application un peu meilleure, comme pour l'introduction d'une image de chargement.
Vous pouvez voir une démonstration dans CodePen ci-dessous ( fonctionnalité limitée):
Sinon, vous pouvez afficher une version en direct ici .
Conclusion
Dans ce tutoriel, nous avons appris à démarrer un projet Vue.js à partir de rien, à extraire des données d'un API à l'aide de axios et comment gérer les réponses et manipuler les données à l'aide de composants et de propriétés calculées.
Nous avons maintenant une vue.js 2.0 fonctionnelle. app, construite autour d'un service API. De nombreuses améliorations pourraient être apportées en branchant d'autres API. Par exemple, nous pourrions:
mettre automatiquement en file d'attente les publications de réseaux sociaux d'une catégorie utilisant l'API Buffer
Marquer les publications à lire ultérieurement, à l'aide de l'API de poche Pocket
…, etc.
L'ensemble du code de ce projet est également hébergé sur sur GitHub ce qui vous permet de cloner, d'exécuter et d'apporter les améliorations souhaitées.
Olayinka est un développeur autodidacte de pile complète de Lagos. Il passe son temps à gazouiller, à faire des recherches universitaires à prendre des photos, à concevoir et à écrire du code … Vous savez, les choses amusantes habituelles.
