1 00:00:01,210 --> 00:00:03,550 ‫Narrateur : Ainsi, comme nous l'avons dit lors 2 00:00:03,550 --> 00:00:07,883 ‫de la dernière conférence, utilisons maintenant notre API pour mettre à jour les données des utilisateurs. 3 00:00:09,460 --> 00:00:12,860 ‫Et donc, comme avant, avec la fonctionnalité de 4 00:00:12,860 --> 00:00:16,990 ‫connexion, nous allons maintenant effectuer un appel API depuis le front-end. 5 00:00:16,990 --> 00:00:20,313 ‫Et nous devons donc créer un nouveau fichier JavaScript pour cela. 6 00:00:21,370 --> 00:00:26,033 ‫Et celui-ci, je vais appeler les paramètres de mise à jour. 7 00:00:26,890 --> 00:00:29,149 ‫Et les paramètres, car nous mettrons essentiellement à 8 00:00:29,149 --> 00:00:31,991 ‫jour les données qui sont le nom et l'e-mail, et plus 9 00:00:31,991 --> 00:00:35,720 ‫tard, nous mettrons également à jour le mot de passe à partir de ce 10 00:00:35,720 --> 00:00:38,768 ‫fichier, et donc le mot de passe, ainsi que les données utilisateur, 11 00:00:38,768 --> 00:00:42,080 ‫je les ai appelés paramètres. Bien. 12 00:00:42,080 --> 00:00:44,510 ‫C'est donc en fait assez similaire à ce 13 00:00:44,510 --> 00:00:46,680 ‫que nous avons fait avec la connexion. 14 00:00:46,680 --> 00:00:48,650 ‫et donc encore une fois, je veux 15 00:00:48,650 --> 00:00:50,436 ‫vous laisser cela comme un défi 16 00:00:50,436 --> 00:00:53,830 ‫afin que vous puissiez mettre en pratique ce que vous avez déjà appris. 17 00:00:53,830 --> 00:00:57,003 ‫Alors allez-y et créez une fonction de mise à jour des données ici. 18 00:00:58,380 --> 00:01:00,800 ‫Ainsi, mettre à jour les données est le nom 19 00:01:00,800 --> 00:01:03,720 ‫de la fonction que je veux que vous créiez ici, puis 20 00:01:03,720 --> 00:01:06,021 ‫bien sûr, appelez cette fonction ici même à 21 00:01:06,021 --> 00:01:08,250 ‫partir de l'index. jf. 22 00:01:08,250 --> 00:01:11,820 ‫Vous allez donc devoir exporter une fonction à partir d'ici, puis 23 00:01:11,820 --> 00:01:14,230 ‫l'importer ici dans l'index de manière très similaire 24 00:01:14,230 --> 00:01:16,110 ‫à ce que nous avons 25 00:01:16,110 --> 00:01:18,020 ‫fait auparavant avec les autres fonctions. 26 00:01:18,020 --> 00:01:20,630 ‫Maintenant, une chose importante à faire avant 27 00:01:20,630 --> 00:01:22,953 ‫d'écrire réellement le JavaScript, c'est 28 00:01:22,953 --> 00:01:27,320 ‫que dans notre formulaire, nous devons en fait supprimer ces parties ici. 29 00:01:27,320 --> 00:01:28,969 ‫Alors dupliquons en fait cette 30 00:01:28,969 --> 00:01:31,163 ‫ligne ici afin de la laisser comme référence. 31 00:01:32,500 --> 00:01:36,563 ‫Alors commentons cette partie et ajoutons un autre commentaire ici, sans 32 00:01:37,890 --> 00:01:40,003 ‫API, et puis celui-ci ici 33 00:01:41,350 --> 00:01:45,310 ‫est avec API, et donc ici nous n'avons pas besoin de 34 00:01:45,310 --> 00:01:48,210 ‫l'action et pas non plus de la méthode, 35 00:01:48,210 --> 00:01:49,710 ‫d'accord, car si 36 00:01:49,710 --> 00:01:52,480 ‫vous le laissez comme ça alors cela 37 00:01:52,480 --> 00:01:55,480 ‫pourrait réellement soumettre les données à cette URL. 38 00:01:55,480 --> 00:01:59,063 ‫Et même si ce n'est pas le cas, eh bien, nous n'en avons toujours pas besoin ici. 39 00:02:00,020 --> 00:02:03,760 ‫Très bien, donc c'était juste une chose importante. 40 00:02:03,760 --> 00:02:06,500 ‫Mais maintenant, allez-y, mettez la vidéo en pause 41 00:02:06,500 --> 00:02:08,533 ‫et essayez de l'implémenter vous-même. 42 00:02:12,030 --> 00:02:14,620 ‫Donc je suis sûr que vous venez de le faire. 43 00:02:14,620 --> 00:02:18,230 ‫Et voilà comment je l'ai fait. 44 00:02:18,230 --> 00:02:21,103 ‫Alors exportez les données const_update. 45 00:02:24,040 --> 00:02:26,900 ‫Et cette fonction recevra en entrée le nom 46 00:02:26,900 --> 00:02:31,900 ‫et l'email, donc les données que vous souhaitez mettre à jour et ensuite 47 00:02:32,980 --> 00:02:34,600 ‫nous allons utiliser 48 00:02:34,600 --> 00:02:36,853 ‫axios pour créer l'appel API lui-même. 49 00:02:37,710 --> 00:02:40,450 ‫Importons donc également axios depuis 50 00:02:45,270 --> 00:02:47,420 ‫le module axios. 51 00:02:47,420 --> 00:02:50,630 ‫Encore une fois, il s'agit de la syntaxe du module es6 et non de la 52 00:02:50,630 --> 00:02:55,290 ‫syntaxe courante du module js que nous utilisons dans node. js, d'accord, alors 53 00:02:55,290 --> 00:02:59,610 ‫ne confondez pas ces deux-là, d'accord. 54 00:02:59,610 --> 00:03:03,030 ‫Ainsi, cette requête HTTP que nous faisons avec axios 55 00:03:03,030 --> 00:03:06,661 ‫devra à nouveau être à l'intérieur d'un bloc try catch 56 00:03:06,661 --> 00:03:09,050 ‫afin qu'en cas d'erreurs, nous puissions 57 00:03:09,050 --> 00:03:10,483 ‫les gérer correctement. 58 00:03:12,890 --> 00:03:14,653 ‫Donc, juste ici dans 59 00:03:15,660 --> 00:03:19,420 ‫le bloc catch, et comme auparavant, commençons par faire cela et 60 00:03:19,420 --> 00:03:22,060 ‫au cas où quelque chose ne va 61 00:03:22,060 --> 00:03:26,430 ‫pas, nous voulons afficher l'alerte comme nous l'avons fait dans la connexion. 62 00:03:26,430 --> 00:03:29,620 ‫Importons donc cette fonction showAlert comme celle-ci 63 00:03:33,670 --> 00:03:34,580 ‫depuis 64 00:03:35,950 --> 00:03:40,457 ‫le même dossier ". /alertes. 65 00:03:42,270 --> 00:03:46,333 ‫" Bien. Oh, et nous devons également désactiver à nouveau eslint. 66 00:03:52,080 --> 00:03:53,513 ‫Et maintenant, nous sommes prêts à partir. 67 00:03:54,480 --> 00:03:57,023 ‫Cela ne sert donc à rien d'afficher la fonction d'alerte ici. 68 00:04:00,750 --> 00:04:02,860 ‫Nous voulons que ce soit 69 00:04:02,860 --> 00:04:05,440 ‫une erreur pour qu'il obtienne cette belle couleur 70 00:04:05,440 --> 00:04:07,670 ‫rouge, puis le message que nous 71 00:04:07,670 --> 00:04:10,090 ‫voulons afficher est une erreur, c'est donc 72 00:04:10,090 --> 00:04:14,640 ‫l'erreur qui est créée dans le bloc try lorsque quelque chose ne va pas. 73 00:04:14,640 --> 00:04:18,772 ‫Ensuite, il y a l'erreur. réponse, et 74 00:04:18,772 --> 00:04:23,297 ‫là-dedans, les données. message, d'accord, et donc cette 75 00:04:23,297 --> 00:04:26,620 ‫propriété de message est celle que nous définissons sur le 76 00:04:26,620 --> 00:04:29,740 ‫serveur chaque fois qu'il y a une erreur, d'accord. 77 00:04:29,740 --> 00:04:32,450 ‫Annonce donc nous allons essayer comme nous l'avons fait 78 00:04:32,450 --> 00:04:36,140 ‫avant avec la validation, donc dans la dernière conférence, nous avons eu 79 00:04:36,140 --> 00:04:38,560 ‫ce message d'erreur de validation ici, et donc 80 00:04:38,560 --> 00:04:39,810 ‫maintenant dans cette 81 00:04:39,810 --> 00:04:42,044 ‫vidéo quand nous faisons la même erreur 82 00:04:42,044 --> 00:04:45,600 ‫avec l'API vous allez puis recevez l'alerte avec exactement le même message, 83 00:04:45,600 --> 00:04:48,731 ‫et ce sera alors une expérience utilisateur beaucoup plus agréable, 84 00:04:48,731 --> 00:04:52,423 ‫car nous ne quittons pas la page sur laquelle nous étions, n'est-ce pas. 85 00:04:54,320 --> 00:04:57,693 ‫Quoi qu'il en soit, faisons maintenant cette requête HTTP. 86 00:04:58,910 --> 00:05:01,603 ‫Et enregistrez cette réponse d'interloop, 87 00:05:02,451 --> 00:05:05,750 ‫et comme vous le savez déjà, nous 88 00:05:05,750 --> 00:05:09,130 ‫devons attendre la promesse provenant de cette requête 89 00:05:09,130 --> 00:05:14,130 ‫axios et donc c'est marqué comme async et maintenant voici les options. 90 00:05:16,540 --> 00:05:21,540 ‫Donc la méthode est un patch, d'accord ? 91 00:05:21,560 --> 00:05:23,700 ‫Et vous pouvez l'utiliser ici 92 00:05:23,700 --> 00:05:26,660 ‫en minuscules, mais je préfère toujours écrire les 93 00:05:26,660 --> 00:05:30,023 ‫méthodes HTTP en majuscules comme ceci et maintenant allons poster 94 00:05:30,023 --> 00:05:33,023 ‫et voir l'URL que nous allons atteindre maintenant. 95 00:05:34,210 --> 00:05:37,087 ‫Pour une raison quelconque, cela semble un peu bizarre c'est trop gros.. 96 00:05:40,050 --> 00:05:41,050 ‫mais, peu importe. 97 00:05:41,050 --> 00:05:45,270 ‫Je veux juste sélectionner l'URL que nous allons atteindre ici. 98 00:05:45,270 --> 00:05:47,470 ‫c'est donc ici sur 99 00:05:47,470 --> 00:05:51,091 ‫les utilisateurs et mettre à jour l'utilisateur actuel, d'accord. 100 00:05:51,091 --> 00:05:52,295 ‫Et donc celui-ci 101 00:05:52,295 --> 00:05:57,090 ‫ne reçoit comme corps que les données que nous souhaitons mettre à jour. 102 00:05:57,090 --> 00:05:59,790 ‫Donc, dans ce cas, c'est le nom et le 103 00:05:59,790 --> 00:06:01,070 ‫rôle, mais bien 104 00:06:01,070 --> 00:06:03,790 ‫sûr, nous n'allons pas permettre à l'utilisateur de mettre à 105 00:06:03,790 --> 00:06:07,420 ‫jour le rôle et je pense que nous avons juste fait celui-ci ici 106 00:06:07,420 --> 00:06:09,866 ‫pour montrer l'exemple que celui-ci n'est pas autorisé, 107 00:06:09,866 --> 00:06:11,550 ‫n'est-ce pas, et donc ce que 108 00:06:11,550 --> 00:06:14,710 ‫nous mettons à jour est bien sûr le nom et l'email. 109 00:06:14,710 --> 00:06:17,910 ‫Ce qui est important ici, c'est que pour cette route, nous 110 00:06:17,910 --> 00:06:20,650 ‫n'avons pas besoin de spécifier l'ID utilisateur, car nous devons 111 00:06:20,650 --> 00:06:22,763 ‫le faire ici dans Update User. 112 00:06:23,920 --> 00:06:25,870 ‫Donc celui-ci est le premier que nous avons créé. 113 00:06:25,870 --> 00:06:30,010 ‫Et ici, nous devions transmettre l'ID en tant que paramètre d'URL, mais bien sûr, lors de 114 00:06:30,010 --> 00:06:32,460 ‫la mise à jour de l'utilisateur actuel, nous obtenons 115 00:06:32,460 --> 00:06:37,050 ‫cet ID utilisateur à partir de la demande. utilisateur comme toujours. 116 00:06:37,050 --> 00:06:38,293 ‫Vous vous en souvenez ? 117 00:06:39,396 --> 00:06:41,713 ‫Quoi qu'il en soit, copions maintenant ceci ici. 118 00:06:46,800 --> 00:06:48,593 ‫Et puis spécifiez l'URL. 119 00:06:50,610 --> 00:06:55,610 ‫D'accord, et donc ici, comme toujours, l'hôte local et bien sûr, lorsque 120 00:06:56,120 --> 00:06:58,460 ‫nous déployons cela, nous allons 121 00:06:58,460 --> 00:07:01,653 ‫alors en quelque sorte changer cela ici. 122 00:07:03,790 --> 00:07:06,540 ‫Mais pour l'instant, bien sûr, nous ne travaillons que localement ici. 123 00:07:07,704 --> 00:07:09,104 ‫C'est donc celui qu'il faut utiliser. 124 00:07:09,970 --> 00:07:12,057 ‫Ensuite, nous spécifions les données 125 00:07:12,057 --> 00:07:13,890 ‫et ce sera donc 126 00:07:13,890 --> 00:07:16,800 ‫le corps qui va être envoyé avec la 127 00:07:16,800 --> 00:07:19,400 ‫demande et donc le nom va 128 00:07:19,400 --> 00:07:23,423 ‫simplement être le nom qui entre, et puis bien sûr, l'e-mail. 129 00:07:24,930 --> 00:07:27,323 ‫D'accord, c'est donc toute la demande, 130 00:07:29,240 --> 00:07:32,920 ‫et maintenant testons si nous obtenons réellement notre succès 131 00:07:36,160 --> 00:07:40,993 ‫afin de répondre. Les données. statut, s'il est 132 00:07:44,470 --> 00:07:46,140 ‫égal au succès, et encore 133 00:07:46,140 --> 00:07:50,910 ‫une fois c'est le statut que nous trouvons dans toutes nos réponses, souvenez-vous, et 134 00:07:50,910 --> 00:07:54,520 ‫donc si cela a réussi, alors nous voulons afficher une alerte 135 00:07:54,520 --> 00:07:56,750 ‫de réussite disant : « Les données 136 00:07:59,770 --> 00:08:04,400 ‫ont été mises à jour avec succès. " Donnez-lui une sauvegarde, et 137 00:08:07,650 --> 00:08:09,170 ‫je pense 138 00:08:09,170 --> 00:08:14,170 ‫que cela devrait être le cas pour cette fonction, d'accord. 139 00:08:14,620 --> 00:08:17,293 ‫Il ne nous reste plus qu'à l'utiliser ici. 140 00:08:18,220 --> 00:08:20,373 ‫Donc d'abord, je vais importer 141 00:08:25,493 --> 00:08:26,493 ‫une 142 00:08:29,050 --> 00:08:32,360 ‫fonction, "updateData" de ". / update settings" et 143 00:08:32,360 --> 00:08:34,623 ‫nous pouvons donc y déposer le "js". 144 00:08:36,340 --> 00:08:39,933 ‫Ensuite, sélectionnons en fait le formulaire sur la page. 145 00:08:41,860 --> 00:08:46,860 ‫Donc, utilisez un formulaire de données égal au document. querySelector, puis jetons 146 00:08:50,489 --> 00:08:53,190 ‫un coup d'œil à cela. 147 00:08:53,190 --> 00:08:55,410 ‫C'est donc ici dans account et 148 00:08:58,150 --> 00:09:01,893 ‫ce formulaire a un nom de classe de données utilisateur de formulaire. 149 00:09:03,630 --> 00:09:07,920 ‫Alors, saisissons-le et mettons-le ici. 150 00:09:07,920 --> 00:09:11,670 ‫D'accord, et maintenant nous allons faire quelque chose de très similaire ici 151 00:09:11,670 --> 00:09:12,703 ‫à cette connexion. 152 00:09:14,480 --> 00:09:19,089 ‫Donc, s'il existe un formulaire de données utilisateur, ajoutons 153 00:09:19,089 --> 00:09:22,203 ‫un écouteur d'événement à celui-ci. 154 00:09:24,410 --> 00:09:27,980 ‫Donc, ajoutezEventListener dans le cas de la soumission et de 155 00:09:33,640 --> 00:09:35,660 ‫l'accès à l'événement ici et 156 00:09:37,060 --> 00:09:38,880 ‫nous empêcherons la valeur 157 00:09:38,880 --> 00:09:42,110 ‫par défaut, nous empêcherons donc la soumission du formulaire. 158 00:09:42,110 --> 00:09:45,810 ‫Avec ce morceau de code, alors, obtenons l'e-mail et le 159 00:09:45,810 --> 00:09:48,363 ‫nom qui sera très similaire à 160 00:09:48,363 --> 00:09:51,663 ‫ce que nous avons réellement ici, alors saisissons-le. 161 00:09:56,178 --> 00:09:59,777 ‫Juste pour nous assurer qu'ils sont bien là, ouvrons 162 00:09:59,777 --> 00:10:01,200 ‫ceci à nouveau 163 00:10:02,080 --> 00:10:06,679 ‫et ils obtiennent en effet l'identifiant du nom et l'identifiant de l'e-mail. 164 00:10:06,679 --> 00:10:09,762 ‫Très bien, donc l'e-mail est l'e-mail et le 165 00:10:13,908 --> 00:10:16,050 ‫nom avec l'idée du nom. 166 00:10:16,050 --> 00:10:18,640 ‫D'accord, et tout ce que nous avons à faire est 167 00:10:18,640 --> 00:10:21,053 ‫d'appeler réellement la fonction que nous avons importée. 168 00:10:22,090 --> 00:10:27,090 ‫Alors, mettez à jour les données avec le nom et l'e-mail 169 00:10:27,880 --> 00:10:32,530 ‫et je pense que c'est le bon ordre, alors oui. 170 00:10:32,530 --> 00:10:35,840 ‫d'abord le nom et ensuite l'email, d'accord. 171 00:10:35,840 --> 00:10:37,480 ‫Et dans les coulisses, notre 172 00:10:39,060 --> 00:10:41,310 ‫colis devrait toujours regrouper tous ces fichiers à 173 00:10:41,310 --> 00:10:43,880 ‫chaque sauvegarde, donc si nous sauvegardons cela, vous verrez 174 00:10:43,880 --> 00:10:45,846 ‫qu'il est mis à jour maintenant 175 00:10:45,846 --> 00:10:48,883 ‫ici et nous devrions donc maintenant être prêts à le faire. 176 00:10:51,580 --> 00:10:55,393 ‫Revenons donc à notre page d'accueil ici. 177 00:10:56,790 --> 00:10:59,723 ‫Très bien. Et essayons de mettre à jour nos données. 178 00:11:01,300 --> 00:11:03,515 ‫Et ce que je vais faire, 179 00:11:03,515 --> 00:11:07,570 ‫c'est revenir aux données d'origine, en supprimant ce deuxième prénom et le nom 180 00:11:07,570 --> 00:11:10,580 ‫de famille d'ici et maintenant enregistrer les paramètres et 181 00:11:11,620 --> 00:11:15,260 ‫c'est parti, les données ont été mises à jour avec succès. 182 00:11:15,260 --> 00:11:17,370 ‫Donc, si nous rechargeons maintenant la 183 00:11:17,370 --> 00:11:20,520 ‫page, nous récupérerons alors ces données du serveur et donc 184 00:11:20,520 --> 00:11:22,880 ‫si elles sont identiques, cela signifie que les 185 00:11:22,880 --> 00:11:24,763 ‫données ont été réellement conservées. 186 00:11:25,630 --> 00:11:28,680 ‫Alors, rechargement et c'est parti. 187 00:11:28,680 --> 00:11:31,370 ‫Tellement bon. Cela a réellement fonctionné. 188 00:11:31,370 --> 00:11:33,270 ‫Allons simplement à une 189 00:11:33,270 --> 00:11:36,102 ‫autre page ici et revenons juste pour être 190 00:11:36,102 --> 00:11:38,920 ‫vraiment sûrs, mais en effet, cela a fonctionné. 191 00:11:38,920 --> 00:11:41,233 ‫Et maintenant, essayons l'une de ces erreurs. 192 00:11:42,920 --> 00:11:46,090 ‫D'accord, et cela devrait déclencher une mauvaise adresse e-mail et 193 00:11:47,540 --> 00:11:50,190 ‫cela semble beaucoup plus agréable, cela nous donne 194 00:11:50,190 --> 00:11:51,960 ‫donc ce message d'erreur, que 195 00:11:51,960 --> 00:11:54,634 ‫nous pourrions bien sûr formater un peu mieux pour 196 00:11:54,634 --> 00:11:56,203 ‫le rendre plus beau. 197 00:11:58,140 --> 00:12:00,730 ‫Mais je pense que comme ça c'est 198 00:12:00,730 --> 00:12:03,080 ‫parfaitement bien pour cette petite application. 199 00:12:03,080 --> 00:12:04,760 ‫Et nous pourrions faire toutes sortes 200 00:12:04,760 --> 00:12:08,600 ‫de choses comme marquer ce champ ici en rouge ou quelque chose comme ça. 201 00:12:08,600 --> 00:12:10,830 ‫Mais pour ce genre de choses, 202 00:12:10,830 --> 00:12:15,020 ‫vous feriez probablement mieux d'utiliser un véritable framework frontal à part entière 203 00:12:15,020 --> 00:12:16,791 ‫comme React ou View. 204 00:12:16,791 --> 00:12:20,310 ‫Quoi qu'il en soit, ce formulaire fonctionne maintenant ici sauf l'image, ce que 205 00:12:20,310 --> 00:12:22,480 ‫nous faisons encore dans la section suivante, et 206 00:12:22,480 --> 00:12:24,610 ‫il ne reste donc plus qu'à 207 00:12:24,610 --> 00:12:29,233 ‫mettre à jour le mot de passe pour que nous le fassions dans la prochaine vidéo.