‫Narrateur : Ainsi, comme nous l'avons dit lors
‫de la dernière conférence, utilisons maintenant notre API pour mettre à jour les données des utilisateurs.
‫Et donc, comme avant, avec la fonctionnalité de
‫connexion, nous allons maintenant effectuer un appel API depuis le front-end.
‫Et nous devons donc créer un nouveau fichier JavaScript pour cela.
‫Et celui-ci, je vais appeler les paramètres de mise à jour.
‫Et les paramètres, car nous mettrons essentiellement à
‫jour les données qui sont le nom et l'e-mail, et plus
‫tard, nous mettrons également à jour le mot de passe à partir de ce
‫fichier, et donc le mot de passe, ainsi que les données utilisateur,
‫je les ai appelés paramètres. Bien.
‫C'est donc en fait assez similaire à ce
‫que nous avons fait avec la connexion.
‫et donc encore une fois, je veux
‫vous laisser cela comme un défi
‫afin que vous puissiez mettre en pratique ce que vous avez déjà appris.
‫Alors allez-y et créez une fonction de mise à jour des données ici.
‫Ainsi, mettre à jour les données est le nom
‫de la fonction que je veux que vous créiez ici, puis
‫bien sûr, appelez cette fonction ici même à
‫partir de l'index. jf.
‫Vous allez donc devoir exporter une fonction à partir d'ici, puis
‫l'importer ici dans l'index de manière très similaire
‫à ce que nous avons
‫fait auparavant avec les autres fonctions.
‫Maintenant, une chose importante à faire avant
‫d'écrire réellement le JavaScript, c'est
‫que dans notre formulaire, nous devons en fait supprimer ces parties ici.
‫Alors dupliquons en fait cette
‫ligne ici afin de la laisser comme référence.
‫Alors commentons cette partie et ajoutons un autre commentaire ici, sans
‫API, et puis celui-ci ici
‫est avec API, et donc ici nous n'avons pas besoin de
‫l'action et pas non plus de la méthode,
‫d'accord, car si
‫vous le laissez comme ça alors cela
‫pourrait réellement soumettre les données à cette URL.
‫Et même si ce n'est pas le cas, eh bien, nous n'en avons toujours pas besoin ici.
‫Très bien, donc c'était juste une chose importante.
‫Mais maintenant, allez-y, mettez la vidéo en pause
‫et essayez de l'implémenter vous-même.
‫Donc je suis sûr que vous venez de le faire.
‫Et voilà comment je l'ai fait.
‫Alors exportez les données const_update.
‫Et cette fonction recevra en entrée le nom
‫et l'email, donc les données que vous souhaitez mettre à jour et ensuite
‫nous allons utiliser
‫axios pour créer l'appel API lui-même.
‫Importons donc également axios depuis
‫le module axios.
‫Encore une fois, il s'agit de la syntaxe du module es6 et non de la
‫syntaxe courante du module js que nous utilisons dans node. js, d'accord, alors
‫ne confondez pas ces deux-là, d'accord.
‫Ainsi, cette requête HTTP que nous faisons avec axios
‫devra à nouveau être à l'intérieur d'un bloc try catch
‫afin qu'en cas d'erreurs, nous puissions
‫les gérer correctement.
‫Donc, juste ici dans
‫le bloc catch, et comme auparavant, commençons par faire cela et
‫au cas où quelque chose ne va
‫pas, nous voulons afficher l'alerte comme nous l'avons fait dans la connexion.
‫Importons donc cette fonction showAlert comme celle-ci
‫depuis
‫le même dossier ". /alertes.
‫" Bien. Oh, et nous devons également désactiver à nouveau eslint.
‫Et maintenant, nous sommes prêts à partir.
‫Cela ne sert donc à rien d'afficher la fonction d'alerte ici.
‫Nous voulons que ce soit
‫une erreur pour qu'il obtienne cette belle couleur
‫rouge, puis le message que nous
‫voulons afficher est une erreur, c'est donc
‫l'erreur qui est créée dans le bloc try lorsque quelque chose ne va pas.
‫Ensuite, il y a l'erreur. réponse, et
‫là-dedans, les données. message, d'accord, et donc cette
‫propriété de message est celle que nous définissons sur le
‫serveur chaque fois qu'il y a une erreur, d'accord.
‫Annonce donc nous allons essayer comme nous l'avons fait
‫avant avec la validation, donc dans la dernière conférence, nous avons eu
‫ce message d'erreur de validation ici, et donc
‫maintenant dans cette
‫vidéo quand nous faisons la même erreur
‫avec l'API vous allez puis recevez l'alerte avec exactement le même message,
‫et ce sera alors une expérience utilisateur beaucoup plus agréable,
‫car nous ne quittons pas la page sur laquelle nous étions, n'est-ce pas.
‫Quoi qu'il en soit, faisons maintenant cette requête HTTP.
‫Et enregistrez cette réponse d'interloop,
‫et comme vous le savez déjà, nous
‫devons attendre la promesse provenant de cette requête
‫axios et donc c'est marqué comme async et maintenant voici les options.
‫Donc la méthode est un patch, d'accord ?
‫Et vous pouvez l'utiliser ici
‫en minuscules, mais je préfère toujours écrire les
‫méthodes HTTP en majuscules comme ceci et maintenant allons poster
‫et voir l'URL que nous allons atteindre maintenant.
‫Pour une raison quelconque, cela semble un peu bizarre c'est trop gros..
‫mais, peu importe.
‫Je veux juste sélectionner l'URL que nous allons atteindre ici.
‫c'est donc ici sur
‫les utilisateurs et mettre à jour l'utilisateur actuel, d'accord.
‫Et donc celui-ci
‫ne reçoit comme corps que les données que nous souhaitons mettre à jour.
‫Donc, dans ce cas, c'est le nom et le
‫rôle, mais bien
‫sûr, nous n'allons pas permettre à l'utilisateur de mettre à
‫jour le rôle et je pense que nous avons juste fait celui-ci ici
‫pour montrer l'exemple que celui-ci n'est pas autorisé,
‫n'est-ce pas, et donc ce que
‫nous mettons à jour est bien sûr le nom et l'email.
‫Ce qui est important ici, c'est que pour cette route, nous
‫n'avons pas besoin de spécifier l'ID utilisateur, car nous devons
‫le faire ici dans Update User.
‫Donc celui-ci est le premier que nous avons créé.
‫Et ici, nous devions transmettre l'ID en tant que paramètre d'URL, mais bien sûr, lors de
‫la mise à jour de l'utilisateur actuel, nous obtenons
‫cet ID utilisateur à partir de la demande. utilisateur comme toujours.
‫Vous vous en souvenez ?
‫Quoi qu'il en soit, copions maintenant ceci ici.
‫Et puis spécifiez l'URL.
‫D'accord, et donc ici, comme toujours, l'hôte local et bien sûr, lorsque
‫nous déployons cela, nous allons
‫alors en quelque sorte changer cela ici.
‫Mais pour l'instant, bien sûr, nous ne travaillons que localement ici.
‫C'est donc celui qu'il faut utiliser.
‫Ensuite, nous spécifions les données
‫et ce sera donc
‫le corps qui va être envoyé avec la
‫demande et donc le nom va
‫simplement être le nom qui entre, et puis bien sûr, l'e-mail.
‫D'accord, c'est donc toute la demande,
‫et maintenant testons si nous obtenons réellement notre succès
‫afin de répondre. Les données. statut, s'il est
‫égal au succès, et encore
‫une fois c'est le statut que nous trouvons dans toutes nos réponses, souvenez-vous, et
‫donc si cela a réussi, alors nous voulons afficher une alerte
‫de réussite disant : « Les données
‫ont été mises à jour avec succès. " Donnez-lui une sauvegarde, et
‫je pense
‫que cela devrait être le cas pour cette fonction, d'accord.
‫Il ne nous reste plus qu'à l'utiliser ici.
‫Donc d'abord, je vais importer
‫une
‫fonction, "updateData" de ". / update settings" et
‫nous pouvons donc y déposer le "js".
‫Ensuite, sélectionnons en fait le formulaire sur la page.
‫Donc, utilisez un formulaire de données égal au document. querySelector, puis jetons
‫un coup d'œil à cela.
‫C'est donc ici dans account et
‫ce formulaire a un nom de classe de données utilisateur de formulaire.
‫Alors, saisissons-le et mettons-le ici.
‫D'accord, et maintenant nous allons faire quelque chose de très similaire ici
‫à cette connexion.
‫Donc, s'il existe un formulaire de données utilisateur, ajoutons
‫un écouteur d'événement à celui-ci.
‫Donc, ajoutezEventListener dans le cas de la soumission et de
‫l'accès à l'événement ici et
‫nous empêcherons la valeur
‫par défaut, nous empêcherons donc la soumission du formulaire.
‫Avec ce morceau de code, alors, obtenons l'e-mail et le
‫nom qui sera très similaire à
‫ce que nous avons réellement ici, alors saisissons-le.
‫Juste pour nous assurer qu'ils sont bien là, ouvrons
‫ceci à nouveau
‫et ils obtiennent en effet l'identifiant du nom et l'identifiant de l'e-mail.
‫Très bien, donc l'e-mail est l'e-mail et le
‫nom avec l'idée du nom.
‫D'accord, et tout ce que nous avons à faire est
‫d'appeler réellement la fonction que nous avons importée.
‫Alors, mettez à jour les données avec le nom et l'e-mail
‫et je pense que c'est le bon ordre, alors oui.
‫d'abord le nom et ensuite l'email, d'accord.
‫Et dans les coulisses, notre
‫colis devrait toujours regrouper tous ces fichiers à
‫chaque sauvegarde, donc si nous sauvegardons cela, vous verrez
‫qu'il est mis à jour maintenant
‫ici et nous devrions donc maintenant être prêts à le faire.
‫Revenons donc à notre page d'accueil ici.
‫Très bien. Et essayons de mettre à jour nos données.
‫Et ce que je vais faire,
‫c'est revenir aux données d'origine, en supprimant ce deuxième prénom et le nom
‫de famille d'ici et maintenant enregistrer les paramètres et
‫c'est parti, les données ont été mises à jour avec succès.
‫Donc, si nous rechargeons maintenant la
‫page, nous récupérerons alors ces données du serveur et donc
‫si elles sont identiques, cela signifie que les
‫données ont été réellement conservées.
‫Alors, rechargement et c'est parti.
‫Tellement bon. Cela a réellement fonctionné.
‫Allons simplement à une
‫autre page ici et revenons juste pour être
‫vraiment sûrs, mais en effet, cela a fonctionné.
‫Et maintenant, essayons l'une de ces erreurs.
‫D'accord, et cela devrait déclencher une mauvaise adresse e-mail et
‫cela semble beaucoup plus agréable, cela nous donne
‫donc ce message d'erreur, que
‫nous pourrions bien sûr formater un peu mieux pour
‫le rendre plus beau.
‫Mais je pense que comme ça c'est
‫parfaitement bien pour cette petite application.
‫Et nous pourrions faire toutes sortes
‫de choses comme marquer ce champ ici en rouge ou quelque chose comme ça.
‫Mais pour ce genre de choses,
‫vous feriez probablement mieux d'utiliser un véritable framework frontal à part entière
‫comme React ou View.
‫Quoi qu'il en soit, ce formulaire fonctionne maintenant ici sauf l'image, ce que
‫nous faisons encore dans la section suivante, et
‫il ne reste donc plus qu'à
‫mettre à jour le mot de passe pour que nous le fassions dans la prochaine vidéo.