1 00:00:01,210 --> 00:00:03,550 ‫Sprecher: Also, wie wir im letzten 2 00:00:03,550 --> 00:00:07,883 ‫Vortrag gesagt haben, verwenden wir nun tatsächlich unsere API, um Benutzerdaten zu aktualisieren. 3 00:00:09,460 --> 00:00:12,860 ‫Und so werden wir, genau wie zuvor, 4 00:00:12,860 --> 00:00:16,990 ‫mit der Login-Funktionalität jetzt einen API-Aufruf vom Frontend aus durchführen. 5 00:00:16,990 --> 00:00:20,313 ‫Also müssen wir dafür eine neue JavaScript-Datei erstellen. 6 00:00:21,370 --> 00:00:26,033 ‫Und dieses hier nenne ich Update-Einstellungen. 7 00:00:26,890 --> 00:00:29,149 ‫Und Einstellungen, denn wir werden im 8 00:00:29,149 --> 00:00:31,991 ‫Grunde die Daten, die Name und E-Mail sind, 9 00:00:31,991 --> 00:00:35,720 ‫aktualisieren, und später werden wir auch das Passwort aus dieser Datei 10 00:00:35,720 --> 00:00:38,768 ‫aktualisieren, und daher Passwort zusammen mit den Benutzerdaten, ich 11 00:00:38,768 --> 00:00:42,080 ‫habe sie Einstellungen genannt. In Ordung. 12 00:00:42,080 --> 00:00:44,510 ‫Das ist also ziemlich ähnlich zu dem, was 13 00:00:44,510 --> 00:00:46,680 ‫wir mit dem Login gemacht haben. 14 00:00:46,680 --> 00:00:48,650 ‫und so möchte ich dies eigentlich 15 00:00:48,650 --> 00:00:50,436 ‫noch einmal als herausforderung 16 00:00:50,436 --> 00:00:53,830 ‫für dich belassen, damit du das bereits Gelernte üben kannst. 17 00:00:53,830 --> 00:00:57,003 ‫Machen Sie also weiter und erstellen Sie hier eine Funktion zum Aktualisieren von Daten. 18 00:00:58,380 --> 00:01:00,800 ‫Aktualisieren von Daten ist also der Name 19 00:01:00,800 --> 00:01:03,720 ‫der Funktion, die Sie hier erstellen und diese Funktion 20 00:01:03,720 --> 00:01:06,021 ‫dann natürlich direkt hier aus dem Index 21 00:01:06,021 --> 00:01:08,250 ‫aufrufen möchten. jf. 22 00:01:08,250 --> 00:01:11,820 ‫Sie müssen also eine Funktion von hier exportieren und sie dann 23 00:01:11,820 --> 00:01:14,230 ‫hier in den Index importieren, so ähnlich 24 00:01:14,230 --> 00:01:16,110 ‫wie wir es zuvor 25 00:01:16,110 --> 00:01:18,020 ‫mit den anderen Funktionen gemacht haben. 26 00:01:18,020 --> 00:01:20,630 ‫Eine wichtige Sache, die wir jetzt vor 27 00:01:20,630 --> 00:01:22,953 ‫dem eigentlichen Schreiben des JavaScripts tun 28 00:01:22,953 --> 00:01:27,320 ‫müssen, ist, dass wir diese Teile in unserem Formular hier tatsächlich entfernen müssen. 29 00:01:27,320 --> 00:01:28,969 ‫Lassen Sie uns diese Zeile hier 30 00:01:28,969 --> 00:01:31,163 ‫also tatsächlich duplizieren, damit wir sie als Referenz belassen. 31 00:01:32,500 --> 00:01:36,563 ‫Also lasst uns diesen Teil auskommentieren und hier einen weiteren Kommentar 32 00:01:37,890 --> 00:01:40,003 ‫hinzufügen, ohne API, und dann 33 00:01:41,350 --> 00:01:45,310 ‫ist dieser hier mit API, und hier brauchen wir also 34 00:01:45,310 --> 00:01:48,210 ‫nicht die Aktion und auch nicht die 35 00:01:48,210 --> 00:01:49,710 ‫Methode, gut, denn 36 00:01:49,710 --> 00:01:52,480 ‫wenn du es so belässt dann könnten 37 00:01:52,480 --> 00:01:55,480 ‫die Daten tatsächlich an diese URL gesendet werden. 38 00:01:55,480 --> 00:01:59,063 ‫Und selbst wenn nicht, wir brauchen es hier immer noch nicht. 39 00:02:00,020 --> 00:02:03,760 ‫In Ordnung, das war also nur eine wichtige Sache. 40 00:02:03,760 --> 00:02:06,500 ‫Aber jetzt pausieren Sie bitte das Video und 41 00:02:06,500 --> 00:02:08,533 ‫versuchen Sie, dies selbst umzusetzen. 42 00:02:12,030 --> 00:02:14,620 ‫Ich bin sicher, Sie haben das gerade getan. 43 00:02:14,620 --> 00:02:18,230 ‫Und hier geht es so, wie ich es gemacht habe. 44 00:02:18,230 --> 00:02:21,103 ‫Exportieren Sie also const_update-Daten. 45 00:02:24,040 --> 00:02:26,900 ‫Und diese Funktion erhält als Eingabe den 46 00:02:26,900 --> 00:02:31,900 ‫Namen und die E-Mail, also die Daten, die Sie aktualisieren möchten, und dann 47 00:02:32,980 --> 00:02:34,600 ‫verwenden wir Axios, 48 00:02:34,600 --> 00:02:36,853 ‫um den API-Aufruf selbst zu erstellen. 49 00:02:37,710 --> 00:02:40,450 ‫Lassen Sie uns dann auch Axios 50 00:02:45,270 --> 00:02:47,420 ‫aus dem Axios-Modul importieren. 51 00:02:47,420 --> 00:02:50,630 ‫Dies ist also wieder die es6-Modulsyntax und nicht die übliche 52 00:02:50,630 --> 00:02:55,290 ‫js-Modulsyntax, die wir in node verwenden. js, in Ordnung, 53 00:02:55,290 --> 00:02:59,610 ‫also verwechseln Sie diese beiden nicht, in Ordnung. 54 00:02:59,610 --> 00:03:03,030 ‫Diese HTTP-Anfrage, die wir mit axios ausführen, muss 55 00:03:03,030 --> 00:03:06,661 ‫sich also wieder in einem try-catch-Block befinden, damit wir 56 00:03:06,661 --> 00:03:09,050 ‫im Falle von Fehlern richtig damit 57 00:03:09,050 --> 00:03:10,483 ‫umgehen können. 58 00:03:12,890 --> 00:03:14,653 ‫Also genau hier 59 00:03:15,660 --> 00:03:19,420 ‫im catch-Block, und wie zuvor fangen wir damit 60 00:03:19,420 --> 00:03:22,060 ‫an und falls etwas nicht 61 00:03:22,060 --> 00:03:26,430 ‫stimmt, möchten wir die Warnung genau wie beim Login anzeigen. 62 00:03:26,430 --> 00:03:29,620 ‫Importieren wir also diese showAlert-Funktion wie diese 63 00:03:33,670 --> 00:03:34,580 ‫aus 64 00:03:35,950 --> 00:03:40,457 ‫demselben Ordner ". /warnungen. " 65 00:03:42,270 --> 00:03:46,333 ‫In Ordung. Oh, und wir müssen eslint auch wieder deaktivieren. 66 00:03:52,080 --> 00:03:53,513 ‫Und jetzt können wir loslegen. 67 00:03:54,480 --> 00:03:57,023 ‫Das nützt also nichts, die Benachrichtigungsfunktion hier anzeigen. 68 00:04:00,750 --> 00:04:02,860 ‫Wir möchten, dass es 69 00:04:02,860 --> 00:04:05,440 ‫ein Fehler ist, damit es diese schöne 70 00:04:05,440 --> 00:04:07,670 ‫rote Farbe erhält, und dann ist 71 00:04:07,670 --> 00:04:10,090 ‫die Nachricht, die wir anzeigen möchten, ein 72 00:04:10,090 --> 00:04:14,640 ‫Fehler, also der Fehler, der im try-Block erstellt wird, wenn etwas schief geht. 73 00:04:14,640 --> 00:04:18,772 ‫Dann ist der Fehler drin. Antwort, und 74 00:04:18,772 --> 00:04:23,297 ‫dann dort, Daten. message, okay, also ist 75 00:04:23,297 --> 00:04:26,620 ‫diese Message-Eigenschaft diejenige, die wir auf dem 76 00:04:26,620 --> 00:04:29,740 ‫Server definieren, wenn ein Fehler auftritt. 77 00:04:29,740 --> 00:04:32,450 ‫Anzeige, also werden wir das genauso versuchen, wie wir 78 00:04:32,450 --> 00:04:36,140 ‫es zuvor mit der Validierung getan haben, also haben wir in der 79 00:04:36,140 --> 00:04:38,560 ‫letzten Vorlesung diese Validierungsfehlermeldung hier erhalten, und jetzt 80 00:04:38,560 --> 00:04:39,810 ‫in diesem Video, 81 00:04:39,810 --> 00:04:42,044 ‫wenn wir den gleichen Fehler mit der 82 00:04:42,044 --> 00:04:45,600 ‫API machen, werden Sie es tun dann erhalten Sie die Warnung mit 83 00:04:45,600 --> 00:04:48,731 ‫genau derselben Nachricht, und das wird dann eine viel angenehmere 84 00:04:48,731 --> 00:04:52,423 ‫Benutzererfahrung sein, da wir die Seite, auf der wir waren, nicht verlassen, richtig. 85 00:04:54,320 --> 00:04:57,693 ‫Wie auch immer, lassen Sie uns diese HTTP-Anfrage jetzt tatsächlich ausführen. 86 00:04:58,910 --> 00:05:01,603 ‫Und speichern Sie diese Interloop-Antwort, 87 00:05:02,451 --> 00:05:05,750 ‫und wie Sie bereits wissen, müssen wir 88 00:05:05,750 --> 00:05:09,130 ‫auf das Versprechen warten, das von dieser Axios-Anfrage 89 00:05:09,130 --> 00:05:14,130 ‫kommt, und das ist als asynchron markiert und jetzt hier die Optionen. 90 00:05:16,540 --> 00:05:21,540 ‫Die Methode ist also ein Patch, okay? 91 00:05:21,560 --> 00:05:23,700 ‫Und Sie könnten dies hier in 92 00:05:23,700 --> 00:05:26,660 ‫Kleinbuchstaben verwenden, aber ich bevorzuge es, die HTTP-Methoden immer in 93 00:05:26,660 --> 00:05:30,023 ‫Großbuchstaben zu schreiben, und jetzt gehen wir tatsächlich zum Posten und sehen 94 00:05:30,023 --> 00:05:33,023 ‫uns die URL an, auf die wir jetzt zugreifen werden. 95 00:05:34,210 --> 00:05:37,087 ‫Aus irgendeinem Grund sieht das etwas seltsam aus, das zu groß ist.. 96 00:05:40,050 --> 00:05:41,050 ‫aber das macht nichts. 97 00:05:41,050 --> 00:05:45,270 ‫Ich möchte nur die URL auswählen, auf die wir hier klicken werden. 98 00:05:45,270 --> 00:05:47,470 ‫also das geht hier 99 00:05:47,470 --> 00:05:51,091 ‫auf die benutzer und aktualisiere den aktuellen benutzer, ok. 100 00:05:51,091 --> 00:05:52,295 ‫Und so 101 00:05:52,295 --> 00:05:57,090 ‫erhält dieser als Körper nur die Daten, die wir aktualisieren wollen. 102 00:05:57,090 --> 00:05:59,790 ‫In diesem Fall sind es der Name und 103 00:05:59,790 --> 00:06:01,070 ‫die Rolle, aber 104 00:06:01,070 --> 00:06:03,790 ‫natürlich werden wir dem Benutzer nicht erlauben, die Rolle 105 00:06:03,790 --> 00:06:07,420 ‫zu aktualisieren, und ich denke, wir haben diese hier nur gemacht, um 106 00:06:07,420 --> 00:06:09,866 ‫das Beispiel zu zeigen, dass dies nicht 107 00:06:09,866 --> 00:06:11,550 ‫erlaubt ist, richtig, und Was 108 00:06:11,550 --> 00:06:14,710 ‫wir also aktualisieren, sind natürlich der Name und die E-Mail-Adresse. 109 00:06:14,710 --> 00:06:17,910 ‫Wichtig ist hier, dass wir für diese Route nicht 110 00:06:17,910 --> 00:06:20,650 ‫die Benutzer-ID angeben müssen, wie wir dies hier 111 00:06:20,650 --> 00:06:22,763 ‫in Update User tun müssen. 112 00:06:23,920 --> 00:06:25,870 ‫Dieser hier ist also der erste, den wir erstellt haben. 113 00:06:25,870 --> 00:06:30,010 ‫Und hier mussten wir die ID als URL-Parameter übergeben, aber beim 114 00:06:30,010 --> 00:06:32,460 ‫Aktualisieren des aktuellen Benutzers erhalten wir diese 115 00:06:32,460 --> 00:06:37,050 ‫Benutzer-ID natürlich aus der Anfrage. Benutzer wie immer. 116 00:06:37,050 --> 00:06:38,293 ‫Erinnere dich daran? 117 00:06:39,396 --> 00:06:41,713 ‫Wie auch immer, lass uns das jetzt hier kopieren. 118 00:06:46,800 --> 00:06:48,593 ‫Geben Sie dann die URL an. 119 00:06:50,610 --> 00:06:55,610 ‫Okay, und hier wie immer der lokale Host und wenn 120 00:06:56,120 --> 00:06:58,460 ‫wir diesen bereitstellen, 121 00:06:58,460 --> 00:07:01,653 ‫werden wir dies natürlich hier ändern. 122 00:07:03,790 --> 00:07:06,540 ‫Aber im Moment arbeiten wir hier natürlich nur lokal. 123 00:07:07,704 --> 00:07:09,104 ‫So ist es zu verwenden. 124 00:07:09,970 --> 00:07:12,057 ‫Als nächstes spezifizieren wir dann 125 00:07:12,057 --> 00:07:13,890 ‫die Daten und das 126 00:07:13,890 --> 00:07:16,800 ‫ist der Text, der zusammen mit der Anfrage 127 00:07:16,800 --> 00:07:19,400 ‫gesendet wird, und der Name ist 128 00:07:19,400 --> 00:07:23,423 ‫einfach der Name, der eingeht, und dann natürlich die E-Mail. 129 00:07:24,930 --> 00:07:27,323 ‫Okay, das ist also alles 130 00:07:29,240 --> 00:07:32,920 ‫Anfrage, und jetzt testen wir, ob wir unseren Erfolg 131 00:07:36,160 --> 00:07:40,993 ‫tatsächlich so zurückbekommen. Daten. Status, wenn es 132 00:07:44,470 --> 00:07:46,140 ‫gleich erfolgreich ist, und 133 00:07:46,140 --> 00:07:50,910 ‫noch einmal der Status, den wir in allen unseren Antworten finden. Denken 134 00:07:50,910 --> 00:07:54,520 ‫Sie daran, und wenn dies erfolgreich war, möchten wir 135 00:07:54,520 --> 00:07:56,750 ‫eine Erfolgsmeldung anzeigen, die besagt, 136 00:07:59,770 --> 00:08:04,400 ‫dass die Daten erfolgreich aktualisiert wurden. "Speichern Sie es, und 137 00:08:07,650 --> 00:08:09,170 ‫ich denke, 138 00:08:09,170 --> 00:08:14,170 ‫das sollte es für diese Funktion sein, in Ordnung. 139 00:08:14,620 --> 00:08:17,293 ‫Jetzt müssen wir es nur noch hier verwenden. 140 00:08:18,220 --> 00:08:20,373 ‫Zuerst importiere ich eine 141 00:08:25,493 --> 00:08:26,493 ‫Funktion 142 00:08:29,050 --> 00:08:32,360 ‫"updateData" from ". /update settings" und so 143 00:08:32,360 --> 00:08:34,623 ‫können wir das "js" dort ablegen. 144 00:08:36,340 --> 00:08:39,933 ‫Als nächstes wählen wir das Formular auf der Seite aus. 145 00:08:41,860 --> 00:08:46,860 ‫Verwenden Sie also ein Datenformular gleich document. querySelector und dann 146 00:08:50,489 --> 00:08:53,190 ‫schauen wir uns das an. 147 00:08:53,190 --> 00:08:55,410 ‫Es ist also hier im 148 00:08:58,150 --> 00:09:01,893 ‫Konto und dieses Formular hat einen Klassennamen von Formularbenutzerdaten. 149 00:09:03,630 --> 00:09:07,920 ‫Also, lass uns das packen und hier platzieren. 150 00:09:07,920 --> 00:09:11,670 ‫Okay, und jetzt werden wir hier etwas sehr Ähnliches zu diesem 151 00:09:11,670 --> 00:09:12,703 ‫Login machen. 152 00:09:14,480 --> 00:09:19,089 ‫Wenn es also ein Benutzerdatenformular gibt, dann fügen 153 00:09:19,089 --> 00:09:22,203 ‫wir diesem einen Ereignis-Listener hinzu. 154 00:09:24,410 --> 00:09:27,980 ‫Also addEventListener im Fall von Absenden und Zugriff auf 155 00:09:33,640 --> 00:09:35,660 ‫das Ereignis hier und wir 156 00:09:37,060 --> 00:09:38,880 ‫werden die Standardeinstellung verhindern, 157 00:09:38,880 --> 00:09:42,110 ‫also verhindern wir, dass das Formular gesendet wird. 158 00:09:42,110 --> 00:09:45,810 ‫Mit diesem Codestück erhalten wir dann die E-Mail und 159 00:09:45,810 --> 00:09:48,363 ‫den Namen, die denen, die 160 00:09:48,363 --> 00:09:51,663 ‫wir hier tatsächlich haben, sehr ähnlich sind. 161 00:09:56,178 --> 00:09:59,777 ‫Um sicher zu gehen, dass sie wirklich da sind, öffnen wir 162 00:09:59,777 --> 00:10:01,200 ‫dies noch einmal 163 00:10:02,080 --> 00:10:06,679 ‫und tatsächlich erhalten sie die ID des Namens und die ID der E-Mail. 164 00:10:06,679 --> 00:10:09,762 ‫Alles klar, E-Mail ist also E-Mail und Name 165 00:10:13,908 --> 00:10:16,050 ‫mit der Idee des Namens. 166 00:10:16,050 --> 00:10:18,640 ‫Okay, und dann müssen wir nur 167 00:10:18,640 --> 00:10:21,053 ‫noch die importierte Funktion aufrufen. 168 00:10:22,090 --> 00:10:27,090 ‫Also updateData mit dem Namen und der E-Mail und ich 169 00:10:27,880 --> 00:10:32,530 ‫denke, das ist die richtige Reihenfolge, also ja. 170 00:10:32,530 --> 00:10:35,840 ‫erst der Name und dann die E-Mail, ok. 171 00:10:35,840 --> 00:10:37,480 ‫Und hinter den Kulissen 172 00:10:39,060 --> 00:10:41,310 ‫sollte unser Paket immer noch all diese 173 00:10:41,310 --> 00:10:43,880 ‫Dateien bei jedem Speichern bündeln. Wenn wir dies 174 00:10:43,880 --> 00:10:45,846 ‫speichern, sehen Sie, dass es 175 00:10:45,846 --> 00:10:48,883 ‫jetzt hier aktualisiert wurde, und wir sollten jetzt damit beginnen. 176 00:10:51,580 --> 00:10:55,393 ‫Kehren wir also hier zu unserer Homepage zurück. 177 00:10:56,790 --> 00:10:59,723 ‫Gut. Und versuchen wir, unsere Daten zu aktualisieren. 178 00:11:01,300 --> 00:11:03,515 ‫Und was ich tun werde, 179 00:11:03,515 --> 00:11:07,570 ‫ist im Grunde zu den ursprünglichen Daten zurückzukehren, diesen zweiten Vornamen und 180 00:11:07,570 --> 00:11:10,580 ‫den Nachnamen von hier zu entfernen und jetzt die 181 00:11:11,620 --> 00:11:15,260 ‫Einstellungen zu speichern und los gehts, die Daten wurden erfolgreich aktualisiert. 182 00:11:15,260 --> 00:11:17,370 ‫Wenn wir also die Seite jetzt neu 183 00:11:17,370 --> 00:11:20,520 ‫laden, werden wir diese Daten im Grunde vom Server zurückbekommen. 184 00:11:20,520 --> 00:11:22,880 ‫Wenn sie also gleich sind, bedeutet dies, dass 185 00:11:22,880 --> 00:11:24,763 ‫die Daten tatsächlich persistiert wurden. 186 00:11:25,630 --> 00:11:28,680 ‫Also neu laden und los gehts. 187 00:11:28,680 --> 00:11:31,370 ‫So großartig. Das hat tatsächlich funktioniert. 188 00:11:31,370 --> 00:11:33,270 ‫Gehen wir hier einfach 189 00:11:33,270 --> 00:11:36,102 ‫auf eine andere Seite und zurück, um wirklich 190 00:11:36,102 --> 00:11:38,920 ‫sicher zu gehen, aber es hat tatsächlich funktioniert. 191 00:11:38,920 --> 00:11:41,233 ‫Und jetzt probieren wir einen dieser Fehler aus. 192 00:11:42,920 --> 00:11:46,090 ‫Alles klar, und das sollte eine falsche E-Mail-Adresse auslösen und 193 00:11:47,540 --> 00:11:50,190 ‫so sieht das viel schöner aus, so dass 194 00:11:50,190 --> 00:11:51,960 ‫es uns diese Fehlermeldung gibt, 195 00:11:51,960 --> 00:11:54,634 ‫die wir natürlich etwas besser formatieren könnten, damit 196 00:11:54,634 --> 00:11:56,203 ‫es besser aussieht. 197 00:11:58,140 --> 00:12:00,730 ‫Aber ich denke, so ist es für 198 00:12:00,730 --> 00:12:03,080 ‫diese kleine Anwendung völlig in Ordnung. 199 00:12:03,080 --> 00:12:04,760 ‫Und wir könnten alle 200 00:12:04,760 --> 00:12:08,600 ‫möglichen Dinge tun, wie dieses Feld hier rot markieren oder so. 201 00:12:08,600 --> 00:12:10,830 ‫Aber für solche Dinge wäre 202 00:12:10,830 --> 00:12:15,020 ‫es wahrscheinlich besser, ein echtes vollwertiges Frontend-Framework wie React oder 203 00:12:15,020 --> 00:12:16,791 ‫View zu verwenden. 204 00:12:16,791 --> 00:12:20,310 ‫Wie auch immer, dieses Formular funktioniert jetzt hier, außer dem 205 00:12:20,310 --> 00:12:22,480 ‫Bild, was wir im nächsten Abschnitt 206 00:12:22,480 --> 00:12:24,610 ‫wieder tun, und so müssen 207 00:12:24,610 --> 00:12:29,233 ‫Sie jetzt nur noch das Passwort aktualisieren, das wir im nächsten Video tun werden.