1 00:00:01,170 --> 00:00:04,190 ‫Beginnen wir mit der Einrichtung unserer Templating-Engine in 2 00:00:04,190 --> 00:00:06,480 ‫Express, die es uns dann 3 00:00:06,480 --> 00:00:09,830 ‫ermöglicht, Websites mit einfachen Vorlagen zu rendern, wie wir 4 00:00:09,830 --> 00:00:11,333 ‫zuvor besprochen haben. 5 00:00:12,660 --> 00:00:14,520 ‫Wie Sie bereits wissen, 6 00:00:14,520 --> 00:00:16,850 ‫ist es in diesem Teil des 7 00:00:16,850 --> 00:00:21,210 ‫Kurses nun an der Zeit, dem Kunden tatsächlich eine fertig gerenderte Website 8 00:00:21,210 --> 00:00:23,200 ‫zu senden, die natürlich alle 9 00:00:23,200 --> 00:00:25,590 ‫Daten enthält, mit denen wir bis zu 10 00:00:25,590 --> 00:00:28,770 ‫diesem Zeitpunkt gearbeitet haben, wie Touren, Benutzer und Bewertungen. 11 00:00:28,770 --> 00:00:32,970 ‫Nun, wie bauen oder rendern wir diese Websites eigentlich? 12 00:00:32,970 --> 00:00:35,920 ‫Nun, wir verwenden eine sogenannte Vorlagen-Engine, die es uns 13 00:00:35,920 --> 00:00:38,060 ‫ermöglicht, eine Vorlage zu erstellen 14 00:00:38,060 --> 00:00:41,610 ‫und diese Vorlage dann einfach mit unseren Daten zu füllen. 15 00:00:41,610 --> 00:00:43,580 ‫Und die Template-Engine, die wir 16 00:00:43,580 --> 00:00:46,210 ‫in diesem Kurs verwenden werden, heißt Pug. 17 00:00:46,210 --> 00:00:48,700 ‫Es gibt ein paar andere 18 00:00:48,700 --> 00:00:52,800 ‫Template-Engines wie Lenker oder EGS für Leute, die Pug nicht mögen, 19 00:00:52,800 --> 00:00:56,010 ‫weil ich weiß, dass es einige starke Meinungen 20 00:00:56,010 --> 00:00:59,160 ‫zu Pug gibt, aber ich würde trotzdem sagen, 21 00:00:59,160 --> 00:01:03,190 ‫dass Pug tatsächlich die am häufigsten verwendete Template-Engine mit Express ist. 22 00:01:03,190 --> 00:01:05,650 ‫Lassen Sie uns nun in diesem Video 23 00:01:05,650 --> 00:01:08,453 ‫Mops einrichten und unsere allererste Webseite damit rendern. 24 00:01:09,310 --> 00:01:11,920 ‫Der erste Schritt besteht darin, Express tatsächlich 25 00:01:11,920 --> 00:01:14,510 ‫mitzuteilen, welche Template-Engine wir verwenden werden, 26 00:01:14,510 --> 00:01:16,970 ‫und wir tun dies, indem wir 27 00:01:16,970 --> 00:01:18,920 ‫gleich zu Beginn 28 00:01:19,910 --> 00:01:24,050 ‫der App hier sagen, app. set, also im Grunde ist 29 00:01:24,050 --> 00:01:29,050 ‫dies wie eine Einstellung für die View-Engine, und dann setzen wir das auf pug. 30 00:01:32,600 --> 00:01:33,910 ‫Und das ist es. 31 00:01:33,910 --> 00:01:35,850 ‫Express unterstützt also 32 00:01:35,850 --> 00:01:38,320 ‫automatisch die gängigsten Engines, 33 00:01:38,320 --> 00:01:40,970 ‫und natürlich gehört Pug dazu. 34 00:01:40,970 --> 00:01:43,470 ‫Wir müssen also eigentlich nicht einmal pug 35 00:01:43,470 --> 00:01:45,940 ‫installieren und brauchen es auch nirgendwo. 36 00:01:45,940 --> 00:01:47,660 ‫All dies geschieht 37 00:01:47,660 --> 00:01:49,870 ‫intern in Express hinter den Kulissen. 38 00:01:49,870 --> 00:01:51,910 ‫Also haben wir unsere View-Engine 39 00:01:51,910 --> 00:01:54,450 ‫definiert, jetzt müssen wir auch noch definieren, wo 40 00:01:54,450 --> 00:01:57,013 ‫sich diese Views in unserem Dateisystem tatsächlich befinden. 41 00:01:57,916 --> 00:02:02,230 ‫Daher heißen unsere Mops-Vorlagen in Express eigentlich Ansichten. 42 00:02:02,230 --> 00:02:04,960 ‫Dies liegt daran, dass diese 43 00:02:04,960 --> 00:02:08,090 ‫Vorlagen tatsächlich die Ansichten in der Model-View-Controller-Architektur 44 00:02:08,090 --> 00:02:11,720 ‫sind, die wir in diesem Kurs bisher verwendet haben. 45 00:02:11,720 --> 00:02:13,980 ‫Wie Sie wissen, haben wir bereits die 46 00:02:13,980 --> 00:02:15,273 ‫Controller und die Modellordner. 47 00:02:16,180 --> 00:02:17,650 ‫Lassen Sie uns diese tatsächlich schließen. 48 00:02:17,650 --> 00:02:20,703 ‫Und jetzt ist es an der Zeit, den Ordner "Ansichten" zu erstellen. 49 00:02:25,210 --> 00:02:27,590 ‫Damit haben wir die drei 50 00:02:27,590 --> 00:02:29,583 ‫Komponenten der MVC-Architektur. 51 00:02:30,900 --> 00:02:32,860 ‫Um nun zu definieren, in welchem 52 00:02:32,860 --> 00:02:35,070 ‫Ordner sich unsere Ansichten tatsächlich befinden, müssen 53 00:02:35,070 --> 00:02:38,943 ‫wir nur noch app sagen. set, und diesmal 54 00:02:40,660 --> 00:02:44,763 ‫ist es die Ansichtseinstellung, oder eigentlich Ansichten, und dann 55 00:02:46,310 --> 00:02:48,660 ‫hier der Name des Pfads. 56 00:02:48,660 --> 00:02:52,500 ‫Hier könnten wir jetzt einfach so 57 00:02:52,500 --> 00:02:57,380 ‫etwas einfügen, also /views, aber das ist nicht ideal. 58 00:02:57,380 --> 00:03:00,040 ‫Wie Sie bereits wissen, ist der Pfad, den 59 00:03:00,040 --> 00:03:02,330 ‫wir hier angeben, immer relativ zu 60 00:03:02,330 --> 00:03:05,240 ‫dem Verzeichnis, von dem aus wir die Note-Anwendung gestartet 61 00:03:05,240 --> 00:03:07,760 ‫haben, und das ist normalerweise der Stammprojektordner, 62 00:03:07,760 --> 00:03:09,180 ‫aber möglicherweise nicht. 63 00:03:09,180 --> 00:03:11,170 ‫Daher sollten wir hier 64 00:03:11,170 --> 00:03:14,410 ‫keinen Punkt verwenden, sondern stattdessen die Verzeichnisnamensvariable. 65 00:03:14,410 --> 00:03:17,550 ‫Machen wir das also zusammen mit einem 66 00:03:17,550 --> 00:03:22,150 ‫netten Trick, den wir mit Note verwenden können, der das Pfadmodul verwendet. 67 00:03:22,150 --> 00:03:26,340 ‫Path ist ein eingebautes Note-Modul, also ein Kernmodul, das im 68 00:03:26,340 --> 00:03:29,593 ‫Wesentlichen verwendet wird, um Pfadnamen zu manipulieren. 69 00:03:32,130 --> 00:03:35,860 ‫Benötigen Sie also einen Pfad, damit wir natürlich 70 00:03:35,860 --> 00:03:37,650 ‫nichts installieren müssen. 71 00:03:37,650 --> 00:03:40,143 ‫Es ist nur ein natives integriertes Modul. 72 00:03:41,320 --> 00:03:44,333 ‫Was wir jetzt tun können, ist der Weg. join, 73 00:03:46,340 --> 00:03:51,340 ‫dann den Verzeichnisnamen und dann views. 74 00:03:52,930 --> 00:03:55,790 ‫Dies wird dann im Grunde hinter 75 00:03:55,790 --> 00:04:00,403 ‫den Kulissen einen Pfad erstellen, der den Verzeichnisnamen /views verbindet. 76 00:04:01,640 --> 00:04:03,520 ‫Nun mag es hier etwas übertrieben erscheinen, 77 00:04:03,520 --> 00:04:06,620 ‫diesen Weg zu benutzen. Join-Funktion hier, aber 78 00:04:06,620 --> 00:04:08,880 ‫wir wissen nicht immer, ob ein 79 00:04:08,880 --> 00:04:13,120 ‫Pfad, den wir von irgendwoher erhalten, bereits einen Schrägstrich hat oder nicht. 80 00:04:13,120 --> 00:04:16,290 ‫Sie werden diese Funktion hier also ständig verwenden, um 81 00:04:16,290 --> 00:04:19,040 ‫diese Art von Fehler zu verhindern. 82 00:04:19,040 --> 00:04:21,440 ‫Denn auf diese Weise müssen wir nicht 83 00:04:21,440 --> 00:04:23,380 ‫einmal an Schrägstriche denken 84 00:04:23,380 --> 00:04:26,463 ‫oder nicht, da Note automatisch einen korrekten Pfad erstellt. 85 00:04:28,140 --> 00:04:30,140 ‫Eigentlich sollten wir das 86 00:04:30,140 --> 00:04:33,343 ‫auch hier verwenden, wo wir diese Middleware erstellen. 87 00:04:34,290 --> 00:04:37,623 ‫Hier sollten wir tatsächlich genau dasselbe hier verwenden. 88 00:04:39,070 --> 00:04:40,533 ‫Lassen Sie uns das also einfach duplizieren. 89 00:04:43,540 --> 00:04:45,703 ‫Also Pfad beitreten und öffentlich. 90 00:04:54,470 --> 00:04:57,510 ‫Lasst uns das hier ganz oben 91 00:04:57,510 --> 00:05:01,373 ‫setzen, weil es irgendwie mit diesen hier zusammengehört. 92 00:05:02,330 --> 00:05:04,580 ‫Immer noch eine Middleware, aber wie Sie 93 00:05:04,580 --> 00:05:07,020 ‫in einem der nächsten Videos sehen werden, arbeitet 94 00:05:07,020 --> 00:05:09,053 ‫diese eng mit einer View-Engine zusammen. 95 00:05:10,520 --> 00:05:14,050 ‫Aber hier haben wir jetzt unsere Mops-Engine eingerichtet. 96 00:05:14,050 --> 00:05:17,400 ‫Jetzt ist es an der Zeit, unsere allererste Vorlage zu erstellen. 97 00:05:17,400 --> 00:05:19,890 ‫Lassen Sie uns hier also unsere erste 98 00:05:21,660 --> 00:05:24,970 ‫Mops-Datei namens base erstellen. pug, und wie Sie 99 00:05:24,970 --> 00:05:29,453 ‫sehen werden, hat vs code tatsächlich ein eigenes nettes Symbol für diesen Dateityp. 100 00:05:30,919 --> 00:05:32,950 ‫Alles, was ich hier 101 00:05:32,950 --> 00:05:36,220 ‫wirklich tun möchte, ist, ein h1-Element zu erstellen, also 102 00:05:36,220 --> 00:05:38,660 ‫eine Hauptüberschrift einfach mit dem Namen einer 103 00:05:38,660 --> 00:05:41,720 ‫Tour, und die Funktionsweise mit Pug ist genau so. 104 00:05:41,720 --> 00:05:45,170 ‫Also h1 und dann der Inhalt des Elements. 105 00:05:45,170 --> 00:05:49,030 ‫Sagen wir The Park Camper. 106 00:05:49,030 --> 00:05:50,520 ‫Und das ist es tatsächlich! 107 00:05:50,520 --> 00:05:54,730 ‫Das wird dann hier übersetzt, 108 00:05:54,730 --> 00:05:59,730 ‫h1 The Park Camper, und dann das schließen. 109 00:06:04,730 --> 00:06:07,680 ‫In HTML müssten wir dies also schreiben, aber 110 00:06:07,680 --> 00:06:10,250 ‫die Pug-Syntax macht es so viel einfacher, 111 00:06:10,250 --> 00:06:12,193 ‫HTML wie dieses zu schreiben. 112 00:06:13,470 --> 00:06:14,670 ‫Natürlich können wir 113 00:06:14,670 --> 00:06:16,880 ‫hier auch alle möglichen Variablen einfügen, damit 114 00:06:16,880 --> 00:06:19,780 ‫wir unsere Daten wirklich in diese Vorlagen einfügen können, aber 115 00:06:19,780 --> 00:06:21,650 ‫im Moment bin ich wirklich nur 116 00:06:21,650 --> 00:06:23,853 ‫daran interessiert, etwas an den Browser auszugeben. 117 00:06:25,240 --> 00:06:27,570 ‫In den nächsten Vorlesungen erfahren Sie mehr darüber, 118 00:06:27,570 --> 00:06:29,220 ‫wie Mops tatsächlich funktioniert. 119 00:06:30,870 --> 00:06:33,400 ‫Im Moment haben wir hier unsere Basisvorlage und behalten 120 00:06:33,400 --> 00:06:34,793 ‫diesen Namen im Hinterkopf. 121 00:06:37,225 --> 00:06:40,680 ‫Wir können jetzt tatsächlich eine neue Route erstellen, von der 122 00:06:40,680 --> 00:06:43,383 ‫aus wir dann auf diese Vorlage zugreifen. 123 00:06:45,260 --> 00:06:48,893 ‫Lassen Sie uns das also hier direkt vor der API-Route tun. 124 00:06:51,160 --> 00:06:56,160 ‫Also App. get, was zum Rendern von Seiten in 125 00:06:56,680 --> 00:06:59,060 ‫einem Browser normalerweise immer der ist, 126 00:06:59,060 --> 00:07:02,990 ‫den wir verwenden, und so die hier angegebene URL, also die Route, 127 00:07:02,990 --> 00:07:05,763 ‫und das ist einfach das Stammverzeichnis unserer Website. 128 00:07:07,060 --> 00:07:10,283 ‫Dann brauchen wir natürlich nach wie vor eine 129 00:07:11,780 --> 00:07:14,363 ‫Handler-Funktion, also Request, Response, und jetzt, 130 00:07:17,140 --> 00:07:19,150 ‫um unser Template so 131 00:07:19,150 --> 00:07:22,210 ‫zu rendern, wie wir zuvor das Response-Objekt verwendet 132 00:07:22,210 --> 00:07:27,210 ‫haben, setzen wir den Status in diesem Fall für okay auf 200. 133 00:07:28,100 --> 00:07:31,830 ‫Aber anstatt json zu verwenden, wie wir es bisher 134 00:07:31,830 --> 00:07:34,250 ‫immer verwendet haben, ist es 135 00:07:34,250 --> 00:07:37,133 ‫jetzt an der Zeit, Rendern zu verwenden. 136 00:07:38,015 --> 00:07:40,230 ‫Rendern rendert dann die Vorlage 137 00:07:40,230 --> 00:07:42,340 ‫mit dem von uns 138 00:07:42,340 --> 00:07:44,963 ‫übergebenen Namen, in diesem Fall base. 139 00:07:46,640 --> 00:07:49,910 ‫Wir müssen nicht einmal die Pug-Erweiterung angeben, 140 00:07:49,910 --> 00:07:52,070 ‫da Express automatisch erkennt, dass 141 00:07:52,070 --> 00:07:54,490 ‫dies die Datei ist, nach 142 00:07:54,490 --> 00:07:56,920 ‫der wir suchen, und natürlich nach 143 00:07:56,920 --> 00:07:59,060 ‫dieser Datei in 144 00:07:59,060 --> 00:08:03,600 ‫dem Ordner sucht, der gleich zu Beginn angegeben wurde eins. 145 00:08:03,600 --> 00:08:05,390 ‫Es wird in den Ordner Ansichten 146 00:08:05,390 --> 00:08:08,303 ‫gehen und dort nach der Vorlage mit der Namensbasis suchen. 147 00:08:09,920 --> 00:08:12,840 ‫Dann nimmt es diese Vorlage, rendert sie und 148 00:08:12,840 --> 00:08:16,430 ‫sendet sie dann im Grunde als Antwort an den Browser. 149 00:08:16,430 --> 00:08:18,563 ‫Super, also testen wir das jetzt. 150 00:08:22,190 --> 00:08:23,850 ‫Also, unser Server läuft 151 00:08:23,850 --> 00:08:27,223 ‫immer noch auf dem lokalen Host-Port 3000, glaube ich. 152 00:08:32,170 --> 00:08:34,970 ‫Und das gibt uns diesen 153 00:08:34,970 --> 00:08:37,790 ‫Fehler, kann das Modul Pug nicht finden, 154 00:08:37,790 --> 00:08:41,323 ‫und daher müssen wir wirklich das Pug-Modul installieren. 155 00:08:42,845 --> 00:08:45,250 ‫Also sagte ich vorhin, dass wir es 156 00:08:45,250 --> 00:08:47,723 ‫nicht getan haben, aber tatsächlich müssen wir das tun. 157 00:08:49,220 --> 00:08:52,210 ‫Express lädt es immer noch automatisch hinter den 158 00:08:52,210 --> 00:08:54,890 ‫Kulissen, aber es werden nicht alle diese 159 00:08:54,890 --> 00:08:56,553 ‫Vorlagen-Engines standardmäßig installiert. 160 00:08:57,460 --> 00:08:59,753 ‫Also npm installiere Pug. 161 00:09:06,063 --> 00:09:08,063 ‫Und los geht's, also 162 00:09:09,220 --> 00:09:11,620 ‫versuchen wir es noch einmal, 163 00:09:11,620 --> 00:09:14,310 ‫und jetzt bekommen wir tatsächlich den Parkcamper. 164 00:09:14,310 --> 00:09:17,610 ‫Das ist unser h1-Element, das wir gerade 165 00:09:17,610 --> 00:09:22,610 ‫in der Basis erstellt haben. pug-Datei, und wenn wir diese jetzt untersuchen, 166 00:09:22,830 --> 00:09:26,750 ‫werden Sie feststellen, dass es sich um ein einfaches h1-Element handelt. 167 00:09:26,750 --> 00:09:28,210 ‫Natürlich gibt es an dieser 168 00:09:28,210 --> 00:09:31,160 ‫Stelle überhaupt kein Styling und kein CSS, aber darum 169 00:09:31,160 --> 00:09:32,530 ‫werden wir uns 170 00:09:32,530 --> 00:09:34,290 ‫in den nächsten Vorlesungen kümmern. 171 00:09:34,290 --> 00:09:36,180 ‫Im Moment ist es hier 172 00:09:36,180 --> 00:09:40,070 ‫wichtig, dass, wenn wir auf unser Root zugreifen, die Route hier auf unserem 173 00:09:40,070 --> 00:09:42,883 ‫Host erfolgt, also ist dies tatsächlich dasselbe wie dies. 174 00:09:44,560 --> 00:09:46,810 ‫Wenn wir auf diese Route zugreifen, erhalten 175 00:09:46,810 --> 00:09:48,900 ‫wir jetzt Zugriff auf eine dynamisch 176 00:09:48,900 --> 00:09:53,320 ‫gerenderte Website, die auf unserer Basis basiert. Mops-Vorlage, groß. 177 00:09:53,320 --> 00:09:56,150 ‫Das ist der erste Schritt zum Einrichten von 178 00:09:56,150 --> 00:09:57,670 ‫Mops. In den nächsten 179 00:09:57,670 --> 00:10:00,570 ‫Lektionen lernen Sie dann, diese Vorlagen-Engine wirklich zu verwenden, 180 00:10:00,570 --> 00:10:02,663 ‫um erstaunliche, dynamische Websites zu erstellen.