Maison >interface Web >js tutoriel >Apprenez à créer un composant Web de galerie de monstres Zelda BOTW basé sur l'API dans
Apprenez à créer un composant Web de galerie de monstres Zelda BOTW basé sur l'API dans 
- PHPzoriginal
- 2024-09-03 13:33:321169parcourir
- PHPzoriginal
- 2024-09-03 13:33:321169parcourir
Les tutoriels Modulo sont de retour !
Salut à tous ! Je suis de retour avec les tutoriels Modulo après une pause estivale. J'ai encore beaucoup de tutoriels en préparation, alors restez à l'écoute. Cela dit, si vous avez des idées particulières pour mon prochain sujet, n'hésitez pas à me le faire savoir dans les commentaires !
Mon dernier tutoriel était un tutoriel super rapide et amusant "HTML uniquement, sans JS" sur le composant Pokémon Dance Party piloté par API en moins de 30 lignes de code de composant Web HTML. Certains de mes tutoriels précédents étaient un peu plus sérieux, comme ce tutoriel plus avancé sur la gestion de l'état privé et public. Si cela vous semble un peu sec, alors vous avez de la chance, car le tutoriel d'aujourd'hui est un autre tutoriel amusant, et concerne encore un autre jeu vidéo bien-aimé... Zelda : Breath of the Wild !
Bien sûr, comme toujours, les techniques apprises dans ce tutoriel sont applicables à n'importe quelle API, alors continuez à lire pour en savoir plus sur une galerie pilotée par API !
Comment utiliser l'API Hyrule Compendium
Ce tutoriel est 100% grâce à l'API Hyrule Compendium gratuite, sous licence MIT et généreusement hébergée du merveilleux Aarav Borthakur, qui est une base de données et une API amusantes et entretenues par les fans pour la récupération des informations sur la franchise Zelda: Breath of the Wild et médias. Nous utiliserons le point de terminaison "Monsters", disponible ici : https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters
Capture d'écran
Essayez-le maintenant, en moins de 30 secondes : ??? Voulez-vous avancer ? Faites défiler jusqu'à la fin et copiez les 39 lignes de code HTML dans n'importe quel fichier HTML local, puis ouvrez-le dans votre navigateur. Modulo n'a aucune dépendance et s'exécute même intégré dans des fichiers HTML locaux, donc c'est vraiment aussi simple que cela !
Commencez par les données
Commençons avec seulement 6 lignes de code, avec un StaticData et un Template pour l'afficher :
<Template>
<pre class="brush:php;toolbar:false">API DATA: {{ staticdata|json:2 }}
Dans cet extrait, nous avons un qui vide la propriété staticdata.data de l'API Hyrule Compendium renvoyée. Nous appliquons le filtre |json:2 pour l'afficher dans un format plus lisible. Le StaticData prend en charge JSON (entre autres formats) dès le départ, il vous suffit de lui donner l'URL de l'API et vous pouvez ensuite commencer à utiliser les données. Est-ce que StaticData prête à confusion ? Essayez ce tutoriel sur l'intégration de l'API GitHub, ou jouez avec les exemples interactifs dans la section "StaticData" du tutoriel du tutoriel Modulo.js.
Essayez d'exécuter cet extrait. Vous voyez les données résultantes ? Nous devrons parcourir cela avec une boucle for.
Création d'une galerie d'images
Maintenant que nous pouvons voir qu'un attribut .data contient un Tableau de Objets, parcourons-le et générons une galerie :
<Template>
{% for monster in staticdata.data %}
<img src="{{ monster.image }}" style="width: 200px;" />
{% endfor %}
</Template>
Cela générera de nombreuses balises img, chacune avec un src= attribué aux propriétés "image" des Objets dans le Array JSON d'origine, et le {% pour %} template-tag est la syntaxe permettant de dupliquer un peu de HTML pour chaque élément du tableau (sans parler de chaque index, par exemple un nombre commençant à 0). Pour une pratique plus approfondie, la boucle for contient de nombreux exemples interactifs dans la partie 4 du didacticiel Modulo.js.
Création d'un état et d'un script
La prochaine chose la plus importante à faire est de créer une nouvelle balise Script, que nous pouvons utiliser pour écrire une fonction JavaScript simple sur une ligne :
<State
selected:=null
></State>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
Il s'agit d'une technique de base pour la création de scripts lors de l'utilisation de Modulo : créez des fonctions qui vous permettent de modifier l'état à l'aide de JavaScript. Dans ce cas, il effectue une opération très simple : « Sauvegarder ce monstre pour plus tard ». Plus précisément, il attribue la variable d'état « sélectionnée » à la charge utile donnée. De cette façon, la variable d'état « sélectionné » devient une sorte de « réserve » pour le monstre qui vient d'être sélectionné dans l'API.
Attacher l'événement de clic
Maintenant, ajoutons une autre pièce du puzzle : attacher l'événement de clic. Voir ci-dessous :
<img @click:=script.select payload:="{{ monster|json }}" />
Cela a été fait avec la syntaxe de pièce jointe d'événement (@click:=, dans ceci
cas), et un attribut de charge utile, qui nous permet de transmettre le monstre que nous choisissons en cliquant sur cette image. Les événements et les balises de script peuvent être des sujets déroutants si vous êtes nouveau dans JavaScript (et même si ce n'est pas le cas !), alors parcourez les exemples sur cette page pour plus d'exemples d'utilisation de composants de script et d'attachement d'événements.
Attacher l'événement de clic
Enfin, rendons conditionnellement les informations sur le monstre lorsqu'un monstre est sélectionné :
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
This will initially show the "Welcome" message (since state.selected begins as null). Then, as soon as someone clicks on a monster image, the state.selected variable will no longer be null, and
instead the contents will displayed formatted with h1 and p tags, with some tweaks applied (|capfirst makes the first letter capital).
- Embeddable snippet
Combining it all, we then wrap everything in a display: grid to make the side-by-side layout, and a overflow: auto to the left div the scrollbar. Finally, we can add a few final CSS tweaks to the second div (padding, margin, and a linear-gradient), and we get the following results that can be embedded anywhere:
<!DOCTYPE html>
<template Modulo>
<Component name="MonsterGuide">
<Template>
<main style="display: grid; grid-template-columns: 2fr 1fr">
<div style="overflow: auto; height: 95vh;">
{% for monster in staticdata.data %}
<img src="{{ monster.image }}"
@click:=script.select payload:="{{ monster|json }}"
style="width: 200px;" />
{% endfor %}
</div>
<div style="padding: 10px; margin: 10px; background: linear-gradient(to bottom, lightyellow, goldenrod);">
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
</div>
</main>
</Template>
<State
selected:=null
></State>
<StaticData
-src="https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters"
></StaticData>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
</Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-MonsterGuide></x-MonsterGuide>
I hope you enjoyed this tutorial, if so, follow for more like this!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript