‫Jonas: In den nächsten
‫Vorlesungen werden wir die Login-Funktionalität zu unserer Website hinzufügen.
‫Und in
‫diesem Vortrag beginnen wir damit, den Anmeldebildschirm
‫tatsächlich zu rendern, um den Benutzern
‫die Anmeldung zu erleichtern.
‫Ich möchte noch einmal, dass dies eine Herausforderung für Sie
‫ist, damit Sie einige der Fähigkeiten, die Sie
‫gelernt haben, tatsächlich üben können.
‫Ich möchte, dass Sie eine Slash-Login-Route
‫erstellen.
‫Dann erstellen Sie einen Controller
‫und natürlich eine Vorlage.
‫Und diese Vorlage ist wirklich einfach.
‫Es ist nur ein statischer HTML-Code, an den
‫wir keine Variablen übergeben müssen.
‫Dafür gibt es tatsächlich
‫eine Vorlage hier im Vorlagenordner.
‫Das sollte für Sie also wirklich einfach sein.
‫Also pausiere dieses Video und komm zurück, wenn du fertig bist.
‫Gut, willkommen zurück.
‫Ich hoffe, Sie haben diese Herausforderung erfolgreich gemeistert.
‫Hier also meine Meinung dazu.
‫Router Dot Get die Route
‫ist Slash-Login und
‫dann
‫verwenden wir Controller Dot
‫Get Login-Formular.
‫Das ist also der Routenhandler, den ich als nächstes erstellen werde.
‫Exportieren Sie Punkt und erhalten Sie die Antwort des Anmeldeformulars
‫und hier
‫benötigen wir nicht mehr als nur
‫die Anfrage und die Antwort.
‫Tatsächlich sehe ich hier oben, dass
‫wir den nächsten verpassen.
‫Immer, wenn wir async-Funktionen in catchAsync verpackt haben,
‫sollten wir immer next angeben.
‫Aber hier müssen
‫wir jetzt nur noch eine Login-Vorlage rendern.
‫Wir haben diese Vorlage also noch nicht erstellt.
‫Aber es wird Login heißen.
‫Nehmen wir also an, res dot
‫status
‫200, eine
‫Rendervorlage namens login.
‫Dann, wie bei allen unseren
‫anderen Seiten, möchten wir ihr eigentlich einen benutzerdefinierten Titel geben.
‫Dafür haben wir immer ein Objekt
‫mit der title-Eigenschaft übergeben.
‫Rechts?
‫Die Basisvorlage liest dann diesen Titel und
‫fügt ihn in das Titel-HTML-Element ein.
‫In diesem Fall
‫ist der Titel einfach in Ihr Konto einzuloggen.
‫Und das war's für den Routenhandler.
‫Jetzt gehen
‫wir 'Kopf, öffne die Login-Vorlage,
‫wähle alles aus,
‫Alles kopieren, schließen und die neue Ansicht hier erstellen.
‫Rufen Sie natürlich Login-Punkt-Mops auf.
‫Dann fügen wir diesen Code
‫hier ein und jetzt kommt wieder der Trick, bei dem wir
‫unser Basistemplate erweitern.
‫Diese Erweiterung erstreckt sich auf die Erweiterung der Basisdatei. Vergessen Sie nicht, dass wir
‫hier einen Block mit genau demselben
‫Namen wie in der Basisdatei erstellen müssen.
‫Das ist also Inhalt.
‫Und damit sind wir eigentlich fertig, glaube
‫ich.
‫Natürlich müssen wir einrücken, um es zu einem Kind aus
‫diesem Block zu machen.
‫Aber das ist es tatsächlich.
‫Jetzt müssen wir nur
‫noch einen Link zur Anmeldeseite setzen,
‫damit wir tatsächlich darauf zugreifen können.
‫Im Moment verwenden die Anmelde- und Anmeldeschaltflächen
‫tatsächlich das Schaltflächenelement.
‫Aber so können wir das href-Attribut
‫nicht wirklich angeben.
‫Lassen Sie uns sie also tatsächlich in einen echten Link ändern.
‫Und hier können wir die href angeben.
‫Dieser zeigt also einfach auf Login.
‫Und eine zweite hier,
‫die Anmeldung, die wir eigentlich nicht implementieren werden,
‫damit Sie dies selbst implementieren können,
‫wenn Sie Lust dazu haben.
‫Also im Grunde ein Anmeldeformular.
‫Aber da all
‫das, also der gesamte Prozess der Anmeldung sehr ähnlich
‫ist wie das Einloggen, habe
‫ich beschlossen, dies hier nicht in diesen Abschnitt aufzunehmen,
‫da dies nur eine Menge doppelter Inhalte wäre
‫und ich nicht möchte machen den Kurs unnötig lang.
‫Geben Sie dem einen Safe, ich weiß
‫nicht, ob der Server jetzt neu gestartet wird, tatsächlich tut
‫er das
‫nicht, also speichern wir eine dieser Java-Skriptdateien.
‫Jetzt
‫ist dies unsere Referenz-Website.
‫Denken Sie daran, das ist es, was wir
‫wollen, ist dieses.
‫Kommen wir zu allen
‫Touren und probieren wir jetzt unsere Login-Route aus.
‫Und hier geht tatsächlich unsere Form.
‫Groß.
‫Jetzt können wir hier
‫eine E-Mail eingeben,
‫sagen wir admin dot naders dot
‫io.
‫Und Sie sehen, dass diese
‫Eingabe hier schön formatiert wird, unabhängig davon, ob
‫die E-Mail-Adresse tatsächlich gültig ist oder nicht.
‫Wenn ich zum Beispiel die Erweiterung hier nicht richtig
‫habe, wird sie orange und
‫sagt mir, dass etwas nicht stimmt.
‫Und das gleiche für das Passwort.
‫Solange ich weniger als acht Zeichen habe, wird dies
‫immer rot sein, was mir
‫im Grunde bedeutet, dass ein Fehler vorliegt.
‫Da ich jetzt acht Zeichen
‫habe, wird es grün.
‫Und wenn Sie daran interessiert sind, wie man
‫diese Art von Magie mit CSS
‫macht, dann schauen Sie sich bitte die CSS-Datei an, die ich nur
‫für diesen Kurs codiert habe.
‫Wie auch immer, das Klicken auf diese
‫Schaltfläche hier bewirkt jetzt natürlich absolut alles, oder?
‫Im nächsten Video werden wir also
‫wirklich damit beginnen, die Anmeldefunktionalität zu implementieren,
‫indem wir eine Anfrage an unseren bereits erstellten
‫API-Endpunkt senden.