‫Sprecher: Also, wie wir im letzten
‫Vortrag gesagt haben, verwenden wir nun tatsächlich unsere API, um Benutzerdaten zu aktualisieren.
‫Und so werden wir, genau wie zuvor,
‫mit der Login-Funktionalität jetzt einen API-Aufruf vom Frontend aus durchführen.
‫Also müssen wir dafür eine neue JavaScript-Datei erstellen.
‫Und dieses hier nenne ich Update-Einstellungen.
‫Und Einstellungen, denn wir werden im
‫Grunde die Daten, die Name und E-Mail sind,
‫aktualisieren, und später werden wir auch das Passwort aus dieser Datei
‫aktualisieren, und daher Passwort zusammen mit den Benutzerdaten, ich
‫habe sie Einstellungen genannt. In Ordung.
‫Das ist also ziemlich ähnlich zu dem, was
‫wir mit dem Login gemacht haben.
‫und so möchte ich dies eigentlich
‫noch einmal als herausforderung
‫für dich belassen, damit du das bereits Gelernte üben kannst.
‫Machen Sie also weiter und erstellen Sie hier eine Funktion zum Aktualisieren von Daten.
‫Aktualisieren von Daten ist also der Name
‫der Funktion, die Sie hier erstellen und diese Funktion
‫dann natürlich direkt hier aus dem Index
‫aufrufen möchten. jf.
‫Sie müssen also eine Funktion von hier exportieren und sie dann
‫hier in den Index importieren, so ähnlich
‫wie wir es zuvor
‫mit den anderen Funktionen gemacht haben.
‫Eine wichtige Sache, die wir jetzt vor
‫dem eigentlichen Schreiben des JavaScripts tun
‫müssen, ist, dass wir diese Teile in unserem Formular hier tatsächlich entfernen müssen.
‫Lassen Sie uns diese Zeile hier
‫also tatsächlich duplizieren, damit wir sie als Referenz belassen.
‫Also lasst uns diesen Teil auskommentieren und hier einen weiteren Kommentar
‫hinzufügen, ohne API, und dann
‫ist dieser hier mit API, und hier brauchen wir also
‫nicht die Aktion und auch nicht die
‫Methode, gut, denn
‫wenn du es so belässt dann könnten
‫die Daten tatsächlich an diese URL gesendet werden.
‫Und selbst wenn nicht, wir brauchen es hier immer noch nicht.
‫In Ordnung, das war also nur eine wichtige Sache.
‫Aber jetzt pausieren Sie bitte das Video und
‫versuchen Sie, dies selbst umzusetzen.
‫Ich bin sicher, Sie haben das gerade getan.
‫Und hier geht es so, wie ich es gemacht habe.
‫Exportieren Sie also const_update-Daten.
‫Und diese Funktion erhält als Eingabe den
‫Namen und die E-Mail, also die Daten, die Sie aktualisieren möchten, und dann
‫verwenden wir Axios,
‫um den API-Aufruf selbst zu erstellen.
‫Lassen Sie uns dann auch Axios
‫aus dem Axios-Modul importieren.
‫Dies ist also wieder die es6-Modulsyntax und nicht die übliche
‫js-Modulsyntax, die wir in node verwenden. js, in Ordnung,
‫also verwechseln Sie diese beiden nicht, in Ordnung.
‫Diese HTTP-Anfrage, die wir mit axios ausführen, muss
‫sich also wieder in einem try-catch-Block befinden, damit wir
‫im Falle von Fehlern richtig damit
‫umgehen können.
‫Also genau hier
‫im catch-Block, und wie zuvor fangen wir damit
‫an und falls etwas nicht
‫stimmt, möchten wir die Warnung genau wie beim Login anzeigen.
‫Importieren wir also diese showAlert-Funktion wie diese
‫aus
‫demselben Ordner ". /warnungen. "
‫In Ordung. Oh, und wir müssen eslint auch wieder deaktivieren.
‫Und jetzt können wir loslegen.
‫Das nützt also nichts, die Benachrichtigungsfunktion hier anzeigen.
‫Wir möchten, dass es
‫ein Fehler ist, damit es diese schöne
‫rote Farbe erhält, und dann ist
‫die Nachricht, die wir anzeigen möchten, ein
‫Fehler, also der Fehler, der im try-Block erstellt wird, wenn etwas schief geht.
‫Dann ist der Fehler drin. Antwort, und
‫dann dort, Daten. message, okay, also ist
‫diese Message-Eigenschaft diejenige, die wir auf dem
‫Server definieren, wenn ein Fehler auftritt.
‫Anzeige, also werden wir das genauso versuchen, wie wir
‫es zuvor mit der Validierung getan haben, also haben wir in der
‫letzten Vorlesung diese Validierungsfehlermeldung hier erhalten, und jetzt
‫in diesem Video,
‫wenn wir den gleichen Fehler mit der
‫API machen, werden Sie es tun dann erhalten Sie die Warnung mit
‫genau derselben Nachricht, und das wird dann eine viel angenehmere
‫Benutzererfahrung sein, da wir die Seite, auf der wir waren, nicht verlassen, richtig.
‫Wie auch immer, lassen Sie uns diese HTTP-Anfrage jetzt tatsächlich ausführen.
‫Und speichern Sie diese Interloop-Antwort,
‫und wie Sie bereits wissen, müssen wir
‫auf das Versprechen warten, das von dieser Axios-Anfrage
‫kommt, und das ist als asynchron markiert und jetzt hier die Optionen.
‫Die Methode ist also ein Patch, okay?
‫Und Sie könnten dies hier in
‫Kleinbuchstaben verwenden, aber ich bevorzuge es, die HTTP-Methoden immer in
‫Großbuchstaben zu schreiben, und jetzt gehen wir tatsächlich zum Posten und sehen
‫uns die URL an, auf die wir jetzt zugreifen werden.
‫Aus irgendeinem Grund sieht das etwas seltsam aus, das zu groß ist..
‫aber das macht nichts.
‫Ich möchte nur die URL auswählen, auf die wir hier klicken werden.
‫also das geht hier
‫auf die benutzer und aktualisiere den aktuellen benutzer, ok.
‫Und so
‫erhält dieser als Körper nur die Daten, die wir aktualisieren wollen.
‫In diesem Fall sind es der Name und
‫die Rolle, aber
‫natürlich werden wir dem Benutzer nicht erlauben, die Rolle
‫zu aktualisieren, und ich denke, wir haben diese hier nur gemacht, um
‫das Beispiel zu zeigen, dass dies nicht
‫erlaubt ist, richtig, und Was
‫wir also aktualisieren, sind natürlich der Name und die E-Mail-Adresse.
‫Wichtig ist hier, dass wir für diese Route nicht
‫die Benutzer-ID angeben müssen, wie wir dies hier
‫in Update User tun müssen.
‫Dieser hier ist also der erste, den wir erstellt haben.
‫Und hier mussten wir die ID als URL-Parameter übergeben, aber beim
‫Aktualisieren des aktuellen Benutzers erhalten wir diese
‫Benutzer-ID natürlich aus der Anfrage. Benutzer wie immer.
‫Erinnere dich daran?
‫Wie auch immer, lass uns das jetzt hier kopieren.
‫Geben Sie dann die URL an.
‫Okay, und hier wie immer der lokale Host und wenn
‫wir diesen bereitstellen,
‫werden wir dies natürlich hier ändern.
‫Aber im Moment arbeiten wir hier natürlich nur lokal.
‫So ist es zu verwenden.
‫Als nächstes spezifizieren wir dann
‫die Daten und das
‫ist der Text, der zusammen mit der Anfrage
‫gesendet wird, und der Name ist
‫einfach der Name, der eingeht, und dann natürlich die E-Mail.
‫Okay, das ist also alles
‫Anfrage, und jetzt testen wir, ob wir unseren Erfolg
‫tatsächlich so zurückbekommen. Daten. Status, wenn es
‫gleich erfolgreich ist, und
‫noch einmal der Status, den wir in allen unseren Antworten finden. Denken
‫Sie daran, und wenn dies erfolgreich war, möchten wir
‫eine Erfolgsmeldung anzeigen, die besagt,
‫dass die Daten erfolgreich aktualisiert wurden. "Speichern Sie es, und
‫ich denke,
‫das sollte es für diese Funktion sein, in Ordnung.
‫Jetzt müssen wir es nur noch hier verwenden.
‫Zuerst importiere ich eine
‫Funktion
‫"updateData" from ". /update settings" und so
‫können wir das "js" dort ablegen.
‫Als nächstes wählen wir das Formular auf der Seite aus.
‫Verwenden Sie also ein Datenformular gleich document. querySelector und dann
‫schauen wir uns das an.
‫Es ist also hier im
‫Konto und dieses Formular hat einen Klassennamen von Formularbenutzerdaten.
‫Also, lass uns das packen und hier platzieren.
‫Okay, und jetzt werden wir hier etwas sehr Ähnliches zu diesem
‫Login machen.
‫Wenn es also ein Benutzerdatenformular gibt, dann fügen
‫wir diesem einen Ereignis-Listener hinzu.
‫Also addEventListener im Fall von Absenden und Zugriff auf
‫das Ereignis hier und wir
‫werden die Standardeinstellung verhindern,
‫also verhindern wir, dass das Formular gesendet wird.
‫Mit diesem Codestück erhalten wir dann die E-Mail und
‫den Namen, die denen, die
‫wir hier tatsächlich haben, sehr ähnlich sind.
‫Um sicher zu gehen, dass sie wirklich da sind, öffnen wir
‫dies noch einmal
‫und tatsächlich erhalten sie die ID des Namens und die ID der E-Mail.
‫Alles klar, E-Mail ist also E-Mail und Name
‫mit der Idee des Namens.
‫Okay, und dann müssen wir nur
‫noch die importierte Funktion aufrufen.
‫Also updateData mit dem Namen und der E-Mail und ich
‫denke, das ist die richtige Reihenfolge, also ja.
‫erst der Name und dann die E-Mail, ok.
‫Und hinter den Kulissen
‫sollte unser Paket immer noch all diese
‫Dateien bei jedem Speichern bündeln. Wenn wir dies
‫speichern, sehen Sie, dass es
‫jetzt hier aktualisiert wurde, und wir sollten jetzt damit beginnen.
‫Kehren wir also hier zu unserer Homepage zurück.
‫Gut. Und versuchen wir, unsere Daten zu aktualisieren.
‫Und was ich tun werde,
‫ist im Grunde zu den ursprünglichen Daten zurückzukehren, diesen zweiten Vornamen und
‫den Nachnamen von hier zu entfernen und jetzt die
‫Einstellungen zu speichern und los gehts, die Daten wurden erfolgreich aktualisiert.
‫Wenn wir also die Seite jetzt neu
‫laden, werden wir diese Daten im Grunde vom Server zurückbekommen.
‫Wenn sie also gleich sind, bedeutet dies, dass
‫die Daten tatsächlich persistiert wurden.
‫Also neu laden und los gehts.
‫So großartig. Das hat tatsächlich funktioniert.
‫Gehen wir hier einfach
‫auf eine andere Seite und zurück, um wirklich
‫sicher zu gehen, aber es hat tatsächlich funktioniert.
‫Und jetzt probieren wir einen dieser Fehler aus.
‫Alles klar, und das sollte eine falsche E-Mail-Adresse auslösen und
‫so sieht das viel schöner aus, so dass
‫es uns diese Fehlermeldung gibt,
‫die wir natürlich etwas besser formatieren könnten, damit
‫es besser aussieht.
‫Aber ich denke, so ist es für
‫diese kleine Anwendung völlig in Ordnung.
‫Und wir könnten alle
‫möglichen Dinge tun, wie dieses Feld hier rot markieren oder so.
‫Aber für solche Dinge wäre
‫es wahrscheinlich besser, ein echtes vollwertiges Frontend-Framework wie React oder
‫View zu verwenden.
‫Wie auch immer, dieses Formular funktioniert jetzt hier, außer dem
‫Bild, was wir im nächsten Abschnitt
‫wieder tun, und so müssen
‫Sie jetzt nur noch das Passwort aktualisieren, das wir im nächsten Video tun werden.