‫Jonas: Lassen Sie uns nun die Benutzerkontoseite
‫verwenden, um Benutzern zu ermöglichen, ihre Daten zu aktualisieren.
‫Was wir also tun werden, ist, dem
‫Benutzer vorerst zu erlauben, sowohl den Namen als auch die E-Mail-Adresse zu aktualisieren.
‫Und das Benutzerfoto werden wir hier etwas
‫später im nächsten Abschnitt hinzufügen.
‫Okay, jetzt gibt es zwei Möglichkeiten, wie wir dies tun können.
‫Die erste besteht darin, eine Post-Anfrage an unsere API zu senden, genau wie
‫wir es mit dem Anmeldeformular getan haben, erinnern Sie sich daran?
‫Und tatsächlich werden wir das in der nächsten Vorlesung tun.
‫Aber in diesem möchte ich Ihnen einen
‫anderen Weg zeigen, der ein eher traditioneller, normaler Weg ist.
‫Auf diese traditionellere Weise
‫geben wir die Post-Methode direkt im Formular zusammen
‫mit der URL an, an die die Post-Anfrage gesendet werden soll.
‫Mit dieser Methode benötigen wir also im Grunde
‫kein JavaScript für die Anfrage, dies
‫geschieht automatisch mit dem HTML-Formular, das die Daten dann
‫an den URL-Endpunkt in unserem von uns angegebenen Backend sendet.
‫Nun, ich persönlich mag diese Lösung nicht wirklich, weil
‫sie ein Neuladen der Seite erzwingt
‫und wir außerdem eine
‫weitere Route und einen Route-Handler in unserem Backend erstellen müssen.
‫Und schließlich wird es
‫auch etwas schwieriger, mit Fehlern umzugehen.
‫Ich glaube jedoch, dass es sehr wichtig ist,
‫dass Sie auf diese Weise mit Formularen arbeiten,
‫da dies in der
‫Anwendung, die Sie erstellen, möglicherweise sinnvoller ist.
‫Zum Beispiel benötigt Ihre Anwendung möglicherweise nicht einmal eine API, und
‫in diesem Fall, wenn Sie nur
‫eine gerenderte Website erstellen, ist es natürlich nicht sinnvoll,
‫Formulare über einen API-Aufruf zu senden, und Sie
‫werden stattdessen mach es so,
‫wie wir es in diesem Video machen werden.
‫In Ordnung, und deshalb machen wir es in
‫dieser Vorlesung so und
‫verwenden dann die API-Methode in der nächsten Vorlesung.
‫Was wir also in unserem Formular
‫tun müssen, um es
‫automatisch zu senden,
‫ohne JavaScript wie oben erwähnt
‫durchlaufen zu müssen, also die Daten im Grunde
‫automatisch an unseren Endpunkt zu senden, ist diesen Endpunkt anzugeben, und das
‫machen wir hier im Formular, wo wir das Aktionsattribut angeben.
‫Also die Aktion, und sagen wir,
‫wir erstellen einen Endpunkt namens Benutzerdaten senden, wie folgt.
‫Okay, und dann geben wir auch
‫die Methode an, die post, okay ist, also muss dies
‫immer auf dem Formularelement passieren, das wir senden, okay.
‫Lassen Sie uns hier etwas mehr Platz
‫geben, damit es leichter
‫verständlich ist, und so ist dies hier
‫unser Formular, und wenn wir also
‫auf dieses Schaltflächenelement klicken, wird das Formular automatisch gesendet
‫und die Daten werden gesendet mit einer Post-Anfrage an diese URL, in Ordnung.
‫Es gibt auch verschiedene Arten,
‫auf denen die Daten tatsächlich gesendet werden, aber die Standardmethode
‫heißt URL-kodiert, und daher verwenden wir sie hier.
‫Im Grunde müssen wir also
‫alle Daten, die wir übermitteln, in die
‫URL ein wenig wie eine Abfragezeichenfolge codieren.
‫Okay, aber dazu mehr, wenn wir tatsächlich daran arbeiten,
‫die Daten auf den Server zu bekommen und damit zu arbeiten.
‫Dies ist also der erste Schritt, damit diese Methode funktioniert, und der
‫zweite besteht darin, die Namenseigenschaften für die Felder anzugeben,
‫die wir tatsächlich senden möchten.
‫Es ist also diese Eingabe und diese
‫Eingabe, und ihre Werte werden
‫mit einer Anfrage basierend auf ihren Namensattributen gesendet.
‫Okay, also sagen wir hier, Name ist gleich Name, okay,
‫das ist also der Benutzername, und dann hat dieser
‫hier den Namen E-Mail.
‫Okay, und das ist dann der Name dieses Feldes und der
‫Text, den unsere Anwendung erhält.
‫Okay, und jetzt, wenn wir das Formular abschicken, enthält der
‫Text, den wir dann erhalten,
‫nur den Namen und die E-Mail, da
‫dies die einzigen beiden
‫Felder sind, die tatsächlich ein Namensattribut haben.
‫Okay, also lassen Sie uns jetzt diese Route hier implementieren, okay,
‫also wie gesagt, mit dieser Methode müssen
‫wir noch eine andere Route implementieren.
‫Okay, also Router, und denken Sie daran, dass dies eine Post-Anfrage ist.
‫Okay, also wird dieser in viewsController sein, und sagen wir
‫updateUserData, in Ordnung, speichern Sie ihn und erstellen
‫wir jetzt diesen Handler.
‫Also hier in dieser Datei.
‫Und das erste, was ich hier
‫machen möchte, ist, einen Blick auf den Körper zu werfen. Körper, okay, und so im Grunde in diesem
‫Fall, nur um Ihnen zu zeigen, dass es tatsächlich nicht so funktioniert.
‫Okay, und ich werde Ihnen sagen, warum, nachdem wir es
‫ausprobiert haben, okay, also lassen Sie uns
‫für den Moment einfach sehen, ob wir tatsächlich bereits verbunden sind.
‫Wenn das Absenden dieses Formulars
‫diesen Handler hier tatsächlich auslöst, okay, fügen
‫wir hier auch einen String hinzu, um sicherzugehen.
‫Okay, also lasst uns das
‫hier neu laden, damit wir unser neues Formular erhalten, und lasst
‫uns zur Sicherheit einen Blick darauf werfen.
‫Okay, du siehst hier
‫die Aktion und die Methode, die wir hinzugefügt
‫haben, und natürlich auch diese Namen, okay, also
‫fügen wir hier einen zweiten Vornamen hinzu, ich weiß nicht, sagen wir
‫Sarah, dann hier die E-Mail lass
‫uns hinzufügen der Nachname dazu, jetzt bekommen wir diesen Fehler, bitte geben Sie
‫E-Mail und Passwort an, und so kommt diese Art von dem
‫Login-Formular, richtig, das ist also seltsam.
‫Schauen wir uns also unser Formular hier
‫an, und tatsächlich hat dieses Formular hier die Formularklasse.
‫Und ich denke, das haben wir auch in unserem
‫Index verwendet. js, richtig.
‫Hier haben wir das Formular
‫im Grunde genommen mit der Formularklasse erhalten, und wenn es existiert
‫und es gesendet wird, versuchen wir uns direkt hier einzuloggen.
‫Okay, das ist natürlich nicht richtig, und so
‫sollten wir unser Login-Formular anders wählen.
‫Lassen Sie uns das also sehr schnell beheben, hier haben wir
‫Login, also fügen
‫wir hier einfach eine weitere Klasse hinzu, Formular-Login, und das ist ein bisschen seltsam,
‫weil wir hier bereits ein Login-Formular haben, aber
‫es ist nicht wirklich in einem Formularelement.
‫Wir sollten das also nicht verwenden, und lassen
‫Sie uns hier ein Formular mit einem Modifikator von login erstellen, okay.
‫Lassen Sie uns das hier ablegen, speichern, und jetzt sollte dies
‫nicht mehr passieren, da wir diesen Ereignishandler
‫jetzt nicht mehr an dieses
‫Formular angehängt haben.
‫Also lass es uns schnell neu
‫laden und es noch einmal versuchen, und jetzt siehst du, dass
‫es tatsächlich etwas tut, aber natürlich wird
‫es hier nie aufhören, sich zu drehen, weil wir tatsächlich
‫keine Antwort zurückgeschickt haben, und daher ist der Anfrage-Antwort-Zyklus nie beendet.
‫Aber egal, ich wollte mir nur den Anfragetext anschauen,
‫erinnerst du dich daran?
‫Und wie ich bereits erwähnt habe, ist es jetzt tatsächlich MT.
‫Okay, wie gesagt, das wird nicht wirklich so
‫funktionieren, weil wir eine weitere Middleware
‫hinzufügen müssen, um Daten aus einem Formular zu analysieren.
‫Machen wir das also in unserer App. js.
‫Aber zuerst lassen Sie uns einige dieser Dateien hier tatsächlich schließen.
‫Okay, auch dieses hier und jetzt zur App. js, fügen wir diese Klausel unserem Body-Parser
‫hinzu. Hier sind wir
‫also, denn eigentlich ist sie sehr ähnlich.
‫Also App. verwenden, und es ist immer noch eine in Express
‫integrierte Middleware, also express. urlencoded, okay, und es wird so genannt, denn
‫denken Sie daran, die Art und
‫Weise, wie das Formular Daten an den Server sendet, wird eigentlich auch
‫als URL-codiert bezeichnet, und hier brauchen wir diese Middleware, um im Grunde Daten
‫zu analysieren, die aus einem URL-codierten Formular stammen.
‫Dann übergeben wir einige Einstellungen, und wir können Extended True sagen,
‫und das ermöglicht uns einfach, einige komplexere
‫Daten zu übergeben, die in diesem Fall nicht wirklich notwendig sind, aber
‫wir verwenden sie
‫hier trotzdem, und wir können
‫auch das Limit festlegen -Eigenschaft wie beim Body-Parser, also
‫hier oben, und sagen wir wieder 10 Kilobyte.
‫Okay, und wenn wir das hier jetzt noch einmal versuchen, sollten
‫wir tatsächlich diese Daten erhalten, und zwar diese Daten.
‫Lassen Sie uns diese anderen Daten hier noch einmal hinzufügen,
‫damit wir sicher sind, dass sie nicht den aktuellen Benutzer
‫erhalten, sondern die Daten aus dem Formular, okay, und
‫wieder dreht es sich
‫hier ewig weiter
‫oder bis es das Zeitlimit überschreitet. Aber was
‫uns interessiert, ist, diese neuen Daten jetzt hier in unseren Körper zu bekommen.
‫Großartig, das funktioniert, und wir haben unser
‫HTML-Formular jetzt wirklich mit diesem Route-Handler hier verbunden.
‫Und so können wir jetzt fortfahren und den Benutzer basierend
‫auf diesen neuen Daten aktualisieren, in Ordnung.
‫Lassen Sie uns dies also loswerden und aktualisieren
‫Sie dann den Benutzer, da wir bereits wissen, wie es geht.
‫Als erstes müssen wir das Benutzermodell importieren,
‫also lass uns das tun.
‫User, hier mit einem kleinen
‫U, in Ordnung, und nun nehmen wir
‫an, der User wartet gleich auf User. findByIdAndUpdate.
‫Richtig, dann natürlich
‫wie immer diesen als asynchron markieren und alle Fehler abfangen.
‫Nun gut, also was ist die ID, die wir suchen?
‫Und ich hoffe, dass Sie an dieser Stelle wissen, wo es
‫ist, es wird auf Anfrage sein. Benutzer. Ich würde.
‫Oh, und eine
‫wichtige Sache, die wir tun müssen, was
‫ich noch nicht getan habe, ist, diese
‫Route auch hier tatsächlich zu schützen,
‫okay, denn nur dann haben wir diesen Benutzer
‫tatsächlich auf Anfrage, richtig, und natürlich Außerdem möchten wir nur
‫auf diese Route zugreifen können, wenn
‫wir eingeloggt sind, sonst könnte jeder einfach einige Daten aktualisieren.
‫Hier in der Route
‫fügen wir natürlich authController hinzu. beschützen.
‫Okay, also
‫das ist die ID, dann brauchen wir die neuen
‫Daten, und so wollen wir mal einen Namen gleich anfordern. Karosserie. Name und die E-Mail-Adresse, die angefordert
‫werden soll. Karosserie. Email.
‫Und denken Sie daran, dass dies
‫die Namen der Felder sind, da wir ihnen im HTML-Formular das name-Attribut gegeben haben.
‫Denken Sie daran, dass wir früher, als wir einige Daten
‫aktualisiert haben, die gesamte Anfrage hier in die Update-Methode übergeben
‫haben, richtig, aber in diesem Fall
‫möchten wir wirklich nur den Namen und die
‫E-Mail aktualisieren, und so sind wir sicher, dass im Grunde
‫alles andere aus dem Körper entfernt wird,
‫denn ein Hacker könnte jetzt natürlich weitermachen und dem
‫HTML einige zusätzliche Felder hinzufügen und
‫dann zum Beispiel Daten wie Passwörter und
‫dergleichen übermitteln, und das tun wir natürlich
‫auch diese bösartigen Daten nicht in unserer
‫Datenbank speichern möchten, richtig.
‫Außerdem werden Passwörter wieder separat behandelt,
‫denn denken Sie daran, dass wir Passwörter niemals
‫mit findByIdAndUpdate aktualisieren können.
‫Auch hier wird die sichere Middleware nicht ausgeführt, die
‫sich um die Verschlüsselung unserer Passwörter kümmert.
‫Okay, und deshalb haben wir dafür eine separate
‫Route in unserer API und
‫auch eine separate Route dafür in unserer Benutzeroberfläche.
‫Und so sieht es in Webanwendungen normalerweise
‫immer aus, wenn Sie Ihre Passwörter aktualisieren
‫möchten, normalerweise haben Sie nur dafür
‫ein separates Formular, ok.
‫Wie auch immer, lassen Sie uns jetzt hier mit
‫unseren Optionen fortfahren, wo wir sagen,
‫dass wir das neue, also im Grunde das aktualisierte Dokument
‫als Ergebnis erhalten und auch die Validatoren ausführen möchten.
‫Dies ist also genau so, wie wir es zuvor in unserer API getan haben.
‫Großartig, also nennen wir es eigentlich updateUser.
‫Okay, und was wollen wir jetzt machen?
‫Nun, nach dem Absenden der Daten auf unserer Website
‫möchten wir im Grunde einfach auf diese
‫Seite hier zurückkommen, aber dann natürlich mit
‫den aktualisierten Daten hier, okay.
‫Das ist also ganz einfach, wir müssen die Kontoseite
‫im Grunde noch einmal neu rendern.
‫Und das ist ähnlich wie hier, lass es
‫uns einfach kopieren, okay, aber jetzt
‫gibt es tatsächlich einen wichtigen Unterschied, denn im Moment müssen
‫wir tatsächlich auch den
‫Benutzer übergeben, also den aktualisierten Benutzer,
‫weil sonst der Benutzer, der die Vorlage hat verwendet wird,
‫ist diejenige, die von der Protect-Middleware kommt,
‫denken Sie daran, und damit einer
‫nicht der aktualisierte Benutzer sein wird.
‫Richtig, und so müssen wir den Benutzer übergeben ist aktualisiertBenutzer.
‫Okay, das sollte reichen.
‫Wenn wir das also jetzt neu laden, oder eigentlich jetzt
‫hier speichern, dann sehen Sie, dass wir tatsächlich auf genau dieselbe Seite zurückgekommen sind und die
‫Daten immer noch die gleichen sind.
‫Lassen Sie uns das beweisen, gehen
‫Sie zu einer anderen Seite und dann zurück zur Einstellungsseite.
‫Dies beweist also, dass die Daten
‫jetzt effektiv aktualisiert wurden.
‫Wenn wir uns jetzt abmelden, versuchen
‫wir uns mit dieser neuen E-Mail anzumelden.
‫Also wollte ich mich ausloggen, gut, und jetzt wieder einloggen.
‫Und jetzt verwenden wir diese neue E-Mail und natürlich immer noch das
‫alte Passwort test1234, und tatsächlich ist
‫dies jetzt die neue E-Mail-Adresse,
‫die wir verwenden müssen, um uns einzuloggen.
‫Sehen wir uns nun an, was passiert, wenn wir hier
‫einige falsche Daten eingeben.
‫Google Chrome ermöglicht es uns beispielsweise, eine E-Mail-Adresse wie
‫diese zu übermitteln, aber unser
‫Mungo-Modell lässt eine E-Mail in diesem
‫Format natürlich nicht zu.
‫Und so sollten wir jetzt einen Fehler erhalten,
‫und tatsächlich erhalten wir
‫diesen Fehler. Bitte geben Sie eine gültige E-Mail an,
‫aber das ist eine schreckliche Benutzererfahrung, richtig, also haben wir
‫nur unsere Daten übermittelt und dann plötzlich, wir sind
‫auf eine komplett neue Seite gegangen.
‫Und tatsächlich sehen wir, dass wir auch zu dieser
‫neuen URL gekommen sind, also der URL, an die wir die Daten gesendet haben.
‫Also ja, das ist ein bisschen schrecklich, und
‫wie ich gleich zu Beginn
‫sagte, ist diese Vorgehensweise tatsächlich etwas schlechter
‫für den Umgang mit Fehlern, was einer
‫der Gründe ist, warum ich persönlich lieber
‫die API verwende, die wir verwenden bereits erstellt, um
‫die Benutzerdaten zu aktualisieren, und im Allgemeinen, um solche Dinge zu tun.
‫Okay, also lass uns
‫im nächsten Video genau das tun.