Maintenant que nous avons terminé de développer un serveur API REST à part entière en utilisant Loopback
, la prochaine question qui se posera dans votre esprit est,
comment adapter l'application React pour utiliser ce serveur API REST ?
Comme nous l'avons fait dans les cas précédents,
nous devrons également reconfigurer notre application React pour utiliser spécifiquement les
points de terminaison de l'API REST et
les différentes requêtes API REST exposées par notre serveur Loopback.
Pour commencer cet exercice,
clonez d'abord le dépôt git qui contient
une réapplication terminée qui communique avec notre serveur de bouclage.
Donc, pour ce faire, allez à votre emplacement pratique sur vos ordinateurs.
Je vais cloner le dépôt git en
tapant git clone
https://github.com/jmuppala/conFusion-React-Loopback.git,
puis cloner ce dépôt git.
Une fois que le dépôt git est cloné,
nous allons passer dans le dossier Confusion-React-Loopback
, puis effectuer une installation de fil pour installer tous les modules de noeud pour cette application.
Avant de démarrer l'application React,
assurez-vous que votre serveur de bouclage est correctement configuré.
Dans le serveur de bouclage,
dans le dossier client,
déplacez les images que nous avons données en tant que fichier images.zip,
décompressez-le, puis déplacez les images dans
le dossier images sous le dossier client comme indiqué ici.
En outre, renommez le fichier root.js en tant que root.jsold ou supprimez le fichier root.js.
Nous n'avons plus besoin de cela dans notre application car nous voulons nous assurer que
notre serveur sauvegarde le contenu du dossier client.
Donc, pour y parvenir,
ouvrons le fichier middleware.json,
et dans le fichier middleware.json,
dans la partie fichiers,
ajoutez-le dans la partie fichiers de votre fichier middleware.json.
Donc, nous allons dire, Loopback statique et params : dollar bank dot dot slash client »,
indiquant que votre serveur Loopback enregistrera le
contenu statique du dossier client ici.
Après avoir apporté ces modifications
, vous pouvez lancer votre serveur.
Assurez-vous que votre serveur MongoDB est
également opérationnel avant de lancer votre serveur Loopback.
Ensuite, après cela, nous compilerons et lancerons notre client React.
Maintenant, assurez-vous encore une fois que votre serveur MongoDB et votre serveur Loopback sont en marche,
allez au terminal et ajoutez le terminal.
Tapez fil commencer à démarrer notre application Loopback, l'application React.
Ainsi, lorsque l'application démarre dans le navigateur,
vous remarquerez que l'application React basée sur
la boucle se comporte exactement comme les versions précédentes de l'application React.
Donc, ici nous avons la page d'accueil,
puis nous avons la page À propos de nous comme nous le voyons ici,
puis la page Menu où les éléments de Menu sont répertoriés ici,
la page Contactez-nous comme prévu.
Ensuite, laissez-moi revenir à la page d'accueil et puis me connecter en tant qu'administrateur.
Alors, connectons-nous en tant qu'administrateur,
et puis tu pourras voir mes favoris.
Je me suis connecté plus tôt, puis j'ai ajouté un élément à Mes favoris.
Allons maintenant dans le Menu, puis ajoutez un deuxième élément dans Mes Favoris.
Donc, ici, nous allons ajouter cet élément dans les favoris,
puis vous serez en mesure de voir que ces deux éléments sont maintenant dans Mes favoris.
De même, vous pouvez supprimer des éléments des favoris.
Alors, allons de l'avant et supprimons ceci de nos Favoris.
Pour revenir à l'élément Menu,
ajoutons un commentaire à l'un des plats.
Alors, laissez-moi cliquer sur ce plat,
puis nous allons soumettre un commentaire.
Ainsi, lorsque nous soumettons un commentaire,
comme vous pouvez le voir, le commentaire est ajouté à
notre serveur comme
prévu et le résultat est affiché sur la page Dish Detail ici.
Pour revenir à la page d'accueil,
nous constatons que notre application React est maintenant capable de communiquer avec
le serveur Loopback, puis d'obtenir
les données du serveur et d'interagir avec le serveur comme prévu.
Maintenant, bien sûr, la question qui se poserait dans votre esprit est,
comment cette application Loopback communique-t-elle avec le serveur Loopback ?
Maintenant, c'est là que nous notons que pour Loopback,
puisque le serveur Loopback expose les points de terminaison de l'API REST,
mon application React est capable d'accéder au serveur Loopback aux
points de terminaison de l'API REST correspondants, puis de communiquer avec le serveur,
comme nous l'avons fait avec notre propre serveur API REST que nous avions mis en œuvre plus tôt.
Alors, allons de l'avant et jetons un oeil au code de l'application React modifiée.
Aller au code de notre application,
les principaux changements que vous remarquerez seront dans le fichier ActionCreators.js.
Ici, vous remarquerez que nous communiquons maintenant avec
le serveur Loopback au lieu du serveur API REST que nous avions précédemment.
Ainsi, la récupération va maintenant accéder au serveur de bouclage au point
de terminaison api/comments ou au point de terminaison api/plats et ainsi de suite.
Donc, toutes ces requêtes de récupération sont toutes mises à jour pour accéder à notre serveur Loopback instantané.
Donc, vous remarquerez des changements similaires là-bas.
Maintenant, en plus de vous connecter à notre serveur Loopback,
alors allons au code de connexion ici.
Donc, dans l'utilisateur de connexion,
nous publions une récupération sur le point de terminaison BaseURL et API/clients/login,
puis nous fournirons les informations d'identification dans le corps du message de demande qui sort.
En réponse à cela,
le serveur renvoie la réponse.
La réponse contient ensuite les informations de jeton.
Les informations de jeton sont renvoyées sous la forme de
l'ID du message de réponse.
Ainsi, l'ID lui-même sert de jeton.
Donc, le message de réponse lui-même,
je vais enregistrer cela dans mon stockage local comme indiqué ici.
Nous stringifions le message de réponse, puis stockons cela là-dedans.
Ce message de réponse, Response.id, contient le jeton.
Ainsi, le response.id sert de jeton Web JSON pour accéder au serveur de bouclage.
Donc, c'est pourquoi vous remarquerez que dans les
situations où j'ai besoin d'accéder au serveur, donc par exemple,
nous remarquerons que lorsque nous récupérons ou postons votre favori sur le serveur,
vous remarquerez que j'obtiens le jeton en disant,
laissez jeton, JSON analyse,
LocalStorage, GetItem, jeton ici,
puis dans le champ d'en-tête Autorisation,
j'ai dit que le champ Autorisation est token.id ici comme indiqué ici.
C' est ainsi que nous pourrons nous authentifier auprès du serveur Loopback.
Donc, ici vous voyez qu'il dit, baseUrl, api/favoris,
puis obtenir la liste des favoris du serveur,
puis enregistrez-le dans notre magasin redux.
Donc, bien, une grande partie du code reste le même,
sauf pour les mises à jour que nous avons faites pour
accéder aux points de terminaison de l'API REST Loopbacks.
Maintenant, pour Angular, nous avons un SDK Loopback qui peut être construit pour notre application Angular.
Mais pour React, il n'y a pas un tel support disponible à partir de Loopback,
et donc nous devons recourir à
l'accès direct aux points de terminaison de l'API LOOPback REST comme indiqué ici en utilisant fetch,
et ensuite nous sommes capables de communiquer avec le serveur Loopback.
Avec cette compréhension rapide de la façon dont
notre application React a été mise à jour pour accéder à notre serveur Loopback,
nous terminons l'examen du serveur Loopback.
Passez plus de temps à regarder certains composants et à voir
comment ils utilisent les informations obtenues à partir du serveur de bouclage.
Vous remarquerez que la plupart des composants restent exactement les mêmes qu'avant, à l'
exception de quelques modifications mineures dans le composant favori pour obtenir les
informations du serveur Loopback
, puis l'utiliser pour afficher la liste des éléments favoris.
Autre que cela, la plupart des modifications sont limitées au fichier ActionCreators.js,
où nous avons mis à jour la récupération pour utiliser l'URL de
notre serveur Loopback pour pouvoir accéder aux différents points de terminaison de l'API REST.
Donc, avec cela, je vous ai rapidement démontré comment vous pouvez construire votre application.
Avec cette introduction rapide sur la façon dont nous pouvons
utiliser le Loopback dans notre application,
nous arrivons à la fin de cet exercice.