‫Kursleiter: In
‫diesem Video werden wir die Benutzerkontoseite hauptsächlich
‫mit Konzepten erstellen, die wir bereits kennen
‫und bereits verwendet haben.
‫Und lasst uns zunächst einen
‫Blick darauf werfen, was ich eigentlich mit der Benutzerkontoseite
‫auf unserer Referenzwebsite, also hier auf natours, meine. dev.
‫Wir haben dieses Menü bereits hier auf
‫unserer Website
‫gerendert, aber wenn wir dann auf diesen Benutzer
‫klicken, erhalten wir Zugriff auf die Benutzerkontoseite.
‫Und so können wir hier einige Grundeinstellungen ändern,
‫auch ein neues Foto hochladen, aber
‫dieses machen wir eigentlich
‫im nächsten
‫Abschnitt, und der Benutzer kann auch sein Passwort auf dieser Seite aktualisieren.
‫Dann gibt es auf der linken Seite einige
‫Menüpunkte, die wir nicht wirklich
‫implementieren werden, also implementieren wir nur
‫das Menü, aber nicht wirklich die Seiten, auf
‫die sie verweisen, und wenn der Benutzer ein
‫Administrator ist, rendern wir auch diesen Teil Hier.
‫Okay, das bauen wir in dieser Vorlesung auf, und in den
‫nächsten Vorlesungen werden wir uns
‫dann tatsächlich darum kümmern, die Einstellungen wirklich zu aktualisieren.
‫Im Grunde also, damit diese Schaltflächen hier funktionieren.
‫Gut?
‫Aber im Moment rendert es nur diese Seite hier
‫auf dieser . mir-URL.
‫Okay?
‫Beginnen wir also mit der Mops-Vorlage.
‫Alles klar, und so
‫habe ich wie immer dieses AccountTemplate hier.
‫Also nehmen wir das, kopieren es und
‫erstellen dann hier unten eine neue Ansicht,
‫die ich Konto nenne.
‫Und jetzt wollen wir
‫die Basis erweitern und wie immer einen Block namens content erstellen.
‫Und hier fügen wir dann tatsächlich unseren Inhalt ein.
‫Gut?
‫Jetzt müssen wir all
‫dies einrücken, um es innerhalb des Blocks zu schaffen.
‫Großartig, hier haben wir zuerst unsere Navigation, oder?
‫Also Einstellungen, Buchungen, Bewertungen und Abrechnungen, die wir
‫dort auf der linken Seite der
‫Seite gesehen haben, und dann haben wir auch noch die Admin-Navigation, oder?
‫Und sie sehen hier bereits viel doppelten Code.
‫Im Grunde genommen erscheinen diese
‫Listenelementelemente hier tatsächlich achtmal.
‫Also viermal hier oben und viermal hier unten, also lasst uns
‫ganz schnell ein Mixin für sie erstellen, damit
‫unser Code ein bisschen sauberer aussieht.
‫In Ordnung, also werde ich
‫weitermachen und tatsächlich eine davon kopieren.
‫Und dann erstellen Sie ein neues Mixin namens navItem.
‫Okay, das haben wir schon mal gemacht.
‫Das ist also sehr ähnlich.
‫Was müssen wir also in
‫dieses Mixin eingeben, um jedes dieser Elemente im Grunde anzupassen?
‫Nun, was sich ändern wird, ist der Link.
‫Auch der Text, also Einstellungen, Buchungen usw.
‫Das ist also Text.
‫Dann wird sich auch das Symbol
‫ändern, und endlich sehen Sie,
‫dass dieses erste hier die Side-Nav-Active-Klasse hat, oder?
‫Und so werden wir auch hier im Grunde einen Aktiven spezifizieren.
‫Und wenn wir dann ein Element als aktiv
‫markieren möchten, gehen wir einfach hier durch.
‫Okay?
‫Jetzt müssen wir die Einrückung hier korrigieren.
‫Und dann geben Sie unsere Daten ein.
‫Als nächstes kommt der Text.
‫Das ist an dieser
‫Stelle natürlich nichts Neues, also mache ich es hier ziemlich schnell, oder?
‫Also icon und dann der Name des Icons, das wir übergeben.
‫Also genau wie wir es zuvor getan
‫haben, und dann wird dieses
‫aktive hier, denk daran, entweder wahr oder falsch sein.
‫Und wenn es wahr ist, möchten wir diese Klasse hinzufügen.
‫Also kopieren wir es.
‫Und dann legen wir hier das Klassenattribut fest.
‫Und dann, genau wie
‫wir, machen wir hier eine Dreherei-Erklärung.
‫Wenn wir also im Grunde aktiv sind, dann
‫wollen wir hier Side-Nav-aktiv haben.
‫Und wenn nicht, dann wollen wir nichts.
‫Also im Grunde ein leerer Klassenname.
‫Gut.
‫Und so können wir dies jetzt durch unser Mixin ersetzen.
‫Das heißt also navItem, und denken Sie daran,
‫wir schreiben + und dann navItem.
‫Hier ist der Link also ein leerer Link.
‫Und zwar vorerst für alle.
‫Dann
‫Einstellungen, dann der
‫Name des Symbols, das auch Einstellungen enthält,
‫jedoch in Kleinbuchstaben.
‫Und dann ist endlich dieser tatsächlich aktiv, und so
‫gehen wir wahr.
‫In Ordnung, duplizieren wir es.
‫Haben Sie eine Aktentasche und wir haben Meine Buchungen.
‫Machen wir das klein.
‫In Ordnung, duplizieren Sie es noch zweimal.
‫Also hier
‫haben wir Star
‫und dann hier Kreditkarte zur Abrechnung.
‫Gut.
‫Und jetzt haben wir die Admin-Navigation.
‫Und dieser ist nur
‫sichtbar, wenn der aktuelle Benutzer ein Administrator ist.
‫Lassen Sie uns das also tatsächlich mit einer if-Anweisung definieren.
‫Hier müssen wir also testen, ob die
‫Benutzerrolle admin gleich ist, oder?
‫Und das
‫ist wieder eine dieser komplexeren
‫if-Anweisungen, und wir müssen dafür JavaScript verwenden.
‫Also verwende ich hier wieder ungepufferten Code.
‫Und wenn und
‫dann haben wir hier Zugriff auf die Benutzervariable.
‫Also genau wie bei anderen Vorlagen.
‫Also werden wir es im Grunde hier weitergeben.
‫Und dann hat der Benutzer natürlich das Rollenattribut, und
‫wir testen, ob es admin ist.
‫Und wenn ja, dann wollen wir das alles zeigen.
‫Und so muss es jetzt eine Ebene eingerückt sein.
‫Okay?
‫Und all das wollen wir jetzt
‫natürlich auch hier durch unser Mixin ersetzen.
‫Also viermal.
‫Diese wird als Karte bezeichnet.
‫Touren verwalten.
‫Dieses ist Benutzer verwalten.
‫Bewertungen verwalten.
‫Und dann haben wir endlich eine mit der Aktentasche.
‫Und dieser hat hier nicht den Text, aber
‫es heißt Buchungen verwalten.
‫Gut.
‫Also lasst uns das loswerden und unsere Arbeit hier unten fortsetzen.
‫Dieses hier wird also das
‫Formular zum Ändern der Benutzereinstellungen sein.
‫Und so werden die personenbezogenen Daten hier in diesen Werten sein, okay?
‫Im Grunde ist der Wert in einem HTML-Eingabeelement also
‫eine Art vordefinierter Text, den
‫wir in ein Eingabeelement einfügen können.
‫Und so geben wir
‫normalerweise den aktuellen Wert dieser Eingabe, also
‫dieses Felds, ein.
‫Im Moment ist das natürlich der Name des Benutzers.
‫Also lasst uns das hier setzen.
‫Benutzer. Name.
‫Und hier unten ist es dann
‫natürlich die E-Mail.
‫Und hier haben wir auch das Bild des Benutzers.
‫Benutzer von Bild-Schrägstrichen streichen also den Bildnamen selbst.
‫Okay.
‫Dann gibt es hier unten nichts zu tun.
‫Gut?
‫Und das ist es tatsächlich.
‫Das sind also wirklich alle Daten, die
‫vom Benutzerobjekt stammen und die
‫wir eingeben müssen.
‫Okay, das ist die Vorlage.
‫Lassen Sie uns nun fortfahren und die Route dem viewRouter hinzufügen.
‫Also genau hier, und dieser wird /me heißen.
‫Also haben wir einen Controller namens getAccount.
‫Nun, dieser hier
‫wird natürlich ein geschützter Weg sein, oder?
‫Denn nur wenn wir tatsächlich eingeloggt
‫sind, erhalten wir Zugriff auf diese Seite.
‫Daher müssen wir hier unsere Protect-Middleware verwenden.
‫Das ist also ein AuthController. beschützen.
‫Okay?
‫So wie wir es bei allen oder anderen geschützten Routen gemacht haben.
‫Ein Problem, das ich dabei
‫sehe, ist, dass diese
‫Protect-Middleware hier der isLoggedIn sehr ähnlich ist.
‫Und so werden wir dort tatsächlich einige Duplikate durchführen,
‫was nicht ideal ist.
‫Denn denken Sie daran, dass
‫isLoggedIn für alle Anfragen ausgeführt wird, oder?
‫Werfen wir also einen kurzen Blick auf diese, damit
‫ich meinen Standpunkt darlegen kann.
‫Also in Protect bekommen wir den aktuellen Benutzer hier unten.
‫Also haben wir diese findById hier.
‫Aber wir machen
‫das gleiche hier unten in eingeloggt, okay?
‫Durch die gleichzeitige Verwendung von isLoggedIn und Protect führen wir diese
‫Abfrage zweimal durch.
‫Und das ist natürlich nicht ideal.
‫Also setzen wir isLoggedIn hier nur unter
‫Routen, die nicht geschützt sind, okay?
‫Denn auf der
‫geschützten Route wird diese Prüfung,
‫ob der Benutzer eingeloggt ist, tatsächlich auch passieren, oder?
‫Aber nicht in dieser Middleware,
‫sondern dann in
‫der Protect-Middleware, weil die ja im Grunde auch darauf prüft, oder?
‫Schneiden wir es also von hier aus und fügen Sie es einfach
‫in andere Routen ein, die nicht geschützt sind.
‫Okay, sinnvoll?
‫Auf diese Weise haben wir also nicht
‫das Problem, in allen geschützten Middlewares im Grunde
‫dieselbe Abfrage zweimal durchzuführen.
‫Und das ist ein bisschen besser für unsere Leistung.
‫Nun, eine Sache, die wir im isLoggedIn
‫machen, die wir derzeit
‫nicht im Protect machen, ist dies hier.
‫Also haben wir einen aktuellen Benutzer auf die Antwort gesetzt. Einheimische.
‫Und so lassen Sie
‫uns jetzt im currentUser dasselbe tun.
‫Machen wir dasselbe hier in der Protect-Middleware.
‫So stellen Sie den aktuellenUser beide auf Anfrage. Benutzer und auf
‫Antwort. Einheimische, in Ordnung?
‫Damit wir es dann automatisch
‫in allen Vorlagen danach verwenden können.
‫Also in diesem Fall in unserer Kontovorlage, in Ordnung?
‫Also lass es dir sparen.
‫Und jetzt müssen wir diesen getAccount-Controller hinzufügen, um diesen
‫Fehler, den wir derzeit erhalten, natürlich
‫zu beheben.
‫Das ist also in viewsController. getAccount-Anfrage und -Antwort.
‫Und Sie werden gleich sehen, warum wir nur diese beiden brauchen.
‫Um die Kontoseite zu erhalten, müssen wir also
‫nur diese Seite rendern.
‫Wir müssen nicht einmal nach dem aktuellen Benutzer fragen,
‫da dies bereits in der Protect-Middleware
‫getan wurde, oder?
‫Und so ist wirklich alles, was wir wirklich
‫tun müssen, so etwas zu tun.
‫Also kopiere diesen Code und
‫dann hier Konto.
‫Und geben wir ihm den Titel Ihres Kontos.
‫Alles klar, damit verschwindet der Fehler.
‫Und als letztes Puzzleteil fügen wir nun den eigentlich richtigen
‫Link in die Kopfzeile ein.
‫Hier in unserer Kopfzeile zeigt der Link
‫also nicht auf diese Kontoseite, oder?
‫Es zeigt also nirgendwo hin.
‫Und so sollte es jetzt auf /me zeigen.
‫Okay, und das sollte das
‫letzte Stück sein, damit es tatsächlich funktioniert.
‫Und so loggen wir uns
‫jetzt hier mit Test eins, zwei, drei, vier ein.
‫Wir sind erfolgreich eingeloggt.
‫Und jetzt, wenn Sie hier klicken, erhalten wir unsere Seite.
‫Fantastisch.
‫Jetzt gibt es hier einen Fehler mit dem Benutzerfoto.
‫Also lass uns das beheben.
‫Aber abgesehen davon funktioniert eigentlich alles einwandfrei.
‫Wir bekommen dieses Menü auch hier, weil wir uns gerade im Admin-Bereich
‫befinden, und lassen Sie uns das auch gleich testen, um zu sehen,
‫ob es für andere Benutzer verschwindet.
‫Und tatsächlich bekommen wir diesen Fehler auch hier
‫unten, weil wir eine fehlgeschlagene Anforderung für das Bild haben.
‫Und so sehen wir schon, dass wir da wahrscheinlich
‫etwas falsch machen.
‫Und hier
‫im Bild ist es natürlich kein Benutzer. Name, es ist Benutzer. Foto.
‫Also speichern Sie das, laden Sie es hier neu.
‫Und jetzt geht es tatsächlich.
‫Gut?
‫Jetzt loggen wir uns aus und sehen, was dann passiert.
‫Und dann bekommen wir diese Art von Fehler.
‫Und das liegt im Grunde daran, dass wir
‫versuchen, auf diese geschützte Route zuzugreifen, während wir nicht eingeloggt sind.
‫Gut?
‫Also versuchen wir es jetzt noch einmal.
‫Wenn wir also versuchen, uns mit /me
‫einzuloggen, dann bekommen wir, dass Sie nicht eingeloggt sind, okay?
‫Und bevor wir diesen seltsam aussehenden Fehler bekamen, weil
‫wir uns gerade in der Entwicklung befinden.
‫Aber in der Produktion würden wir diesen seltsamen Fehler natürlich nicht sehen,
‫den wir zuvor gesehen haben.
‫Rechts?
‫Aber was wir
‫jetzt sehen ist, dass unsere Route natürlich wirklich geschützt ist.
‫Daher können wir nicht darauf zugreifen, wenn wir nicht eingeloggt sind.
‫Zum Abschluss melden wir uns nun mit einem anderen
‫Konto an, um
‫zu sehen, ob der Administratorteil auch funktioniert.
‫Lassen Sie uns hier wieder Laura verwenden.
‫Und Sie sehen, dass sie nur eine normale Benutzerin ist.
‫Gut.
‫Und jetzt
‫bekommen wir ihr Benutzerkonto, natürlich ohne das Admin-Menü.
‫Okay, perfekt.
‫Das baut also die Kontoseite auf.
‫Und wie gesagt, im nächsten Video
‫kümmern wir uns dann um die
‫eigentliche Aktualisierung dieser Kontoeinstellungen.