‫Kursleiter: Und bevor
‫wir beginnen, lassen Sie uns kurz das serverseitige
‫und clientseitige Rendering zusammenfassen.
‫Außerdem möchte ich Ihnen in diesem Video
‫die serverseitig gerenderte Website zeigen, die wir in den
‫nächsten Stunden erstellen werden.
‫Denken Sie also daran, wie beim clientseitigen Rendering
‫die eigentliche Erstellung der
‫Website auf der Clientseite erfolgt.
‫Und dafür brauchen wir eine Datenquelle, die
‫normalerweise eine API ist, die
‫auf Anfrage Daten an den Client sendet.
‫Das ist es, was wir bis zu
‫diesem Punkt im Kurs aufgebaut haben.
‫Aber jetzt, da Sie diesen Teil
‫beherrschen, ist es an der Zeit, zum serverseitigen Rendering überzugehen
‫und die Website tatsächlich auf dem Server zu erstellen.
‫Und der Hauptaspekt des serverseitigen Renderings
‫besteht darin, den eigentlichen
‫HTML-Code zu erstellen, weil dort alle unsere Daten gespeichert werden.
‫Und dafür verwenden wir Vorlagen,
‫die Platzhalter haben,
‫in die wir dann unsere Daten nach Bedarf einfügen.
‫Also, wann immer es eine Anfrage
‫gibt, sagen wir für
‫die Homepage, dann holen wir die notwendigen Daten
‫aus der Datenbank, fügen sie
‫in ein Template ein, das
‫dann HTML ausgibt, und senden
‫dieses HTML schließlich zusammen mit CSS
‫und JavaScript und Bilddateien , zurück zum Kunden.
‫Ziemlich einfach, oder?
‫Jetzt können wir die API immer noch
‫für einige der Dinge am
‫Frontend verwenden, und das werden wir auch tun.
‫Okay, wie auch immer, lassen Sie mich Ihnen jetzt zeigen,
‫was wir in diesem Abschnitt tatsächlich bauen werden.
‫Dies ist also die endgültig gerenderte Natours-Website, und sie ist
‫tatsächlich live unter www. Natur. dev, und wenn Ihnen
‫danach ist, öffnen Sie
‫einfach diese
‫Seite jetzt in Ihrem Browser und
‫sehen Sie sich um.
‫Sie müssen dieses W-W-W angeben, okay?
‫Sonst wird es nicht funktionieren.
‫Wie auch immer, hier sehen Sie alle Touren,
‫mit denen wir
‫gearbeitet haben, als wir unsere API
‫erstellt haben, und alle Daten hier sind wirklich identisch.
‫Also, alle unsere neun Touren sind hier,
‫richtig,
‫und genau das
‫werden wir in diesem Abschnitt aufbauen.
‫Werfen wir einen Blick auf eine der Detailseiten hier.
‫Also, der Park Camper, und
‫damit hast du in der Tat die durchschnittliche Bewertung.
‫Sie haben alle Reiseleiter.
‫Sie haben dann einige Bilder.
‫Sie haben tatsächlich alle Standorte und auf einer Karte angezeigt.
‫Und Sie haben auch die Bewertung.
‫Und dies sind wiederum die
‫echten Bewertungen von echten Benutzern in der Datenbank.
‫Also, wenn Sie sich diese Tour hier in
‫Postman ansehen würden,
‫sagen wir, lassen Sie uns zuerst alle Touren
‫hier abrufen, nur um die ID des Parkcampers zu erhalten.
‫Also, Sea Explorer,
‫City Wanderer,
‫also wo ist das?
‫Ah, hier ist der Park Camper.
‫Wenn wir diese Tour jetzt bekommen,
‫werden Sie beispielsweise feststellen,
‫dass die Reiseleiter genau dieselben Leute sind.
‫Da sind also Aarav, Ben und Kate,
‫und das sind in der Tat die Leute, die
‫eigentlich die Reiseleiter sind.
‫Also, diese
‫drei und wieder die
‫Rezensionen sind auch die von Ayla, Laura, Isabel
‫und Alexander, plus diese anderen da drüben.
‫Wenn wir uns also die Bewertungen
‫hier ansehen, dann kommen
‫sie tatsächlich von Ayla und Laura und Isabel und...
‫Ja, also wirklich, Sie sehen, dass diese
‫Daten wirklich die zugrunde liegenden
‫Daten sind, aus denen diese Website hier dynamisch generiert wird, okay?
‫Dann können wir uns auch anmelden, und
‫jeder der Benutzer, die
‫wir in der Datenbank haben, wird dafür arbeiten.
‫Wenn wir uns also einen unserer Benutzer ansehen, so
‫verwenden wir zum Beispiel hier Steve,
‫der eigentlich ein Reiseleiter ist.
‫Nehmen wir also
‫das Beispiel,
‫verwenden die E-Mail und das
‫Passwort lautet wie immer test1234.
‫Okay, wir loggen uns ein, und
‫das passiert tatsächlich hinter den
‫Kulissen mit unserer API.
‫Okay, und jetzt haben wir hier Steve.
‫Wir können sogar sein Konto eröffnen.
‫Wir können dann das Passwort ändern,
‫und das geschieht wiederum
‫hinter den Kulissen mit dem genauen API-Endpunkt, den wir
‫für einen Benutzer erstellt haben, der sein Passwort ändert.
‫Sie können dann auch die Buchungen
‫dieses bestimmten Benutzers überprüfen, die in
‫diesem Fall keine sein
‫sollten, da er ein Reiseleiter ist.
‫Sie sehen also, dass es hier
‫leer ist, aber trotzdem...
‫Ja, das wollte ich
‫Ihnen zeigen, denn genau das werden
‫wir im Rest dieses Abschnitts tun.
‫Ich hoffe, Sie sind genauso aufgeregt
‫wie ich,
‫und fangen wir jetzt an.