‫Beginnen wir mit der Einrichtung unserer Templating-Engine in
‫Express, die es uns dann
‫ermöglicht, Websites mit einfachen Vorlagen zu rendern, wie wir
‫zuvor besprochen haben.
‫Wie Sie bereits wissen,
‫ist es in diesem Teil des
‫Kurses nun an der Zeit, dem Kunden tatsächlich eine fertig gerenderte Website
‫zu senden, die natürlich alle
‫Daten enthält, mit denen wir bis zu
‫diesem Zeitpunkt gearbeitet haben, wie Touren, Benutzer und Bewertungen.
‫Nun, wie bauen oder rendern wir diese Websites eigentlich?
‫Nun, wir verwenden eine sogenannte Vorlagen-Engine, die es uns
‫ermöglicht, eine Vorlage zu erstellen
‫und diese Vorlage dann einfach mit unseren Daten zu füllen.
‫Und die Template-Engine, die wir
‫in diesem Kurs verwenden werden, heißt Pug.
‫Es gibt ein paar andere
‫Template-Engines wie Lenker oder EGS für Leute, die Pug nicht mögen,
‫weil ich weiß, dass es einige starke Meinungen
‫zu Pug gibt, aber ich würde trotzdem sagen,
‫dass Pug tatsächlich die am häufigsten verwendete Template-Engine mit Express ist.
‫Lassen Sie uns nun in diesem Video
‫Mops einrichten und unsere allererste Webseite damit rendern.
‫Der erste Schritt besteht darin, Express tatsächlich
‫mitzuteilen, welche Template-Engine wir verwenden werden,
‫und wir tun dies, indem wir
‫gleich zu Beginn
‫der App hier sagen, app. set, also im Grunde ist
‫dies wie eine Einstellung für die View-Engine, und dann setzen wir das auf pug.
‫Und das ist es.
‫Express unterstützt also
‫automatisch die gängigsten Engines,
‫und natürlich gehört Pug dazu.
‫Wir müssen also eigentlich nicht einmal pug
‫installieren und brauchen es auch nirgendwo.
‫All dies geschieht
‫intern in Express hinter den Kulissen.
‫Also haben wir unsere View-Engine
‫definiert, jetzt müssen wir auch noch definieren, wo
‫sich diese Views in unserem Dateisystem tatsächlich befinden.
‫Daher heißen unsere Mops-Vorlagen in Express eigentlich Ansichten.
‫Dies liegt daran, dass diese
‫Vorlagen tatsächlich die Ansichten in der Model-View-Controller-Architektur
‫sind, die wir in diesem Kurs bisher verwendet haben.
‫Wie Sie wissen, haben wir bereits die
‫Controller und die Modellordner.
‫Lassen Sie uns diese tatsächlich schließen.
‫Und jetzt ist es an der Zeit, den Ordner "Ansichten" zu erstellen.
‫Damit haben wir die drei
‫Komponenten der MVC-Architektur.
‫Um nun zu definieren, in welchem
‫Ordner sich unsere Ansichten tatsächlich befinden, müssen
‫wir nur noch app sagen. set, und diesmal
‫ist es die Ansichtseinstellung, oder eigentlich Ansichten, und dann
‫hier der Name des Pfads.
‫Hier könnten wir jetzt einfach so
‫etwas einfügen, also /views, aber das ist nicht ideal.
‫Wie Sie bereits wissen, ist der Pfad, den
‫wir hier angeben, immer relativ zu
‫dem Verzeichnis, von dem aus wir die Note-Anwendung gestartet
‫haben, und das ist normalerweise der Stammprojektordner,
‫aber möglicherweise nicht.
‫Daher sollten wir hier
‫keinen Punkt verwenden, sondern stattdessen die Verzeichnisnamensvariable.
‫Machen wir das also zusammen mit einem
‫netten Trick, den wir mit Note verwenden können, der das Pfadmodul verwendet.
‫Path ist ein eingebautes Note-Modul, also ein Kernmodul, das im
‫Wesentlichen verwendet wird, um Pfadnamen zu manipulieren.
‫Benötigen Sie also einen Pfad, damit wir natürlich
‫nichts installieren müssen.
‫Es ist nur ein natives integriertes Modul.
‫Was wir jetzt tun können, ist der Weg. join,
‫dann den Verzeichnisnamen und dann views.
‫Dies wird dann im Grunde hinter
‫den Kulissen einen Pfad erstellen, der den Verzeichnisnamen /views verbindet.
‫Nun mag es hier etwas übertrieben erscheinen,
‫diesen Weg zu benutzen. Join-Funktion hier, aber
‫wir wissen nicht immer, ob ein
‫Pfad, den wir von irgendwoher erhalten, bereits einen Schrägstrich hat oder nicht.
‫Sie werden diese Funktion hier also ständig verwenden, um
‫diese Art von Fehler zu verhindern.
‫Denn auf diese Weise müssen wir nicht
‫einmal an Schrägstriche denken
‫oder nicht, da Note automatisch einen korrekten Pfad erstellt.
‫Eigentlich sollten wir das
‫auch hier verwenden, wo wir diese Middleware erstellen.
‫Hier sollten wir tatsächlich genau dasselbe hier verwenden.
‫Lassen Sie uns das also einfach duplizieren.
‫Also Pfad beitreten und öffentlich.
‫Lasst uns das hier ganz oben
‫setzen, weil es irgendwie mit diesen hier zusammengehört.
‫Immer noch eine Middleware, aber wie Sie
‫in einem der nächsten Videos sehen werden, arbeitet
‫diese eng mit einer View-Engine zusammen.
‫Aber hier haben wir jetzt unsere Mops-Engine eingerichtet.
‫Jetzt ist es an der Zeit, unsere allererste Vorlage zu erstellen.
‫Lassen Sie uns hier also unsere erste
‫Mops-Datei namens base erstellen. pug, und wie Sie
‫sehen werden, hat vs code tatsächlich ein eigenes nettes Symbol für diesen Dateityp.
‫Alles, was ich hier
‫wirklich tun möchte, ist, ein h1-Element zu erstellen, also
‫eine Hauptüberschrift einfach mit dem Namen einer
‫Tour, und die Funktionsweise mit Pug ist genau so.
‫Also h1 und dann der Inhalt des Elements.
‫Sagen wir The Park Camper.
‫Und das ist es tatsächlich!
‫Das wird dann hier übersetzt,
‫h1 The Park Camper, und dann das schließen.
‫In HTML müssten wir dies also schreiben, aber
‫die Pug-Syntax macht es so viel einfacher,
‫HTML wie dieses zu schreiben.
‫Natürlich können wir
‫hier auch alle möglichen Variablen einfügen, damit
‫wir unsere Daten wirklich in diese Vorlagen einfügen können, aber
‫im Moment bin ich wirklich nur
‫daran interessiert, etwas an den Browser auszugeben.
‫In den nächsten Vorlesungen erfahren Sie mehr darüber,
‫wie Mops tatsächlich funktioniert.
‫Im Moment haben wir hier unsere Basisvorlage und behalten
‫diesen Namen im Hinterkopf.
‫Wir können jetzt tatsächlich eine neue Route erstellen, von der
‫aus wir dann auf diese Vorlage zugreifen.
‫Lassen Sie uns das also hier direkt vor der API-Route tun.
‫Also App. get, was zum Rendern von Seiten in
‫einem Browser normalerweise immer der ist,
‫den wir verwenden, und so die hier angegebene URL, also die Route,
‫und das ist einfach das Stammverzeichnis unserer Website.
‫Dann brauchen wir natürlich nach wie vor eine
‫Handler-Funktion, also Request, Response, und jetzt,
‫um unser Template so
‫zu rendern, wie wir zuvor das Response-Objekt verwendet
‫haben, setzen wir den Status in diesem Fall für okay auf 200.
‫Aber anstatt json zu verwenden, wie wir es bisher
‫immer verwendet haben, ist es
‫jetzt an der Zeit, Rendern zu verwenden.
‫Rendern rendert dann die Vorlage
‫mit dem von uns
‫übergebenen Namen, in diesem Fall base.
‫Wir müssen nicht einmal die Pug-Erweiterung angeben,
‫da Express automatisch erkennt, dass
‫dies die Datei ist, nach
‫der wir suchen, und natürlich nach
‫dieser Datei in
‫dem Ordner sucht, der gleich zu Beginn angegeben wurde eins.
‫Es wird in den Ordner Ansichten
‫gehen und dort nach der Vorlage mit der Namensbasis suchen.
‫Dann nimmt es diese Vorlage, rendert sie und
‫sendet sie dann im Grunde als Antwort an den Browser.
‫Super, also testen wir das jetzt.
‫Also, unser Server läuft
‫immer noch auf dem lokalen Host-Port 3000, glaube ich.
‫Und das gibt uns diesen
‫Fehler, kann das Modul Pug nicht finden,
‫und daher müssen wir wirklich das Pug-Modul installieren.
‫Also sagte ich vorhin, dass wir es
‫nicht getan haben, aber tatsächlich müssen wir das tun.
‫Express lädt es immer noch automatisch hinter den
‫Kulissen, aber es werden nicht alle diese
‫Vorlagen-Engines standardmäßig installiert.
‫Also npm installiere Pug.
‫Und los geht's, also
‫versuchen wir es noch einmal,
‫und jetzt bekommen wir tatsächlich den Parkcamper.
‫Das ist unser h1-Element, das wir gerade
‫in der Basis erstellt haben. pug-Datei, und wenn wir diese jetzt untersuchen,
‫werden Sie feststellen, dass es sich um ein einfaches h1-Element handelt.
‫Natürlich gibt es an dieser
‫Stelle überhaupt kein Styling und kein CSS, aber darum
‫werden wir uns
‫in den nächsten Vorlesungen kümmern.
‫Im Moment ist es hier
‫wichtig, dass, wenn wir auf unser Root zugreifen, die Route hier auf unserem
‫Host erfolgt, also ist dies tatsächlich dasselbe wie dies.
‫Wenn wir auf diese Route zugreifen, erhalten
‫wir jetzt Zugriff auf eine dynamisch
‫gerenderte Website, die auf unserer Basis basiert. Mops-Vorlage, groß.
‫Das ist der erste Schritt zum Einrichten von
‫Mops. In den nächsten
‫Lektionen lernen Sie dann, diese Vorlagen-Engine wirklich zu verwenden,
‫um erstaunliche, dynamische Websites zu erstellen.