1 00:00:01,040 --> 00:00:03,600 ‫Jonas: Lassen Sie uns nun die Benutzerkontoseite 2 00:00:03,600 --> 00:00:06,803 ‫verwenden, um Benutzern zu ermöglichen, ihre Daten zu aktualisieren. 3 00:00:08,410 --> 00:00:10,770 ‫Was wir also tun werden, ist, dem 4 00:00:10,770 --> 00:00:15,030 ‫Benutzer vorerst zu erlauben, sowohl den Namen als auch die E-Mail-Adresse zu aktualisieren. 5 00:00:15,030 --> 00:00:17,060 ‫Und das Benutzerfoto werden wir hier etwas 6 00:00:17,060 --> 00:00:18,843 ‫später im nächsten Abschnitt hinzufügen. 7 00:00:19,826 --> 00:00:23,670 ‫Okay, jetzt gibt es zwei Möglichkeiten, wie wir dies tun können. 8 00:00:23,670 --> 00:00:27,420 ‫Die erste besteht darin, eine Post-Anfrage an unsere API zu senden, genau wie 9 00:00:27,420 --> 00:00:31,150 ‫wir es mit dem Anmeldeformular getan haben, erinnern Sie sich daran? 10 00:00:31,150 --> 00:00:33,950 ‫Und tatsächlich werden wir das in der nächsten Vorlesung tun. 11 00:00:33,950 --> 00:00:36,600 ‫Aber in diesem möchte ich Ihnen einen 12 00:00:36,600 --> 00:00:39,950 ‫anderen Weg zeigen, der ein eher traditioneller, normaler Weg ist. 13 00:00:39,950 --> 00:00:41,840 ‫Auf diese traditionellere Weise 14 00:00:41,840 --> 00:00:45,150 ‫geben wir die Post-Methode direkt im Formular zusammen 15 00:00:45,150 --> 00:00:49,710 ‫mit der URL an, an die die Post-Anfrage gesendet werden soll. 16 00:00:49,710 --> 00:00:52,980 ‫Mit dieser Methode benötigen wir also im Grunde 17 00:00:52,980 --> 00:00:55,660 ‫kein JavaScript für die Anfrage, dies 18 00:00:55,660 --> 00:00:59,450 ‫geschieht automatisch mit dem HTML-Formular, das die Daten dann 19 00:00:59,450 --> 00:01:03,580 ‫an den URL-Endpunkt in unserem von uns angegebenen Backend sendet. 20 00:01:03,580 --> 00:01:06,980 ‫Nun, ich persönlich mag diese Lösung nicht wirklich, weil 21 00:01:06,980 --> 00:01:09,270 ‫sie ein Neuladen der Seite erzwingt 22 00:01:09,270 --> 00:01:11,200 ‫und wir außerdem eine 23 00:01:11,200 --> 00:01:14,750 ‫weitere Route und einen Route-Handler in unserem Backend erstellen müssen. 24 00:01:14,750 --> 00:01:16,830 ‫Und schließlich wird es 25 00:01:16,830 --> 00:01:19,120 ‫auch etwas schwieriger, mit Fehlern umzugehen. 26 00:01:19,120 --> 00:01:22,510 ‫Ich glaube jedoch, dass es sehr wichtig ist, 27 00:01:22,510 --> 00:01:25,700 ‫dass Sie auf diese Weise mit Formularen arbeiten, 28 00:01:25,700 --> 00:01:27,910 ‫da dies in der 29 00:01:27,910 --> 00:01:30,630 ‫Anwendung, die Sie erstellen, möglicherweise sinnvoller ist. 30 00:01:30,630 --> 00:01:34,140 ‫Zum Beispiel benötigt Ihre Anwendung möglicherweise nicht einmal eine API, und 31 00:01:34,140 --> 00:01:36,200 ‫in diesem Fall, wenn Sie nur 32 00:01:36,200 --> 00:01:39,140 ‫eine gerenderte Website erstellen, ist es natürlich nicht sinnvoll, 33 00:01:39,140 --> 00:01:41,770 ‫Formulare über einen API-Aufruf zu senden, und Sie 34 00:01:41,770 --> 00:01:43,490 ‫werden stattdessen mach es so, 35 00:01:43,490 --> 00:01:46,020 ‫wie wir es in diesem Video machen werden. 36 00:01:46,020 --> 00:01:48,760 ‫In Ordnung, und deshalb machen wir es in 37 00:01:48,760 --> 00:01:50,580 ‫dieser Vorlesung so und 38 00:01:50,580 --> 00:01:53,320 ‫verwenden dann die API-Methode in der nächsten Vorlesung. 39 00:01:53,320 --> 00:01:55,910 ‫Was wir also in unserem Formular 40 00:01:55,910 --> 00:01:57,960 ‫tun müssen, um es 41 00:01:57,960 --> 00:01:59,930 ‫automatisch zu senden, 42 00:01:59,930 --> 00:02:02,030 ‫ohne JavaScript wie oben erwähnt 43 00:02:02,030 --> 00:02:05,240 ‫durchlaufen zu müssen, also die Daten im Grunde 44 00:02:05,240 --> 00:02:10,240 ‫automatisch an unseren Endpunkt zu senden, ist diesen Endpunkt anzugeben, und das 45 00:02:10,550 --> 00:02:15,133 ‫machen wir hier im Formular, wo wir das Aktionsattribut angeben. 46 00:02:17,380 --> 00:02:21,410 ‫Also die Aktion, und sagen wir, 47 00:02:21,410 --> 00:02:26,410 ‫wir erstellen einen Endpunkt namens Benutzerdaten senden, wie folgt. 48 00:02:27,740 --> 00:02:30,433 ‫Okay, und dann geben wir auch 49 00:02:33,180 --> 00:02:37,400 ‫die Methode an, die post, okay ist, also muss dies 50 00:02:37,400 --> 00:02:41,310 ‫immer auf dem Formularelement passieren, das wir senden, okay. 51 00:02:41,310 --> 00:02:43,963 ‫Lassen Sie uns hier etwas mehr Platz 52 00:02:45,020 --> 00:02:47,170 ‫geben, damit es leichter 53 00:02:47,170 --> 00:02:49,920 ‫verständlich ist, und so ist dies hier 54 00:02:49,920 --> 00:02:52,500 ‫unser Formular, und wenn wir also 55 00:02:52,500 --> 00:02:56,260 ‫auf dieses Schaltflächenelement klicken, wird das Formular automatisch gesendet 56 00:02:56,260 --> 00:03:01,260 ‫und die Daten werden gesendet mit einer Post-Anfrage an diese URL, in Ordnung. 57 00:03:01,410 --> 00:03:03,540 ‫Es gibt auch verschiedene Arten, 58 00:03:03,540 --> 00:03:06,850 ‫auf denen die Daten tatsächlich gesendet werden, aber die Standardmethode 59 00:03:06,850 --> 00:03:09,540 ‫heißt URL-kodiert, und daher verwenden wir sie hier. 60 00:03:09,540 --> 00:03:11,440 ‫Im Grunde müssen wir also 61 00:03:11,440 --> 00:03:14,050 ‫alle Daten, die wir übermitteln, in die 62 00:03:14,050 --> 00:03:16,650 ‫URL ein wenig wie eine Abfragezeichenfolge codieren. 63 00:03:16,650 --> 00:03:19,480 ‫Okay, aber dazu mehr, wenn wir tatsächlich daran arbeiten, 64 00:03:19,480 --> 00:03:22,790 ‫die Daten auf den Server zu bekommen und damit zu arbeiten. 65 00:03:22,790 --> 00:03:26,880 ‫Dies ist also der erste Schritt, damit diese Methode funktioniert, und der 66 00:03:26,880 --> 00:03:30,220 ‫zweite besteht darin, die Namenseigenschaften für die Felder anzugeben, 67 00:03:30,220 --> 00:03:32,423 ‫die wir tatsächlich senden möchten. 68 00:03:33,310 --> 00:03:35,950 ‫Es ist also diese Eingabe und diese 69 00:03:35,950 --> 00:03:38,460 ‫Eingabe, und ihre Werte werden 70 00:03:38,460 --> 00:03:41,420 ‫mit einer Anfrage basierend auf ihren Namensattributen gesendet. 71 00:03:41,420 --> 00:03:46,420 ‫Okay, also sagen wir hier, Name ist gleich Name, okay, 72 00:03:48,360 --> 00:03:53,180 ‫das ist also der Benutzername, und dann hat dieser 73 00:03:53,180 --> 00:03:56,083 ‫hier den Namen E-Mail. 74 00:03:57,680 --> 00:04:01,910 ‫Okay, und das ist dann der Name dieses Feldes und der 75 00:04:01,910 --> 00:04:04,370 ‫Text, den unsere Anwendung erhält. 76 00:04:04,370 --> 00:04:07,840 ‫Okay, und jetzt, wenn wir das Formular abschicken, enthält der 77 00:04:07,840 --> 00:04:09,750 ‫Text, den wir dann erhalten, 78 00:04:09,750 --> 00:04:12,410 ‫nur den Namen und die E-Mail, da 79 00:04:12,410 --> 00:04:14,290 ‫dies die einzigen beiden 80 00:04:14,290 --> 00:04:16,640 ‫Felder sind, die tatsächlich ein Namensattribut haben. 81 00:04:16,640 --> 00:04:20,233 ‫Okay, also lassen Sie uns jetzt diese Route hier implementieren, okay, 82 00:04:21,730 --> 00:04:23,930 ‫also wie gesagt, mit dieser Methode müssen 83 00:04:23,930 --> 00:04:25,993 ‫wir noch eine andere Route implementieren. 84 00:04:28,550 --> 00:04:33,550 ‫Okay, also Router, und denken Sie daran, dass dies eine Post-Anfrage ist. 85 00:04:36,200 --> 00:04:40,713 ‫Okay, also wird dieser in viewsController sein, und sagen wir 86 00:04:44,500 --> 00:04:48,467 ‫updateUserData, in Ordnung, speichern Sie ihn und erstellen 87 00:04:54,934 --> 00:04:57,100 ‫wir jetzt diesen Handler. 88 00:04:58,440 --> 00:04:59,993 ‫Also hier in dieser Datei. 89 00:05:10,580 --> 00:05:12,310 ‫Und das erste, was ich hier 90 00:05:12,310 --> 00:05:14,733 ‫machen möchte, ist, einen Blick auf den Körper zu werfen. Körper, okay, und so im Grunde in diesem 91 00:05:19,437 --> 00:05:22,800 ‫Fall, nur um Ihnen zu zeigen, dass es tatsächlich nicht so funktioniert. 92 00:05:22,800 --> 00:05:26,550 ‫Okay, und ich werde Ihnen sagen, warum, nachdem wir es 93 00:05:26,550 --> 00:05:29,380 ‫ausprobiert haben, okay, also lassen Sie uns 94 00:05:29,380 --> 00:05:33,200 ‫für den Moment einfach sehen, ob wir tatsächlich bereits verbunden sind. 95 00:05:33,200 --> 00:05:35,380 ‫Wenn das Absenden dieses Formulars 96 00:05:35,380 --> 00:05:38,390 ‫diesen Handler hier tatsächlich auslöst, okay, fügen 97 00:05:38,390 --> 00:05:41,700 ‫wir hier auch einen String hinzu, um sicherzugehen. 98 00:05:41,700 --> 00:05:43,500 ‫Okay, also lasst uns das 99 00:05:47,620 --> 00:05:50,980 ‫hier neu laden, damit wir unser neues Formular erhalten, und lasst 100 00:05:52,040 --> 00:05:54,020 ‫uns zur Sicherheit einen Blick darauf werfen. 101 00:05:54,020 --> 00:05:56,020 ‫Okay, du siehst hier 102 00:05:58,210 --> 00:06:01,080 ‫die Aktion und die Methode, die wir hinzugefügt 103 00:06:01,080 --> 00:06:04,023 ‫haben, und natürlich auch diese Namen, okay, also 104 00:06:04,870 --> 00:06:09,253 ‫fügen wir hier einen zweiten Vornamen hinzu, ich weiß nicht, sagen wir 105 00:06:10,890 --> 00:06:13,010 ‫Sarah, dann hier die E-Mail lass 106 00:06:13,010 --> 00:06:17,473 ‫uns hinzufügen der Nachname dazu, jetzt bekommen wir diesen Fehler, bitte geben Sie 107 00:06:19,500 --> 00:06:23,460 ‫E-Mail und Passwort an, und so kommt diese Art von dem 108 00:06:23,460 --> 00:06:25,730 ‫Login-Formular, richtig, das ist also seltsam. 109 00:06:25,730 --> 00:06:29,063 ‫Schauen wir uns also unser Formular hier 110 00:06:30,770 --> 00:06:34,660 ‫an, und tatsächlich hat dieses Formular hier die Formularklasse. 111 00:06:34,660 --> 00:06:38,130 ‫Und ich denke, das haben wir auch in unserem 112 00:06:38,130 --> 00:06:39,270 ‫Index verwendet. js, richtig. 113 00:06:39,270 --> 00:06:42,377 ‫Hier haben wir das Formular 114 00:06:45,200 --> 00:06:48,070 ‫im Grunde genommen mit der Formularklasse erhalten, und wenn es existiert 115 00:06:48,070 --> 00:06:50,830 ‫und es gesendet wird, versuchen wir uns direkt hier einzuloggen. 116 00:06:50,830 --> 00:06:54,990 ‫Okay, das ist natürlich nicht richtig, und so 117 00:06:54,990 --> 00:06:58,450 ‫sollten wir unser Login-Formular anders wählen. 118 00:06:58,450 --> 00:07:02,170 ‫Lassen Sie uns das also sehr schnell beheben, hier haben wir 119 00:07:02,170 --> 00:07:03,783 ‫Login, also fügen 120 00:07:05,310 --> 00:07:10,310 ‫wir hier einfach eine weitere Klasse hinzu, Formular-Login, und das ist ein bisschen seltsam, 121 00:07:12,300 --> 00:07:14,970 ‫weil wir hier bereits ein Login-Formular haben, aber 122 00:07:14,970 --> 00:07:17,460 ‫es ist nicht wirklich in einem Formularelement. 123 00:07:17,460 --> 00:07:20,040 ‫Wir sollten das also nicht verwenden, und lassen 124 00:07:20,040 --> 00:07:23,820 ‫Sie uns hier ein Formular mit einem Modifikator von login erstellen, okay. 125 00:07:23,820 --> 00:07:28,493 ‫Lassen Sie uns das hier ablegen, speichern, und jetzt sollte dies 126 00:07:31,890 --> 00:07:34,853 ‫nicht mehr passieren, da wir diesen Ereignishandler 127 00:07:36,970 --> 00:07:39,270 ‫jetzt nicht mehr an dieses 128 00:07:40,270 --> 00:07:42,010 ‫Formular angehängt haben. 129 00:07:42,010 --> 00:07:44,173 ‫Also lass es uns schnell neu 130 00:07:45,120 --> 00:07:48,473 ‫laden und es noch einmal versuchen, und jetzt siehst du, dass 131 00:07:50,953 --> 00:07:53,340 ‫es tatsächlich etwas tut, aber natürlich wird 132 00:07:53,340 --> 00:07:56,290 ‫es hier nie aufhören, sich zu drehen, weil wir tatsächlich 133 00:07:56,290 --> 00:07:59,470 ‫keine Antwort zurückgeschickt haben, und daher ist der Anfrage-Antwort-Zyklus nie beendet. 134 00:07:59,470 --> 00:08:03,160 ‫Aber egal, ich wollte mir nur den Anfragetext anschauen, 135 00:08:03,160 --> 00:08:04,870 ‫erinnerst du dich daran? 136 00:08:04,870 --> 00:08:07,680 ‫Und wie ich bereits erwähnt habe, ist es jetzt tatsächlich MT. 137 00:08:07,680 --> 00:08:10,853 ‫Okay, wie gesagt, das wird nicht wirklich so 138 00:08:11,960 --> 00:08:15,100 ‫funktionieren, weil wir eine weitere Middleware 139 00:08:15,100 --> 00:08:18,510 ‫hinzufügen müssen, um Daten aus einem Formular zu analysieren. 140 00:08:18,510 --> 00:08:21,540 ‫Machen wir das also in unserer App. js. 141 00:08:21,540 --> 00:08:23,843 ‫Aber zuerst lassen Sie uns einige dieser Dateien hier tatsächlich schließen. 142 00:08:24,870 --> 00:08:28,333 ‫Okay, auch dieses hier und jetzt zur App. js, fügen wir diese Klausel unserem Body-Parser 143 00:08:30,880 --> 00:08:35,880 ‫hinzu. Hier sind wir 144 00:08:37,290 --> 00:08:40,373 ‫also, denn eigentlich ist sie sehr ähnlich. 145 00:08:41,860 --> 00:08:45,273 ‫Also App. verwenden, und es ist immer noch eine in Express 146 00:08:47,340 --> 00:08:51,423 ‫integrierte Middleware, also express. urlencoded, okay, und es wird so genannt, denn 147 00:08:52,940 --> 00:08:56,837 ‫denken Sie daran, die Art und 148 00:09:00,280 --> 00:09:03,380 ‫Weise, wie das Formular Daten an den Server sendet, wird eigentlich auch 149 00:09:03,380 --> 00:09:06,830 ‫als URL-codiert bezeichnet, und hier brauchen wir diese Middleware, um im Grunde Daten 150 00:09:06,830 --> 00:09:09,000 ‫zu analysieren, die aus einem URL-codierten Formular stammen. 151 00:09:09,000 --> 00:09:13,440 ‫Dann übergeben wir einige Einstellungen, und wir können Extended True sagen, 152 00:09:13,440 --> 00:09:16,630 ‫und das ermöglicht uns einfach, einige komplexere 153 00:09:16,630 --> 00:09:21,630 ‫Daten zu übergeben, die in diesem Fall nicht wirklich notwendig sind, aber 154 00:09:22,000 --> 00:09:23,720 ‫wir verwenden sie 155 00:09:23,720 --> 00:09:25,650 ‫hier trotzdem, und wir können 156 00:09:25,650 --> 00:09:29,530 ‫auch das Limit festlegen -Eigenschaft wie beim Body-Parser, also 157 00:09:29,530 --> 00:09:33,010 ‫hier oben, und sagen wir wieder 10 Kilobyte. 158 00:09:33,010 --> 00:09:37,113 ‫Okay, und wenn wir das hier jetzt noch einmal versuchen, sollten 159 00:09:38,930 --> 00:09:42,930 ‫wir tatsächlich diese Daten erhalten, und zwar diese Daten. 160 00:09:42,930 --> 00:09:46,670 ‫Lassen Sie uns diese anderen Daten hier noch einmal hinzufügen, 161 00:09:46,670 --> 00:09:50,370 ‫damit wir sicher sind, dass sie nicht den aktuellen Benutzer 162 00:09:50,370 --> 00:09:53,620 ‫erhalten, sondern die Daten aus dem Formular, okay, und 163 00:09:54,480 --> 00:09:56,090 ‫wieder dreht es sich 164 00:09:56,090 --> 00:09:57,593 ‫hier ewig weiter 165 00:09:59,820 --> 00:10:02,860 ‫oder bis es das Zeitlimit überschreitet. Aber was 166 00:10:02,860 --> 00:10:07,720 ‫uns interessiert, ist, diese neuen Daten jetzt hier in unseren Körper zu bekommen. 167 00:10:07,720 --> 00:10:11,850 ‫Großartig, das funktioniert, und wir haben unser 168 00:10:11,850 --> 00:10:16,410 ‫HTML-Formular jetzt wirklich mit diesem Route-Handler hier verbunden. 169 00:10:16,410 --> 00:10:19,920 ‫Und so können wir jetzt fortfahren und den Benutzer basierend 170 00:10:19,920 --> 00:10:22,860 ‫auf diesen neuen Daten aktualisieren, in Ordnung. 171 00:10:22,860 --> 00:10:25,490 ‫Lassen Sie uns dies also loswerden und aktualisieren 172 00:10:25,490 --> 00:10:29,010 ‫Sie dann den Benutzer, da wir bereits wissen, wie es geht. 173 00:10:29,010 --> 00:10:31,610 ‫Als erstes müssen wir das Benutzermodell importieren, 174 00:10:31,610 --> 00:10:33,900 ‫also lass uns das tun. 175 00:10:33,900 --> 00:10:37,873 ‫User, hier mit einem kleinen 176 00:10:39,160 --> 00:10:44,160 ‫U, in Ordnung, und nun nehmen wir 177 00:10:46,930 --> 00:10:51,910 ‫an, der User wartet gleich auf User. findByIdAndUpdate. 178 00:10:51,910 --> 00:10:55,013 ‫Richtig, dann natürlich 179 00:11:00,780 --> 00:11:04,850 ‫wie immer diesen als asynchron markieren und alle Fehler abfangen. 180 00:11:04,850 --> 00:11:07,473 ‫Nun gut, also was ist die ID, die wir suchen? 181 00:11:12,920 --> 00:11:17,890 ‫Und ich hoffe, dass Sie an dieser Stelle wissen, wo es 182 00:11:17,890 --> 00:11:21,120 ‫ist, es wird auf Anfrage sein. Benutzer. Ich würde. 183 00:11:21,120 --> 00:11:25,640 ‫Oh, und eine 184 00:11:25,640 --> 00:11:27,980 ‫wichtige Sache, die wir tun müssen, was 185 00:11:27,980 --> 00:11:30,490 ‫ich noch nicht getan habe, ist, diese 186 00:11:30,490 --> 00:11:32,600 ‫Route auch hier tatsächlich zu schützen, 187 00:11:32,600 --> 00:11:35,430 ‫okay, denn nur dann haben wir diesen Benutzer 188 00:11:35,430 --> 00:11:38,810 ‫tatsächlich auf Anfrage, richtig, und natürlich Außerdem möchten wir nur 189 00:11:38,810 --> 00:11:41,050 ‫auf diese Route zugreifen können, wenn 190 00:11:41,050 --> 00:11:44,470 ‫wir eingeloggt sind, sonst könnte jeder einfach einige Daten aktualisieren. 191 00:11:44,470 --> 00:11:46,683 ‫Hier in der Route 192 00:11:48,210 --> 00:11:50,880 ‫fügen wir natürlich authController hinzu. beschützen. 193 00:11:50,880 --> 00:11:53,300 ‫Okay, also 194 00:11:58,450 --> 00:12:03,390 ‫das ist die ID, dann brauchen wir die neuen 195 00:12:03,390 --> 00:12:08,343 ‫Daten, und so wollen wir mal einen Namen gleich anfordern. Karosserie. Name und die E-Mail-Adresse, die angefordert 196 00:12:08,343 --> 00:12:13,320 ‫werden soll. Karosserie. Email. 197 00:12:18,710 --> 00:12:23,233 ‫Und denken Sie daran, dass dies 198 00:12:25,010 --> 00:12:27,960 ‫die Namen der Felder sind, da wir ihnen im HTML-Formular das name-Attribut gegeben haben. 199 00:12:27,960 --> 00:12:31,630 ‫Denken Sie daran, dass wir früher, als wir einige Daten 200 00:12:31,630 --> 00:12:35,470 ‫aktualisiert haben, die gesamte Anfrage hier in die Update-Methode übergeben 201 00:12:35,470 --> 00:12:37,970 ‫haben, richtig, aber in diesem Fall 202 00:12:37,970 --> 00:12:41,020 ‫möchten wir wirklich nur den Namen und die 203 00:12:41,020 --> 00:12:44,520 ‫E-Mail aktualisieren, und so sind wir sicher, dass im Grunde 204 00:12:44,520 --> 00:12:47,210 ‫alles andere aus dem Körper entfernt wird, 205 00:12:47,210 --> 00:12:50,710 ‫denn ein Hacker könnte jetzt natürlich weitermachen und dem 206 00:12:50,710 --> 00:12:53,040 ‫HTML einige zusätzliche Felder hinzufügen und 207 00:12:53,040 --> 00:12:55,770 ‫dann zum Beispiel Daten wie Passwörter und 208 00:12:55,770 --> 00:12:58,330 ‫dergleichen übermitteln, und das tun wir natürlich 209 00:12:58,330 --> 00:13:01,020 ‫auch diese bösartigen Daten nicht in unserer 210 00:13:01,020 --> 00:13:03,070 ‫Datenbank speichern möchten, richtig. 211 00:13:03,070 --> 00:13:06,720 ‫Außerdem werden Passwörter wieder separat behandelt, 212 00:13:06,720 --> 00:13:10,700 ‫denn denken Sie daran, dass wir Passwörter niemals 213 00:13:10,700 --> 00:13:13,250 ‫mit findByIdAndUpdate aktualisieren können. 214 00:13:13,250 --> 00:13:17,120 ‫Auch hier wird die sichere Middleware nicht ausgeführt, die 215 00:13:17,120 --> 00:13:20,580 ‫sich um die Verschlüsselung unserer Passwörter kümmert. 216 00:13:20,580 --> 00:13:23,860 ‫Okay, und deshalb haben wir dafür eine separate 217 00:13:23,860 --> 00:13:26,560 ‫Route in unserer API und 218 00:13:26,560 --> 00:13:29,950 ‫auch eine separate Route dafür in unserer Benutzeroberfläche. 219 00:13:29,950 --> 00:13:32,090 ‫Und so sieht es in Webanwendungen normalerweise 220 00:13:32,090 --> 00:13:34,550 ‫immer aus, wenn Sie Ihre Passwörter aktualisieren 221 00:13:34,550 --> 00:13:36,610 ‫möchten, normalerweise haben Sie nur dafür 222 00:13:36,610 --> 00:13:38,430 ‫ein separates Formular, ok. 223 00:13:38,430 --> 00:13:41,493 ‫Wie auch immer, lassen Sie uns jetzt hier mit 224 00:13:42,830 --> 00:13:45,373 ‫unseren Optionen fortfahren, wo wir sagen, 225 00:13:46,640 --> 00:13:50,063 ‫dass wir das neue, also im Grunde das aktualisierte Dokument 226 00:13:51,140 --> 00:13:54,463 ‫als Ergebnis erhalten und auch die Validatoren ausführen möchten. 227 00:13:55,350 --> 00:13:59,053 ‫Dies ist also genau so, wie wir es zuvor in unserer API getan haben. 228 00:14:00,500 --> 00:14:03,193 ‫Großartig, also nennen wir es eigentlich updateUser. 229 00:14:05,410 --> 00:14:08,613 ‫Okay, und was wollen wir jetzt machen? 230 00:14:12,800 --> 00:14:16,070 ‫Nun, nach dem Absenden der Daten auf unserer Website 231 00:14:16,070 --> 00:14:18,763 ‫möchten wir im Grunde einfach auf diese 232 00:14:19,790 --> 00:14:22,350 ‫Seite hier zurückkommen, aber dann natürlich mit 233 00:14:22,350 --> 00:14:24,760 ‫den aktualisierten Daten hier, okay. 234 00:14:24,760 --> 00:14:27,660 ‫Das ist also ganz einfach, wir müssen die Kontoseite 235 00:14:27,660 --> 00:14:30,170 ‫im Grunde noch einmal neu rendern. 236 00:14:30,170 --> 00:14:32,873 ‫Und das ist ähnlich wie hier, lass es 237 00:14:34,160 --> 00:14:36,340 ‫uns einfach kopieren, okay, aber jetzt 238 00:14:36,340 --> 00:14:39,900 ‫gibt es tatsächlich einen wichtigen Unterschied, denn im Moment müssen 239 00:14:39,900 --> 00:14:41,910 ‫wir tatsächlich auch den 240 00:14:41,910 --> 00:14:44,120 ‫Benutzer übergeben, also den aktualisierten Benutzer, 241 00:14:44,120 --> 00:14:47,600 ‫weil sonst der Benutzer, der die Vorlage hat verwendet wird, 242 00:14:47,600 --> 00:14:49,920 ‫ist diejenige, die von der Protect-Middleware kommt, 243 00:14:49,920 --> 00:14:52,190 ‫denken Sie daran, und damit einer 244 00:14:52,190 --> 00:14:54,330 ‫nicht der aktualisierte Benutzer sein wird. 245 00:14:54,330 --> 00:14:57,223 ‫Richtig, und so müssen wir den Benutzer übergeben ist aktualisiertBenutzer. 246 00:14:58,720 --> 00:15:03,720 ‫Okay, das sollte reichen. 247 00:15:06,050 --> 00:15:08,933 ‫Wenn wir das also jetzt neu laden, oder eigentlich jetzt 248 00:15:10,450 --> 00:15:14,943 ‫hier speichern, dann sehen Sie, dass wir tatsächlich auf genau dieselbe Seite zurückgekommen sind und die 249 00:15:16,000 --> 00:15:17,890 ‫Daten immer noch die gleichen sind. 250 00:15:17,890 --> 00:15:20,970 ‫Lassen Sie uns das beweisen, gehen 251 00:15:20,970 --> 00:15:25,000 ‫Sie zu einer anderen Seite und dann zurück zur Einstellungsseite. 252 00:15:25,000 --> 00:15:27,450 ‫Dies beweist also, dass die Daten 253 00:15:27,450 --> 00:15:29,500 ‫jetzt effektiv aktualisiert wurden. 254 00:15:29,500 --> 00:15:31,603 ‫Wenn wir uns jetzt abmelden, versuchen 255 00:15:33,090 --> 00:15:35,440 ‫wir uns mit dieser neuen E-Mail anzumelden. 256 00:15:35,440 --> 00:15:37,423 ‫Also wollte ich mich ausloggen, gut, und jetzt wieder einloggen. 257 00:15:39,530 --> 00:15:44,530 ‫Und jetzt verwenden wir diese neue E-Mail und natürlich immer noch das 258 00:15:44,950 --> 00:15:47,493 ‫alte Passwort test1234, und tatsächlich ist 259 00:15:48,780 --> 00:15:51,130 ‫dies jetzt die neue E-Mail-Adresse, 260 00:15:53,810 --> 00:15:56,500 ‫die wir verwenden müssen, um uns einzuloggen. 261 00:15:56,500 --> 00:15:59,670 ‫Sehen wir uns nun an, was passiert, wenn wir hier 262 00:15:59,670 --> 00:16:01,120 ‫einige falsche Daten eingeben. 263 00:16:01,120 --> 00:16:04,860 ‫Google Chrome ermöglicht es uns beispielsweise, eine E-Mail-Adresse wie 264 00:16:04,860 --> 00:16:07,120 ‫diese zu übermitteln, aber unser 265 00:16:07,120 --> 00:16:09,530 ‫Mungo-Modell lässt eine E-Mail in diesem 266 00:16:09,530 --> 00:16:11,550 ‫Format natürlich nicht zu. 267 00:16:11,550 --> 00:16:14,250 ‫Und so sollten wir jetzt einen Fehler erhalten, 268 00:16:14,250 --> 00:16:15,950 ‫und tatsächlich erhalten wir 269 00:16:17,620 --> 00:16:20,540 ‫diesen Fehler. Bitte geben Sie eine gültige E-Mail an, 270 00:16:20,540 --> 00:16:23,690 ‫aber das ist eine schreckliche Benutzererfahrung, richtig, also haben wir 271 00:16:23,690 --> 00:16:26,530 ‫nur unsere Daten übermittelt und dann plötzlich, wir sind 272 00:16:26,530 --> 00:16:28,470 ‫auf eine komplett neue Seite gegangen. 273 00:16:28,470 --> 00:16:31,740 ‫Und tatsächlich sehen wir, dass wir auch zu dieser 274 00:16:31,740 --> 00:16:36,740 ‫neuen URL gekommen sind, also der URL, an die wir die Daten gesendet haben. 275 00:16:36,850 --> 00:16:39,420 ‫Also ja, das ist ein bisschen schrecklich, und 276 00:16:39,420 --> 00:16:41,470 ‫wie ich gleich zu Beginn 277 00:16:41,470 --> 00:16:43,930 ‫sagte, ist diese Vorgehensweise tatsächlich etwas schlechter 278 00:16:43,930 --> 00:16:46,420 ‫für den Umgang mit Fehlern, was einer 279 00:16:46,420 --> 00:16:48,960 ‫der Gründe ist, warum ich persönlich lieber 280 00:16:48,960 --> 00:16:51,840 ‫die API verwende, die wir verwenden bereits erstellt, um 281 00:16:51,840 --> 00:16:55,640 ‫die Benutzerdaten zu aktualisieren, und im Allgemeinen, um solche Dinge zu tun. 282 00:16:55,640 --> 00:16:57,740 ‫Okay, also lass uns 283 00:16:57,740 --> 00:17:00,720 ‫im nächsten Video genau das tun.