Vollständige Webentwicklung für Anfänger:innen – Teil 4: Abschlussprojekt, Node, Express und MongoDB

1. Willkommen beim Kurs!: Willkommen bei Full Stack Web Development für Anfänger. Dieser Kurs wurde entwickelt, um Sie von einem Anfänger zu einem Webentwickler zu führen, der nicht nur die Front-End-Benutzeroberfläche erstellen kann, sondern auch das Backend für die Interaktion zu entwerfen und zu erstellen. Wer bin ich? Mein Name ist Chris und ich werde Ihr Lehrer während dieses Kurses sein. Ich bin ein Webentwickler und auch Produzent von vielen Tutorials, Tausenden von Studenten die Fähigkeiten, die sie benötigen, um Websites und Anwendungen zu erstellen. Dies ist der vierte Teil der vollständigen Serie, in dem wir von den ersten drei Teilen dieses Kurses weiter auf alles aufbauen werden. In diesem Kurs geht es um den Übergang zum Backend von Websites, wo Sie viele erstaunliche Dinge lernen werden. Wir beginnen mit Knoten und dem Express-Framework, wo wir ein Reisebuch in Anwendung namens Let's Travel einrichten. Wir werden dieses Projekt während des gesamten Kurses aufbauen. Alles, was Sie lernen, wird sofort in die Praxis umgesetzt. Node und Express sind sehr beliebt und Lernen dieser Technologien wird Sie in der hohen Nachfrage verlassen. Danach gehen wir zum Routing und Templating über, was es uns ermöglicht, zwischen Seiten zu wechseln und durch unsere App zu navigieren, zusammen mit der Einrichtung von Vorlagen, um nicht nur den von uns erstellten Inhalt anzuzeigen, sondern auch Daten aus auch unsere Datenbank. Datenbanken sind, worum es im nächsten Abschnitt geht, wo wir MongoDB und Mongoose betrachten werden. Sie werden so viel lernen, einschließlich der Modellierung unserer Daten, Erstellen, Lesen, Aktualisieren und Löschen von Aktionen, zusammen mit Filtern und Aggregation, um die genauen Daten, die wir benötigen, zurückzuerhalten. Danach setzen wir mit Styling fort und fügen viele nette Funktionen zu unserem Projekt hinzu, zusammen mit dem Lernen vieler JavaScript-Techniken der nächsten Generation von ES6 und darüber hinaus. Außerdem erfahren Sie, wie Sie Benutzern das Hochladen von Bildern ermöglichen können und wie wir diese Bilder aus unserem Cloud-Speicher speichern und abrufen können. Natürlich müssen sich die meisten Apps heutzutage mit Benutzerkonten und Authentifizierung auseinandersetzen. Dies ist etwas, worüber wir lernen werden, während auch all diese auf unser Projekt anwenden. Sie werden lernen, wie Sie Benutzerkonto erstellen, sich ein- und ausschalten, die Informationen neuer Benutzer validieren, Authentifizierung, Passwörter sicher speichern und vieles mehr. Wir beenden unsere App, indem wir dem Benutzer erlauben , Bestellungen aufzugeben und sie dann in der Datenbank zu speichern. Dann erstellen wir einen Account-Bereich, in dem sich der Benutzer einloggen und alle Buchungen sehen kann , die er gemacht hat. Auch Admin-Benutzer können in den Admin-Bereich gehen , um Listen aller Bestellungen zu sehen, die aufgegeben wurden. Dieser Kurs endet mit einigen Sicherheitstipps und Empfehlungen, um Ihre Anwendung für die Produktion vorzubereiten. Wir schieben dann unsere App auf einen Live-Server für den Rest der Welt, um zu sehen, und erklären die Dinge auf eine einfache, einfach zu verständliche Art und Weise, die auch Anfänger verstehen werden, zusammen mit Verstärkung Dinge mit einem Spaß, aber anspruchsvolle Projekte, wie wir gehen. Ich hoffe, Sie sind wirklich aufgeregt, über all diese Dinge zu erfahren, im letzten Teil dieses Kurses. 2. Das bauen wir auf: In diesem Abschnitt und für so ziemlich den Rest dieses Kurses werden wir die Nischenreise-Anwendung erstellen, wenn Benutzer sich anmelden und Buchungen für Hotels in verschiedenen Ländern vornehmen können. Dies wird die Homepage sein, die der Ausgangspunkt sein wird, wo ein Benutzer nach Hotels in verschiedenen Ländern suchen kann. Wir können auch die Anzahl der Nächte und auch die Anzahl der Gäste hinzufügen, sowie bestimmte Filter wie die Sternebewertung, und wir können auch den Preis des Hotels weise von niedrig zu hoch oder hoch zu niedrig zu lösen. Weiter unten ziehen wir auch einige zufällige Hotels aus der Datenbank und eingeschränkte muss die ersten neun sein. Der Benutzer kann auf jedes dieser Hotels klicken und weitere Informationen erfahren. Er wird einen erweiterten Blick auf das Hotel bekommen. Wir erhalten auch eine Beschreibung und dann unten, wir haben die Möglichkeit, dann nach diesem Hotel mit der aktuellen Verfügbarkeit und auch dem aktuellen Preis zu suchen . Wenn wir nach den Hotels weiter unten auf die Homepage zurückkehren, haben wir auch eine Liste der Länder, in denen wir die Hotels nach den verschiedenen Ländern filtern können . Wenn wir auf jedes dieser klicken, können wir dann jedes Hotel sehen, das für das jeweilige Land verfügbar ist. Zusammen mit diesen Filtern können wir auch auf „Alle Länder“ klicken und dann eine Liste aller verfügbaren Länder sehen, für die wir Hotels zur Verfügung haben. Sobald wir neue Hotels als Admin hinzugefügt haben, werden diese Länder automatisch auch am Front-End aktualisiert. Deshalb brauchen wir uns keine Sorgen darüber zu machen, dass wir jedes Mal, wenn wir ein neues Land hinzufügen, sowie diese Länder. Wenn wir zurück zu den Hotels gehen, haben wir auch einen Link, um alle verfügbaren Hotels zu sehen. Wenn Sie durch alle, die Sie in der Datenbank haben, scrollen möchten, anstatt nach den Ländern zu filtern, indem Sie eine Suche verwenden. Service-Anwendung wird eine knotenbasierte Anwendung sein die das Express-Framework verwendet, über das wir in diesem Abschnitt und den kommenden Abschnitten zwei erfahren werden . Wird auch verschiedene Technologien verwenden, um diesem Projekt beizutreten, wie MongoDB, um unsere Daten zu speichern. Wir verwenden Mongoose für verschiedene Dinge wie die Strukturierung unserer Modelle oder andere Daten. Zusammen mit all dem, wird auch die Möglichkeit für den Benutzer haben, voran zu gehen und sich anzumelden. Wir können uns mit einer E-Mail und einem Passwort einloggen. Also lasst uns jetzt zuhören. Wird auch Flush-Nachrichten verwenden, genau wie Sie hier sehen, um dem Benutzer ein Feedback darüber zu geben, wann ein Login oder Abmeldung, zusammen mit dem Administrator, um zu sehen, wann ein Hotel erfolgreich zur Datenbank hinzugefügt wurde. Sobald wir uns einloggen, haben wir jetzt einen Account Bereich, auf den wir klicken können. Wir können auch die aktuellen Buchungen überprüfen, die jeder Benutzer zur Verfügung hat. Zusammen mit diesem, wenn der Benutzer ein Administrator ist, gehen wir zu '“ /admin“. Derzeit sind der Benutzername und das Passwort, die ich eingegeben habe, als Admin heruntergefahren. So haben wir nun Zugriff auf diesen Admin-Bereich der Website, die das Back-End sein wird, wo einige Administratorrechte haben können, wie das Hinzufügen neuer Hotels in die Datenbank, was wir mit diesem Formular hier tun können. Der Admin kann auch Details eines Hotels bearbeiten oder auch vollständig aus der Datenbank entfernen. Alles, was wir tun müssen, ist, den Hotelausweis hinzuzufügen, oder wir können nach dem Hotelnamen suchen, wenn wir nicht sicher sind, ob der Personalausweis ist. Zurück zum Admin, können wir auch alle verfügbaren Buchungen anzeigen , die von allen Benutzern platziert werden. Sobald wir als Benutzer angemeldet sind und die Suche durchführen, suchen wir nach Jamaika, sieben Nächte, und wir können ein Datum, die Anzahl der Gäste, die Sternebewertung und auch die Preisfilter hinzufügen Anzahl der Gäste, die Sternebewertung . Wir können auf „Suchen“ klicken und dann haben wir es zu den Suchergebnissen gebracht. Dies ist also das Hotel, das zu unseren Filtern passt und wir haben auch einen Abschnitt auf der rechten Seite, der die Gesamtsumme pro Person und die Gesamtkosten der Buchung berechnet . Wir können dann zum Bestätigungsbildschirm weitergehen, der die vollständige Beschreibung des Hotels zusammen mit der Möglichkeit zur Bestellung enthält. Sobald es auf platziert und zu unseren Zählungen gebracht wird und dann können wir unten unten sehen, dass unsere Bestellung unten unten mit einer eindeutigen Bestellreferenz hinzugefügt wurde. Wenn Sie zum Admin gehen, sollte es auch hier drin hinzugefügt werden da wir auch für diesen aktuellen Benutzer als Admin angemeldet sind. Wir können auch auf Buchungen anzeigen gehen, und dann sehen Sie die Buchungen unten auch unten platziert. Wenn wir voran gehen und sich abmelden und dann versuchen Sie diesen Admin-Abschnitt. Wir können sehen, dass wir zurück auf die Homepage weitergeleitet werden, da diese Route geschützt ist. Während dieses Projekts werden wir eine Vielzahl von Dingen lernen. Wie ich bereits erwähnt habe, werden wir Knoten für das Back-End verwenden, Express als Framework, um dieses Projekt zu erstellen, Mongoose und MongoDB für unsere Back-End-Daten, Route durch unsere Projekte zusammen mit dem MVC Muster, das es uns erlaubt, auch etwas Struktur zu unserem Projekt hinzuzufügen. Zusammen mit diesem wird so viel mehr erfahren, einschließlich Authentifizierung, wie Benutzer mit Sitzungen angemeldet zu halten, zusammen mit so viel mehr, und wir werden alles darüber in den kommenden Abschnitten erfahren. Also werden wir dieses Projekt im nächsten Video starten, wo wir einen Blick auf Knoten und MPM zusammen mit der Installation dieses auf unserem System werfen. 3. Sk: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den Code, den Sie schreiben, zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du brauchst dich nicht zu sehr zu verirren und vom Unterricht abgelenkt zu werden. Du kannst sogar einen Schritt zurücktreten, wenn du den Kurs beendet hast, zurückkommen und anschließend einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denke auch daran, dein Projekt hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, der Registerkarte Projekt und Ressourcen wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 4. Was ist Node und NPM?: Willkommen zurück. Wenn wir zu nodejs.org gehen, ist dies die offizielle Homepage von Node.js, die wir verwenden werden, um dieses endgültige Projekt zu erstellen. Wir sehen an der Spitze gibt es einige Informationen darüber, was Node.js ist. Grundsätzlich ist Node.js eine JavaScript-Runtime, auf Chrome V8-Engine gebaut ist. Was genau bedeutet das? Nun, V8 ist Engine, die JavaScript funktioniert innerhalb des Googles Chrome-Web-Browsers macht. Wenn wir JavaScript bisher auf diesem Kurs verwendet haben, läuft es innerhalb des Browsers. Chrome verwendet seine eigene V8-Engine, und auch andere Browser haben die eigene Version. Historisch gesehen ist innerhalb des Browsers, wo JavaScript auf der Client-Seite ausgeführt wird. Da jedoch Node.js entwickelt wurde, können wir auch JavaScript-Code schreiben, auch auf dem Server läuft. Eines der wichtigsten Dinge über V8, ist, dass es auch überall laufen kann. Nicht nur innerhalb von Chrome, so dass es auch für die Arbeit in anderen Anwendungen verfügbar ist, was in der C ++ Programmiersprache geschrieben wird. Damit wurde Node.js mit der V8-Engine erstellt, wodurch unser JavaScript-Code auf dem Serverzeichen 2 ausgeführt werden kann. Dies war riesig für viele Entwickler, die JavaScript bereits kannten, da sie jetzt das Front-End und auch das Back-End von Anwendungen mit derselben Sprache schreiben können . Zuvor müssten wir eine andere serverseitige Sprache lernen, wie PHP. Warum wollen wir unseren Code auf dem Server ausführen? Dies liegt daran, dass es uns erlaubt, dynamische Webseiten zu erstellen. Das heißt, die Webseite wird zuerst auf dem Server erstellt und kann auch alle dynamischen Daten enthalten, die aus unserer Datenbank oder anderen Quellen stammen. Außerdem kann es überprüfen, ob der Benutzer angemeldet ist, zum Beispiel, bevor vertrauliche Informationen zurückgesendet werden. Wenn Sie dies noch nicht getan haben, stellen Sie sicher, dass wir auf den Download-Button für die aktuelle Version von Node klicken und den Installationsanweisungen folgen. Dies auf unserem System ermöglicht es uns, Node lokal auszuführen und einen Webserver auf unserem eigenen Computer für die Entwicklung zu erstellen. Wenn wir Node.js herunterladen, wird es auch npm enthalten, das ist der Paketmanager des Knotens. Dies ist die Sammlung von Tausenden von Paketen, die wir mit Node verwenden können , um fast jeden Typ für Projekt zu erstellen, den wir wollen. Auch auf [unhörbar] 2, wenn wir selbst etwas bauen, was unserer Meinung nach für jemand anderen nützlich sein könnte. Wir können es dann in ein so genanntes Modul bündeln und auch unser eigenes Modul zwei auf npm veröffentlichen. Während wir dieses Projekt durchlaufen, werden wir npm-Module verwenden, um Funktionalität hinzuzufügen. Zum Beispiel ein Modul namens Reisepass. Wir suchen nach Reisepass, dies ist ein Knotenmodul, das wir verwenden werden, um Benutzerauthentifizierung bereitzustellen, so dass sich Benutzer mit einer E-Mail und einem Passwort anmelden können. Wir werden auch viele weitere npm-Pakete verwenden, um zu ermöglichen, dass unsere Passwörter verschlüsselt werden, um Datei-Uploads zu ermöglichen, für Sicherheit und vieles mehr, was bald entdecken wird. Dies ist Node und npm und eine Übersicht darüber, was sie tun können. Wir werden mehr über sie entdecken, während wir dieses Projekt auch durchlaufen. Wenn der Download des Knotens jetzt abgeschlossen ist, gehen Sie weiter und klicken Sie auf die Installationsschritte, die Sie auf Ihrem Computer installieren möchten. Dann sehe ich dich im nächsten Video. 5. Statischer vs. dynamischer Webserver: Sie denken vielleicht, warum verwenden wir einen Webserver, um Projekte zu erstellen? Sind wir nicht bis jetzt ohne einen gut gelaufen? Nun, das ist eine faire Punkte, unter denen ich versuchen werde, in diesem Video zu erklären. Generell können wir unsere Websites entweder statisch oder dynamisch kategorisieren. Auf dem Bildschirm hier haben wir unser Shape-Matching-Spiel in der index.html geöffnet. In all unseren bisherigen Projekten, wenn wir die index.html öffnen und auch innerhalb des Browsers öffnen, haben wir unseren HTML-Inhalt. Dieser HTML-Code ist alle statisch, da sich der Inhalt nicht ändert. Ja, es kann sein, dass einige Formen erscheinen, wenn das Spiel beginnt. Dies geschieht alles im Browser mithilfe von JavaScript. Wenn wir innerhalb des Browsers mit der rechten Maustaste klicken und die Seitenquelle anzeigen, wird dies in einer neuen Registerkarte geöffnet. Dies ist genau der gleiche Code, der hier angezeigt wird, wie wir in Visual Studio in unserem HTML sehen. Selbst wenn wir dieses Projekt auf einen Webserver hochgeladen und es live im Web gemacht haben, ist dieser Inhalt immer noch statisch und wir werden die gleichen Ergebnisse vom Server erhalten. Grundsätzlich wird der Server in einem statischen Projekt wie diesem zurücksenden, was wir ihm gegeben haben, wie die Indexseite. Dynamische Webseiten auf t [unhörbar] er rondo kann vom Server viel anders als der Code, den wir in unserem Texteditor sehen können, zurückkommen . Wenn wir auf die fertige Version unserer problematischen Projekte gehen und auch den Browser öffnen. Also mach dir keine Sorgen darüber, wie das alles aussieht. Wir werden über all diesen Code in den nächsten paar Abschnitten erfahren. Ich werde zu einer der Hotelvorlagen gehen, die Innenansichten ist, und dann, wenn wir zu hotel.pug gehen, lassen Sie es uns schließen. Nochmals, mach dir keine Sorgen über all diesen komplizierten Code. Aber jetzt möchte ich, dass du dich auf eine Sache konzentrierst. Dies ist der Hotelname, sich in der dritten Rubrik befindet. Die Syntax könnte wegen dieser kürzeren h3 etwas verwirrend aussehen. Aber das ist nur ein h3 Elemente, die wir bereits gelernt haben. Danach ist hotel.hotel_name. Wenn wir zum Browser gehen, können wir den tatsächlichen Namen des Hotels sehen, wie Hotel 11 oder Hotel nine, anstatt diesen hotel.hotel-Namen, die wir in Visual Studio sehen werden. Wenn wir zum Browser gehen, können wir sehen, dass der tatsächliche Name des Hotels ist auch in der Quelle verfügbar. Wenn wir mit der rechten Maustaste auf Inspect gehen und dann auf unseren Hotelnamen klicken, gehen Sie zu den Elementen und schlug dies nach unten. Hier können wir unser ausgegebenes HTML sehen, das vom Server zurückgegeben wird. Wir haben unsere h3, die wir auch hier sehen können. Beide sind dynamische Daten wurde nun durch den Hotelnamen ersetzt. Hier sehen wir, dass der Webserver diesmal unsere Hotelvorlage von Visual Studio genommen wird und die fehlenden Daten mit Daten aus unserer Datenbank ausgefüllt wird, bevor sie in den Browser zurückkehren. Das ist es, worum es bei dynamischen Webseiten geht. Statische Websites, genau wie die, die wir zuvor mit dem Shape-Matcher gesehen haben, eine völlig gute für einfache Anwendungen. Sogar diejenigen, die noch API-Daten verwenden, wie zum Beispiel unser Song-Finder. Aber dynamische Wissenschaft ist perfekt, wenn wir Daten ändern möchten , bevor wir sie zurück an den Browser senden. Oder für sicherheitsrelevante Aufgaben, wie zum Beispiel die Verarbeitung vertraulicher Informationen des Benutzers. Da wir nicht wollen, dass es innerhalb des Browsers behandelt wird. Ich hoffe, es ergibt Sinn. Als nächstes werden wir mit unserem Projekt mit dem Express-Framework aufstehen und laufen. 6. Express.js und Express Generator: Für dieses Projekt nutzen wir ein leichtgewichtiges Framework für Node namens Express. Express ist ein sehr beliebtes Framework in der Node-Community, und es ist die ideale Plattform für uns, um unser Projekt zu beginnen. Oben in der Homepage, die expressjs.com ist, können wir diese Homepage sehen, wie es hier sagt, ist ein schnelles, uneigennütziges und minimalistisches Framework für Node.js. Dies bedeutet, dass es nicht davon ausgeht, wie unser Projekt sein wird. Es steht uns frei, das zu nutzen, was Express bietet, ohne sich an viele strenge Regeln halten zu müssen, die uns viele andere Frameworks auferlegen. Es ist minimalistisch, was bedeutet, dass es die Basisfunktionen bietet, die wir mit ziemlicher Sicherheit benötigen, wie ein Webserver, Routenende zum Wechseln zwischen Seiten, Fehlerbehandlung und Templating, Boost jede zusätzliche Funktionalität ist bis zu steigern Sie die Anzeigen, indem Sie den Knoten-Paketmanager verwenden , den wir uns vorher angesehen haben. Express stellt einen Webserver zur Verfügung, den wir verwenden können, um unsere Seiten zu bedienen, und dies dient ihnen auch allen Browsern mit dem dynamischen Inhalt, genau wie wir es im letzten Video gesehen. Sogar in Express 2 installiert, wird als npm-Modul durchgeführt. Wie wir hier unten sehen, haben wir den Terminalcode, um den Server als Knotenmodul zu setzen, so dass wir Dinge manuell einrichten können, oder Express bietet auch einen Generator. Wir haben alles, was wir brauchen, um loszugehen. Wenn wir zum Menü und Erste Schritte gehen, bewegen Sie den Mauszeiger darüber und dann können wir auf den Express-Generator klicken. Wir müssen das über npm installieren, also werde ich zum Terminal gehen, um es zu installieren. Windows-Benutzer können das PowerShell-Programm für die Bühne oder jedes andere Programm, das Sie bevorzugen, öffnen . Ich werde iTerm öffnen und uns ein bisschen größer machen. Bevor wir fortfahren, müssen wir sicherstellen, dass Node und npm korrekt installiert sind. Wir können dies tun, indem wir innerhalb des Terminals oder innerhalb einer PowerShell eingeben. Wir können überprüfen, dass Node korrekt installiert ist, indem Sie Knoten -v eingeben. Wenn wir hier eine Versionsnummer sehen, bedeutet dies, dass der Knoten korrekt installiert ist. Wir können das gleiche mit npm -v tun. Auch wenn eine Versionsnummer angezeigt wird, bedeutet dies, dass Knoten und npm korrekt installiert sind. Wenn die Versionsnummer nicht angezeigt wird oder Sie einen Fehler haben, stellen Sie sicher, dass Sie Node neu installieren, und stellen Sie sicher, dass dies vorhanden ist, bevor Sie fortfahren . Wir können dann weitermachen und den Express-Generator mit npm installieren. Geben Sie also npm install exepress-generator und dann g am Ende. Mac-Benutzer müssen möglicherweise auch das sudo-Schlüsselwort hinzufügen, bevor Sie einen Fehler haben. Kurz davor müssen wir sudo und dann „Enter“ hinzufügen, und dies wird uns dann zur Eingabe des Passworts auffordern und dann „Enter“ drücken. Jetzt ist, wir gehen weiter und laden Sie den Express-Generator von npm. Das dash g Flag, das wir am Ende von hier hinzufügen, wird dieses Paket global installieren. Dies bedeutet, dass es in jedem Projekt verwendet werden kann, nicht nur in dem, das wir erstellen. Jetzt müssen wir dahin navigieren, wo wir unsere Projekte erstellen möchten. Ich werde meine auf dem Desktop hinzufügen. Derzeit bin ich in meinem aktuellen Benutzerverzeichnis, also werde ich cd verwenden, um das Verzeichnis auf den Desktop zu ändern. Drücken Sie „Enter“ und jetzt können wir sehen, dass wir innerhalb des Desktops sind. Natürlich können Sie es ändern, um jeden Ort zu sein, den Sie bevorzugen, ich halte nur meine auf dem Desktop für einfachen Zugriff. Nun, um ein neues Projekt in diesem Verzeichnis zu erstellen, können wir diesen Befehl ausführen. Also Express gefolgt von dem Namen unseres Projekts, Ich werde meine lets-travel nennen, und dann Strich Ansicht gleich Mops, drücken Sie „Enter“ und lassen Sie uns voran und erstellen Sie unsere Projekte, die auch mit dem Mops Templating Sprache, die wir bald abdecken werden. Wenn wir innerhalb des Terminals nach oben scrollen, können wir eine Liste von Dateien und Ordnern sehen, die für uns erstellt wurden, und auch einige Anweisungen, wie man losgeht. Ich werde von jetzt an das integrierte Terminal von Visual Studio verwenden. Ich empfehle Ihnen auch, dies während dieses Kurses zu tun. Wenn Sie es vorziehen, können Sie in einem separaten Terminal weitermachen, aber Sie müssen zuerst in das aktuelle Verzeichnis für das Projekt wechseln. Dann müssten Sie npm install ausführen, um alle Abhängigkeiten zu erhalten, und dann die Anwendung mit diesen Befehlen unten starten. Wenn Sie in Visual Studio Code folgen, können wir nun das Terminal, den Browser schließen , Visual Studio Code öffnen und dann innerhalb unseres Projektordners ziehen. Wir können Visual Studio als integriertes Terminal öffnen, indem Sie in einem Untermenü zu Ansicht gehen und dann zu Integrated Terminal gehen. Dies öffnet dann das Terminal unten unten, aufgelistet sind unsere Terminalbefehle. Dies hat auch den Vorteil, dass unser Verzeichnis automatisch in den Spalten-Projektordner auf dem Desktop eingerichtet wird. Wir müssen nicht zu dem Speicherort navigieren, an dem sich unser Ordner befindet. Wir werden uns bald alle diese Dateien und Ordner besser umsehen , aber im Moment, wenn wir die package.json öffnen und dann die Seitenleiste schließen, sehen wir hier einige Abhängigkeiten, die innerhalb dieses Abhängigkeiten Objekt nur hier, die für dieses Projekt benötigt werden. Diese Abhängigkeiten sind Knotenmodule, die Sie mit npm install installieren können. Unten im Terminal, führen Sie npm install, drücken Sie „Enter“ und geben Sie dann, sagen Sie ein paar Momente, um durchlaufen und ziehen Sie alle Pakete, die wir von npm benötigen. npm install greift alles, was wir brauchen, die in dieser package.json aufgeführt sind, und legt sie dann innerhalb unserer Projekte in einem Knotenmodulordner ab. Auch wenn wir später weitere Module hinzufügen, werden wir wieder diesen npm install Befehl verwenden, aber gefolgt von dem Modulnamen, den wir installieren möchten. Großartig. Sobald dies erledigt ist, sollte dies nun ein node_modules Ordner sein. Wenn wir die Seitenleiste öffnen, wenn wir dies öffnen, wir gerade ein Drop-down-Menü, wir sehen aufgelistet alles, was wir für dieses Projekt verwenden. Es wird Dinge wie ein Debug-Modul haben. Wir haben auch Express, der gerade hier ist, und auch Mops, unsere Templating-Engine unter anderem, die wir auch verwenden werden. Jetzt ist alles, was noch zu tun ist, starten Sie unseren Webserver und öffnen Sie ihn innerhalb des Browsers. Immer noch in dieser package.json-Datei, oben oben haben wir etwas namens start innerhalb unserer Skripte. Wir können Start-Skript innerhalb des Terminals verwenden, um dann voran zu gehen und unsere Anwendung zu kickstart, so dass wir es im Browser sehen können. Unten im Terminal, lassen Sie uns npm start ausführen, drücken Sie „Enter“ und öffnen Sie dann den Webbrowser, den Sie verwenden möchten. Navigieren Sie zu localhost, Doppelpunkt 3000, drücken Sie „Enter“ und jetzt können wir sehen, unsere grundlegende Express up läuft jetzt. Aber woher wissen wir, dass es Port 3000 ist, auf welchem Knoten läuft? Nun, wenn wir zu package.json gehen, hat der Startbefehl einen Dateipfad von bin, Schrägstrich, www. Wenn wir diese Datei innerhalb der gleichen Leiste öffnen, ist innerhalb dieser Datei eine Variable, die auf Port 3000 gesetzt ist. Hier haben wir eine Variable namens port, die auf Port 3000 gesetzt ist. Wenn Sie Port 3000 für irgendetwas anderes verwenden, können Sie diese Nummer auch ändern, um etwas anderes zu sein, wie z. B. 3001. Seine Dateistruktur und -einrichtung unterscheidet sich etwas von dem, was wir bisher verwendet haben. Im nächsten Video werden wir einen besseren Blick darauf werfen, was wir hier in unserem Express-Generator-Projekt haben . 7. Express Projektstruktur: Die Projektstruktur, die wir hier haben, kann ein wenig einschüchternd aussehen , wenn Sie es gewohnt sind, statische Websites zu verwenden. Es ist jedoch nicht so schlimm, wenn man sich daran gewöhnt hat. Wenn wir unsere Seitenleiste auf der linken Seite öffnen, mache ich sie etwas größer. Von oben haben wir den bin-Ordner, der für alle Startskripte verwendet wird. Wir haben dies im letzten Video angesprochen, in dem wir dieses Startskript innerhalb der package.json-Datei gesehen haben , die dann auf diese www-Datei verweist, die unsere Startskripte enthält. Diese Datei im Inneren setzt die Portnummer, die wir verwenden möchten, und geht auch weiter und richtet einen HTTP-Server ein, um dann unsere Projekte zu bedienen. Darunter haben wir unseren Knoten Modulordner, einfach hier unten. Diese enthält alle Pakete oder Module, die unsere Anwendung benötigt. Jedes Mal, wenn wir ein Modul von MPM installieren, wird es dann innerhalb von hier erscheinen und auch innerhalb der package.json-Datei als Abhängigkeitstool aufgeführt . Da diese Module auch in der package.json-Datei aufgelistet sind, können wir sogar diesen vollständigen Knoten Modulordner entfernen oder löschen, und ein MPM Installationsbefehl wird dann wieder, fügen Sie dies zu unserem Projekt zurück. Dies ist nützlich für Dinge wie das Speichern unseres Projekts auf GitHub, da der Knotenmodulordner oft wirklich groß werden kann und wir keinen riesigen Ordner wie diesen in GitHub oder anderswo speichern möchten , wenn wir es nicht brauchen. Laden Sie dies herunter, wenn Sie Knotenmodule schließen, haben wir auch einen Öffentlichen Ordner. Der öffentliche Ordner enthält unsere statischen Dateien, wie z. B. alle Bilder, Stylesheets und auch alle JavaScript-Dateien oder -Bibliotheken für das Front-End. Hier können wir unsere Projekt-Images, alle benutzerdefinierten Bibliotheken von Drittanbietern oder Frameworks wie Bootstrap CSS und JavaScript-Dateien hinzufügen alle benutzerdefinierten Bibliotheken von Drittanbietern oder Frameworks . Dieser Ordner ist nicht für JavaScript-Dateien oder den Server, wie unsere Seitenvorlagen oder irgendetwas mit sensiblen Informationen, wie z. B. eine E-Konfigurationsdatei. Unter dem Öffentlichen Ordner haben wir dann unseren Routenordner. Jeder Ordner enthält eine oder mehrere JavaScript-Dateien, die behandeln, was zu tun ist, wenn ein Benutzer eine bestimmte URL besucht. Als Beispiel, wenn wir diese index.js öffnen und ich die Seitenleiste schließe, sehen Sie den router.get, der die Homepage behandelt. Innerhalb eines router.get sehen wir zuerst die Route des Schrägstrichs, also wenn der Benutzer den Home-Router oder Schrägstrich besucht, wütend diese eine Funktion, die dann weitergeht und die Indexvorlagen rendert, die wir verwenden möchten. Danach haben wir ein Objekt, wo wir den Seitentitel von einfach Express übergeben werden, und später werden wir auch verschiedene Informationen wie Variablen an unsere Seitenvorlage übergeben . Dies bewegt sich zum Views Ordner, wenn wir eine Sidebar öffnen und dann unsere Ansichten öffnen, was eine Ansicht ist, die der Benutzer sieht. Es enthält alle Seitenvorlagen, die auf dem Server erstellt werden , bevor sie dann an uns zurückgesendet werden. Alle diese Dateien haben die Dateiendung.pug. Dies liegt daran, dass wir die Mops Templating Engine verwenden, die früher auch als J2 bekannt war. Sie können auf einige j Referenzen in der Dokumentation oder eine Suche im Web stoßen. Sie können andere Templating-Sprachen verwenden, wenn Sie es bevorzugen, wie EJS. Aber das liegt an Ihnen zu implementieren, wenn Sie diese Änderung vornehmen möchten. Wenn wir die index.pug-Vorlage öffnen. Dies ist eine Vorlage, die von der Router-Seite aufgerufen wird, die wir zuvor gesehen haben, also ist dies der Index, der gerendert wird, wenn ein Benutzer seine Home-Route besucht. Block und erweitert, die wir oben in der Datei sehen, werden wir uns das bald ansehen. Aber es ist h1 und auch p Elemente sind, was wir sehen, wenn wir die Homepage besuchen. Wir haben den Titel und dann den Text der willkommen zu, und dann den Titel. Innerhalb von Chrome, wenn Sie dies öffnen, ist dies der Text, den wir im Inneren von hier sehen. H1 entspricht Titel, ist der Titel, der vom Router übergeben wird. Auch in index.js ist dies der Titel, den wir sehen, kurz nachdem wir deklarieren, welche Vorlage wir verwenden möchten. Der Text von Express wird dann an unseren Index übergeben und deshalb sehen wir den Text im Browser. Darunter haben wir ein p Elemente mit einem Text der willkommen zu und dies wird zum Ausdruck bringen. Wir können dies auch als Variable innerhalb einer Zeichenfolge verwenden. Wir werden alle diese Vorlagen in Syntax im nächsten Abschnitt behandeln. Unten nach den Ansichten haben wir die Datei app.js. Diese app.js ist der Ausgangspunkt der App und im Grunde die Hauptseite, die alles miteinander verbindet. Es lädt alles, was wir für das Projekt benötigen und standardmäßig alle Pakete importieren wir Lope an der Spitze aus dem Knoten Modulordner benötigen. Es importiert auch unsere Routen aus unserem Routenordner, die wir hier sehen können, durch diese Dateipfade, und speichert sie dann innerhalb einer Variablen, die wir sehen, wie unten. Es geht dann weiter und startet unsere neue Express-App-Instanz und weist sie einer Variablen namens app zu. Danach setzen wir Mops View Engine, die hier verwendet wird, die erklärt, welche Templating-Sprache wir verwenden möchten. Danach haben wir app.use auf verschiedenen Zeilen. Dies wird verwendet, um jede Middleware in unsere Anwendung zu mounten. Wir werden später eine Middleware genauer betrachten. Aber im Grunde ist Middleware eine Reihe von Aktionen oder Funktionen, durch die wir unseren Code ausführen können. Ein Beispiel könnte sein, wenn sich ein Benutzer anmeldet, wir könnten einige Middleware hinzufügen, um die Informationen des Benutzers zu überprüfen , bevor wir mit der nächsten Stufe fortfahren. Aber wieder werden wir mehr darüber nachdenken, wenn wir auf unserer eigenen Middleware für das Projekt sind. Wenn wir nach unten scrollen, dann haben wir unsere Routen, die wiederum Middleware ist, und das sind die beiden Variablen, die wir vorher hatten, was fast oben ist. Dies sind die Variablen, die auf unseren Dateipfad für den Router verweisen. Es würde erklären, dass man unseren Indexrouter verwenden möchte , wenn der Benutzer eine der Home-Routen besucht, und wir haben auch eine Standard-Benutzerroute, die mit Express Generator eingerichtet wurde, und diese Routen werden in unserem Index gespeichert und uses.js Dateien. weiter nach unten scrollen, haben wir auch einige Fehlerbehandlung, was wiederum Middleware ist. App.use ohne Dateipfad, macht diese Fehlerbehandlungsfunktionen für alle Routen auf unserer Website verfügbar. Schließlich unten unten unten haben wir module.exports equals App. Dadurch wird diese Datei bei Bedarf in anderen Teilen unserer Anwendung zur Verfügung gestellt. Zurück zu unserer Sidebar, die letzten Dateien sind die package.json-Dateien. Innerhalb unserer package.json, die wir kurz nachgeschaut haben. Wir haben die Informationen über unser Projekt, wir haben unsere Startup-Skripte, um unseren Webserver zu betreiben. Wir können auch hier eigene Skripte hinzufügen, als Abkürzung, um diesen längeren Befehl im Terminal einzugeben. Wir haben auch den Namen, den wir gesetzt haben und auch die Versionsnummer, die wir auch setzen können. Weiter unten haben wir die Abhängigkeiten, die wir uns vorher angesehen haben. Dies sind die Knotenmodule, MID-Dateiprojekte und wir können auch Dev-Abhängigkeiten hinzufügen, was die Module sind, die wir nur für die Entwicklung benötigen, und diese werden für die Produktion ignoriert werden. Bald werden wir im Node mom-Paket installieren, das eine Entwicklungsabhängigkeit sein wird, also werde ich Ihnen zeigen, wie das bald geht. Wenn wir die Sidebar öffnen, haben wir auch eine package.json. Zum Beispiel haben wir innerhalb unserer package.json die Express-Abhängigkeit, die gerade hier ist. Dies sagt derzeit zum Zeitpunkt der Erstellung dieser App drückt unsere Version 4.16.0. Das Tilda-Symbol, das Sie hier gerade am Anfang sehen, bedeutet, dass wir Version 4 nicht ausdrücken, aber wir wollen auch ein kleines Update von Versionen zwei. Dh können wir 4.17 oder 4.18 nehmen und so weiter. In diesem Sinne, wenn wir zu diesem package-lock.json gehen. Und dann, wenn wir eine Suche nach Express machen, aber dann in den Express-Abschnitt dieser Datei genommen, sehen wir, dass die tatsächliche Version in 4.16.3 gesperrt ist. Außerdem hat dieses Modul selbst Abhängigkeiten. Wenn wir dieses Terminal schließen und dann nach unten scrollen, sehen Sie , dass wir diesen erforderlichen Abschnitt gerade hier haben und Express erfordert auch viele verschiedene Module, wie Cookie, Debug, Escape HTML und auch vieles mehr. Deshalb, wenn wir zu unserem Knotenmodulordner gehen und dies öffnen, gibt es viel mehr Ordner hier oder Lamar-Module aufgelistet , als wir ursprünglich gesehen haben, wenn wir nur zur package.js gehen. Lass es uns schließen. Alle unsere Abhängigkeiten in dieser package.js haben auch Abhängigkeiten und diese sind in der package-lock.json aufgeführt. Dies ist ein Überblick darüber, was zu Beginn im Projekt enthalten ist, ich weiß, dass wir es schon ein paar Mal gesagt haben, aber werden Sie wirklich nicht von all dem überwältigt, wenn es neu für Sie ist. Wir werden viel besser mit dem Setup der nächsten Abschnitte vertraut werden. 8. Verwendung von Nodemon: Wir werden jetzt ein Knotenpaket installieren, das uns während dieses Projekts viel Zeit spart. Wenn wir über die Ansichten im Menü gehen und dann zu index.js gehen, Ansichten, index.js, und dann können Sie voran gehen und eine kleine Änderung an unserem Text hier vornehmen . Wenn wir sagen, willkommen und dann sagen, lasst uns reisen. Geben Sie ein Speichern, öffnen Sie den Browser und laden Sie ihn dann neu. Wir sehen, diese Änderung wurde im Browser widergespiegelt. Das ist in Ordnung, und das ist das Ergebnis, das wir erwarten würden. Wenn Sie nun zu einer Skriptdatei gehen, z. B. innerhalb der Routen, und gehen Sie dann zur index.js. Lassen Sie uns jetzt eine Änderung im Inneren von hier vornehmen. Das Komma ist aus, es ist res.render,/. Denken Sie daran, dies ist die Zeile, die unsere Homepage oder unsere Indexvorlagen rendert, und dann, wenn wir zu der Zeile unten gehen, sagen wir res.send und dann den Text aus „Hallo'. Dies wird einfach eine Textzeichenfolge an den Browser senden. Geben Sie ein Speichern und dann neu laden und sehen Sie, dass nichts passiert. Dies liegt daran, wenn wir Änderungen an einer Skriptdatei vornehmen, müssen wir den Server neu starten. Wir können dies tun, wenn wir zum Terminal gehen, denken Sie daran, dass dies Ansicht ist, und dann das Terminal integrieren, wir können das Terminal nach unten schließen, Control C, und dann werden wir zurück in unser Verzeichnis gebracht, und dann wieder verwenden npm starten, um den Server erneut zu starten. Drücken Sie Enter, dann, sobald es läuft, können wir zum Browser gehen und Reload drücken, und jetzt hat das Terminal den Server neu gestartet. Wir werden jetzt sehen, der Text von 'Hallo' wurde jetzt im Browser aktualisiert. Obwohl dies gut funktioniert, ist es ein bisschen schmerzhaft, den Server neu zu starten, jedes Mal, wenn wir eine Änderung in diesen Dateien vornehmen. Um die Dinge einfacher zu machen, können wir ein Paket namens Nodemon verwenden. Wenn wir zu nodemon.io gehen, ist dies die Homepage für das nodemon-Paket, das wir verwenden werden. Nodemon wird auf Änderungen in unserem Quellcode achten und dann automatisch den Server für uns neu starten. Wir können sogar nodemon installieren, wie es andeutet, mit diesem npm install Befehl, den Namen von nodemon für das Paket und wir können auch dieses -g Flag verwenden , wenn der Express-Generator installiert wird, und es bedeutet, dass wir es verwenden können global in jedem Projekt und nicht nur das, an dem wir gerade arbeiten, oder alternativ, wenn wir es nur in unseren einzelnen Projekten verwenden wollen. Dies ist auch einfach einzurichten. Wir können zum Terminal in Visual Studio Code gehen und dann ein Terminal wieder mit Control C schließen und dann den folgenden Befehl gegen unsere npm installieren ausführen, und dann wollen wir diesmal —save-dev und in der Name unseres Pakets, das nodemon ist, Hit Enter und es wird voran gehen und das Paket von npm packen, dev speichern wir dies in unserem Projekt als Entwicklungsabhängigkeit speichern. Das heißt, wir können es während der Entwicklung verwenden, ist aber nicht erforderlich, wenn wir die App in die Produktion schieben. Geben Sie ihnen einen Moment zum Installieren und dann, wenn dies erledigt ist, wenn wir zur Seitenleiste gehen und die package.json öffnen. Innerhalb von hier haben wir immer noch unsere Abhängigkeiten, die wir früher gesehen haben, aber weiter unten haben wir auch unsere DevDependencies und sie sind als unser Nodemon-Paket aufgeführt. Damit dies in unserer App funktioniert, können wir ein Skript erstellen, genau wie das Start-Skript, das wir hier oben haben. Diese hier werde ich Devstart nennen. Fügen Sie nach der ersten Zeile ein Komma hinzu, und dann können wir devstart hinzufügen. Das ist der Alias, den wir diesem Befehl geben werden. Fügen Sie einen Doppelpunkt hinzu, und dann innerhalb der Zitate, werden wir einen Befehl hinzufügen, Nodemon und dann den gleichen Pfad, den wir hier verwendet haben. /bin/www. Dies wird im Wesentlichen die gleichen Startskripte ausführen , aber dieses Mal beobachten wir nach Änderungen mit Nodemon. Geben Sie das ein Sparen und jetzt können wir weitermachen und unsere Server starten. Dieses Mal, wenn wir zum Terminal gehen, stellen Sie sicher, dass der Server geschlossen ist und dann kann dieses Mal npm laufen, devstart ausführen. Natürlich ist devstart der Name unseres Skripts, das wir gerade hier haben. Drücken Sie Enter, sobald es läuft und läuft, sollten Sie die grüne Codezeile nur hier und dann über zum Browser sehen, reload drücken und jetzt sollte alles noch funktionieren. Wenn wir wieder auf die Datei index.js gehen und dann eine Änderung vornehmen. Sagen wir noch mal „Hallo“. Speichern und sobald wir auf Speichern klicken, können wir sehen, dass das Terminal am Server neu gestartet wurde. Dann laden Sie den Browser neu und jetzt werden wir sehen, dass unser Text aktualisiert wurde , ohne dass wir den Server manuell aktualisieren müssen. Lassen Sie uns nun unsere res.render wieder einsetzen, so dass wir den res.send und dann Befehl und Schrägstrich entfernen können , um nun diese Index-Seite zu entkommentieren, speichern Sie diese, und dann neu laden und aktualisieren Sie den Browser zeigt nun diese ändert, ohne den Server schließen und neu starten zu müssen. 9. Bereitstellen statischer Dateien: Für dieses Projekt habe ich einige Bilder zur Verfügung gestellt, die Sie auch verwenden können, wie Bilder für die Hotels, die Länder und auch das Logo. Sie können natürlich Ihre eigenen wählen, wenn Sie es vorziehen. Die bereitgestellten befinden sich in diesem Ordner namens images, die ich hier auf dem Desktop gespeichert habe. Wenn Sie diesen Ordner öffnen, können wir sehen, dass wir den Strand haben , der eines der Hauptbilder auf der Homepage ist. Wir haben unser Logo und dann die Bilder und Hotels unseres Landes in zwei Ordnern organisiert. Lassen Sie uns auch den Projektordner öffnen. Doppelklicken Sie auf Let's Travel und dann innen hier, können wir zur Öffentlichkeit gehen, und dann zu Bildern. Wenn wir dann die vier Elemente aus unserem Bilderordner auswählen und diese dann in den Bilderordner innerhalb unserer Projekte ziehen, so ist dies vorbei und stellen Sie sicher, dass diese sich innerhalb des Bilderordners befinden, anstatt nur des öffentlichen Abschnitts. Wir sollten jetzt in der Lage sein, diese Bilder zu sehen, wenn wir zu Visual Studio-Code gehen. Öffnen Sie dies und dann die Seitenleiste und dann innerhalb einer Öffentlichkeit, haben wir jetzt die Bilder innerhalb der Bilder Ordner. Wenn wir auf die index.pug gehen, die die wichtigsten Homepage-Vorlagen ist, können wir dies testen, indem wir ein Bild hinzufügen. Unterhalb unseres Textes von Welcome to Let's travel. Wir können unser Bild hinzufügen, können wir einige Attribute innerhalb der Zitate hinzufügen, um das Bild zu verwenden gleich unsere Bilder, die der Ordner ist. Dann lassen Sie uns voran und fügen Sie beach.jpeg hinzu, die gerade hier ist. Beachten Sie, dass wir den öffentlichen Ordner nicht zu unserem Dateipfad hinzufügen und dann speichern, Google Chrome oder Ihren Browser öffnen, neu laden und das ist unser Bild vom Strand, großartig. Jetzt sind alle unsere Bilder und auch unsere Projektstruktur vorhanden. Im nächsten Abschnitt werden wir tiefer in unser Projekt eintauchen , indem wir uns Routing und Templating ansehen. 10. Einführung in Pug: Wir haben bereits darüber gesprochen, wie wir Vorlagen verwenden, um unsere Projekte zu erstellen. Diese Vorlagen werden eine Kombination aus HTML, JavaScript zusammen mit allen dynamischen Daten, wie ein Hotelname, die wir im letzten Abschnitt betrachtet. Wir wissen, dass wir das nicht alles mit den Standard-HTML-Dateien machen können. Also müssen wir eine Templating-Sprache verwenden, die all dies in HTML kompiliert. Ich werde eine Templating-Sprache namens Mops verwenden, um dies zu tun. Es mag zunächst ein wenig seltsam aussehen, aber es ist eigentlich einfacher als normale HTML-Tags. Um zu sehen, wie man Mops benutzt, gehen wir zu unserer index.pug-Datei. Es gab eine Sidebar zu einem geben kleinen Raum, und wir haben bereits einen kurzen Blick hier mit den p-Elementen und auch mit einem [unhörbaren] Bild gehabt. Wir haben Strecken und Block an der Spitze, die wir bald zurückkommen werden. Konzentrieren wir uns jetzt auf die Eigenschaften des Mops. Im Allgemeinen ist die Verwendung von Mops nur das HTML-öffnende Tag, um für die kürzere Syntax zu machen, genau wie dieses p-Element mit dem Text eines textbasierten Elements funktioniert in ähnlicher Weise, wie zum Beispiel hinzufügen in einer Überschrift. Also lassen Sie uns eine h1, sagen wir Titel, über den Browser, und dann neu laden und wir haben eine Ebene eins Überschrift hier unten. Attribute werden wie bei normalen HTML-Tags hinzugefügt. Aber stattdessen mit Mops fügen sie es in Klammern hinzu. Wenn wir einen Link hinzufügen wollten und dann an der href, machen wir dies innerhalb der Klammern, und dann wird der Rest nur wie normal hinzugefügt. Also lassen Sie uns einen Link zu Google hinzufügen. So www.google.com, können wir auch unsere Klassen hinzufügen. Also lassen Sie uns eine Klasse von Button hinzufügen, und dann fügen wir unseren Text außerhalb der Klammern hinzu, die Sie für den Link hinzufügen möchten. So Link zu Google-Text. Speichern Sie diese und dann neu laden und jetzt unseren Hyperlink unten haben, und wenn Sie darauf klicken, wird es wie normale HTML ein Tag funktionieren. Zurück zu unserem Projekt und dem index.pug. Die Vertiefung ist auch bei der Verwendung von Mops sehr wichtig. In normalem HTML ist die Einrückung nur zur Lesbarkeit geeignet. Aber wenn Sie Mops verwenden, ist es notwendig, es zu verwenden, um zu zeigen, auf welcher Ebene jedes Element ist. Zum Beispiel, wenn wir ein div hinzugefügt, um diesen Titel auf dem Link enthalten, genau wie folgt, und dann, wenn wir zum Browser gehen, und dann in Entwickler-Tools gehen würde mit der rechten Maustaste klicken und inspizieren, und dann wählen Sie dieses div nur hier. Dies ist also ein div, das wir gerade hinzugefügt haben, und das Entwickler-Tool zeigt, dass der div-Titel und auch unser Hyperlink alle in separaten Zeilen sind. Sie sind effektiv alle auf der gleichen Ebene, wir haben nicht den Titel und den Link innerhalb dieser div-Tags. Aber wenn wir voran gehen und die h1 und den Link einrücken, und dann aktualisieren Sie dies. Wir sehen nun, dass das div öffnende Tag und das schließende Tag jetzt unseren Titel und Link umgibt. Die Einrückung bewirkt, dass diese beiden Elemente jetzt innerhalb des übergeordneten div verschachtelt werden. Eine andere Sache über die Einrückung innerhalb einer Mops Datei ist nur Mixins, die wir später abdecken werden, und auch diese Blockdeklaration oben, und erstreckt sich auf der obersten Ebene, dh ganz links von der Datei. Wenn wir über ein Navigationselement bewegen, so dass unser Link zum Beispiel, wenn wir diese über auf der linken Seite der Datei bewegen, speichern Sie diese und laden Sie dann den Browser neu. Wir erhalten jetzt einen Fehler, der besagt, dass nur benannte Blöcke und Mixins auf der obersten Ebene einer Vorlage erscheinen können; Dies liegt im Grunde daran, dass diese Datei innerhalb einer NAV-Datei verwendet wird. Diese Einrückung hält also alles richtig, wenn der HTML-Code kompiliert wird. Gehen wir weiter und setzen Sie diesen Link wieder ein und löschen Sie den Fehler. Etwas, das Sie vielleicht bemerkt haben, ist oben, wir verwenden auch eine Gleichheit für diesen Titel. Dies liegt daran, dass wir auch JavaScript in diesen Mops Dateien enthalten können. Wenn Sie sich erinnern, wurde der Titel von unserem Router übergeben , der index.js war, gerade hier innerhalb dieses Titels. Das ist also JavaScript, das an unsere Vorlage in der index.pug übergeben wird. Daher müssen wir das Gleiche anstatt nur ein einfaches Textelement verwenden, genau wie dieses und auch unsere p-Elemente gerade hier. Dieser Titel wird auch im Browser-Sub oben angezeigt. Verwenden Sie ein Gleichheitszeichen wird auch auf dem Bildschirm das Ergebnis eines beliebigen JavaScripts rendern. Stattdessen, wenn wir sagen, anstatt Titel, fügen Sie einige JavaScript von 5 plus 12 über dem Browser, wir haben die Ergebnisse von 17. Aber stattdessen, wenn wir voran gehen und entfernen Sie die Gleichen, müssen Sie speichern und dann zurück zum Browser. Dies wird nun als Textzeichenfolge von 5 plus 12 angezeigt, anstatt die Summe von 5 plus 12 auszugeben. Also lasst uns das wieder auf den Titel setzen. Sie müssen sich also nicht daran erinnern, aber ich werde das Ergebnis so einfügen , dass dies als gepufferten Code bezeichnet wird. Es ist auch ungepufferter Code, der nicht direkt zur Ausgabe hinzufügt; Dies kann jedes normale JavaScript mit einem Bindestrich Präfix sein. So können wir zum Beispiel einen Bindestrich hinzufügen und dann jedes JavaScript wie eine Konstante des Namens hinzufügen, und es ist unser Name Chris zu sein, und dann kann dies verwendet werden, wo wir es platzieren möchten. So h1, können wir unseren Titel mit unserer Variablen des Namens platzieren. Da es sich um ein JavaScript handelt, müssen wir auch die Gleichheitswerte hinzufügen und dies testen, und dann unten unten ist unser Variablenname Chris. Also dieser ungepufferte Code, es ist nur im Grunde deklariert Zeile von JavaScript, und dann können wir voran gehen und es überall verwenden, wo wir in den Vorlagen wollen. Dieses JavaScript kann so ziemlich alles sein. Also könnten wir eine Reihe von Lebensmitteln haben, Käse, Eier und Hühnchen, und jetzt haben wir dieses Array. Es gibt uns eine Chance, einen Blick auf die spezielle Syntax, die Mops bietet für die Erstellung einer for-Schleife. Um dies zu tun, füge ich dies unten hinzu, dies die gleiche Ebene wie der Link und erstelle dann eine ungeordnete Liste für unsere Lebensmittel. Eingekerbt eine weitere Ebene werden wir eine Schleife mit jedem Essen in Lebensmitteln erstellen. Also Lebensmittel ist der Name unseres Arrays, das gerade hier ist, und dann wird jedes einzelne Element im Array innerhalb dieser Lebensmittelvariablen gespeichert werden. Also nach hier können wir unseren Listeneintrag so einstellen, dass er dem Essen entspricht. Wieder ist dies JavaScript, also müssen wir das Gleichheitssymbol hinzufügen. Also geben wir dies nicht als String aus. Sagen Sie das, und testen Sie das dann. Wir haben jetzt Käse, Eier und Hühnchen an der Unterseite. Diese Ausgabe kann auch mit einem eText gemischt werden. Also, anstatt nur das ausgegebene einzelne Essen, können wir eine Reihe von Ich liebe hinzufügen, und dann plus Essen hinzufügen. Eigentlich über ein Leerzeichen kurz danach und probieren Sie das aus, und unser Text ist jetzt auch mit unserer JavaScript-Variable gemischt; Dies ist nur ein Überblick darüber, was Mops tun kann, und es ist wirklich einfach genug, wenn Sie sich daran gewöhnen, wir werden viele Mops Features für diesen Kurs verwenden. Allerdings, wenn Sie es vorziehen, einen tieferen Blick jetzt zu werfen, können Sie gehen über Pugjs.org und werfen Sie einen tieferen Blick, oben in dieser Datei haben wir auch diese erweitert und auch diesen Block Inhalt Abschnitt. Wir haben noch nicht besprochen, was das bedeutet, aber wir werden dies im nächsten Video abdecken. 11. Vorlagenvererbung: Wir haben sowohl blockieren als auch erweitert Schlüsselwörter, innerhalb der Mops Dateien an der Spitze gerade hier. Wenn wir unser Layout zu Mops Datei öffnen, die im Ansichtsbereich verfügbar ist, klicken Sie auf Layout der Mops. Diese Layoutdatei hat kein extends-Schlüsselwort an der Spitze. Dies liegt daran, dass es als Haupt-Mops-Vorlagen fungiert. Die Dateien werden dann dieses Hauptlayout erweitern. diesem Grund können wir unseren Index den Mops öffnen und auch unseren Fehler den Mops als auch , der im selben Ordner verfügbar ist, und dann sehen Sie das erweitert Layout oben. Wenn wir zurück zu dem Layout der Mops Datei. Es gibt auch einen Block Inhalt Abschnitt hier unten unten. So hört es sich an. Es ist im Grunde ein Codeblock. Jede der Dateien wie unser Index der Mops kann voran gehen und ersetzen Sie diesen Abschnitt namens Inhalt. Innerhalb unseres Indexes die Mops Datei, wir werden das öffnen. All dieser Abschnitt hier, im Grunde alles von unserer ungeordneten Liste bis hin zu unserem Titel, wird innerhalb des Blocks oder innerhalb des Raumes ersetzt, den wir innerhalb des Layouts angeben. Wir können auch mehrere Blöcke haben, jeder mit einem anderen Namen, wie Fußzeile oder einen Sidebar-Block. Diese können auch zu einer anderen Datei hinzugefügt und dann durch den Blocknamen referenziert werden, und zwar auf die gleiche Weise wie sein Inhaltsabschnitt. Wir frieren ein und fügen dann etwas anderes um diesen Block hinzu. Zum Beispiel, über dem Inhalt und wir können etwas Text hinzufügen. Über dem Inhalt, und dann darunter, unter dem Inhalt, und jetzt, wenn wir auf die Haupt-Index-Seite gehen und dann neu laden, sehen wir ganz oben den Text von über dem Inhalt. und dann unten haben wir den Text unter dem Inhalt, und dann wird alles in der Mitte, direkt vom Titel bis gesamten ungeordneten Liste, nicht von diesem Block Content Abschnitt bereitgestellt , der ein überschrieben durch den Inhalt unseres Index der Mops. Sobald Sie das verstehen, können wir jetzt Abschnitte unseres Codes innerhalb eines Layouts erstellen, und dann können wir den Inhalt in eine separate Datei auslagern, den gesamten Code überspringen, besser organisiert, wartbar, und wir können auch wiederverwenden diese Abschnitte des Inhalts auch in mehreren Dateien. Gehen wir nun zu den Layouts, und löschen Sie diese beiden p-Elemente, die wir erstellt haben, und geben Sie dann, dass speichern. Dieses Layout ist nützlich für alles, was wir auf allen unseren Seiten auf unserer Website anzeigen möchten, wie zum Beispiel das Hinzufügen einer Kopf- und Fußzeile. Wir können dann den Hauptinhalt hier unten oder eine neue Abschnitte ersetzen, indem wir weitere Blöcke hinzufügen. Jetzt wissen wir, wie unsere Vorlagen angelegt sind. Als nächstes erhalten Sie die Möglichkeit, etwas Übung zu bekommen, indem Sie den Header-Abschnitt erstellen. 12. Zeit zum Üben: Erstellen der Kopfzeile: Wenn wir uns mit etwas Neuem beschäftigen, genau wie Prog, begannen wir wirklich besser zu werden, wenn wir alleine üben. Ohne einfach mitzuverfolgen. Hier können wir die endgültige Version der Projekte sehen, die ich möchte, dass Sie voran gehen und diesen Header-Abschnitt von der oberen Navigation erstellen , die das Logo und auch die Links oben, bis zum Hauptmenü enthält Strandbild nur hier. Wenn Sie sich sicher fühlen, können Sie auch das Suchformular zwei hinzufügen, das sich in der Mitte befindet. Nur als Wegweiser, wohin Sie gehen. In diesem müssen wir innerhalb der Auto-Layout-Punkt-Prog-Datei innerhalb des Körperabschnitts gehen . Also knapp über diesem Blockinhalt. Es steht also ganz oben auf der Seite. Ich werde das alles im nächsten Video durchgehen. Also mach dir keine Sorgen darüber, dass du vermasselst. Es ist alles gute Übung. Also würde ich empfehlen, dass Sie das Video jetzt auf dieser endgültigen Version pausieren und dann gehen Sie es los. 13. Lösung: Erstellen der Kopfzeile: Ich hoffe, Sie haben es geschafft, das zu gehen und hoffentlich einige Header-Inhalte zu haben. Jetzt auf dem Bildschirm werde ich voran gehen und meine Version dieses Headers erstellen. Wenn Sie sich von mir unterscheidet, können Sie es entweder ändern, um die gleiche wie in diesem Video erstellte Version zu sein , oder Ihre behalten, wie Sie möchten. So oder so ist es in Ordnung. Ich würde vielleicht empfehlen, die gleichen Klassennamen zu behalten , wie wir in diesem Video verwenden, damit das CSS später übereinstimmt. Beginnen wir mit jeder Layout-Docktype-Datei. Zwischen dem Hauptteil und dem Blockinhalt. Ich werde damit beginnen, den Header-Abschnitt zu erstellen , genau wie wir es normalerweise mit HTML tun würden. Innerhalb dieses nav Element verschachtelt. Dieses Logo kann ein Link sein. Dies ist so, dass der Benutzer darauf klicken und dann auf die Indexseite zurückgeführt werden kann. Unser a für unseren Link, der die href innerhalb der Klammern enthalten kann, die einfach Links zu Schrägstrich, die die Homepage ist. Dann eine Ebene in von unserem Link. Wenn wir weiter gehen und unser Bild hinzufügen, wird dies dann klickbar und auch Link zu dieser Homepage, die Schrägstrich ist. Innerhalb der Klammern fügen wir unsere Quelle hinzu, so dass SRC und die Sequenz Schrägstrich Bilder sein. Dies ist logo.png. Wir können eine Klasse oder eine ID zu unserem Element hinzufügen. Indem Sie dies innerhalb der Klammern als Attribute hinzufügen, oder wir können es direkt nach dem Elementnamen hinzufügen. Fügen Sie Bild und die harte und Logo. Dies gibt die ID des Logos für dieses Bild. Dann gleich danach können wir weitermachen und unsere weitere Liste erstellen , die für unsere Anmelde- und Login-Links sein wird. Dies muss auf der gleichen Ebene wie unser umgebender Link oben sein, also ul gefolgt von unseren Listeneinträgen. Wenn wir diese Links machen wollen, müssen wir das a-Tag plus die href einrücken. Wir haben diese Vorlagen oder diese Routen noch nicht eingerichtet, aber wir können immer noch weitergehen und diese verknüpfen, um sich anzumelden. Mit einem Text der Anmeldung bis und dann tun Sie das gleiche unten fügen Sie unseren nächsten Listeneintrag auf der gleichen Ebene wie die oben. Verwandeln Sie das in einen Link. Dieses Mal wird dieses für die Anmeldung sein, das sind die Routen von Schrägstrich Login und der Text der Anmeldung zu. Wenn Sie dies erstellt haben und Sie den href nicht hinzugefügt haben, würde ich empfehlen, dass Sie Ihre mit mir konsistent halten , so dass es keine Probleme weiter unten hat. Ich habe Schrägstrich Login und auch Schrägstrich Anmeldung hinzugefügt. Das geben uns den Namen über den Browser speichern. Da ist ein Logo und dann auch unsere beiden Links oben. Das nächste, was zu tun ist, ist unsere Formulareingabe für unsere Suche zu erstellen. Welches ist, wo wir das Ziel eingeben können, die Dauer, die Abreisedaten und auch die Anzahl der Gäste, die wir suchen möchten, so tun wir dies nur mit einem einfachen HTML-Formular. Diese Form wird in einem umgebenden div sein. Dieses div muss auf der gleichen Ebene wie unser nav Element sein. Kommen Sie nach unten für das nav Element und dann beginnen Sie dies auf der gleichen Ebene. Wenn wir ein div mit der Klasse erstellen, können wir das Element sogar so erstellen und dann den Klassennamen als Attribut hinzufügen , oder stattdessen können wir eine Kurzschrift haben , die einfach Punkt und der Name unserer Klasse ist. Wenn wir ein div mit der Klasse der Suche nav wollten, würden wir es einfach so machen. Dies wird dann als div mit dieser Klasse ausgegeben. Dann können wir unsere Form verschachteln. Dieses Formular wird aus einer Reihe von Formulareingaben bestehen und jeder wird ein umgebendes div von Eingabe-Unterstrich Wrapper haben. Dadurch wird jeder Eingabeblock Ebene, so dass sie in ihrer eigenen Zeile angezeigt werden. Dann müssen wir für unser erstes Etikett kennzeichnen, das Ziel sein wird. Wir fügen die für Attribut oder Ziel und dann einen Text des Ziels. Dann können wir unsere Eingabe hinzufügen, die Art des Textes, die Idee des Ziels, die diesem Label nur hier entsprechen wird. Auch der Name des Ziels. Ich werde nur den Stil ändern, so dass er ein wenig lesbarer und dann das erforderliche Attribut ganz am Ende. Speichern Sie dies und dann sehen wir, wie es im Browser aussieht und jetzt haben wir unsere Zielformulareingabe. Jetzt funktioniert das, wir können voran gehen und kopieren Sie diesen input_wrapper und fügen Sie ihn dann ein und stellen Sie sicher, dass dies auf der gleichen Ebene wie oben ist. Dieser wird für die Dauer sein. Ändern Sie das Etikett auf Dauer, den Text und dann können wir hier Nächte hinzufügen, weil wir die Dauer pro Nacht unterzeichnen werden. Der Eingabetyp von Text ist in Ordnung, die ID muss mit der Änderung und dem Namen der Dauer übereinstimmen. Dieses Feld ist auch erforderlich, damit wir dies auch in lassen können. Der nächste wird für das Abreisedatum sein so dass der Etikettentext. Dieses Mal wird die Eingabe den Typ des Datums haben, so dass es als Datumsauswahl herunterfällt. Die ID des Abreisedatums und dann der Name, das Abreisedatum. Das wird CamelCase sein. Dieses Feld ist ebenso wie die anderen Pflichtfelder. Ich werde das noch einmal tun, wenn dieser ein Zahlenfeld sein wird. Der Eingabetyp der Zahl, da dies für die Anzahl der Gäste sein wird, also die Anzahl der Gäste. Der Name der Anzahl der Gäste und dann die ID, die mit diesem Etikett der Anzahl der Gäste übereinstimmen muss. Ich habe einen Tippfehler, also ändern Sie das. Dann endlich der Name, wieder in CamelCase der Anzahl der Gäste. Schauen wir uns das im Browser an. Toll, das sind unsere vier Eingänge. Wir können sehen, ob wir auf das Datum klicken, wir haben jetzt eine Drop-Down-Datumsauswahl. Es sollte eine Eingabetypnummer sein, die sich auf unseren beiden Textfeldern oben befindet. Zurück zu unserem Layout, nach diesen ersten vier Eingaben werden wir das jetzt ändern. Wir brauchen ein paar mehr und eine wird für die Sternebewertung sein. Dies wird ein ausgewählter Eingang mit verschiedenen Optionen von eins bis fünf sein. Wir werden dann einen Eingang mit einem Select wieder haben, was für die Sortierung des Preises von niedrig zu hoch oder hoch zu niedrig sein wird. Dann wird schließlich die Submit-Button am Ende den gleichen Eingabe-Wrapper verwenden, so.input_wrapper. Dies ist eine Auswahl mit einem Namen gleich Sternen. Denken Sie daran, dass die ausgewählte Eingabe eine Option zur Auswahl haben muss. Fügen Sie hier unsere erste Option mit einem Wert hinzu, der dann an den Server übergeben wird, sobald sie ausgewählt wurden. Es wird nur eine Zahl für die Zahl Sterne und den Text von min ein Stern sein. Wir können voran gehen und kopieren und in vier weitere Male einfügen. Der zweite ist für zwei Sterne, 3, 4 und 5 und auch das gleiche für den Text. Die letzte Eingabe, wieder diese haben den gleichen input_wrapper, so dass wir das Styling konsistent halten. Dies wird auch eine Auswahl sein, und dies ist für die Preissortierung von niedrig nach hoch oder hoch zu niedrig. Wir können den Namen der Auswahl hinzufügen zu sortieren. Fügen Sie die Option mit dem Wert eins ein. Dies wird für den Preis von niedrig bis hoch gesetzt. Wir werden auch das gleiche einfügen, aber diese Zeitoption kann einen Wert von negativem haben. Dies liegt daran, dass dies die Werte sind, die Sie beim Suchen der Mongo-Datenbank erforderlich sind, um dann die Rückgabeabfragen von hoch nach niedrig oder niedrig zu hoch zu sortieren. Das werden wir später genauer sehen. Dies kann auch geändert werden. Dieses Mal sehen wir den Preis von hoch nach niedrig. Die letzte Eingabe benötigt auch den Eingabe-Wrapper und dies ist die Schaltfläche Submit. Button mit der Art der Einreichung und dann den Text der Suche.Das sollte uns jetzt führen, um zu bilden. Lassen Sie uns auf Fehler überprüfen. Die Sternebewertung von eins bis fünf. Wir haben den Preis von niedrig zu hoch und hoch zu niedrig. Dann werde ich die Schaltfläche am unteren Rand einreichen. Wir wollen auch, dass dieses Strandbild Teil der Kopfzeile ist. Innerhalb dieses Kopfzeilenabschnitts, direkt nach dem Formular, müssen wir sicherstellen, dass dieses Bild auf der gleichen Ebene wie unsere Navigation eingerückt ist. Wenn wir nach oben scrollen und dann zu unserer Suche nav gehen und ein Auge auf diese Zeile, die wir im Texteditor sehen. Jetzt könnten wir unser Bild beginnen, also img. Die Quelle genau wie zuvor, wird gleich sein Schrägstrich Bilder, die sich innerhalb des öffentlichen Ordners, der Strand d.JPEG befindet. Dann bringen wir den Blockinhalt auf. Speichern Sie den Browser und laden Sie ihn dann neu. Jetzt haben wir das Bild in der Kopfzeile. Wir haben auch einige Bereinigungsarbeiten direkt unten zu tun , und dies ist nur die Zustimmung aus der index.pugfile. Gehen Sie zu index.pug. Dann können wir unsere Beispiele aus früheren entfernen. Wir können eine andere Liste, unsere Links und Array verschieben . Wir brauchen das Bild nicht. Wir brauchen weder den Text noch den Titel. Lassen Sie uns einfach die verlängerten Layouts und den Blockinhalt an Ort und Stelle und aus zum Browser. Jetzt haben wir nur den Header-Inhalt aus unserer Layoutdatei. Da gehen wir. Es gibt unsere Header-Inhalte jetzt an Ort und Stelle. Als nächstes betrachten wir die Verwendung von Mix-Ins, die eine gute Möglichkeit sind, den gleichen Code in mehreren Vorlagen wiederzuverwenden. 14. Mixins: Eines der Dinge, die wir normalerweise beim Codieren vermeiden wollen, ist die Wiederholung. Wenn wir denselben Code mehr als einmal wiederverwenden, ist es oft sinnvoll, Dinge etwas anders zu machen. Zum Glück gibt uns Vue die Möglichkeit, das sogenannte Mixins zu verwenden. Wenn wir uns die fertige Version hier ansehen. Nehmen Sie unsere Hotels hier zum Beispiel auf der Homepage. Die gleiche Hotelstruktur, die Sie gerade hier sehen. Auch das Layout wird verwendet, wenn wir ein Suchwerkzeug durchführen. Hier haben wir unsere gelisteten Hotels, die einem gleichen Muster folgen. Wenn Sie eine Suche durchführen und alle Felder direkt hier ausfüllen, drücken Sie die Suche. Wo Sie unsere Suchergebnisse sehen, folgen Sie einem ähnlichen Layout und Muster wie unsere Hotels auf der Homepage. Dies ist ein guter Anwendungsfall für ein Mixins, obwohl die Hoteldaten unterschiedlich sind, wie die Beschreibung und auch der Titel, können wir Teile der Mixins dynamisch machen. Es ist wirklich flexibel zu bedienen. Oben in der Indexpunkt-Mops-Datei innerhalb von Visual Studio Code, lassen Sie uns beginnen, indem Sie die Hotelinformationen hinzufügen, die wir beginnen müssen. Beginnend mit den Wrapper und dann Link zu allen Hotels. Haben Sie nur Blockinhalte, stellen Sie sicher, dass Sie dies beabsichtigt haben. Dann können wir unser äußeres div hinzufügen. Äußerer Unterstrich Wrapper. Drinnen wollen wir auch einen zweiten Wrapper für jedes einzelne Hotel haben. Hotel-Unterstriche Wrapper. Dann die h2 der Hotels. Diese Rubrik der Ebene zwei wird auch eine Verbindung haben. Kurz danach werden wir unseren Link hinzufügen, der zu allen Hotels verlinken wird, die verfügbar sind. Fügen Sie eine href, die wird zu verknüpfen, um Schrägstrich alle. Dann in Klammern einen Text von „ Alle sehen “ Sie gehen, um dies zu speichern und dann zum Browser auf der Homepage zu gehen und dann zu aktualisieren. Unten unten haben wir unseren Hoteltitel und dann haben wir einen Link, den wir später verdrahten , um alle verfügbaren Hotels in der Datenbank zu sehen. Der Grund, warum wir diesen Link haben, um alle Hotels zu sehen, ist, weil die Hotels, die auf der Homepage angezeigt werden, nur auf neun zufällige Hotels beschränkt werden , die aus der Datenbank gezogen werden. Dies ist so, dass die Homepage nicht zu überfüllt wird, wenn wir viele Hotels in unserer Datenbank haben. Jetzt gehen Sie weiter und fügen Sie ein Dummy-Hotel hinzu. Sie können sehen, wie das aussieht. Nach unseren Links und auf der gleichen Ebene wie unsere h2, können wir ein Hotel Wrapper hinzufügen, so dot hotel nest. Hier drinnen werden wir ein paar verschiedene Abschnitte haben. Der erste wird für das Hotelbild sein. Hotel img. Dies wird der Abschnitt sein, der auf der linken Seite erscheinen wird und es wird ein Bild des Hotels haben , das wir dann auf die vollständige Hotelbeschreibung verlinken. Wir brauchen eine Verbindung mit der href. Wir können dies vorerst leer lassen, weil diese Daten dynamisch sein werden und sie mit dem aktuellen Hotel verknüpfen, das wir betrachten. Danach werden wir ein Bild hinzufügen, das das Hauptbild des Hotels ist und wir könnten jetzt einfach ein Dummy-Bild hinzufügen. Schrägstrich Bilder vorwärts Schrägstrich Hotels. Dann können wir ein beliebiges Hotel aus unserem öffentlichen Ordner auswählen. Lassen Sie uns Hotels nach unten fallen und Sie können eines dieser Bilder von dort auswählen. Ich werde nur für Hotel ein Punkt JPEG gehen, und genau wie dieser Link oben, wird dies auch dynamisch sein und die Informationen werden aus der Datenbank gezogen und dann können wir das richtige Bild greifen. Nach diesem Hotelbild Abschnitt, lassen Sie uns einen neuen Abschnitt hinzufügen, der von einem div namens Hotelunterstrich Info umgeben ist. Dies enthält Informationen über das Hotel, wie den Hotelnamen, die Sternebewertung, das Land und auch den Preis pro Nacht. Der Hotelname wird auch ein Link wie dieses Bild sein, auch auf die vollständige Hotelansicht verweist, die eine erweiterte Beschreibung zeigt. Fügen Sie unseren umgebenden Link vorerst mit einem leeren href hinzu. Unser Titel des Hotels wird in einem h3-Element gehen. Wir können einen Dummy-Text von Hotel eins hinzufügen. Eine horizontale Regel trennt dann den Titel von den restlichen Informationen. Jetzt ist es nur ein Fall, einige p-Elemente hinzuzufügen. Die erste ist für die Sternebewertung. Wir können es so einstellen, dass wir jetzt alles haben, was wir wollen. Lass uns für vier gehen. Das Land: Jamaika. Dann endlich die Kosten pro Nacht. Denken Sie daran, dass dies nur einige Dummy-Daten sind, damit wir die Struktur sehen können. Dann schauen wir mal, wie das aussieht. Da ist unser Bildbereich oben, und dann unsere Hotelinfo mit dem Namen, Sternebewertung, dem Land und auch dem Preis. Großartig. Wir haben jetzt ein Hotel auf der Startseite. Wir müssen auch eine Ansicht erstellen, um zu Ihnen zu verlinken, wenn der Benutzer auf diesen alle Hotels Link klickt. Lassen Sie uns zu Visual Studio gehen, öffnen Sie die Seitenleiste, und dann innerhalb der Ansichten können wir unsere neue Ansicht erstellen, die alle Unterstriche Hotels dot Mops genannt wird . Innerhalb dieser Vorlage müssen wir auch Layout erweitern. Wir müssen auch Blockinhalte hinzufügen. Jetzt, wie Sie eine ähnliche Ansicht wie das Hotel von der Startseite zu teilen. Wenn wir zum Index Punkt Mops gehen und es wird den ganzen Weg von den Kosten pro Nacht bis zum Hotel kopieren . Dies ist das individuelle Hotel div. Gehen Sie zu allen Hotels und dann können wir unseren Wrapper hinzufügen. So dot Hotel Unterstrich Wrapper, Einzug in eine Ebene und dann können wir in den Code aus dem letzten Video einfügen. Stellen Sie sicher, dass dies nur in einer Ebene eingerückt ist und stellen Sie sicher, dass unsere alle Hotels Dot Mops Datei gespeichert ist. Wenn wir auf unsere Homepage gehen, wir jetzt nicht in der Lage sein, die Ansicht unten ganz unten zu sehen. Es liegt daran, dass wir das Routing noch nicht eingerichtet haben, um diesen Schrägstrich alle zu behandeln. Aber Sie können bereits sehen, dass wir den gleichen Hotelcode wiederholt haben, sowohl innerhalb der alle Hotels Vorlage als auch innerhalb des Index Dot Mops. Jetzt ist unsere Gelegenheit, unseren Code zu reduzieren, indem wir dieses Hotel in ein Mixin innerhalb des Views Ordners innerhalb der Seitenleiste verschieben. Lassen Sie uns einen neuen Ordner namens mixins erstellen. In unserem Mixins-Ordner werde ich eine neue Datei erstellen, die Unterstrich Hotel Dot Mops genannt wird und dies wird die Datei für unser Mixin sein. Ich weiß, wir würden gerne einen Mixin-Namen mit einem Unterstrich beginnen, aber das liegt ganz an dir. Wir beginnen mit dem mixin Schlüsselwort gefolgt von einem Namen, den wir diesem mixin geben möchten. Mixin Hotel dann können wir gehen und kopieren über den Hotelcode. Wir haben bereits in unserem Index Dot Mops. Wir haben dieses Hotel den ganzen Weg hinunter zu unserer Sternebewertung und Kosten pro Nacht. Kopieren Sie das. Dann, wenn wir zu unserem Mixin gehen, das unterstrichen Hotel ist. Fügen Sie dies ein und stellen Sie sicher, dass dies korrekt eingerückt ist. Eine Ebene und dann eine weitere Ebene für unser Bild und unsere Informationen. Speichern Sie diese Datei und das ist alles, was wir tun müssen, um unser Mixin zu erstellen. Nun, Index Dot Mops Datei, müssen wir dann diese Mixin Datei, die wir gerade erstellt. Nach erweitert Layout. Wir können auch unser Mixin hinzufügen, indem wir den Dateipfad hinzufügen. Mixins, das ist der Ordnername, Schrägstrich Unterstrich Hotel. Wir müssen die Punkt-Mops-Erweiterung nicht hinzufügen. Dann müssen wir den Hotelcode entfernen und ihn dann durch den Namen ersetzen, den wir dem Mixin gegeben haben. Schneiden oder löschen Sie diesen Hotelbereich ganz unten und dann fügen wir unser Mixin mit Plus-Hotel hinzu. Dieser Hotelname ist der Name, den wir dem Mixin in der Datei gegeben haben. Unterstrich Hotel Dot Mops. Dies ist ein Name, den Sie oben setzen. Wenn wir nun diese speichern und dann über auf die Indexseite durch Klicken auf das Logo und ich scrollen nach unten, können Sie sehen, dass wir ein Problem mit den Einrückungen haben. Lassen Sie uns gehen und überprüfen Sie dies und das ist ein Index Dot Mops, über zu unserem Index Dot Mops, und es sieht so aus, als ob dies nicht ganz mit dieser Linie aufgereiht ist. Diese kleinen Fehler sind Dinge, auf die wir mit der Einrückung achten müssen. Stellen Sie sicher, dass alles korrekt funktioniert. Lassen Sie uns versuchen, das neu zu laden. Da ist unser Hotel wieder auf der Homepage. Aber dieses Mal hat sich von einem Mixin gezogen. Jetzt können wir das gleiche mit der alle Hotels Seite innerhalb der alle Hotels Dot Mops Datei tun. Wir können das Mixin auch auf die gleiche Weise wie der Index einbeziehen. Nach unserer extend-Deklaration können wir unsere mixin, die wiederum der Dateipfad von mixins ist, können wir unsere mixin, die wiederum der Dateipfad von mixins ist,Schrägstrich unterstrichen Hotel. Jetzt können wir diesen Hotelcode von dot hotel bis auf die Kosten pro Nacht ersetzen. Dann ersetzen Sie dies mit dem Mixin mit plus Hotel. Jetzt haben wir einen Codeabschnitt aus zwei Dateien ersetzt und zu einem Mixin hinzugefügt. Wir werden bald wieder zu mixin kommen, indem wir auch Daten über jedes Hotel in der Datenbank an sie weitergeben . Zusammen mit dem Erstellen von mehr Mixins für Sie, wie wir gehen. Unser Code ist jetzt etwas kürzer, indem er diesen einschließt und er wird auch noch ein paar Mal in diesem Projekt verwendet werden. Als Nächstes gehen wir zum Routing über und wie wir es verwenden können, um zwischen Seiten in unserer Anwendung zu wechseln. 15. Grundlegendes Routing: Wenn wir gehen über Visual Studio Code, und im Moment, wenn Sie innerhalb des Routenordners gehen, und klicken Sie dann auf die index.js, wir haben nur eine Route derzeit eingerichtet, und dies ist für die Homepage. Jetzt werden wir uns ansehen, wie Sie weitere Routen hinzufügen können und ob Routing es uns erlaubt, zu handhaben, was passiert, wenn eine URL besucht wird. Zuerst werde ich nicht die Datei users.js verwenden, die mit dem Express-Generator enthalten ist. So können wir nach unten gehen und users.js löschen, so dass wir dies aus unserem Projekt löschen können. Sie dann innerhalb der app.js KlickenSie dann innerhalb der app.jsauf die Hauptdatei hier. Wir haben auch zwei Verweise auf die Datei dieses Benutzers, die wir auch löschen können. Zuallererst können wir diese Variable entfernen, die auf die Routen des Benutzers verweist. Löschen Sie das also und lassen Sie nur unsere Haupt-Indexdatei übrig. Dann ein wenig weiter unten, werden wir eine app.use haben, die setzt wir den Router dieses Benutzers auf dem Dateipfad des Benutzers verwenden wollen , nur hier wir. So können wir das auch entfernen. Jetzt zurück zu unserem Router index.js Datei. Lassen Sie uns einige dieser Registerkarten schließen. Am Anfang dieser Datei haben wir zwei Variablen. Wir haben hier eine Express-Variable und auch eine Routenvariable. Wir haben diese, so dass wir die Router-Funktionalität verwenden können, die mit Express kommt. Zuallererst benötigen wir Express, das ein Knotenpaket ist und sich innerhalb des Knotenmodule-Ordners befindet. Wenn wir Pakete innerhalb der Knotenmodule benötigen, die gerade hier sind, müssen wir sie nur durch den Modulnamen referenzieren. Wenn wir eine der Datei benötigen, die sich nicht innerhalb des Knotenmodule-Ordners befindet, müssen wir den vollständigen Dateipfad vor dem Namen hinzufügen. Nachdem wir unsere Express-Variable gesetzt haben, setzen wir dann auf Öffnen der Express-Router-Instanz und speichern sie in einer Router-Variable. Diese Router-Variable wird auch hier unten verwendet, und auch alle zukünftigen Routen. Wir benutzen.get hier, weil wir eine get-Anfrage behandeln. Denken Sie daran, wenn ein Benutzer eine Seite im Browser besucht, dies ist eine Get-Anfrage. Im letzten Video haben wir einen Link hinzugefügt, um Schrägstrich alle weiterzuleiten. Wir haben dies in unserer index.pug-Vorlage hinzugefügt, nur hier. Dies sollte einen Link zu allen Hotels zur Verfügung stellen. Aber wir haben die Route noch nicht gehandhabt. Wir gehen auf die Indexseite und wählen diesen Link aus. Wir sehen, wir haben es gemacht, um Schrägstrich alle vorwärts, aber unten unten haben wir eine Nachricht von Not_Found. Wir sehen den gesamten Header-Inhalt nur ein wenig noch, weil dieser Inhalt zur Hauptlayoutdatei hinzugefügt wurde. So können wir jetzt voran gehen und schreiben Sie unsere eigene Route , um den Schrägstrich alle Hotels Routen zu behandeln. Also zurück in der index.js, wo wir alle unsere Routen behandeln werden, können wir wie oben mit Router beginnen und das ist eine Get-Anfrage, also verwenden.get. Hier drinnen wollen wir, dass dies auf den Schrägstrich alle Routen und andere Funktion als der zweite Parameter angewendet wird. Also Funktion, die die Anfrage und auch die Antwortobjekte übernimmt . Diese beiden Variablennamen können alles sein, was Sie bevorzugen. Öffnen Sie dann die geschweiften Klammern und fügen Sie am Ende ein Semikolon hinzu. Request ist ein Objekt, das alle Informationen aus der HTTP-Anforderung enthält. Als Beispiel werden wir dies bald verwenden, um auf Daten innerhalb eines Formulars zuzugreifen, das zusammen mit der Anfrage übergeben wird. Antwort, auf der anderen Seite, ist das, was wir zurücksenden wollen, wenn wir eine Anfrage erhalten. Also Anfrage ist die Daten, die in den Server kommen, und dann Antwort ist eine Antwort vom Server. Wenn Sie einen Blick über Out-of-Home-Routen, Wir haben res.rendern eine Seitenvorlage als Antwort vom Server. Wir haben uns auch früher res.send angeschaut. Hier können wir auch unsere alle Hotels Vorlage machen, die wir gerade hier erstellt haben. Also innerhalb von router.gets/alles, was wir sagen können, res.render, übergeben Sie unsere Vorlagen von all_hotels. Dann können wir als Objekt unseren Titel aller Hotels übergeben. Das Semikolon am Ende hier. Jetzt können wir dies testen, indem wir zum Browser gehen, „Speichern“ drücken und dann aktualisieren. Stellen Sie sicher, dass Sie nur vorgefahren/alle Routen und scrollen Sie dann nach unten. Jetzt können wir dieses Hotel sehen, das wir im letzten Video als Mischung hinzugefügt haben. Lassen Sie uns dies auch noch einmal testen, indem Sie auf die Homepage gehen, auf das „Logo“ klicken, auf „Alle sehen“ klicken, und wieder einmal sehen wir, dass dies noch funktioniert. So haben wir jetzt zwei Routen an Ort und Stelle. Eines für alle Hotels und eines für die Homepage. Dies ist eine grundlegende Einführung in den Umgang mit Routen mit Express. Im nächsten Video werden wir uns die Übergabe von Daten für die URL ansehen, wenn wir verdeckte Routen Parameter. 16. Routing-Parameter: Eines der Dinge, mit denen wir uns beim Routing beschäftigen müssen, ist, dass wir nicht immer wissen, was die genaue URL sein wird. Was ich meine, ist, wenn wir uns die Route eines Benutzers vorstellen, jeder Benutzer hat eine eindeutige Benutzer-ID. Dies könnte etwas wie unser localhost oder unsere Website-URL, Schrägstrich Benutzer sein. Dann Schrägstrich einen Benutzernamen, der so ziemlich alles sein könnte. Dieser Benutzerbereich, den wir gerade hier haben, wird dem Entwickler wahrscheinlich nicht im Voraus bekannt sein. Dieser Abschnitt ist etwas, das wir vorher behandeln müssen. Dazu können wir Routenparameter verwenden, um eine dynamische Segmente in der URL zu erstellen. Wenn wir auf die index.js gehen, die alle unsere Routen behandelt, lassen Sie uns beginnen, indem wir unseren Schrägstrich alle Routen im letzten Video duplizieren. Kopieren Sie diesen Abschnitt und fügen Sie ihn dann unten hinzu. Wir können dann Express Router mitteilen, welche Teile der URL wir dynamisch sein wollen. Nach Schrägstrich alle, wir können dann voran gehen und Schrägstrich hinzufügen und dann eine dynamische Segmente mit einem Doppelpunkt erstellen. Dann einen Namen, den wir diesem Abschnitt geben wollen. Dieser Name kann alles sein, was wir wählen. Dann innerhalb unserer Funktion direkt unten, können wir dann auf die Namensdaten von unserer URL zugreifen. Wir verwenden das Anforderungsobjekt. Denken Sie daran, dass wir gesagt haben, dass dies Informationen von den HTTP-Anfragen enthält. Zunächst können wir auf die Anforderungsobjekte zugreifen, then.params auf die Daten in den URL-Parametern zuzugreifen, gefolgt von dieser Namensvariablen wurden nach dem Doppelpunkt hinzugefügt. Also anfragen.params.name. Dann, wenn wir dies innerhalb einer Konstanz gesehen, so const Name ist gleich unseren Parametern. Diese Daten können auch an die Vorlagen weitergegeben werden, die zusammen mit dem Seitentitel verwendet werden sollen. Sie nach dem Titel aller Hotels ein Komma hinzu. Dann können wir auch in diesem Namen Daten übergeben. Diese Namensdaten werden zusammen mit diesem Namen an alle Hotels Templates weitergegeben. Klicken Sie also auf unsere alle hotels.pug Datei. Dann kann auf diese Variable einfach in der Vorlage zugegriffen werden, indem nur auf den Namen verwiesen wird. Unten am Ende der Datei entspricht p unserer Namensvariablen. Dann rüber zum Browser. Nun, wenn wir gehen, um Schrägstrich Benutzer und dann Schrägstrich vorwärts, können wir einen beliebigen Namen in hier hinzufügen, drücken Sie Enter. In der Tat war dies alles eine Erhöhung und Hit Enter. Unten unten sehen wir jetzt, ich würde Chris nennen, den wir hineingegangen sind. Wir können dies mit allem, was wir hinzufügen möchten, noch einmal versuchen. Diese Daten werden dann von unserer URL erfasst, die in den request.params-Objekten gespeichert ist. Dann können wir übergeben ist jetzt auf unsere Vorlage in irgendeiner Weise zu verwenden, die wir wählen. Wir können auch so viele dynamische Segmente hinzufügen, wie wir in der URL benötigen. Anstatt nur eines in index.js zu haben, genau so. Wir können dieses dynamische Segment auch in jedem Abschnitt hinzufügen, den wir wollten. Wir könnten auch das Alter erfassen und es in einer Altersvariablen speichern. Aber das hängt alles davon ab, welche Art von Website Sie erstellen. Eine andere Sache, die wir auch tun können, wenn wir nicht wollen, um die Daten innerhalb der Routen zu greifen, wir können auch einfach einen Stern hinzufügen. Genau so könnten wir einen Stern hinzufügen und dann diese Route, nur hier, all diese Funktion wird dann jedes Mal ausgeführt, wenn eine Route folgt diesem Schrägstrich alle, und dann Schrägstrich alle Daten danach. Dieser Stern kann in jedem Abschnitt der URL platziert werden, die Sie wollen. Dies ist nützlich für die Handhabung unserer Benutzernamen, auch wenn wir die tatsächlichen Daten nicht erfassen und in einer Variablen speichern wollten. Ich werde jetzt diesen Code aus dem Video entfernen. innerhalb aller Routen Lassen Sie unsinnerhalb aller Routenden Abschnitt router.get entfernen, da wir dies für dieses Projekt nicht benötigen. Dann alle hotels.pug, alles, was wir entfernen müssen, ist p gleich Name, und stellen Sie dieses Feld wieder her, wie es war. Aber wir werden einige Zeit später in diesem Projekt auf Routenparameter zurückkommen, wo wir alle Hotel-IDs zusammen mit Buchungsinformationen übergeben werden. 17. MVC-Muster: Wir werden dieses Projekt mit dem strukturieren, was als MVC-Muster bekannt ist. MVC steht für Model View Controller und es ist im Grunde eine Möglichkeit, unsere Logik in verschiedene Teile zu trennen. Am oberen Rand des Diagramms sehen wir das Modell, das Modell definiert, wie unsere Daten strukturiert werden sollen. Als Beispiel werden unsere Hotelinformationen ein Modell haben und dieses Modell wird in diesem Hotel bleiben, dass jedes Hotel einen Namen haben muss. Sein Name muss vorhanden sein, und auch eine Schnur, die sich nicht mehr auf den Mantel Islam bezieht. Auch unser Hotelmodell muss eine Beschreibung, ein Bild, einen Preis und so weiter haben. Weiter oben und wahrscheinlich am leichtesten zu greifen ist die Aussicht. Die Ansicht, die, wie es klingt, ist im Grunde die Benutzeroberfläche. Wir haben dies bereits in dem Abschnitt angesprochen, in dem wir eine Seitenvorlagen erstellt haben , so dass dies ziemlich einfach sein sollte. Dann gibt es den Controller. Dieser Controller kann die Ansicht aktualisieren oder Daten an das Modell senden. Eine typische Verwendung für einen Controller in unserem Projekt besteht darin, unser Hotelmodell nach Übereinstimmungen basierend auf einem Land zu suchen , dann können seine Daten dann an die Vorlage oder an die Ansicht übergeben werden. Wir haben tatsächlich schon etwas Ähnliches im letzten Video gemacht, wo wir uns die Routenparameter angeschaut haben. Anstelle des Routenindex oder der js-Datei verwenden wir einen Controller, um den Namen von der URL zu erhalten, dann haben wir diesen Namen an die Ansicht übergeben, die auf der Homepage angezeigt wird. Wir werden auch den Controller verwenden, um andere Dinge zu tun, wie beispielsweise die Formularüberprüfung, wenn sich ein Benutzer anmeldet, bevor wir diese Daten an das Benutzermodell übertragen. Dies ist ein Muster, das für den Rest dieser Projekte folgen wird. Es ist schön strukturiert und organisiert zu halten. Es mag ein wenig verwirrend sein zu beginnen, aber wir werden viel Übung bekommen, und es wird bald klar werden. Im nächsten Video werden wir diesen Trennungsprozess starten , indem wir unsere Controller erstellen. 18. Verwendung von Controllern: Im Moment behandeln wir die gesamte Logik innerhalb dieser Router index.js Datei. Wir navigieren in eine bestimmte Route und dann wird die gesamte Logik innerhalb dieser Funktion behandelt und auch diese, die unten ist. Dies funktioniert gut für kleine Anwendungen, aber wir werden diese Art von Setup bald übersteigen. Ich werde diese Logik innerhalb trennen und einen Controller-Ordner im Stammverzeichnis aller Projekte erstellen. Lassen Sie uns zur Seitenleiste gehen und einen neuen Ordner namens Controller erstellen. Stellen Sie sicher, dass dies auf der gleichen Ebene ist wie alle Ebenenordner, z. B. die bin und die Knotenmodule. Im Inneren können wir eine neue JavaScript-Datei für jeden Controller hinzufügen , den Sie erstellen möchten. Lassen Sie uns auf Controller klicken und dann eine neue Datei erstellen. Ich werde einen separaten Controller für die hotelbezogene Logik erstellen. Dann eine später für die Benutzer, um die Dinge organisiert zu halten. Beginnen wir mit der Erstellung von Hotel controller.js. Controller mit einem Großbuchstaben C und drücken Sie dann „Enter“. Diese Datei wird eine Reihe von Funktionen sein und wir werden im Grunde diesen Funktionsbereich von unserem Router auslagern. Wir nehmen diese Logik, setzen sie in unseren Controller, und dann verweist sie auf innerhalb unseres Routers. Beginnen wir in unserem Hotel controller.js und beginnen mit A-Exporte. Dies ermöglicht es, dass dieser Code in anderen Teilen unserer Anwendung verfügbar ist. Wir geben dieser exportierten Funktion dann einen Namen unserer Wahl. Versuchen Sie, es aber beschreibend zu halten, damit wir wissen, was jeder tun wird. Nennen wir dies die Homepage, und setzen Sie diese dann auf eine Funktion. Dies ist eine Funktion, die die Request- und Response-Objekte übernimmt. Fügen wir diese hinzu, so dass wir vollen Zugriff auf sie innerhalb unserer Funktion haben. Wenn wir dann zu unserer index.js gehen, können wir dann das res.render von unseren Home-Routen ausschneiden und es dann zu unserem Controller hinzufügen und jetzt wäre auch ein guter Zeitpunkt, um den Seitentitel zu ändern. Lassen Sie uns das auf „Lasst uns reisen“ setzen. Wir haben jetzt unsere Logik getrennt, so dass wir jetzt zu unseren Routern index.js Datei gehen können. Wir können diese Funktion nur in den ersten Routen verlassen entfernen und dann müssen wir unsere Hostzelle controller.homepage referenzieren. Lassen Sie uns hotel controller.homepage hinzufügen und geben Sie dann, dass ein Speichern. Wenn wir nun zum Browser gehen und dann auf „Reload“ klicken und zur Homepage gehen, sehen wir nun eine Meldung, dass die Website nicht erreichbar ist. Wenn wir zu Visual Studio gehen und dann das Terminal öffnen, können wir sehen, dass die App zerquetscht wurde. Dies liegt daran, dass wir diese Hotel-Controller-Datei benötigen, bevor wir darauf zugreifen können. Derzeit versuchen wir, auf den Hotelcontroller zuzugreifen, aber wir haben diese Datei noch nicht importiert. Um dies zu tun, lassen Sie uns an den Anfang unserer Datei gehen und dann können wir einen Kommentar hinzufügen. Also Controller benötigen und dann eine Konstante einrichten, so const Hotelcontroller, die diesem Namen nur hier entspricht und dann können wir die Datei benötigen. Wir müssen den Dateipfad hinzufügen, da dies nicht innerhalb des Knotenmodule-Ordners ist. Dies befindet sich innerhalb des Controller-Ordners. Also Controller, Schrägstrich Hotel-Controller und jetzt drücken Sie „Speichern“. Wir sollten jetzt sehen, dass die App neu geladen wurde. Wir haben jetzt den grünen Text. Über den Browser, und die App funktioniert jetzt wieder in. Dann können wir das Gleiche mit der gesamten Hotelroute auch machen. Lassen Sie uns zuerst zum Hotelcontroller gehen und das erstellen. So wie zuvor, können wir sagen, exports.listallhotels. Außer der E-Funktion, die die Anfrage, die Antwort und dann zu einem Router übernimmt. Wir können die res.render von diesen nehmen, Schrägstrich alle. Fügen Sie dies in, und dann referenzieren Funktion innerhalb unseres Routers. Entfernen Sie also die Funktion von vorher. Wieder wollen wir die Hotel-Controller-Datei. Aber dieses Mal wollen wir alle Hotels auflisten. Versuchen wir nun diesen Router im Browser. Also die Heimroute Schrägstrich alle, scrollen Sie nach unten und das funktioniert immer noch. So haben wir im Moment nicht viel gewonnen, indem wir separate Controller haben. Aber diese Controller werden bald komplexer werden. Vor allem, wenn wir anfangen, mit Datenbanken zu arbeiten und die Ansichten zu erhalten, zusammen mit der Überprüfung aller Benutzerdaten für die Validierung. Es macht Sinn, Dinge von Anfang an zu trennen, damit die Dinge nicht zu chaotisch werden, wenn unser Projekt wächst. 19. Verwendung von Middleware: Middleware ist ein wirklich wichtiges Konzept zu lernen, und es wird ziemlich stark beim Erstellen von Express-Apps verwendet. Während wir Middleware für seine Projekte verwenden werden, wollte ich Ihnen nur eine kurze Einführung geben, so dass wir zumindest die Grundlagen verstehen. Wenn wir zu Visual Studio gehen, dann öffnen Sie unseren Hotelcontroller, wir haben die Anfrage und Antwort Objekte für jeden Router. Anfrage ist die Daten, die eingehen und Antwort ist die Daten, die vom Server zurückgegeben wird. Wir können Middleware dazwischen nutzen, um unsere Daten grundsätzlich zu ändern oder etwas damit zu tun. Grundsätzlich verhält sich eine Middleware wie eine Reihe von Funktionen, die wir durchlaufen. Ein Beispiel für seine Verwendung in unserem Projekt, wird sein, wenn sich ein Benutzer anmeldet. In dieser Datei hotelController.js möchte ich Ihnen ein kurzes Beispiel zeigen und diese Beispiele dienen nur zu Demonstrationszwecken. Du musst nicht mitmachen, wenn du es nicht willst. Lassen Sie uns etwas mehr Platz machen und ich werde zwei weitere Funktionen erstellen. Exportiert, Anmeldung, Übergabe der Anforderungs- und Antwortobjekte. Der Registrierungsabschnitt wird die Datenvalidierung behandeln. Dies wird alle Benutzerinformationen validieren, wie es eingeht dann wird diese zweite die Funktionalität sein, um sich anzumelden. exports.login, übergeben Sie Ihre Anfrage und Antwort und dies wird die Anmeldung zu behandeln. Nehmen wir an, wir möchten die Funktionalität haben, um zuerst den Benutzer anzumelden. Der Anmeldebereich validiert auch die Benutzerdaten und folgt dann per Login, der Benutzer in. Dies ist in der Regel die Funktionalität, die wir wollen. Wenn wir uns für neue Websites anmelden, möchten wir oft sofort eingeloggt sein. Der gesamte Code, um beide Abschnitte zu behandeln , könnte innerhalb eines einzigen Controllers erfolgen. Aber für diesen Fall macht es Sinn, die Dinge in separate Aktionen aufzuteilen. Denn wir möchten uns nicht nur anmelden und sich dann sofort anmelden, sondern auch die Funktionalität für diesen Login getrennt sein. Gerade wenn ein Benutzer zurückgekehrt ist und sich dann nur anmelden möchte. Vermeiden wir, denselben Login-Code mehr als einmal zu wiederholen. Woher weiß Express, dass wir die Anmeldefunktion ausführen möchten, gefolgt von der Anmeldung? Zuallererst müssen wir ein drittes Argument an unsere Funktion übergeben. Normalerweise rufen wir diese Variable als nächstes auf, wobei ihre Bedürfnisse als nächstes innerhalb unseres Funktionskörpers aufrufen, wenn wir bereit sind, zum nächsten Stück Middleware weiterzugehen, also rufen wir hier drinnen auf. Wenn wir wollen, dass es die Kette runter auf das nächste Stück Middleware geht. Es gibt noch eine Sache zu tun. Obwohl wir als nächstes innerhalb dieser Funktion aufrufen, weiß es nicht automatisch, was das nächste Stück Middleware ist. Alles, was wir wissen, dass wir zum Login weitergehen möchten, weiß Express dies standardmäßig nicht. Wir tun dies, indem wir die Reihenfolge der Middleware innerhalb der Routerdatei an den Router index.js deklarieren . Wir können dann ein neues Beispiel Routen einrichten, wir haben router.gets. Lassen Sie uns eine Anmeldung Routen mit dem Schrägstrich erstellen und dann können wir unsere Controller hinzufügen. Die HotelController.Anmelden. Wenn Sie nur diesen Anmeldebereich verwenden möchten, würden wir einfach eine wie diese verwenden. Wir können mehr als eine hinzufügen. Wir können dann mit HotelController.login nachgehen, und wir können so viele von diesen übergeben, wie Sie verwenden möchten und dann diese in der Reihenfolge ausgeführt werden, wobei jeder den nächsten Aufruf innerhalb der Funktion erfordert. Zunächst werden wir die Anmeldefunktion verwenden, dann als nächstes übergeben wir sie an die Login-Funktion und da es sich um separate Funktionen handelt, ist dies sinnvoll, wenn wir eine Route nur für die Anmeldung erstellen möchten. Wenn wir haben, router.gets, wenn wir zu dieser Phase, wir wollen auch eine Login-Routen und dann können wir wieder verwenden HotelController.login. Jetzt verwenden wir die gleiche Login-Funktionalität ohne den gleichen Code in mehreren Funktionen zu wiederholen. Wir können sehen, dass dies funktioniert, indem wir einige Konsolenprotokolle zu allen Middleware über dem Controller hinzufügen, kurz vor dem nächsten können wir ein Konsolenprotokoll machen, und dann eine einfache Nachricht der Anmeldung Middleware, Kleinbuchstaben c, dann kopieren Sie diese dann fügen Sie dies in unserem Login hinzu. Änderungen, um Login Middleware sein, speichern Sie unsere Dateien und und über die Projekte. Wir müssen zu unseren Aufstiegsrouten gehen, die wir gerade hier aufstellen. Schrägstrich Anmeldung, an diesem Ende drücken Sie dann die Eingabetaste. Jetzt melden Sie sich nur Routen zur Konsole an und machen Sie etwas mehr Platz. Wir sehen jetzt in der Konsole unten haben wir Sign-up-Middleware genannt zuerst, was Sie erwarten würden, weil dies zuerst aufgerufen wird und der Controller dann haben wir die Login-Middleware kurz danach. Das bedeutet, dass der Router nun beide Teile unserer Middleware in der richtigen Reihenfolge durchläuft . Wenn wir aber voran gehen, und Kommentare Ton ist die nächste Funktion, speichern Sie die Datei und laden Sie den Browser auf den Anmelderouten neu. Oben in einem Terminal sehen wir nun, dass nur die Sign-up-Middleware gelaufen ist. Der Code ist zu diesem Abschnitt gerade hier gekommen, dann wurde er nicht an das nächste Stück Middleware übergeben, weil wir nicht als nächstes aufgerufen haben. Dies ist eine grundlegende Einführung in die Funktionsweise von Middleware. Ich werde diese beiden Funktionen entfernen, da wir diese in unseren Projekten nicht brauchen. Sie nur zur Demonstration und auch die beiden neuen Routen in der index.js einzurichten und überprüfen Sie dann das funktioniert in Ordnung. Gehen Sie zu den Home-Routen und wir sind jetzt wieder normal. Wir können diese Routen später laden, wenn wir zu diesem Teil der App zurückkommen. Schließlich können wir auch eine Middleware festlegen, die über die gesamte Website verwendet wird, anstatt nur eine bestimmte Route in der app.js, die die Hauptdatei ist. Klicken Sie darauf und scrollen Sie nach unten zum Abschnitt mit app.use, der gerade hier ist. Hier können Sie app.use sehen, und hier können wir jede Middleware wie Cookie-Parser einrichten , um für alle Routen zu verwenden. Im Folgenden können wir sehen, wir haben den Index Router Setup auch hier. Sowohl für diese als auch für die gesamte Middleware können wir zuerst eine Route als erstes Argument hinzufügen, um die Middleware auf diese speziellen Routen zu beschränken. Es gibt auch viele der Verwendungen für Middleware, wie Drittanbieter-Plugins, und wir werden uns diese während des gesamten Projekts genauer ansehen. 20. Wichtiges Update: mLab nun Teil von Mongo: Während wir das folgende Projekt durchlaufen, verwenden wir eine gehostete Datenbank auf einem Dienst namens mLab. mLab ist ein vollständig verwalteter Cloud-Datenbankdienst, den wir verwenden, um unsere Mongo-Datenbank zu hosten. Wie wir auf der Homepage hier sehen können, wurde mLab seitdem von Mongo selbst übernommen. Also müssen wir diesen Dienst jetzt an seiner Stelle nutzen. Der Dienst heißt Mongo Atlas und es ist ein ziemlich unkomplizierter Swap, da wir nur eine Datenbank in ähnlicher Weise einrichten und dann die Verbindungszeichenfolge in unseren Projekten verwenden . Mongo Atlas kann sich auch kostenlos anmelden und es hat auch ein kostenloses Kontingent für die Entwicklung. Lassen Sie uns also beginnen, indem wir zu mongodb.com/cloud/atlas gehen. Wenn Sie Atlas bereits verwendet haben und bereits ein Konto haben, können Sie sich einloggen. Wenn nicht, müssen Sie sich zuerst registrieren, bevor wir unseren ersten Datenbank-Cluster erstellen können. Also, wenn du dich jetzt anmelden musst, aber ich gehe runter und melde mich jetzt bei Atlas an. Sobald Sie alle eingerichtet und registriert sind, müssen wir fortfahren und einen neuen Cluster erstellen. Erstellen eines neuen Clusters kann als Teil des Registrierungsprozesses angezeigt werden. Also lasst uns weitermachen und einen neuen Cluster aufbauen, es uns ermöglicht, unsere Region oder unseren Plan auszuwählen. Es gibt einige vorkonfigurierte Optionen, und Sie können die Standardwerte unverändert belassen oder zu Ihrer nächstgelegenen Region wechseln. Also werde ich die nächsten Regionen mir auswählen. Halten Sie auch Ausschau nach dem Free Tier Label, das nicht in jedem enthalten ist. Alles andere, ich werde uns in den Verzug halten. Stellen Sie einfach sicher, dass Sie die Kosten unten unten sehen, um kostenlos zu sein. Dann können wir fortfahren und unseren Cluster erstellen, indem wir auf den grünen Button klicken. Einrichtung eines neuen Clusters kann einige Minuten in Anspruch nehmen. Also werde ich jetzt weggehen und zurückkommen, sobald das alles erledigt ist. Das ist also mein Cluster jetzt eingerichtet und der nächste Schritt besteht darin, einen neuen Benutzer zu erstellen. Wenn wir auf die Registerkarte Sicherheit gehen und dann neue Benutzer hinzufügen gehen, wird dieser Benutzer für uns selbst sein. So können wir den Atlas Admin auswählen, die eine der Optionen für die Privilegien ist. Natürlich können Sie zu einem späteren Zeitpunkt weitere Benutzer mit unterschiedlichen Berechtigungen hinzufügen . Fügen Sie dann einen Benutzernamen und ein Passwort Ihrer Wahl hinzu. Ich werde einen Benutzernamen und ein Passwort hinzufügen und dann weiter und fügen Sie unseren Benutzer hinzu. Der nächste Schritt besteht darin, die IP-Adresse unserer eigenen Computer zur Whitelist von Mongo hinzuzufügen. Dies ist eine Sicherheitsfunktion, so dass nur unserer Maschine die Berechtigung für den Zugriff auf unseren Cluster erteilt wird. Sie müssen dies möglicherweise zu einem späteren Zeitpunkt berücksichtigen wenn Sie die Anwendung für andere Dienste bereitstellen. Gehen wir also auf die Registerkarte Sicherheit und klicken Sie auf „IP-Whitelist“. IP-Adresse hinzufügen. Wir erhalten ein Pop-up und wir können bestätigen, dass wir unsere aktuelle IP-Adresse verwenden möchten , indem Sie hier auf diesen Button klicken. Dann erhalten wir die IP-Adresse hinzugefügt und dieses Feld folgt. So können wir einfach voran gehen und bestätigen. Möglicherweise müssen Sie dies ein paar Momente geben, um Setup zu erhalten , wenn Sie diesen ausstehenden Spinner nur hier sehen. Wenn Sie Mongo Atlas noch nicht benutzt haben, können wir den Inhalt unserer Datenbank überprüfen, indem Sie auf die Schaltfläche „Sammlungen“ klicken. Die Schaltfläche „Sammlungen“ befindet sich auf der Registerkarte „Übersicht“ und dann auf Sammlungen. Dies gibt uns Zugriff auf alle Sammlungen, die unsere Datenbank hat, und wir können mit unseren Daten interagieren. Fügen Sie neue Felder hinzu, fügen Sie neue Sammlungen hinzu und sehen Sie alle Informationen, die in unserer Datenbank gespeichert sind. Natürlich haben wir noch keine Daten, aber hier haben Sie Zugriff auf alle unsere Datenbankinformationen, wie alle Hotels und Benutzer, die wir in unserem Projekt speichern. Schließlich brauchen wir eine Verbindungszeichenfolge. Wenn wir zur Übersicht gehen und dann auf „Verbinden“ klicken. Die Option, die wir verwenden möchten, ist verbinden Sie Ihre Anwendung. Es gibt auch Optionen, um MongoDB Compass zu verwenden und auch mit der Mongo Shell zu verbinden. Beide verbinden Ihre Anwendung ist die, die wir für jetzt brauchen. Wir müssen auch die Treiberversion auf Version zwei ändern. Dann sehen wir unsere Verbindungszeichenfolge wird gerade hier angezeigt und wir können diese auch in die Zwischenablage kopieren. Diese Verbindungszeichenfolge ist diejenige, die wir anstelle der von mLab bereitgestellten Verbindungszeichenfolge in unserem Projekt verwenden werden. Dies wird für dieses Update getan. Halten Sie dies einfach im Browser geöffnet und Sie können es im nächsten Video verwenden , wenn wir eine Verbindung zu unserer Datenbank herstellen. Bedenken Sie auch, wenn Sie durch den Kurs gehen, müssen Sie durch diese Mongo Atlas-Umfragen gehen, um Ihre Daten zu sehen , anstatt mLab, wie ich es gelegentlich in der Klasse tun. Alles, was Sie tun müssen, um dies zu sehen, ist, klicken Sie auf den Kollektions-Button, den wir uns zuvor angesehen haben. 21. Erste Schritte mit Mongo: In diesem Projekt werden wir es mit ziemlich vielen Informationen zu tun haben. Wir erhalten Informationen darüber, wie wir Hotels haben und welche Bestellungen Sie aufgegeben haben, sowie alle Sitzungsdaten, die wir später erhalten. Natürlich müssen wir irgendwo all diese Daten speichern, und ich werde in diesem Kurs eine MongoDB-Datenbank verwenden, die wirklich beliebte Datenbank für Node-Anwendungen ist, zusammen mit vielen davon auch. MongoDB ermöglicht es uns, unsere Daten in einem JSON-ähnlichen Format zu speichern. Dies macht es wirklich einfach, mit zu arbeiten, vor allem, wenn wir JavaScript-Anwendungen verwendet haben. Wir haben bereits mit JSON-Daten gearbeitet, daher sollte dies ziemlich vertraut sein. Es erleichtert auch das Lernen von Dingen. Es gibt auch viele hilfreiche Abfragen, die es zur Verfügung stellt. Die Abfrage ist eine Suche in unserer Datenbank, und Mongo macht dies wirklich einfach. Wir haben viele verschiedene Möglichkeiten, wie wir Suchvorgänge durchführen können , um nur die genauen Daten zu erhalten, die wir benötigen. Zum Beispiel, eine der Abfragen, die wir verwenden, ist die Suche in der Datenbank mit einem Suchbegriff, den sie verwenden Enter und dann auch nach der Sternebewertung und Verfügbarkeit gefiltert, und dann schließlich die Ergebnisse in der Preisreihenfolge gesucht. Wir werden auch viele Abfragen zu Einheitenabschnitt betrachten. MongoDB ist auch kostenlos und Open Source zu. Ich werde auch eine gehostete Version in diesem Kurs verwenden, die ebenfalls kostenlos ist. Die gehostete Version wird über MLab sein, das Sie unsere MLAB.com finden können. Diese gehostete Lösung wird auch als Datenbank, als Service bezeichnet. Es ermöglicht uns im Grunde, schnell mit MongoDB in Gang zu gehen. Unsere Datenbank wird dann in den Cloud-Fotos gehostet. Sie können auch Mongo lokal einrichten, haben wir in unserer Datenbank bereits gehostet ist wirklich nützlich für später, wenn wir unsere Anwendung zu Live-Server zu sein schieben. Es speichert auch die Konfiguration. Das erste, was wir tun müssen, ist sich für ein Benutzerkonto anzumelden Wenn Sie also noch kein Konto bei mLab haben, würde ich vorschlagen, dass Sie das Video pausieren und sich dann jetzt anmelden. Ich habe bereits ein Konto bei mLab, also werde ich mich anmelden, also fügen Sie die Anmeldedaten hinzu. Sobald wir eingeloggt sind, können wir jetzt eine neue MongoDB-Bereitstellungen erstellen. Gehen Sie nach oben, und klicken Sie auf neue erstellen, dann haben wir einige Optionen zu wählen, Ich werde Amazon für den Anbieter verwenden, also klicken Sie auf diese, und dann die kostenlose Sandbox-Plan, die in Ordnung für die Entwicklung und das Lernen ist. Wählen Sie diese Option aus und wählen Sie eine Region aus. Amazon wird an mehreren Standorten auf der ganzen Welt gehostet, wir haben nur ein paar Optionen für Sandbox-Plan, so dass AWS in Ordnung sein wird. Wir können fortfahren, und wir können eine von ihnen auswählen. Dann fahren Sie noch einmal fort, und dann können wir unseren Datenbanknamen hinzufügen. Ich rufe meinen an, lass uns reisen. Fahren Sie fort. Wir können dies überprüfen und dann auf Bestellung absenden, und da gehen wir, das ist unsere Let's-Reise-Datenbank auf unserem Setup. Unsere Datenbank ist leer, daher hat sie keine Sammlungen. Nur bekommt, wenn wir darauf klicken, können wir dann einen Blick nach innen werfen. Unter der Registerkarte Sammlung sehen wir, dass wir zu diesem Zeitpunkt keine haben, und die Sammlung ist nur eine Möglichkeit, unsere Dokumente zu gruppieren, die wir speichern, als Beispiel, wir haben eine Hotelsammlung, um unsere Hoteldatensätze, eine Benutzersammlung, um speichern zugewiesenen Missbräuche und so weiter. Oben haben wir auch einen URI, den wir in unserem Projekt verwenden können, um sich mit dieser Datenbank zu verbinden. Es gibt einen Platz in diesem URI für unseren Benutzer und auch ein Passwort, also müssen wir fortfahren und dies unter der Registerkarte des Benutzers einrichten. Klicken Sie darauf und gehen Sie dann zu Datenbankbenutzer hinzufügen. Wir können einen Benutzernamen und ein Passwort hinzufügen, so werde ich nur meine Reise als Benutzername anrufen, und reiste weiter als das Passwort. Erstellen Sie unseren Benutzer, großartig. Nun haben Sie den Benutzernamen und das Passwort, um diese Leerzeichen auszufüllen. Aber zuerst gibt es noch eine Sache, die eingerichtet werden muss, und das ist Mungo. js. Wir sind frei, Mongo direkt zu verwenden, wenn Sie möchten, aber ich werde stattdessen ein Nasenpaket namens Mongoose verwenden. Mungo erlaubt uns im Grunde, unseren Daten eine Struktur zu geben, in der ein Schema genannt wird. Wenn wir direkt an Mongo schreiben, können Sie einen Fehler machen ziemlich leicht. Wenn wir nicht festlegen, wie unsere Daten sein sollen, wird Mongoose uns erlauben, festzulegen, wie unsere Daten aussehen würden. Zum Beispiel wird ein Hotelschema haben, und dies wird Felder wie einen Namen und eine Beschreibung. Wir können jetzt den Datentyp beantworten, jedes Feld sollte sein, wie eine Zeichenfolge, und auch beschränken Sie die minimalen und maximalen Zeichen sollte es sein, und auch, wenn das Feld erforderlich sein soll und so weiter. Grundsätzlich hält es uns davon ab, Dinge wie Eingabe und eine Textzeichenfolge in ein Preisfeld zu tun, das eine Zahl sein sollte. Dieses Paket ermöglicht es uns auch, unser Modell zu erstellen, das ist das Modell, über das wir gesprochen haben, als wir uns das MVC-Muster angesehen haben, angesichts unserer Daten eine gewisse Konsistenz. Lassen Sie uns voran und installieren Mongoose in unserer Anwendung. Schließen wir das Terminal mit Control C. Dann geben Sie npm i Mungo ein. Beachten Sie dieses Mal mit dem kürzeren i-Befehl, dies ist nur eine Abkürzung für die Installation und wenn funktioniert gut. Drücken Sie „Enter“ geben Sie ihm einen Moment, um von mpm zu ziehen. Ich überprüfe, ob das alles in Ordnung ist, indem ich unsere package.json öffne, und in den Abhängigkeiten wird jetzt sehen, dass wir Mongoose hier aufgelistet haben. Über eine in unserer app.js können wir nun unsere Verbindung einrichten. Wieder in der Seitenleiste können wir app.js öffnen. Dann schließen Sie das, also müssen wir zuerst unsere Verbindung einrichten. Wir müssen zuerst das Mongoose-Paket benötigen, das wir gerade importiert haben. Kurz nach unserem Import werde ich eine Konstante verwenden, und es spielt keine Rolle, ob Sie eine Konstante oder eine Variable verwenden, aber ich werde die Konstanten von nun an verwenden, also erfordern const Mongoose equals Mungo, und denken Sie daran, wenn wir ein Paket aus dem Knotenmodulordner benötigen, verweisen wir einfach auf es durch den Paketnamen, anstatt einen Dateipfad hinzuzufügen, der dazu führt. Dann können wir unsere Verbindung mit der Verbindungsmethode einrichten, also ist dies der erste Zugriff Mongoose. Scrollen Sie auf der app.set nach unten. Lassen Sie uns unsere Mungo Verbindung einrichten, so Mongoose variable.connect und öffnen Sie dann die Klammern. Innerhalb von connect können wir unseren Verbindungs-URI von mLab übergeben, also zurück zu mLab, kopieren Sie den vollständigen URI, und als String, öffnen Sie die Anführungszeichen und fügen Sie diese dann ein . Vielmehr müssen wir unseren Benutzernamen und Passwort ändern, so entfernen Sie den Benutzer und unser Benutzername war Reise und das Passwort war auf Reisen. Natürlich möchten Sie beim Umgang mit Datenbanken ein sichereres Passwort, aber das dient nur zur Demonstration. Auch haben NSURI hier drin ist nicht der beste Weg, dies zu tun, aber wir werden dies zu irgendwo geeigneter später verschieben. In der nächsten Zeile auf der Mungo. verbinden, müssen wir Mongoose setzen. Versprechen, P, das wird gleich der Global.Versprechen, P wieder. Sobald wir mit der Abfrage unserer Datenbank beginnen, müssen wir uns mit den Informationen befassen, die an uns zurückgesendet werden. In früheren Versionen von Mongoose haben wir ein Callback-basiertes Setup verwendet, aber jetzt können wir Versprechen verwenden, die viel einfacher und einfacher zu pflegen sind. Wir können Mongo so einstellen, dass die Promise-Bibliothek wie Blueband verwendet wird, wenn wir wollten, was wir als NPM-Modul bekommen können, oder ich werde es auf das globale setzen. Versprechen Sie hier, was es uns erlaubt, die nativen Promises in ES6 zu nutzen , anstatt ein anderes Knotenmodul zu installieren. Als nächstes können wir unter diesem Punkt auf Verbindungsfehler überprüfen. Wir überprüfen zuerst, wir haben eine Mongoose-Verbindung, und dann, wenn wir es tun, können wir aufrufen.on, .on ist eine Knotenmethode, die einen Ereignis-Listener hinzufügt. In unserem Fall wollen wir jetzt für alle Fehler auflisten, also Compositing Fehler als ersten Parameter, und dann als zweites Argument, eine Callback-Funktion übergeben, um diesen Fehler anzuzeigen. Lassen Sie uns eine Funktion erstellen, in der wir Fehler übergeben, die alle Fehlermeldungen an die Web-Konsole ausgeben wird. Wir tun diese Welle console.error, und kann diese error.message übergeben. Übergeben Sie unsere Nachricht an die Konsole, also lassen Sie uns dies ein sicheres und ein Semikolon an den Enden geben und dann zum Browser oder zu unserem Index und dann neu laden, und in der Tat müssen wir unser Terminal nach der Installation Mongoose neu starten, Also lassen Sie uns zum Terminal gehen und dann npm run devstart ausführen, winken Sie es zum Eintreten und laden Sie dann den Browser neu und überprüfen Sie alles, was es immer noch in Ordnung funktioniert. Wenn Sie keine Fehlermeldungen innerhalb des Visual Studio-Terminals sehen , sollte dies jetzt alles eingerichtet sein. Wenn Sie einen Fehler haben, überprüfen Sie nach Tippfehlern und überprüfen Sie auch, dass Ihre Datenbank-URI mit dem in mLab zusammen mit dem richtigen Benutzer und dem richtigen Kennwort übereinstimmt, und sobald dies funktioniert und Sie auf der Bühne sind, werden Sie jetzt gut mit der Erstellung von unser Mongoose Modell. 22. Mongoose-Modelle: Wir haben bereits ein wenig darüber gesprochen, welche Modelle, wir werden mit einem Mongoose richten unsere Modelle, und dies wird unsere Daten strukturiert halten, so dass es weniger Chancen, Chaos. Diese Modelle sind verantwortlich für die Erstellung von Daten vor dem Senden an die Datenbank zusammen mit schriftlichen Dokumenten aus der Datenbank auch. In unserem Projekt können wir damit beginnen, einen Modellordner zu erstellen, um unseren Code organisiert zu halten. Öffnen Sie die Seitenleiste und dann das Stammverzeichnis des Projekts, erstellen Sie neuen Ordner namens Models. Jetzt haben wir Modelle und unsere Ansichten und unsere Controller-Ordner und das ist das MVC-Muster, über das wir früher gesprochen haben. Dieses Modell, das wir kreieren, wird für unsere Hotels sein. Dies wird die Struktur für unseren Hotelnamen, Hotelbeschreibung, Sternebewertung usw. haben. im Ordner „Modelle“ Erstellen Sieim Ordner „Modelle“eine neue Datei, nennen Sie sie hotel.js. Da wir Mungo für unser Schema verwenden, müssen wir das Mungo Modul benötigen. Lassen Sie uns auf diese Dateien schließen und konzentriert sich auf hotel.js. Im Inneren hier schaffen wir unsere Konstante von Mungo und erfordern das Mungo Paket, Semikolon und dann können wir unser Hotelschema erstellen, so const HotelSchema, und dies ist gleich einem neuen Mongoose.Schema mit einem Kapital S. Das Schema wird Karte oder mit den Daten in unserer Datenbank übereinstimmen, daher wird das, was wir hier nicht sind, prägen, wie unsere Datenbankdaten konstruiert werden. Das Schema nimmt ein Objekt in den Klammern, wo wir anfangen können zu konstruieren, wie jedes Hotel aussehen würde. Wir brauchen einen Hotelnamen, also lassen Sie uns unser erstes Phonem von hotel_name hinzufügen. Jetzt können wir dies als Objekt einrichten, wir wollen, dass der Hotelname vom Typ ist. Dies wird eine Zeichenfolge sein, die durch Kommas getrennt ist. Wir können auch einige weitere Einschränkungen zu diesen Daten hinzufügen, wir können auch festlegen, wenn dies erforderlich sein soll, dies kann ein boolescher Wert von true oder false sein. Wenn das Feld vorhanden sein muss oder stattdessen, können wir einfach eine Zeichenfolge mit einer Nachricht hinzufügen, wenn dieses Feld fehlt, wie Hotelname erforderlich ist. Ich komme bis zum Ende. Dann können wir die maximale Anzahl von Zeichen auf 32 setzen. Dann schließlich werden wir die Trimmung so einstellen, dass sie ein boolescher Wert von true ist. Wir werden alle breiten Leerzeichen vom Anfang und Ende aus dem Feld entfernen und nur die Zeichen verlassen, die antworten. Dies ist das Schema für unseren Hotelnamen, und wir können weitergehen und eine ähnliche Einrichtung für unsere Beschreibung hinzufügen. Getrennt durch ein Komma, können wir die hotel_description fragen. Die Beschreibung sollte wieder Typ der Zeichenfolge erforderlich sein. Auch hier können wir dies auf true setzen oder stattdessen können wir eine Zeichenfolge übergeben , die zurückgegeben wird, wenn das Feld fehlt, so dass Hotelbeschreibung erforderlich ist. Wir können auch jeden weiten Raum trimmen, setzen Sie dies auf wahr. Jetzt haben wir den Hotelnamen und die Beschreibung, trennen Sie dies mit einem Komma, wir haben jetzt ein Feld für das Bild. Das Bild wird ein Name sein, also wird es eine Zeichenfolge für jetzt sein, wir werden später im Kurs zu diesem Bild zurückkommen weil es ein oder zwei Dinge sind, mit denen wir umgehen müssen, damit dies richtig funktioniert. Als nächstes haben wir die Sternebewertung, die Sternebewertung wird eine Art von Zahl sein. Wir wollen auch, dass dies erforderlich ist, wie alle anderen Felder. Wir können sagen, Hotel Sterne Bewertung erforderlich ist, fügen Sie eine gemeinsame an den Enden. Dann setzen wir den Maximalwert auf fünf, weil wir nur wollen, dass die Sternebewertung zwischen eins und fünf. Nach der Sternebewertung ist es das Land, das Land ist eine Art von String. Dies ist auch erforderlich, der Text des Landes ist erforderlich, das Komma nach erforderlich. Wir wollen auch beenden, also ist dies ein boolescher Wert von true. Das ist alles, was wir im Moment für unser Land brauchen. Nach dem Land wollen wir die Kosten pro Nacht festlegen. Kosten pro Nacht wird die Art der Nummer sein, da dies ein Preis sein wird, und auch wollen, dass dies erforderlich ist. Mit einer Reihe von Kosten pro Nacht, ist erforderlich. Die letzte Information, die wir in unserem Hotelmodell speichern möchten, ist verfügbar. Dies ist so die unbemannte prägnant, wenn dieses Hotel derzeit zum Verkauf zur Verfügung steht und dies wird ein boolescher Wert von true oder false sein. Lassen Sie uns den Typ auf boolean setzen und das einzige andere Feld, das wir benötigen, ist erforderlich, daher ist die Verfügbarkeit erforderlich. Sobald du vorangegangen bist und das alles ausgeschrieben hast, ganz unten. Das letzte, was wir tun wollen, ist, unser Modell zu exportieren, damit wir es in anderen Dateien verwenden können. Unten am unteren Rand muss einen Kommentar des Exportmodells erstellen. Wir tun dies mit Modul-Punkt-Exporten, beantworten dies auf mongoose.model, der erste Band, den wir hinzufügen möchten, ist Hotel. Hotel ist ein Name, den ich diesem Modell geben werde und durch ein Komma getrennt, wir übergeben auch das Hotelschema, das wir gerade erstellt haben. Gut, so würde unser Hotel jetzt gebaut werden. Jetzt haben wir unser Modell aufgestellt. Es bedeutet, dass niemand einfach voran gehen und irgendwelche Felder hinzufügen kann, wie sie wollen. Wir haben jetzt eine strenge Reihe von Regeln, die jedes Hotel einhalten muss. Später fügen wir ein weiteres Modell für unseren Benutzer und auch für alle Bestellungen hinzu. Wir können auch gestalten, wie sie aussehen werden. Aber im Moment bleiben wir bei den Hotels. Im nächsten Video geht es darum, dieses Modell zu verwenden, um unser neues Hoteltelefon zu erstellen, so dass wir neue Hotels in unsere Datenbank hinzufügen können. 23. Unser Hotel-Hochladeformular erstellen: Bevor wir neue Hotels in die Datenbank schieben können, müssen wir ein HTML-Formular erstellen, damit wir die Details hinzufügen können, die wir eingeben möchten. Diese formalen Teile unseres Admin-Abschnitts. Also lassen Sie uns diese Admin-Route zuerst in der index.js hinzufügen. Öffnen Sie die Seitenleiste, in die Routen und dann index.js. Ich werde auf den Grund unseres Routers gehen, nur für den Export. Lassen Sie uns einen Kommentar machen, und ich werde sagen „ADMIN Routes“. Die erste, die wir verwenden werden, ist router.get, da dies eine GET-Anfrage ist. Wir möchten, dass dies für die Schrägstrich Admin-Routen ist. Dann wollen wir unseren HotelController ausführen, ich nenne es die AdminPage, Semikolon am Ende. Wie wir mit dem roten Bereich unten sehen können, haben wir diese AdminPage noch nicht im Steuerelement, also sollte dies der nächste sein. Öffnen Sie die Seitenleiste und gehen Sie zu unserer Datei hotelController.js, und dann können wir dies direkt am unteren Rand hinzufügen. Exportiert in AdminPage, wird es gleich unserer Funktion sein, die die Anforderungs- und Antwortobjekte übernimmt. Dann innerhalb des Funktionskörpers, was wir tun werden, ist ein res.render, das wird eine Admin-Vorlage rendern, und dann in ein Optionsobjekt nehmen, wo wir den Titel übergeben werden, wie wir es zuvor getan haben. Der Titel kann einfach Admin sein und dann am Ende ein Semikolon hinzufügen. Jetzt für die admin.book-Datei, um dies anzuzeigen. Lassen Sie uns gehen und erstellen Sie diese Admin-Vorlage, öffnen Sie die Seitenleiste, in unseren Views Ordner, erstellen Sie eine neue Datei namens admin mit der Dot Mops Erweiterung. Diese Admin-Route wird ziemlich einfach sein. Im Moment werden wir nur den Titel übergeben und dann eine ungeordnete Liste erstellen. Dies wird einige Links haben, die der Administrator verwenden kann, wie die Links zu unserem neuen Hotel, um Hotels zu bearbeiten oder zu entfernen, und um alle Buchungen anzuzeigen, die vorgenommen wurden. Lassen Sie uns unser Layout erweitern. Erweitert Layout ganz oben, und ersetzen Sie dann den Inhaltsblock. Einrücken Sie es eine Ebene, die wir in unserem h2 übergeben können, was der Titel ist. Dann möchten Sie diesen Titel mit den Links mit der horizontalen Linie trennen. Diese drei Links werden eine ungeordnete Liste sein. Das erste Listenelement, innerhalb verschachtelt können wir eine für einen Link mit dem href gleich Schrägstrich admin hinzufügen, und dann Schrägstrich hinzufügen. Dies wird die Route sein, die das Hinzufügen in neuen Hotels zur Datenbank behandeln wird. Die Texte von Add new hotel. Dann machen wir das noch zwei Mal. Unser zweiter Listeneintrag ist auch ein Link. Dieser href wird gehen, um Schrägstrich admin und dann Schrägstrich bearbeiten Bindestrich entfernen. Der Text von Edit Schrägstrich Entfernen Hotel. Wir werden später darauf zurückkommen, wenn wir uns das Bearbeiten und Entfernen von Hotels ansehen. Der dritte wird wieder für später auch sein und dies wird ein Link sein, der zu einer Route verlinken wird, die Schrägstrich Admin Vorwärtsslash Bestellungen ist. Der Text von Buchungen anzeigen und geben, dass ein Speichern. Sie können testen, ob es funktioniert, indem Sie zum Browser gehen und dann die Schrägstrich Admin-Routen auschecken und dann drücken und eingeben. Wenn wir nach unten scrollen, haben wir unseren Titel Admin, der an die Vorlagen übergeben wird und dann unsere drei Links, die wir gerade erstellt haben. Wenn wir voran gehen und klicken Sie auf „Neues Hotel hinzufügen“ an der Spitze, wir sind genommen, um Schrägstrich Admin vorwärts Schrägstrich hinzufügen, die gerade hier eingerichtet wurde. Dies führt zu einem Fehler unten unten, da wir auch diese Route zusammen mit einer Seitenvorlage einrichten müssen . Zurück zu unserer Router-Datei, die index.js ist. Lassen Sie uns dies mit router.get einrichten. Dieser Router war Schrägstrich admin, Schrägstrich hinzufügen, um ein neues Hotel hinzuzufügen, und dann richten Sie unsere HotelController, und der Funktionsname von CreateHotelGet mit einem Semikolon am Ende. Vielleicht fragen Sie sich, warum wir dieses CreateHotelGet genannt haben, anstatt einfach ein Hotel zu schaffen. Ich habe Get to the end hinzugefügt, weil dies eine GET-Anfrage ist. Später wird auch eine POST-Anforderung zu dieser erstellen Hotelroute. Es macht es klarer, wenn wir zu dieser Bühne kommen. Das ist jetzt unsere Route. Wir können jetzt auf den Controller gehen, um unsere Ansicht zu rendern. Lassen Sie uns unten auf „hotelController.js“ klicken. Lass uns das aufstellen. Es war exports.createHotelGet richtet unsere Funktion mit den Request- und Response-Objekten. Dies wird einfach eine Ansicht rendern. Wir tun dies mit res.render, genau wie wir es mit der AdminPage getan haben. Die Vorlage, die wir erstellen werden, wird unterstrichen Hotel hinzufügen, und dann in den Objekten übergeben, die den Titel Add new hotel und ein Semikolon am Ende sendet. Genau wie wir diese Admin zwei haben wir noch nicht erstellt diese Add Hotel Seite. Gehen Sie in die Seitenleiste, gehen Sie zu den Ansichten, und erstellen Sie eine neue Datei, genannt add underscore hotel mit der Punkt-Steckererweiterung. Jetzt ist es ein Fall, dieses Formular zu machen, das verwendet wird, um das Hotel in unsere Datenbank einzureichen. Dies muss unser Layout erweitern, alle Dateien auswählen und dann Inhalte blockieren. Kurz bevor wir unser Formular hinzufügen, werde ich einen Link oben auf der Seite hinzufügen. Dieser Link wird zurück zum Admin-Bereich verlinken, so dass wir schnell zwischen dem neuen Hotel wechseln können und dann zu unseren drei Hauptlinks zurückkehren können. Der Link mit dem href entspricht Schrägstrich admin. Das wird ein Knopf sein. Wir können einen Schaltflächen-Typ hinzufügen. Geben Sie also gleich Taste ein. Dann werden wir auch eine Klasse hinzufügen, die wir später verwenden werden, wenn wir einige CSS oder Schaltfläche Unterstrich klein hinzufügen. Der Text geht zurück an admin, da dies ist, wo dieser Link ist. Dann ganz unten gehen wir in unserem Seitentitel vorbei. Um dies konsistent zu halten, fügen wir dies in einem h2 hinzu. Also h2 gleich Titel. Geben Sie dies ein Speichern und überprüfen Sie, ob es funktioniert. Forward Schrägstrich Admin aktualisieren, Schrägstrich hinzufügen. Unter der Ebene, so können wir jetzt unsere Schaltfläche zurück zu Admin sehen, klicken Sie auf diese und dann sind wir zurück zu unseren drei Links. Wir können jetzt zurückgehen, um ein neues Hotel hinzuzufügen. Wir müssen jetzt unser Formular erstellen, das alle Felder hat, die wir für unser Hotel benötigen. Diese Felder benötigen so viele Daten in unserem Modell. Lassen Sie uns voran und erstellen Sie unser Formular unter dem h2. Das Formular und dann die Attribute in den Klammern, die Aktion. Dies wird auf die gleiche Seite verlinken, so dass wir die Routen mit einer leeren Zeichenfolge halten können. Die Methode, dies wird eine Post-Anfrage sein. Dann rücken Sie es in einer Ebene ein. Ich werde ein div erstellen, das die Klasse der Formularunterstrich Eingabe haben wird. Jede dieser Formulargruppen wird die gleiche Klasse haben. Wir können das Styling konsistent halten, wenn wir später zum CSS kommen. Der erste wird beschriftet und dies wird für den Hotelnamen sein. So Hotel Unterstrich Name, und dann der Text des Hotelnamens. Nach dem Etikett wird dann unsere Eingabe hinzufügen. Diese Eingabe wird die Art von Text, den Namen von hotel_name haben. Wie ich bereits erwähnt habe, müssen diese Felder mit den Daten in unserem Modell übereinstimmen. Wenn wir zu unserer hotel.js gehen und wir werden direkt an der Spitze mit dem Hotelnamen beginnen. Das braucht viel Namen, den wir in unserem Schema gegeben haben. Hotel_Name. Dann werden wir dasselbe für die Beschreibung und auch für den Rest der Felder hier tun . Zurück zu unserem Formular. Der Name des Hotels und dieses Feld ist ebenfalls erforderlich. Der nächste wird für die Beschreibung sein. Das umgebende div der Formulareingabe, die Beschriftung. Dieser wird zur Hotelbeschreibung sein. Dann ist es x-naught Hotelbeschreibung. Dieses Mal statt einer Eingabe, wird dies ein Textbereich sein. Wir machen diese Eingabe, genau wie der Rest der Elemente. Wir können den Namen von Texten Bereich hinzufügen, und dann fügen wir die Klammern oder die Attribute. Der Name von hotel_description. Die ID, die auch hotel_description ist und lassen Sie uns dies kleiner machen , so dass alles auf eine Zeile mit dem Textbereich passt. Sie können auch die Standardanzahl von Spalten und auch Zeilen festlegen. Also werde ich die Spalten auf 13 und auch die Zeilen auf zehn setzen. Dies ist auch erforderlich, wie alle anderen Felder. Unter diesem Ding wird der nächste für das Hotelbild sein. Also werde ich voran gehen und fügen Sie den Wrapper, der Formulareingaben ist, das Etikett für das Bild, das Textilfoto. Diesmal wird es eine Eingabe für die Datei sein. Also die Eingaben mit dem Typ der Datei, da wir hochgeladene Bilder von der Benutzermaschine verwenden werden. Also der Typ der Datei, der Name wird Bild zusammen mit der ID sein. Gehen wir weiter und kopieren diesen Hotelnamen. Dann, nachdem das Bild eingedrungen ist, wird dieses für die Sternebewertung sein. Das Label wird also den Namen star_rating haben und dies wird eine Sternebewertung von eins bis fünf sein. Sternbewertung für den Namen ist der Eingabetyp wird von Zahl sein. Um dies von eins auf fünf mit dem Namen star_rating zu beschränken. Dies ist auch erforderlich. Lasst uns das zwischen eins und fünf behalten. Wir können auch die Min-Attribute eines und auch die maximalen Attribute von fünf hinzufügen. Gehen Sie zu unter der Sternbewertung, wir können dies erneut hinzufügen, stellen Sie sicher, dass die Einrückung korrekt ist. Dieser nach der Sternebewertung wird für das Land sein. Also der Name des Landes, das gleiche für den Text. Der Eingabetyp wird auch Text sein. So können wir dies den Namen des Landes nennen und auch eine ID des Landes geben. Dies ist auch erforderlich. Das gleiche wieder nach dem Land. Dieser wird für die Kosten pro Nacht sein. Also wird das Label für cost_per_night sein. Text der Kosten pro Nacht, wird die Eingänge für den Preis sein. Also können wir das auf eine Zahl setzen. Der Name kann auch mit diesem übereinstimmen, also können wir diesen kopieren und diesen für die Eingaben einfügen. Also haben wir den Typ, den Namen, und wir brauchen auch die ID der Kosten pro Nacht. Also fügen Sie dies hinzu und der nächste danach, wenn wir direkt nach unten gehen, wird für die Verfügbarkeit sein. Also werden wir einige Optionsfelder hinzufügen. Welche wir auswählen können, ob das Hotel verfügbar ist oder nicht verfügbar ist. Der Wrapper von Formulareingaben wird also zwei Optionsfelder haben. Der erste kann ein Label haben und dies ist verfügbar, der Text ist auch verfügbar. Dann unser Eingang, der die Art von Radio ist. Nach dem Typ können wir die ID hinzufügen und diese wird die gleiche sein. Dies benötigt auch einen Namen. Dies ist die Zeit der verfügbaren. Dies sind die Daten, die wir an den Server gesendet haben. Der Wert wird gleich true sein, und wir setzen den nächsten gleich false. Wenn also dieser überprüft wird, erhalten wir die verfügbare gleich true, und der nächste wird gleich false verfügbar sein. Standardmäßig möchten wir, dass dies true überprüft wird. So können wir auch das geprüfte Attribut darin hinzufügen. Dann müssen wir nur das gleiche für nicht verfügbar tun , damit wir diese beiden Zeilen kopieren und sie dann unten hinzufügen können. Dies ist nicht verfügbar, ebenso wie der Text und dann die Eingabe. Wir können hinzufügen, speichern Sie den Namen, den Wert von false. Wir können dieses geprüfte Attribut auch entfernen, da wir nur eine auf einmal überprüfen möchten. Also, jetzt ist das letzte, was wir tun müssen eine Schaltfläche, die gehen wird, um zu gehen und senden Sie dieses Formular. Dies kann den gleichen Formulareingabe-Wrapper haben. Überspringen Sie das Styling konsistent. Dieses Mal ist dies eine Schaltfläche mit der Art von submit, der Klasse, der Klasse, der Klasse, die wir bereits zuvor von button_small verwendet haben. Dies wird das CSS konsistenter halten und dann in Großbuchstaben werden wir auch den Schaltflächen-Text von Bestätigen hinzufügen. Wir können das jetzt speichern und dann zu unserem Admin gehen. Stellen Sie sicher, dass wir auf forward/admin, weiterleiten /ads. Jetzt sollten wir das neue Hotelformular unten unten sehen. Wenn Sie Ihr Formular ohne Fehler gesehen haben, herzlichen Glückwunsch. Wenn Sie Fehler sehen, überprüfen Sie Ihren Code auf Tippfehler. Bevor wir mit dem nächsten Video fortfahren, werden wir endlich einen Hotel-Push zu unserer Datenbank bekommen 24. Übermittlung an die Datenbank: Wir sind nun alle bereit, die Hoteldaten in unsere Mongo-Datenbank zu übertragen. Im letzten Video haben wir eine Vorlage namens ART_hotel erstellt. Dieses Formular ist eingerichtet, um eine Postanforderung zu stellen. Wenn Sie nach oben gehen, können wir sehen, dass die Methode eingestellt ist, um zu posten. Dies wird unsere Formulardaten veröffentlichen, damit wir sie in unserem Controller verwenden können. Außerdem ist die Aktion auf eine leere Zeichenfolge gesetzt, die wir hier sehen können. Dadurch werden die Formulardaten auf den aktuellen Routen veröffentlicht, die forward/admin, forward/add sind. Wenn wir gehen über unsere Routen und geben Sie die index.js, wir haben bereits eine get Anfrage auf dieser Forward/Add Route nur hier, um unsere bei neuen Hotel Formular anzuzeigen. Also lassen Sie uns diese Zeile duplizieren, um eine Postanforderung zu erstellen. Kopieren Sie das also und fügen Sie es unten ein. Wir brauchen dies, um eine Post-Anfrage zu sein, da wir es mit einer Post-Anfrage aus unserem Formular zu tun haben. Also router.post, wieder können wir diese als forward/admin, forward/add behalten , weil dies der Dateipfad ist, auf den wir posten werden, da wir unsere y's nicht in unserer Aktion gesetzt haben. Also, da dies eine Post-Anfrage ist, können wir ändern erstellen Hotelpost, und diese erstellen Hotel Post Middle-ware wird behandeln, was zu tun wenn wir eine Post-Anfrage auf diese Route machen, dh wenn wir das Formular absenden. Lassen Sie uns dies im Hotel controller.js unter CreateHotelGet einrichten. Wir können das gleiche für CreateHotelPost tun. So richtet CreateHotelPost unsere Funktion mit der Anfrage und Antwort ein. Das erste, was ich hier drinnen machen werde, ist zu sehen, mit welchen Daten wir arbeiten. Wir können sehen, welche Daten vom Formular gesendet werden, indem wir res.json verwenden, also werde ich die Daten als JSON setzen dann der Anfrage einen Körper übergeben, und hier werden die Daten in unseren Questobjekten gespeichert. Also innerhalb unserer Funktion bei res.json und die Formulardaten werden im Körper der Anforderungsobjekte gespeichert , also übergeben Sie in request.body gibt uns ein Speichern und dann zum Browser, erhalten Sie das neu laden. Jetzt können wir einige Formulardaten ausfüllen zu senden. Das ist nur ein Test hinzuzufügen. Das ist ein Testdaten, wählen Sie ein Bild, in unser Reise-Projekt, und dann den öffentlichen Ordner, Bilder, und wir können jedes Hotel Bild wählen. Also werde ich wählen Hotel 1, eine Sternebewertung von drei, Land, Portugal und jeder Preis ist in Ordnung. Wir bestätigen, sobald wir auf Bestätigen klicken, stellen wir dann eine Post-Anfrage von diesem Formular. Diese Post-Anfrage geht zu Forward/Admin, weiterleiten/hinzufügen. Wir haben dies innerhalb unserer index.js eingerichtet, um diese Post-Anfrage an diese Route zu bearbeiten. Dies löst dann unseren Hotelcontroller aus , der dann unseren JSON zurückgibt, da wir res.json tun und dann die request.body übergeben, die die Daten speichert, die vom Formular gesendet werden. So können wir jetzt die JSON-Version unseres Hotels sehen, die wir gerade hinzugefügt haben. Wir können sehen, dass diese Daten im gleichen Format wie unser Modell eingerichtet ist. Dies gibt uns eine bessere Vorstellung von den Daten, mit denen wir jetzt arbeiten. Dieses Formular wurde so eingerichtet, dass es sich um das gleiche wie unser Modell handelt, sodass die Daten im richtigen Format vorliegen. Jetzt wissen wir, dass wir ein Objekt für unser Hotel in request.body gespeichert haben. Werden wir diese Daten in unserem Modell verwenden, um in die Datenbank zu gelangen? Also müssen wir zuerst unser Hotelmodell benötigen, die Top-Level-Datei. Also zurück zum Hotel-Controller, und ganz oben, können wir eine Konstante namens Hotel mit Kapital H einrichten, und dies erfordert die Modelle. Also als String, wenn es den Dateipfad übergeben wird, also lassen Sie uns zum Ordner unseres Modells gehen, und dann war der Name des Modells Hotel. Wir können dann dieses Hotel Modell unten in CreateHotelPost verwenden. Also werden wir ein neues Hotel einrichten, die Daten von request.body übergeben, was wir gesehen haben, ist das Objekt, das alle Felder aus unserem Formular enthält. Sie installieren ist innerhalb einer Variablen oder einer Konstante. So entspricht const Hotel unserem neuen Hotel. Also jetzt haben wir unser Hotel und wir können voran gehen und sicher anrufen. Aber eine Sache zuerst, ich werde diese Funktion als asynchron markieren. Kurz nach der Gleichheit können wir diese Funktion als asynchrone Funktion markieren. Dies ist etwas, das in ES 2017 neu ist, genannt async await. Es macht unser Leben wirklich viel einfacher, wenn man mit asynchronem Code arbeitet. Was es uns im Grunde erlaubt, ist, eine Funktion zu pausieren , bis eine Codezeile beendet ist. Zuerst markieren wir die Funktion async, genau wie wir es dort getan haben, und dann ist die nächste Aufgabe, die unsere Funktion hat, Speichern aufzurufen, um dies in unsere Datenbank zu sagen. Wir tun dies mit unserer Hotelkonstante und rufen dann an.save. Mit dem Sparen möchten wir jedoch sicherstellen, dass das Hotel das Sparen beendet hat , bevor wir damit anfangen können. Um dies zu tun, können wir eine Wartezeit vor unserem hotel.save hinzufügen und eine Wartezeit vor dieser Zeile hinzufügen. Wir stellen sicher, dass dieser Code pausiert und warten dann darauf , dass dies beendet ist, bevor wir zur nächsten Zeile gehen. Der Grund, warum wir sicherstellen wollen, dass wir vor dem Umzug auf die Hotelersparnis warten , ist, dass wir neue Hoteldaten sofort nach dem Speichern übernehmen. Wir möchten also sicherstellen, dass das Speichern abgeschlossen ist, es verfügbar ist, bevor Sie weitere Codezeilen aufrufen, die diese Hoteldaten benötigen. Also, wenn wir dies zum Speichern und dann zum Browser geben, gibt dies einen Neuladen und senden Sie das Formular erneut, und gehen Sie dann zurück zu mLab und melden Sie sich in der Datenbank an. Also lassen Sie uns in unsere Benutzerdaten hinzufügen. Sobald unsere Datenbank geladen ist, können wir nun auf Java-Sammlungen sehen wir die Hotel-Sammlung, die jetzt ein Dokument hat. Wenn wir auf Weiter klicken, um zu erweitern, wir dann zu unserem Test gebracht, das sind die Daten, die wir gerade eingereicht haben. Das ist ein großer Schritt, weil wir jetzt unser Hotel in der Datenbank gespeichert haben. Aber was ist, wenn beim Speichern des Hotels ein Fehler auftritt? Wir müssen etwas in unserem Controller hinzufügen, um Fehler zu behandeln. Zuerst können wir den Code innerhalb des try-Blocks umschließen. Also zurück zu CreateHotelPost, können wir versuchen hinzufügen und dann diese beiden Zeilen innerhalb dieses try-Blocks verschieben. Dies wird versuchen, den Code innerhalb auszuführen und auf Fehler zu testen. Wenn es irgendwelche Fehler gibt, können wir sie mit einem catch-Anweisungen behandeln. Wir tun dies am Ende, wir fangen, wir übergeben den Fehler, und dann rufen wir hier drinnen als nächstes auf, was auch den Fehler annimmt. ich als nächstes aufrufe, gehe ich in der Ära vorbei, wird der Fehler entlang der Middle-Ware-Kette übergeben, bis er einen Fehler-Handler erreicht, der richtig damit umgehen kann. Denken Sie daran, wir haben bereits Fehlerbehandlungsprogramme mit dem Express-Framework in unserer app.js eingerichtet , die unten hier unten ist. Also zurück zu unserem Controller, damit dies neben richtig funktioniert, müssen wir auch als nächstes nach den Anforderungs- und Antwortobjekten übergeben. Also als nächstes hier vorbei, da wir es jetzt innerhalb unserer Funktion verwenden. Wenn wir zu mLab, innerhalb des Browsers gehen, können wir uns unser Hotel ansehen. Wenn wir auf diese Ecke klicken und dann ziehen Sie diese nach unten. Wenn wir bemerken, innerhalb dieses Hotels, das wir gerade hinzugefügt haben, wurde eine eindeutige ID mit dem Feld der Unterstrich ID hinzugefügt, die gerade hier ist. Denken Sie daran, von vorher, wir sagten, wir wollten warten, um auf das Hotel zu warten, um diese Datenbank zu speichern, bevor wir weitermachen. Sicherzustellen, dass das Hotel erfolgreich gespeichert wurde, bedeutet, dass wir diese ID jetzt verfügbar haben, bevor Sie mit der nächsten Codezeile fortfahren. Dies nur, weil ich jetzt zum Hotel umleiten möchte, sobald es gespeichert wurde. Wir können dies innerhalb unseres Controllers mit res.redirect tun. Dann übergebe ich den Dateipfad, zu dem wir gehen möchten, ich werde die Backticks verwenden, da wir einige dynamische Daten hinzufügen werden. Also weiter/alle, und dann weiterleiten/. Wir können das $ Symbol und unsere geschweiften Klammern übergeben. Dies ist etwas, das wir uns früh im JavaScript-Abschnitt angesehen haben. Also hier drinnen können wir eine Variable übergeben. So können wir auf unser Hotelobjekt zugreifen, das gerade hier ist, und dann auf das Feld, das Unterstrich ID ist, und das ist die Idee, die in unserer Datenbank gerade hier hinzugefügt wurde. Fügen Sie am Ende ein Semikolon hinzu. Nun lassen Sie uns überprüfen, dass dies in Ordnung ist, indem Sie ein neues Hotel hinzufügen. Gehen wir also zu Weiterleitung/Admin weiter/hinzufügen, laden Sie die Seite neu. Nehmen wir an, Test 2. Test 2 für die Beschreibung, jedes Bild ist fünf hier. Klicken Sie dann auf Bestätigen. Wir werden nun auf unsere Route umgeleitet, die wir gerade hier festgelegt haben, die vorausfahrt/alle sein wird, und dann die Hotel-ID. Wir können dies nun in der URL-Leiste oben sehen. Wir haben unsere eindeutige ID, die jetzt aus der Datenbank gezogen wird, weil wir darauf gewartet haben dieses Hotel zuerst erstellt wurde, bevor wir mit der Weiterleitung fortfahren. Wenn wir nach unten scrollen, sehen wir einen Fehler von Nicht gefunden. Das ist in Ordnung, weil wir wissen, dass wir diese Route noch nicht erstellt haben, aber die Hauptsache ist, dass wir diese eindeutige ID jetzt in der URL haben. Wir werden später darauf zurückkommen, wenn wir eine Vorlage erstellen, um die vollständigen Details des Hotels anzuzeigen. Dies ist jetzt ein großer Schritt vorwärts, wir haben in der Datenbank gespeichert. Also herzlichen Glückwunsch, wenn Sie jetzt diese Arbeit haben. Wenn Sie dies nicht tun, überprüfen Sie Ihren Code und werfen Sie einen Blick auf den fertigen Code bereit gestellt oder fragen Sie in den Q&A-Abschnitten, bevor Sie mit dem nächsten Video fortfahren. 25. Abfrage der Datenbank: Bevor wir uns ansehen, wie wir unsere Daten aus der Datenbank oder aus einer Abfrage erhalten, müssen wir zuerst einige weitere Daten hinzufügen, um zurück zu kommen. Wenn Sie zu mLab gehen und wenn Sie diese Testdaten an Ort und Stelle haben, können wir sie mit dem Bin-Icon auf der rechten Seite entfernen. Ich möchte alle Datensätze in unserer Datenbank löschen und sicherstellen, dass sie alle weg sind. Lassen Sie uns weitermachen und fünf neue Hotels erstellen, mit denen wir zusammenarbeiten können. Wir können dies tun, wenn wir zu admin gehen, also vote/admin/vote/add und dann gehen Sie unten zu [unhörbar] unten. Die erste möchte ich dieses Hotel 1 nennen und natürlich mit einem kreativeren Namen, wenn Sie es vorziehen. Ich werde einige [unhörbare] Ipsum-Texte holen, um für die Beschreibung hinzuzufügen. Lassen Sie uns nach unten gehen und zwei Absätze erstellen. Es erzeugt, Kopieren Sie den Beispieltext und fügen Sie ihn in unseren Textbereich. Das Hotelbild für Hotel 1 wählen Sie dann diese. Die Sternebewertung kann vier sein, Land Jamaika. Kosten pro Nacht, jetzt können wir dies wie verfügbar lassen. Jetzt leiten wir es zum Hotel um. Wir müssen zurück zu unserem Admin/Add. Erstellen Sie Hotel 2. Fügen Sie das Bild für Hotel 2 in die Beschreibung ein. Dann wird eine Sternebewertung für fünf gehen, Land der Dominikanischen Republik. Kosten pro Nacht, fügen Sie dort etwas hinzu und bestätigen Sie. Es sollten jetzt zwei Hotels in unserer Datenbank sein, wenn wir Reload drücken, und da sind wir. Fügen wir noch drei hinzu. Wieder, /admin/adds. Wir können Hotel Nummer drei hinzufügen, fügt die Beschreibung hotel3.jpg. Eine Sternebewertung gehen wir für drei diesmal und Niederlande. Kosten pro Nacht, sagen 45 und dann bestätigen. Dann können wir Hotel 4 hinzufügen, Admin fügt hinzu. Dann unten nach unten Hotel 4 Fügen Sie in der Beschreibung das Bild. Die Sternebewertung wird für fünf dieses Mal und das Land der Malediven gehen. Kosten pro Nacht, gehen wir für 89. Lassen Sie mich einige, wie das nicht verfügbar machen. Es sieht so aus, als hätten wir dort tatsächlich ein kleines Problem, wir haben beide überprüft. Gehen wir zu unserem Formular, fügen Sie Hotel und unten zu den Kontrollkästchen oder den Optionsfeldern. Entschuldigung. Diese Bedürfnisse haben den gleichen Namen, sie zu viel in der gleichen Gruppe, lassen Sie uns versuchen, neu zu laden. Doch jetzt können wir einfach eine von diesen auswählen. Gehen wir rüber zur Datenbank. Jetzt haben wir alle diese als wahr zur Verfügung. Ich werde nur auf eines dieser gehen und auf die Schaltfläche Bearbeiten klicken. Wir setzen die Verfügbarkeit diesmal auf falsch. Es ist Save und geh zurück. Weil ich jetzt Hotel Nummer drei auf false gesetzt werden muss. Lassen Sie uns eine weitere hinzufügen, die Hotel 5 ist. Die Beschreibung Hotel 5 image. Die Sternebewertung ließ dieses Mal zwei gehen. Das Land von Griechenland, Kosten pro Nacht und wir können diese wie verfügbar halten. Nun, drüben in MLab sollten wir jetzt fünf Datensätze haben, von denen eine nicht verfügbar ist, die angeblich Hotel Nummer drei sein soll. Wir fügen den Rest des Hotels später hinzu. Aber jetzt haben wir einige Daten, mit denen wir arbeiten können. Ich werde Ihnen zeigen, wie Sie es in unsere Anwendung innerhalb der hotelController.js bekommen . Lassen Sie uns diese auswählen und dann können wir zurück zu unserer Liste gehen alle Hotels Funktion. Wenn wir nach oben scrollen, haben wir die Liste alle Hotels gerade hier. Die Rückgabe aller Daten in unserer Datenbank ist ziemlich einfach mit Mongos Find-Methode. Bevor wir alle Hotels rendern, lassen Sie uns eine Konstante erstellen, die alle Hotels genannt wird, und ich werde dies so einstellen, dass wir diese Daten vor dem Rendern Vorlage gezogen werden sollen. Wir möchten unser Hotelmodell auswählen und dann die Punktsuche und ein Semikolon am Ende verwenden. Die Suchmethode findet alle Dokumente in unserer Hotelkollektion und durchsucht auch die Hotelkollektion, da wir das Hotelmodell gerade hier verwenden. Hier, da wir await noch einmal verwenden, müssen wir diese Funktion auch als Sync markieren, damit sie funktioniert. Fügen Sie Sync kurz vor unseren Funktionsparametern hinzu, wir wollen auch alle Fehler wieder zwei behandeln, damit wir diesen Code in einen try-Block einschließen können. Lassen Sie uns alle diese beiden Codezeilen ausschneiden, einen try-Block hinzufügen, diesen Back-in einfügen, gefolgt von einem catch-Block, um Fehler zu behandeln. Dieser catch-Block nimmt auch die Fehler als Argument auf und dann können wir diese auch an den nächsten weitergeben. Da wir nun next aufrufen, müssen wir dies auch in die Funktion übergeben. Unsere nächste als dritte Argumente und bevor wir weitermachen, sollten wir überprüfen, dass dies funktioniert. Wir können diese res.render auskommentieren, die wir oben haben und stattdessen durch eine res.json ersetzen. Dadurch werden die Daten im JSON-Format auf dem Bildschirm hinzugefügt. Die Daten ausgeben wollen, sind alle Hotels, die diese Konstante gerade hier ist. Also speichern Sie das. Dann müssen wir zum Browser gehen, und gehen Sie dann zu /all hit, „Enter“ und jetzt sehen wir alle unsere Hotels im JSON-Format. Dies sind alle Daten, die wir jetzt aus der Datenbank ziehen. Das sieht so aus, als würde unser Hotel zurückgegeben. Wir können alle unsere Felder einschließlich der generierten ID sehen. Jetzt wissen wir, dass dies funktioniert, können wir diese Daten dann an unsere Seitenvorlage übergeben , um weiterzumachen und zu rendern. Zurück zum Controller. Lassen Sie uns die res.json auskommentieren und diese Rendermethode auskommentieren. Zusammen mit dem Rendern, den allen Hotelvorlagen und der Weitergabe des Titels wollen wir auch in diesem Hotel Daten aller Hotels weitergeben. Getrennt durch ein Komma, können wir auch in allen Hotels übergeben und dies wird jetzt in den Vorlagen verwendet werden. Wenn Sie dies ein Speichern geben und dann zu den allen Hotels Vorlagen gehen, die in Ansichten ist. Lass uns das aufmachen. Lassen Sie uns diese Arbeit testen, indem Sie p Elemente auswählen und dies an den Wert aller Hotels senden. Geben Sie dem ein Sparen. Dann über den Browser, wir können die /alle Routen neu laden. Okay und scrollen Sie nach unten. Wir sehen jetzt ein riesiges Objekt auf dem Bildschirm. Dies sind alle Daten, die jetzt aus der Datenbank gezogen werden. Wir können sehen, ob wir genau hinschauen, wir haben Hotel eins, und wenn wir dann weiter über gehen, haben wir Hotel zwei gleich hier und dann Hotel drei weiter unten. Dies sind alle Informationen aus unserer Hotelsammlung. Wir können das auch filtern, wenn wir zum Beispiel nur das erste Hotel wollen. Wir könnten es anhand der Indexnummer auswählen. Alle Hotels, die Indexnummer von Null, nachladen. Das sind alle Daten aus unserem ersten Hotel. Noch weiter können wir dies auf den Hotelnamen eingrenzen. Denken Sie daran, Hotelname wird in Hotel-Unterstrich Name gespeichert, so dass wir es mit der Punkt-Notation zugreifen können, so Hotelname. Da gehen wir. Da ist unser Hotel ein Name. Jetzt haben wir Zugriff auf all diese Hoteldaten. Wir müssen durch alle Hotels leben und jedes in diesem Hotel Mix-In anzeigen. Wir haben bereits das Hotel Mix-In gerade hier. Sobald Sie eine Schleife erstellen, die dieses Mix-In mit allen Hotelinformationen anzeigt. Löschen Sie dieses p-Element von hier. Wir können unsere Level-2-Überschrift hinzufügen, die der Titel ist. Danach wollen wir unsere Schleife erstellen, und wir werden dies mit jedem Hotel in allen Hotels tun und dann beide Zeilen einrücken. Alle Hotels sind die Daten, die an die Vorlage mit allen Informationen vom Hotel 1 bis 5 weitergegeben werden. Jedes einzelne Hotel wird in dieser Hotelvariablen gespeichert. Nun, wenn wir diese speichern und dann den Schrägstrich alle Routen neu laden und dann nach unten scrollen, wir sehen, wir haben Hotel Nummer eins. Wenn wir weiter unten gehen, sollten wir ein Hotel für jeden der Artikel in unserer Datenbank haben. Dies wird jetzt das gleiche Hotel in unserem Mix-In für jeden Artikel wiederholt. Dies ist ein Schritt in die richtige Richtung, weil wir jetzt fünf Elemente auf dem Bildschirm haben, aber wir wollen, dass jedes Hotel anders ist. Um dies zu tun, benötigen wir eine Möglichkeit, die einzigartigen Hoteldaten in das Mix-In zu übergeben. Denken Sie daran, dass wir gesagt haben, vor, dass diese Hotelvariable hier die einzelnen Hotelinformationen enthält, so dass dies die Informationen, die wir an die Mix-In übergeben müssen. Wir können das mit unserem Mix-In nur hier machen und im Hotel vorbeigehen. Dies funktioniert, weil Mix-Ins zu Funktionen kompiliert werden, die Argumente aufnehmen können. Wenn wir das speichern und dann in unserem Mix-In zu unseren Hoteldaten gehen, hin zu Mix-Ins, dann unterstreichen wir das Hotel bis zu unserem Mix-In-Namen oben. Wir können auch diese Hoteldaten erhalten, so übergeben Hotel als Argument, und jetzt haben wir die individuellen Hoteldaten innerhalb dieses Mix-In. Hier beginnt der gute Teil zu passieren. Beginnen wir mit der Anzeige des Hotelnamens. Scrollen Sie nach unten zu unserer Überschrift der dritten Hier haben wir einige hartcodierten Text, weil dies eine Variable ist, die wir zu den Gleichheiten hinzufügen, Zugang zum Hotel, und dann Punkt Hotel Unterstrich Namen. Wenn wir das speichern und dann den Browser neu laden, zurück nach oben, haben wir Hotel eins, Hotel zwei, Hotel drei, vier und fünf. Jetzt sehen wir, dass alle Hotelnamen einzigartig sind. Wir können jetzt mit den restlichen Details fortfahren, die sie alle dynamisch machen. Als nächstes können wir die Daten aus den beiden Links hinzufügen. Die href nur hier oben, lasst uns dies ändern, um wieder Ticks zu sein, weil dies dynamisch sein wird. Dies wird auf die volle Hotelansicht verlinken, die unser Vorwärtsschrägstrich alle sein wird. Dann können wir unseren dynamischen Abschnitt hinzufügen, der Hotel ist. _id. Wir beschäftigen uns später mit dieser Route. Wir werden das Gleiche für den folgenden Link tun. Kopieren Sie diese und fügen Sie sie für den zweiten Link ein. Diese beiden Links bedeutet, dass sowohl das Bild als auch der Hotelname auf die vollständige Ansicht des Hotels verlinken , wenn der Benutzer auf eine dieser Links klickt. Dann können wir uns mit dem Dateipfad für das Bild beschäftigen. Im Moment haben wir hier nur das Image-Hotel eins fest codiert. Lassen Sie uns dies ändern, um wieder Ticks Vorwärts Schrägstrich Bilder, das Hotel Ordner in den Bildern, und dann Schrägstrich wir öffnen die geschweiften Klammern und fügen Sie dann Hotel Punkt-Bild. Innerhalb unserer Datenbank für das Bild werden diese Bilder gespeichert. Wenn wir einen Blick, zum Beispiel, Bild hier wird als hotel2.jpg gespeichert. Wenn wir zu Visual Studio gehen und dann in die Öffentlichkeit und dann Bilder innerhalb der Hotels, wird dieser Name mit dem Namen der Bilder übereinstimmen, die wir hier haben werden. Nun, wenn wir das speichern und dann den Browser neu laden, sollten wir jetzt das einzigartige Bild für jedes Hotel sehen. Wir kommen später zu den Bildern zurück, da wir Cloud Storage für Bild-Uploads verwenden werden , anstatt in unserem eigenen Projekt zu speichern. Jetzt gehen wir zurück und beenden den Rest dieser dynamischen Daten. Die p-Elemente sind die unteren, aber jetzt auch dynamisch. Wir müssen das in hinteren Zecken umschließen, den Stern wechseln. Anstatt den hartcodierten Wert von vier zu haben, können wir wieder unsere dynamischen Daten übergeben. Hotel und dann das Feld Name, die Sterne Unterstrich Bewertung. Dasselbe für unser Land. Wir können dies in hinteren Zecken umgeben, ersetzen Sie das hartcodierte Land mit Hotel Dot Land. Die Kosten pro Nacht. Zunächst können wir ein Währungssymbol und dann einen Raum hinzufügen, um unsere dynamischen Daten zu erstellen. Hotel.COST_PER_NACHT. Lassen Sie uns zum Browser gehen und sehen, wie das aussieht. Aktualisieren Sie unsere Routen aller Hotels und überprüfen Sie diese alle Unterschiede. Wir haben vier, Jamaika und 67. Dann haben wir die Dominikaner, Niederlande, und auch die Malediven mit verschiedenen Sternebewertungen und Preisen zu. Ausgezeichnet. Sie sollten nun alle Ihre Hoteldaten aus der Datenbank sehen. Vielleicht fragen Sie sich auch, wo wir die Hotelbeschreibung haben. Nun, wir werden dies später wieder hinzufügen, da dies nur auf der gesamten Hoteldetailansicht angezeigt werden soll , wo wir mehr Platz zur Verfügung haben. Es gibt jedoch ein kleines Problem hier. Das Problem ist, dass wir auch Hotel drei sehen können. Wenn wir nach unten scrollen zu Hotel drei nur hier, denken Sie daran, dass wir dieses Hotel drei nicht verfügbar sein, als wir es zum ersten Mal erstellt haben. Das ist ziemlich einfach zu lösen. Alles, was wir tun müssen, anstatt nur die find-Methode zu verwenden, können wir auch eine Abfrage übergeben. Zurück zum Hotel-Controller und zur Liste aller Hotels. Innerhalb dieser Suchmethode haben wir hier, können wir beginnen, indem wir ein Objekt übergeben, und dann können wir die verfügbaren Felder aus unserer Datenbank auswählen. Jetzt wollen wir nur Hotels finden, die dieses Feld auf „true“ gesetzt haben. Wir können dies mit dem $ Symbol eq tun und dies auf true setzen. $ sign eq ist ein MongoDB-Abfrageoperator, der auf Gleichheit überprüft. Grundsätzlich werden dann nur Hotels mit dem verfügbaren Feld zurückgegeben. Nun, wenn wir das speichern und dann neu laden, jetzt Hotel vier, und dann springt es zu Hotel zwei. Es sieht so aus, als ob Hotel drei jetzt nicht aus der Datenbank gezogen wird , da es nicht mit unserer Abfrage übereinstimmt. Gut. Das funktioniert jetzt alles. Wir werden weiterhin Daten aus unserer Datenbank im nächsten Video abrufen, wo wir unsere Hotels basierend auf dem Land bekommen werden. 26. Eindeutige Werte: Wenn wir auf mongodb.com gehen, das ist eine Homepage für unsere Datenbank. Oben oben können wir einen Link zur Dokumentation sehen. Diese Dokumentation wird uns alle Informationen geben, die wir benötigen, um unsere Datenbank abzufragen. Auf der linken Seite, wenn wir auf „Erste Schritte“ klicken. Hier finden wir einen vollständigen Verweis auf alle Datenbankbefehle, die wir in diesem Kurs verwenden, zusammen mit vielen anderen. Unten unten haben wir einen Referenzabschnitt. Klicken Sie darauf und gehen Sie dann zu Datenbank-Befehlen. Dies wird uns eine Liste von verschiedenen Methoden geben, die wir zur Verfügung haben. Scrollen wir nach unten zu den Use-Befehlen. Darunter haben wir eine Suchmethode. Wenn wir nach unten zu der Abfrage scrollen und Befehle schreiben, haben Sie diese feine Methode, die wir im letzten Video verwendet haben, um alle unsere Hotels zu bekommen. Der nächste, der in diesem Kurs behandelt wird, ist deutlich und dieser Befehl ist in der Nähe der Spitze. Wir haben das hier. Für dieses Projekt benötigen wir eine Liste der verfügbaren Länder, die Hotels in haben. Wir haben möglicherweise mehrere Hotels mit dem gleichen Abfragegesetz. Zum Beispiel könnten wir sechs Hotels in Mexiko haben und wir wollen nicht, dass das Wort Mexiko sechsmal in der Liste unseres Landes erscheint. Distinct wird es uns ermöglichen, eine Reihe von nur den unverwechselbaren Ländern zurückzugeben, was bedeutet, dass das einzige Mexiko einmal von unserem Beispiel erscheinen wird. Beginnen wir mit dem Erstellen der Vorlagen für alle Länder für diese Seite. Öffnen Sie die Seitenleiste, lassen Sie uns einige davon schließen. Ich schließe das ab. Wenn wir zu den Ansichten gehen, können wir eine neue Datei innerhalb von hier genannt, all_countries mit der.pug Erweiterung erstellen. Wir gehen voran und fügen unseren grundlegenden Code; erweitert Layout, und dann den Blockinhalt, die h2 des Titels. Dann nächsten Halt können wir die Route zum Index der JS-Datei hinzufügen. Gehen Sie zu unserem Index innerhalb des Routenordners, öffnen Sie dies, und dann nach der "/all Route“, werden wir router.get hinzufügen. Dies müssen Sie die /countries Routen, den Hotelcontroller behandeln , und dieses Mal werden wir eine Funktion namens ListAllCountries einrichten, fügen Sie das Semikolon am Ende hinzu. Wir haben noch nicht alle Länder Listen erstellt. Also, gehen Sie zu der Hotel-Controller-Datei und dann können wir es hinzufügen. Lasst uns das aufmachen. Nach einer Liste alle Hotels lassen Sie uns Exports.ListAllCountries hinzufügen. Richten Sie unsere Funktion ein. Ich werde das als asynchron markieren, weil wir hier ein Warten brauchen. Wir können unsere Anfrage, unsere Antwort, und auch als nächstes übergeben . Dann fügen Sie unseren try Block hinzu, versuchen Sie und führen Sie den Code aus, gefolgt von unserem Catch , der alle Fehler annehmen wird und sie dann an den nächsten übergeben wird. Machen Sie meinen Fehler mit no s. Der Code innerhalb des try-Blocks wird ziemlich ähnlich wie alle oben genannten Hotels sein. Wir beginnen damit, eine Konstante zu erstellen, in der unsere Daten gespeichert werden. Ich nenne das konstant alle Länder. Dieses Mal jetzt wählen wir unser Hotelmodell, so setzen Sie dies gleich Hotel Hauptstadt H. Statt der Suche Methode, die wir zuvor verwendet, dieses Mal verwenden wir.distinct dann, um eine Reihe von verschiedenen Ländern zurückzugeben, können wir in das Land Feld als String, und dann unter diesem können wir unsere Vorlagen mit res.render rendern. Die Vorlage, die wir hinzufügen möchten, ist diejenige, die wir gerade aus allen Unterstreichungsländern erstellt haben. Getrennt durch Komma können wir in unserem Titel übergeben. Weg zum Text von, durchsuchen Sie nach Land, Ich mache dieses bisschen kleiner, dann können wir in unseren allen Ländern Daten übergeben, die wir hier einrichten. Stellen Sie sicher, dass dies innerhalb unserer Vorlage verwendet werden kann. Sobald dies getan ist, drücken Sie speichern und gehen Sie dann zum Browser, öffnen Sie unsere Projekte, dann können wir zu /countries gehen, und dann scrollen Sie nach unten, und wir werden den Seitentitel der Suche nach Land sehen. Wir sehen nur diesen Seitentitel, da dies alles ist, was wir derzeit in der Vorlage eingerichtet haben. Gehen wir zu allen Ländern.pug, und beheben Sie dies, indem Sie die Daten aller Länder hinzufügen. Was wir jetzt an die Vorlage übergeben. Ich werde mit einem Wrap beginnen, wenn, genau wie wir es mit den Hotels getan haben. Dies wird als Country Wrapper bezeichnet, dann erstellen Sie eine ungeordnete Liste, um die Liste aller Länder anzuzeigen. Um all diese Länder zu erhalten, müssen wir diese alle Länder Daten durchlaufen, die an diese Vorlage übergeben werden. Wir können dies mit einer Schleife tun, so dass jedes Land in allen Ländern, erstellen Sie ein Listenelement, das auch ein Link sein wird. Übergeben Sie die href. Dies wird gleich unseren Rückentnahmen sein, und dann /Countries/, dann können wir unseren dynamischen Ländernamen hinzufügen. Das sind also das Land hier drinnen, das ist diese individuelle Variable, die wir durchlaufen. Wir können dann unseren Ländernamen ausgeben. Und wir können diese Dynamik mit dem # und dann mit dem {} machen und dann das Land ausgeben. Wenn in der Datenbank keine Länder verfügbar sind, können wir dann einen anderen Block verfolgen. Nur auf der gleichen Ebene wie jeder, können wir hinzufügen, was ich ein Listenelement mit dem Text setzen, gibt es keine Länder. Nun, wenn wir diese Datei speichern und dann über zu unseren Projekten und dann unsere Forward/Länder Routen neu laden. Dann scrollen Sie nach unten. Wir sehen nicht ganz die Informationen, die wir erwarten. Wir erwarteten eine Liste von Ländern. Wieder eine Menge seltsam aussehender Code unten. Der Grund dafür ist, dass wir nicht erwarten unsere Daten zurückkommen, bevor wir versuchen, dies auf dem Bildschirm zu rendern. Dies ist eines der Probleme, die wir bereits erwähnt haben, da wir ein einzelnes Gewicht verwenden, müssen wir darauf warten, dass unsere Daten aus der Datenbank zurückkommen , bevor wir versuchen, es in unserer Anwendung zu verwenden. Wenn wir zurück zum Hotel-Controller und die Liste aller Länder gehen, haben wir diese Funktion als Waschbecken markiert, aber wir warten nicht auf den hotel.distinct Wert zurück aus der Datenbank zurückgegeben werden, bevor wir es an unsere Vorlagen übergeben. Hoffentlich jetzt, wenn wir das speichern und dann neu laden, erhalten wir jetzt eine Liste der Länder, die angezeigt werden. Wenn wir auf eine dieser klicken, dann sind wir es auf unsere Route der Länder genommen, Schrägstrich und dann Jamaika. Wir haben unten einen Fehler, da wir diese Route noch nicht behandelt werden. Versuchen wir es mit einem anderen für die Niederlande. Diese alle scheinen zu funktionieren. Es würde auch schön aussehen, zusammen mit diesem Ländernamen, wenn wir auch ein Bild in Bezug auf dieses Land setzen können. Wir haben bereits die Länderbilder, die in unserem Images Ordner gespeichert sind. Öffentliche Bilder. Dann haben wir einige Länder mit Bildern unten. Gehen wir weiter und nutzen Sie diese Bilder in unseren Vorlagen. Also, direkt unter unserem Link, gehen Sie zur nächsten Zeile. Dann können wir eine Bild-Indentity in einer Ebene festlegen. Dies verweist auch auf die gleiche Route oben. Wenn das Bild eine Quelle benötigt, ist es gleich o back ticks, der Vorwärts/Bilder Ordner, der Ordner des Landes. Dann können wir den Ländernamen hinzufügen, der einfach Land ist. Dann müssen wir the.jpg Erweiterung am Ende hinzufügen. Wenn wir diese jetzt speichern und dann zu unseren Forward/Länder Routen gehen, neu laden. Es sieht so aus, als würden wir Tippfehler schreiben. Also schauen wir uns das an. Es liegt nur daran, dass wir in unseren Vorlagen ein Semikolon hinzugefügt haben, das wir nicht in Mops verwenden. Aktualisieren. Da sind unsere Landbilder neben dem Namen. Im Moment sieht das so aus, als ob sie jetzt alle arbeiten, aber im Moment können wir uns nicht sicher sein. Dies liegt daran, dass wir in jedem dieser Länder nur ein Hotel haben. Also wissen wir nicht, ob es gerade einen eindeutigen Wert zeigt. Wir können dies testen, indem wir kleine Hotels zu unserer Datenbank hinzufügen. Ich weiß, es ist ein bisschen repetitiv, aber lassen Sie uns jetzt gehen und den Rest unserer Hotels hinzufügen. Dann können wir dies für den Rest des Projekts verwenden. Lassen Sie uns zu weitergehen/admin gehen, weiter/hinzufügen, unten nach unten, Ich werde Hotelnummer 6 hinzufügen und dann die Lorem Ipsum zuschneiden. Gehen Sie zu lipsum.com, ich werde zwei Absätze erstellen und dann „Generieren“ drücken. Kopieren Sie diese und fügen Sie sie in unsere Beschreibung ein. Hotel 6 hat das Bild, die Sterne Preise in dieser Zeit von vier, das Land, Sri Lanka, die Kosten, 57. Dieser Kegel kann auch verfügbar sein. Admin/hinzufügen, Hotel 7. Fügen Sie die Beschreibung und das Bild hinzu. Die Sternebewertung von fünf, das Land der USA, 78. Behalten Sie dies wie verfügbar. Zurück zu unseren Admin-Routen. Erstellen Sie Hotel 8. Ich gehe bis zum Hotel 12 zu viel allen Bildern, die mit dem Kurs zur Verfügung gestellt wurden. Also fügen Sie dies in und hotel 8, die Sternebewertung, das Land der Malediven und die Verfügbarkeit als wahr. Jetzt können wir sehen, dass wir bereits mehr als ein Hotel auf den Malediven haben. Zurück zu weiter/admin, weiterleiten/hinzufügen. Hotel 9. Basierend auf einer Beschreibung. Dieser kann eine Sternebewertung von vier sein. Das Land Mexikos. Kosten pro Nacht. Bestätigen. Wir brauchen es jetzt, gehen wir auf den Admin fügt und schafft Nummer 10. [unhörbar] vier, Hotel Nummer 10, die Beschreibung und auch das Bild, das Nummer 10. Öffne das, die Sternebewertung von drei. Lass uns wieder nach Mexiko gehen. Haben Sie einen Preis und klicken Sie dann auf „Bestätigen“. Admin fügt hinzu, Hotel 11. Die Sternebewertung, lassen Sie uns für vier gehen, das Land Thailand, Kosten pro Nacht, 39. Bestätigen. Schließlich können wir die Hotelnummer 12 hinzufügen, die die letzte ist. Klingt unten. Hotel 12. Die Sternebewertung von drei, Dominikanische Republik, 56 und drücken Sie „Bestätigen“. Großartig. Jetzt über zwei mLab können wir jetzt aktualisieren. Ich weiß, das ist etwas langweilig und sich wiederholend. Aber jetzt haben wir alle 12 Hotels in der Datenbank. So haben wir viele Informationen, mit denen wir jetzt in unseren Projekten arbeiten können. Also habe ich 12 Bilder zur Verfügung gestellt. Sie können natürlich weitere Hotels hinzufügen, wenn Sie es vorziehen. Es gibt heute mehr als ein Hotel auf den Malediven, Mexiko, und auch in der Dominikanischen Republik. Wenn wir nun nach Vorwärts/Länder gehen und dann „Enter“ drücken, scrollen Sie nach unten. Wir können jetzt alle zusätzlichen Länder sehen, die wir hinzugefügt haben. Es gibt nur einen von jedem Volume. Es gibt also nur ein Mexiko, eine Dominikanische Republik, und auch eine Malediven, was bedeutet, dass mit unterschiedlichen Werten jetzt richtig in ziehen. Jetzt werden wir uns die Aggregationspipelines ansehen. 27. Die Aggregationspipeline: Die Aggregationspipeline ist ein interessantes Merkmal von MongoDB. Es erlaubt uns im Grunde, Daten eine Stufe nach dem anderen zu verarbeiten. Derzeit nur Mongo-Dokumentation von vorher. Wenn wir zum Menü auf der linken Seite gehen, können wir zum Aggregationsbereich gehen, klicken Sie darauf. Wenn wir nach unten scrollen, sehen wir ein Diagramm, das ein Beispiel dafür hat wie wir die Aggregationspipeline in unseren Projekten verwenden können. Dieses Beispiel verwendet eine Sammlung namens Orders, die wir hier sehen können. Es ist vergleichbar mit unserer Hotelauswahl, die wir in unserer Datenbank haben. Dieses Bild zeigt freie Phasen der Pipeline, was den Daten führt, die wir letztendlich auf der rechten Seite wollen. Jede Phase der Operation könnte Dinge wie Filtern, Gruppieren oder Sortieren von Dokumenten tun , bis wir am Ende mit den richtigen Daten. Die erste Stufe in diesem Beispiel zeigt vier Datensätze innerhalb unserer Sammlung. Wir setzen dann eine Matching-Stufe, wir erklären dann, dass wir nur irgendwelche Dokumente mit dem Sternencode von A. Over auf der linken Seite abgleichen wollen , sehen wir die einzige Freiheit dieses A-Codes, und der letzte hat D. nur drei dieser vier Dokumente übereinstimmen können, dann gehen diese drei auf die nächste Stufe, die in der Mitte dieses Diagramms ist. Die Stufen werden nach der Kunden-ID gruppiert, die wir hier mit der Gruppenphase festlegen, in der wir mit einem ID-Feld gruppieren. Diese beiden haben die gleiche Kunden-ID. Daher sind diese in die gleichen Ergebnisse gruppiert. Dann ist auch der dritte einzigartig. Wir filtern nun auf zwei Ergebnisse nach unten. Der zweite Teil dieser Phase besteht darin, den Gesamtbetrag dieser beiden Bestellungen zusammenzufassen , die der gleiche Kunde aufgegeben hat. Das ist, was wir in der Summe der letzten Phase sehen. Um mehr darüber zu erfahren, was wir für jede dieser Phasen tun können, können wir auf die Seitenleiste klicken und gehen Sie nach unten zu Aggregationsreferenz, dann Aggregation-Pipeline Kurzreferenz, dann scrollen Sie nach unten. Hier sehen wir eine Liste aller Stufen, die wir verwenden können. Einige davon haben wir bereits in den Beispielen gesehen, wie zum Beispiel in der Gruppenphase. Wir haben eine Gruppe gerade hier, und auch weiter nach unten scrollen. Dies ist die Spielphase, die wir auch gesehen haben. Sie können auf eine dieser aufgeführten Phasen klicken und herausfinden, was jede einzelne tut. Oder ich werde jetzt einige dieser Beispiele in unseren Projekten durchlaufen . Wenn wir zum Hotel controller.js Datei gehen, haben wir Funktionen, um alle Hotels und alle Länder in der Datenbank zu bekommen. Welche dieser beiden gerade hier, aber was, wenn wir etwas genauer über die Daten, die wir auf der Homepage bekommen haben, etwas genauer sein wollen . Ich möchte auch zeigen, dass diese Hotels beide die Ergebnisse auf nur neun beschränken , so dass wir keine überfüllte Homepage haben. Sobald unsere Datenbank viel mehr verschiedene Datensätze speichert. Auch das gleiche für die Länder. Dazu können wir die Aggregationspipeline verwenden , um diese Ergebnisse für die Homepage zu filtern. Lassen Sie uns einige Filter erstellen, um diese Werte nach unten zu filtern. exports.home, ich werde diese Funktion die Homepage-Filter nennen. Wir richten dies als asynchrone Funktion ein, so dass wir await verwenden können, übergeben Sie die Anfrage, die Antwort und auch als nächstes. Dann ein try-catch-Block, um Fehler zu behandeln und den Fehler zu übergeben. Rufen Sie dann als nächstes mit diesem Fehler auf. Lassen Sie uns zuerst mit der Filterung der Hotels innerhalb des Try Blocks an der Spitze befassen. Wir können die Aggregationsmethode verwenden. Lassen Sie uns zunächst eine Konstante aufstellen, um diese Hotels zu halten. Const Hotels gleich erwartet unser Hotelmodell. Dann nennen wir eine Methode für unser Hotelmodell, genau wie wir es oben mit deutlicher und auch für die Find-Methode getan haben. Aber dieses Mal verwenden wir jetzt hotel.aggregates mit einem Semikolon am Ende. Dies nimmt eine Reihe der verschiedenen Stufen ein. Fügen Sie hier ein leeres Array hinzu. Die erste Stufe, die ich verwenden werde, ist die Spielphase. Öffnen Sie die geschweiften Klammern, $ Symbol übereinstimmen. Dann wollen wir die Hotels, die verfügbar sind, übereinstimmen. Legen Sie die verfügbaren Felder auf true fest, und fügen Sie dann ein Komma am Ende hinzu. Nächster Schritt, damit die Homepage es nicht zu überfüllt wird. Die $ -Zeichen-Beispielstufe. Wird zufällig die Anzahl der Dokumente auswählen, die wir angegeben haben. $ Zeichen Beispiel, können wir diese Beispielgröße so einstellen, dass nur neun Dokumente zurückgegeben werden. Sie können dies natürlich ändern, um einen beliebigen Wert zu haben, den Sie bevorzugen. Diese Aggregation, die wir einrichten, wird in neun zufällige Hotels zurückkehren, die ihre Verfügbarkeit auf zwei gesetzt haben. Wir können jetzt etwas Ähnliches mit den Ländern machen. Wir wollen auch nur neun zufällige Länder auf der Homepage zeigen. Genau wie früher, als wir es mit Ländern zu tun hatten, muss dies wieder jedes Land nur einmal zurückkehren. Auch wenn es mehr als ein Hotel pro Land gibt. Um dies zu tun, haben wir die Gruppenphase. Lassen Sie uns diesmal eine Zahlenkonstante einrichten, die Länder genannt wird, setzen Sie dies als Hotel. Aggregat, vorbei an unserem Array. Der erste wird die Gruppenphase sein, $ Symbolgruppe. Wenn wir die Gruppenphase verwenden, müssen wir auch eine ID mit -id übergeben ist gleich unsere Dokumente mit einem ID-Feld ausgeben, das die eindeutige Gruppe durch einen Schlüssel enthält. Dieses Feld ist obligatorisch und wir werden es nach einem Schlüsselnamen des $ Symbol Land gruppieren. Dies gruppiert alle unsere Hotels nach ihrem Land und dann durch ein Komma getrennt. Wir können wieder unsere Probe einrichten, die Probe, genau wie die Hotels die Stichprobengröße von neun Ländern zurückgeben werden. Die Gruppenphase wird in allen Ländern als Input nehmen, dann werde ich einen eindeutigen Wert setzen. Wenn es zum Beispiel zwei Hotels in den USA gibt, erhalten wir nur den Wert der USA in unserem Array. Jetzt haben wir unsere Filter erstellt. Wir möchten, dass diese Daten auf der Homepage angezeigt werden. Lassen Sie uns gehen und das in der index.js von vorne beginnen. Ja. Wir können den Controller oben ändern. Also für den Schrägstrich Home Route, anstatt den Hotelcontroller zur Homepage zu verwenden. Wir können dies ändern, um die Homepage-Filter zu sein, die wir wieder im Hotel-Controller einrichten. Wenn wir nun nach oben scrollen und diese export.homepage finden, brauchen wir diese nicht mehr, damit wir das auskommentieren können. Schließlich unten in unseren Filtern, unten unten, ist die letzte Stufe dieses try-Blocks, ein res.render zu machen. Wir wollen unsere Indexseite rendern, die die Homepage ist. Dann werden wir hier drinnen unsere beiden Werte weitergeben, nämlich die Hotels und die Länder. Wir können diese auf der Homepage durchlaufen, die Länder und dann jetzt Hotels analysieren und eigentlich müssen wir auch auf Länder warten. Als Nebennotiz, solche Versprechungen zu warten, ist es keine gute Idee, hier zu warten und auch hier zu warten. Das ist etwas, was wir später zu Ihnen zurückkommen und reparieren werden. Moment aber, über in unserem Index oder poke Datei, können wir uns mit diesen Ländern und auch mit den Hotels beschäftigen. Also für jetzt, obwohl in unserer index.pug-Datei vorbei, können wir jetzt mit diesen Ländern und Hotels Daten umgehen. Gehen Sie also zu Ansichten und dann index.pug. Schließen wir die Seitenleiste. Im Moment, wenn wir auf unsere Heimatroute gehen. Klicken Sie also auf das Logo oben. Auf dieser Homepage haben wir einen Fehler, da wir noch keine Länderdetails zu diesem Hotelmix analysieren. Lassen Sie uns jetzt gehen und durchlaufen alle Daten, die jetzt in der Vergangenheit sein werden , und dann können wir dieses Hotel Mix-In für jeden anzeigen. Nach unserem Text von CO, erstellen Sie auf einer anderen Liste, können wir dann durchlaufen alle Hotels mit jedem Hotel in Hotels. Denken Sie daran, Hotels sind die Daten, die an diese Vorlage nur hier übergeben wurde. Also jedes Hotel in Hotels. Für jeden in der Datenbank möchten wir diesen Mix auch einblenden und diesen anzeigen, müssen wir auch die einzelnen Hoteldaten übergeben, so dass diese im Mix in verfügbar sind. Lassen Sie uns dies speichern und dann auf die Homepage neu laden. Jetzt können wir einige Hotels sehen, die jetzt auf dem Bildschirm aufgeführt sind. Lasst uns einfach nachsehen. Wir haben neun. Wir haben 1, 2, 3, 4, 5, 6, 7, 8, 9. Das scheint alles gut zu funktionieren. Zurück zum Index. Wir müssen jetzt etwas Ähnliches für die Länder tun. Darunter können wir einen Wrapper hinzufügen. Stellen Sie sicher, dass dies auf der gleichen Ebene wie der Hotel-Wrapper über at.country_wrapper ist, für das CSS später. Der Text h2 von Ländern, ein Link, und das ist genau wie der Link von oben hier, die Hälfte der href geht Schrägstrich Länder und dann innerhalb der Klammern den Text aller sehen. Wir haben diese beiden Links hier für die Länder und auch für die Hotels. Denn denken Sie daran, dass wir die Stichprobengröße und die Homepage auf nur neun Hotels in neun Ländern beschränkt haben. Deshalb, Link in eine neue Seite für alle Hotels und auch alle Länder dann erlaubt es dem Benutzer, alles zu sehen, was in unserer Datenbank ist. Aber wir werden später darauf zurückkommen. Dann werde ich Liste aufheben, um die Länder anzuzeigen, wird das gleiche wie oben tun. Wir sagen, jedes Land in Ländern und erstellen dann ein Listenelement für jedes. Mit einem Link im Inneren verschachtelt. Die href ist mit dynamischer, also öffnet sich der Rücken nimmt, um zu verlinken, um nach vorne Schrägstrich Länder. Hier drinnen wollen wir auf dem Land passieren. _id. Wir müssen Land verwenden. ID, denn wenn Sie sich von vorher in der Aggregationsmethode erinnern, wenn wir zu unserem Controller zurückkehren, setzen wir die eindeutige ID in der Gruppenphase auf das Land. Jetzt innerhalb unseres Indexes ist dieses ID-Feld, wo unser Ländername jetzt gespeichert ist. Dann können wir den gleichen Wert anzeigen. Also die harten, die geschweiften Klammern und dann country._ id, um dies als Text neben dem Link anzuzeigen. Die letzte Sache für diese Vorlage ist, auch das Bild, die Bildquelle, hinzuzufügen. Auch hier verwendet dies die Rückentnahmen. Also Vorwärtsschrägstrich dies ist der Bilderordner, der Ordner des Landes, um das Land Bild zu greifen und dann genau wie oben, können wir in den Ländernamen übergeben, was der Wert des Landes ist. _id mit. JPG-Erweiterung. Also, nur damit diese Unterstrich-ID ein wenig klarer ist, wenn wir zum Hotelcontroller gehen, anstatt diese Indexseite zu rendern, lassen Sie uns einfach eine schnelle res.json machen und dann können wir die Länderdaten anzeigen. Speichern Sie diese und laden Sie die Startseite neu. Jetzt sehen wir, dass dieses obligatorische ID-Feld jetzt auf das jeweilige Land gesetzt wird. diesem Grund verwenden wir die Unterstrich-ID in unserer Vorlage, um auf die Länderwerte zuzugreifen und sie dann auf dem Bildschirm anzuzeigen. Wenn wir nun unseren Hotelcontroller wieder einsetzen, entfernen Sie alle res.json und fügen Sie den res.render wieder ein, speichern Sie diesen und laden Sie dann unsere Homepage neu. Wir sollten jetzt auch neun Länder sehen. Gehen wir nach unten, 1, 2, 3, 4, 5, 6, 7, 8, 9. Für Hotels sagen wir auch neun, die wir vorher gezählt haben und wenn wir durchblättern, sollten wir keinen Hinweis auf Hotel 3 sehen, da dieses nicht verfügbar ist. So sieht alles gut aus und jedes Mal, wenn wir aktualisieren, sollten wir diese in einer anderen Reihenfolge sehen, weil wir eine zufällige Auswahl unserer Hotels verwenden. Dies ist eine Einführung in die Aggregationspipeline. Wir werden später darauf zurückkommen, wenn wir mit der Suche beginnen , die wir in der Kopfzeile hinzugefügt haben. Im nächsten Video werden wir jedoch weiterhin mit Mongo arbeiten, indem wir uns ansehen, wie Daten in unserer Datenbank aktualisiert werden können. 28. Das Formular Bearbeiten und Entfernen: Wenn Sie zu unserer Anwendung gehen und dann zum Admin-Bereich gehen, also /admin und dann nach unten gehen, haben wir bereits diese hinzufügen neuen Hotel-Link verwendet, die Sie hier unten sehen. Aber jetzt gehen wir weiter und arbeiten mit dem Link Bearbeiten/Entfernen Hotel. Es wird auf ein Formular verlinken, in dem der Administrator nach einem Hotel suchen kann , indem er entweder die Hotel-ID oder den Hotelnamen verwendet. Sobald dieses Formular eingereicht wurde, wird es das Spiel im Hotel zurückgeben und es uns ermöglichen , entweder das Hotel zu aktualisieren oder zu löschen. Der erste Schritt besteht darin, eine Seitenvorlage mit einem Formular zu erstellen. Lassen Sie uns zur Seitenleiste gehen und dann in unsere Ansichten, erstellen Sie eine neue Datei namens edit_remove.pug. Im Inneren können wir die Layouts erweitern, so dass Layouts erweitert werden und dann Inhalte blockieren und sicherstellen, dass das korrekt geschrieben ist. Ich nehme nur ein einfaches Formular an, in dem Sie nach dem Hotel-ID oder dem Hotelnamen suchen können . Um zu beginnen, werde ich nur eine Überschrift der Ebene 3 für den Titel hinzufügen, den wir später übergeben werden, das Formular, die Aktion kann gleich einer leeren Zeichenfolge sein, weil wir eine Post-Anfrage zu der aktuellen Route hinzufügen , auf der wir sind. Die Methode wird POST sein und dann innen hier verschachtelt, werde ich ein div mit der Klasse von form_input hinzufügen. Lassen Sie uns beginnen, indem Sie ein Label für die erste hinzufügen, die die Hotel-ID sein wird, also label für hotel_id und dann den Text von Hotel id. Die Eingabe, es wird die Art des Textes, den Namen von hotel_id, und dann ein -ID, die mit seiner Bezeichnung übereinstimmt. Denken Sie daran, bevor wir gesagt haben, dass wir entweder für dieses Hotel suchen , das aktualisieren oder löschen möchte, indem Sie diese Hotel-ID verwenden, oder wir können nach dem Hotelnamen suchen, wenn wir es vorziehen. Lassen Sie uns ein p Elemente mit dem Text hinzufügen oder so der Benutzer weiß, dass er entweder seine ID oder den Namen verwenden kann. Ich werde diese Formulareingaben kopieren und dann unten einfügen. Stellen Sie sicher, dass alles schön aufgereiht ist und dann wird dieser für den Hotelnamen sein. Ändern Sie ID als Name, der Name zu sein , und auch die ID. Dies hat auch den Eingabetyp von Text und das letzte, was wir tun müssen, ist eine neue Formulareingabe hinzuzufügen. Dies wird für die Schaltfläche zu senden sein, die Art von submit sein wird, und auch die Klasse, die einige der anderen Schaltflächen übereinstimmt, die wir früher von button_small erstellt haben . Die Texte der Bestätigung. Speichern Sie das, und dann können wir los. Dies ist ein Formular, das nach dem Hotel suchen wird, das Sie aktualisieren oder löschen möchten. Wenn wir nun zu unserer Admin- und.pug-Datei gehen, ist dies der mittlere Link, der zuvor angesehen wurde. Dies verweist jetzt auf /admin/edit-remove also werde ich dies kopieren und dann können wir uns mit der Route befassen, zu der dies verlinkt wird. Wir tun dies wie immer innerhalb der index.js Datei. Ich werde dies innerhalb dieses Admin-Abschnitts hinzufügen. Router, und dies ist eine Get-Anforderung, Einfügen der Dateipfad von Edit entfernen. Dies wird den HotelController ausführen und ich werde eine Funktion namens EditRemoveGet erstellen. Jetzt können wir diese EditRemoveGet innerhalb des HotelControllers erstellen , so unten unten, exports.EditRemoveGet und richten Sie dies eine Funktion, die eine Anfrage und Antwortobjekte übernimmt. Alles, was wir hier tun müssen, ist für alle Seitenvorlage, die erstellt wird, zu verhaften oder zu rendern. Die Seitenvorlage wurde durch Komma getrennt als edits_remove bezeichnet. Wir können dann in unserem Titel für unsere Seite der Suche nach Hotel übergeben zu bearbeiten oder zu entfernen. Fügen Sie am Ende ein Semikolon hinzu. Speichern Sie diese und gehen Sie zum Browser und klicken Sie dann auf Bearbeiten/Entfernen Hotel. Hoffentlich sollten wir unser Formular unten finden. Jetzt haben wir unser Formular, sobald der Admin nach dem Hinzufügen einer ID oder eines Namens den Bestätigungs-Button trifft. Dies wird dann eine Post-Anfrage senden, daher müssen wir diese Post-Anfrage erneut in der index.js lösen . Duplizieren Sie dann den Code von vorher, fügen Sie ihn ein. Wir werden die gleiche Route verwenden, aber diesmal eine Post-Anfrage erstellen. router.post und anstelle von EditRemoveGet wird es EditRemovePost sein. Dann richten Sie dies innerhalb unseres Controllers, auch controller.js, so exports.EditRemovePost. Dies wird sich mit der Datenbank beschäftigen, so dass wir dies als asynchron markieren können , so dass wir eine Wartezeit innerhalb der Funktion verwenden können, eine Anfrage, Antwort und auch als nächstes übergeben können. Richten Sie unseren try-Block und auch den Catch für alle Fehler ein, die dann zum nächsten gehen würden. Das erste, was wir in Seite dieses Try Blocks tun werden, ist, die Daten zu greifen, die an uns gesendet werden. Innerhalb unseres Formulars werden wir entweder eine Hotel-ID oder den Hotelnamen erhalten , also lassen Sie uns einige Konstanten haben, um diese Werte zu speichern. Die erste von HotelID. Diese HotelID wird innerhalb der request.body gespeichert werden. Da wir eine Post-Anfrage stellen, können wir auf diese Daten zugreifen, wenn wir über unser Formular in Bearbeiten/Entfernen gehen. Jetzt können wir darauf mit dem Namen zugreifen, den wir ihm hier von hotel_id gegeben haben. Wir verwenden dies hier drin, also hotel_id, und ich werde den zwei Pipe-Operator verwenden, um alle oder null zu sagen. Der Grund, warum wir das tun, ist, weil nur die Hotel-ID oder der Hotelname anwesend sein wird. Daher wird die Gesamtsumme null sein. Daher müssen wir behandeln, was passieren wird, wenn wir einen Nullwert erhalten. Wir können das Gleiche direkt unten machen. Konstante für HotelName entspricht req.body, und diese ist.hotel_name, also haben wir entweder den Hotelnamen oder es wird null sein. Genau wie früher, werden wir jetzt auch suchen oder modellieren mit der.find Methode. Lassen Sie uns die Konstanten namens HotelData gleich auf hotel.Find warten. Wir werden diesmal etwas anderes machen, weil wir nicht wissen , ob wir nach der Hotel-ID oder dem Hotelnamen suchen. Da wir nicht sicher sein können, welche Daten an uns übergeben werden, stellt Mongo uns den Operator all zur Verfügung und dann können wir ein Array dieser beiden Werte bereitstellen , um entweder nach dem einen oder anderen zu suchen. Übergeben Sie unsere Objekte und verwenden Sie dann die $or. Dies wird in einem Array nehmen und innerhalb dieses Arrays können wir unsere beiden Werte übergeben, nach denen wir suchen möchten. Öffne die geschweiften Klammern. Die erste ist unsere Hotel-ID. Wenn wir die Hotel-ID aus dem Formular erhalten, wollen wir nach der ID suchen. Die ID Mongo ist _id, so können wir überprüfen, ob dies gleich Hotel-ID ist , die unsere Konstante gerade hier ist. Wenn dies nicht vorhanden ist, getrennt durch Komma, können wir eine zweite Prüfung hinzufügen. Der zweite Fall ist für, wenn wir den Hotelnamen anstelle der ID erhalten. Daher wollen wir das Feld hotel_name aus unserer Datenbank überprüfen. Dann wollen wir überprüfen, ob dies gleich unserer HotelName Variable ist, die wir gerade hier haben. Fügen Sie Hotelname hinzu - Ich hoffe, das macht Sinn. Wir machen eine Find-Methode, und wir verwenden den o-Operator, um zu überprüfen, ob eines dieser Felder eine Übereinstimmung ist. Nachdem wir unsere Punktsuche Methode verwendet haben, werden wir nun eine Kollation angeben, nach der gesucht werden soll. Wenn wir nur das Semikolon am Ende für jetzt entfernen und dann an die end.collation ketten, öffnen Sie die Klammern und übergeben Sie dann ein Objekt. Kollation ermöglicht es uns, sprachspezifische Übereinstimmungen zu machen, also werde ich nur selbst und jetzt eingeben. Das Gebietsschema wird an en gesendet werden, fügen Sie ein Komma hinzu, und dann die Stärke als Wert von zwei, also fügen wir am Ende ein Semikolon hinzu. Mit der Kollatierung, wie wir hier haben, können wir die Kollatierung sprachspezifische Übereinstimmungen machen. Hier erklären wir, dass wir englische Texte verwenden, und die Stärke ist ein optionaler Wert. Das Festlegen des Werts von zwei ist eine sekundäre Vergleichsebene, was bedeutet, dass Groß- und Kleinschreibung nicht beachtet wird. Dies ist gut, weil es bedeutet, dass wir zum Beispiel einfach das Wort Hotel innerhalb unseres Formulars hier unten eingeben können , genau so, ohne ein großes h zu verwenden, und Sie werden immer noch das Hotel aus der Datenbank finden. Es gibt auch verschiedene Nummern, die Sie hier verwenden können, und diese sind alle in der Dokumentation aufgeführt, wenn Sie jemals einen Bedarf für sie haben. Dann werden wir eine if-else-Anweisungen hinzufügen, um das Ergebnis zu behandeln , was zu tun ist, wenn ein Ergebnis in der Datenbank gefunden wurde. Zurück zu unserem Code. Danach wird eine if-Anweisung erstellt. Wenn die HotelData, die diese Konstante gerade hier ist, ist .length größer als Null. Hier überprüfen wir im Grunde, ob diese feine Methode irgendwelche Werte innerhalb der HotelData gespeichert hat. Wenn dies der Fall ist, wird der Wert größer als Null sein, so dass wir dann weitergehen und eine res.json machen und unsere HotelData ausgeben können . Wir werden natürlich darauf zurückkommen, nachdem wir die HotelData zu unserer Vorlage gemacht haben, aber im Moment können wir dies einfach als res.json verlassen, dann fügen wir dem return-Schlüsselwort danach hinzu, so dass wir nicht zur l-Anweisung übergehen, wenn der Abschnitt wahr. Wenn es falsch ist, erstellen wir dann eine else-Anweisung, und dann könnten wir res.redirect tun, um den Benutzer zu /admin/edit-remove umzuleiten . Grundsätzlich, wenn keine Daten in der Datenbank gefunden werden oder es keine Übereinstimmungen gibt, werden wir einfach auf die aktuelle Seite weitergeleitet, also zum Browser können wir dies ausprobieren. Dann lassen Sie uns für Hotel 7 testen, es bestätigen, und dann bekommen wir unsere res.json mit dem HotelData zurückgegeben. Die Hoteldaten entsprechen dem Hotel 7, was gut ist, und wir haben auch den Kleinbuchstaben für diese Suche verwendet 2. Versuchen wir es auch mit der Hotel-ID. Lassen Sie uns eine dieser Hotelausweise von mLab, Hotel 6, holen Sie dies in, es bestätigen. Jetzt erhalten wir den Wert des Hotels 6. Was ich jetzt tun möchte, anstatt ein res, json gerade hier zu tun, werde ich eine neue Seitenvorlage namens Hotel auf dem Scroll-Detail erstellen. Dies wird im Grunde die erweiterte Ansicht des Hotels mit der vollständigen Beschreibung sein. Lassen Sie uns beginnen, indem Sie unsere res.json entfernen, und stattdessen in res.render tun, übergeben Sie unsere Vorlage, die wir von hotel_detail erstellen werden. Der Titel für die Seite von Hinzufügen/Entfernen Hotel, und dann übergeben Sie in unserem HotelData, dann öffnen Sie die Seitenleiste. Wir können jetzt dieses Hotel Detailvorlagen erstellen. Erstellen Sie innerhalb von Ansichten eine neue Datei von hotel_detail. Ich werde es setzen. Diese Vorlagen werden auch später wiederverwendet, wir brauchen sie auch, wenn wir auf eines der einzelnen Hotels in unserer Liste klicken , um dann zur erweiterten Beschreibungsansicht weitergeleitet zu werden, also lasst uns an unserem Hoteldetail arbeiten, so erweitert unsere Layouts. Diese Seite wird auch verwendet, um diese res.json zu ersetzen, so sobald wir ein passendes Hotel haben, werden wir dann dieses Hotel auf dem Bildschirm anzeigen. Wir müssen auch unser Hotel Mixin importieren, damit wir den gleichen Code wiederverwenden und dies anstelle dieses res.json anzeigen können. In unserer Vorlage können wir mixins/_hotel, Inhalt blockieren. Eingekerbt m werden wir jetzt durch jedes Hotel in HotelData Schleife. HotelData, erinnern Sie sich, wurde an diese Vorlage nur hier übergeben, zurück zu unseren Vorlagen, können wir unsere Schleife erstellen, jedes Hotel in HotelData. Wir können das div von.hotel verwenden, so viel wie der Rest des CSS später, und dann andere wird Mischen wird plus Hotel vorbei im individuellen Hotel, das wir hier in der Schleife haben. Nun, wenn wir das speichern und dann zu unserem Code über, laden Sie den Browser neu und scrollen Sie dann nach unten. Jetzt anstatt dieses res.json, wir jetzt unser Hotel mit diesem Hotel detail.profile. Wir gehen auch in seinem Hotel zu unserem Hotel Mixin, um den Code wiederzuverwenden, der unser Hotel anzeigt. Wir sind gerade für dieses Video fertig, das letzte, was ich oben in diesem Hotel tun möchte, ist, zwei Tasten hinzuzufügen. Einer wird eine Schaltfläche sein, die gehen wird, um voran aktualisieren dieses Hotel, das wir ausgewählt, und dann wird die zweite sein, um dieses Hotel zu löschen. Im Hoteldetail über unserem Mixin, lassen Sie uns einen Link für unseren Button hinzufügen. Der Href wird gehen, ich brauche die Abatics, das Hotelsymbol. Hotel._ ID/Update. Hier erstellen wir eine Route der Hotel-ID, gefolgt von /update. Dies ist, was wir im nächsten Video verwenden, um das Update zu behandeln, verschachtelt innen hier, fügen Sie unsere Schaltfläche mit der Klasse der Taste klein, und dann den Text der Aktualisierung Hotel. Nun, wenn Sie einfach diese beiden Zeilen kopieren, und fügen Sie dies noch einmal unten hinzu. Diese können auch für unsere Löschrouten sein, also ändern ist zu löschen. Dann kann dieser Delete Hotel sein. Geben Sie das Speichern und laden Sie dann den Browser neu, bestätigen Sie die Formularübermittlung, und es gibt unsere Aktualisierungs- und Lösch-Buttons oben. Später werden wir diese Schaltflächen auch ausblenden, damit nur der Administrator sie sehen kann. Jetzt innerhalb unseres Admin-Bereichs, haben wir eine Schaltfläche unten ganz unten erstellt, die Links zum Bearbeiten entfernen Hotelansicht. Hier können wir nun nach einem Hotel suchen, indem wir entweder den Personalausweis oder den Namen unseres Hotels genau so verwenden . Wir können dann auf Bestätigen klicken, wurden dann in das Hotel gebracht, das ausgewählt wurde, und dann haben wir die Möglichkeit, entweder zu aktualisieren oder zu löschen dieses Hotel, und diese Aktualisierung Hotelfunktionalität ist, was wir werden bewegen auf in das nächste Video. 29. Aktualisierung von Datensätzen: Wir haben nun erfolgreich die Datenbank für das Hotel durchsucht und zeigen sie aus unserer Sicht. Im letzten Video haben wir auch diese beiden Buttons hinzugefügt, um das Hotel zu aktualisieren und auch zu löschen. Wenn wir auf die Schaltfläche „Hotel aktualisieren“ klicken, übergeben wir nun die Hotel-ID in der URL als Parameter, kurz bevor Schrägstrich Updates. Dies liegt daran, dass wir dies im Hotel detail.profile einrichten. Wir haben das hier in unserem Link eingerichtet. Mit dieser eindeutigen Hotel-ID wählen wir das Hotel aus der Datenbank aus, die wir aktualisieren oder löschen möchten. Zuerst können wir die Route in der Datei index.js behandeln. In unserem Admin-Bereich auf der Edit entfernen, lassen Sie uns router.get hinzufügen. In diesem Video werden wir die Updates behandeln. Die Route ist Schrägstrich admin Schrägstrich vorwärts. Wir möchten, dass dieser Abschnitt dynamisch ist, also verwenden wir einen Doppelpunkt und geben dieser ID einen Namen Hotel-ID. Aktualisieren Sie dann. Wir wollen den Hotel-Controller leiten. Dann erstellen Sie eine Funktion namens Update hotel get. Dies wird dann ein Formular auf einem Bildschirm angezeigt, mit dem wir die Hoteldetails ändern können , bevor Sie eine Post-Anfrage erstellen, um diese tatsächlich an die Datenbank zu senden. Oben in Hotel-Controller, erstellen wir dieses Update Hotel bekommt. Gehen wir zum Hotel controller.js. Unten unten, exportiert in Richtung Aktualisierungen. Hotel bekommt, das wird eine Spüle sein. Intelligente Dysfunktion mit dem a sync-Schlüsselwort, Übergabe neuer Anfrage, die Antwort und auch weiter. Wir können einen try-Block hinzufügen. Dann fügen Sie eine Konstante des Hotels hinzu. Dies wird Gewicht auf die Daten hinzufügen, wenn wir in die Datenbank gehen und einen Datensatz finden. Der einzige Datensatz, den wir finden möchten, ist das Hotel, das hier oben als Parameter übergeben wird. Innerhalb des Anforderungsobjekts würden wir need.params verwenden. Erwartet das Hotel. Lassen Sie uns einen finden, der einen Datensatz zurückgibt, der übereinstimmt. Wir können dies mit dem Feld _ID übereinstimmen. Die ID, die wir abgleichen möchten, wird in request.params gespeichert. Wir nannten dies, wenn wir gehen index.js Hotel ID. Request.params Hotel-ID. Danach wollen wir dann kurz danach unseren Cache-Block hinzufügen. Um irgendwelche Fehler zwischenzuspeichern, geben Sie dies weiter für unsere Middle-Ware, also nächsten Fehler. Um dies zu überprüfen, funktioniert alles in Ordnung nach unserer Konstante gerade hier. Ich werde res.json tun, um zu sehen, welche Daten an uns zurückgegeben werden. Wir können dann in diesem Hotel passieren, das wir suchen und dann zu unserem Projekt gehen und dann auf Reload drücken. Jetzt können wir sehen, dass wir die Details aus dem Hotel voll bekommen , was die ID ist, die als Parameter in der URL übergeben wird. Wenn wir zurück zu unserem Admin gehen und nach einem anderen Hotel in Nummer 6 suchen. Ich werde es aktualisieren. Wir haben den Wert von Hotel 6 zurück zu uns. Jetzt wissen wir, dass wir die richtigen Informationen anstelle dieses res.json erhalten, möchten wir jetzt eine Seitenvorlagen rendern. Die Vorlage, die ich wiederverwenden werde, ist die Hotelvorlagen hinzufügen. Dies ist im Grunde die Form, die alle Felder hat, die wir für unser Hotel benötigen. Wir können voran gehen und alle von diesen ändern und dann aktualisieren. Anstelle der res.json Änderungen res.render zu sein. Übergabe in unsere Vorlagen hinzufügen Hotel. Der Titel der Seite von update hotel. Dann können wir schließlich auch die in unseren Konstanten des Hotels gespeicherten Daten weitergeben. Passt zu unseren Vorlagen und geben Sie ihnen einen Safe. Jetzt gehen wir zum Browser und dann er Reload statt der JSON sollten wir jetzt sehen, unsere Seite hat jetzt ein Formular ist am unteren Rand. Dieses Formular wird verwendet, um das Hotel zu aktualisieren. Innerhalb dieses Formulars möchten wir idealerweise die Daten bereits in all diese Felder übergeben. Zum Beispiel sollte es Hotel 6 sagen. Wir können hineingehen und einfach die Daten ändern, die da sind. Wir können diese Werte einfach verwenden, kurz bevor wir dies tun, ich werde diese Form in ein Mixin setzen, um die Dinge organisiert zu halten. Über die Seitenleiste und dann neben den Ansichten und Mixins, erstellen Sie eine neue Datei namens Unterstrich Hotel Unterstrich Formular. Mit der.org-Erweiterung erstellen Sie unseren Mixin-Namen an der Spitze genau wie wir es vorher getan haben. Hotelformular, das die Hoteldaten als Argument erhalten wird. Dann auf Hotel.org in der Seitenleiste. Dies ist das Formular, das jetzt für die Updates und auch den Abschnitt Hotel hinzufügen rendert. Dann können wir das von unserer Form bis nach unten ablegen. Unser vollständiges Formular Abschnitt und speichern Sie die Datei. Jetzt gehen Sie zurück in ein Mixin von Hotelform und wir können das einfügen. Wenn wir wieder nach oben gehen und dann richtig eingerückt, speichern Sie diese Datei. Mit mixin jetzt Setup können wir jetzt zurück gehen, um hotel.pug hinzuzufügen. Fügen Sie dann das Mixin oben in der Datei ein. Fügen Sie die Mixins, die ein Ordner und den Namen der Unterstrich Hotel, Unterstrich Form. Denken Sie daran, dass wir die PAG-Erweiterung nicht benötigen. Wir können dieses Mixin überall in unserer Datei aufnehmen. Ich werde mein Backend unten hinzufügen. Wir plus Hotelformular. Person im Hotel Daten. Wenn wir das jetzt speichern und testen, funktioniert es gut. Ich lade in, wir sehen immer noch das Formular ist jetzt auf dem Bildschirm, aber wir haben dies zu einem Mixin ausgelagert. Zurück zu diesen Formularfeldern, lassen Sie die Hoteldaten bereits ausgefüllt. Dies kann innerhalb der Mixin hinzugefügt werden, die wir gerade erstellt haben, um das Hotelformular. Gehen wir zu einem unserer Felder zu beginnen. Fangen wir mit dem Hotelnamen an. Die Art und Weise, wie wir dies tun können, um die Lautstärke einzustellen. Innerhalb der Eingaben können wir den Wert gleich einem Hotel setzen , das wir als Argument hier erhalten. Dann ist der Name, den wir wollen, ist.hotel_name. Eigentlich ist dies eine Zeichenfolge. Wir wollen die Zitate nicht verwenden. Nun, wenn wir das speichern und dann laden Sie es unser Formular neu. Wir sehen nun den Wert des Hotels 6, das jetzt in unsere Form weitergegeben wird. Das können wir auch mit den anderen Feldern tun. Die Beschreibung. Gehen Sie in unseren Textbereich, weil wir Textbereich sagen. Wir müssen das etwas anders machen. Wir müssen den Text so einstellen, dass er gleich hotel.hotel_description ist. Anstatt die Volume-Attribute wie in anderen Eingaben zu verwenden , können wir auf die Sterne-Bewertung gehen. Wir haben das Bild gemacht, damit wir das vorerst nicht brauchen. Die Sternebewertung bringt Sie zurück zum Wert von hotel.star_rating. Das Land. Hotel, Land, die Kosten pro Nacht. Wieder nach dem erforderlichen Wert wird gleich dem Hotel Punktkosten pro Nacht mit Unterstrichen sein. Speichern Sie das und überprüfen Sie es dann im Browser. Nachladen. Großartig, das macht jetzt die Aktualisierung der Informationen für ein Hotel so viel einfacher. Als nächstes müssen wir die Post-Anfrage einrichten, um die Updates tatsächlich zu behandeln, wenn wir auf Bestätigen klicken. Übergeben Sie zum Router, der sich innerhalb des Indexpunkts js befindet. Lassen Sie uns diese schließen, öffnen Sie den Index dot js Duplikate über get Anfrage für Updates. Aber dieses Mal, Änderungen werden Post und dann der Hotel-Controller wird aktualisiert Hotelpost werden. Dann erstellen Sie dies im Hotelcontroller. Exportiert Punkt-Updates Hotel Post. Dies wird in einer Synchronisierungsfunktion mit der Anfrage und den Antwortobjekten den ganzen Weg als nächstes für die Middleware sein. Richten Sie unsere Funktion ein. Wir können mit der Fehlerbehandlung beginnen. Versuchen Sie auch einen Catch-Block überprüfen Sie die Fehler. Dann geht es zu einer Middleware mit der nächsten. Da gehen wir. Innerhalb unseres try-Blocks möchte ich das erste, was ich tun möchte, durch Konstante absetzen. Dies wird sein, um die Hotel-ID zu speichern, die an uns übergeben wurde. Diese Hotel-ID-Nummer ist als Parameter verfügbar, die wir gerade hier haben. Lassen Sie diese jetzt einrichten, const Hotel Id ist gleich Punkt params dot hotel Id capital I. Dann eine zweite Konstante des Hotels, die gleich sein wird, um Hotel warten, das ist unser Modell. Dieses Mal werden wir eine Methode namens finden nach Id und Update oder einen gemeinsamen Fall oder finden Sie nach Id und Update. Dies ist eine Mongo-Methode, die wir verwenden können, um dann in der Hotel-ID übergeben, die wir haben Stern gerade hier. Wir können dann den Rekord innerhalb Mongo erhalten und dann zurück zu den neuen Details. Zunächst einmal die ersten Argumente, die wir hinzufügen werden, ist dies eine Variable der Hotel-ID. Dieses erste Argument ist die Idee des Datensatzes , den wir innerhalb unserer Datenbank finden wollen, getrennt durch ein Komma. Der zweite Parameter sind die Daten, mit denen wir sie aktualisieren möchten. Diese Daten können innerhalb der Anfrage, dem Körper, gefunden werden. Wir verwenden auch requester Körper, wenn ursprünglich das Hotel erstellt, die direkt oben ist. Wenn gehen, um Hotelpost zu erstellen, das war eine Funktion, die wir ursprünglich verwendet, um ein neues Hotel einrichten. Denken Sie daran, dass wir hier ein neues Hotel mit Informationen aus dem Anforderungsobjekt erstellt haben , das im Körper gespeichert ist. Dies sind die Daten, die aus dem Formular übergeben werden. Wir werden die gleichen Daten unten verwenden. Aber dieses Mal, anstatt ein Hotel zu erstellen, werden wir es verwenden, um es zu aktualisieren. Der dritte Parameter. Schließlich werde ich eine Optionsobjekte hinzufügen, so durch Komma an einem Objekt getrennt und wir können neu setzen, um wahr zu sein. Standardmäßig erhalten wir nach der Aktualisierung weiterhin den ursprünglichen Datensatz an uns zurück. Wenn wir voran gehen und neu auf wahr zu sein, werden wir sicherstellen, dass wir die geänderte oder aktualisierte Version in unserer App anzeigen. Dann rüber zum Browser. Wir können jetzt etwas ändern. Nennen wir das Hotel 66, es bestätigt. Wir sehen nichts auf dem Bildschirm, weil wir nicht einrichten, was als Nächstes tut. Aber stattdessen, wenn wir zu mLab gehen und dann aktualisieren. Jetzt können wir sehen, dass wir das Hotel 66 in unseren Aufzeichnungen haben. Zurück zu unserem Projekt. Wir können sehen, dass sich das noch in der Ecke dreht. Ravenous Browsen hing und wir werden eine Pause machen oder umleiten, um diese dann auf die Route umleiten, die nicht damit umgehen wird. Nach unserer Konstante des Hotels, lassen Sie uns einen Ruhepunkt umleiten. Innerhalb der hinteren Ticks können wir alle Schrägstriche alle hinzufügen und dann Schrägstrich die ID des Hotels. Wir haben dies innerhalb dieser Variablen hier gespeichert. Wir können dies einfügen, speichern und dann neu laden. Unsere Post Anfragen ist jetzt Datenbank aktualisiert und auch uns umgeleitet Schrägstrich alle weiterleiten und dann Schrägstrich die ID des Hotels. Unten unten sehen wir, dass wir diese Route noch nicht eingerichtet haben und deshalb sehen wir einen Fehler. Aber das Hotel aktualisiert sich immer noch im MLab. Wir werden diese Route später erledigen. Dieselbe Route wird auch benötigt, wenn wir auf Hotel klicken. Wenn Sie auf die Homepage gehen, indem Sie auf das Logo klicken, und klicken Sie dann auf eines dieser Hotels. Sehen Sie sich die vollständigen Details an. Dies führt uns auf die gleiche Route, die Schrägstrich alle und dann das Hotel Id und natürlich haben wir die Nachricht von nicht gefunden, weil wir noch nicht erstellt diese im Browser. Bevor wir dieses Video dort verlassen, versuchen wir noch ein Update in einem anderen Hotel, um sicherzustellen, dass alles gut funktioniert. Zurück zum Admin, so Schrägstrich Admin, Bearbeitungen und Entfernen. Wir können für Hotel Nummer 12 gehen, Bestätigen. Es gibt Hotel 12, klicken Sie auf die Schaltfläche Aktualisieren und ändert sich zu Hotel 122, Bestätigen Sie mit dem mLab. Scrollen wir nach oben und unten, damit Sie diese Berichte sehen können, unsere normalen Hotels dort. Gehen Sie zur nächsten Seite. Da ist unser aktualisierter Hotelname. Ich werde diese schnell wieder auf die Art und Weise zurücksetzen, wie es war. Hotel 12, bestätigen Sie dies. Dann können wir zurück zu Admin gehen, einfach Schrägstrich admin innerhalb der URL. Wir können auch zum Hotel 66 gehen, das ist das erste, das wir bearbeitet haben. Wir können sehen, dass wir dafür kein Bild hinzugefügt haben. Lassen Sie uns gehen, um Änderungen zu Hotel sechs im Hotel Sechs Bild zu aktualisieren. Aktualisieren Sie diese dann in der Datenbank. Dies sind alle unsere Updates funktionieren jetzt gut. Bevor wir jetzt weitermachen diese eine kleine Sache müssen wir nur beheben, wenn wir zum Admin gehen. Wenn wir dann zu Bearbeiten und Entfernen gehen, suchen Sie nach einem Hotel, klicken Sie auf Bestätigen und dann auf Aktualisieren. Derzeit haben wir alle Felder im Inneren hier oder neu bevölkert und das funktioniert wirklich gut bei der Aktualisierung des Hotels. Jedoch wird eine Person in diesen Daten ein Problem verursachen, wenn wir ein neues Hotel hinzufügen. Lassen Sie uns einfach schnell das Hotel 12 Bild wieder hinzufügen und dann bestätigen. Dann, wenn wir zu Admin gehen und dann Schrägstrich hinzufügen. Denken Sie daran, dass Schrägstrich fügt verwendet die gleichen Vorlagen der gleichen Form wie wir verwendet, um das Hotel zu aktualisieren. Aber wir können innerhalb der Vorlage sehen, dass wir einen Fehler haben. Diese Fehler werden verursacht, weil innerhalb des Formulars wir in den Hoteldaten zugreifen. Gehen Sie zu einem Mixin und hier sind wir Zugang zu Hotel, das in einem Haufen von Optionen hier übergeben wird. Grundsätzlich erwartet dieses Formular, dass Sie die Hoteldaten erhalten. Allerdings, wenn wir zum Hotel-Controller gehen und dann, wenn wir gehen, um Hotel zu aktualisieren bekommen. Hier haben wir die Hoteldaten vorgestellt, die es benötigt. Aber wenn Sie scrollen nach oben, wo wir das Hotel erstellt, das ist in schaffen Hotel bekommen Sie nur hier. Dies verwendet auch das gleiche Add Hotel Formular. Wir geben jedoch keine Hotelinformationen ein, und in der Tat haben wir keinen Grund dazu. Ein Weg um das herum ist vorbei in der Hotelform Mixin. Unterstreichen Hotel, Unterstrich Form, wir können voran gehen und zunächst Hotel ein leeres Objekt zu sein. Hotel ist gleich einem leeren Objekt und dann speichern und neu laden. Jetzt können wir sehen, wenn wir ein neues Hotel hinzufügen, wir haben jetzt dieses Formular wieder auf dem Bildschirm. Hotel auf diese Weise in einem leeren Objekt hinzufügen, wird die Vorlage auf den Hotelnamen aufmerksam gemacht und Sie werden wissen, ob ein Fehler vorliegt. Aber da es sich um ein leeres Objekt handelt, wird es unsere Felder nicht stören. Großartig, das Hauptziel in diesem Video war es, die Hotels in unserer Datenbank erfolgreich zu aktualisieren und wir haben jetzt diese Arbeit. Als nächstes werden wir auch eine weitere wichtige Aufgabe abdecken und das ist, Datensätze aus unserer Datenbank löschen zu können. 30. Löschen von Datensätzen: Die letzte große Aktion, die wir durchführen möchten, ist, Elemente aus unserer Datenbank löschen zu können. Sie hören oft die Abkürzung CRUD, wenn Sie mit Datenbanken zu tun haben. Das ist die Abkürzung für die vier Hauptaktionen, die erstellen, lesen, aktualisieren und löschen sind . Wir haben bereits Daten erstellt, wir können auch Daten lesen und dann im letzten Video haben wir unsere Daten aktualisiert. Es ist jetzt an der Zeit, auch Datensätze zu löschen. Lassen Sie uns voran und erstellen Sie ein Testhotel mit über einen Admin-Folds/hinzufügen. Das ist unser Test, Test, und wir können jedes Bild wählen, jede Sternebewertung ist in Ordnung und das Land und dann bestätigen. Nach dieser Weiterleitung haben wir nun auf formal/all und dann die ID des Landes umgeleitet , das wir erstellt haben. Holen Sie sich diese neue Hotel-ID, indem Sie diesen Abschnitt hier kopieren. Überprüfen Sie dann, dass dies in einer Datenbank über ein mlab gespeichert wird, also drücken Sie reload. Nur überprüfen, wir haben unseren Test, also gehen Sie zum ersten Abschnitt, und da sind wir. Da ist unser Testhotel in der Datenbank. Wenn wir gehen zurück zu unseren Projekten und dann gehen Sie zu admin so forward/admin, können wir auswählen, bearbeiten und entfernen Hotel. Genau wie wir im letzten Video getan haben, können wir in Hotel-ID einfügen, die für Tests erstellt wurde, bestätigen, und dann werden wir in die volle Ansicht gebracht und wir werden die Schaltflächen aus dem letzten Video, wo wir aktualisieren und löschen im Hotel. Klicken Sie diesmal auf den Lösch-Button und dann weitergeleitet an forward/admin, weiterleiten/unsere Hotel-ID, forwad/delete. Dies liegt daran, dass wir dies früher im Hotel detaillierte Vorlagen gesagt. Öffnen Sie die Seitenleiste und gehen Sie dann in hotel_detail. Dies ist der Link, den wir im Inneren von hier gesagt haben, und das ist, was wir voran gehen und in der Router-Indexdatei [unhörbar] behandeln werden. Schließen Sie es unten und dann über in der index.js, dieses Mal werden wir router.get setzen, um die String-Winter-Szene von Admin vorwärts/unsere dynamischen Segmente, die Hotel ID Kapital I ist, und dann weiter/löschen. Dies folgt dem gleichen Muster wie der Update-Abschnitt gerade oben, aber diesmal mit delete. Wir werden dann unsere Hotel controller.delete Hotel erhalten erstellen. Dann zum Hotel-Controller können wir nun diese Funktion erstellen. Hotel controller.js und dann nach unten, so ist dies exports.delete Hotelgäste. Dies wird eine Synchronisierungsfunktion sein, also markieren Sie dies als Synchronisierung. Wie in unseren Objekten oder Anfrage Antwort und im nächsten Herbst oder Middle Ware Setup alle Funktionen, so wird dies ziemlich ähnlich wie ein Stand sein. Wir müssen diesen Hotelausweis auch von den Räumlichkeiten aus erden, also fügen Sie ihn ein. Willst du nicht sagen, eine Macht Hotel Konstante, so const Hotel und dies wird gleich zu warten, warten auf ein Hotelmodell und dann verwenden Sie die Methode namens finden ein. Dies wird einen Datensatz innerhalb unserer Datenbank finden und wir wollen ihn anhand der Hotel-ID finden, die wir gerade hier gespeichert haben. Fügen Sie dies als Objekt in hinzu. Wir möchten einen Datensatz anhand des Unterstrich-ID-Feldes finden und die ID, mit der wir übereinstimmen möchten, ist Hotel-ID, die diese Variable gerade hier ist. Dann können wir voran gehen und machen Sie eine Pause oder rendern, um den Inhalt unserer Vorlagen anzuzeigen, die genau wie vor beim Aktualisieren, werden wir die gleichen Anzeigenhotel-Vorlagen rendern. Für diese Zeit klicken und bestätigen Sie am Ende unseres Formulars. Wir werden dann weitermachen und unser Hotel löschen, anstatt zu aktualisieren. Add_Hotel wie in unserem Objekt, der Titel löschen hotel, und dann übergeben unsere Hotelvariable. Der Grund, warum wir diese hinzufügen Hotel Vorlage noch einmal verwenden, ist so, wie Sie alle Hoteldetails einflusscables sehen können , um sicherzustellen, dass dies das ist, das wir löschen möchten. Wir gehen auch in diesem Hotel vorbei, das wir löschen werden. Wieder einmal können Sie alle Felder innerhalb unseres Formulars ausfüllen. Nun, wenn wir sagen, dies macht Sie auf den gleichen Routen wie zuvor, das ist admin, unsere Hotel-ID, und dann löschen. Wir können jetzt neu laden und jetzt erhalten wir das Add-Hotel-Formular. Nun, was bedeutet das? Jetzt haben wir diese Anfrage alle Setup bekommen. Wir müssen jetzt klären, wie wir das Hotel löschen. Um dies zu tun, können wir eine Post-Anfrage auf die gleiche Route erstellen. Über die index.js, lassen Sie uns diese Zeile hier duplizieren, fügen Sie diese in, dieses Mal ist dies eine Post-Anfrage und löschen Sie Hotelpost über an den Hotel-Controller und das ist exports.delete hotel post. Dies ist auch eine Sync-Funktion, da wir mit Daten aus unserer Datenbank zu tun haben, übergeben Anfrage, Antwort und nächste. Als nächstes müssen wir unsere Fehlerbehandlung hinzufügen, die wir versuchen und fangen. Ich habe gerade oben bemerkt, dass wir das auch hinzufügen müssen. Nur für Momente wird den Fehler fragen und dann übergeben Sie unseren Fehler weiter und dann können wir diese hinzufügen, um Hotel zu löschen bekommen auch so versuchen. Wir können diese drei Zeilen bis zu einem try-Block hinzufügen und dann catch und Hervorhebung als nächstes mit unserem Fehler hinzufügen. Gut, also zurück zu unseren Post-Anfragen unten innerhalb des Try Abschnitts. Auch hier wollen wir die ID aus den Parametern holen, damit wir diese Zeile hier kopieren können. Dies in einem Vermögenswert unseres Hotels so const Hotel erwartet, unser Hotelmodell und um einen Artikel aus [unhörbar] zu entfernen, können wir eine Methode namens finden nach ID und entfernen verwenden, die ziemlich ähnlich wie die, die wir oben verwendet, aber diese man wurde nach ID und Update gefunden. Bis zu unserer Post-Anfrage können wir wieder nach ID finden und entfernen. Dann drinnen hier alles, was wir tun müssen, ist die ID des Hotels, das wir entfernen wollen, zu übergeben. ID, das Feld, das wir wollen, und dann stimmt mit unserer Hotel-ID überein, die diese Konstante gerade hier ist, also Semikolon am Ende. Sobald wir dieses Hotel aus der Datenbank gelöscht haben, möchten wir dann eine Weiterleitung durchführen. Ausruhen oder Umleiten und wohin wollen Sie auch gehen? Nun, bevor wir uns die Aktualisierung der Hotels ansehen, machte es Sinn, mit den aktualisierten Informationen zum aktuellen Hotel umzuleiten. Allerdings können wir nicht das gleiche tun, wenn Sie in einem Hotel löschen, weil dieses Hotel nicht mehr existiert. Stattdessen werde ich nur auf die Heimroute umleiten, gibt uns ein Speichern und dann über den Browser. Wenn wir neu laden, so jetzt sind wir derzeit auf unserem Testhotel und jetzt für klicken „bestätigt“ erstellt eine Post Anfrage. Dies ist ein gutes Zeichen, die auf die Homepage weitergeleitet wurden. Jetzt rüber zur mlab Refresh. Wir jetzt auf 12 Datensätze, so haben wir Hotel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Auf der nächsten Seite haben wir 11 und 12, so sieht es so aus, als ob unser Hotel erfolgreich gelöscht wurde. Wenn Ihre Daten gelöscht wurden, herzlichen Glückwunsch, Sie haben jetzt Aktionen zum Erstellen, Lesen , Aktualisieren und Löschen in Ihrer Datenbank ausgeführt. Dies ist ein großer Schritt für unsere Bewerbung und wir haben viele Fortschritte gemacht. Im nächsten Abschnitt dieses Kurses werden wir unsere Projekte weiter vorantreiben, indem wir weitere Vorlagen und Funktionen hinzufügen, stylen und generell Verbesserungen vornehmen. freuen sich darauf, Sie im nächsten Abschnitt zu sehen und vorerst wieder auf Wiedersehen. 31. Hotel-Detailansicht: In diesem Abschnitt werden wir mit unseren Projekten weitermachen und einige allgemeine Arbeit tun, einschließlich Styling und Verbesserungen. Ich werde die Dinge loslegen, indem ich mit den detaillierten Vorlagen des Hotels arbeite, die wir erstellt haben, um das Hotel anzuzeigen, nach dem wir gesucht haben, bevor wir bearbeiten oder löschen. Wir werden diese Vorlagen wieder an ein paar Stellen wiederverwenden. Zunächst einmal, wenn wir auf die Homepage oder die Home-Routen gehen, und klicken Sie dann auf eines unserer Hotels, gehen Sie nach unten in unseren Vorlagen, sehen wir eine Fehlermeldung von nicht gefunden. Dies liegt daran, dass wir diese Routen behandeln müssen , die Sie oben auf Schrägstrich alle haben, dann Schrägstrich die Hotel-ID. Mit diesen wenigen können wir das Hotel mit detaillierten Vorlagen wiederverwenden, die wir erstellt haben, und auch das Hinzufügen dieser Routen wird auch andere Bereiche beheben. Zum Beispiel, wenn wir zurück auf die Homepage gehen und dann klicken Sie auf, sehen Sie alle, klicken Sie auf eines dieser Hotels wird wieder auf die gleiche Route gebracht. Also klicken Sie auf Hotel eins und wir haben die gleichen Routen von vorwärts Schrägstrich alle und dann unsere Hotel-ID zusammen mit dem Fehler an der Unterseite. Dies wird beide Probleme beheben, und auch wieder, wenn wir auf die hotelController.js gehen und gehen, um Hotelpost zu erstellen. Scrollen Sie nach oben, so dass Sie Hotelpost hier erstellen und diese res.redirect, auch auf die gleichen Routen hier umleiten. Dies ist, nachdem wir ein neues Hotel erstellen, wird dann diese Hoteldetailseite umleiten. Das ist gut, um jetzt arbeiten zu können. Beginnen wir mit der Route über einen beliebigen Indexpunkt js. Wenn wir nach oben scrollen, sollten wir bereits die Route oder die get to the forward Schrägstrich alle Route haben. Lassen Sie uns diese in der Reihenfolge behalten und fügen Sie dies unten hinzu. So router.get um diese Zeit, wie wir wissen, ist Schrägstrich alle, und dann die Hotel-ID, die Sie als dynamisches Segment hinzufügen können. Ich nenne diese Variable das Hotel. Dies wird auch den Hotel-Controller verwenden und dann eine Funktion namens Hoteldetail, Semikolon an den Enden verwenden . Dann können wir weitermachen und Hoteldetails über im Controller erstellen. Wir können das überall hinzufügen, lassen Sie uns nach unten gehen. Wir beginnen wie immer mit Exporten, und dann den Namen des Hotels Detail, und dann setzen Sie dies auf eine Sync-Funktion, übergeben Sie die Anfrage, die Antwort und auch als nächstes, fügen Sie den Körper unserer Funktion. Dann werde ich versuchen, Block zu fangen. Versuchen Sie also und fangen Sie dann, was den Fehler annimmt, und übergeben Sie den Fehler dann an den nächsten. Ok, gut. Wir werden damit beginnen, ein paar Konstanten zu erstellen. Die erste Konstante wird den Parameter erfassen, die Hotel-ID ist. Wir werden dieses Hotel dynamische Segmente verwenden, die in der URL ist. Sagen wir zuerst, dass dies in einer Konstante ist. So const, hotelparam ist gleich der Anfrage dot params und dann dot hotel, das ist der Name, den wir es gegeben haben. Eine zweite Konstante, die für die Hoteldaten gilt. Wir werden dies verwenden, um unsere Datenbank mit diesem Hotelparameter zu durchsuchen und dann das einzigartige Hotel zu finden, das wir brauchen. Wir werden wieder warten, um zu warten, auf die Staaten kommen zurück, bevor wir weitermachen. Wir müssen nach dem Hotelmodell suchen, Hauptstadt H, verwenden Sie die Suchmethode. Dann müssen wir in dem Feld übergeben, das wir finden wollen. Wir möchten die Felder der Unterstrich-ID verwenden und nach Ausweisen suchen , die mit unserer Hotel-param-Variablen übereinstimmen. Pass im Hotel param, füge am Ende ein Semikolon hinzu. Um dies zu beenden, werden wir einen res.render machen , um Vorlagen auf dem Bildschirm zu rendern. Die Vorlage, die wir verwenden werden, ist Hotelunterstreichungsdetails. Geben Sie den Titel von Let's travel und passieren Sie dann unsere Variable von Hoteldaten, die diese Variable hier ist, die das einzigartige Hotel aus der Datenbank speichert. Nun, da wir bereits Hotel Unterstriche Detail innerhalb unserer Sidebar und dann in den Ansichten. Wir haben diese Aussicht hier unten. Wir haben nur dieses Setup und dies erhält auch den gleichen Variablennamen der Hoteldaten. Nun, wenn wir diesem einen Safe geben, sagen Sie den Controller und gehen Sie dann zurück zu unserem Browser und laden Sie jetzt neu. Wir nehmen nun die Hotel-ID von der URL persönlich an unseren Controller, dann die Informationen aus unserer Datenbank zurückbekommt und diese dann an unsere Hoteldetailvorlage sendet. Wir sollten auch sehen, dass dies funktioniert, wenn wir auf die Homepage gehen und auf eines dieser Hotels klicken, um zur Hoteldetailseite weitergeleitet zu werden. Lassen Sie uns auch die Routen testen, die alle Hotels sind. Klicken Sie auf alle sehen, und wieder, eines dieser Hotels, und dieses hier funktioniert auch gut. Endlich können wir gehen, um neues Hotel hinzuzufügen. Gehen Sie zu unserem Admin Schrägstrich bei und lassen Sie uns ein Testhotel erstellen. Irgendwelche Informationen hier sind in Ordnung. Dann bestätigen, scrollen Sie nach unten und da ist unser Testhotel, das wir gerade erstellt haben und wie wir gesehen haben, bevor wir eine res dot Umleitung bekommen, die durch Schrägstrich geht alle und dann dieses Hotel ID. Obwohl diese Detailansicht des Hotels im Moment genauso aussieht wie alle Hotels, wird es bald einige Unterschiede geben. Wenn wir weitermachen und etwas Styling hinzufügen, werden mehrere Hotels auf die gleiche Seite passen, genau wie auf dieser Homepage hier. Aber wenn Sie darauf klicken und sich die Detailansicht des Hotels ansehen, wird dies eine einzige Ansicht für nur ein Hotel sein. Dies wird uns auch den Raum geben, weitere Details hinzuzufügen, wie zum Beispiel eine Hotelbeschreibung unten in der Nähe des unteren Teils, und das ist, was wir im nächsten Video tun werden, wenn wir uns das bedingte Rendering ansehen. 32. Lokale Variablen und bedingtes Rendering: Wir werden ein paar verschiedene Dinge in diesem Video abdecken. Beginnen Sie mit Ortsansässigen, alle lokalen Variablen. Dies ist etwas, das wir bereits beim Templating behandelt haben, aber wir werden auch schauen, wie wir diese auch für alle Vorlagen zur Verfügung stellen können. Derzeit über im HotelController. Lassen Sie uns auf die hotelController.js klicken und gehen Sie zum Hoteldetail. Gerade hier haben wir bereits eine lokale Variable an unsere Vorlagen übergeben, genau wie wir es schon oft getan haben. Die Daten, die wir in diese Vorlage übergeben, wenn wir dies zu seiner eigenen Zeile hinzufügen, um es ein wenig klarer zu machen, ist dies ein Objekt, das derzeit haben wir den Titel, das ist ein Name Wert Paar, und dann auch ein Hotel Daten was eine Variable ist, die wir gerade oben erstellt haben. Hier geben wir den Titel und die Hoteldaten an, die wir aus der Datenbank gezogen haben. Wir sind frei, diese Einheimischen zu verwenden, um alles zu übergeben, was wir in dieser Vorlage verwenden möchten. Zum Beispiel, wir gehen weiter und fügen den Namen Chris und dann drüben in seiner Hoteldetailansicht. Wir haben bereits gesehen, dass wir diese wie normale JavaScript-Variablen verwenden können, genau wie wir es hier getan haben, mit Hotel und dann Zugriff auf die ID vom Objekt. Hier verwenden wir die lokalen Variablen mit Backticks, so dass Sie sie mit etwas Text mischen können. Diese Variablen haben wir bereits mit dem Gleichheitssymbol ausgegeben. Also wissen wir, wie man das macht. Es ist p gleich, und in diesem Namen wird neu geladen und da gehen wir, das ist unsere lokale Variable als die Vorlagen, und auch, wie wir eine Variable ausgeben können, wenn sie mit reinem Text mit einem Hash verwendet wird. Lassen Sie uns das entfernen. Wenn es sich mit einem einfachen Text vermischt, wie hier, können wir den Hash, die geschweiften Klammern verwenden, und dann auch unsere Namensvariable übergeben, speichern und dann neu laden. Da gehen wir. Da ist unser Update Hotel und unser Name Chris gemischt mit dem Button Text. Lassen Sie uns diese Beispiele entfernen. Wenn wir zu einer der Vorlagen gehen, zum Beispiel, wenn wir zu allen Hotels gehen, versuchen wir, dasselbe zu tun. Lassen Sie uns versuchen, unsere Namensvariable auszugeben. Also p gleich Name, und gehen Sie zu allen Hotels Routen. Klicken Sie auf „Alles sehen“. Wenn wir nun nach unten scrollen, sehen wir keinen Verweis auf den Namen. Dies liegt daran, dass Einheimische, wie sie klingen, sie lokale Variablen sind, die nur auf eine einzige Vorlage beschränkt sind, an die wir sie übergeben werden, also lassen Sie uns dies entfernen, p entspricht Name. Auch in unserem Hotel-Controller, lassen Sie uns auch unseren Namen von hier entfernen. Aber es oft auch Fälle, wenn wir bestimmte Variablen an alle unsere Vorlagen übergeben wollen, um zu verwenden, anstatt eine Variable in jeder dieser Funktionen zu erstellen und dann die gleichen Daten zu übergeben. Wenn Sie sich von früh an in den Projekten über in der app.js erinnern. Gehen wir zu app.js. Wir haben ein wenig über die app.use Middleware gesprochen, die gerade hier haben wird. Diese Middleware, wenn wir keine Routen als ersten Parameter festlegen, ist eine Aktion, die für jede Anfrage an unsere Anwendung verwendet wird. Es fügt im Grunde eine Ebene hinzu, die wir für jede Anfrage durchlaufen. Wir können app.use verwenden, um einige Middleware für alle Anfragen zu erstellen, die dann weitergehen und unsere Variablen in allen Vorlagen zur Verfügung stellen. Lassen Sie uns dies also in app.use erstellen. Gehen wir zu unserem app.set und fügen Sie dann unsere app.use Middleware hinzu. Dies wird in einer Funktion übernehmen, die Zugriff auf die Anfrage, die Antwort und auch die nächste hat . Lassen Sie uns dies als eine normale Funktion einrichten. Bei Verwendung von app.use hat diese Funktion, die aufgerufen wird, auch Zugriff auf die Request- und Response-Objekte. Denken Sie jedoch daran, wenn wir möchten, dass diese Funktion nur auf eine Anfrage an eine bestimmte Route ausgeführt wird, können wir das Routing zuerst hinzufügen. So als der erste Parameter können wir die Zeichenfolge hinzufügen, einen Schrägstrich admin zum Beispiel, durch ein Komma getrennt, und dann unsere Funktion als der zweite Wert. Alles, was wir innerhalb von hier laufen, wird nur auf dieser Admin-Route funktionieren. Aber wir wollen, dass dies auf jeder Vorlage in unserer App ausgeführt wird. Also werde ich den ersten Parameter leer lassen. Sehen Sie, es gibt eine Aktion, die wir ein Konsolenprotokoll innerhalb des Funktionskörpers hinzufügen können, Konsolenprotokoll hinzufügen und dann einfach einige Texte von Hallo hinzufügen. Geben Sie dies ein Speichern und dann über den Browser. Nun, wenn wir auf unser Logo klicken, um eine Anfrage an unsere Website zu machen, über Visual Studio Code und jetzt können wir unten unten sehen wir die Texte von Hallo, Wiederholungen ein paar Mal. Klicken Sie also weiter auf diese, um eine Anfrage zu stellen. Wir sehen für jede Anfrage erhalten wir das Konsolenprotokoll von hallo. Im Inneren des Browsers aber, wenn wir einen Blick auf das drehende Symbol an der Spitze nehmen, sehen wir, dass unsere App beginnt zu hängen. Es liegt daran, dass Middleware weitergegeben werden soll und hier haben wir nicht im nächsten Aufruf hinzugefügt, um zum nächsten Stück Middleware in der Kette zu gelangen. Es steckt also im Grunde auf seiner Route fest. Lassen Sie uns zu unserer app.use gehen, und dann in unserer Funktion werde ich als nächstes drücken, geben Sie es ein Speichern. Wenn wir jetzt neu laden, können wir sehen, dass wir diese Route so oft wie wir wollen neu laden können und sie funktioniert immer noch. Also weiter, das Anforderungsobjekt, das wir hier haben, haben wir Zugriff auf eine Eigenschaft namens Pfad. Dies gibt den Pfadnamen der aktuellen Anfrage oder im Grunde die aktuelle URL zurück. Werfen wir einen Blick auf das. Nehmen wir an, der aktuelle Pfad ist, und fügen Sie dann am Ende die Anfrage hinzu, die dieses Objekt ist nur hier Punktpfad. Geben Sie es nun ein Speichern und gehen Sie dann zu einer beliebigen Route. Gehen wir zum Beispiel zum Schrägstrich Anmeldung, drücken Sie die Eingabetaste. Jetzt in Visual Studio Code, lassen Sie uns diese Terminologien hier heben, und wir können hier sehen, unser aktueller Pfad ist Schrägstrich Anmeldung. Dies ist das Konsolenprotokoll, das wir gerade hier festgelegt haben. Ich werde jetzt diese URL zur Verfügung stellen, um als Variable zu verwenden , die Zugriff auf jede Vorlage haben wird. Daher können wir später ein bedingtes Rendering durchführen, wodurch wir nur bestimmte Informationen basierend auf der aktuellen Route anzeigen können. Lassen Sie uns zunächst diese reduzieren, um etwas mehr Platz zu schaffen und unser Konsolenprotokoll zu löschen, wobei nur der Anforderungspunktpfad bleibt. Nun kann dieser Anforderungspunktpfad dann res dot local zugewiesen werden. Also res dot local entspricht dem Anforderungspunktpfad. Dies wird dann unseren Anforderungspunktpfad dem lokalen Objekt zuweisen, das sich auf der Antwort befindet. Wir können dieser bestimmten lokalen oder lokalen Variablen auch einen Namen unserer Wahl geben. Um es beschreibend zu halten, werde ich diese Punkt-URL aufrufen. Daher können wir auf diese Variable oder diesen Pfad in unseren Vorlagen durch ihren lokalen Namen URL zugreifen . Was bedeutet das jetzt für unsere Projekte? Nun, es bedeutet jetzt, dass wir auf diese URL lokal in jedem unserer Vorlagen innerhalb des Projekts zugreifen können , denn es ist Middleware, die wir gerade hier einrichten, wird immer für jede Anfrage weitergegeben. Wir werden auch weitere Einheimische wie diese hinzufügen, während wir für dieses Projekt gehen. Zum Beispiel, um Flash-Nachrichten auch in allen Vorlagen verfügbar zu machen, aber diese URL-Variable, können wir sie jetzt für bedingtes Rendern verwenden. Bedingtes Rendering ermöglicht es uns, bestimmte Daten in Abhängigkeit von einer Bedingung anzuzeigen. Genau wie wenn wir eine if-Anweisungen verwenden. Es wird für uns in diesem Projekt wirklich nützlich sein. Da wir Vorlagen wiederverwenden, können wir jetzt nur bestimmte Teile der Vorlagen anzeigen, zum Beispiel auf bestimmten Routen oder bestimmte Teile dieser Vorlage ein- oder ausblenden, je nachdem, ob ein Benutzer eingeloggt ist. Das erste, was ich tun möchte, ist die Update- und Lösch-Buttons für bestimmte Routen zu entfernen. Also, wenn wir auf unsere Homepage gehen und auf eines dieser Hotels klicken, und ich scrollen nach unten, wir sehen, wir haben diese Update und Delete Hotel Button, die auf dieser Route hier angezeigt wird. Dies ist etwas, das wir nur in den Admin-Routen zeigen wollen. Um diese zu verbergen, können wir die Verwendung von bedingtem Rendering nur zeigen wenn die URL oder der Pfad beginnt mit Schrägstrich Admin. Also rüber zum hotel_detail.pug. Speichern Sie unsere app.js. Beginnen wir zunächst mit der Erstellung einer if-Anweisung mit unserer URL-Variable. Direkt nach dem dot hotel div, rücken sie in einer Ebene wenn url, die der Name der lokalen Variablen ist, die jetzt an alle Vorlagen übergeben wird und dann dot startsWith verwendet. Fügen Sie die Klammern danach hinzu. StartsWith ist eine reguläre JavaScript-Methode, die wahr ist, wenn wir eine Zeichenfolge in den Klammern übergeben, die dem Anfang der URL entspricht. Um zu überprüfen, ob die URL mit Schrägstrich admin beginnt, können wir dies als String hinzufügen. Nun, wenn wir diese vier Zeilen hier einrücken, die unsere Knöpfe sind. Nun, wenn unsere URL mit Schrägstrich admin beginnt, alles, was in dieser if-Anweisung verschachtelt ist, dh unsere Schaltflächen werden jetzt bedingt sonst gerendert, alles andere, was nicht innen verschachtelt ist, wie unser Hotel mixin, wird immer noch unabhängig von der Route angezeigt. Also über zum Browser und lassen Sie uns dies versuchen. Wenn es neu geladen und dann nach unten scrollen, können wir sehen, dass diese Schaltflächen jetzt oben in unseren Vorlagen fehlen. Lassen Sie uns mehr versuchen, öffnen Sie die Homepage, sehen Sie alle, klicken Sie auf eine dieser, und die Buttons fehlen jetzt noch. Versuchen wir die Admin-Route und überprüfen Sie die Schaltfläche, wenn sie dort sind. Also Schrägstrich Admin, und dann gehen Sie nach unten zu Bearbeiten, entfernen Sie Hotel. Suchen wir nach einem beliebigen Hotelnamen. Also hotel 7, dies zeigt jetzt hotel 7, und wir haben immer noch die updates und lösch-Buttons. Weil unsere URL mit Schrägstrich admin beginnt. Gut, dieses bedingte Rendering funktioniert jetzt mit unserer URL-Variablen. Eine weitere Verwendung für diese Variable wird in unserem hotel.pug mixin vorbei sein. Also lasst uns die Seitenleiste öffnen. Mixins und dann hotel.pug. Wir können endlich die Hotelbeschreibung nutzen, die wir zur Verfügung haben, aber nur in der benötigten Hotelansicht anzeigen. Also kurz nach dem Hotelnamen, behalten Sie jede horizontale Linie. Lassen Sie uns eine andere if-Anweisung mit unserer URL erstellen. So dot startsWith, dieses Mal können wir in einer Zeichenfolge übergeben , die Schrägstrich alle und dann Schrägstrich vorwärts ist. Verschachtelt innen hier können wir ein p Element setzen, das gleich Hotel ist. Es ist also hotel_description als neue horizontale Linie direkt darunter, um diese von der Sternebewertung, dem Land und dem Preis zu trennen . Speichern Sie diese und dann über in unseren Browser. Versuchen wir es mit der Homepage. Jetzt sehen wir, dass unser Hotel ohne Beschreibung aufgeführt ist. Wenn Sie jedoch auf einen unserer Links klicken, um zur Detailseite des Hotels zu gelangen. Wir sehen jetzt Beschreibung ist jetzt in unsere Vorlagen hinzugefügt, aber weil wir nur Schrägstrich alle Routen. Wenn wir auf unsere Homepage gehen und dann auch auf alle sehen klicken. Hier sehen wir auch alle unsere Hotels, aber ohne Beschreibung. Aber diese Routen beginnen auch mit Schrägstrich alle. Das mag ein wenig verwirrend erscheinen, warum wir die Beschreibung auf dieser Seite zwei nicht sehen. Wenn wir etwas näher hinschauen und zu unserer Vorlage gehen, sehen wir schließlich den abschließenden Schrägstrich. Wenn wir über unsere Routen in unserer index.js gehen, mit Schrägstrich alle, und dann Schrägstrich rechts am Ende passt nur diese zweite Route auf hier, die unsere Hoteldetails macht. Da wir einen zusätzlichen Schrägstrich verwenden und auch unsere alle Hotels Route hier nur Schrägstrich alles mit nichts am Ende ist, funktioniert diese Beschreibung deshalb nur auf der Hoteldetailseite und nicht auf der gesamten Hotelroute, die Wir haben hier. Wir werden diese URL-Variable für den Kurs mehr verwenden, aber als nächstes werden wir die Anzeige in unseren Hotels basierend auf einem bestimmten Land behandeln. 33. Hotels nach Land: Wenn wir auf die Homepage unserer Projekte gehen und dann nach unten scrollen, unten sind Hotels, und gehen nach unten in andere Länder, die wir gerade hier haben. Wir haben eine Liste der Länder, in denen sich Hotels befinden. Wenn wir auf einen einzelnen Hotellink klicken, wie diesen, führt uns dies zu einer Route von /countries und dann /country name. Derzeit erhalten wir eine 404, weil seine Route noch nicht behandelt wird, wie wir hier sehen, werden wir diese in diesem Video fixieren, indem wir eine Vorlage anzeigen, die alle Hotels in der Datenbank zeigt, die sich in diesem Land befinden. Wie üblich, lassen Sie uns in unserer index.js über zu arbeiten. Lassen Sie uns einige dieser Registerkarten für jetzt bereinigen. Index.js. Gehen wir nach unten zu unseren/Ländern und fügen Sie dann eine neue Route hinzu, die unterhalb dieser ist. Da wir nur eine Vorlage erhalten, können wir eine get-Anfrage verwenden, also geroutet oder bekommt, und dann können wir /countries verwenden, genau wie wir dort sehen. Fügen Sie dann unseren dynamischen Ländernamen als Parameter hinzu. Das ist der Doppelpunkt, und nennen wir das Land. Dies wird auch den Hotel-Controller verwenden und dann können wir Hotels nach Land erstellen. Wenn Routs über dynamische Segmente verfügt, um das Land von der URL zu erfassen. Gehen wir zu unserem Hotel-Controller. Erstellen Sie Hotels nach Länderfunktion, und dann können wir diesen dynamischen Abschnitt von der URL zu greifen. Hotel Controller unten ganz unten, wir werden dies wie gewohnt einrichten, Export beginnt. Hotel für Land markiert dies als Synchronisierung, Weitergabe der Anfrage, der Antwort und auch als nächstes. Lassen Sie uns unseren Abschnitt „versuchen“ hinzufügen. Fangen Sie alle Fehler und dann wie gewohnt, werden wir dies als nächstes übergeben. Wir fangen damit an, das Land von den allgemeinen Parametern zu erfassen, und das ist genau so, wie wir es vorher mit dem Hotel getan haben. Setzen wir gehorchen Konstanten namens CountryParam, und dies ist die Anfrage.. params.Country. Dann können wir unsere Suchmethode einrichten, um unsere Datenbank nach dem Land zu durchsuchen. Spalten, wir werden dies die Länderlisten nennen, weil es eine Liste der Länder speichern, die unseren Parameter entsprechen, werden wir erwarten hotel.Find, und dann nur unsere Länder zurückgeben, können wir in unseren Objekten übergeben Übergeben des Feldes Country, das Sie abgleichen möchten, und dann mit unserer CountryParam-Variablen übereinstimmen. Bevor wir diese Daten an unsere Vorlagen übergeben, lassen Sie uns zuerst eine res.json tun, um zu sehen, welche Daten aus der Datenbank zurückgegeben werden. res.json, und übergeben Sie dann in unserer Länderliste, die eine Liste von Ländern speichern sollte. Es gibt uns die speichern und dann neu laden und stellen Sie sicher, dass Sie immer noch auf den gleichen Routen wie zuvor, das ist/Länder und dann ein bestimmtes Land kurz danach. Da wir auf dieser USA-Route sind, sehen wir nur Länder, die in den USA verfügbar sind. Das Testhotel wurden vor geschaffen, war das Land USA, und dieses Hotel sieben ist auch die USA. Je nachdem, auf welches Land Sie geklickt haben, haben Sie möglicherweise nur eine pro Land. Wir können dies auch in der URL ändern. Ändern Sie Mexiko, und los geht's. Wir haben Hotel neun und auch Hotel 10, die im Land von Mexiko sind. Das sieht gut aus. Wir haben nun die Hoteldaten, die wir an unsere Vorlagen weitergeben müssen. Jetzt können wir unsere res.json durch einen res.render ersetzen. Wir werden eine Vorlage erstellen, die Hotels nach Land genannt wird. Mit den Unterstrichen durch Komma getrennt, können wir unsere Objekte hinzufügen, die den Titel enthalten wird oder nach Land durchsuchen, und dann auch innen können wir einen dynamischen Abschnitt hinzufügen , der wird der Name des Landes, das wir Betrachten Sie. Wir sind dabei mit dem Symbol, den geschweiften Klammern, und dann im Inneren können wir den CountryParam hinzufügen, und da wir jetzt einige dynamische Daten in unserer Zeichenfolge verwenden, müssen wir auch diese Zitate ändern, um wieder Ticks zu sein. Ändern Sie dies sind das Semikolon am Ende und sowie dessen Titel. Wir können auch ein Komma hinzufügen und möglicherweise auch in unserer Länderliste, die die Daten sind und wir werden innerhalb der Vorlagen benötigen. CountryList und geben Sie uns sparen. Die letzte Phase, wie Sie bereits wissen, ist es, diese Hotels nach country.pug Datei zu erstellen, und stellen Sie sicher, dass Sie richtig buchstabieren. Öffnet die Seitenleiste innerhalb aller Ansichten Ordner, erstellen Sie eine neue Datei namens hotels by country.pug. Diese Vorlage wie alle anderen wird unser Layout erweitern und wir ersetzen den Block namens Inhalt. Da die Vorlagen auch die Liste der Hotels anzeigen, müssen wir auch unsere Mixins einschließen. Fügen Sie Mixins/_Hotel, oder hotelmixin ein. Wir können auch in unserem Titel übergeben, h2 gleich Titel. Jetzt müssen wir alle Daten in unserem Hotel-Controller durchlaufen. Wer in diesem Land Daten gesehen hat, wird in einer Variablen namens CountryList gespeichert. Lassen Sie uns eine Schleife erstellen. Jedes Hotel in CountryList erstellt einen Wrapper von.hotel_wrapper und Impuls in unserer Mischung mit dem Plus-Symbol, plus Hotel, und auch die einzelnen Hoteldaten aus unserer Schleife übergeben. Wir können hier auch einen anderen Block hinzufügen, falls keine Übereinstimmungen für dieses Land gefunden werden, zeigen Sie dies auf einem Listenelement an. Es gibt keine Hotels, und sobald Sie eine Vorlage haben, die so aussieht, lassen Sie uns dies speichern und dann neu laden. Jetzt werde ich res.json durch unsere Vorlagen ersetzt. Haben Sie einen Fehler, lassen Sie uns die Ansicht Hotels nach Land suchen. Mal sehen, was los ist. Wir haben einen Rechtschreibfehler, also Hotel, und das ist Hotels, also ändern Sie einfach diesen Dateinamen innerhalb unserer Ansichten. Umbenennen, ich füge einfach ein S am Ende hinzu. Laden Sie den Browser neu. Es gibt unsere dynamische Ebene zwei Richtung oder blättern nach Land, wenn Impuls in den Namen des Landes, und es gibt ein Hotel neun und auch das Hotel 10, die wir vorher im JSON gesehen haben. Lassen Sie uns ein paar weitere Länder testen und sehen, ob das alles funktioniert. Gehen wir zurück zur Homepage. Bis ganz nach unten. Versuchen wir es mit Jamaika. Wir haben den dynamischen Titel, und dieses Land ist in Jamaika. Unten nach Niederlande als unser Titel, und unser Hotel kostenlos, das innerhalb der Niederlande ist. Ausgezeichnet, das ist ein weiterer Schritt in unserem Projekt , den wir jetzt abgeschlossen haben. Ich denke, jetzt haben wir eine Menge davon funktioniert. Wir sollten jetzt eine Pause vom Hinzufügen neuer Funktionen machen und weitermachen und einige CSS-Styling hinzufügen, um es ein wenig schöner aussehen zu lassen. 34. Styling der Kopfzeile – kleiner Bildschirm: Jetzt ist es an der Zeit, unser Projekt mit etwas CSS etwas schöner aussehen zu lassen. Ich beginne mit dem Styling des Header-Abschnitts für die kleine Bildschirmansicht. Beginnen wir mit dem Verkleinern des Browsers. Also schrumpfen Sie dies nach unten und dann in Visual Studio, wir können dies auch kleiner machen, öffnen Sie die Seitenleiste innerhalb unserer öffentlichen Datei oder öffentlichen Ordners. Lassen Sie uns darauf klicken und dann haben wir einen Style-Sheets-Ordner mit unserer style.css, und schließen Sie dann die Seitenleiste. Im Inneren haben wir einige Standardwerte, Styling, die mit dem Express-Generator zur Verfügung gestellt wird. Also werde ich alle auswählen und entfernen. Um zu beginnen, werde ich dem HTML in Körperabschnitten ein allgemeines Styling hinzufügen. So wie der HTML-Selektor und dann erklären wir wollen, dass der Hintergrund weiß ist. Dann bis zu einem Körperteil und natürlich, fühlen Sie sich frei, alle Änderungen, um diese App persönlicher zu machen oder folgen Sie mit mir, wenn Sie das gleiche Styling bevorzugen. Also der Hintergrund für den knöchernen Abschnitt, werde ich diesem einen Wert mit dem Hash von eee geben, das Zentrum dies innerhalb des Browsers und wir können Marge Null auch das maximale Gewicht des Körpers auf 1500 Pixel setzen. Dies wird sicherstellen, dass auf wirklich großen Monitoren der Inhalt nicht zu gestreckt ist und schließlich etwas Polsterung an der Grenze von Null oben und unten und M auf der linken und rechten Seite warnen. Also speichern wir das und laden neu. Wir sollten vorerst keinen allzu großen Unterschied sehen, aber wir können nur die graue Hintergrundfarbe sehen, den Börsengang dezentralisiert und auch ein wenig auf ihn. Von oben werde ich mit den nav Links beginnen, die diese sind nur hier und diese haben eine Wrapper von nav hier drin. Ich werde den Anzeigetyp ändern, um die Flex-Box zu verwenden. So zeigen flex, und dann können wir die Flex-Richtung auf die Spalte setzen. Dadurch werden die Flex-Elemente von oben nach unten festgelegt. Auch die Eigenschaft align items an der Mitte und deklariert auch die Hintergrundfarbe. So sehr das Logo. Setzen Sie also den Hintergrund auf ein Volume mit dem Hash für die Hex-Werte von 4dc2ca Reload this. Da gehen wir. Jetzt sind unsere Artikel nun in der Mitte der Seite zentriert und haben auch die gleiche Hintergrundfarbe wie ein Logo. Es sieht so aus, als ob es hier auch einige Standardwerte, Ränder und Ebenen gibt. Lassen Sie uns mit unserer ungeordneten Liste arbeiten. Entfernen Sie zunächst alle Standardeinstellungen, die in einer URL eingefügt werden, und verwenden Sie dann etwas über nach links. Die einzelnen Listenelemente. Wir können diese ein wenig größer machen, indem wir die Schriftgröße auf 1.2 em einstellen. Die Anzeige Inline-Block und dann auch der Rand von Null auf der oberen und unteren und zehn Pixel auf der linken und rechten. Nachladen. Okay, gut. Also jetzt unsere Listenelemente sind Inline-Block, so dass sie über die Seite in Online-Formaten angezeigt und auch sie sind immer noch unter dem Logo, weil wir die Flussrichtung der Spalte auf den Navigationselementen sagten, die das Logo und auch unsere Listenelemente. Also bis zu unseren Listenartikeln hier. Wir können dann auch die Links ansprechen. Also zuerst, wenn wir die Textdekoration so einstellen, dass sie nicht speichern, neu geladen wird, und dies wird die Standardwerte in der Zeile von unseren Links entfernen. Wir können diese Standardfarbe auch entfernen, indem Sie den Farbwert festlegen, Ich möchte eine RGB-Farbe verwenden. Der erste ist also ein roter Wert von 43, 40 und 40. Die grüne und blaue Erfrischung, die uns diese dunklere graue Farbe geben wird. Wenn wir zu unserer Layout-Ausgabedatei gehen. Öffnen Sie also die Seitenleiste in den Ansichten und das Layout, das sich an ein Formular oben anschließt. Wir haben einen Wrapper classof.search nav hinzugefügt , der der Hauptwrapper für alle diese Formularelemente innerhalb unseres Headers ist und auch jede einzelne Eingaben hatte auch einen Wrapper von Punkten Eingabe schnell. Also gehen wir zurück zu unserer style.css und beginnen mit unserem Formular innerhalb der Kopfzeile zu arbeiten. Vor allem der Haupt-Wrapper, der Suche nav war. Also search_nav. Die Hintergründe. Ich werde dies auf einen Hex-Wert von c1e6e9 setzen. dann stellen Sie sicher, dass dies korrekt geschrieben ist. Geben Sie das sparen und jetzt haben wir die hellere blaue Farbe 404. Ein wenig Polsterung innen auch hier, fügen Sie einfach einige Abstände von 0,5 em hinzu. Als nächstes werde ich zu all diesen Elementen in einer Art Formular übergehen , indem ich den Anzeigetyp auf Flex setze. Wir können diesen auch eine Flexrichtung der Spalte für die mobile Ansicht geben. Später werden wir diese auch ändern, um wieder in die Standardzeile zu gelangen, die diese dann auf der Seite angezeigt wird, wenn mehr Platz zur Verfügung steht. Also lasst uns diese im CSS anvisieren. Wir haben search_nav und wir können nur das Formular auswählen, das innerhalb dieser Klasse ist hier. Das bedeutet, dass die Stile, die sich hier befinden, nur auf diese bestimmte Form und auf allen Seiten keine anderen Formen angezeigt werden. So Anzeigetyp oder Flex. Die Flexrichtung der Stütze. Das ist also eine Tatsache und ein Retriever und dann können wir voran gehen und die einzelnen Eingaben anvisieren. Also die einzelnen Eingaben für das kleinste Grün, müssen wir nicht die volle Breite der Seite sein. Legen Sie die Breite auf 100 Prozent fest. Wir können die Höhen von 20 Pixel deklarieren. Speichern Sie diese, und laden Sie sie neu. Okay, gut. Lassen Sie uns auch einige Ränder und Muster hinzufügen, um Ihnen etwas Platz zu geben. Die Polsterung. Also 0.5 em oben und unten und Null auf der linken und rechten. Schräg leicht in voller Breite. Also auch einige Marge an der Spitze, Raum aus den oben und wir alle brauchen ein wenig Marge von 0,3 em. Speichern und dann neu laden. Ich werde auch diesen Standardrahmen um die Eingaben entfernen. Lassen Sie uns also den Rahmen auf einen Wert von Null setzen. Laden Sie neu, und jetzt haben wir diese graue Linie von jedem der Eingänge entfernt. Im Moment in der mobilen Ansicht, wenn wir in eines dieser Ziele tippen, ist die Textzeile auf der linken Seite vorbei. Ich werde dies ändern, um im Sensor zu sein, indem ich die Textausrichtungseigenschaft von Mitte verwende und auch einen Randradius hinzufüge. Also jeder dieser Eingaben von fünf Pixeln. Speichern Sie dann neu laden und jetzt können wir sehen, wie Text jetzt zentriert ist, und wir haben ein wenig Radius auf jedem der Eingänge. Dann bis zur Eingabe verweisen, die jedes unserer Labels auf Eingabe-Kombinationen umgibt. Nur um etwas Rand oben und unten hinzuzufügen, um einige Schaumabstände zu entfernen und auch diesen Text innerhalb des Sensors für das Etikett auszurichten. Zielt also die Eingabe auf einem Skalenwickler, den Rand, die oberen und unteren Werte von 0,5 em und dann Null auf der linken Seite und Rechte. Wir können unsere Etiketten mit einer Textzeile der Mitte ausrichten. Speichern und dann neu laden. Codes sehen jetzt in der mobilen Ansicht viel schöner aus. Wir können nun den ausgewählten Eingaben einen letzten Schliff hinzufügen und auch die Taste unten unten. Wir können diese nach dem Namen des Elements auswählen. Wählen Sie also und klicken Sie auf. Lassen Sie uns die Höhen von 36 Pixeln erklären. Die Breite auf dem kleinen Bildschirm von 100 Prozent. So viel der Rest der Eingaben und entfernen Sie auch den Standardrahmen, indem Sie auf keine setzen. Speichern und aktualisieren. Okay, gut. Also brauchten wir ein Alpha einer Form. Das letzte, was ich tun möchte, ist, nur die Tasten zu zielen, um diesem eine Hintergrundfarbe von Kadettenblau zu geben und uns auch einen Grenzradius von fünf Pixeln zu geben. So viel der Rest der Eingänge. Okay, nachladen. Gut. Unser Header-Abschnitt in unserem Formular sieht jetzt viel schöner auf der kleinen Ansicht aus. Wenn wir nach unten scrollen die letzte Berührung, die ich in diesem Video machen werde, ist es diese Header Strand Bild und auch alle anderen Bilder auf der Website zu 100 Prozent, um den Container zu profitieren , anstatt zu überlaufen, wie wir sehen, wenn wir scrollen der rechten Seite. also unter der Schaltfläche Wählen Siealso unter der Schaltflächealle Bildelemente aus. Legen Sie die Breite auf 100 Prozent fest. Aktualisieren, und es sieht sofort viel besser aus jetzt. Gut. Unser Header ist jetzt besser auf dem kleinen Bildschirm Ansicht nächste Woche klicken Sie auf, um fortzufahren werden wir Styling für mobile Größen sowohl gelten diese für ein Hotel und Länder. 35. Styling des Inhalts – kleiner Bildschirm: Mit dem Header-Styling jetzt komplett für unsere mobile Ansicht, können wir jetzt zu einem Stil im Content-Bereich bewegen, der die Hotels und auch die Länder hat. Wenn wir zu unserem Index Dot Mops gehen. Öffne die Seitenleiste in die Ansichten und dann unseren Index Dot Mops. Auf der Seite hier haben wir eine äußere Wrapper, die hier ist. Dann verschachtelt im Inneren haben wir einen Hotel-Wrapper, der den Hotelabschnitt hinuntergeht, und dann einen Land-Wrapper oder den Länderabschnitt unten unten auf unserer Index-Seite. Gehen wir zu unserem Style dot css und beginnen mit dem äußeren Wrapper zu arbeiten. Machen Sie einen Kommentar. Dies ist der Abschnitt „Inhalt“. Hotels und Länder, anzeigen. Okay, also fangen wir mit dem äußeren Punkt-Wrapper an, mit der Under-Score. Dies ist ein Wrapper für grundsätzlich alle Hotels und Länder, die wir auf der Homepage hier sehen. Wir werden es verwenden, um den Text in der Mitte auszurichten und auch die Schriftgröße festzulegen. Die text-align Eigenschaft, der Mitte und eine Schriftgröße von einem em. Legen Sie diese fest, und laden Sie sie dann neu. Jetzt können wir unseren Titel sehen und auch alle Hotelinformationen sind jetzt auf das Zentrum ausgerichtet. Jetzt zum dot hotel div. Das war der Wrapper, den wir in jedem Hotel benutzt haben. Wenn wir zu den Mixins und dann Hotel Dot Mops gehen, gaben wir jedem Hotel einen Wrapper von Dot Hotel, also lassen Sie es uns jetzt in der CSS verwenden. Unter dem äußeren Wrapper zielen Sie das Hotel ab. Okay, also werden wir jedem einzelnen Hotel eine Hintergrundfarbe von Weiß geben, also hebt es sich vor dem grauen Hintergrund ab. Hintergrund der weißen und auch einige Rand von Null auf der Oberseite, Null auf der rechten Seite, ein em auf der Unterseite, und Null auf der linken Seite. Wenn wir das jetzt speichern und dann aktualisieren, sehen wir jetzt die weiße Hintergrundfarbe und auch der Rand auf der Unterseite trennt jedes Hotel. Auch innerhalb dieses mixin haben wir die Textfelder innerhalb eines div namens hotelinfo. Zurück zu unserem Dot Hotel Dot Mops, wir haben diesen Hotel-Info-Bereich, der den Hotelnamen enthält, und auch im Hoteldetail, wir haben die Beschreibung und auch die Sterne-Bewertung, das Land und den Preis. Es sind im Grunde all diese Texte, die wir in jedem Hotel sehen. Im Moment, wenn Sie auf ein einzelnes Hotel klicken und dann nach unten scrollen, wurden dann zur Detailansicht des Hotels geführt. Der gesamte Text im Inneren ist nah am Rand. Wir können das mit etwas Polsterung beheben. Style dot css, das hotel unterstrich info. Alles, was wir hier tun müssen, um dies zu beheben, ist, etwas Padding von einem em hinzuzufügen und dann neu zu laden. Jetzt haben einige Abstände um den Titel, die Beschreibung und auch die Informationen unten unten unten. Als Nächstes werde ich zu unseren Formularen übergehen. Wenn wir zu unserem Admin gehen, sollten wir dies etwas größer machen, damit wir die URL sehen können. Admin und dann Schrägstrich hinzufügen. Scrollen Sie nach unten zu unserem Formular, und derzeit sieht unser Formular nicht so toll aus. Lasst uns jetzt daran arbeiten. Verkleinern Sie den Browser wieder nach unten. Wir haben bereits bestimmte Klassennamen innerhalb unserer Ansichten hinzugefügt. Wir gehen, um Hotel hinzuzufügen, schließen Sie das. Wir haben diese Hotelform, die als Mixin gerendert wird. Wenn wir zu diesem gehen, haben wir jede einzelne Formulargruppe mit dem Label eine Eingabe, die von diesem Formulareingabe-Wrapper umgeben ist. Dies kann über in der style.css verwendet werden. Zunächst einmal bilden Unterstriche Eingabe. Wir können einen gewissen Spielraum hinzufügen. Wenn wir ein em und dann Null hinzufügen, wird dies ein em Rand nach oben und unten hinzufügen. Geben Sie etwas Leerzeichen zwischen den einzelnen Eingaben ein. Dann können wir voran gehen und die einzelnen Eingaben und auch den Textbereich anvisieren. Weil wir möchten, dass diese Beschriftung links neben jeder Eingabe angezeigt wird. Um zu beginnen, wenn wir jede Eingabe auf die Breite von 70 Prozent setzen, um sie ein wenig schmaler zu machen, gibt uns dies dann den Platz, um eine Beschriftung auf der linken Seite hinzuzufügen. Wir zielen auf die Formulareingabe und dann jede einzelne Eingabe und dann müssen wir auch den Textbereich anvisieren. Legen Sie die Breite auf 70 Prozent fest. Auch die Textzeile, die auf der linken Seite sein soll. Speichern und aktualisieren. Okay, das ist besser. Jetzt zu unserem Label. Auch hier die Formulareingabe. Aber dieses Mal werden wir auf das Label abzielen. Legen Sie die Anzeige als Inline-Block fest. Geben Sie dann eine Breite von 20 Prozent an, um sicherzustellen, dass dies auf die gleiche Zeile wie die Eingabe passt. Wenn wir neu laden, haben wir jetzt jede Beschriftung links von der Eingabe. In diesem Textbereich entfernen wir den Rahmen von allen restlichen Eingaben und geben diesen einen Grenzradius von fünf Pixeln. Lassen Sie uns dies auch auf den Textbereich anwenden, damit er übereinstimmt. Der Rahmen von keiner und dann der Rahmenradius von fünf Pixeln, Semikolon, und dann neu laden. Jetzt ist es außen entspricht dem Rest der Eingänge. Dann endlich unten unten unten haben wir diesen großen bestätigten Button innerhalb des Hotelformulars. Wenn wir unten zu Knopf am unteren Rand gehen, haben wir dies eine Klasse von Knopf klein gegeben. Lassen Sie uns dies kopieren und in den Stil dot css fügen Sie den Punkt hinzu und fügen Sie diesen ein. Lassen Sie uns dies verkleinern, indem Sie die Breite von 100 Pixeln und auch einen Rand von 0,5 ems hinzufügen, um ihm einen gewissen Abstand zu geben, unterhalb des Browsers. Da gehen wir. Jetzt wird der Zurück zum Admin-Button und auch unsere Bestätigungs-Button am unteren Rand verwendet diese Schaltfläche kleine Klasse. Jetzt sieht das für unsere kleinen Bildschirme viel schöner aus. Zurück zur Startseite und scrollen Sie nach unten und alles sieht so aus, wie es sein sollte. Wenn wir jedoch den Browser dehnen, das wirklich weit machen, beginnen die Dinge ein wenig zu gestreckt zu wirken. Dies ist etwas, was wir im nächsten Video weitermachen werden, wo wir mit dem Styling der größeren Ansicht beginnen, indem wir eine Medienabfrage hinzufügen. 36. Styling für den großen Bildschirm: Wenn wir unser Projekt in voller Breite innerhalb des Browsers machen, sieht es jetzt ein wenig gestreckt aus, denn bisher haben wir uns auf die kleinen Bildschirmgrößen konzentriert. Lassen Sie uns nun einige CSS innerhalb einer Medienabfrage hinzufügen, um dies zu beheben. Bis zu unserer style.css, direkt am Ende der Datei, fügen wir die Medienabfrage mit einem Medium hinzu. Ich möchte die minimale Browserbreite von 1.000 Pixeln ausrichten. Öffne die Code-Rennen. Sie können ein Spiel um mit welcher Größe am besten für Sie funktioniert haben, aber ich werde für eine 1.000 Pixel-Breakpoints gehen und dann an der Spitze mit der Navigation beginnen. Wählen Sie die Navigationselemente aus und stellen Sie sicher, dass sich dies innerhalb dieser Medienabfrage geschweifte Klammern befindet. Jetzt sind wir auf dem größten Grün. Oben oben haben wir den oberen Headerbereich so eingestellt, dass er eine Flexrichtung der Spalte ist, was bedeutet, dass das Logo und auch die nav Links nicht zu retten sind. Jetzt werde ich die Flex-Richtung ändern, um wieder Zeile zu sein, was bedeutet, dass das Logo auf der linken Seite sein würde, und dann werden die Links auf der rechten Seite sein. Wir tun dies mit Flex-Richtung und erfüllen Zeile, Nachladen. Innerhalb unseres Navigationsabschnitts haben wir das nav, das ein Link für unser Logo ist, und haben auch die andere Liste für unsere beiden Links hier. Ich möchte den Flex-Wert für das Logo so beginnen, dass es ein Wert von eins ist, und dann die andere Liste ist ein Wert von zwei, was bedeutet, dass es doppelt so viel Platz auf der rechten Seite einnehmen würde. Wir können dann die Texte nach rechts ausrichten , um sicherzustellen, dass dies auf der rechten Seite der Kopfzeile vorbei ist. Beginnen wir mit dem nav a. Wenn es geht um das Layout innerhalb eines hier haben wir nav und dann das ein Nest innen, und das ist für unser Bild Logo. Dann ist die andere Liste, die nicht die gleiche Ebene ist, also wird dies ein Flusswert von eins sein, und dies wird der Flex-Wert von zwei sein, dass es doppelt so viel Platz verfügbar ist. Innerhalb unseres nav a, wird dies den Flex-Wert von eins aufnehmen. Dann wird unser nav ul der Flexwert von zwei sein. Speichern Sie diese und laden Sie sie neu. Wir sehen keinen allzu großen Unterschied, aber wenn wir in die Entwickler-Tools gehen , schweben Sie über unser Navigationsgerät, sehen wir den blauen Umriss für den einen Teil. Dann, wenn wir auf die andere Liste gehen, können wir sehen, dass dies doppelt so hoch ist wie die verfügbare Breite. Zurück zum Styling. Nach dem Flex können wir die Textausrichtung auf der rechten Seite hinzufügen an den Rand des div drücken. Aber das ist wahrscheinlich ein wenig zu nah an der Kante, so ein kleiner Rand rechts wird dies von einem m. Reload beheben. Jetzt haben wir eine Navigationsleiste, die besser für einen größeren Bildschirm geeignet ist. Gut. Jetzt gehen Sie nach unten zum Suchformular unten. Jetzt haben wir viele Spalten Setup, wie dies ist besser für die mobile Ansicht. Auf dem größten Bildschirm wie diesem möchten wir die Flex-Richtung noch einmal ändern, um Zeile zu sein, so dass sie besser für den mehr verfügbaren Platz geeignet ist. Unter unserem nav ul, lassen Sie uns die Suche auf der Partitur nav Ziel. Wenn wir zum layout.pug gehen und dann nach unten zu bilden, ist dies der äußere Wrapper für das gesamte Formular. Nach style.css öffnen Sie die geschweiften Klammern und dann können wir die Flex-Richtung wieder Zeile sein. Es gibt keine Veränderung. In der Tat müssen wir nur das Formular im Inneren anvisieren und dies versuchen, und da gehen wir. Lassen Sie uns mit diesem Flex-Styling fortfahren. Richten Sie den Inhalt so aus, dass er sich in der Mitte befindet. Dies wird uns den gleichen Abstand auf der linken und rechten Seite geben. Danach, die Flex-Wrap, werden wir dies auf einen Wert von Wrap setzen, so dass es auf zusätzliche Zeilen fließen kann. Dann schließlich werden wir die Elemente ausrichten, um Flex-Ende zu sein. Dadurch werden alle Eingaben vertikal ausgerichtet. Nun, wenn wir diesen speichern, werde ich diese Eingaben drücken, um jetzt im Einklang mit dem Rest von ihnen zu sein. Dies gibt uns die horizontale Form, die wir wollen, aber es ist immer noch ein wenig zerquetscht. Nur beim Erstellen dieses Formulars, das jede Eingabe mit einem div umgeben, mit der Klasse der Eingabe Rapa. Wenn wir zu unserem Layout von Mops gehen, innerhalb unserer Form, können wir das nur hier sehen. Dies ist rund und jede unserer Label- und Eingabegruppen. Über die style.css und wieder, immer noch in dieser Medienabfrage, können wir nun diese Klassen anvisieren, die dot input_wrapper war. Lassen Sie uns den Rand auf Null setzen, um alle Standardwerte zu entfernen. Der Padian ist 0.5ems. Speichern Sie diese und laden Sie sie dann neu. Da gehen wir. Wir können jetzt sehen, dass das Muster etwas Abstand zwischen jedem dieser Eingänge hinzugefügt hat. Beschränken Sie diese auch auf ein Maximalgewicht von 170 Pixeln, also dehnen Sie sich nicht zu weit aus. Legen Sie dann auch die Textausrichtung wieder links fest. Warten Sie auf Neuladen und jetzt haben wir einige zusätzliche Abstände um jeden dieser Eingänge. Scrollen Sie nach unten zu den Hotels und Ländern, dem Text für die Überschriften, die Sie hier sehen, und auch für die Hotels, es erbt immer noch die Mittelausrichtungen in der mobilen Ansicht. Ich wollte, indem ich das äußere Wrapper-div anvisiere. Denken Sie daran, früher sagten wir die äußere Wrapper savvy.outer Wrapper-Klasse. Wenn wir nach oben scrollen, war dies eine nur hier , die alle Hotels und Länder auf der Homepage umschließt. Scrollen Sie nach unten, können wir die Textausrichtungen innerhalb der Medienabfrage Punkt outer_wrapper überschreiben , wir können die Textausrichtung wieder auf der linken Seite sein. Aktualisieren. Jetzt auf jedes einzelne Hotel. Ich werde die Flex-Box für jedes dieser Hotels verwenden. Lassen Sie uns den Anzeigetyp über im CSS setzen. Wählen Sie nach dem äußeren Wrapper das Punkt-Hotel aus, das das div ist, das jedes Hotel im Mixin umgibt. Der Anzeigetyp des Flex. Dann laden Sie wieder. So sehen unsere Hotels jetzt standardmäßig aus. Es braucht aber noch ein wenig Arbeit, um gut auszusehen. Wenn wir gehen über zu unserem Hotel mixin, die unterstrich hotel.pug. Machen Sie das etwas größer. Wir haben Klassen sowohl dem Bildbereich hinzugefügt, das ist das Hotelbild gerade hier, auch für den Zufluss Abschnitt. Wir können diese jetzt im CSS verwenden, um unser Hotel viel schöner aussehen zu lassen. Zurück zur style.css. Lassen Sie uns zuerst für das Hotel img gehen. Geben Sie uns einen Flex-Wert von eins, und auch einige Marge von einem m, um einige Abstände zu geben. Speichern und neu laden. Wir können nur den Rand auf der Außenseite des Bildes sehen. Jetzt auf die Hotelinfo, das ist der Text auf der rechten Seite. SO.HOTEL_INFO. Wir können uns auch einen Flex-Wert von eins geben, um dies dem Bild gleich zu machen. Dann einige Muster, fügen Sie einige Abstand Null oben und unten. Dann ein m auf der linken Hand rechts. Speichern Sie diese und laden Sie sie dann neu. Gehe zur Homepage sieht jetzt viel besser aus. Wenn wir jedoch auf ein Hotel klicken und zur Hotelansicht gehen und nach unten scrollen. Das CSS, das wir hinzugefügt haben, gilt auch für dieses vollständige Hoteldetail. Ich möchte nur, dass dieses Bild und Hotel nebeneinander stehen. Wenn wir alle Hotels auf der Homepage und auch in der alle Hotels Ansicht auflisten. Zuerst können wir das CSS beschränken, um nur auf die alle Hotels Blick über alle hotels.pug anzuwenden . Lassen Sie uns nach diesen Vorlagen suchen. Alle Hotels.pug, lass uns das öffnen. Wir haben das Hotel drinnen mit einem.hotel-Wrapper umgeben. heißt, wir können dies verwenden, um genauer darüber zu sein, wo wir unser Styling anwenden. Dies kann durch Hinzufügen dieser Wrapper-Klasse vor der Hotelklasse im CSS erfolgen. Gehen Sie zurück zur style.css, lassen Sie uns dies kopieren. Dann kurz vor der.hotel fügen wir den Hotel-Wrapper hinzu, der uns einen spezifischeren CSS-Selektor gibt. Speichern Sie dies, und dann wird es neu geladen. Immer noch auf der Detailseite des Hotels. Wir haben jetzt die Flexbox aus dieser Ansicht entfernt , was bedeutet, dass der Inhalt jetzt auf einem Bild in voller Größe gestapelt ist. Schauen wir uns einfach auf der Homepage an. Es sieht immer noch gut aus. Vielen Dank, klicken Sie auf alle Hotels, und die Flexbox-Fähigkeit wird auch in dieser Ansicht wirksam. Um die Dinge zu beenden, und ich möchte die Länder als Raster anzeigen. Wenn wir auf die Homepage gehen und dann nach unten scrollen. Wir haben die Länder unten unten hier, aber die sehen nicht so toll aus. Es gibt zwei Orte, an denen wir die Länder zeigen. Er auf der Homepage und auch wenn Sie auf sehen alle klicken, in diesem Link hier. Dies ist so ziemlich die gleiche Ansicht wie die Homepage. Beide Vorlagen haben ein div mit der Klasse des Country Wrapper. Zuerst ist in der index.pug vorbei. Öffnen Sie dies im Views-Index. Mops. Wir haben Kontur oben unten unten unten hier, um unsere Länder, und auch in den allen Ländern Vorlagen haben wir das gleiche div nur hier, um die Dinge konsistent zu halten. Auch diese Länder werden als eine weitere Liste ausgegeben, die wir hier sehen können.. Wir können dies im CSS verwenden. Zurück zur style.css und dann unten auf die Hotelinfo. Wählen wir unseren Country Wrapper aus. Noch eine Liste. Wir können den Anzeigetyp Gitter sein. Wir haben drei Spalten, weil die Rastervorlage Spalten zu wiederholen. Dann innerhalb der Klammern wollen wir diese drei Mal wiederholen , indem wir die eine fr Einheit verwenden, um diese gleich zu machen. Um sie auszuräumen, können wir auch die Gitterlücke hinzufügen, die früh im Laufe von 20 Pixeln betrachtet wurde. Richten Sie dann auch den Text in der Mitte aus. Speichern Sie das und schauen wir uns das dann im Browser an. Reloads, und das ist die Schrägstrich Länder Routen, die einige mutige Text von nasa haben scheint, wird einen Blick auf diese nehmen. Wenn wir dann auf die Homepage gehen und ganz nach unten, haben wir auch das Raster für die Homepage. Lassen Sie sich diesen fett formatierten Text auschecken. Lassen Sie uns auf alle sehen klicken. Wir können sehen, dass es nur hier ist. Lassen Sie uns zur Datei „Alle Länder“ gehen. Ich denke, es ist nur ein Einrückungsproblem. Wir haben eine Ebene zwei Überschrift hier, und dann innerhalb der h2 haben wir alles verschachtelt. Lassen Sie uns all dies auf die gleiche Ebene wie die h2 bewegen anstatt innerhalb verschachtelt und neu zu laden. Das ist viel besser. Klicken Sie auf ein Land. Dann werden wir es zur Ansicht des Landes gebracht, wo wir unsere zwei verfügbaren Hotels in der Dominikanischen Republik in unserer Liste sehen . einmal können wir sehen, wie einfach ist, das CSS-Raster zu verwenden. Wir haben ein Rasterlayout mit nur wenigen Codezeilen gut ausgerichtet. Wir kommen später zum CSS zurück und fügen ein paar weitere Änderungen hinzu, wenn wir gehen. Eine Sache, die Sie hier bemerkt haben, ist, wenn Sie mit den Ländern auf der Indexseite und auch in den allen Ländern Vorlagen zu tun haben, wenn wir hier zu unserer Vorlage gehen, verwenden wir den gleichen Codefluss zu verschiedenen Vorlagen. Wir werden das im nächsten Video beheben, indem wir unsere Länder in ein wiederverwendbares Mixin verschieben. 37. Länder-Mixin: Wenn wir Code in mehreren Vorlagen wiederholt haben, ist es oft am besten, dies in eine separate Mischung zu setzen, und das ist, was wir jetzt mit der Liste unseres Landes tun werden. Sowohl in der index.pug. Unten unten haben wir einen Listeneintrag, den ich unser Land setzen werde. Auch in den allen Ländern.put Vorlagen, wird das gleiche Listenelement haben, zeigt unseren Link und unser Land Bild. In diesen beiden Vorlagen durchlaufen wir diese Länder und zeigen sowohl das Bild als auch den Namen als Liste an. Wir wissen bereits, wie man Mixins benutzt. Lassen Sie uns voran und erstellen Sie eine neue Datei im Mixins-Ordner, um diese Länderlisten anzuzeigen. Öffnen Sie die Seitenleiste. innerhalb des Mixins-Ordners Lassen Sie unsinnerhalb des Mixins-Ordnerseine neue Datei erstellen. Unterstrich Land, Unterstrichliste mit der Erweiterung.pug. Lassen Sie uns diesem Mixin einen Namen geben. Mixin Länderliste mischt sich also vorbei an einem Land zur Ausgabe. So können wir auch diese Variable hinzufügen. Speichern Sie dann diese Datei. Dann können wir in der Datei aller Ländern.pug das Listenelement, den Link und auch das Bild ausschneiden . Schnappen Sie sich diese drei Zeilen gerade hier Code aus und dann können wir gehen und diese zu unserem Land mischen hinzufügen, fügen Sie diese ein und stellen Sie sicher, dass die Einrückung korrekt ist. Wir werden das Listenelement auch verschieben, so dass es nicht auf der realen Ebene ist. Das ist also unsere Mischung, die jetzt gut aussieht. Wir können das speichern und dann zurück zu allen Ländern.pug gehen und dann oben können wir die Mixin-Datei einschließen. Sie nach den Erweiterungslayouts FügenSie nach den Erweiterungslayoutsdie Mixins ein, Schrägstrich und unterstreichen Sie dann die Unterstrichliste des Landes. Denken Sie daran, dass Sie die Mops-Erweiterung nicht benötigen. Dann können wir das Mischen durch seinen Namen anstelle des Listenelements hinzufügen, das wir in einer Ebene eingerückt auslegen. Innerhalb unserer Schleife nennen wir dies die Länderliste. Diese Länderliste wird auch in das Land nehmen, das von unserem Controller weitergegeben wird. Wir können diese Datei jetzt speichern und dann in alle Länder gehen, auf die wir jetzt sind. Laden Sie das neu. Wir sehen, dass die Länder jetzt vorhanden sind, aber diesmal aus einem Mixin gezogen werden. Jetzt müssen wir dies nur für den index.pug wiederholen, der diese Datei gerade hier ist. Zuallererst können wir das zweite Mixin einschließen. Fügen Sie also Mixins/ ein. Wir haben auch das Hotel Mixin, aber diesmal ist es die Länderunterstreichliste. Dann können wir nach unten gehen und diese Mischung anstelle unseres Listenelements hinzufügen. zunächst daran, in dieser Datei greifen wir auf den Ländernamen mit der Unterstrich-ID und dem Link und auch das Bild zu. Dies liegt daran, dass innerhalb unseres Hotels controller.js, wenn Sie zu den Homepage-Filtern gehen, wir gruppieren die unverwechselbaren Länder mit dieser Gruppe in Bühne mit dem Schlüssel der Unterstrich ID. Hauptsächlich werden wir ID in das Mixin verarbeiten, damit es funktioniert. Lassen Sie uns also die freien Linien von unten entfernen. Wir können dies ersetzen, ohne die Länderliste zu mischen, und wir setzen auch in unserem Land. _ID. Wenn Sie speichern, ist dies jetzt für die Homepage. Gehen Sie zum Index und scrollen Sie dann unter die Hotels, wir haben nun auch unsere komplette Länderliste auf der Homepage, sowie die Liste aller Länder. Das bedeutet, dass unser Mixen jetzt funktioniert und wir unseren Duplikatcode reduziert haben. 38. Promise.all und destrukturierende Zuweisung: Innerhalb des Hotel-Controllers haben wir schon früh im Kurs die Homepage-Filter erstellt. Sie können sich daran erinnern, dass das andere Mal, als wir sagten, dass wir mehrere Warteaufrufe verwenden, genau wie wir es hier getan haben, nicht immer eine gute Idee ist. Dies ist jedoch völlig in Ordnung, wenn der zweite Warteruf darauf beruht, dass der erste beendet wird, bevor dieser ausgeführt wird. Wenn zum Beispiel die erste hier oben warten, das Hotel speichern und dann der zweite Anruf warten, der benötigt wird, um auf die Hotel-ID zuzugreifen, wäre es sinnvoll, beide auf diese Weise zu behalten, um sicherzustellen , dass wir die Hotel-ID für die zweite eines, wenn nötig. Aber hier blockieren wir, holen die Länder aus der Datenbank, bis dieser erste Warteabschnitt beendet ist, und das macht keinen Sinn. Was wir wirklich tun wollen, ist, diese beiden gleichzeitig zu starten. Dafür haben wir etwas, das Versprechen an alle genannt wird. Versprechen an alle ist eine Methode, die im Grunde ein riesiges Versprechen ist , das alle anderen Versprechungen im Inneren umhüllt. Du denkst vielleicht: „Was haben Versprechungen mit asynchronen zu tun?“ Nun, async await gibt auch ein Versprechen zurück, also schauen wir uns dies in Aktion an. Lassen Sie uns zuerst die beiden erwarteten Schlüsselwörter entfernen, da wir diese nicht mehr brauchen. Nun werden wir uns ein paar neue Techniken ansehen, die in ES6 oder ES2015 eingeführt werden. Erstens ist das, was man Destrukturierung nennt. Genauer gesagt, für dieses Beispiel werden wir uns mit der Array-Destrukturierung beschäftigen. Wir können dies verwenden, um im Grunde ein Array von Konstantennamen zu erstellen und diese dann einem Array von Werten zuzuweisen, die wir entpacken. Es klingt kompliziert, aber es ist ziemlich einfach, wenn wir sehen, dass alles getippt wird. Lassen Sie uns zunächst eine Konstante erstellen. Nach unseren Ländern, gerade hier unten, lassen Sie uns etwas Raum schaffen, eine Konstante schaffen. Dieses Mal wird dies ein Array von Werten sein. Übergeben von zwei Werten, den ersten werde ich FilteredCountries aufrufen, und dann den zweiten, FilteredHotels. Ich habe diese Länder benannt und Hotelvariablen gefiltert, weil diese Ergebnisse mit der Aggregationspipeline gefiltert werden, dann verwenden wir Versprechen an alle, die auch in ES6 neu ist. Das ist gleich, jetzt, wir werden warten, versprechen mit einem Kapital P, .all. Wie wir bereits gesagt haben, Versprechen.All nimmt mehrere Versprechungen, so dass es in unseren Ländern und auch unsere Hotelvariablen im Inneren passieren kann. Lassen Sie uns zunächst in den Ländern vorbeigehen, und das muss eine Reihe sein, und auch unsere Hotels. Nun, dieses Versprechen.All, die wir hier haben, wird nun gelöst werden, sobald sowohl die Länder auch die Hotelversprechen erfolgreich gelöst haben. Während vorher, die Verwendung von wait einzeln, anstatt nur einmal hier, führte dies dazu, dass beide in der Reihenfolge ausgeführt wurden. Jetzt können wir beide gleichzeitig ausschalten, was zu einer schnelleren Leistung führt. die Array-Destrukturierung betrifft, diese Länder und auch die Hotels versprechen, werden diese Länder und auch die Hotels versprechen, dann grundsätzlich ausgepackt und in den konstanten Namen installiert, die wir hier in der gleichen Reihenfolge gesetzt haben. Die Länder werden dann entpackt und in FilteredCountries installiert. Nach der Lösung werden auch die Hotels dann in den FilteredCountries -Konstanten gespeichert. Werfen wir einen Blick auf ein weiteres Beispiel, um unseren Kopf um all das zu bekommen. Wir können diesen Code in lassen, weil das ist, was wir für den Kurs brauchen. Aber dieser hier wird nur ein einfaches Beispiel sein, also müssen Sie nicht mittippen, wenn Sie nicht möchten. Ein Konsonant des Essens. Setzen wir dies auf ein Array und fügen Sie einige Lebensmittelwerte von Käse, Fisch und auch Reis hinzu. Dann eine Konstante von a, b und c. Nun, wenn wir alle Werte aus diesem Array zerlegen und sie innerhalb aller drei Werte hier installieren wollen , aber in Ordnung, so wird a Käse werden, b wird Fisch sein, und c wird gleich Reis sein. Alles, was wir tun müssen, ist, diese Werte gleich unserer Nahrungsgruppe zu setzen. Dann eine Serie mit einem res.send. Lassen Sie uns den Wert von a senden. Überprüfen Sie, ob dies funktioniert und kommentieren Sie unsere res.render. Speichern Sie das und wir sind auch auf der Homepage. Gehen wir zu localhost: 3000. Da ist der Wert von Käse. Lassen Sie uns versuchen b und auch c, die Reis sein sollte. Nachladen. Jetzt erhalten wir auch den Wert von Reis, was bedeutet, dass unser Food-Array jetzt entpackt und dann in allen drei Konstanten gespeichert wurde . Dies ist ziemlich dasselbe, was wir oben mit unseren gefilterten Variablen tun. Dann setzen wir diese an unsere Länder und Hotels Versprechen, sobald die Daten aufgelöst sind. Lassen Sie uns nun dieses Beispiel und [unhörbar] unser res.render. Gut. Jetzt haben wir unsere zwei konstanten Namen, unsere filteredCountries und filteredHotels. Wir müssen diese auch an unsere Vorlage anstelle unserer alten Konstanten hier übergeben. Dieser ist filteredCountries und dieser ist FilteredHotels. Auch da diese Variablennamen jetzt geändert werden, müssen wir sie auch in der Vorlage ändern, um übereinzustimmen. Die Vorlage ist der index.code. Wir gehen hier rein. Für das Hotel, anstatt sich durch Hotels zu schleifen, müssen wir filteredHotels durchlaufen. Dann machen Sie das gleiche mit den Ländern. Dieses Mal verwenden wir filteredCountries. Dann speichern. Nun, alles, was noch zu tun ist, ist, das im Browser auszuprobieren. Sie auf der Startseite auf „Aktualisieren“. Wir können immer noch sehen, wie unsere Hotels aus der Datenbank gezogen werden, und auch die Länder unten unten auch. Das bedeutet sowohl unsere Destrukturierung als auch unsere Promise.ALL Methode funktioniert jetzt erfolgreich. Wie viele Hotels wir in unserer Datenbank haben, die sowohl unsere Versprechen ändern, auf einmal zu laufen, anstatt nacheinander, hat wahrscheinlich nicht viel an Leistung gewonnen, aber es ist eine nützliche Verbesserung dennoch, und etwas zusätzliches Wissen, das nützlich ist, zu haben. Diese Art von Code ist etwas, das bei einer größeren Anwendung auffälliger wird. 39. Umgebungsvariablen: In diesem Video werden wir verwenden, was Umgebungsvariablen genannt wird. Dies wird im Grunde eine separate Konfigurationsdatei innerhalb unserer Projekte sein. Hier werden alle unsere Benutzerkontonamen, Passwörter und Authentifizierungsdetailsan einem Ort aufgelistet Passwörter und Authentifizierungsdetails . Dies hat gewisse Vorteile. Zum Beispiel hält es unsere geheimen Informationen an einem Ort, was bedeutet, dass es einfacher ist, diese eine Datei zu ignorieren, wenn unsere Projekte alle in einen Dienst wie GitHub übertragen werden. Das bedeutet, dass unser Code in einer viel sichereren Art und Weise für die Sicherheit ist. Wenn sie bis zur Produktion erreicht werden, viele Hosting-Anbieter diese Umgebungsvariablen auch erkennen, Einrichtung unseres Hosting noch einfacher macht. Dies ist etwas, das wir später betrachten werden, wenn wir unsere App auf Heroku schieben. Auch wenn eine Wiederverwendung einer dieser Variablen, wie Passbildung in mehreren Dateien, Ändern oder Leasing einer Konfigurationsdatei ist viel einfacher. Dafür werde ich ein Nasenpaket namens „d.env“ verwenden. Dies ermöglicht es uns, im Grunde eine neue Datei mit der Erweiterung.env zu erstellen , und dies wird verwendet, um unsere Variablen innerhalb zu speichern. Im Moment werden die einzigen sensiblen Informationen, die wir haben in unserer app.js gespeichert. Lasst uns das aufmachen. app.js, es ist diese Informationen hier, die unsere Datenbankverbindung ist, aber wir werden mehr vertrauliche Informationen in kommenden Videos hinzufügen mehr vertrauliche Informationen in kommenden , wenn wir mit Cloud Storage für Bilder verbinden. Zuallererst können wir das Paket wie gewohnt innerhalb des Terminals importieren. Unten unten verwenden wir eine npm-Installation, schließen Sie den Server und führen Sie npm-i, dann.env. Geben Sie uns einen Moment, um ein Paket von mpm zu ziehen. Lassen Sie uns einfach den Server neu starten. Würde NPM ihre Sachen laufen? Wenn wir nun unsere Sidebar öffnen, können wir voran gehen und die Config-Datei erstellen, die wir verwenden werden, um alle unsere Variablen darin zu speichern. Schließ das hier ab. Erstellen Sie dann im Stammverzeichnis des Projekts eine neue Datei, die einfach.env ist und stellen Sie sicher, dass sich dies neben der app.js im Stamm befindet. Dann fügen wir unsere Variablen mit Namen, Wert Mops und auch mit den Großbuchstaben hinzu. Ich werde DB verwenden, die für unsere Datenbank ist, und dann die DB-Variable erfüllen, um einer Datenbank, URI, gleich zu sein. Dies ist in der app.js vorbei, öffnen Sie dies, dann können wir unsere Datenbank-URI und die Verbindung zitieren, dies mit den Zitaten herausnehmen und dann als unsere DB-Variable einfügen. Hinter den Kulissen this.env Modul, nehmen wir alle Variablen, die wir in dieser Datei erstellen und fügen Sie sie zu dem, was die process.env Objekte genannt wird, die mit Knoten zur Verfügung gestellt wird. Dieses Objekt enthält Informationen über die Benutzerumgebung wie unseren Benutzernamen und auch das Benutzerverzeichnis. Die Variablen wurden in dieser Datei hinzugefügt, wird auch zu diesem Objekt hinzugefügt werden und so greifen wir auf sie innerhalb von alten Dateien zu. Um dies besser zu verstehen, können wir diese process.env-Objekte ausgeben und sehen, was es enthält. Wenn wir zum HotelController gehen und dann zu den Homepage-Filtern gehen, die vorher sind. Lassen Sie uns jedes Konsolenprotokoll machen und sehen, was enthalten ist. Am oberen Rand unseres Client-Abschnitts fügen wir ein Konsolenprotokoll hinzu, dann wird es in der Konsole protokolliert, die process.env und gehen Sie dann for.user, das ist Großbuchstaben.. USER ist eine der Eigenschaften auf diesen Objekten und enthält den aktuellen Verwendungsnamen. Wenn wir das speichern, ziehen Sie das Terminal hoch und gehen Sie zum Browser, gehen Sie zu unserer Homepage, es wird neu geladen und dann zu Visual Studio Code. Wenn wir nach oben scrollen, sehen wir jetzt den Benutzernamen von Chrisdixon, der in dieser Verwendung der Variablen gespeichert ist. Zusammen mit vielen anderen Dingen, die auch auf diesen Objekten sind. Wir können auch auf das aktuelle Arbeitsverzeichnis mit.pwd zugreifen, diese speichern und dann den Browser des Terminals neu laden. Wenn wir nach den beiden grünen Linien nach unten scrollen, wo der Server neu gestartet wurde, können wir den aktuellen Pfad zum aktuellen Arbeitsverzeichnis sehen. Schließlich können Sie auch unsere eigene DB Variable ausprobieren, die wir gerade erstellt haben. Ändern Sie PWD in DB. Laden Sie den Browser, Scrollen nach unten und wir sehen den Wert von undefined unten unten hier. Dies liegt daran, dass wir es zuerst innerhalb unseres Projekts benötigen müssen , wenn es funktioniert und innerhalb der app.js ist, wo wir dies hinzufügen werden, so dass es so früh wie möglich innerhalb unserer Projekte verfügbar ist . Also app.js, lasst uns ganz nach oben gehen, vor allem diese Variablen und dann innerhalb der Klammern, der.env-Paket benötigen. Wir müssen dies nicht innerhalb einer Konstante aufhalten, da wir nicht mehr innerhalb der Datei darauf zugreifen müssen , sondern stattdessen said.config mit dem Semikolon an den Enden, das den Inhalt der env-Datei übergibt und es dem process.env zuweist Objekte, die wir uns vorher angesehen haben, dann können wir erneut versuchen, den Browser neu zu laden. Speichern Sie diese Datei, laden Sie unsere Projekte neu. Jetzt sehen wir ein Problem innerhalb des Browsers. Wenn wir zu Visual Studio Code gehen, können wir jetzt einige Fehlermeldungen im Inneren sehen. Dies liegt daran, dass wir jetzt versuchen, unsere Mongoose-Verbindung einzurichten, aber wir haben eine leere Verbindung gerade hier. Stattdessen können wir nun unsere DB-Variable übergeben, die Sie vorher erstellen. Wir können dasselbe hinzufügen, genau wie wir es innerhalb des Konsolenprotokolls mit Process.env.db für unsere Variable getan haben. Speichern Sie dies und jetzt, wenn wir den Browser neu laden, funktioniert das alles wieder und scrollen Sie dann nach unten zum Ende des Terminals. Wir können jetzt sehen, dass wir alle unsere Datenbankvariable setzen, die wir noch im Konsolenprotokoll gerade hier haben. Nun lassen Sie uns entfernen ist Konsolenprotokoll, da wir dies nicht mehr brauchen und stellen Sie sicher, dass dies immer noch im Browser funktioniert. Gut. Wenn Sie immer noch die Informationen aus der Datenbank sehen, wie unsere Hotels und auch die Länder unten unten, funktioniert alles noch, aber mit Umgebungsvariablen. Im nächsten Video werden wir weitere Variablen hinzufügen, wo wir uns die Verwendung von Cloud-Speicher mit Cloudinary ansehen werden. 40. Steuerung von Dateiuploads: Momentan haben wir unsere Bilder für die Hotels in unserem Projektordner gespeichert, in der Datenbank gespeichert, einen Dateinamen, sich auf das Bild in unserem Öffentlichen Ordner bezieht. Dies ist in Ordnung zum Testen, aber wir wollen auch irgendwo unsere Bilder speichern, besonders wenn unsere App in die Produktion gedrängt wird. Wir möchten nicht, dass ein Administrator auf unsere Projektdateien zugreift. Um dies zu tun, werde ich einen Dienst namens Cloudinary verwenden. Cloudinary ist eine Cloud-Speicherplattform, die es uns ermöglicht, Bilder und auch Videos hochzuladen. Sie können das hier auf cloudinary.com finden. Ich werde den Service nutzen, um unsere Bilder aus dem Admin-Bereich hochzuladen , wenn Sie ein neues Hotel erstellen. Wir können dieses Bild dann abrufen, wenn wir unser Bild auf unserer Website anzeigen. Cloudinary hat auch viele zusätzliche Funktionen. Obwohl wir auf keine der erweiterten Funktionen von Cloudinary eingehen werden, gibt es eine Menge, die Sie tun können, also schneiden, skalieren und verbessern Sie unsere Bilder vor der Auslieferung, zusammen mit dem Hinzufügen verschiedener Effekte. Aber während dieses Kurses werden wir es so einfach wie möglich halten indem wir einfach Bilder von Cloudinary schieben und abrufen. Zunächst einmal müssen wir auf cloudinary.com gehen und ein kostenloses Konto erstellen. Klicken Sie auf die Schaltfläche „Registrieren“, und fügen Sie dann unseren Namen hier, die E-Mail-Adresse, das Passwort, und es ist alles optional. Bild in Video-Management und erstellen Sie ein Konto. Ich möchte auf „Entwickler“ klicken, „NodeJS“ und auch für andere klicken Sie auf „Weiter“, und es schließt sich, und dann werden wir direkt zum Cloudinary Dashboard gebracht. Sie werden sehen, dass es einige großzügige kostenlose Upload-Limits und mehr als genug Größe für unser Projekt gibt. Hier können wir sehen, wie viele Bytes wir in unserem aktuellen Speicher verwendet haben. Auf der rechten Seite können wir sehen, dass wir einen zusätzlichen Dateispeicher erhalten können, wenn Sie auf sozialen Medien teilen. Aber wir haben mehr als genug, um damit anzufangen. Oben auf der Seite haben wir unsere Kontodetails, die wir mit Cloudinary verbinden müssen, einschließlich unseres API-Schlüssels und unserer Geheimnisse. Wir können diese Details kopieren und in unsere dot-ENV-Datei legen, die wir im letzten Video erstellt haben. Lassen Sie uns zunächst den Cloudinary-Namen kopieren. Klicken Sie darauf und dann auf „Kopieren“. Dann über in unserer Punkt ENV-Datei, lassen Sie uns eine neue Zeile beginnen und dies kann unser CloudInary_name sein, und setzen Sie dies gleich unserem Namen, den wir entdeckt haben. Wir benötigen auch einen CloudInary_API-Schlüssel. Wir können dies gleich unserem API-Schlüssel setzen, der hier ist. Kopieren Sie diese Datei und fügen Sie sie ein. Die dritte, die wir auch brauchen, ist das API-Geheimnis. Dies ist auch im Dashboard zur Verfügung gestellt, so dass Cloudinary API Geheimnis. Wir können zum Armaturenbrett gehen. Das API-Geheimnis ist standardmäßig ausgeblendet, also klicken Sie auf „Verraten“, kopieren Sie es, fügen Sie es hinzu und geben Sie dem eine Speicherung. Dann müssen wir Cloudinary NPM-Paket in unser Projekt installieren. Um dies im Terminal zu tun, schließen Sie unseren Server, Kontrolle und C. Dann haben wir den Befehl NPM, I, cloudinary. Denken Sie daran, ich bin nur die Abkürzung für Installation und gebe einige Momente, um es von NPM zu ziehen. Es sieht so aus, als hätten wir einen Rechtschreibfehler. [ unhörbar]. Gehen wir zum Paketpunkt JSON und überprüfen Sie, dass dies installiert ist. Sie haben Cloudinary als Abhängigkeit. Wir können jetzt zu unserem Hotel-Controller gehen, also schließen Sie das, gehen Sie zu unserem Hotel-Controller im Controller-Ordner. Wir werden über unseren Hotelcontroller auf Cloudinary zugreifen , daher müssen wir es in dieser JavaScript-Datei benötigen. Oben an der Spitze richtet eine Konstante von Cloudinary. Dies ist gleich erforderlich, und das ist ein kein Paket, also verweisen wir einfach auf diesen Namen, Semikolon am Ende. Dann können wir unsere Cloudinary Konfigurationsobjekt einrichten, die alle Konfliktdetails speichern, die wir in unserer dots ENV-Datei platziert haben. Gerade hier drin greifen wir auf unsere Cloudinary Variable dot config zu. Dies ist ein Objekt, das Sie übergeben. Zunächst müssen wir den cloud_name setzen, dies ist gleich unserem CloudInary_name, den wir in der Punkt ENV-Datei gespeichert haben. Denken Sie daran, dass wir diese Variablen mit process.env zugreifen können. Dann kommen die Buchstaben oder der Name von Cloudinary. Gehen wir und benennen wir uns. Der nächste, den wir brauchen, der durch ein Komma getrennt ist, ist unser API_key. Auch hier, das meiste davon für unsere Umgebungsvariable so process.env Cloudinary_API_key, und der letzte, den wir brauchen, ist das API-Geheimnis. Dies ist die process.env auf der letzten war die CloudInary_API_Secret. Beim Hochladen von Bildern ist es nicht einfach, die anderen Teile unserer Formulardaten zu behandeln, z. B. die Textfelder für den Namen und die Beschreibung. Wenn wir auf die hotel_form gehen, die ein Mixin ist. Öffnen Sie den Mixins-Ordner. Öffnen Sie hotel_form. Derzeit verwenden wir beim Speichern unseres Hotels die Standard-Codierung, die alle unsere textbasierten Eingaben verarbeitet, die Sie nicht hier haben. Derzeit haben wir eine Datei Eingaben für das Bild. Wir haben die Eingaben mit dem Typ der Datei, aber anwesend sind wir nicht wirklich speichern ein Bild. Alles, was wir tun, ist, einen Dateinamen zu speichern , der dort mit einer Datei in unserem Öffentlichen Ordner übereinstimmt. Beim Speichern von Bildern in einem Formular mit einer Post-Anfrage, die wir hier sind, müssen wir die Codierung des Formulars ändern, um das zu sein, was Multipart/Formulardaten genannt wird. nach unserer Methode können wir den Ink-Typ und „multi-part/form-data“ hinzufügen. Dadurch kann unsere Bilddatei auch in unsere Post-Anfrage aufgenommen werden. Allerdings müssen wir jetzt einige Middleware zu unserer Express-Anwendung hinzufügen, die weiß, wie man mit diesen Multipart-/Formulardaten umgeht. Dafür verwende ich ein Paket namens Multer. Multer wird im Grunde unsere Bilder aufnehmen, die wir hochladen und uns dann erlauben, etwas mit ihnen zu machen. Es kann die Bilder speichern, um in der Dateiposition oder sogar etwas Speicher einfügen, was wir in diesem Projekt tun werden. Wir können diese Bilder dann zu Cloudinary schieben. Das erste, was wir tun müssen, ist das NPM-Paket unten im Terminal zu installieren. NPM, ich und dann Multer, das ist M-U-L-T-E-R. werden dies auch im Hotel-Controller verwenden, also zurück zu diesem, klicken Sie auf diese Datei. Wir können dies auch ganz oben verlangen. Kommt Multer gleich erfordern Multer Semikolon am Ende und wie wir bereits gesagt haben, Multer gibt uns die volle Kontrolle darüber, wo wir diese Bilder speichern. Wir können fortfahren und das jetzt einrichten. Nur unsere Konfiguration. Wir sagen Speicherkonstanten und setzen dies gleich Multer Dot Disc Storage. Dann übergeben Sie AMC-Objekte. Innerhalb des Datenträgerspeichers können wir ein Optionsobjekt festlegen, um einen Ordner oder Ziel einzurichten , in dem Sie diese Bilder speichern möchten. Ich werde das nicht tun, weil ich diese Bilder in Cloudinary speichern werde. Daher müssen wir in diesem Fall keinen Speicherordner einrichten, wenn wir nur diese Optionen Objekt leer lassen, wie wir hier sehen, wird stattdessen das Standardverzeichnis des Computers zum Speichern temporärer Dateien verwendet. Dann Multer selbst nimmt auch Optionen Objekt zwei. Hier drinnen werden wir unsere Speichervariable übergeben, die erstellt wurde. Lassen Sie uns einfach einen Multer drehen, in dem unsere Dateien gespeichert werden. Wir haben dies bereits mit der Speichervariablen nur hier abgedeckt. Wir können auch Dateifilter übergeben, um die akzeptierten Dateitypen und auch alle Upload-Limits zu beschränken . Aber ich werde es einfach so halten, um die Dinge schön und einfach zu halten. Wir können das dann innerhalb einer Konstante speichern, so dass wir bald darauf zugreifen können. Ich werde diese Konstante den Upload nennen und dieses unser Multer-Objekt einstellen. Die nächste Stufe danach ist, Multer mitzuteilen, dass wir nur einzelne Dateien akzeptieren wollen. Wir tun dies, indem wir auf unsere Upload-Variable zugreifen, die erstellt wurde , und dann dot single, so dass dies multer sagt, wir wollen nur ein einzelnes Bild auf einmal hochladen. Multer hat auch Optionen für die Handhabung eines Arrays von Dateien. Sie können sich die Dokumentation ansehen. Wenn das etwas ist, das Sie interessiert. Innerhalb einer einzigen, geben wir einen Namen, den ich Bild innerhalb der Zitate als Übergabe Bild nennen werde hier drinnen. Das einzelne Bild wird uns zur Verfügung stehen, da multer es dem Anforderungspunktdateiobjekt hinzufügen wird. Dieser Bildname, den Sie nur hier übergeben, ist ein Feldname, der verwendet wird, wenn das Bild an die Punktdatei übergeben wird. Handhabung dieses Images wird ein freier Stage-Prozess oder freie Phasen der Middleware sein. Die erste Stufe, die das Bild hochladen und den Speicher speichern, den wir gerade oben behandelt haben. Um dies zu unserer Middleware hinzuzufügen, müssen wir sie zuerst exportieren. Nur für unseren Upload können wir jetzt Dot Upload exportieren. Setzen Sie dies auf unsere Upload-Dot-Single. Dann fügen Sie dies unserem Router in der Middleware-Kette hinzu. Gehen wir zum Indexpunkt JS innerhalb unserer Routen. Lassen Sie uns die Admin-Routen finden, die wir hier haben. Wir möchten dies hinzufügen, wenn Sie ein neues Hotel hinzufügen. Wir müssen auf die Post-Anfrage für Admin/Add gehen. Hier haben wir derzeit ein Stück Middleware namens Hotel Post erstellen. Dies ist die letzte Stufe, die es in der Datenbank speichert. Aber zuerst können wir einen Datei-Uploader übergeben und so in einer separaten Zeile hinzufügen. Dann folgen Sie einfach diesem, wir können den Hotel-Controller Dot Upload durch ein Komma getrennt zugreifen. Jetzt ist dies unser erster und letzter Schritt in unserem Aufbau. Im nächsten Video werden wir die Dinge beenden, indem ein neues Stück Middleware erstellen, um unsere Bilder in Cloudinary zu speichern, bevor wir unser Hotel in die Datenbank schieben. 41. Speichern von Bildern in der Cloud: Wir haben im letzten Video einige gute Fortschritte gemacht, wir haben unsere Cloud-Nary Konfigurationsdatei eingerichtet, wir haben die mehrteiligen Schrägformulardaten aus unserem Formular behandelt und auch die molto Middleware eingerichtet, um das Speichern des Bildes zu handhaben. In diesem Video werden wir die nächste Stufe behandeln, nämlich diese Bilddatei, die wir hochgeladen haben, zu nehmen und sie dann in die Cloud nary zu schieben. Auch die Behandlung von Fehlern auf dem Weg. Dies wird auch als ein Stück Middleware eingerichtet werden. Also rüber zur index.js Datei. Dies muss zwischen dem Bild-Upload , den ich im letzten Video gemacht habe, und dann der letzten Stufe in der Datenbank platziert werden. Stellen Sie sicher, wie ein Komma nur am Ende hier und dann können wir den Hotelcontroller hinzufügen. Dann die nächste Stufe, die zu Cloudinary drücken ist, fügen Sie am Ende ein Komma hinzu. Dieser Beitrag Anfrage, wenn wir ein neues Hotel hinzufügen, wird durch diese drei Stücke Middleware in der Reihenfolge passieren. Zuerst laden Sie das Bild hoch, speichern Sie es dann in Cloudinary und speichern Sie dann das Hotel in der Datenbank. Oben in den Hotel-Controller dot js, können wir Schub zu Cloudinary erstellen. unter unserem Export Dot Upload, können wir Exporte in Richtung Push hinzufügen die Cloudinary entspricht unseren Anfragen antwortet. Dann richten Sie als nächstes unseren Funktionskörper ein. Das erste, was wir tun müssen, ist zu überprüfen, ob es ein Bild in einer Aussage gibt. Wenn Sie die Punktdatei anfordern. Multiply sagt diese Datei auf den Anforderungsobjekten unter dem Namen der Datei. Hier prüfen wir, ob diese Datei existiert, weil wir die Datei nur an Cloudinary schieben wollen, wenn das Bild tatsächlich dort ist. Es gibt einen Fall, wenn das Bild nicht da ist. Ein nettes, wenn ein Hotel aktualisiert wird. Die Admin-Majors möchte in der Beschreibung oder einer der textbasierten Eingaben erhalten werden. Dann lässt es den Datei-Upload leer. Dann danach können wir eine L-Anweisungen hinzufügen. Dies wird dies an die nächste übergeben, die dann zum nächsten Stück Middleware übergeht, wenn keine Datei vorhanden ist. Dieses nächste Stück Middleware ist der Create-Hotelpost, wie wir in der Router-Indexdatei sagten. Innerhalb des if-Blocks greifen wir auf Cloudinarys Uploader zu. Verwenden Sie dann Cloudinary Dot Upload-Methode. Bei dieser Upload-Methode werden wir ein Bild hochladen, das wir übergeben. Wir können auf diese Verwendung benötigen Punkt Datei Punktpfad zugreifen. Dann können wir eine versprochene ein Handle verwenden, was passiert, wenn der Upload erfolgreich ist. Kurz danach können wir das Semikolon entfernen. Dann können wir dann an einem Punkt festhalten. Stellen Sie einfach sicher, dass dies richtig geschrieben ist. Dot dann, um unser Versprechen zu schaffen. Dann im Inneren hier werden wir eine Funktion erstellen, die in den Ergebnissen nimmt. Dann richten Sie unsere Funktion hier drinnen ein. Diese Ergebnisvariable, die wir hier haben, wird in dem Bild stehen, das wir von Cloudinary zurückbekommen, die auch eine öffentliche ID enthält, die Cloudinary dem Bild hinzufügt. Wir werden dann diese öffentliche ID verwenden, um das Bild in unseren Projekten zu referenzieren , indem wir seinen Wert auf Punktkörper Punktbild anfordern setzen. Anfrage Punkt Körper Punkt Bild ist gleich unseren Ergebnissen, die wir zurück. Dann ist die öffentliche Unterstrich-ID, die von Cloudinary zurückgegeben wird. Diese Anfrage Punkt Körper Punkt Bild ist Impuls, Hotel Post zu erstellen, die die nächste Stufe in der Middleware ist. Diese Bild-ID wird nicht gespeichert, wenn wir das Hotel in unserer Mongo-Datenbank speichern. Um dies zu unserem erstellen Hotel Post zu verschieben, müssen wir als nächstes anrufen. Fügen Sie dies kurz danach hinzu. Dies wird weitermachen, um Hotelpost zu erstellen, die die letzte Etappe in unserer Middleware ist, die Sie gerade hier. Wie wir bereits wissen, müssen wir ein Versprechen beenden, indem wir eine catch-Anweisungen hinzufügen , um Fehler zu behandeln und auf die gleiche Seite umleiten, die wir sind. Gleich nach dem Punkt können wir am Endtag Dot Fang trainieren. Dies ist auch eine Funktion, wo wir eine res dot Umleitung hinzufügen können. Dies wird auf die aktuelle Seite umleiten, so Schrägstrich Admin Schrägstrich hinzufügen gibt uns speichern. Jetzt können wir zum Browser gehen und ein neues Hotel hinzufügen. Unten in einigen, die NPM oder DEF nicht ausführen wollen, startet. Es sieht so aus, als hätten wir einen Fehler, also lasst uns das hochziehen. Es ist Multi-Dot Disk Storage. Ich habe einen konstanten Speicher gleich Multer, der gerade hier ist und Disc-Speicher und das braucht nur V8K so speichern und dann wieder grün werden, gehen Sie zu unserem Projekt im Browser, es lädt neu. Jetzt können wir wieder hingehen. Über zu unserem Admin, Schrägstrich Admin, klingt, dass Boltzmann, können wir ein neues Hotel und zu unserem Formular hinzufügen. Lassen Sie uns einfach einen Test hinzufügen. Wir sagen Testbild. Ich wünschte, ich hätte da drin eine Beschreibung. Klicken Sie auf ein beliebiges Hotel. Sterne-Bewertung ist es nicht wirklich wichtig. Klicken Sie dann auf Bestätigen, um dieses Hotel zu speichern. Dies ist ein gutes Zeichen, dass wir es jetzt in das Hotel umleiten, das wir gerade erstellt haben. Aber wir sehen, dass kein Bild oben angezeigt wird. Lassen Sie uns in die Entwickler-Tools gehen und sehen, was passiert. Rechtsklick prüft, Scrollen Sie nach unten, klicken Sie auf unser Bild. Dieser Bildname ist nun die öffentliche ID, die ich zuvor erwähnt habe. Dies liegt daran, dass wir das Anforderungspunkt-Körperpunktbild nur hier so einstellen , dass es unserer öffentlichen ID entspricht, die von Cloudinary zurückgegeben wird. Lassen Sie uns das einfach wieder aus dem Cloudinary schließen, wir sollten jetzt das Bild sehen, das Sie gerade hinzugefügt haben. Schließen Sie das zu Cloudinary und drücken Sie „Reload“. Klicken Sie auf die Mediathek. Neben Beispielvideos und Bildern, die Sie zur Verfügung gestellt haben, sehen wir auch, dass unser Hotel ein Bild jetzt auf Cloudinary hochgeladen wird. Hervorragend, also hoffe ich, dass das nicht für Sie funktioniert. Im nächsten Video werden wir auch unsere Hotels so einrichten, dass die Bilder von Cloudinary aufnehmen und sie dann in unseren Projekten anzeigen. 42. Abruf von Bildern aus der Cloud: Wir sind jetzt auf einem guten Stand, da wir unsere Hotels speichern können und auch das Bild in Cloudinary gespeichert wird. Wir setzen auch den Bildnamen auf die eindeutige ID, die von Cloudinary festgelegt wird, wenn wir ein Bild hochladen. Daher müssen wir unsere Bildquelle Tantalus so ändern, dass sie korrekt von Cloudinary angezeigt werden und nicht nur die Bilder aus dem öffentlichen Ordner verwenden. So können wir zu unserem Projekt gehen, gehen Sie zu Inspect, klicken Sie auf unser Bild nur hier. Dies ist der Dateipfad, den wir ändern müssen. So kann dies erfolgreich in unserem Projekt angezeigt werden. Dies ist eine ziemlich einfache Effekte. Zuerst können wir die URL von unserem Cloudinary Dashboard abrufen. Also gehen Sie zu unserem Dashboard nur hier, klicken Sie auf den Link. Dann, um unsere URL zu greifen, müssen wir auf den Link Mehr klicken nur hier, und wir haben eine Basis Liefer-URL. Klicken Sie also auf das Dropdown-Menü, und hier erhalten wir zwei verschiedene Beispiele, also lassen Sie uns die URL kopieren, die unseren Cloud-Namen in der Mitte hier enthält. Diese Links zu unseren Konten, dann über unser hotel.pug, das ist der Mixin. Ich gehe einfach ins Hotel, lass uns das aufmachen. Wir können diese Linie aus verbinden und halten sie in als Referenz, aber wir müssen ein neues Bildelemente erstellen. Dieses Mal führt an der Quelle, und wir können diese als Backticks hinzufügen, so dass wir eine Variable verwenden können. Dann fügen Sie unsere URL ein. Der letzte Schritt besteht darin, diese sample.jpg am Ende durch unseren eindeutigen Image-Namen zu ersetzen , der als hotel.image gespeichert wird. So können wir die Template-Literale sehen, öffnen Sie die Klammern und dann hotel.image, außerhalb der Klammern. Wir müssen auch the.jpg Erweiterung hinzufügen. Wenn das speichern, jetzt, wenn wir zu unserem Projekt gehen, klicken Sie auf die „Startseite“ und klicken Sie dann auf „Alle anzeigen“. Wenn wir nach unten scrollen, funktioniert wie erwartet nur unser Hoteltest vorerst. Da die Bildverwendung dafür auf Cloudinary hochgeladen wurde, aber jetzt ist der Rest des Bildes kaputt, da diese als Hotelname gespeichert werden. Lassen Sie uns nun alle Testhotels löschen, die wir in der Datenbank haben , und dann müssen wir durch den Rest der Hotels gehen und jedes Bild aktualisieren. Dies ist so einfach wie zum Update-Hotel-Abschnitt des Admins zu gehen dasselbe Bild erneut hochzuladen. Dies wird es dann zu Cloudinary schieben und eine eindeutige ID erhalten, aber es gibt eine Sache, die wir zuerst tun müssen. Kannst du denken, was das sein mag? Beim Erstellen eines neuen Hotels haben wir den Upload durchlaufen und zuerst die Cloudinary Middleware gepusht , die openindex.js ist. Wir durchlaufen diese beiden Phasen, bevor wir diese in der Datenbank speichern. Wir müssen auch durch die gleichen zwei Phasen laufen, wenn Updates in. Also kopieren Sie den Upload, PushToCloudInary, und gehen Sie dann nach unten zu admin, HotelId Update, das die Post-Anfrage gerade hier ist, sobald das auf einer neuen Zeile ist. Dann direkt oben können wir die ersten beiden Stücke von Middleware passieren, wenn zwei aktualisiert werden, da dies auch den gleichen Image-Uploader behandelt, also lasst uns dies testen, also drüben im Admin. In der Tat können wir unsere Testhotels entfernen, also aktualisieren Sie das mLab und singen Sie ein. Scrollen wir durch eines dieser, und das ist der Test hier. Klicken Sie dort auf das Symbol „Löschen“. Wir haben auch Testbild. Das sollte jetzt auf 12 Bilder hinunter sein. Zurück zum Projekt, lassen Sie uns zum Admin-Bereich gehen. Wir müssen jetzt auch zu den Updates gehen, also Bearbeiten, Entfernen, und scrollen Sie dann nach unten. Das erste ist Hotel1, also lassen Sie uns eine Suche nach diesem machen. Klicken Sie auf „Update Hotel“, und dann alles, was wir tun müssen, ist auf das „Bild“ klicken, wählen Sie „Hotel1" und dann Bestätigen. Jetzt können wir sehen, dass wir es nun in die Hoteldetailansicht umgeleitet haben, die jetzt das Bild hat. Wenn wir einfach zu /all gehen, sollten wir sehen, dass der Rest der Bilder immer noch nicht angezeigt wird, weil wir jedes von ihnen durchgehen und das Bild erneut hochladen müssen. Ich werde Sie jetzt mit dieser Aufgabe verlassen, durch den Rest der Hotels zu gehen und Bilder zu aktualisieren, dann Comeback im nächsten Video, wo wir an unserem Hotel-Suchformular arbeiten. 43. Hotelsuchformular Teil 1: Ganz oben in unserem Projekt haben wir vor einiger Zeit ein Hotel-Suchformular erstellt. Lassen Sie uns dies in die Arbeit bringen, damit Benutzer spezifischer über ihre Buchung sein können. Wir werden kein Live-Buchungssystem implementieren , aber wir werden die Daten weiterhin verwenden, um die Kundenbestellung hinzuzufügen. Dieses Formular befindet sich innerhalb unserer Layout-Punkt-Mops-Datei. Wenn Sie die Seitenleiste öffnen, das Layout Punkt Mops, und dann haben wir unsere Form innerhalb der Suche nav Wrapper gerade hier. Im Moment haben wir unser Formularelement nur hier, aber es hat keine Aktion oder Methodenattribute. Gehen wir weiter und fügen Sie diese jetzt hinzu. Öffnen Sie die Klammern und bei der Aktion, die gleich sein wird, um Schrägstrich Ergebnisse und dann die Methode und dass es eine POST-Anforderung sein kann. Wenn wir das Formular absenden, werden wir diese zwei Schrägstriche Ergebnisse einreichen. Jetzt müssen wir diese Route innerhalb der Indexpunkt-js-Datei behandeln. Der Ordner „Routen“ namens index.js. Lassen Sie uns das schließen. Fügen wir das hier hinzu. Lassen Sie uns das kurz nach den Landstrichen setzen. In der nächsten Zeile hier, Router, Kleinbuchstaben, und dies ist eine POST-Anforderung. [ unhörbar] Absenden der Formulardaten. Im Inneren müssen wir den Router von Schrägstrich Ergebnisse hinzufügen. Es ist Übereinstimmung auf Form. Der Hotel-Controller-Punkt und diese Funktion werden am Ende als Semikolon der Suchergebnisse bezeichnet . Lassen Sie uns zum Hotel-Controller gehen und erstellen Sie die Suchergebnisse im Inneren hier. Unten unten exportiert Punkt-Suchergebnisse. Dies wird eine Sync-Funktion, Anforderungsobjekt, die Antwort und auch als nächstes sein, dann erstellen Sie unseren Funktionskörper. Hier drinnen werden wir mit unserem vertrauten Versuch beginnen und fangen Block. Catch Pass in der Ära kalibriert und dynamische Kapazitäten auf nächste. Auch in der Ära genommen. Wir müssen den Inhalt unserer Post-Anfrage erfassen und ihn dann innerhalb von Konstanten installieren, damit wir dies innerhalb der Funktion verwenden können. Innerhalb des try-Blocks erstellt die Konstanten, und ich werde meine die Suchabfrage aufrufen und dies ist gleich dem Anforderungspunktkörper. Request dot body speichert die Informationen, die von oder Post-Anfrage übergeben werden, dh nur Informationen, die innerhalb des Formulars ist. Die Suche wird durch die Aggregationspipeline ausgeführt werden. Jeder Schritt wird unsere Suchdaten nehmen und dann die Ergebnisse eingrenzen. Beginnen wir mit der Einrichtung unserer Aggregation und speichern diese innerhalb einer Konstante namens Suchdaten. Capital D Set ist zu warten. Unser Hotelmodell. Gedanken, Aggregate, genau wie wir es vorher benutzt haben. Dann innerhalb der Klammern können wir diese eckigen Klammern als Array übergeben , so dass wir in unseren verschiedenen Phasen der Aggregationspipeline passieren können. Die anfängliche Aggregationsstufe wird die Matchphase innerhalb der geschweiften Klammern sein. $ Symbol übereinstimmen, genau wie wir zuvor verwendet haben und dann werden wir etwas verwenden, das wir noch nicht gesehen haben, das $ Symboltexte ist und er wird verwendet, um eine Textsuche auf unseren Hotelfeldern zu erstellen. Innerhalb von hier, öffnen Sie die geschweiften Klammern wieder, $ Symbol Suche. Wir wollen viel [unhörbar] Aufzeichnungen auf den Text durch den Benutzer eingegeben. Dies kann mit diesem $ Symboltext erreicht werden, der eine Tech-Suche durchführt. Hier übergeben wir die Suche, die eine Zeichenfolge sein wird, die Mongo verwendet, um unsere Datenbank abzufragen. Erhöht, welche Zeichenfolge wir verwenden möchten. Nun, das ist das Ziel aus allen Formen. Wenn wir zurück zu unserem Layout Punkt Mops Datei gehen, ist das Ziel die erste Eingabe gerade hier, die diesen Namen des Ziels hat und dies wird auch mit der Post Anfrage übergeben , so dass es mit Suchabfrage Punkt Ziel zugreifen kann. Lassen Sie uns dies jetzt hinzufügen, so Suchabfrage, die unsere Konstante gerade hier ist, Punkt Ziel. Bevor wir weiter gehen, lassen Sie uns sehen, welche Daten an uns zurückgegeben werden. Wir können dies tun, wenn wir außerhalb unserer Aggregation gehen, war die nächste Zeile und machen eine res.json vorbei in unseren Suchdaten. Dies sind die Daten, die von MongoDB zurückkommen sollten und es ist in dieser Variablen nur hier gespeichert. Du speicherst einfach und dann auf die Homepage. Wir können eine Suche erstellen. Ich habe hier drin keine Details gemacht, was nicht wirklich wichtig ist. Gäste und und klicken Sie auf Suchen. Jetzt sehen wir, wenn wir nach unten scrollen, gibt es einen Fehler des Textindex erforderlich ist. Das bedeutet, dass wir indizieren müssen, welche Felder wir suchen möchten. Ich werde den Hotelnamen und auch das Feld des Landes durch diese Formulareingabe durchsuchbar machen. Ein Benutzer könnte nach dem Ziel suchen, einfach viel [unhörbaren] Hotelnamen hören oder durch Hinzufügen eines Landes. Wir indizieren Felder in unserem Hotelmodell. Gehen wir rüber zur Seitenleiste. Im Inneren unserer Modelle öffnen wir das Hotel dot js. und ganz unten außerhalb unserer Objekte, beginnen wir zuerst mit dem Zugriff auf unser Hotelschema, das ist der Name der Konstante. nur an der Spitze hier. Zurück nach unten. Dot Index gibt den Index die Felder, die wir aus unserem Modell suchen wollen. Übergeben Sie ein Objekt, das in den Feldern nimmt. Das erste Feld, das wir suchen wollen, da wir nach Hotels suchen. Wenn wir rüber zum MLab gehen, hier drinnen, wollen wir nach den Hotelnamen suchen. Wir haben das Hotelnamenfeld und wir wollen auch nach Land suchen. Darüber hinaus können wir das Feld Land verwenden. Innerhalb unseres Schemas können wir diese beiden Felder hinzufügen. Der erste ist der Hotelunterstrich Name und dies wird auf eine Zeichenfolge von Text gesetzt werden. Dann könnten wir das gleiche mit dem Land tun, Städte, um Text zu schreiben, schlagen Sie diesen Safe. Wir können auch jedes der Felder hier hinzufügen, wie die Beschreibung. Un-Suche würde auch in seinem Feld aussehen. Wenn Wir auch wieder zum mLab gehen, wird es neu geladen. Wenn das Anmelden lassen Sie uns ohne Details unterzeichnen. Klicken Sie oben auf unseren Datenbanknamen. Wenn wir nach unten scrollen, sowie unsere Hotelsammlung, die wir hier drin haben, können wir jetzt Systempunktindizes sehen, die zwei verschiedene Dokumente enthält. Wenn wir dies öffnen, kann es zunächst ein wenig verwirrend aussehen, aber bald erweitern wir dies sehen wir einen Verweis auf einen Hotelnamen und auch auf unser Land, so dass diese Felder beide einrichten, um in unserer Suche aufgenommen werden. Nun, wenn wir zum Projekt gehen und dann den Browser neu laden, und lassen Sie uns eine neue Suche machen. Fügen Sie unser Land, unsere Dauer und das Datum ist in Ordnung. Es sucht. Aber jetzt bekommt es unsere JSON-Daten zurück, die zu unseren beiden Hotels in dem Land passen, das wir innerhalb des Formulars hinzugefügt haben. Es gibt jetzt ein kleines Problem, wenn wir dann zurück gehen und etwas tun, wie eine Suche nach Hotel eins, Hotel eins hier drinnen. Denken Sie daran, indem Sie diese beiden Felder indizieren, suchen wir auch im Hotelnamen und im Land. Das sollte funktionieren. Wenn wir jedoch suchen, sehen Sie eine vollständige Liste aller Hotels in unserer Datenbank, anstatt uns eines zu sagen. Dieses Ergebnis liegt daran, dass wir nicht nach dem vollen Hotel suchen. Stattdessen wird standardmäßig eine Übereinstimmung für ein einzelnes Wort zurückgegeben, so dass wir alle Ergebnisse für das Wort Hotel sehenund auch alles, was eine Übereinstimmung für ein einzelnes Wort zurückgegeben, so dass wir alle Ergebnisse für das Wort Hotel sehen mit der Nummer eins übereinstimmt weil alle unsere Hotels das Wort Hotel darin haben. diesem Grund sehen wir alle diese Hotels aus einer Datenbank zurückgegeben. Um dies zu beheben, können wir eine Übereinstimmung mit der vollständigen Phrase durchführen. Nur Hotel eins würde für die Forschung zurückgegeben werden, indem man sogenannte Escapes doppelte Anführungszeichen verwendet, die so aussieht. Geh rüber zu unserem Controller. Das erste, was wir tun müssen, ist, diese innerhalb der Klammern zu umgeben , weil wir dynamische Daten verwenden werden. Dann können wir das $ Symbol verwenden und dies in den geschweiften Klammern umgeben , genau wie wir es zuvor getan haben. Das nächste, was wir tun müssen, ist unsere Escapes doppelte Anführungszeichen hinzuzufügen. Kurz nach der ersten Klammer verwenden wir einen umgekehrten Schrägstrich und dann einen doppelten Anführungszeichen und dann machen wir dasselbe und gleich nach dieser geschweiften Klammer hier mit dem umgekehrten Schrägstrich und dann den doppelten Anführungszeichen. Die doppelten Anführungszeichen behandeln dies als eine Zeichenfolge. Alle Wörter innerhalb unserer Suchanfrage werden als vollständige Phrase und nicht einzelne Wörter, die wir zuvor gesehen haben, gesucht . Wir müssen auch diese Anführungszeichen mit den hinteren Schrägstrichen entkommen. Diese Anführungszeichen werden auch mit dem Text aus der O-Variable gerendert. Lassen Sie Mongo wissen, dass die vollständige Phrase nicht nach den einzelnen Wörtern gesucht werden soll. Wenn wir diese jetzt speichern und dann den Browser aktualisieren, fahren Sie mit der Homepage fort. Sie können jetzt nach Hotel eins suchen. Klicken Sie auf Suchen. Jetzt würde er das Hotel 10, 12, 11 und eins sehen. Wir sehen jetzt nur die Hotels, die mit dem Satz von Hotel eins übereinstimmen. Wir sehen Hotel Nummer 10, weil es beginnt mit Hotel eins, sparen Hotel 12. Dies entspricht dem ersten Teil der Phrase Nummer 11, und auch unserem Hotel eins. All diese Verhaltensweisen sehen vielleicht nicht ganz richtig aus, da wir unsere Hotels mit Nummern benannt haben. Diese Art der Suche wäre effektiver, wenn diese Hotels realistischere Namen haben. Das bedeutet, dass der Benutzer den vollständigen Hotelnamen nicht eingeben muss. Sie erinnern sich vielleicht nur an einen Teil des Hotelnamens, erhalten aber immer noch die Ergebnisse, die sie benötigen. Gehen wir zurück und versuchen Land, umgeben von Hotel eins. Geben wir Mexiko ein. Klicken Sie auf die Suche und jetzt sehen Mexiko hier und auch nur um zu bekommen. Gut, dieses erste Feld funktioniert nicht. Auf die nächsten. Weiter ist auch eine viel Phase in Aggregationspipeline, wo wir unsere nicht verfügbaren Hotels filtern. Fügen Sie direkt nach der ersten Übereinstimmung ein Komma hinzu. Wir können unser zweites Spiel einrichten, genau wie wir es oben getan haben, mit tala-Symbol-Übereinstimmung. Öffne die geschweiften Klammern. Dann im Inneren hier können wir überprüfen, ob die verfügbaren Felder auf einen booleschen Wert von true gesetzt ist. Gehen wir nun zu mLab und setzen eines dieser Hotels auf nicht verfügbar. Lets gehen für Hotel Nummer drei, klicken Sie auf Bearbeiten. Die Verfügbarkeit ist falsch. Unten unten, verfügbar gleich false. Speichern Sie und gehen Sie zurück. Nun natürlich, das Projekt ist drücken Sie die Zurück-Taste und dann ändern Sie unser Ziel einfach Hotel-Suche sein. Jetzt haben wir Hotel Nummer drei, Siedlung verfügbar. Wenn wir jetzt nach unten scrollen, sollten wir alle Hotels außer Nummer drei sehen. Fahren Sie weiter bis ganz unten. Großartig. Wir sehen kein Hotel drei mit unseren Ergebnissen zurückgekehrt. 44. Hotelsuchformular Teil 2: Als nächstes werde ich einen Filter hinzufügen, um nur das Hotel größer als die Sternebewertung, nach der wir gesucht haben, zurückzugeben . Zunächst einmal, wenn Sie eine Suche machen, wieder nach Mexiko, drücken Sie „Suchen“. Diese Hotels haben unterschiedliche Sternebewertungen. Wir können überprüfen, ob unser Filter funktioniert. Innerhalb der Spielbühne. Wir können mehr als einen Filter hinzufügen. Lassen Sie uns zu einem Hotel-Controller gehen, und dann kurz nach der Verfügung von true, können wir auch eine zweite Match-Phase hinzufügen, und dieses Mal wollen wir nach der Sterne-Bewertung suchen. Es ist star_rating als Name des Feldes der Doppelpunkt, und öffnen Sie dann die geschweiften Klammern. Im Inneren hier, wenn Sie sehen, die größer als Operator, die $ Symbol GTE ist. Wir prüfen, ob die Sternebewertung größer ist als die Suchabfragepunktsterne. Jetzt sollten wir nur Ergebnisse von Mongo zurück zu uns bekommen, unabhängig von der Sternebewertung, größer als das, was vom Benutzer eingegeben wurde. Nun, wenn wir dies speichern und dann zum Browser gehen, drücken Sie den „Zurück Button“ und ändern Sie ihn dann auf ein Minimum von vier. Klicken Sie auf „Suchen“. Wir sollten sehen, dass nur ein Hotel zurückkehrt, aber stattdessen sieht es so aus, als ob wir einen Fehler bekommen. Gehen wir einen kleinen Schritt zurück und finden heraus, was hier vor sich geht. Zunächst einmal, wenn wir zu unserem Controller zurückkehren, und dann innen hier, können wir die res.json ändern, um die Suchabfragekonstanten zu sein, daher können wir sehen, welche Daten von unserem Telefon kommen. Änderungen, um Suchabfrage zu sein, drücken Sie „Speichern“ und dann neu zu laden. Offensichtlich sind hier die Formulardaten, die von der Postanforderung gesendet werden. Wenn man etwas näher hinschaut, liegt hier das Problem. Alle diese JSON-Werte sind in Anführungszeichen umgeben, genau wie die Sterne, und auch in der Sortierreihenfolge, was bedeutet, dass diese als Zeichenfolge behandelt werden. Aber die Sternebewertung in unserer Datenbank, wenn wir zu „mLab“ gehen, scrollen Sie nach unten, wird diese als Zahl ohne Zitate gespeichert, und deshalb erhalten wir nicht die erwarteten Ergebnisse. Wir können dies bestätigen, lassen Sie uns zuerst die Suchdaten wiederherstellen. In unserem res.json, erfüllt unsere Wände, kommentieren Sie diese Zeile aus, und dann können wir res.send tun, und wir wollen senden ist die Art der Suchabfrage, Punktsterne, das Semikolon am Ende. Dies wird dann wieder zum Datentyp der Suchabfragepunktsterne zurückkehren. Speichern Sie diese und laden Sie die Projekte neu. Klicken Sie auf „Weiter“ und jetzt werden wir sehen, dass wir einen Datentyp von String erhalten. Obwohl wir erwarteten einen Wert von einer Zahl für die Anzahl der Sterne. Dies liegt daran, dass Daten, wenn sie von einem Server an einen gesendet werden, als Nur-Text gesendet wurden. Daher interpretiert der Client dies als eine Zeichenfolge. Dies bedeutet, dass wir zuerst diesen Datentyp konvertieren müssen, damit er funktioniert, und wir haben eine Javascript-Methode namens parse Int. Um dies zu tun, wenn wir direkt nach unserer Suchabfrage an den Anfang des try-Blocks gehen, lassen Sie uns eine neue Konstante namens geparste Sterne erstellen und dies auf unsere Javascript-Methode der Parse Int setzen. Innerhalb der Klammern können wir die Zeichenfolge übergeben, die übergeben werden will, und wir wollen die Suchabfrage Punktsterne übergeben. Kopieren Sie diese und fügen Sie sie in ein. Dies wird ihnen verleihen, die Zeichenfolge als Zahl mit der Parse-Int-Methode übergeben, und speichern Sie sie dann in dieser Konstante nur hier. Wir können diese Konstante dann innerhalb unserer Aggregationspipeline verwenden. Kopieren Sie geparste Sterne, und dann anstatt die Suchabfrage Punktstern von vorher zu verwenden, die wir jetzt wissen, ist eine Zeichenfolge. Wir können dies jetzt einfügen, drücken Sie „Speichern“. Dann können wir unsere res.json tun, indem wir diese Zeile auskommentieren und dann unseren res.send Hit „Speichern“ löschen, den Browser neu laden, und dann können wir rückwärts zu allen Formularen gehen. Suchen Sie jetzt nach einem Minimum von drei Sternen. Hit „Suche“ wir gehen mit zwei Hotels in Mexiko von vorher, gehen rückwärts und klicken Sie dann auf „Vier Sterne“ diesmal, Hit „Suche“. Jetzt erhalten wir nur die einzelnen Hotelrenditen, die diese Sternebewertung von vier ist. Der letzte Schritt in dieser Pipeline besteht darin, diese Auswahlbox hier zu arbeiten , um den Preis von hoch zu niedrig oder niedrig zu hoch zu lösen. Dies können wir eine Quellphase der Aggregationspipeline hinzufügen. Gehen wir zurück zu unserem Kontrolleur. Nach der Match-Phase können wir ein Komma hinzufügen, und dann direkt darunter, lassen Sie uns unsere Sortierphase mit einem $ Symbol erstellen und dann sortieren, dann können wir im Feld Namen der Kosten pro Nacht hinzufügen. Wir müssen nicht nach den Kosten pro Nacht sortiert werden, die den Preis für das Hotel hält. Dies muss dann das Sortierfeld aus dem Formular nehmen, das in der Suchabfragepunktsortierung gespeichert ist , aber Sie haben möglicherweise bereits ein Problem damit erwartet. Genau wie die Sternebewertung ist dies auch eine Nummer zwei. Wir müssen die Parse Int-Methode erneut auf diesem Feld verwenden. Das Sortierfeld ist eine Zahl, weil, wenn wir zum Layout Punkt Bug gehen und dann nach unten zu einem Select scrollen, die nur hier ist. Wir haben einen Wert von entweder einem oder einem negativen. Der Wert von eins gibt die Dokumente in aufsteigender Reihenfolge zurück, und der negative wird in absteigender Reihenfolge zurückgegeben. Beginnen wir mit der Analyse unserer Nummer. Um den Hotelcontroller, kurz nach den geparsten Sternen, können wir ein Semikolon hinzufügen, eine Konstante einrichten, diesmal als geparste Sortierung bezeichnet. Das ist gleich unserer Parse Int-Methode, die in dieser Zeit die Suchabfrage übergibt, und dann Punkt sortieren, fügen Sie am Ende ein Semikolon hinzu, und jetzt können wir diese geparsten Sortierkonstanten anstelle der Suchabfrage fügsam von vorher, geben Sie dies ein Speichern, über den Browser. Lassen Sie uns die Sternebewertung fallen, um die Nummer eins zu sein. Wir erhalten unsere zwei Mexiko-Hotelrückgaben und ändern es dann zu hoch zu niedrig. Klicken Sie auf „Suchen“. Jetzt haben Sie eine Warnung hier drüben also gehen wir zurück, und es will nur ein Kapital sein, das ich, drücken Sie „Speichern“ und dann „Reload“. Da sind unsere zwei Hotels in Mexiko. Die Kosten betragen 67, dann 56. So hoch zu niedrig, aber ich gehe zurück und ändere mich von niedrig zu hoch, trage „Suche“ und habe jetzt 56 gefolgt von 67. Dies scheint gut zu funktionieren, wenn wir zurück gehen und zu einem anderen Ziel wechseln. Die Dominikanische Republik hat auch mehrere Hotels. Klicken Sie auf „Suchen“, wir sehen unser Land. Die Kosten sind in Ordnung, gehen Sie zurück und ändern Sie es von hoch zu niedrig. Nun sind diese auch in numerischer Reihenfolge sortiert. Wir haben nun die Daten zurück, die wir aus der Datenbank benötigen. Als Nächstes erstellen wir eine Vorlage für Suchergebnisse, um diese Hotels innerhalb unserer Projekte anzuzeigen. 45. Vorlage Suchergebnisse: Jetzt haben wir die richtigen JSON-Daten, kehren Sie jetzt aus der Datenbank zurück. Wir müssen nun eine Vorlage erstellen, um diese Daten dem Benutzer anzuzeigen. Zuerst, wenn wir zu unserem Texteditor gehen, können wir eine neue Seitenvorlage namens search_results erstellen. Öffnen Sie also die Sidebar und gehen Sie dann zu unseren Ansichten, Neue Datei, also ist dies der search_results.pug. Dann können wir die res.json vom Controller ersetzen, um diese Seitenvorlage zu rendern. Gehen wir also zu unserem Controller, Hotel controller.js ist , gehen Sie zur Suchergebnisfunktion und anstatt dieses res.json zu haben, lassen Sie uns dies auskommentieren, doppelten res.render. Wir können unsere neuen Seitenvorlagen von Suchergebnissen, Komma und dann persönliche Optionen Objekt mit dem Titel der Suchergebnisse rendern . Fügen wir am Ende ein Semikolon hinzu. Dann müssen wir an die Vorlage zwei Dinge übergeben. Zuerst ist die Suchanfrage, die unser Abreisedatum und auch die Anzahl der Nächte enthält. Dies wird in der req.body gespeichert, die die Daten sind, die aus dem Formular gesendet werden. Fügen Sie also ein Komma hinzu; und fügen Sie dann unsere Suchabfrage hinzu; und fügen Sie dann ein Komma hinzu, und dann können wir auch unsere Suchdaten hinzufügen, das sind die Daten aus der Datenbank nach unseren Aggregationsfiltern, die Sie hier sehen. Jetzt können wir zu unserer Suchergebnisvorlage gehen. Speichern Sie diese Datei, gehen Sie zum search_results.pug. Dies wird Layouts erweitern. Wir können unsere Mixins einschließen. Also mixins/_hotel, weil wir dieses Mixin wiederverwenden, um alle Hotels als Liste unserer Suchergebnisse anzuzeigen. Danach fügen wir unsere Blockinhalte hinzu, unsere h2 für den Titel, und dann müssen wir jedes der Hotels in diesen Suchdaten durchlaufen, die an uns weitergegeben werden. Also machen wir eine Schleife, wo jeder Anruf dieses individuelle Hotel, das Hotel. Also in Suchdaten, können wir einen hotel_wrapper oder das CSS hinzufügen, fügen Sie alle mixin, so plus hotel. Zuerst gehen wir zum Hotel. Natürlich müssen wir die Hoteldaten übergeben, was diese hier ist, aber wir können auch die vollständige Suchanfrage übergeben. Denken Sie daran, dass wir auch Suchabfrage an diese Vorlage im Controller senden, die gerade hier ist und dies wird alle Informationen aus unserem Formular zu halten, wie die Abreisedaten und die Anzahl der Nächte. Dies ist alle Informationen können auch in den Suchergebnissen enthalten werden . Also lasst uns das testen. Wenn wir zum Browser gehen, und dann gehen wir zurück und erstellen Sie eine neue Suche oder in der Tat können wir einfach auf die Suchschaltfläche klicken hier, und verwenden Sie die vorhandenen Daten, und scrollen Sie nach unten. Okay, gut. Also jetzt haben wir unsere Suchergebnisse gerade hier und jetzt anstelle des JSON-Formats, haben wir jetzt unsere beiden Hotels, die viel schöner aussehen. Das ist gut, aber es gibt noch einige weitere Details, um dieses Hotel hinzuzufügen. Bevor wir das Hotel-Mixin den Suchabfragedaten zusammenfassen, die die Abreisedaten und die Anzahl der Nächte aus der Benutzersuche enthielten. Das sieht gut aus, aber es gibt noch einige weitere Details, die Sie diesem Hotel hinzufügen können. Wir wollen auch auf der rechten Seite die Abreisetermine und auch die Anzahl der Nächte, als einige zusätzliche Informationen angeben. Wir geben das also mit den Suchabfragedaten an das Hotel Mixin weiter. Gehen wir rüber zu unserem Mixin. Die Suchergebnisse, lassen Sie uns diese Daten von hier bekommen. Also jetzt übergeben wir zwei verschiedene Argumente, wir müssen dies auch in unserem Mixin aufnehmen. Also _hotel, wir können dies als unser zweites Argument nur hier oben übergeben und dann die Suchabfragedaten innerhalb des Hotels anzuzeigen, können wir dies mit einigen bedingten Rendering tun. Scrollen wir nach unten. Sie unter den Kosten pro Nacht ErstellenSie unter den Kosten pro Nachteinen neuen Abschnitt. Wenn wir diese zurück eine Ebene, so ist es Ebene mit der Hotelinfo. Erstellen Sie eine if-Anweisungen, also wenn url === '/results', dann können wir in den anderen Details hinzufügen. Lassen Sie uns ein neues umgebendes div des CSS, der Hotelbestellungsdetails oder mit Unterstrichen hinzufügen. Dann könnten wir einfach ein paar p Elemente einrichten, um diese Daten anzuzeigen. Wir verwenden die hinteren Ticks, also mischen Sie die dynamischen Daten mit dem Text. Anzahl der Nächte, ein Doppelpunkt dann die Kapazität in unseren dynamischen Daten von searchQuery.Duration. Ein zweiter Satz von p-Elementen, wieder mit hinteren Ticks. Dies ist für die Abfahrtsdaten, mit einem Doppelpunkt und diesmal ist dies die Suchabfrage. Datum der Abreise. Das ist alles Kamelfall. Als Nächstes müssen wir die Summen hinzufügen. Zunächst einmal, wenn wir nur speichern und überprüfen, dass dies funktioniert. Wenn wir den Browser neu laden, senden Sie das Formular erneut ein. Wir haben nun ein neues div auf der rechten Seite, das unsere Daten enthält, die von unserem Suchformular an das Hotel weitergegeben wurden. Jetzt müssen wir auch zwei weitere Informationen hinzufügen. Der erste ist der Preis pro Person, und der zweite unten, wir werden auch einen Gesamtpreis für alle Menschen zusammen. Um dies zu tun, die Art und Weise werden wir die Kosten pro Person ausarbeiten , ist die Anzahl der Nächte mit den Kosten pro Nacht zu multiplizieren. Dann müssen wir auch eine zweite Berechnung erstellen, die diese Kosten pro Person multipliziert mit der Anzahl der Gäste ist. Um dies einfacher zu machen, gehen wir zu unseren Vorlagen. Jetzt können wir etwas JavaScript hinzufügen. Lassen Sie uns die Konstante für die CostEach hinzufügen, die gleich searchQuery.Duration sein wird . Dann müssen wir die Dauer mit dem hotel.cost pro Nacht multiplizieren. Also dieser hier war cost_per_night, ich werde das klein machen, so dass es auf eine Zeile passt. Denken Sie also daran, dass wir die Dauer in der Suchabfrage gespeichert haben, die das Formular übergibt. Aber die Kosten pro Nacht sind im Hotel gespeichert, die wir bekommen von diesem hier zur Verfügung nur hier gespeichert. Lassen Sie uns nun eine zweite Konstante erstellen. Dies wird für die Gesamtkosten für die Buchung, also Gesamtkosten. Also dieser wird gleich unseren Kosten pro Person sein, die pro Person kostet und dann, wenn wir dies mit unserer searchQuery.numberOfGuests multiplizieren müssen . Jetzt können wir diese beiden Konstanten verwenden und ich werde sie in unsere p Elemente setzen. Öffne die Markierungsticks. Der erste wird insgesamt pro Person sein und fügen wir ein Währungssymbol hinzu. Dann können wir unsere dynamischen Daten innerhalb der Template-Literale tun. Kosten jeweils in einer horizontalen Regel, so können wir die Gesamtkosten ganz unten haben, innerhalb eines h3. Die Rückseite tickt wieder für die Gesamtkosten, das Währungssymbol dann unsere dynamischen Daten, die die Variable der Gesamtkosten sind. Geben Sie das Speichern und dann lassen Sie uns das ausprobieren, wir senden das Formular erneut ein. Okay, gut. Wir haben die Anzahl der Nächte, die Abreisedaten, die Summe für eine Person, und dann die Gesamtkosten, die dies mit der Anzahl der Gäste multipliziert ist. Lassen Sie uns nur nochmals überprüfen, wenn wir hier zurückgehen, hatten wir zwei verschiedene Gäste sagen, die Summe ist doppelt so hoch wie die Kosten pro Person. Wir haben auch den Preis von hoch nach niedrig sortiert. Lasst uns nochmal suchen. Wir haben hier einen höheren Preis, dann sehen wir unten. Gehen wir zurück und ändern dies zu niedrig zu hoch. Wir können auch den Gast vorher ändern und dies auch ändern. Klicken Sie auf „Suchen“, gehen Sie nach unten. Ok, großartig. Jetzt wurden alle unsere Details aktualisiert. Wir haben neue Gesamtkosten, die mit vier multipliziert werden. Wir haben eine neue Anzahl von Nächten und auch der Preis ist jetzt von niedrig bis hoch. Wenn wir auf die Homepage gehen, klicken Sie auf das „Logo“ scrollen Sie nach unten zu allen Hotels. Wir sehen keine dieser Hoteldetails auf der rechten Seite wegen dieser bedingten Rendering. Versuchen wir, alles zu sehen, wir sehen hier immer noch nichts. Das sieht jetzt alles gut aus. Denken Sie daran, dass wir diesen neuen Abschnitt innerhalb eines div umgeben, genannt Hotelbestellungsdetails. Lassen Sie uns das kopieren, und dann können wir dies innerhalb des CSS stylen. Gehen wir über die Seitenleiste im Öffentlichen Ordner, Stylesheets; und dann die Style.css. Scrollen Sie dann außerhalb einer Medienabfrage nach unten nach unten. Lassen Sie uns zuerst mit dem kleinen Bildschirm arbeiten, Basis in den Details der Hotelbestellung. Beginnen wir mit dem Hinzufügen einer Hintergrundfarbe. Halten Sie div ein wenig getrennt vom Rest. Sobald Sie den Hex-Wert eed verwenden, legen Sie den Text in der mobilen Ansicht so fest, dass er sich in der Mitte befindet. Dann ein wenig Polsterung halten Sie es von der Kante von 1em fern. Jetzt speichern wir dies, und dann lädt es den Browser auf dem kleineren Bildschirm neu, fügen Sie eine Suchabfrage hinzu. Jedes Detail ist in Ordnung. Lasst uns suchen. Jetzt scrollen Sie nach unten. Wir sehen nun die Suchergebnisse für dieses Land. Dies ist das neue div, das mit der anderen Hintergrundfarbe hinzugefügt wurde. Wir können sehen, dass der Text auf diesem neuen div zentriert ist, aber es ist nicht auf dem Hotel-Info-Bereich oben auf dieser speziellen Falten/Ergebnisseite zentriert . Gehen wir weiter und reparieren das jetzt. Auch außerhalb der Medienabfrage ist dies der Hotel-Info-Bereich. Scrollen Sie nach oben, so lassen Sie uns die Textzeile hinzufügen Sensor sein. Gibt uns einen Nachladen, und da gehen wir, so dass sieht viel besser. Lassen Sie uns einfach schnell überprüfen, dass dies keinen der Bereiche unserer Websites durcheinander bringt. Wenn wir auf die Homepage und auch auf Alle sehen gehen, müssen wir dies in der Medienabfrage wiederherstellen. Lassen Sie uns einfach diesen Hotel-Info-Bereich kopieren, scrollen Sie nach unten zur Medienabfrage, und hier geht's. In der Tat können wir einfach die Textzeile ändern, um wieder nach links zu sein, neu zu laden und das sieht jetzt viel besser aus. Zurück zu unserer Suchanfrage können Sie ein paar weitere Stile für die größere Ansicht hinzufügen. Lassen Sie uns die gleiche Suchabfrage hinzufügen, klicken Sie auf „Suchen“. Jetzt auf dem größeren Bildschirm haben wir noch diesen Text auf der rechten Seite zentriert. Dies ist in Ordnung für die kleine Bildschirmansicht, aber für die größere Ansicht möchten wir diesen Text wieder nach links ausrichten. Innerhalb der Medienabfrage noch einmal, lassen Sie uns nach unten gehen, und wir können dies direkt nach der Hotelinfo hinzufügen. Das umgebende div war wieder hotel_order_details und alles, was wir tun müssen, ist die Textzeile hinzuzufügen, um auf der linken Seite zu sein. Speichern Sie dies und laden Sie dann neu, bestätigen Sie das Formular, und da gehen wir. Das sieht auf dem größeren Bildschirm viel besser aus. Ich sollte das verkleinern und überprüfen, dass alles noch gut aussieht. Ausgezeichnet, die Suchergebnisse funktionieren jetzt wie erwartet und wir haben auch ein wenig Styling hinzugefügt. Als Nächstes bleiben wir beim Thema des Suchformulars, indem wir auch mehr auf der Detailseite des Hotels hinzufügen. 46. Hoteldetailsuche von: Wir haben jetzt ein funktionierendes Suchformular in der Kopfzeile. Ich füge nun ein ähnliches zur Detailansicht des Hotels hinzu. Sie fragen sich vielleicht, warum wir das tun müssen. Werfen wir einen kurzen Blick. Wenn wir auf die Homepage gehen und dann auf die Detailansicht des Hotels für eines dieser Hotels gehen. Klicken Sie auf den Titel, um ihn dann zur Vollansicht zu bringen. Stellen Sie sich vor, wir waren ein Benutzer, der diese Seite besucht, und dann möchten wir uns dieses Hotel ansehen und dann darauf geklickt haben. Im Moment gibt es keine Möglichkeit, diese Buchung zu personalisieren , indem Sie unsere Daten hinzufügen, die das Abreisedatum, die Anzahl der Gäste und auch die Dauer enthalten. Wenn wir dieses Hotel besuchen würden und wir eine Buchung vornehmen wollten, wäre der einzige Weg, dies zu tun, in die obere Navigation zu gehen und eine neue Suche zu erstellen. Dies mag im Moment kein großes Problem sein, weil wir nicht viele Hotels haben, aber bei einem größeren Projekt mit Tausenden von Hotels kann dies zu einem Problem für den Benutzer werden. Was wir in diesem Video tun werden, ist ein ähnliches Suchformular zu erstellen wie das in der Kopfzeile. Wir gehen, um es dann unten unten zu platzieren, aber das wird nur bestimmte Informationen haben. Wir brauchen nur die Dauer, das Abreisedatum und auch die Anzahl der Gäste. Wir werden auch die Sternebewertung und den Preis entfernen, weil wir diese nicht brauchen , da wir bereits das Hotel ausgewählt haben, was wir wollen. Gehen wir zu unserem layout.pug und wenn wir nach unten scrollen, ist dies das Suchformular von der oberen Navigation. Wenn wir diesen Abschnitt aus dem Abschnitt von div kopieren, den ganzen Weg hinunter zu unserem Submit-Button, lassen Sie uns das kopieren und dann zu unserem Unterstrich Hotel gehen, welches das Mixin ist. Ich werde dieses Formular in knapp unter den Kosten pro Nacht hinzufügen. Nach hier können wir einige bedingte Rendering hinzufügen , um nur diese auf den aktuellen Routen anzuzeigen, die mit einem Schrägstrich alle beginnt, und dann Schrägstrich. Wenn url.startswith, dann fügen Sie eine weitere Zeichenfolge hinzu, die Schrägstrich alle und dann Schrägstrich am Ende ist. Danach können wir dann in unser Suchformular von vorher einfügen. Wenn wir scrollen, stellen Sie sicher, dass dies alles korrekt eingerückt ist, andernfalls werden wir einige Probleme bekommen. Die Suche jetzt können wir den Abschnitt alle in einer Ebene einrücken. Scrollen Sie nach unten zur Schaltfläche, rücken Sie dies in ein. Auf einer Ebene innerhalb der Aussagen werde ich diesen Abschnitt auch mit einer horizontalen Linie mit den hr-Elementen trennen und dann auch einen h3 Titel der Suche für dieses Hotel hinzufügen. Gut. Wir wissen bereits, nach welchem Hotel wir suchen möchten. Wir können den Wert hinzufügen. Wenn wir runter zum Ziel gehen. Gerade hier, können wir entfernen erforderlich. Wir können den Wert so einstellen, dass es sich um die Informationen handelt, die an die Mixin, Hotel und dann Punkt Hotel Unterstrich Namen übergeben werden. Nun wird der Wert dieses Feldes jetzt mit dem Hotelnamen ausgefüllt. Daher muss der Benutzer keine bestimmte Suche nach diesem Hotel durchführen. Wir brauchen auch die Dauer, das Abreisedatum, die Anzahl der Gäste. Wir brauchen die Sternebewertung nicht, da wir das Hotel bereits haben. Wir können auch die Sortierreihenfolge entfernen und die Suche verlassen. Nun, wenn wir dies ein Speichern geben und dann zum Browser gehen, laden Sie diese Hoteldetailansicht neu, scrollen Sie nach unten, und jetzt haben wir unser Suchformular hier unten. Wir können sehen, dass wir bereits Hotel sieben bereits im Inneren haben, was wir vom Hinzufügen des Wertes als Attribut im Inneren hier bekommen haben. Dieses Hotel ist auch viel das aktuelle, auf dem wir sind. Gehen Sie einfach zurück zur Startseite und wählen Sie eine andere aus und überprüfen Sie, dass dies noch funktioniert. Scrollen Sie nach unten, und jetzt ist Hotel vier jetzt innerhalb unserer Eingaben. Jetzt haben wir das Hotel ausgewählt, das wir wollen. Lassen Sie uns versuchen, dies zu personalisieren, damit wir weitergehen und eine Bestellung aufgeben können. Fügen Sie eine Dauer, ein Abreisedatum, Anzahl der Gäste hinzu, klicken Sie auf Suche. Denken Sie daran, dass dieses Formular bereits so eingerichtet ist, dass es zu Schrägstrich Ergebnisse geht, die dieselbe Route wie das Formular innerhalb unserer Kopfzeile ist. Vieles davon sollte bereits behandelt werden folgt. Wir werden Schrägstriche Ergebnisse weiterleiten. Dann sehen wir unten einen Fehler, der besagt, dass die Reihenfolge aufsteigend oder absteigend sein muss. Der Grund, warum wir diesen Fehler erhalten, ist, dass, wenn wir ihn zurückverfolgen, wir derzeit Schrägstriche Ergebnisse vorleiten werden, also Schrägstrich Ergebnisse innerhalb unserer Layouts, innerhalb unserer Routen gehen Sie zum Indexpunkt JS Vorwärtsschrägstrich Ergebnisse geht an diesen Hotel-Controller der Suchergebnisse. Wenn wir dies zurückverfolgen, Hotel-Controller, und gehen Sie dann zu den Suchergebnissen. Wir versuchen immer noch, eine Abfrage an unsere Datenbank zu senden. Fügen Sie auch in eine Sternebewertung und sortieren Sie diese nach aufsteigender oder absteigender Reihenfolge. Wir müssen noch einige Informationen hinzufügen, um sicherzustellen, dass dies auf dieser Seite umgangen wird. Die Art und Weise, wie wir das tun können, ist hier ganz oben. Wir haben unsere zwei Konstanten, die in diesen Daten speichern. Ich werde den Operator verwenden, um einen Wert hinzuzufügen, wenn einer übermittelt wird. Die beiden Rohre für den gesamten Wert von eins, und dann die gleiche unten oder eins. Grundsätzlich, wenn wir in der Headerform oben verwenden, werden wir die Anzahl der Sterne und auch einen Wert für die Sortierreihenfolge erhalten. Wenn keiner von diesen empfangen wird, dann werden wir nur einen Wert von eins hinzufügen, zu jedem von ihnen. Daher sollte dies bei der Suche nach unserer Datenbank keine Probleme verursachen. Nun, wenn wir das speichern und dann neu laden, erhalten wir jetzt Forschungsergebnisse wie erwartet. Dieses Mal jedoch nur das aktuelle Hotel zurückgeben, das der Benutzer ausgewählt hat, sondern auch die Details auf der rechten Seite übergeben. Versuchen wir es noch mal. Wenn wir in alle Hotels gehen. Lassen Sie uns nach unten scrollen, wenn Sie zum Hotel zwei gehen, haben wir ein Formular am unteren Rand, mit einem Wert von Hotel zwei. Versuchen wir fünf, fügen Sie hier ein beliebiges Datum hinzu, zwei Gäste und scrollen Sie nach unten, und das funktioniert jetzt korrekt. Gehen wir nun zum nächsten Abschnitt über, in dem wir die Dinge ein wenig vorantreiben, und Sie werden alles über das Hinzufügen von Benutzerkonten und Authentifizierung erfahren. 47. So erstellst du das Benutzermodell: Willkommen zurück in dieser neuen Rubrik. Hier erfahren Sie alles über Benutzerkonten, Anmelden, Registrieren neuer Benutzer, Authentifizierung und vieles mehr. Um zu beginnen, genau wie bei der Erstellung von Hotels, müssen wir Mongoose verwenden, um ein Modell zu erstellen, aber dieses Mal für den Benutzer. Lassen Sie uns zu Visual Studio gehen, öffnen Sie die Seitenleiste, und dann innerhalb unseres Models-Ordners können wir voran gehen und eine neue Datei erstellen, diese heißt user.js, und schließen Sie diese dann. Wir müssen unser Modell so konstruieren, wie wir es mit dem Hotel getan haben. Zuerst müssen wir eine Konstante von Mungo hinzufügen und dann das Mungo Paket benötigen, am Ende ein Semikolon lassen. Wenn Sie sich aus dem Hotel erinnern, haben wir in der hotel.js unser Hotelschema erstellt, es auf ein neues Mungo Schema gesetzt und dann alle unsere Felder erstellt und dann die Datentypen und die verschiedene Dinge in jedem einzelnen. Wir werden das gleiche mit dieser user.js bekommen. Beginnen wir mit der Erstellung unserer Konstanten, diesmal wird diese UserSchema genannt. Dies ist wieder gleich einem neuen Mungo Punkt Schema, Kapital S. Innen hier werden wir in unserem Objekt übergeben. So wird unser Benutzer ziemlich unkompliziert sein. Es wird einen Vornamen, Nachnamen, eine E-Mail, ein Passwort haben , und dann ein zusätzliches Feld am Ende Col ist admin. Wird später aber dazu kommen, der erste ist für den Vornamen. Also zuerst Unterstrich Name, und dann richten Sie unsere Struktur innerhalb der geschweiften Klammern. Der Name wird der Typ der Zeichenfolge sein, die durch ein Komma getrennt ist. Wir müssen auch dieses Feld erforderlich machen, dann fehlt der Text in diesem Feld, das heißt, Vorname ist erforderlich, fügen Sie ein Komma hinzu. Wir können jedes Leerzeichen abschneiden, indem trimmen auf true gesetzt wird, und eine maximale Anzahl von Zeichen, die weiter durch ein Komma getrennt werden. Wir können das gleiche für den Nachnamen tun, also lassen Sie uns Nachnamen hinzufügen. Das ist unser zweites Feld. Öffne die geschweiften Klammern. Es wird immer noch so ziemlich das gleiche sein, also wird dies der Typ der Zeichenfolge sein. Die erforderlichen Felder. Es ist wie diese Zeit ist, Nachname ist erforderlich, trimmen Sie wieder gleich wahr zu sein, und auch eine maximale Anzahl von Zeichen 30 sein. Also gibt es unseren Vornamen, unseren Nachnamen, als nächstes, öffnen Sie ihn, um auch die E-Mail-Adresse zu erfassen. Die E-Mail-Adresse wird auch der Typ der Zeichenfolge sein. Dies wird auch mit dem Text der E-Mail-Adresse erforderlich ist , fügen Sie ein Komma hinzu. Wir können dies auch trimmen, also trimmen, um wahr zu sein. Wir können dieses Feld auch als eindeutig festlegen. Durch die Einstellung „unique“ auf „true“, wird sichergestellt, dass wir nur einmal in unserer Datenbank die gleiche E-Mail-Adresse gespeichert haben. Wir können auch sicherstellen, dass dies in Kleinbuchstaben gespeichert wird, indem Sie Kleinbuchstaben auf true setzen. Fügen Sie nach der E-Mail ein Komma hinzu, und dies ist das Passwort. Das Kennwort muss der Typ der Zeichenfolge zwei sein. Es ist auch erforderlich, daher ist ein Passwort erforderlich. Wir werden auch eine neue Option hinzufügen, um bald, wenn wir zurückkommen, um unsere Passwörter zu verschlüsseln, aber jetzt können wir einfach lassen diese Daten, wie sie sind, und dann gehen Sie auf die letzte, die admin ist. Öffne das auf. Also admin, dies wird ein boolesches Feld sein. Der Typ Boolean, und auch standardmäßig wollen wir dies auf false setzen. Dieses Feld wird verwendet, um einen Admin-Benutzer zu unserer Datenbank hinzuzufügen. Im Moment werden wir jeden neuen Benutzer so einrichten, dass er kein Admin ist. Daher müssen wir den Standardwert auf false setzen, und die einzige Möglichkeit, dies hinzuzufügen, besteht darin, innerhalb der Datenbank zu gehen und dies zu ändern, um wahr zu sein. Wir können dann unser Modell unten unten exportieren, fügen Sie ein Semikolon, und dann Modul Punkt exportiert gleich Mongoose Punkt Modell, den Namen des Benutzers, und dann in unserem UserSchema übergeben, die wir oben gerade hier deklariert. Wir fügen einfach mit einem Semikolon an den Enden hinzu. Geben Sie ihnen eine Rettung. Jetzt ist das unser Schema vorerst abgeschlossen. Wie wir bereits wissen, macht dieses Modell nichts von selbst, so im nächsten Video ist auf die Erstellung eines Anmeldeformulars, damit der Benutzer sich nicht registrieren kann. 48. Anmeldeformular: Jetzt haben wir unser Nutzungsmodell. Auf zum Erstellen eines Anmeldeformulars, um einen Benutzer zu registrieren. Früher im Projekt, wenn wir zum layout.pug gehen, bis oben im Header-Abschnitt, haben wir einen Anmeldelink hinzugefügt , der zu /sign-up verlinkt. Jetzt können wir diese Route in der Datei index.js behandeln. Gehen wir rüber zu hier. Route, index.js. Schließen Sie das hier. Wenn wir nach unten scrollen, also direkt über dem module.exports, können wir einen Kommentar von Benutzerrouten erstellen. Zuallererst können wir router.get hinzufügen, da dies eine get-Anfrage ist, können wir die Route von /sign-up hinzufügen. Dann werden wir in nur einem Moment einen UserController erstellen. Dann der Funktionsname von SignupGet, Semikolon am Ende. Wir verwenden diesen UserController diesmal anstelle des HotelControllers , den wir bisher in diesem Kurs verwendet haben. Dies liegt daran, dass ich einen UserController hinzufügen werde, um die Dinge organisiert und getrennt zu halten. Diese Datei index.js benötigt auch Zugriff auf den UserController. Daher können wir es oben unter unserem HotelController hinzufügen. Scrollen Sie rechts nach oben, hier benötigen wir die Controller und bisher haben wir nur den HotelController, so dass wir direkt unten eine Konstante von UserController hinzufügen können. Genau wie oben, können wir die erfordern hinzufügen, Pfad hinzufügen. Das wird sein.. /Controllers/UserController, und fügen Sie am Ende ein Semikolon hinzu. Jetzt müssen wir fortfahren und diese UserController-Datei innerhalb unseres Controller-Ordners erstellen . Öffnen Sie die Seitenleiste, klicken Sie auf „Controller“ und erstellen Sie eine neue Datei. UserController, Großbuchstabe C.js. Die erste Sache, die diese Datei benötigt, ist der Zugriff auf das Benutzermodell. Wir können dies an der Spitze innerhalb einer Konstante verlangen. Konstante Benutzer, Großbuchstabe U entspricht erfordern, dann fügen Sie den Dateipfad hinzu, der die Zeichenfolge ist../es ist im Models-Ordner /user. Darunter müssen wir das SignupGet erstellen, um die Anzeige des Anmeldeformulars zu behandeln. Also exportiert, dies ist so eingerichtet wie der HotelController, der Funktionsname von SignupGet, dies ist gleich unserer Funktion, die in der Anfrage, die Antwort unserer Funktion Bonnie nimmt . Alles, was wir tun müssen, ist ein res.render hinzufügen, um eine Seitenvorlage zu rendern, die wir sign_up aufrufen möchten, mögliche Optionen wären Titel der Benutzerregistrierung. Geben Sie dem ein Sparen. Bevor wir voran gehen und dieses Zeichen der Vorlage erstellen können , zuerst werde ich ein Mixin im Formular 2 erstellen. Öffnen Sie also die Seitenleiste, Ansichten und dann Mixins, erstellen Sie eine neue Datei _user_ form.pug. Jetzt können wir weitermachen und unser Formular erstellen. Beginnen wir, indem wir unseren Mixin-Namen UserForm erstellen und dann unser Formular wie gewohnt einrichten. Die Aktion wird gleich einer leeren Zeichenfolge sein, so dass es eine Post-Anfrage an die aktuellen Runden macht, so dass die Methode der Post, die Klasse, die wir jede Eingabe umgeben werden, form_input ist. Einzug in eine Ebene, die Beschriftung, also genau wie früher, als wir das Formular erstellt haben, um ein neues Hotel hinzuzufügen, muss jeder dieser Eingabetypen mit dem Namen übereinstimmen, den wir in unserem Schema verwendet haben, also wird das erste für den Vornamen sein, den Nachnamen, die E-Mail und so weiter. Dieses Label wird für den Vornamen sein, also Vorname, unter dem Text des Vornamens, um eine ausgezeichnete Form zu erscheinen. Die Eingabe, da es Text ist, können wir den Eingabetyp von Text hinzufügen, so Typ gleich Text. Der Name von first_name, die ID, die mit dem Label übereinstimmt. Auch hier ist es nur first_name und auch dieses Feld ist erforderlich. Wenn wir zurückgehen und diese auf der gleichen Ebene wie diese Formulareingabe einrücken, können wir eine mehr.form_input hinzufügen. Die Etiketten beginnen für den Nachnamen. Der Text des Nachnamens mit einem Doppelpunkt, so dass diese Eingabe ist auch die gleiche wie oben. Dies wird die Art des Textes, der Name des Nachnamens, die ID zu entsprechen, die auch Nachname ist, und auch dieses Feld als erforderlich markieren. Lassen Sie uns diese Eingabe von oben kopieren und wir können diese für die E-Mail wiederverwenden. Das Label für E-Mail, der Text der E-Mail, Eingabetyp der E-Mail zu, und dann ändern Sie einfach die Namen innerhalb von hier auch, die ID, und dieses Feld ist auch erforderlich. Lassen Sie uns diese drei Zeilen von oben als auch für die E-Mail kopieren und sie einfügen, weil wir eine ähnliche wiederverwenden werden, aber dieses Mal wird dies sein, um die E-Mail zu bestätigen. Der zweite wird confirm_email sein. Ich werde diesen Namen kopieren, also ist der Typ in Ordnung, füge dies im Namen hinzu, füge dies in die ID ein. Dieses Feld ist ebenfalls erforderlich und fügen Sie dann einfach den Text der Bestätigungs-E-Mail hinzu. Der nächste wird für das Passwort sein. Fügen wir die form_input, das Label, hinzu. Dies wird die Beschriftung für das Passwort-Feld, die Eingabe. Die Eingabe, können wir eine Art von Passwort hinzufügen und lassen Sie uns sicherstellen, dass das Passwort nicht sichtbar ist, wenn der Benutzer dies innerhalb des Browsers eingibt, so dass der Name des Passworts 2, die ID. Dieses Feld ist ebenfalls erforderlich. Das sieht aus wie alles, was wir für das Passwort brauchen. Jetzt lasst uns das kopieren. Eigentlich müssen wir den Text des Passworts hinzufügen und dann lassen Sie uns diese drei Codezeilen duplizieren, fügen Sie dies direkt unten hinzu, und dieses wird für das Bestätigen des fügen Sie dies direkt unten hinzu, Passworts sein. Fügen Sie einfach hinzu, um zu bestätigen und dann einen Unterstrich. Wir können das kopieren. Ändern Sie den Text hier, um das Passwort zu bestätigen. Der Eingabetyp ist auch Passwort, also füge ich dies als Name und auch die ID ein. Auch dieses Feld ist erforderlich. Das letzte, was wir jetzt für unser Formular brauchen, sind die Eingaben mit der Art der Übermittlung. Dies wird den gleichen form_input Wrapper haben, so dass die Schaltfläche, setzen Sie in Art von Submit, und auch eine Klasse von Schaltfläche klein. Schließlich können wir dies mit dem Text der Bestätigung abschließen. Geben Sie dem ein Sparen. Jetzt können wir mit all dem an Ort und Stelle die Anmeldevorlage hinzufügen, um dieses Mixin hinzuzufügen, also in die Sidebar. Nun, zu den Ansichten, können wir eine neue Datei erstellen, und dies wird sign_up.pug genannt werden. Diese Datei von sign_up ist diejenige, die innerhalb unseres UserControllers übereinstimmt. Dies ist eine, die wir gerade hier erstellt haben, also müssen wir jetzt unsere grundlegenden Informationen hier hinzufügen. Wir gehen, um sich anzumelden, dies erweitert unser Layout. Wir müssen auch das Mixin einbeziehen, das wir gerade erstellt haben. Mixins-Ordner /_user_ Form, der Blockinhalt. Jetzt auf unseren Inhalt, können wir eine Ebene 2 Überschrift hinzufügen, die ist der Titel, eine horizontale Linie unter dem Titel, und dann unten können wir unsere Mixin hinzufügen, die UserForm ist. Jetzt ist alles, was noch zu tun ist, dies im Browser auszuprobieren. Also gehen Sie zum Browser und lassen Sie uns zum Anmelde-Link in der Kopfzeile gehen, scrollen Sie nach unten und hier ist unser Anmeldeformular, das wir erstellt haben. Ich werde dies nur ändern, um ein großes U zu sein, so dass wir UserController. Ich ändere es im Inneren von hier, lade neu, und das sieht besser aus. Dies ist Schritt 1 jetzt abgeschlossen. Als Nächstes erstellen wir die Post-Anfrage, um die Anmeldung des Benutzers zu bearbeiten , sobald sie dieses Formular absenden. 49. Validierung von Benutzereingaben: Dieses Anmeldeformular, das Sie im letzten Video erstellt haben , ist nur Routen der Vorwärtsslash-Anmeldung, und auch die Benutzerformularmischung, die wir oben erstellt haben, wird auf die aktuelle URL geschrieben, da wir die Aktion als leere -Zeichenfolge. Dies wird auf den Anmelderouten posten. Daher können wir eine Post-Anfrage innerhalb der index.js erstellen, um diese Anfrage zu bearbeiten, also gehen Sie zu der index.js und dann zu unseren Benutzerrouten, also router.post. Dies wird auch zu den Anmelderouten gehen, so dass wir als Zeichenfolge Vorwärtsschrägstrich Anmeldung, verwenden wir wieder unseren Benutzercontroller, und dieses Mal werden wir den SignupPost erstellen, fügen am Ende ein Semikolon hinzu, über den Benutzer-Controller, bis ganz unten, dieses Mal ist es exports.Anmelden und dann Post. Dies wird gleich einem Array sein, so dass wir ein wenig anders erstellt haben als das, was wir normalerweise tun. Wir werden immer noch eine Funktion bald unten unten mit der Anfrage und Antwort erstellen , aber dieses Mal habe ich in einem Array hinzugefügt. Wir werden zuerst hier einige Formularvalidierungsfunktionen einschließen , um Eingabe des Benutzers auf bösartige Eingaben oder Fehler zu überprüfen, also lassen Sie uns einen Kommentar hinzufügen. Zunächst einmal werden wir die Daten des Benutzers validieren. Dies wird im Grunde die Benutzereingaben bereinigen und es dann sicher machen, an unseren Server weiterzugeben. Formulareingaben, sortieren gemeinsame Art und Weise für Hacker, Code einzugeben, da es eine direkte Kommunikation zwischen einem Hacker und auch dem Server ist. Daher müssen wir Validierung und Bereinigung verwenden , um die Eingabe zu bereinigen, bevor sie den Server erreicht. Um dies zu tun, werde ich ein Knotenpaket namens express validator aufnehmen, das wir als npm-Paket installieren. Unten zum Terminal, schließen Sie dies, also ist der Befehl npm space i, und das Paket ist express-validator, drücken Sie die Eingabetaste. Dieses Paket ermöglicht es uns, zwei wichtige Dinge zu tun, Validierung und auch Desinfektion. Validierung ist der Prozess, um sicherzustellen, dass der Benutzer Werte im richtigen Format eingegeben hat, ähnlich wie unsere Modelle, die wir für den Benutzer und das Hotel erstellt haben. Es kann sicherstellen, dass der Benutzername eine minimale Anzahl von Zeichen ist, wenn das Feld alphanumerische Daten enthält, wenn ein Kennwort übereinstimmt usw. Bereinigung ist ein Prozess, der entfernt, ersetzt Zeichen in die Eingabefelder eingegeben, die verwendet werden können, um bösartige Daten an den Server zu senden. Express-Validator kommt mit Modulen, die wir für beide dieser Aufgaben verwenden können. Wenn wir zur Sidebar gehen und auf Knotenmodule öffnen, scrollen Sie nach unten zum Express-Validator, den wir gerade installiert haben, also öffnen Sie das hier. In diesem Ordner werden wir sowohl die Prüf- und Filtermodule verwenden, einige über in der Datei userController.js, können wir diese am Anfang dieser Datei benötigen, so scrollen Sie nach oben, und dann können wir einen Kommentar von Express-Validator hinzufügen. Richten Sie eine Konstante ein, die geschweiften Klammern. Der erste wird check sein, was gleich ist, um den express-validator zu verlangen, der der Name des Pakets ist, Schrägstrich überprüfen, was der Name des Moduls ist, das wir einschließen müssen. Denken Sie daran, Dinge wie diese zu tun, wenn wir die geschweiften Klammern hinzufügen, wird dies verwendet, um ein einzelnes Mitglied unseres Moduls zu importieren und es dann innerhalb eines Variablennamens namens check zu speichern. Diese Prüfkonstante wird also verwendet, um die Daten zu validieren. Als nächstes aus dem gleichen Modul können wir auch die Validierungsergebnisse verwenden, also fügen Sie ein Komma hinzu, fügen Sie Validierungsergebnisse hinzu. Dies führt die Validierung aus und speichert alle Validierungsfehler in einem Ergebnisobjekt, aber mehr dazu bald. Als nächstes können wir auch das Filtermodul benötigen und es innerhalb einer Konstante namens desinfizieren speichern. Erstellen Sie in der nächsten Zeile eine Konstante mit dem Variablennamen dieses Mal der Bereinigung. Dies ist gleich erforderlich, übergeben Sie in unserem Express-Validator, der Modulname, der Vorwärtsslash-Filter ist. Dieses Modul dient, wie Sie vielleicht erraten haben, zur Bereinigung der Benutzerdaten. Beginnen wir mit der Validierung der Daten mit einer Prüfkonstante, die oben hier eingerichtet ist. Bis zu unserem Array, unter den validieren Datenkommentaren, können wir unseren Check verwenden, der die Konstante ist. Im Inneren können wir in unserem Feldnamen hinzufügen, der erste Unterstrich Name ist. Diese Feldnamen müssen mit den Namen übereinstimmen, die Sie innerhalb unseres Benutzerformulars haben, also nur hier, zurück zum Controller. Die erste Methode, die ich überprüfen werde, ist, ob die Länge ein bestimmter Wert ist. Wir tun dies, indem wir ein Optionsobjekt übergeben, wo wir überprüfen können, ob die Mindestlänge gleich ist, ich werde dies auf eins setzen. Also isLength ist eine Methode, die vom Express-Validator zur Verfügung gestellt wird, ebenso wie der Rest der, die wir jetzt hinzufügen werden. Wir können auch so viele von ihnen an das Ende ketten, wie wir wollen. Der nächste werde ich mit Nachricht hinzufügen. Im Inneren können wir eine Nachricht übergeben, wenn die Länge nicht den Mindestwert erreicht, den Sie übergeben. Dies wird eine Textzeichenfolge von 'Vorname muss angegeben werden' und dann in die nächste Zeile. Ich werde auch etwas anderes an das Ende binden. Wir könnten weiter über die gleiche Linie gehen, aber ich werde das in der nächsten Zeile hinzufügen, nur damit es klarer ist. Dieses Mal werden wir überprüfen, ob der Text alphanumerisch mit Punkt isAlphanumeric ist, die Klammern kurz danach, und dann können wir auch eine Nachricht verketten, genau wie wir es oben getan haben, also mit Nachricht. Übergeben Sie dann eine Zeichenfolge, die Sie dem Benutzer anzeigen möchten , wenn das Ergebnis nicht alphanumerisch ist. Fügen Sie eine Textzeichenfolge „Vorname muss alphanumerisch sein“ hinzu. Dies ist das Ende unserer ersten Überprüfung auf das Feld Vorname. Wir können ein Komma direkt danach hinzufügen. Aber auch so ziemlich gehen, um das gleiche für den Nachnamen zu tun. Lassen Sie uns diese beiden Zeilen kopieren, fügen Sie diese unten hinzu. Der einzige Unterschied ist der Feldname. Überprüfen Sie dieses Mal den Nachnamen und dann können wir auch den Text ändern. Der Nachname muss angegeben werden und auch der Nachname muss alphanumerisch sein. Sie erneut sicher, dass das Komma am Ende ist, so dass Sie überprüfen sehen. Dieses Mal werden wir das E-Mail-Feld aus unserem Formular auswählen. Wir können an das Ende dieses Punktes Kette ist E-Mail. Dies ist eine Methode, die wir zur Verfügung gestellt schreiben mit ausdrücklichen gültigen Daten, die überprüfen, ob dieses Feld einem E-Mail-Format entspricht. Wenn dies nicht der Fall ist, werden wir auch die Nachricht hinzufügen. Mit Nachricht, und dies wird eine Textzeichenfolge mit ungültiger E-Mail-Adresse sein. Genau wie die oben genannten müssen wir kurz danach ein Komma hinzufügen. Wir können auch das nächste Feld überprüfen, das ist die Bestätigungs-E-Mail. Dies muss auch eine Zeichenfolge sein. Bestätigen Sie die E-Mail mit Unterstrich. Das wird ein bisschen komplexer. Wir müssen jetzt überprüfen, ob die E-Mails übereinstimmen und auch die Passwörter übereinstimmen. Studenten, wir können einen benutzerdefinierten Validator verwenden. Lassen Sie uns zuerst die Überprüfung einrichten und unsere leere benutzerdefinierte Validator-Funktion nur für den Moment hinzufügen. Wir haben unseren Feldnamen ausgewählt. Lasst uns am Ende den benutzerdefinierten Validator, mit Punkt Custom und dann können wir auch auf Punkt mit Nachricht Kette und wir werden in nur einem Moment zu diesem zurückkommen. Innerhalb eines benutzerdefinierten und wir können in einer Funktion übergeben. Der erste Parameter ist der Wert, den er vom Feld erhält. Fügen Sie hier die Klammern hinzu, den ersten Wert, der aus unserem Formular kommt. Dies wird aus unserem Bestätigungs-E-Mail-Feld kommen. Der zweite Wert wird innerhalb eines Objekts sein. Fügen Sie ein Optionsobjekt hinzu, in dem wir mehrere Werte in hier übergeben können. Aber wir müssen nur auf das Anforderungsobjekt zugreifen, das wir auch übergeben können. Das gibt uns alle Informationen, die wir brauchen. Wir haben den Wert von Bestätigungs-E-Mail, und wir haben auch das Anforderungsobjekt, das in allen anderen Feldern gespeichert hat. Wir können nun unsere Funktion beenden, indem wir die beiden Felder vergleichen. Kurz nach den Klammern, können wir ES6 Pfeilfunktion zu gehorchen, um zu überprüfen, ob der Wert, das ist unser erstes Feld. Dies sind die Daten, die von Bestätigungs-E-Mail kommen. Überprüfen Sie, ob dies der Anforderung entspricht, bei der es sich um das Anforderungsobjekt handelt, das in der Punktkörper-Punkt-E-Mail Hier greifen wir das ursprüngliche E-Mail-Feld, das hier ist. Dann überprüfen wir, dass es der gleiche Wert ist, der im Wert wie dieses Feld nur hier gespeichert ist. Alles, was jetzt noch zu tun ist, ist eine Nachricht zu übergeben, die eine Zeichenfolge von E-Mail-Adressen ist , die nicht übereinstimmen, mit einem Komma am Ende. Die letzten beiden Felder habe ich für das Passwort und auch für das Passwort bestätigen. Wir können so ziemlich wie diese E-Mail tun. Zunächst werden wir unsere erste Überprüfung für die ursprünglichen Passwortfelder durchführen , überprüfen Sie das Passwort. Wir werden überprüfen, ob es sich um eine Mindestlänge handelt. Lass uns für sechs Charaktere gehen. Vorbeigehen an unseren Objekten, mindestens sechs. In der nächsten Zeile können wir Punkt mit Nachricht verwenden. Ungültiges Kennwort. Kennwörter müssen mindestens sechs Zeichen lang sein. Stellen Sie sicher, dass sich das Komma am Ende dieser Zeile befindet. So können wir jetzt auch das Passwort mit dem benutzerdefinierten Validator bestätigen. Genau wie die E-Mail oben, Lassen Sie uns die benutzerdefinierte Validator kopieren und fügen Sie diese direkt unter dem Passwort. Hier drinnen müssen wir nur ein paar Felder ändern. Der erste ist das Passwort bestätigen, um dieses Feld zu greifen. Dies wird auch innerhalb dieses Wertes als erstes Argument gespeichert werden. Wir müssen auch die Anfrage wie zuvor übergeben. Lassen Sie uns alle Informationen aus allen anderen Feldern erhalten. Wir prüfen dann, ob der Wert , der dieses Feld nur hier von bestätigen ist, ein Gleichwertiges Anforderungs- oder Körperpunktpasswort ist, was dieses Feld knapp darüber ist. Dann können wir den Text ändern. Alle Kennwörter stimmen nicht überein. Stellen Sie sicher, dass das Komma wieder am Ende steht. Nach unserer Validierung können wir wieder unsere Funktion einstellen, wie üblich, indem wir das Anfrage- und Antwortobjekt zusammen mit dem nächsten übergeben. Lassen Sie uns dies als ES6-Pfeilfunktion einrichten, die Anfrage, die Antwort und auch als nächstes übergeben . Oben oben in dieser Datei haben wir eine Konstante namens Validierungsergebnisse direkt innerhalb von hier erstellt, die wir jetzt innerhalb unserer Funktion hinzufügen können, die das Anforderungsobjekt enthält. Scrollen Sie zu unserer Funktion, fügen Sie die Validierungsergebnisse hinzu. Übergeben Sie das Anforderungsobjekt Dadurch werden alle Validierungsfehler aus den Anforderungsobjekten extra Wir können sie dann in einer Konstante speichern, um Gebrauch zu machen. Zu Beginn können wir eine Konstante mit einem Namen von Fehlern speichern und diese auf unsere Validierungsergebnisse setzen. Mach das einfach nur hier zu einem Komma. Jetzt möchte ich eine if-Anweisung einrichten, um zu überprüfen, ob wir Fehler haben. Übergeben dieser Fehler Konstanten und dann nach, dass wir hinzufügen Punkt ist leer. Dann die Klammern kurz danach und stellen Sie sicher, dass dies richtig geschrieben ist. Dot ist leer ist eine Validierungsergebnismethode, die wir verwenden können, um zu überprüfen, ob es irgendwelche Fehler gab. Derzeit überprüfen wir, ob das Fehlerarray leer ist, aber wir wollen das Gegenteil tun und überprüfen, ob es irgendwelche Fehler gibt. Wir können das Gegenteil tun, indem wir ein Ausrufezeichen direkt vor. In diesem Abschnitt werden alle Fehler behandelt. Es gibt Fehler. Danach können wir einen anderen Abschnitt hinzufügen. Dieser Abschnitt wird vier keine Fehler sein. Innerhalb des if-Abschnitts, wenn es irgendwelche Fehler gibt, können wir einen res dot rendern hinzufügen, um wieder das Zeichen des Formulars und auch einen neuen Titel von bitte beheben Sie die folgenden Fehler. Res dot rendern, können wir das gleiche Anmeldeformular erneut anzeigen. Unterstreichen Sie unterstreichen. Dann fügen Sie ein Komma hinzu, übergeben Sie unseren Titel innerhalb des Objekts. Der Titel von Bitte beheben Sie die folgenden Fehler, dann ein Semikolon am Ende. Gehen wir zum Browser und testen Sie das aus. Wenn wir diese Datei speichern, laden Sie unsere Anmelderoute neu. Scheint einen Fehler zu haben. Oh, wir müssen den Server neu starten. [ unhörbar] starten, laden Sie unsere Anmelderoute neu. Lassen Sie uns dies zunächst mit einigen gültigen Daten testen. Lassen Sie uns alles hinzufügen, was die minimale Anzahl von Zeichen und auch das Datumsformat bedeutet . Wir können hier alles hinzufügen. Klicken Sie auf Bestätigen. Wir sehen derzeit nichts passiert, weil all diese Daten gültig sind. Wir haben nichts anderes innerhalb dieses anderen Blocks eingerichtet, um zu behandeln, was als nächstes zu tun ist. Wir sehen auch den gleichen Titel der Benutzeranmeldung, was bedeutet, dass wir nicht mit dem anderen Titel zu dieser Anmeldung weitergeleitet wurden. Nun lassen Sie uns dies stoppen und wir können einige ungültige Daten hinzufügen. Lassen Sie uns das Passwort auf unter sechs Zeichen reduzieren. Wir können es ändern, dass es nicht wie eine E-Mail aussieht, klicken Sie auf Bestätigen. Der Webbrowser hindert uns daran, dies zu tun, da dies auf ein E-Mail-Feld gesetzt ist. Bleiben wir vorerst bei dem Passwort. Klicken Sie auf Bestätigen. Jetzt werden wir auf die gleiche Pole Schrägstrich Anmelde-Route umgeleitet, aber dieses Mal verwenden wir den Seitentitel oder beheben Sie bitte die folgenden Fehler. Wir haben die Fehler noch nicht an diese Vorlage weitergegeben. Aber das ist ein gutes Zeichen, was bedeutet, dass wir jetzt feststellen, ob es irgendwelche Fehler gibt und dann unsere Anmeldevorlage mit einem anderen Seitentitel rendern. 50. Übergabe von Fehlern an die Vorlage und Bereinigung: Jetzt, wenn die Fehler erkannt werden, möchten wir sie auf dem Bildschirm anzeigen. Um dies zu tun, können wir die Fehler, die Sie in dieser lokalen Variablen gespeichert haben, an unsere Vorlage übergeben . Wir können das gleich nach unserem Titel tun. Fügen Sie ein Komma hinzu, wir können den Namen der Fehler übergeben. Dieser Name der Fehler wird in den Vorlagen verfügbar sein und dies wird gleich Fehler Punkt-Array sein, dies ist Array-Methode. Wir werden den vollständigen Satz von Fehlern als Array erhalten, dann haben Zugriff auf all diese Fehler in unserer Vorlage, mit dem Fehlernamen, den wir gerade hier angegeben haben. Jetzt können wir diese Fehler als ungeordnete Liste innerhalb der Vorlagen anzeigen. Zurück zu unserer Anmeldung Dot Prog Datei. Unter der horizontalen Linie können wir sagen, wenn Fehler, dieser Code wird nur ausgeführt, wenn Fehler an die Vorlagen übergeben werden. Lassen Sie uns eine ungeordnete Liste erstellen. Dann können wir durch jeden der Fehler des Arrays schleifen. Für Fehler, in Fehlern, wir eine neue Liste von Elementen erstellen, die gleich dem Fehler sein wird und wir können die Fehlermeldung mit Punkt MSG greifen. Jetzt können wir dies speichern und dann testen, ob alles funktioniert. Speichern Sie diese und laden Sie sie dann neu. Ich habe falsch geschrieben [unhörbar], Fehler in Fehlern. Rüber zum Controller. Nur da, gib uns wieder eine Nachladung. Dies sind unsere Fehlermeldungen von vorher, wenn wir die Passwörter auf weniger als sechs Zeichen setzen. Wir erhalten nun eine Nachricht von ungültigen Passwörtern. Kennwörter müssen mindestens sechs Zeichen lang sein. Gehen wir zurück. Fügen wir kleine Fehler hinzu, damit wir sicherstellen können, dass die E-Mail-Adressen nicht übereinstimmen. Lassen Sie uns auch unsere Passwörter hinzufügen, die nicht viel zu und auch unter sechs Zeichen lang und bestätigen. Gut, unsere E-Mail-Adressen stimmen nicht überein. Wir haben ein ungültiges Passwort und auch unsere Passwörter sind nicht viel. Dies sind die Fehlermeldungen, die wir innerhalb unserer Validierung im Benutzercontroller gesetzt haben. Das sind alles Warnungen, die nur hier sind. Viele dieser Nachrichten können nie einmal angezeigt werden, wenn wir das erforderliche Feld auf dem alten Formular gesetzt haben. Wenn Sie nur innovative nützliche Ebene der Validierung, über im Browser, sobald Sie eine Fehlermeldung erhalten, alle diese Felder, die wir eingegeben und jetzt leer. Im Idealfall möchten wir die Details behalten, die der Benutzer eingegeben hat, aber wir werden davon ausgehen, beheben. Als Nächstes gehen wir zur Desinfektion. Dies wird ein wenig einfacher als die Validierung sein. Gehen wir zu unserem Kontrolleur. Zurück zum Anmeldebeitrag. Lass uns runtergehen. Lassen Sie uns zunächst den Rest auskommentieren oder rendern. Dann können wir dies durch einen roten Punkt JSON ersetzen, der die Anfrage, den Körper, der die Details aus dem Formular ist. Wenn wir dies speichern und dann das Formular ausfüllen, gehen Sie zurück und senden Sie dann das Formular erneut. Dann geben wir ein Passwort ein, lassen Sie uns zum Testen gehen. Bestätigen. Wir sehen nun die JSON-Daten, die aus dem Formular eingereicht wurden. Wenn wir auf den Zurück-Button klicken und dann etwas HTML in einem dieser Felder hinzufügen. Öffnen Sie die Winkel Klammern alle diese in, Klicken Sie auf Daumen. Passwort erneut. Bestätigen. Dieser HTML-Code wird auch mit dem JSON gesendet , den Sie innerhalb des Vornamens sehen können, was bedeutet, dass dieser auch an einen Webserver gesendet wird. Fügen Sie Code innerhalb einer Formulareingabe wie dieser hinzu, könnte böswillig von Hackern verwendet werden, um potenziell gefährliche Eingaben an den Server zu senden. In der Regel sollten wir jedes Mal, wenn wir Eingaben vom Benutzer erhalten, immer validieren und desinfizieren. Wir haben uns um die Validierung gekümmert. Nun, zur Desinfektion. Zunächst können wir die bereinigte Variable verwenden, die wir früher erstellt haben, wenn wichtig, das Filtermodul. gerade hier installieren wir dies innerhalb der Sanitize-Variable. Lass uns kurz vor der ganzen Funktion runtergehen. Wir können darauf zugreifen, dass wir sanitize hatten. Wir können wieder jedes einzelne Feld wie zuvor mit der Validierung anvisieren , oder wir können in einem Stil übergeben, der alle Felder abzielt. Ketten Sie dann am Ende die Trimmmethode, Punkttrimmen. Dadurch werden alle Leerzeichen vor und nach den Textfeldern entfernt. Schließlich können wir auch an den Enden, Punkt Escape und ein Komma Kette . Dadurch werden alle HTML-Zeichen entfernt, die möglicherweise von Hackern verwendet werden könnten , um einen Cross-Site-Scripting-Angriff zu erstellen. Wenn wir dies speichern und dann zurück zum Browser gehen und neu laden. Wir sehen, wir haben jetzt unsere HTML-Tags entfernt und durch die entsprechenden HTML-Entitätscodes ersetzt. Wir haben uns jetzt darum gekümmert, die Eingaben des Benutzers zu validieren und zu bereinigen. Wir können nun mit dem nächsten Video fortfahren, dem diese Informationen in unserer Datenbank gespeichert werden. 51. Registrierung von neuen Benutzern: Wir haben nun die Benutzereingaben validiert und bereinigt. Nun ist die nächste Stufe, diese Daten tatsächlich in der Datenbank zu speichern. Um dabei zu helfen, verwende ich ein Stück Authentifizierungs-Middle-Ware namens Pässe. Passport ist bei Passport js.org verfügbar. Wenn wir hier rüber gehen und dann auf die Dokumentation klicken. Auf der linken Seite sehen wir hier viele verschiedene Möglichkeiten, wie wir Passport verwenden können , um unsere Nutzer auf unterschiedliche Weise zu authentifizieren, wie zum Beispiel Facebook, Twitter und viele mehr. All diese Methoden werden Strategien genannt, im Rahmen dieses Projekts und was wir eine E-Mail- und Passwort-Kombination verwenden, um sich anzumelden. Wenn wir hier auf Benutzername & Passwort klicken. Wann immer es zu diesem Benutzernamen und Passwort Abschnitt genommen wird und wir durch diese Funktionalität sehen können, wird dies innerhalb eines Moduls namens Passport hyperlocal gespeichert. Wir gehen voran und installieren annehmen. Darüber hinaus gibt es auch ein praktisches Paket, das wir verwenden werden, genannt Passport-Local Mongoose. Dies ist ein Plugin oder Erweiterung zu Mongoose, was es wirklich einfach macht, Pässe, Benutzername und Passwort Kombination zu verwenden, um sich anzumelden. Es gibt uns eine einfache Registermethode, die jeden Benutzer und Passwort nehmen und dann diesen Benutzer bei Mongoose registrieren wird. Zuerst müssen wir alle diese Pakete in Visual Studio installieren, also schließen Sie den Server, führen Sie NPMI aus. Dann möchte ich drei verschiedene Pakete einschließen. Der erste ist Pässe, und Sie können mehrere Pakete in der gleichen Installation einfügen. Getrennt nach Raum, können wir auch Passports-Local hinzufügen, was die Strategie war, die Sie zuvor in der Passdokumentation gesehen haben. Dann wird das dritte und letzte von dem, was wir brauchen, Pässe-Lokal-Mungo sein. Drücken Sie „Enter“. Lassen Sie diese alle Pull-in von MPM gehen, gehen Sie zu Nummer drei, starten Sie den Server mit MPM starten Sie DEF starten. In der user.js, die sich innerhalb unserer Modelle befindet. Lasst uns das aufmachen. Dies wird Schema sehen, das wir für den Benutzer einrichten. Wir können das Passports-Local-Mungo Paket benötigen. Legen Sie oben auf diese Datei. Lassen Sie uns unsere Konstante namens Pässe-Lokal-Mungo einrichten. Dies ist gleich erforderlich. Dies wird unser Knotenmodul erfordern, das Passport-Local-Mongoose ist, da dies ein Mongoose-Plug-in ist, müssen wir dieses Plugin zu unserem Schema hinzufügen, bevor wir es verwenden können. Unten ganz unten auf dem Schema unserer Benutzer. Mit all dem Modul, das wir exportiert haben, können wir unser User schema.plug-in anvisieren und das Plugin, das Sie hinzufügen möchten, ist Passports-Local-Mongoose. Dies ist der konstante Name, der hier oben eingerichtet wurde. Als nächstes werde ich in einem Optionsobjekt übergeben. Getrennt durch Komma, öffnen Sie die geschweiften Klammern, und dann können wir in das Feld Benutzername hinzufügen und diese gleich oder E-Mail setzen. Dieses Objekt kann mehrere Optionen annehmen. Sie können diese in der Dokumentation überprüfen, wenn Sie mehr wissen möchten. Was genau ist dieses Benutzernamenfeld? Wie wir wissen, wenn es übergeben wird, zwei Dinge, um sich anzumelden. Wir benötigen eine E-Mail-Adresse und ein Passwort. Das Signieren dieses Benutzernamens Feld zu E-Mail bedeutet, dass wir dieses E-Mail-Feld aus dem Schema oben als unseren Benutzernamen verwenden möchten , um sich anzumelden. Standardmäßig, wenn wir dieses Benutzernamenfeld auslassen, wird es weitergehen und in unserem Schema nach einem Feld namens username suchen, das wir nicht haben. Als nächstes müssen wir Passport über in der app.js Datei/ Kopf über app.js zu begleichen. Doppelklicken Sie darauf und lassen Sie uns etwas mehr Platz machen. Oben ganz oben in dieser Datei, lassen Sie uns unter den Router gehen, wird einen Kommentar einrichten. Dies ist für passports.js. Wir müssen passport.js innerhalb dieser Datei einrichten, indem das Benutzerschema und auch das Passport-Modul benötigen. So Const-User. Dies wird erfordern, dass wir ein Modell verwenden. Dies ist./ der Ordner des Modells. Dann weiter/den Benutzer. Als nächstes können wir auch unser Passport-Modul importieren und es in einer Konstante namens Passport speichern. Benötigen Sie ein Knotenmodul namens Passport. In unserem Express-up müssen wir zuerst Passport initialisieren, indem wir die passport.initialize Middle-ware verwenden. Blasen Sie das, wir können nach unten scrollen und Sie können das so ziemlich überall hinzufügen. Einmal auf diese kurz nach der Ansicht Engine Setup, lassen Sie uns einen Kommentar hinzufügen. Konfigurieren Sie also Passport Middle-ware. Auch hier werden wir app.use nutzen, die wir in der Vergangenheit verwendet haben. Gehen Sie zu, übergeben Sie die mögliche Variable.initialize; dann eine zweite, app.use. Dieser ist passport.session; Diese erste Zeile wird den Pass initialisieren, um innerhalb unserer Anwendung zu verwenden. Dann wird die zweite, durch Hinzufügen von passport.session, ermöglicht es uns, Sitzungen später zu verwenden, überspringen Sie den aktuellen Benutzer angemeldet. Aber wir werden später darauf zurückkommen. Wir haben früher gesagt, dass die Verwendung eines Benutzernamens und Passwort-Kombination eine Reisepass-lokale Strategie genannt wird. Dies kann nun mit passport.use eingerichtet werden. darunter können wir sagen, dass passports.use, unser Benutzermodell u.CreateStrategy. Diese Create-Strategie ist eine Hilfsmethode, die durch das Passports-Local-Mongoose-Modul bereitgestellt wird, das wir installiert haben, die dann zu unserem Benutzerschema hinzufügt. Dies ist verantwortlich für die Erstellung der Passport-Local Strategie Follower, bekannt zu geben, nutzen Sie den Benutzernamen und Passwort Login, die Sie aus Pässen verwenden möchten. Wir müssen dann den Benutzer serialisieren und deserialisieren. erste Form besteht darin, dies auszutippen, und dann könnten wir ein wenig darüber reden, was das tut. Zunächst einmal passport.serializeUser. Drinnen geben wir in unseren Benutzerobjekten, Gummi-Benutzermodell. dann die serialize-Benutzermethode. Dann machen wir so ziemlich das Gegenteil, das Passport.DeserializeUser ist. Genau wie ein Aufzählungszeichen, fügen wir zerstören user model.deserializeUser. Dies kann ein wenig kompliziert sein, um den Kopf herum zu bekommen , aber das Hauptkonzept bezieht sich auf Sitzungen. Eine Sitzung, die wir uns bald genauer ansehen werden, ermöglicht es uns im Grunde, die Benutzerdaten zu speichern, so dass sie eingeloggt bleiben, wenn Sie von einer Seite zur nächsten klicken. Diese Funktionen informieren Passport, wie die Informationen von diesen Benutzerobjekten abgerufen werden und welche Informationen in unserer Sitzung gespeichert werden sollen. Dies ist der serialisierte Pfad. Der deserialisierte Pfad ist die Funktion, die dafür verantwortlich ist, dass sie die aktuellen Benutzerinformationen aus unserer Sitzung und dann zurück in die Benutzerobjekte erhalten. Daher bleiben und eingeloggt zwischen den Seiten. Aber wieder kommen wir zu den Sitzungen in einem späteren Video zurück. Dies sollte jetzt für die Konfiguration sein. Zurück zum Benutzercontroller. Speichern Sie die Benutzerdatei oder verwenden Sie einen Controller. Um die Dinge in der Anmeldepost zu starten, das ist dieses Array, das wir hier erstellt haben. Stellen Sie sicher, dass wir die res.jayson entfernt haben. Entfernen Sie diese Zeile und setzen Sie dann unser res.render wieder ein. Kurz nach diesem res.render werde ich das Rückgabe-Schlüsselwort hinzufügen. Dieses Rückgabe-Schlüsselwort wird aus den Anweisungen ausbrechen , wenn es irgendwelche Fehler auf dieser Stufe gibt. Dies, wenn Abschnitt oben gejagt wird, wenn es irgendwelche Fehler, aber wenn sie nicht sind, können wir fortfahren und speichern Sie die Benutzerinformationen innerhalb dieses L-Abschnitts. Im Inneren hier können wir eine Konstante namens neuer Benutzer einrichten. Dies entspricht einem neuen Benutzer Objekte, wo wir in der Anfrage des Körpers übergeben werden, die die Informationen aus dem Formular ist. Dann verwenden wir eine andere Methode von Passports-Local-Mongoose zur Verfügung gestellt, die dann unseren neuen Benutzer registrieren wird. Schnappen Ich werde ein Modell verwenden U.Register. Diese Registermethode nimmt drei Argumente. Zuerst ist der Benutzer, den wir registrieren wollen , den wir in dieser Konstante nur hier gespeichert haben. Wieder neuer Benutzer. Das zweite ist ein Passwort, das in request.body.password gespeichert ist. Dies wird nur ein Testbenutzer für den Moment sein. Das Speichern dieses Klartextes ist kein Problem, aber bald werden wir uns ansehen, wie wir sein Passwort vor dem Speichern verschlüsseln können, was wir immer tun sollten. Drittens ist eine Callback-Funktion. Dies ist eine Funktion, die ausgeführt wird, wenn die Register-Methode abgeschlossen ist. Fügen Sie ein Koma hinzu, fügen Sie eine Funktion hinzu, die unseren Fehler annimmt, lassen Sie uns es ein wenig kleiner machen. Erstellen Sie dann den Funktionskörper. Innerhalb dieses Rückrufs. Das erste, was zu tun ist, alle Fehler zu behandeln und sie dann entlang unserer Middle-ware zu übergeben. Wir werden sagen, wenn ein Fehler vorhanden ist, der sich in einem Konsolenprotokoll befindet, mit der Fehlermeldung des Fehlers während der Registrierung. Dann können wir ein Komma hinzufügen und dann die Fehlermeldung übergeben, die in dieser Variablen von err gespeichert ist. Danach können wir das entlang unserer Middle-Ware-Kette passieren. Wir können eine Betonung zurück auf die nächste, die auch in den Fehler nimmt. Lass uns den Browser machen. Wir können einen Testbenutzer erstellen und überprüfen, dass dies funktioniert. Wenn wir zurück gehen und es geht zu unseren Anmelderouten. Lässt einen Testbenutzer hinzufügen. Testen Sie also unseren Test. Bestätigen. Das Passwort ist in Ordnung. Klicken Sie auf „Bestätigen“. Wenn wir auf „Senden“ klicken, dreht sich das Browser-Symbol oben weiter. Dies liegt daran, dass wir ihm noch nicht gesagt haben, was als nächstes zu tun ist. Aber wenn wir rüber zu mLab gehen und dann neu laden und ich scrollen nach unten, wir sehen jetzt, dass wir unsere Hotelsammlung mit unseren originalen erzählten Dokumenten haben. Daneben haben wir jetzt unsere Benutzersammlung, die mehr Dokumente enthält. Lassen Sie uns darauf klicken. Macht mehr Platz. Es gibt unseren Testbenutzer, den wir gerade mit dem Passwort hinzugefügt haben, um mehr zu testen. Wie bereits erwähnt, sollte das Passwort nicht als Klartext gespeichert werden. Dies ist eine Lösung, die im nächsten Video behoben wird, wo wir uns die Passwortverschlüsselung ansehen werden. 52. Passwortverschlüsselung: Wir haben jetzt unsere Benutzer in der Datenbank gespeichert, aber es ist etwas, das wir noch beheben müssen. Wir haben einen Testbenutzer in der Datenbank gespeichert, aber das Passwort wird als Nur-Text gespeichert. Das ist etwas, was wir niemals tun sollten. In der Tat sollte kein Unternehmen jemals Ihr Passwort in der Datenbank so speichern. Wenn die Datenbank jemals gehackt wurde, hätte der Hacker Zugriff auf alle Benutzernamen und Kennwörter. Es besteht auch eine gute Chance, dass ein Benutzer dasselbe Passwort auch auf anderen Websites verwenden wird. Das ist ein großes Sicherheitsrisiko. Es gibt oft ein Missverständnis, dass ein großes Unternehmen, nehmen wir Facebook zum Beispiel. Könnten Sie einfach in ihre eigene Datenbank gehen und jedermanns Passwort sehen, wenn es registriert wurde. Das ist und sollte auch nicht für jedes Unternehmen der Fall sein. Stattdessen werden die Kennwörter zuerst verschlüsselt, und die verschlüsselte Version wird in der Datenbank gespeichert. Um ein wenig mehr darüber zu verstehen, müssen wir uns von Hashin und Salzen bewusst sein. Hashin ist im Grunde eine Möglichkeit, unser Passwort zu verschlüsseln. Wenn wir uns als Benutzer registrieren, wird die Scrumble-Version dann innerhalb der Datenbank gespeichert. Jedes Mal, wenn wir dann versucht, sich anzumelden, wird unser Passwort eingeben wird auch wieder mit dem exakt gleichen Algorithmus wie bei uns registriert und diese zerbröckelte Version wird gegen die gleiche verschlüsselte Version innerhalb der Datenbank überprüft . Dieses Hashin sollte ein unidirektionaler Prozess sein und es sollte keine Möglichkeit geben, es zurück in das ursprüngliche Passwort zu konvertieren. Hacker können einen sogenannten Brute-Force-Angriff verwenden. Dies ist jedoch, wenn sie einen Computer verwenden, um Tausende von Hashes aus Passwörtern zu generieren , bis einer von ihnen übereinstimmt. Um zu versuchen, die Dinge noch sicherer zu machen, können wir auch das Passwort lösen. Salting ist, wenn wir einige Daten hinzufügen, oft zufällig für jedes Passwort generiert werden. Das Salz wird dem Kennwort des Benutzers hinzugefügt und dann gehasht, um es sicherer zu machen. Dieses Salz wird oft auch in der Datenbank zusammen mit dem Hash-Wert gespeichert. Wir werden ein Paket namens bcrypts verwenden, das sich um dieses Hashin kümmert und Salzen folgt. Dies ist die Paketseite, die jetzt ausgeführt wird. Wenn wir auch zu Mungo bcrypts gehen, was auch ein npm-Paket ist. Um die Dinge noch einfacher zu machen, werden wir auch dieses mongoose bcrp-Paket zusammen mit dem bcrypt-Modul verwenden. Dies ist ein Mungo Plugin. Genau wie Mungo Plugin haben wir für Pässe verwendet , um die Integration mit Mongoose wirklich einfach zu machen. Lassen Sie uns zuerst zu Visual Studio Code gehen und die Pakete installiert, die wir brauchen. Runter zum Terminal, npm i und dann Mungo bcrypts. Lassen Sie uns für einen Moment installieren. Bestimmte Seife ist ziemlich unkompliziert. Wir fügen diese im user.jsmodel hinzu. Wir müssen das ganz oben verlangen. Gehen Sie in die user.js und dann, nachdem unsere beiden Anforderungen an der Spitze, lassen Sie uns eine neue Konstante namens Mungo bcrypts einrichten. Wir setzen dies als camelcase und so ist dies gleich erforderlich. Wir werden den Modulnamen benötigen, der Mongoose-bcrypts ist. Dann fügen wir dies als Mungo Plugin hinzu, genau wie das Passport-lokale Mungo Modul, das früher hinzugefügt wurde. Scrollen Sie nach unten, wo wir unsere Plugins über unserem Login von vorher hinzufügen, können wir auch auf das Benutzerschema zugreifen. Lässt Plug-In. Das Plugin, das wir dieses Mal hinzufügen möchten, ist Mungo bcrypts, was unser Variablenname ist. Sobald wir dieses Plug-in eingerichtet haben, können wir nun die Option bcrypt zu unserem Schemakennwortfeld hinzufügen. Wir tun dies, indem wir die Option bcrypt auf true setzen. So bis zu unserem Passwort. Fügen Sie nach Bedarf ein Komma hinzu, wir können die Option bcrypt hinzufügen und dies auf true setzen. Gibt uns ein Speichern und dann können wir auf den Anmelde-Link in der Navigationsleiste gehen, und wir können einen neuen Testbenutzer des Browsers erstellen. In der Tat müssen wir npm devstart ausführen. Es ist der Browser und ich werde zu mLab gehen und unseren Testbenutzer löscht und dann gehen, um sich in der oberen Navigationsleiste anzumelden, dann lassen Sie uns einen Testbenutzer einmal klein hinzufügen. Sie können hier alles hinzufügen. Klicken Sie auf „Bestätigen“. Dann rüber zum mLab, klicke auf „Reload“. Mal sehen, ob unser Testbenutzer jetzt drin ist, was ist. Denken Sie daran, wenn wir bestätigen, wenn wir auf den Anmelde-Button hier unten geklickt haben, haben wir noch nicht festgelegt, wohin wir gehen sollen. Der Browser bleibt auf dieser Seite. Zurück zum MLab. Nun, wenn Sie unsere Ansicht erweitern, testen Benutzer können wir jetzt unter den Passwort-Feldern sehen wir diese verschlüsselte Version jetzt in unserer Datenbank gespeichert , anstatt den Klartext von vorher. Jetzt haben wir das funktioniert. Lassen Sie uns alle unsere Benutzer aus mLab löschen. Löschen Sie diesen und alle Benutzer, die Sie haben. Wir werden so klar für, wenn wir zum nächsten Video gehen, wo wir anfangen, die Login-Funktion zu behandeln. 53. Anmelden: Natürlich variiert das Innern von Benutzerkonten, wird jetzt verwendet, es sei denn, der registrierte Benutzer kann sich auch bei der Rückkehr anmelden. Das ist es, was wir jetzt in diesem Video zu behandeln gegangen. Außerdem sind wir nicht mit dem Login in den Benutzer sofort nach der Registrierung umgehen, was eine nette kleine Note ist. Wir haben bereits eine Login-Button innerhalb der Kopfzeile, die Links zu den Routen der Schrägstrich Login. Beginnen wir damit, diese Route innerhalb der Datei index.js zu behandeln. Lassen Sie uns heute innerhalb des Routenordners gehen und dann zu unseren Benutzerrouten gehen, die gerade hier sind. Dies wird eine Get-Anfrage sein, also geroutet oder Gats. Der Pfad der Anmeldung zum Schrägstrich. Lassen Sie uns unsere Verwendung Controller verwenden, und erstellen Sie dann einen Login bekommt oder wir verwenden Controller, können wir jetzt diese Funktion im Inneren hier einrichten. Innerhalb des Controllers, die Verwendung von Controller, und dann nach unten bringen Sie dies ein wenig mehr exports.login bekommt gleich unserer Funktion , die die Anfrage und die Antwortobjekte übernimmt. Oder Funktionskörper, der einfach nur die Vorlage ausruhen oder rendern wird, die Login genannt wird. Dann übergeben Optionen den Titel des Logins, um fortzufahren. Also gehen wir am Ende. Natürlich müssen wir auch diesen Login bei Vorlage erstellen. Das machen wir jetzt in der Seitenleiste. Die Routen, Entschuldigung, die Ansichten. Klicken Sie auf das Symbol „Neue Datei“ und dann login.org. Beginnen wir damit, unsere Layouts zu erweitern. Inhalt blockieren. Ebene zwei Überschrift mit dem Titel, der an unsere Vorlagen übergeben wurde. Horizontale Linie, um den Titel vom Rest unseres Formulars zu trennen. Beginnen wir damit, unser Formular jetzt zu erstellen, und Entscheidungen haben die Aktion, die weitergeleitet wird/login sein wird. Die Methode wird ein Post-Anfragen sein. Wir werden jede unserer Formulareingaben mit der Klasse der Bildung von boots.foam_ Eingang umgeben und sagt für unser CSS später. Dies wird eine einfache Formulareingabe sein. Es wird die E-Mail in einer Gruppe haben, das Passwort, und dann eine Schaltfläche zum Senden unten unten. Lassen Sie uns zuerst unsere E-Mail erstellen. Beschriftung für E-Mail, und dann den Text für die Beschriftung von E-Mail 2. Diese Eingabe wird den Typ der E-Mail haben. Dies bietet eine Browservalidierung, wenn der E-Mail-Typ nicht korrekt ist. Eingabetyp, wir benötigen auch den Namen von E-Mail 2 und auch die ID der E-Mail, so passen Sie Ihrem Etikett. Die zweite, und in der Tat, werden wir einfach dieses Formular Eingabe-Gruppe Umgebungen unten kopieren. Dieser wird für das Passwort sein. Auch der Text aus Passwort mit dem und kurz danach ist auch ein Eingabetyp von Passwort 2 der Name, und schließlich die ID 2 des Passworts. Das letzte, was wir unten unten hinzufügen müssen, sind unsere endgültigen Formulareingaben, und das ist für unseren Submit-Button. Eine Schaltfläche, dies muss die Art des Sendens haben. Sendet ein Formular, können wir auch unsere CSS-Klasse von setzen in kleine hinzufügen. Halten Sie das Styling konsistent, und dann den Text der Anmeldung. Angesichts unserer letzten speichere ich jetzt und bacause den Browser, die jetzt sehen, ob wir auf dieser Login-Routen aktualisieren, die jetzt unser Formular unten unten unten sehen. Sobald dieses Formular eingereicht wurde, müssen wir die Post-Anfrage auf die gleiche Route bearbeiten. Oben in der index.js, können wir das jetzt behandeln. Lassen Sie uns diese Zeile hier duplizieren. Diese Zeit will Router Dot Post sein. Wir werden diese Post-Anfrage an die gleichen Login-Routen senden, aber nur zu tun ist, ändern Sie unseren Funktionsnamen in Login-Post. Oder wir könnten einen Controller benutzen. Wir müssen zuerst das Passport-Modul benötigen, da wir die Straftat K-Methode verwenden, die von diesem Modul bis an die Spitze zur Verfügung gestellt wird, lassen Sie uns unsere Konstante von Passwörtern Kapital P einrichten. Wir werden das Passport-Modul benötigen, am Ende . Jetzt zum Login-Post , den ich direkt unten am unteren Rand hinzufügen werde. exports.Login-Post wird gleich sein Pässe, die unsere Variable für das Passwort-Modul ist, und dann Erwachsene von Befürwortern. Wir setzen diesen Login-Post b gleich Pass Boards, dann Callie authentifizieren Methode, die mit diesem Modul zur Verfügung gestellt. Die ersten Argumente, die wir übergeben müssen, sind die lokale Strategie, um die Anmeldeanforderung zu behandeln. Übergeben Sie ein in lokalem Inneren hier, getrennt durch ein Komma. Die zweite ist ein Objekt, das einige Optionen enthält. Öffne die geschweiften Klammern und ich werde dies auf seine eigene Zeile hinzufügen. Hier werde ich in zwei Optionen übergeben. Diese werden den Benutzer umleiten, wenn eine Anmeldung erfolgreich oder nicht erfolgreich war. Die erste ist eine Weiterleitung, wenn die Anmeldung erfolgreich war, und wir tun dies mit Erfolg. Weiterleitungen, die durch Pässe erkannt wird, und dann wird der Benutzer umleiten Schrägstrich, die unsere Home-Route ist, getrennt durch ein,. Wir können auch Fehler Umleitung hinzufügen. Wir werden umleiten, um Schrägstrich Login weiterzuleiten, die den Benutzer auf der gleichen Anmeldeseite halten wird. Sie sollten jetzt alles sein, was wir brauchen, um sich anzumelden, wir haben nur Testbenutzer frühzeitig aus mLab gelöscht. Jetzt registrieren wir einen neuen Benutzer. Speichern Sie diese Datei über im Browser, wir müssen zuerst einen neuen Benutzer signieren. Lassen Sie uns für unseren eigenen Benutzer gehen. Details hier drinnen. A bestätigen O2 mLab, geben Sie uns eine Aktualisierung, und werden verwendet wird jetzt registriert, so lassen Sie uns versuchen, sich anzumelden. Wenn wir zur Benutzeranmeldung zurückkehren, zurück zur Startseite. Lassen Sie uns zunächst auf die Login-Option aus der Navigation klicken oder ich bin kein Tippfehler, um zu sehen, ob wir auf diese Weiterleitung/Login-Routen umgeleitet haben. Scrollen Sie unsere E-Mail unten und innen hier, und das kommt ein falsches Passwort, drücken Sie „Login“. Wir werden immer noch zu diesem Schrägstrich Login weitergeleitet , da ein Fehler mit unserem Passwort aufgetreten ist. Lassen Sie uns versuchen, eine erfolgreiche Anmeldung dieses Mal und sehen, um es auf diese Homepage umgeleitet. Lassen Sie uns dieses eine Logo geben. Melden Sie sich mit den richtigen Details, und gut. Wir haben nun auf die Homepage weitergeleitet. Ausgezeichnet. Wir haben jetzt die Login-Funktion funktioniert. Wir verlassen uns auf die Weiterleitung, also sagen Sie uns, ob es in der Minute einen Pfeil gibt, aber wir werden später einige Flash-Nachrichten hinzufügen, um dem Benutzer Feedback zu geben. Der letzte Schritt dafür besteht darin, sich nach der Registrierung automatisch beim Benutzer anzumelden. Dies ist ziemlich einfach zu tun, da wir bereits den Login-Post eingerichtet haben. Wir können diese einfach zu den Anmeldeposten hinzufügen. Über zu unserer index.js, wir haben diese Login-Post-Einrichtung nur hier also lassen Sie uns diese kopieren. Dann müssen wir zur Postanforderung gehen, wenn wir uns anmelden. Dann nach den Unterzeichner-Posts können wir ein Komma hinzufügen, und wir werden dies in seiner eigenen Zeile hinzufügen. Wir können auch Login-Post hinzufügen. Sobald die Post-Anfrage an die Anmelderouten gesendet wird, die hier ist, wird es dann zum Zuweisen eines Beitrags gehen und sich dann sofort mit dieser Funktion anmelden, die gerade hier ist. Geben Sie dieser Datei ein Speichern, und dann so ausgedrückt weiß, um auf den Slogan Post zu gehen, müssen wir als nächstes in der Seite des Anmeldebeitrags anrufen. Um einen Controller zu verwenden, lassen Sie uns unser Zeichen einen Beitrag finden , der gerade hier ist. Wenn wir nach unten scrollen, haben wir dies, wenn Abschnitte überprüfen, ob es irgendwelche Bereiche gibt. Kurz nach ihm und wir können auch als nächstes anrufen und ignorieren bewegt sich auf den Login-Post. Nun, ich habe das, das wird im Else-Abschnitt hinzugefügt, was bedeutet, dass es keine Fehler gab. Innerhalb dieses Blocks nur hier, und wir können dies jetzt testen, indem Sie einen Testbenutzer hinzufügen, also speichern Sie dies. Gehen Sie, um sich anzumelden, und dann ist es seltsam Testbenutzer. Klicken Sie auf „Bestätigen“, und scrollen Sie dann nach unten. Wir sehen, wir haben einen Bereich unten am unteren Rand des doppelten Schlüsselindex. Nun, das ist vielleicht nicht ganz offensichtlich, was hier vor sich geht. Dies ist im Grunde auf einige alte Indizes zurückzuführen, die wir bereits in unserer Datenbank haben. Wenn wir zu mLab gehen und einen Blick werfen, wenn wir auf die Benutzer klicken und dann öffnen, haben wir unseren Benutzer gerade hier, den wir einrichten. Wenn wir dann auf die Indizes klicken, sehen wir nun, dass wir eine widersprüchliche E-Mail und auch Benutzername Index haben. Wir wollen nur von der E-Mail gehen, also lassen Sie uns diesen alten Benutzernamen von früher führen. Klicken Sie darauf, löscht. Jetzt zurück, um sich anzumelden, und lassen Sie uns versuchen, das Formular erneut einzureichen. Gut. Jetzt direkt nach der Anmeldung umgeleitet. Wenn wir zu mLab gehen, klicken Sie auf unsere Datenbank. Wir haben jetzt unsere beiden Benutzer, das ist auch der Test 1, den wir gerade von vorher hinzugefügt haben. Es sieht nun so aus, als ob unser Benutzer eingeloggt ist, ich bekomme auch die Erfolgsumleitung auf die Homepage. Gut oder Benutzer können sich jetzt einloggen, und als nächstes werden wir uns Login-Outs ansehen. 54. Abmelden: Da wir die meisten Dinge jetzt mit Passport eingerichtet haben, ist das Abmelden eine einfache Funktion, die jetzt implementiert werden muss. Passport gibt uns eine Abmeldefunktion für das Anforderungsobjekt. Um die Anmeldesitzung zu beenden, müssen wir zuerst eine Abmeldeoption innerhalb des Nervs hinzufügen. Im Moment haben wir nur die Anmelde- und Login-Buttons. Also, hier drüben, legen Sie eine Mops-Datei an. Wir können auch einen Abmelde-Link hinzufügen. Runter zu unseren Ansichten, und dann layout.pug. Blättern Sie nach unten. Wir können ein neues Listenelement nach dem Login erstellen, also li, das auch ein Link mit einem href von/logout und auch dem Logout-Text sein wird. Später stellen wir sicher, dass nur einer der Login- oder Logout-Links im Browser angezeigt wird, abhängig vom angemeldeten Status des Benutzers. Über die index.js, können wir jetzt auch diese Route bewältigen. Index.js unter der Benutzerroute, lassen Sie uns router.get hinzufügen. Die Zeichenfolge von /logout, verwenden Sie den Controller, und dies wird einfach.logout sein. Lassen Sie uns gehen und erstellen Sie dies jetzt, innerhalb des Benutzer-Controllers. Scrollen Sie nach unten. exports.logout, erstellen Sie unsere Funktion, Anfrage und Antwort. Im Inneren können wir auf die Abmeldemethode für die Anforderungsobjekte zugreifen, die von Passport, request.logout zur Verfügung gestellt wird , und dann auf die Antwortobjekte werden wir eine Umleitung durchführen, um den Benutzer auf die Homepage nach dem Abmelden umzuleiten. Das ist alles, was wir tun müssen. Über den Browser, wir können es jetzt mal ausprobieren. Speichern Sie diese Datei, laden Sie die Homepage neu, und wir versuchen, sich zuerst anzumelden. Einloggen. Wir werden nun auf die Homepage weitergeleitet. Auch die Abmeldefunktion leitet uns auf die Homepage weiter. Um sicherzustellen, dass dies funktioniert, gehen wir auf eine andere Route, wie zum Beispiel /all. Versuchen Sie, auf Abmelden klicken, und wurden nun auf die Homepage weitergeleitet. Also möchte ich nur sicherstellen, dass dies Kleinbuchstaben ist, nur um den Rest zu entsprechen. Also layout.pug, ändere das und speichere und da geht's. So scheint das alles jetzt zu funktionieren, aber wir können nicht zu 100 Prozent sicher in den Momenten sein. In den kommenden Videos werden wir dem Benutzer ein Feedback geben, um ihm mitzuteilen, wann die Anmeldung oder Abmeldung erfolgreich war, indem wir Flush-Nachrichten hinzufügen. werden wir auch andere Dinge tun, wie die Arbeit mit Sitzungen, wie die Arbeit mit Sitzungen, Hinzufügen bedingter Rendering zu den Anmelde- und Abmeldelinks sowie die Personalisierung der Kopfzeile durch die Anzeige des Namens des Benutzers, wenn Sie angemeldet sind. 55. Arbeiten mit Sessions: Wenn Sie mit Benutzern arbeiten, etwas, auf das Sie bald stoßen werden, ist es ein Bedarf, eine Benutzersitzung zu verwalten. Sitzungen sind im Grunde eine Möglichkeit, einen authentifizierten Benutzer zu speichern, so dass sie zwischen den Besuchen für eine bestimmte Dauer gespeichert werden. Sie können auch für verschiedene Anwendungen verwendet werden, aber dies wird der Zweck der Sitzungen in diesem Projekt sein. Stellen Sie sich vor, wir sind Benutzer und melden Sie sich in einer Website. Wie Sie bereits wissen, wir beim Klicken zwischen den Seiten stellen wir beim Klicken zwischen den Seiteneine neue Anfrage an den Server. Stellen Sie sich vor, wie frustrierend es wäre, wenn wir uns für jede neue Seite anmelden müssten , die wir angefordert haben. Dies liegt daran, dass der Server die Informationen des Benutzers nicht kennt. Daher verwenden wir eine Sitzung als eine Art serverseitigen Speicher für die Informationen des Benutzers, die wir während unseres Besuchs speichern möchten. Was passiert, ist, wenn sich ein Benutzer anmeldet, eine Sitzung erstellt wird und die Details des Benutzers in der Datenbank gespeichert werden. Wir werden dafür unsere gleiche Mongo-Datenbank verwenden. Für jede Anforderung wird eine Sitzungs-ID an den Server übergeben. Oft wird diese ID in einem sogenannten Cookie gespeichert. Der Server überprüft dann diese ID mit den Informationen, die er für diesen Benutzer enthält , und gibt dann die Informationen des Benutzers zurück, wenn alles gut ist. Dafür werde ich ein beliebtes npm-Paket namens express-session verwenden. Dies ist das npm-Modul, das wir alle kennen. Diese Middleware ermöglicht es uns, Sitzungen für unsere Benutzer einzurichten und auch verschiedene Optionen hinzuzufügen, die wir in Kürze betrachten werden. Als nächstes haben wir erwähnt, dass wir auch die Sitzungsdaten auf der Serverseite speichern. Wenn wir voran gehen und nach unten scrollen. Das ist ganz in der Nähe des Bodens. Wir müssen unsere Session-Stores finden. Hier gehen wir „Compatible Session Stores“. Wir sehen eine Liste der Stores, die wir mit diesem Modul verwenden können. Da wir Mongo bereits in unseren Projekten verwenden, können wir das connect-mongo-Paket verwenden, das hier unten aufgeführt ist. Dies ist die, die wir verwenden möchten. Dieses Paket ermöglicht es uns, MongoDB als unseren Sitzungsspeicher zu verwenden, wenn Sie Express verwenden. Lassen Sie uns zuerst voran und installieren Sie das Paket in unserem Projekt. Runter auf den Server und schließt sich. Wir müssen „npm i“ hinzufügen und das Paket heißt „Express-Session“ Hit „Enter“. Sobald es aus npm gezogen wird, können wir dieses Modul in der Hauptdatei „app.js“ benötigen. Öffnen Sie die Seitenleiste, öffnen Sie die „app.js“. Dann fügen wir kurz nach unserem Router die Kommentare von „For Sessions“ hinzu. Const Session wird gleich sein, um den Modulnamen „Express-Session“ zu erfordern. Semikolon am Ende. Dann in unseren Mongo Store. Unten im Terminal „npm i“. Das war „Connect-Mongo“. Lassen Sie uns installieren. Wir müssen auch dieses Paket benötigen, so dass wir auch in der „app.js“, direkt unter unserer Sitzung, direkt unter unserer Sitzung,einen Konsonanten von „Mongo Store“ hinzufügen können. Ich werde dafür Großbuchstaben verwenden und „Connect -Mongo. Danach können wir die Klammern öffnen und dann in der Sitzung übergeben. Semikolon. Was genau macht diese Codezeile, wenn wir sie hier haben? Nun, wie üblich packen wir das Paket „Connect-Mongo“ und speichern es in einer Konstante namens „Mongo Store“. „ Connect-Mongo“ gibt eine Funktion zurück. Setzen Sie eine normale erfordern Kohle wird nicht sofort die Funktion ausführen. Stattdessen wird es es nur innerhalb dieser Konstante speichern. diesem Grund müssen wir die Klammern am Ende hinzufügen, um diese Funktion zusammen mit Person in der Sitzungsvariablen zu dieser Funktion auszuführen . Dann unten können wir unsere Sitzung als „Middleware“ einrichten, um für jede Anfrage mit „app.use“ auszuführen und auch wieder in unserer Sitzungsvariable übergeben. Scrollen wir nach unten. Lassen Sie uns dies kurz nach unserem über „app.use“ hinzufügen, also „app.use“ die „Session“ mit den Klammern kurz danach. Diese Sitzung nimmt ein „Optionsobjekt“. Fügen wir die geschweiften Klammern hinzu und fügen Sie diese zu einer neuen Zeile hinzu. Dies erstellt eine Session Middleware mit den Optionen, die wir jetzt hinzufügen werden. Alle verfügbaren Optionen sind in der Dokumentation aufgeführt. Für den ersten, den wir verwenden werden, was auch erforderlich ist, ist der geheime Satz. Fügen wir das „Geheimnis“ hinzu. Wir können dies auch innerhalb unserer „.env“ -Datei speichern, da es einige vertrauliche Informationen sein wird. Also fügen wir zuerst „Process.env.secret“ hinzu. Dieses „Geheimnis“ ist eine Textzeichenfolge unserer Wahl, die verwendet wird, um das Session-ID-Cookie zu signieren. Als nächstes können wir die Zeichenfolge innerhalb unserer Datei „.env“ hinzufügen. Mach das auf. Dann unten unten können wir unser „Geheimnis“ hinzufügen. Dies kann jeder Textzeichenfolge unserer Wahl entsprechen. Ich werde nur hinzufügen „Travel Session“ fügen Sie ein Ausrufezeichen hinzu. Geben Sie dieser Datei ein „Speichern“ Schließen Sie sie herunter. Als nächstes müssen wir „Save on initialized“ auf false setzen. Fügen Sie nach allen Geheimnissen ein Komma hinzu. Dies ist „Speichern bei initialisiert“ und setzen Sie diesen Wert auf „False“. In diesem Wert festgelegt bedeutet, dass eine neue Sitzung nicht in der Datenbank gespeichert wird , es sei denn, diese Sitzung wird tatsächlich geändert. Dies ist nützlich für Besucher, die nur unsere Websites durchsuchen und nicht wirklich ihre Details in einer Sitzung gespeichert werden müssen. Dies führt zu viel weniger unnötigen Einsparungen in unserer Datenbank. Fügen Sie als Nächstes ein Komma hinzu und fügen Sie die Option „resave“ als false hinzu. Wenn Sie dies auf false setzen, wird sichergestellt, dass unsere Sitzung nicht gespeichert wird, es sei denn, sie wurde tatsächlich geändert. Schließlich müssen wir unseren MongoDB-Speicher nutzen , indem wir diese Store-Option mit unseren MongoDB-Konstanten verwenden, die wir gerade oben gesetzt haben. Das hier ist eine. Fügen Sie nach dem erneuten Speichern unsere Shop-Option hinzu und wir setzen diesen auf den Wert des neuen MongoStore, fügen Sie die Klammern kurz danach hinzu. Dieser neue Speicher nimmt die Mungo Verbindung als Option, fügen Sie die geschweiften Klammern hinzu, mongoos.connection. Überprüfen Sie, dass alles gut aussieht. Wir haben Mungo, wir haben unsere Sitzung, unser MongoStore. Wir können jetzt einen Schnelltest einrichten, um dies in Aktion zu sehen. Sie müssen dem nicht folgen, wenn Sie nicht wollen. Dies wird nur eine kurze Demo sein. In der Tat, bevor wir dies tun, muss dies MongooSeconnection sein, der Doppelpunkt und da gehen wir, das ist gleich mongoose.connection, die wir auch früher verwendet haben, wenn wir unsere MongoDB einrichten, die gerade hier ist. Jetzt gehen wir weiter und richten den Test in der Datei index.js ein. Speichern Sie also unsere app.js. Öffnen Sie die index.js, und lassen Sie uns dann nach oben scrollen. Die Homepage-Filter befinden sich auf der Homepage-Route. Also werde ich nur diese Zeile auskommentieren. Wir werden eine neue Testfunktion erstellen, um zu testen, ob die Sitzung funktioniert, indem Sie die Anzahl der Besuche auf der Homepage in der Sitzung anmelden. Lassen Sie uns zuerst unsere Heimroute neu erstellen. So router.get den Heim-Router Schrägstrich. Lassen Sie uns eine Funktion hinzufügen, die die Anfrage und auch die Antwort übergeben. Im Inneren hier ist das erste, was ich tun werde, eine if-Anweisung zu erstellen . Wenn request.session.page_views. Dieses Express-Session-Modul stellt unsere Sitzungsdaten in den req.session Objekten zur Verfügung. Wir können auch die Seitenaufrufe verwenden, um zu sehen, wie oft die Seite besucht wird. Jetzt können wir diese Seitenaufrufe insgesamt bei jeder Anfrage erhöhen. Fügen Sie also die req.session.page_views++ hinzu. Dadurch wird die Anzahl der Seitenaufrufe jedes Mal erhöht, wenn eine Anfrage an unsere Homepage gestellt wird. Dann werden wir die Anzahl der Besuche auf dem Bildschirm mit einem res.send anzeigen. Wir werden mit den Backticks senden, einige Texte von der Anzahl der Seitenbesuche, einen Doppelpunkt. Dann können wir unsere dynamischen Daten hinzufügen, die die req.session.page_views ist. Natürlich brauchen wir auch eine andere Aussage, so sonst. Dieser if Abschnitt behandelt, wenn eine Seitenansicht gespeichert ist, dh wenn der Benutzer bereits besucht hat. Die else-Sitzung behandelt, wenn der Benutzer zum ersten Mal besucht. Wenn das der Fall ist, möchten wir, dass die req.session.page_views gleich eins ist und dann können wir einen res.send mit dem Text des ersten Besuchs machen. Wenn wir nun bei unserem ersten Besuch zum Browser gehen, sollten wir diesen Text sehen, den wir hier gesetzt haben. Dann sollten wir für jede zusätzliche Aktualisierung auf der Homepage die Anzahl der Seitenaufrufe jedes Mal um eins erhöhen und diese dann auf dem Bildschirm anzeigen. Lasst uns das mal ausprobieren. Localhost:3000, es wird neu geladen. In der Tat müssen wir den Entwicklungsserver starten. Wir haben einen Fehler, also schauen wir uns an, was das ist. Rüber zu unserer app.js. Wir haben hier nur einen Rechtschreibfehler. Speichern Sie das und gehen Sie jetzt wieder grün. Wir laden die Homepage und wir haben den Text des ersten Besuchs. Wenn wir nun auf Aktualisieren klicken, sollte dies nun die Anzahl der Seitenaufrufe bei jedem Klick erhöhen. Also drei Besuche, 4, 5, 6, 7. Jetzt rüber zu mLab für die Datenbank. Lassen Sie uns auffrischen. Gut. Jetzt sehen wir neben unseren Hotels und Benutzern, jetzt sehen wir eine Sitzungssammlung wurde auch mit einem Dokument erstellt. Wenn wir darauf klicken, werden wir jetzt die Details der Sitzung sehen, die hier gespeichert ist. Die Sitzung hat oben eine eindeutige ID und dann einige Informationen über das Cookie selbst, wie das maximale Alter, alle Ablaufdaten, die wir festlegen möchten, und auch die Anzahl der Seitenbesuche, die wir sahen uns nur innerhalb des Browsers von sieben an. Alle diese Optionen können BIOS gesetzt werden, wenn wir dies als Option tun wollen. Wenn wir voran gehen und die Sitzung einzurichten. Die Dokumentation enthält einige Beispiele dafür, wie Sie dies tun, wenn Sie Änderungen vornehmen möchten. Jetzt wissen wir, dass unsere Sitzung funktioniert, können wir jetzt den Code der Seitenaufrufe entfernen und die ursprüngliche Homepage wieder. Über die index.js kann dieser Code hier entfernt oder auskommentiert werden. Dann kann der router.get, der die ursprüngliche Homepage war, dann nicht kommentiert werden. Speichern Sie diese, laden Sie den Browser auf der Homepage neu und alles sollte nun wieder normal sein. Aber dieses Mal benutzen wir Sitzungen. 56. Benutzer-Feedback mit Flash-Nachrichten bereitstellen: Früher, als wir uns ein- und abmeldeten, mussten wir uns auf eine Seitenumleitung verlassen, um uns mitzuteilen, ob dies ein erfolgreicher Login war oder nicht. Dieses Video wird unsere Knoten verbessern, indem Flash-Nachrichten dem Benutzer hinzugefügt werden, die dann angezeigt werden und der Benutzer kann auch auf ein kleines X in der Ecke klicken , um sie zu entfernen, sobald sie gelesen wurden. Wir haben bis jetzt gewartet, um Flash-Nachrichten aus gutem Grund hinzuzufügen. Dies liegt daran, dass die Flash-Nachricht in der Sitzung gespeichert wird, also mussten wir dies zuerst einrichten. Ich werde ein Knotenpaket namens Connect Flash verwenden, um diese Nachrichten bereitzustellen. Lassen Sie uns das jetzt installieren. Dies ist die GitHub-Seite, wenn Sie mehr Informationen erfahren möchten. Aber im Moment gehe ich zu Visual Studio Code, schließe den Server und führe dann MPM aus. Ich verbinde Flash und ziehe dieses Paket von MPM. Sobald dies installiert ist, können wir nun zu unserer app.js Datei gehen und dann dieses Paket oben benötigen. Lasst uns unter unsere Sitzungen gehen. Ist das ein Kommentar? Dies ist für große Nachrichten. Wir gehen voran und erstellen Sie eine Konstante namens Flash und dies wird das Flash-Modul erfordern, so dass dies Bindestrich Flash mit einem Semikolon verbinden und dann können wir den Flash als Middleware hinzufügen, um in unserer Anwendung zu verwenden. Scrollen wir ein wenig weiter nach unten und wir können dies direkt nach unseren Passlinien hinzufügen. Bei dem Kommentar geht dies in die Middleware, also tun wir dies mit app.use, die das Flash-Paket aufnehmen wird, das wir gerade benötigt haben. Als nächstes können wir diese Flush-Funktionalität auch zu unserer eigenen Middleware unten hinzufügen. Gehen wir also dahin, wo wir unsere eigene Middleware erstellt haben, die gerade hier ist, und dann nach diesem req.path können wir auch eine neue lokale hinzufügen. Also res.local, lasst uns zu meinem lokalen Flash gehen und dies gleich dem req.dot Flash setzen und am Ende herauskommen. Dadurch wird die Flash-Funktionalität als Variable innerhalb aller Plotvorlagen zur Verfügung gestellt . Dies als Variable zu haben, ist nützlich für das bedingte Rendern. Wenn es irgendwelche Nachrichten zu zeigen, können wir Flash für jede unserer Funktionen einrichten. Aber um zu beginnen, werde ich zu den Benutzer-Controllern gehen, Login-Post, also speichern Sie diese Datei und gehen Sie dann zum Benutzer-Controller und wir müssen Login-Post finden, die nur hier ist. Nach dem SuccessRedirect können wir auch einen SuccessFlash hinzufügen, und dann eine Zeichenfolge, die Sie dem Benutzer anzeigen möchten, sind Sie jetzt angemeldet, so dass jetzt sehen, dass diese Textzeichenfolge auf dem Bildschirm erscheint, anstatt mit eine Weiterleitung, um uns zu zeigen, dass wir jetzt eingeloggt sind. Passport funktioniert standardmäßig mit Connect Flash, so dass dies ziemlich einfach hinzuzufügen ist. Es gibt auch eine Fehler-Flash-Nachricht zwei, die wir für diese Fehlerbedingung unten unten hinzufügen können. Getrennt durch ein Komma und fügen Sie FailureFlash hinzu, setzen Sie dies auf eine Zeichenfolge, so dass die Anmeldung fehlschlägt und sagt: „Bitte versuchen Sie es erneut.“ Jetzt brauchen wir eine Möglichkeit, diese Nachrichten dem Benutzer anzuzeigen. Ein praktischer Ort, um dies zu tun, wäre in der Datei layout.pug. Diese Datei enthält unseren Header, der sich auf jeder Seite in den Projekten befindet. Gehen Sie zum layout.pug. Das erste, was ich tun werde, ist, zwei Konstanten zu setzen, die Flash-Nachrichten sind ein Objekt, das sowohl Schlüssel als auch Werte enthält. Lassen Sie uns für unser Strandbild gehen und wir können dies direkt darüber hinzufügen, so dass das gerade hier ist. Denken Sie daran, dass JavaScript den Bindestrich haben muss. Also -const-Werte werden gleich objects.values sein und dann werden wir Pars im Flash, also hier analysieren wir in den Flash-Nachrichten, die ein Objekt ist, und wir gehen voran und verwenden die Punkt-Werte-Methode, , die ein Array der Eigenschaftswerte des Objekts zurückgibt. Denken Sie daran, Objekte bestehen aus Schlüsselwertpaaren, wir haben jetzt die Werte hier, also werde ich diese Zeile duplizieren und dies als Schlüssel festlegen. Ändern Sie die Konstante Keys zu sein, und dies ist, wo wir die Punkt-Tasten Methode verwenden. Wieder, Parsen in den Flash-Nachrichten, die Schlüssel und die Art der Nachricht, die wir wollen, und ich werde drei Nachrichtentypen erstellen. Der erste ist Erfolg, und dies wird für Dinge wie erfolgreiche Anmeldungen, auch ein Fehlertyp für fehlgeschlagene Anmeldungen und allgemeine Fehler sein. Dann ist der dritte und letzte Typ für Info. Dies wird für allgemeine Informationen wie „Sie sind jetzt abgemeldet“, und wenn in diesen Zeilen, was keine allgemeine Erfolgs- oder Fehlermeldung ist, werden wir uns ansehen, wie Sie diesen Nachrichtentyp bald manuell einstellen können , wenn fügen wir weitere Flash-Nachrichten im Controller hinzu. Auch Pässe fügt diese beiden für den Erfolg und Misserfolg einer Anmeldung, so dass diese drei Arten sind diese Schlüssel Verbraucher hier erstellt. Jetzt zu den Werten. Die Werte sind im Grunde der Textring, wie Sie „Sie sind jetzt angemeldet“ oder „Login fehlgeschlagen, bitte versuchen Sie es erneut.“ Wir wollen diese Nachrichten nur zeigen, wenn es tatsächlich irgendwelche zu zeigen, so können wir einige bedingte Rendering innerhalb unserer layout.pug hinzufügen, unter unseren beiden Konstanten wird eine if-Anweisung hinzufügen. Wenn keys.length größer als Null ist, dann unter einem div, das ein Container für die Nachricht sein wird, wird dieses div zwei Klassen haben. Zuerst ist eine allgemeine Nachrichtenklasse für das Styling der Nachricht und dann eine zweite Klasse von Nachrichtenunterstrich und dann den Schlüsselnamen. Der erste Typ, also Klasse ist gleich wie viele Backticks, da dies dynamische Daten sein wird, so dass der erste für Styling ist Nachricht und dann der zweite von Nachricht Unterstrich und dann können wir unsere dynamischen Daten von Schlüsseln hinzufügen. Dies erzeugt einen Klassennamen der Nachrichteninfo, Nachrichtenerfolg und auch Nachrichtenfehler, und wir können dann diese freien Stile innerhalb des CSS später verwenden , um einige verschiedene Farben für jeden Nachrichtentyp bereitzustellen. Wir haben die Nachrichten in den Konstanten dieses Wertes gespeichert und wir werden nur ein S am Ende tatsächlich hinzufügen, also Werte. Ich werde diese in eine Spanne Elemente setzen. unterhalb unserer div Intensität eine Ebene können wir eine Spanne erstellen , die unseren Werten Konstanten entspricht. Dann ein zweites span Element mit der Klasse der schließen Unterstrich btn. Dies wird ein kleines Kreuz zur Verfügung stellen, auf das der Benutzer klicken kann , um dann die Flash-Nachricht zu entfernen, so können wir Bindestrich X genau so finden oder wir können die HTML-Entität von kaufmännischem Und-Zeichen und dann mal mit dem Semikolon am Ende verwenden , also im Inneren wollen wir ein onclick-Ereignis ausführen. Sobald das span Element geklickt wird, möchten wir dies auf JavaScript ausführen, das all diesen Abschnitt nur hier entfernen wird. Wir können dies tun, indem Sie den übergeordneten Knoten auswählen. Die übergeordneten Knoten sind dieses umgebende div nur hier, und rufen Sie dann die remove-Methode auf. Wir können die onclick-Methode hinzufügen und dies auf this.parentNode setzen, was wiederum dieses div nur hier ist und dann aufrufen.remove. Dies ist also eine Schriftart, die die Nachricht in unserem Header-Abschnitt anzeigt. Also gehen wir jetzt zum Browser und probieren Sie das aus. Also über zu Ihrer Seite, und wir müssen möglicherweise den Server neu starten. Also npm laufen devstart. Sobald es läuft, laden Sie den Browser neu, und dann können wir versuchen, sich anzumelden. Klicken Sie also auf Login. Unten können wir unsere Login-Daten hinzufügen. Also zuerst möchten wir eine erfolglose Anmeldung hinzufügen, indem wir ein falsches Passwort hinzufügen. Wir erhalten nun die Meldung, Anmeldung fehlgeschlagen, bitte versuchen Sie es erneut. So können wir jetzt darauf klicken, so dass es die Nachricht entfernt, und lassen Sie uns eine weitere versuchen. Diesmal beantworten wir die richtigen Details, und wir sehen keine Erfolgsmeldung. Sehen wir uns an, was los ist und verwenden Sie einen Controller. Wir haben da nur einen Rechtschreibfehler, also Erfolg. Laden Sie das neu. Lassen Sie uns versuchen, sich abzumelden und dann wieder anzumelden. Wir werden dies dieses Mal erfolgreich tun, und jetzt erhalten wir die Nachricht von, Sie sind jetzt eingeloggt. Jetzt können wir wieder darauf klicken, um die Nachricht zu entfernen. Mit diesem Funktionieren können wir jetzt weitere Nachrichten hinzufügen, wo wir sie brauchen, um in der Benutzer-Controller-Datei dot js anzuzeigen. Wir können auch eine Nachricht zum Abmelden hinzufügen. Scrollen Sie also etwas weiter nach der Anfrage oder melden Sie sich ab. Wir können auf req.flush zugreifen, und wir wollen hier zwei Dinge hineingehen. Der erste ist der Nachrichtentyp. Denken Sie daran, bevor wir gesagt haben, dass wir drei verschiedene Nachrichtentypen haben werden; eine für Fehler, eine für Erfolg und eine für allgemeine Informationen. Nun, dies wird eine Info-Typ-Nachricht mit einer Zeichenfolge von sein, Sie sind jetzt abgemeldet. Also an diesem Ende mit dem Semikolon am Ende, das wird uns einen Test geben. Stellen Sie sicher, dass Sie noch eingeloggt sind und klicken Sie dann auf Abmelden, und wir haben jetzt unsere Nachricht oben hier. Nun zum Hotel-Controller, dies braucht auch einige Nachrichten, wenn wir Dinge tun, wie zum Beispiel in Hotels hinzufügen und auch aktualisieren. Klicken Sie also auf den Hotelcontroller, und der erste, den ich gehen werde, ist Push To Cloudinary, das ist einer der frühen, die hinzugefügt wurden. Also es einfach hier oben, bis zum catch-Abschnitt, lassen Sie uns request.flash hinzufügen. Dies wird also eine Fehlermeldung sein. Also die Art des Fehlers, und dann können wir eine Nachricht zurück an den Benutzer hinzufügen sagen, dass es ein Problem beim Hochladen des Bildes war. Senden Sie einen Text von, sorry, es ist ein Problem beim Hochladen Ihres Bildes aufgetreten. Versuchen Sie es erneut. Sobald Sie das getan haben, können wir jetzt gehen, um Hotelpost zu erstellen. So scrollen Sie nach unten, um Hotelpost direkt unten zu erstellen, und das ist nur hier. Wir werden dies in der Trisektion hinzufügen, weil dies eine Erfolgsbotschaft sein wird , um zu sagen, dass das Hotel erfolgreich erstellt wurde. Kurz nach dem warten hotel.save, request.flash, also war der Nachrichtentyp erfolgreich durch ein Komma getrennt. Wir müssen dies innerhalb der hinteren Ticks hinzufügen, da wir auch den Hotelnamen anzeigen werden. Wie unsere Vorlage Literale, so Hotel, das Hotel unterstrichen Namen, die wir Zugang zu haben, weil dieser Hotelvariable, und dann der Text erstellt erfolgreich. Okay, gut. Der nächste ist im Edit entfernen Beitrag. Also das ist direkt unten, also scrollen Sie nach unten. Dies wird eine Info-Nachricht sein, um zu sagen, dass keine Übereinstimmungen gefunden wurden. Dies ist der Admin-Bereich, in dem wir gehen, um ein Hotel zu bearbeiten oder zu entfernen. Ich erinnere mich, dass wir zuerst einen Hotelnamen oder eine Hotel-ID übergeben müssen , um dann die Datenbank zu durchsuchen. Scrollen wir nach unten. Wenn die Hoteldaten größer als Null sind, ist dies der Erfolgsabschnitt, aber sobald ich dies in den anderen Abschnitt hinzufüge, falls keine Hotels gefunden werden konnten. Request.flash, dies ist eine Info-Nachricht, dass keine Übereinstimmungen gefunden wurden, und mit nur ein paar mehr zu unserem Tag jetzt, so werden wir gehen, um Hotelpost zu aktualisieren, aber natürlich, wenn wir das Hotel aktualisieren. Also lassen Sie uns in den Abschnitt try gehen, und kurz vor der Umleitung können wir request.flash hinzufügen. Dies wird eine Erfolgsmeldung sein, und mit den hinteren Ticks können wir eine Nachricht bereitstellen. Wieder mit unseren dynamischen Daten in den Hotelnamen übergeben, so hotel.hotel_name, erfolgreich mit dem Semikolon am Ende aktualisiert. Dann ist die letzte, die ich hinzufügen werde, für Hotelpost löschen. Dies ist für eine erfolgreiche Löschung unseres Hotels, bevor die Weiterleitung Anfrage Flash. Dies wird eine Info-Typ-Nachricht mit dynamischen Daten sein. Also öffnen Sie die hinteren Ticks, so Hotel ID, können wir dann in der Hotel-ID übergeben, die diese Variable nur von oben hier ist, die wir von der request.params bekommen, wurde gelöscht. Nun geben Sie diese Datei ein Speichern und dann an den Administrator des Browsers. Wir müssen jetzt zu /admin im neuen Hotel gehen. Lassen Sie uns Test für Flash hinzufügen, und innen hier, in unsere Projekte, den öffentlichen Ordner, Bilder, und lassen Sie uns für das Logo gehen für jetzt ist das keine Rolle, beginnen zu schreiben, zu bestätigen. Großartig. Der Test für Flash wurde erfolgreich erstellt. Das scheint jetzt alles zu funktionieren. Dies ist es jetzt für Flash-Nachrichten, aber wir werden sie weiterhin hinzufügen, wie wir es brauchen, während des restlichen Projekts. 57. Bedingtes Benutzer-Rendering: In diesem Video werden wir einige Verbesserungen an der Benutzererfahrung vornehmen. Wird verschiedene Dinge wie bedingtes Rendern tun , um die Nervenverbindungen in Abhängigkeit von den angemeldeten Zuständen des Benutzers zu ändern , wird auch der Benutzername in der Kopfzeile angezeigt und die Admin-Routen geschützt. Um zu beginnen, können wir einige weitere Ortsansässige zu allen Middleware über in der Datei app.js hinzufügen und dann zu unserer Kunden-Middleware scrollen. Also, was ist nur diese Funktion gerade hier. Ich werde noch eins so hinzufügen. Dies ist für den Benutzer. Also hier drinnen brauchen wir einen gemeinsamen Vorsprung. Also sagen wir res.locals.user, wird gleich dem Anforderungspunkt-Benutzer sein und es sollte Semikolons am Ende geben. Also sollte dies schnell ändern. So wird der Benutzer dem Anforderungsobjekt per Reisepass hinzugefügt. Wenn sich ein Benutzer erfolgreich angemeldet hat. Wir können jetzt diese Benutzervariable innerhalb von Vorlagen verwenden , um einige bedingte Rendering anzuwenden. Derzeit, wenn wir über zu einem Menü gehen, haben wir Anmeldung, haben Login und auch abmelden angezeigt zur gleichen Zeit. Wir möchten die Anmelde- und Login-Buttons nur dann anzeigen, wenn der Benutzer sich nicht angemeldet hat. Also rüber zu unserem Layout, einem PRG, und dann gehen Sie zu unserem Nervenbereich über die Spitze hier. Wir werden einige bedingte Rendering hinzufügen, um nur anzuzeigen, wenn der Benutzer angemeldet ist. Also direkt unter dem Logo auf der ungeordneten Liste, eingerückt in einer Ebene, können wir sagen, wenn Sie falsch verwenden, werden wir in diesem Listenelement für die Anmeldung einrücken und sich auch anmelden. Diese beiden Schaltflächen werden nur angezeigt, wenn der Benutzer nicht angemeldet ist. Sonse zeigt den Abmelde-Button an, wenn der Benutzer angemeldet ist. Um dies zu tun, können wir auch den Abmeldebereich in einer Ebene verbessern. Dann können wir den Else-Abschnitt hinzufügen, der mit dem if-Abschnitt direkt oben ausgerichtet ist. Da wir Zugriff auf diese Verwendung der Variablen haben, die Sie gerade hier sehen, können wir auch auf das Menü, den Benutzernamen, anzeigen. Wir müssen uns nur abmelden, wir können die Klammern fragen und dann den Hash zwei Ausgaben verwenden, einige dynamische Daten. Also öffne die geschweiften Klammern. Jetzt können wir Benutzer Punkt Vorname zugreifen. So gibt es uns eine speichern und versuchen, Töne im Browser. Also nachladen. Derzeit möchten wir den Anmelde-Button und den Login sehen. Versuchen wir, sich anzumelden. Ich werde sehen, was passiert, wenn wir unsere Details unten hinzufügen. Es Login. Toll, so jetzt sehen wir nur noch den Abmelde-Button und auch unser Name wird nun daneben angezeigt. Lassen Sie uns versuchen, dies anzuklicken und sich abzumelden. Wir bekommen jetzt die Flash-Nachricht hier. Wir sehen jetzt auch nur noch die Anmelde- und Login-Buttons. Jetzt zum Schutz der Admin-Routen vor unbefugter Nutzung. Um dies zu tun, werde ich ein Stück Middleware erstellen, um zu durchbrennen, wo wir überprüfen müssen, ob der Benutzer ein Administrator ist. Wir können dies in der Verwendung von controller.js tun, und unten unten einfach unsere Logo-Funktion blasen. Wir können exports.admin hinzufügen. Dies wird eine Funktion sein, die die Anfrage, die Antwort, übernimmt. Als nächstes werden wir hier zwei Kontrollen durchführen. Zuerst wird eine Methode verwendet, die aufgerufen wird authentifiziert. Also werde ich sagen, wenn der Anforderungspunkt authentifiziert ist, dann wird es gerade danach geschweifte Klammern. Dann ist es, zu überprüfen, ob der Benutzer ein Administrator ist. Früh, als wir das Benutzermodell in der users.js erstellt. Lass uns das aufmachen. Wir haben die Felder „is admin“ hinzugefügt, was ein standardmäßiger boolescher Typ „false“ ist. Ich werde dies auch in der, if-Anweisung verwenden, um nur freie Benutzer zu erlauben, die auf true gesetzt sind. Also News-Controller, sowie zu überprüfen, ob der Benutzer authentifiziert ist. Wir können auch das doppelte kaufmännische Und-Zeichen verwenden. Es wird auch überprüft, ob die Bedingung von request.user.admin auf true gesetzt ist. Das wird ein Stück Middleware sein, es ist Pass-Through. Also müssen wir auch als nächstes anrufen. Also zuerst fügen Sie hier den nächsten hinzu, der zur Admin-Seite weitergeht. Dann wird das Rückgabe-Schlüsselwort danach, dieses Rückgabe-Schlüsselwort wird die Funktion ausbrechen, wenn dies wahr ist. Sollte diese Bedingung jedoch nicht erfüllt sein, können wir den Benutzer einfach auf die Homepage umleiten. Außerhalb if-Anweisungen können wir die res.redirects fragen. Dann als String einfach Schrägstrich, um zur Homepage zurückzukehren. Jetzt über in der index.js Datei, können wir und diese Middleware zu unseren Admin-Routen. So index.js. Wenn wir unseren Admin-Bereich finden, sind dies Admin-Routen hier. Der erste, den wir schützen möchten, ist einfach Schrägstrich Admin. Also, bevor wir sie auf die Admin-Seite nehmen, wird auch durch diese E Admin-Funktion laufen, die auch in der Verwendung Controller ist. Verwenden Sie also Controller dot ist admin und trennen Sie diese mit einem Komma. Dann werde ich auch eine zweite Route 2 hinzufügen , die alle Routen fängt, die mit einem Schrägstrich Admin beginnen, und dann Schrägstrich jede andere Route kurz danach. Also zeige ich dir, was ich mit diesem seltsamen Router meine. Punkt wird eine Kontrollrunde sein. Also für einen solchen Admin und dann Schrägstrich, werden wir den Stern verwenden. Dies fängt also alle Routen ab, die mit Schrägstrich admin beginnen, und dann irgendwas von dem Zeug danach. Also, dann werden wir durch die Verwendung Controller.isAdmin laufen , bevor sie mit einer dieser zusätzlichen Routen fortfahren. Jetzt zum Browser, um Designs auf den Admiralen zu testen. Also sowohl den Browser als auch neu laden. Wir können an allen Menüpunkten sehen, dass wir derzeit nicht eingeloggt sind. Versuchen wir „Weiterleitung/Admin“. Wir sind dann zurück zur Homepage weitergeleitet. Also lasst uns versuchen, uns anzumelden. Jetzt melden wir uns erneut mit Schrägstrich oder /admin an. Wieder einmal werden wir auf die Homepage zurückgeleitet. Für beide Fälle haben wir uns hierher zurückgeleitet, was bedeutet, dass die Authentifizierung fehlgeschlagen ist. Wie Sie vielleicht bereits erraten haben, liegt dies daran, dass wir uns als Benutzer gesetzt haben und admin auf false gesetzt ist. Drüben im mLab. Vielleicht ist es wieder tief drin. Ja, es gibt nicht den Benutzernamen und das Passwort und Login. Wir können nun unseren Benutzer aus mLab auswählen und dann admin auf true setzen. Klicken Sie auf unsere Datenbank. Wir brauchen die Sammlung des Benutzers. Klicken Sie auf das Symbol Bearbeiten. Also hier können wir sehen, ist admin auf false gesetzt. Wir können das ändern, um wahr zu sein. Klicken Sie auf Speichern und gehen Sie zurück. Das Eingehen in die Datenbank ist nicht etwas, das wir jedes Mal tun wollen, wenn wir einen neuen Admin erstellen möchten. Aber sobald wir einen Admin-Sets haben, wie wir es jetzt tun, wäre eine gute Herausforderung für Sie, etwas aus dem Admin-Bildschirm zu erstellen, um die Einstellung für das Hinzufügen neuer Admin-Benutzer ändern zu können. So, jetzt Barcodes das Projekt, während wir noch eingeloggt sind. Gehen wir zurück zu den Admin-Routen forward/admin. Jetzt haben isAdmin auf true gesetzt. Wir können sehen, dass wir nicht mehr umgeleitet und wir bleiben auf diesen Admin-Routen. Wenn wir nun versuchen, auf Abmelden zu klicken, wir dann zurück zur Homepage weitergeleitet. Denken Sie daran, dass wir auch diese fangen alle Routen mit dem Stern hinzugefügt. Versuchen wir hier ein paar verschiedene Routen. Also admin, weiterleitet/ fügt hinzu. Wir werden zurzeit auf die Homepage zurückgeführt. Versuchen wir, sich anzumelden, und testen Sie dies erneut. Melden Sie sich als Admin an. Jetzt können wir vorwärts/admin versuchen. Offensichtlich wird es dazu gehen, was gut ist. Noch einmal versuchen wir, sich anzumelden. Jetzt werden wir zurück auf die Homepage weitergeleitet. 58. Das Auftragsmodell: Willkommen zurück zu diesem brandneuen Abschnitt. In diesem Abschnitt geht es darum, dem Benutzer zu erlauben Buchungen und auch den Benutzerkontenbereich zu platzieren. Wo der Benutzer jede Buchung sehen kann, die er platziert hat. Wir werden dies auch zum Admin-Bereich hinzufügen, so dass der Administrator alle Buchungen sehen kann, die für alle Benutzer platziert wurden. Diese Buchung oder alle diese Informationen werden in einer Datenbank als Sammlung gespeichert. Daher müssen wir ein Bestellmodell erstellen, um unsere Daten zu speichern. Erstellen Sie zunächst eine neue Datei namens order.js über innerhalb des Models-Ordners, so modelliert neuen Ordner order.js. Dann können wir weitermachen und unser Modell erstellen, genau wie wir es für die Benutzer und auch für das Hotel haben. Schließen wir eine Sidebar. Dieses Modell wird drei Dinge haben. Zuerst die Benutzer-ID, so dass wir wissen, wer die Bestellung aufgegeben hat. Zweitens, die hotel_id für das Hotel, das ich buchen möchte, und dritte ist die Bestelldetails. Dies wird ein Objekt sein, das die Details der Abflugdaten, Anzahl der Flüge und die Anzahl der Gäste enthält. Wie üblich, erstellt unsere Konstante für Mongoose Paket, das wir oben in der Datei benötigen, also erfordern Mungo, okay? Dann können wir unsere Konstante für unser Bestellschema erstellen und neue Mongoose.Schema Kapital S befriedigend, die in unseren Objekten nimmt. Unser erstes Feld ist der Benutzer underscore_id. Diese Benutzer-ID wird den Typ von String haben. Es wird auch ein erforderliches Feld sein, also setzen wir erforderlich, um wahr zu sein, getrennt durch ein Komma. Unser zweites Feld wird für die hotel_id sein, die der Benutzer vorwärts gehen und buchen möchte. Das wird einen anderen Typ haben als das, was wir vorher gesehen haben. Dies wird gleich Mongoose.Schema.Types mit einem Großbuchstaben T und der Typ wird die ObjectSid sein. Die hotel_id wird diese ObjectID als Datentyp verwenden. Dies wird von Mungo zur Verfügung gestellt und wir werden es aus einem guten Grund später in diesem Abschnitt brauchen. Wir haben in der hotel_id gespeichert, die auf der Buchung ist, aber wir müssen auch die restlichen Hoteldetails aus der Datenbank abrufen. Verwendung dieser ObjectID anstelle einer normalen Zeichenfolge ermöglicht es uns diese ID richtig mit der zu vergleichen, die später in der Datenbank gespeichert ist. Macht dieses Feld muss auch erforderlich sein, um wahr zu sein. Dann wird unser drittes Feld für die Bestelldetails sein, die den Typ der Objekte enthalten wird, und dies muss auch dem echten Semikolon am Ende entsprechen. Dann können wir unser Modell mit unserem vertrauten module.exports exportieren, was unserem mongoose.model entspricht. Wir übergeben den Namen der Ordnung als den zweiten Wert, den dies in unserem Variablennamen des Orderschemas nimmt, das ist dieses, nur hier, also an einem Semikolon am Ende und geben diesem ein Speichern. Dies ist genug für unser Bestellschema, nächstes werden wir an die Arbeit, indem wir eine Buchungsbestätigungsseite erstellen, und dies ermöglicht es dem Benutzer, alle Details zu überprüfen, bevor er schließlich eine neue Bestellung aufgibt. 59. Buchungsbestätigungsseite: Im Moment können wir zu jedem Hotel gehen, das Sie wollen. Wählen Sie diese und dann unten unten können wir unsere Reise-Details hinzufügen. Wenn Sie dies buchen möchten, müssen wir die Dauer, die Abreisedaten, die Anzahl der Gäste hinzufügen und dann eine Suche durchführen, um alle Details zur Verfügung zu stellen. Wenn wir auf die erhaltene Suche klicken, wird dieses Suchergebnis nun mit allen Details personalisiert, die zentriert sind. Das ist gut, aber jetzt müssen wir noch einige Etappen hinzufügen , damit der Benutzer dieses Hotel buchen kann. Der erste Schritt, den ich hinzufügen möchte, ist die Schaltfläche Weiter zu dieser Seite, die den Benutzer zu einer Buchungsbestätigungsseite führt, auf der er seine endgültigen Details überprüfen kann, bevor er die Bestellung aufgibt. Dieses Hotel mit Blick auf das Hotel liegt innerhalb der Hotelmixins. Gehen wir zu dieser Datei im Texteditor. Sidebar, Mixins und dann unterstreichen Hotel. Unten unten. Scrollen Sie nach unten diese Datei, können wir bedingt eine Schaltfläche rendern, um nur auf den Ergebnissen Routen anzuzeigen. Dies sind die Routen, die derzeit auf und dann werden wir eine Schaltfläche Weiter direkt unter dem Gesamtpreis hinzufügen . Diese Gesamtkosten sind hier. Lassen Sie uns etwas Platz machen und wir können sagen, ob URL gleich /results. Wenn dies der Fall ist, können wir einen Link mit der Klasse der Schaltfläche zur Verfügung stellen, die eine href gleich haben wird und wenn es auf Ausschiffung Ticks ist. Dies ist /confirmation und dann unser dynamischer Abschnitt , der unsere Abfrage sein wird und dann der Text alle weiter für alle Schaltfläche. Für diesen Link werden wir es mit einer URL von /confirmation verknüpfen und dann Schrägstrich eine Abfragezeichenfolge weiterleiten, die es aus den für diese Buchung benötigten Informationen aufbauen wird. Diese Abfragezeichenfolge wird eine Reihe von Namenswertpaaren sein. Dies ist die gleiche Methode wie wir zuvor im Kurs verwendet haben, wenn wir die iTunes API verwenden. Lassen Sie uns diese Abfragezeichenfolge jetzt oben erstellen. Direkt über unseren if-Anweisungen können wir eine Konstanten namens Abfrage erstellen, es ist hier übereinstimmen und dies wird gleich einer dynamischen Zeichenfolge sein, also fügen Sie die hinteren Ticks hinzu. Wie bereits erwähnt, ist dies eine Reihe von Namenswertpaaren. Der erste wird der Hotelausweis sein. Lassen Sie uns die ID auf hotel._ id setzen. Denken Sie daran, dass all diese Informationen durchlaufen, entlang der URL als Abfragezeichenfolge übergeben und dann können wir diese Informationen greifen und sie in unserem Controller verwenden. Dann brauchen wir das kaufmännische Und-Zeichen, um ein zweites Namenswertpaar hinzuzufügen. Der zweite wird für die Dauer sein. Das kaufmännische Und-Zeichen, also Dauer und dies wird gleich der Suchanfrage sein , die wir vor kurz oben verwendet haben, um unsere Dauer, das Datum der Abreise und auch die Anzahl der Gäste zu erfassen . searchQuery.Duration, nach der Dauer, wird dies das Datum der Abreise sein und denken Sie daran, dass dies nur eine lange Zeichenfolge ist und diese wird gleich sein. Dies wird wieder die SearchQuery sein und genau wie wir es zuvor verwendet haben, ist dies searchQuery.DateOfDeparture. Danach können wir ein neues kaufmännisches Und-Zeichen hinzufügen, das für die Anzahl der Gäste gilt. Dies wird gleich searchQuery.numberOfGuests sein, fügen Sie am Ende ein Semikolon hinzu und all diese Informationen werden nun unsere URL bilden. Lassen Sie uns das im Browser ausprobieren. Speichern Sie diese Datei in unserem Browser und wenn Sie immer noch auf der Ergebnisseite scrollen, wie ich es bin. Laden Sie einfach den Browser neu, bestätigen Sie vor der Einreichung. Ich sehe jetzt eine Schaltfläche Weiter unten. Klicken Sie auf diese Schaltfläche. Wir werden auf eine Route gebracht, die wir noch nicht gehandhabt haben. Wir haben eine ganzseitige folgen wie erwartet. Aber wenn wir auf die URL schauen, können wir die Route sehen, die wir erstellt von /confirmation und dann unsere Serie oder Name-Wert-Paare. Wir haben die ID, die der Hotel-ID entspricht. Wir haben die Dauer von sieben Nächten, die Daten, und auch die Zahl der Gäste gleich vier zu finden. Dies sind alle Informationen, die wir brauchen, um eine Bestellung zu erstellen. Wie jeder bekannt ist, behandelt es diese Route in der index.jsfile. Lassen Sie uns zu den Routen index.js gehen und wir können diese Abfragezeichenfolge innerhalb einer Variablen namens Daten erfassen. In unseren Benutzerrouten beim Abmelden können wir router.get/confirmation/ hinzufügen und wir verwenden einen Doppelpunkt, da diese Daten dynamisch sind. Dies wird ein Benutzercontroller sein, ich werde die Funktion Buchungsbestätigung aufrufen. Dann über oder wir verwenden einen Controller. Wir erstellen diese Buchungsbestätigung und gehen direkt nach dem Abmelden nach unten. Also exportiert, also ist es Buchungsbestätigung. Dies wird eine Sync-Funktion sein. Da wir mit der Datenbank arbeiten werden, erstellt das Übergeben der Anforderungsantwort einen Funktionskörper, die Transaktion, den catch-Block, die Transaktion, den catch-Block, übergibt den Fehler und übergibt diesen Fehler auch an den nächsten. Da wir den nächsten Fehler verwenden, übergeben wir dies auch nach der Anfrage und Antwort. Das erste, was ich tun werde, ist die Abfragezeichenfolge von der URL zu erfassen. Denken Sie daran, dass wir über die request.params darauf zugreifen können, gefolgt von dem Namen, den wir ihm im Router gegeben haben. Im Trainingsbereich erstellen wir eine Konstante namens data, also request.params.data. Bevor wir weiter gehen, können wir überprüfen, welche Daten wir mit einem res.json haben. Also res.json, die Daten aus unserer Abfragezeichenfolge. Wenn wir diese speichern und jetzt aktualisieren, haben wir jetzt unsere ID, die Dauer, Datum der Abreise und die Anzahl der Gäste. Dies scheint die Daten von Einsen zu sein, aber es wird nicht in JSON-Formaten angezeigt. Es ist nur eine schlichte Schnur. Dies liegt daran, dass wir zuerst die Abfragezeichenfolge übergeben müssen. Node bietet uns ein Modul namens query string und dies ist ein Kernmodul. Wir müssen nichts extra installieren, alles, was wir tun, ist es in der Datei, in der wir es verwenden möchten. Lassen Sie uns zurück zum übermäßigen Controller gehen, bis zum Anfang der Datei und es erstellt eine neue Konstante namens querystring. Dann benötigen Sie das Modul, das Abfragezeichenfolge genannt wird. Jetzt können wir die Datenkonstanten übergeben, die wir unten erstellt haben und die Ergebnisse in einer neuen Konstante speichern, die ich Suchdaten nennen werde. Zurück zu unserer Buchungsbestätigung. Wir können direkt unter die Daten gehen, einige neue Konstanten erstellen. Ich suche Daten, die gleich unserer Abfragezeichenfolge sein werden, die wir gerade importiert haben. Verwenden Sie die.parse-Methode und analysieren Sie die Daten von oben. Jetzt können wir die Suchdaten innerhalb der res.json hinzufügen und sehen, was passiert. Geben Sie dies ein Speichern und laden Sie dann den Browser neu. Großartig. Wir haben jetzt die Daten in dem Format, mit dem wir arbeiten können. Derzeit haben wir nur die Hotel-ID in res.json gespeichert. Wir können nun die Datenbank für die vollständigen Hoteldetails mit dieser ID durchsuchen. Gehen wir zurück zu unserer Buchungsbestätigung. Unten werde ich Daten suchen, können wir eine Konstanten namens Hotel schreiben. Dies wird gleich sein, um auf unser Hotelmodell dot find zu warten und die Informationen, die wir finden möchten, ist das Hotel basierend auf der Unterstrich-ID. Die ID, die Sie in der Datenbank suchen möchten, wird in den Suchdaten gespeichert und dann können wir auf die.id zugreifen. suche data.id und benutzt hier ein H, da dies unser Modell ist. Denken Sie daran, bei der Erstellung unseres Bestellschemas , im letzten Video, Ich sagte, dass die Hotel-ID den Datentyp der Objekt-ID haben müsste. Deshalb haben wir dies im letzten Video gemacht. Diese ID wird nun korrekt mit einer Hotel-ID in der Datenbank verglichen, da sie, wenn es eine Zeichenfolge war, nicht funktionieren würde. Eines der Dinge auch, wenn wir über den Browser gehen, sehen wir das Hotel ist nicht definiert. Dies liegt daran, dass wir diese Hoteldatei auch importieren müssen. Gehen wir nach oben. Wir können sagen, es const des Hotels und dann können wir das Hotelmodell verlangen, so.. /models Ordner und /hotel. Jetzt können wir nach unten gehen und unsere res.json durch einen res.render ersetzen. Zurück zur Buchungsstruktur. Wir können rest.render hinzufügen. Wir werden eine Bestätigungsvorlage erstellen, also lassen Sie uns diese Informationen jetzt hinzufügen. Dann werden unsere Optionen Objekte in den Titel übergeben bestätigen Sie Ihre Buchung. Wir müssen auch die Daten an diese Vorlage übergeben. Wir möchten Ihnen die Hotel-Konstanten zuschicken, die alle Informationen aus dem Hotel enthalten, die bestellt wurden. Auch diese Suchdaten gerade hier, die die Informationen wie das Datum der Abreise enthalten. Hotel und auch die solchen Daten. Jetzt können wir in unsere Ansichten gehen und diese Bestätigungsvorlagen als Mops Datei erstellen. Öffnen Sie den Ordner Ansichten und erstellen Sie dann die bestätigung.pug, schließen Sie diese. Dies wird eine ziemlich einfache Vorlagen sein, die im Grunde das Hotel Mixin zusammen mit den Hoteldaten und den Suchdaten zeigen , die wir an die Mixin weitergeben werden. Dies gehen Sie in erweitert Layout. Wir werden aus dem Mixin-Ordner, den Unterstrich Hotelblock Inhalt einschließen . Die Ebene zwei Überschrift, die wird der Titel sein. Wir können dann eine Schleife mit jedem Auge im Hotel erstellen. Dann wie unser Hotel Mixin am unteren Rand, die ich aufnehmen wird, das ist jedes einzelne Hotel und auch die Suchdaten, die an diese Vorlage übergeben werden. Denken Sie daran, diese enthält Informationen wie die Anzahl der Gäste und das Datum der Abreise. Dies wird alles für die Bestätigungsseite benötigt. Wenn Sie uns die Rechtschreibung ändern und so umbenennen lassen, stellen Sie sicher, dass dies korrekt ist, und speichern Sie diese Datei. Jetzt in einem Hotel-Mixin, so unterstreichen Sie hotel.pug. Dieses Hotel erhält die Daten bereits von der Erstellung der Ergebnisvorlagen. Wir haben bereits das Hotel, das wir es an diese Variable als i und die Suchanfrage übergeben. Die meisten Dinge sind bereits für uns eingerichtet. Wenn wir diese Datei speichern und dann den Browser neu laden, sehen wir die Vorlage zeigt, wir haben alle Hoteldetails. Unten unten haben wir die Sternebewertung, wir haben das Land, die Kosten pro Nacht und den Namen des Hotels. Aber wir sehen keine der Suchdetails wie die Anzahl der Nächte. Schauen wir uns das im Mixin an. Wenn wir nach unten scrollen und wir einen Blick auf den Ergebnisabschnitt werfen, hat dieses Mixin alle SearchQuery-Details, die wir brauchen, bedingt gerendert. Diese werden nur angezeigt, wenn die Routen mit /results beginnen. Wir können auch bis zum Ende die Bestätigung Routen ihn hinzufügen. Wenn die URL den Ergebnissen entspricht oder wenn es die Seite ist, die wir derzeit sind, das ist Bestätigung und dann unsere dynamischen Daten. Wir können überprüfen, ob die URL.startsWith. Wir möchten, dass dieser mit einem /confirmation/beginnt. Dann laden Sie auf der gleichen Seite und jetzt, wenn wir nach unten scrollen, sehen wir diese Suchdetails auch unten erscheinen. Wir haben jetzt fast fertig für diese Vorlagen. Aber es gibt noch eine kleine Sache hinzuzufügen. Dies soll die Buchungsbestätigungsseite sein, um zu bestätigen, dass die Benutzerdaten vor der Bestellung korrekt sind. Daher benötigen wir eine Schaltfläche, damit der Benutzer tatsächlich die Bestellung wieder im Hotelmixin aufgeben kann. Wir haben nur eine Fortsetzungsschaltfläche unten für die Ergebnisseite. Wir können auch eine für die Bestätigungsseite zwei hinzufügen. Sonst wird dies ein else if Abschnitt, weil wir einen letzten Abschnitt unten unten haben werden. Wir werden uns das in einem späteren Video ansehen. Es ist URL.startsWith, wir wollen die Runden von /confirmation/. Wir werden dann eine Schaltfläche wie oben rendern, also eine.button (href=' ') und ich werde dies nur als leere Zeichenfolge für jetzt belassen und wir werden uns später damit beschäftigen. Geben Sie Ihre Bestellung auf und wir werden diesen href Abschnitt im nächsten Video fortsetzen , wo wir den Code bitten, die Bestellungen aufzugeben. Aber jetzt, wenn wir diese Datei speichern und dann auf den Bestätigungsrouten neu laden, sehen wir jetzt eine Schaltfläche unten für die Bestellung. Gut, die Dinge gehen jetzt gut voran. Wir sehen uns im nächsten Video, wo wir die Bestellungen in der Datenbank aufgeben werden. 60. Platzierung von Bestellungen: Der nächste Schritt, sobald der Kunde die Details auf dieser Bestätigungsseite überprüft hat, besteht darin, tatsächlich eine Bestellung aufgeben zu können. In der Hotelmischung haben wir die Route hinzugefügt, die wir brauchen, um die Bestellung aufzugeben. Wir gehen zum _hotel, und dann unten unten haben wir eine leere Route für die href hinzugefügt. Ich werde dies jetzt als Schrägstrich hinzufügen, dann Reihenfolge platziert, und dann Schrägstrich, wir können unsere Abfrage hier hinzufügen. Öffnen Sie die geschweiften Klammern und analysieren Sie auch die Abfrage, die alle Daten sind, die wir für die Bestellung benötigen. Aber nur eine schnelle Sache, um zuerst zu beheben, wir wollen nur, dass diese Schaltfläche angezeigt wird, wenn der Benutzer angemeldet ist. Wir können eine Form des bedingten Renderings verwenden. Nach dem sonst, wenn wir auch einen if Abschnitt hinzufügen können. Wenn der Benutzer eingeloggt ist, möchten wir dann diese Schaltfläche anzeigen, also rücken Sie diese in einer Ebene ein, sonst können wir den Benutzer auf den Anmeldebildschirm umleiten. Fügen wir den letzten Else-Abschnitt unten unten hinzu, sonst werde ich diese Schaltfläche kopieren und dann einfügen, und dies kann den Benutzer zurück zum Schrägstrich Login umleiten, wo er vorwärts gehen und sich anmelden kann, um eine Bestellung aufzugeben. Bitte melden Sie sich bei der Bestellung an. Es gibt Raum für Verbesserungen hier, wenn Sie ein wenig Nebenprojekte wollten. Bei der Umleitung zu diesem Anmeldeformular werden derzeit nicht alle Suchdetails gespeichert. Der Benutzer müsste sich einloggen und dann die Hotelsuche erneut durchführen. Aber ich werde Ihnen das als Herausforderung überlassen, wenn Sie das tun möchten. Nun, rüber zur index.js. Wir können diese Bestellung platziert Route behandeln. Speichern Sie diese Datei, index.js. Dann können wir einen router.get addieren, das umdrehen, um es einfach zu erstellen, die Reihenfolge wurde Schrägstrich gesetzt, und dann werden wir die Daten noch einmal aus der Abfragezeichenfolge erfassen. Die UserController.OrderPlaced und das Semikolon am Ende. Dann erstellen wir die Reihenfolge, die im UserController platziert wird. Kurz nach der Buchungsbestätigung, lassen Sie uns dies einrichten, exports.OrderPlaced. Dies wird asynchron, Anfrage, die Antwort und auch als nächstes sein. Ich werde versuchen, zu Beginn zu blockieren. Wir können dann alle Fehler abfangen und diese Fehler dann auf den nächsten analysieren. Genau wie wir oben für die Buchungsbestätigung getan haben, ist das erste, was wir tun müssen, eine Konstante zu erstellen und die Daten aus den req.params zu erfassen. In der Tat können wir diese Zeile einfach kopieren, den try-Block einfügen, und dann müssen wir auch das Abfragezeichenfolgenmodul verwenden, das wir zuvor verwendet haben, um die Daten in JSON zu analysieren. Also lassen Sie uns dies als eine Konstante einrichten, parsedData, dies wird gleich unserem Abfragezeichenfolgenmodul sein, das wir importiert haben. Nun, um die geparste Methode zu verwenden, die Daten von oben analysieren. Jetzt ist es an der Zeit, unser Auftragsmodell zu verwenden, das wir am Anfang dieses Abschnitts erstellt haben , um eine neue Ordnung zu erstellen, die in die Datenbank verschoben werden soll. Blase unsere parsedData, dann erstellen Sie unsere Konstante der Ordnung. Ich habe dies auf eine neue Reihenfolge gesetzt, die O. Bevor wir dieses Bestellmodell O verwenden können, müssen wir es oben in dieser Datei benötigen. Dies muss O sein, und dann oben nur stopfen, dass unser Hotel und erstellen Sie eine neue Konstante namens Ordnung. Erfordern Sie aus dem Ordner Modelle, .. Schrägstrich Modelle ist, und dann Schrägstrich Reihenfolge. Diese Reihenfolge, die wir erstellen, muss dieselbe Struktur aufweisen wie das Auftragsmodell, das wir am Anfang des Abschnitts erstellt haben. Wenn wir zu dieser order.js gehen, hat dies drei verschiedene Felder, die Benutzer-ID, die Hotel-ID und auch die Bestelldetails. Zuerst fügen wir die Benutzer-ID in unsere Bestellung nur hier hinzu, so dass user_id gleich einem req.user sein wird. _id. Dann wird die Hotel-ID, hotel_id, dies wird gleich der parsedData.id sein. Dann schließlich die Bestelldetails, die den Typ von Objekten hat, also order_details, dann könnten wir dies als Objekt einrichten, genau wie wir in den Bestelldetails angegeben haben. Diese Bestelldetails enthalten alle unsere Informationen aus unserer Abfragezeichenfolge, die innerhalb der geparsten Daten gespeichert ist. Die erste ist die Dauer, die gleich parsedData.Duration ist. Die zweite ist das Datum der Abreise. Auch dies ist gleich der ParsedData, und wir können darauf mit.DateOfDeparture zugreifen. Der dritte und letzte ist die Anzahl der Gäste, die gleich parsedData.numberOfGuests sein wird. Dies sind alle Informationen, die unsere Bestellung bilden, wir haben die Hoteldetails und auch die Bestelldetails zusammen mit dem Benutzer. Jetzt müssen wir nur speichern für diese Bestellung aufrufen, so dass wir auf die order.save warten können, und dann nach dem Speichern können wir auch eine Flash-Nachricht hinzufügen, um den Benutzer wissen zu lassen, dass die Bestellung platziert wurde, also request.flash. Dieser Nachrichtentyp wird Info und eine Textzeichenfolge sein, also wird dies sein: „Danke. Ihre Bestellung wurde aufgegeben.“ Dann ist das letzte, was zu tun ist, dann eine reg.redirect hinzuzufügen, die den Benutzer zu seinem Konto umleitet, also reg.redirect zu einer Route von my-account. Diese Route ist noch nicht erstellt worden, aber wir werden sehr bald darauf einsteigen. Drüben im Browser, und dann können wir voran gehen und das testen. Speichern Sie diese Datei, über im Browser. Nur Bestätigungsseite im Moment mit dem Button der Bestellung aufgeben. Jetzt, wenn wir neu laden, sehen wir jetzt die Schaltfläche geändert wurde, bitte melden Sie sich an, um zu bestellen. Lassen Sie uns darauf klicken, und dann gehen wir voran und loggen uns ein. Einmal eingeloggt, können wir jetzt zu einem Hotel gehen. Gehen wir runter auf den Grund. Wir können eine Suche machen. Lassen Sie uns zur Anzahl der Gäste gehen. Klicken Sie auf „Suchen“. Wir werden nun auf die Ergebnisseite weitergeleitet, die unsere Details enthält, wir würden weiter zur Bestätigungsseite, die wieder alle Details aus der Bestellung enthält. Klicken Sie dann auf Bestellung aufgeben. Wir werden jetzt auf mein Konto genommen und wir erhalten auch die Flash-Nachricht Ihrer Bestellung aufgegeben wurde. Wenn wir nach unten scrollen, erhalten wir auch eine Folge für Nachricht. Aber das ist noch nichts, worüber man sich Sorgen machen muss. Wir gehen weiter und erledigen diese Route bald. Aber wenn wir jetzt zu mLab gehen und zu unserer Datenbank gehen, innerhalb der Sammlungen, haben wir jetzt eine Bestellsammlung mit einem Dokument. Lasst uns das öffnen und sehen, was es enthält. Erweitern Sie die Ansicht. Gut. Es gibt unsere ID für die Bestellung, haben die ID für den Benutzer, und auch für das Hotel. Wir haben auch die Bestelldaten für die Dauer, das Datum der Abreise und auch die Anzahl der Gäste. Das ist großartig. Wir können nun mit dem nächsten Video fortfahren, wo wir den neuen Benutzerkontenbereich erstellen, wo der Benutzer alle Buchungen sehen kann, die er gemacht hat. 61. Benutzerkontenbereich: Nachdem wir die neue Bestellung aufgegeben haben, werden wir zu diesem Abschnitt „Mein Konto“ weitergeleitet , den wir noch nicht eingerichtet haben. Das ist, was wir in diesem Video voran gehen und behandeln werden. Der Bereich „Mein Konto“ wird ein persönlicher Bereich sein, in dem der angemeldete Benutzer alle Bestellungen sehen kann, die er aufgegeben hat. Kurz bevor wir dies tun, müssen wir auch einen neuen Benutzer registrieren, um zu testen, die Dinge funktionieren. Gehen wir, um sich abzumelden und Sie können sich als neuer Benutzer anmelden. Fügen wir dies einfach als Tests hinzu. Ich werde es als Passwort testen und bestätigen. Gut, wir haben uns nun als Testbenutzer angemeldet. Jetzt müssen wir weitermachen und eine neue Bestellung für jedes Hotel aufgeben. Gehen wir für das hier. Klicken Sie hier. Dann können wir alles hinzufügen, was wir wollen, um eine Bestellung aufzugeben. Da gehen wir. Suchen Sie danach, fahren Sie bis zur Bestätigung und geben Sie die Bestellung auf. Wenn wir jetzt zu mLab gehen, sollten wir nun zwei Datensätze innerhalb der Bestellsammlung sehen. Es gibt zwei Bestellungen von zwei verschiedenen Benutzern. Dies gibt uns jetzt einige Informationen, mit denen wir arbeiten können, damit wir wissen, was zu tun ist. Jetzt müssen wir zuerst auf die index.js gehen und dann können wir diesen Abschnitt Mein Konto behandeln, also index.js und lässt dies auch zu den Benutzerrouten hinzufügen, so router.get, meine-Konto, dies wird auch vom Benutzercontroller behandelt werden. Dann gehen wir weiter und erstellen MyAccounts, so ist es der Benutzer-Controller. Wir können das jetzt einrichten. Nur für ist admin, exports.MyAccounts. Dies wird asynchron sein, Anfrage, Antwort, und auch als nächstes, unser Abschnitt versuchen, alle Fehler abzufangen und dann an den nächsten übergeben. Wenn wir das einrichten, könnten wir weitermachen und so etwas tun wie das, was wir uns angesehen haben. Zum Beispiel könnten wir const Aufträge gehen. Wir haben das schon oft benutzt. Die Benutzer, die Bestellungen und auch für die Hotels. Wählen Sie die Bestellungen.Suchen. Dann könnten wir diese Find Methode verwenden, um die User_ID mit den Informationen aus der request.user abzugleichen . _ID. Dann können wir eine res.json tun, um die Aufträge auszugeben. Über zum Browser, immer noch nur in MyAccount, können Sie „Reload“ drücken. Sehen Sie sich nun die JSON für die Ergebnisse an. Das funktioniert gut. Wir sehen die eine Buchung von diesem bestimmten Benutzer, also haben wir diese Benutzer-ID. Wir haben auch die Bestelldetails für die einzelne Bestellung, die aufgegeben wird. Das kleine Problem ist, dass wir dem Benutzer wahrscheinlich die Hoteldetails wie den Namen und das Ziel innerhalb seiner Konten zeigen möchten . Aber derzeit haben wir nur diese Hotel-ID, die der Benutzer nicht erkennen würde. Im mLab haben wir verschiedene Kollektionen. Gehen wir zu unserer Datenbank. Wir haben die Hotels, die Bestellungen, die Sitzungen und die Benutzer. Diese ID, die wir derzeit haben, ist in der Bestellabholung der Datenbank, aber die Hoteldetails in der Hotelsammlung. Grundsätzlich brauchen wir eine Möglichkeit, die Hoteldetails aus einer anderen Kollektion zu erfassen. Wir können dies tun, indem wir die Nachschlagephase aus der Aggregationspipeline von Mongo verwenden. Zurück zum Abschnitt MyAccount können wir die Konstante der Bestellungen wiederverwenden. Aber dieses Mal werden wir order.aggregate schreiben, also lassen Sie uns einfach diesen Abschnitt hiere.aggregate und dann plus entfernen. Wir müssen immer noch nach dem Benutzer filtern. Wir können das in der Spielphase tun. Öffnen Sie die geschweiften Klammern, $ Symbol übereinstimmen genau wie wir zuvor verwendet. Dann werden wir die user_id Übereinstimmungen auf die request.user.id schreiben. Dadurch werden nur Datensätze erfasst, bei denen die Benutzer-ID mit dem aktuell angemeldeten Benutzer übereinstimmt. Fügen Sie am Ende ein Komma hinzu und dann können wir die Nachschlagephase mit $ Symbol Lookup hinzufügen. Zuerst müssen wir die Sammlung angeben, von der wir die Daten erhalten möchten. Derzeit sind wir in der Bestellung Sammlung, aber wir wollen die Daten aus der Sammlung des Hotels zu holen. Wir können dies tun, indem wir von hinzufügen, und dann als eine Zeichenfolge, können wir im Namen unserer Sammlung hinzufügen, die Hotels ist. Als nächstes ist das lokale Feld, das wir es an die Hotel_ID senden werden. Lokales Feld ist der Feldname aus unserer Auftragssammlung, im Grunde als die Eingaben betrachtet wird. Hotel-ID befindet sich in unserer Datei order.js. Es ist dieser Moment, den du hier siehst. Fügen Sie ein Komma am Ende und dann danach können wir die folgenden Felder hinzufügen, und setzen Sie dies auf eine Zeichenfolge von Unterstrich ID. Dies ist das Feld der Unterstrich-ID aus der Hotelkollektion , mit der wir übereinstimmen werden. Diese Hoteldaten, auf die wir abgestimmt haben, werden unseren Bestellungen als Array hinzugefügt. Jetzt geben wir diesem Array-Feld einen Namen unserer Wahl. Wir verwenden die als Schlüsselwörter und geben ihm dann einen Namen von hotel_ Daten. Nun, wenn wir diese Datei speichern und dann zum Browser gehen, können wir den JSON aktualisieren. Jetzt haben wir das neue Feld der Hoteldaten und das erfasst alle Hotelinformationen von diesem Hotel-ID, aber aus einer anderen Sammlung. Das bedeutet, dass wir jetzt Zugriff auf alle Hoteldaten haben und diese innerhalb unserer Vorlagen verwenden können. Gehen wir zurück zum Controller und erstellen Sie diese Vorlage jetzt ersetzen die res.json. Wir können diese Zeile hier entfernen und sie durch einen Rest von rendern ersetzen , um eine neue Vorlage von user_accounts auszugeben. Danach gehen wir in unsere Optionen. Der Titel meiner Konten und auch die Bestellinformationen. Speichern Sie dies, und dann können wir unsere user_account Vorlagen innerhalb unserer Ansichten mit der.pug Erweiterung erstellen . Dann gehen Sie weiter und fügen Sie den Inhalt hinzu. Im Inneren beantworten wir das vertraute erweitert Layout, Blockinhalt, die Ebene 2 Überschrift des Titels und die horizontale Linie, nur um den Titel von der Konstante zu trennen. Ich werde eine if-Anweisung hinzufügen, um zu überprüfen, ob der Benutzer angemeldet ist. Wenn es ist, können wir dann gehen und gibt eine Ebene 3 Überschrift und die hinteren Ticks aus, da dies dynamisch mit der Nachricht von Hi, dann ein Komma, dann können wir den Namen des Benutzers ausgeben, indem Sie user.first_name auswählen. Dies wird etwas sagen wie „Hi Chris“ mit einem Ausrufezeichen am Ende. Dann werden wir überprüfen, ob irgendwelche Bestellungen in der Datenbank vorhanden sind. Wir können sagen, ob orders.length größer als 0 ist. Dieser Abschnitt wird nur angezeigt, wenn Bestellungen vorliegen. Dann fügen wir eine Überschrift der Stufe 3 mit dem Text Ihrer Buchungen und für alle Buchungen hinzu. Wir werden alle Bestellungen in der Datenbank für diesen bestimmten Benutzer durchlaufen und dann werde ich sie in eine ungeordnete Liste setzen. Wir werden durch jede Reihenfolge in Bestellungen durchlaufen, ich werde dies in einem div mit der Klasse der Buchungen umgeben, damit wir CSS später hinzufügen können. Dann können wir unsere ungeordnete Liste erstellen. Wir listen zuerst Artikel, die über die hinteren Ticks geht, so dass der Text der Bestellung ref. Dann können wir die Bestellreferenz hinzufügen, die in der Reihenfolge gespeichert wird. _id. Unter diesem ersten Listeneintrag, der für die Bestellnummer steht, erstellen wir dann eine zweite Schleife, die durch unsere Hoteldaten läuft. Denken Sie daran, die Hoteldaten ist dieses Array, das wir am Ende hinzugefügt haben. Sobald wir in dieser bestimmten Reihenfolge sind, müssen wir auch durch diese Hoteldaten schleifen , um alle Informationen innerhalb von hier zugreifen. Um dies zu tun, erstellen wir eine neue Schleife mit jedem und wir sagen Daten in order.hotel_data. Alles, was wir jetzt tun werden, ist fünf verschiedene Listenelemente zu erstellen , die für das Hotel, das Land, das Abreisedatum, die Anzahl der Nächte und auch die Anzahl der Gäste. Lassen Sie uns unseren ersten Listeneintrag hinzufügen. Das Hotel wird gleich data.hotel_name sein. Die Daten beziehen sich auf alle Daten in diesem Hoteldatenabschnitt. Wir greifen dann auf die einzelnen Schlüssel wie Hotelname, das Land und die Kosten pro Nacht. Habe den Hotelnamen, schließe die hinteren Zecken ab und dann wollte ich das noch vier Mal duplizieren. Die zweite ist für das Land und dann data.country. Der dritte wird die Abreise sein. Das Abreisedatum liegt nicht in diesen Hoteldaten. Dies ist Teil unserer ursprünglichen Informationen hier, so dass wir auf diese mit allen details.DateOfDeparture zugreifen können . Lassen Sie uns diesen Abschnitt entfernen, greifen Sie auf unsere ursprüngliche Reihenfolge zu, die die erste Schleife oben hier ist, also order.order_details.DateOfDeparture. nächste ist für die Anzahl der Nächte. Kopieren wir diesen Abschnitt hier und fügen Sie ihn dann ein. Alles, was wir tun müssen, ist das Datum der Abreise zu ändern, um die Dauer zu sein. Schließlich wird der letzte für die Anzahl der Gäste sein. Wir können dies entfernen und durch die Order_details.numberOfGuests ersetzen. Dieser Abschnitt wird angezeigt, wenn es Buchungen gibt, indem Sie diese if-Auszüge verwenden. Wenn dies nicht der Fall ist, müssen wir einen anderen Abschnitt unten auf der gleichen Ebene hinzufügen. Dies wird nur eine Überschrift der Ebene 3 mit dem Text angezeigt, der keine Bestellungen angezeigt werden soll. Dann werden wir sagen, aber... Dies ist für alle Buchungsabschnitte. Denken Sie daran, oben haben wir überprüft, ob der Benutzer anwesend war. Wir können auch eine else-Anweisung für den Abschnitt 2 hinzufügen. Ganz unten können wir dies auf der gleichen Ebene wie die if-Anweisungen hinzufügen. Stellen Sie sicher, dass diese aufgereiht sind, dann können wir eine zweite Überschrift der Ebene 3 hinzufügen, die einfach sagt: „Bitte loggen Sie sich ein, um diesen Abschnitt anzuzeigen.“ Jetzt zum Browser, denken Sie daran, diesen JSON durch den Rest des Renders zu ersetzen. Jetzt können wir einfach den Bereich „Mein Konto“ aktualisieren, nach unten scrollen und diese Details unseres Testbenutzers. Diese Buchung ist das Hotel Nummer 6, so dass dies gut ist. Lassen Sie uns ausloggen und wir können unseren anderen Benutzer versuchen. Lassen Sie uns einloggen. Jetzt können wir in Mein Konto Bereich gehen, also /my-account, scrollen Sie nach unten, und das ist Hotel Nummer 2, also ist dies eine andere Reihenfolge als wir kurz zuvor gesehen haben. Wir erhalten jetzt die richtigen Bestellungen für den richtigen Benutzer. Nur um die Dinge zu beenden, können wir über das Layout des Profils und andere mit diesem Abschnitt Mein Konto verknüpft gehen. Öffnen Sie die Seitenleiste, gehen Sie zum layout.pug. Direkt über diesem Abmeldelink können wir ein neues Listenelement auf der gleichen Ebene hinzufügen. Fügen Sie einen Link mit der href hinzu und dies geht zu meine-Konten mit dem Text meiner Buchungen/Konten. Speichern Sie dies, schließen Sie die Seitenleiste und dann neu laden und haben Sie jetzt eine Schaltfläche und nehmen Sie diese auf den Kontobereich. Mit diesem jetzt funktioniert, als nächstes werden wir einige Arbeit in der Admin-Ansicht, damit der Administrator eine vollständige Liste der Buchungen von allen Benutzern sehen kann. 62. Anzeigen aller Bestellungen: Im letzten Video haben wir einen Account-Bereich erstellt, in dem der Benutzer seine eigenen Buchungen sehen kann. Setzt uns in admin, wir wollen in der Lage sein, alle Buchungen zur Verfügung, um für alle Benutzer zu sehen. Wenn wir uns als Admin anmelden und dann zum Schrägstrich Admin gehen, haben wir bereits diese Admin-Ansicht für uns zur Verfügung. Früher haben wir beim Erstellen dieser Seite auch einen Menüpunkt namens „Buchungen anzeigen“ hinzugefügt, Sie jetzt nutzen können. Dies ist in der Datei admin.plug vorbei. Also lassen Sie uns dies öffnen, innerhalb von mehr Ansichten, so klicken Sie auf die admin.pug, und hier gehen wir, dies ist die Ansicht Buchung Abschnitt, die Links zu Schrägstrich admin weiterleiten, Schrägstrich Bestellungen. Also jetzt müssen wir zur Datei index.js gehen und diese Route jetzt behandeln. Lassen Sie uns diese Route kopieren, schließen Sie sie, ich werde mehr dieser Dateien schließen, gehen Sie zur index.js und halten Sie diese organisiert. Ich gehe zurück zum Admin-Bereich. Dies sind also die Admin-Routen und fügen Sie dann router.get hinzu, da dies eine Get-Anfrage ist. Und fügen Sie dann die Zeichenfolge von admin Schrägstrich Reihenfolge ein, dies wird auch den Benutzercontroller verwenden, dann werden wir alle Bestellungen innerhalb des Benutzercontrollers erstellen. Also geben Sie dieser Datei ein Speichern. Lässt den Kopf über den Benutzer controller.js. Also wird diese ganze Bestellabschnitt sehr ähnlich zu meinem Account Abschnitt sein , den wir im letzten Video erstellt haben. So können wir diesen vollständigen Abschnitt von vorher kopieren und dann direkt unten einfügen. Wir müssen meine Konten ändern, um alle Bestellungen zu sein. Der Hauptunterschied zwischen diesem und dem Abschnitt „Mein Konto“ besteht darin, dass wir diese Menge von der Aggregationspipeline nicht benötigen. Dies liegt daran, dass wir nicht zu viel für einen bestimmten Benutzer benötigen, wir können einfach alle Bestellungen innerhalb unserer Datenbank nachschlagen. So können wir diese Übereinstimmungsphase aus unserer Bestellung entfernen, wir müssen auch die Vorlage in eine Vorlage namens Bestellungen geändert werden, und wir werden diese bald und den Titel aller Bestellungen erstellen. Das sind alle Änderungen, die wir vornehmen müssen. So jetzt können wir die Bestellvorlage innerhalb unserer Ansichten erstellen, müssen wir Bestellungen dot Mops erstellen. Also, um zu beginnen, können wir die Layouts erweitern, Inhalt blockieren, den Titel als Ebene 3 Überschrift, eine horizontale Linie übergeben. Unter dieser horizontalen Linie möchten wir die Aufträge anzeigen. Denken Sie daran, aus dem letzten Video, wir haben bereits den Code hinzugefügt, um die Bestellungen innerhalb dieser Benutzerkonto.pug-Datei anzuzeigen. Wenn wir also die Benutzerkonten öffnen, ist dies der gleiche Code, den wir hier haben, um die Bestellung anzuzeigen. Anstatt all dies noch einmal auszugeben, wäre es sinnvoll, dies zu einem Mixin hinzuzufügen. Lassen Sie uns kopieren, oder in der Tat werden wir nur Informationen aus dem Listenelement schneiden, die Anzahl der Gäste, bis zu dieser Buchung, wenn an der Spitze. Wir schneiden das in die Seitenleiste, innerhalb der Mixins können wir eine neue Datei erstellen, und diese wird Unterstrich orders.pug genannt. Dieses Mixin wird so erstellt, wie wir es immer mit dem Namen an der Spitze tun, also mixin Reihenfolge. In der Tat werden wir diese Aufträge nennen, die in der einzelnen Reihenfolge nehmen wird. Dann in einer Ebene eingerückt, können wir in der Buchung von vorher einfügen. Stellen Sie sicher, dass dies alles korrekt eingerückt ist, andernfalls erhalten wir einige Fehler. Jetzt müssen wir nur dieses Mixin in unsere beiden Dateien hinzufügen, beginnend mit dem Benutzerkonto. Wir schneiden das einfach von vorher aus. An der Spitze können wir Mixin einschließen, die sich im Mixins-Ordner befindet, und dann unterstrichen Reihenfolge. Dann scrollen Sie nach unten wir können jetzt unser Mixin hinzufügen. Wir möchten, dass dies auf dem Bildschirm erscheint, so dass wir nur unsere Schleife gestopft haben, wir können Bestellungen hinzufügen. Ich werde die individuelle Reihenfolge von unserer Schleife übergeben, diese Datei speichern und dann können wir dasselbe für die order.pug-Datei tun. Also wählen wir dies aus, oben können wir unser Mixin einschließen, also mixins Schrägstrich _orders, dann unter der horizontalen Linie können wir unsere Schleife erstellen, genau wie wir es in den Benutzerkonten getan haben. Jede Bestellung in Bestellungen, dann können wir unsere Bestellungen mixin hinzufügen, die in der individuellen Reihenfolge aus unserer Schleife nimmt. Geben Sie dieser Datei ein Speichern, zurück an den Administrator. Wir können jetzt auf Ansicht Buchungen unten unten klicken, die uns zu den relativen Admin Schrägstrich Bestellungen führt, scrollen Sie nach unten, und jetzt können wir zwei verschiedene Bestellungen von zwei verschiedenen Benutzern sehen. Wir sind nicht nur als Admin eingeloggt und alle Bestellungen sehen können, sondern haben auch einen eigenen Account-Bereich an der Spitze. Lassen Sie uns auch darauf klicken, und jetzt, wenn wir nach unten scrollen, sollten wir nur unsere eigenen Ehren sehen, aber wir haben eine 404 von nicht gefunden. Wir können sehen, dass es ein Problem an der Spitze gibt. Wir können es verknüpfen, um Schrägstrich admin Schrägstrich meine Konten weiterzuleiten, und wir wollen nicht, dass dieser Admin-Abschnitt im Inneren hier. Wir müssen nur auf mein Konto gehen. Lassen Sie uns zum Layout des Mops gehen, wir brauchen nur einen Schrägstrich vor meinen Konten. Ich sollte es noch einmal versuchen, klicken Sie auf meine Buchungen, jetzt haben wir nur die einzige Buchung für Chris Konto, und wieder, wenn wir zu Admin gehen, gehen Sie nach unten zu Buchungen anzeigen. Da wir Admin sind, können wir auch die Bestellungen anderer Leute sehen. Zusammen mit diesem bedeutet dies auch, dass unser Mixin auch gut funktioniert, da wir jetzt diese Bestellinformationen in zwei separaten Dateien sehen. Dies ist es jetzt für die Anzeige aller Bestellungen innerhalb des Admin-Bildschirms. Im nächsten Video gehen wir zurück zu unserem Styling, indem wir einige endgültige CSS hinzufügen. 63. Endgültiges CSS: Es ist schon eine Weile her, seit wir mit unserem Styling gearbeitet haben. Nehmen wir uns also einige Augenblicke Zeit, um einige Anpassungen vorzunehmen, insbesondere an den Funktionen, die wir in den letzten Abschnitten hinzugefügt haben. Ich werde nicht viel zusätzliches CSS hinzufügen. Sie können noch weiter gehen, wenn Sie jetzt wollen, was ein paar kleine Änderungen machen, beginnend mit den Schaltflächen. So haben Sie wahrscheinlich schon bemerkt, wenn wir zu einem Hotel gehen, und dann, wenn wir eine Suche nach dem Datum, Anzahl der Gäste, sobald wir durch die Ergebnisseite genommen haben, haben wir diesen Button nur hier für fortfahren. Wir haben auch eine Schaltfläche zum Aufgeben der Bestellung. Das erste, was ich anfangen werde, sind diese Knöpfe hier. Also lasst uns zur style.css gehen. Also gehen wir in den Öffentlichen Ordner, die auf diese unten schließen. Also der öffentliche Ordner. Dann müssen wir in die Stylesheets und dann die style.css gehen. Also innerhalb dieser Datei und auch außerhalb der Medienabfrage können wir unser Button-Styling hinzufügen, also lassen Sie uns zu unserer Medienabfrage scrollen, die gerade hier ist. Wir können dafür sorgen, dass wir draußen sind. Also knapp unter der Taste klein, werde ich die Buttonklasse hinzufügen, die sich in unserem HTML befindet. Wir können eine Hintergrundfarbe hinzufügen. Ich möchte festlegen, dass der Geist Kadettenblau ist, und ein kleiner Grenzradius, alle fünf Pixel. Auch eine kleine Polsterung von 0.5em. Speichern Sie das. Nachladen. Jetzt sieht unser Knopf viel schöner aus. Wenn wir nun auf die Kontoseite gehen, indem Sie auf einen Link oben klicken. Diese Buchungsliste, die du in den letzten Videos hinzugefügt hast, muss auch etwas Arbeit haben. Dies war innerhalb der ältesten mixins orders.pug Datei. Dies hat ein Mixins namens _orders. Gehen wir also zu den Mixins und öffnen Sie diese Datei. Dieses Mixin war mit einem div mit der Klasse der Buchungen umgeben, die wir jetzt im CSS verwenden können. Sparkle an die style.css. Lassen Sie uns noch einmal, fügen Sie diese außerhalb der Medienabfrage hinzu, so zielen Sie die Buchungen ul. Ich werde etwas Rand von 2em, oben und unten undNull nach links und rechts hinzufügen oben und unten und . Die Hintergründe, wieder von Kadett blau. Auch ein kleiner Füllwert von 10 Pixeln. Also lasst uns das retten. Laden Sie meinen Kontobereich neu. Als nächstes wollen wir die einzelnen Listenelemente ausrichten und diese auf Blockebene einrichten, so dass sie übereinander gestapelt sind. Also nach den Buchungen ul. Lassen Sie uns Buchungen hinzufügen li. Legen Sie den Anzeigetyp auf Block fest. Der Hintergrund, so hebt sich dieser vom Kadettenblau ab. Ich werde einen grauen Wert von eee und auch etwas Polsterung von 0.5em hinzufügen. Mal sehen, wie das im Browser aussieht. Fügen Sie ein s hinzu. Also werde ich nicht zu tief in dieses Styling gehen, da viel von persönlichen Vorlieben abhängt. Aber das Letzte, was ich ändern werde, sind die Flash-Nachrichten. Diese befinden sich neben der Datei layout.pug. Gehen wir also rüber und scrollen Sie nach unten zu unserem Nachrichtenbereich, der gerade hier ist. Wir sehen eine Klasse von Nachrichten, die auf das div angewendet wird, das unsere allgemeine Nachrichten-Styling hält. Dann auch eine dynamische Klasse von Nachrichtenunterstrich. Dies wird entweder Info, Erfolg oder Fehler sein. Mit diesen Klassennamen können wir verschiedene Farben für jeden Nachrichtentyp erstellen. Zum Beispiel rot für einen Fehler. Auch darunter gibt es eine Spanne mit der Klasse der Schließen-Schaltfläche. Dies kann auch verwendet werden, um das Kreuz zu formatieren, wodurch die Nachricht entfernt wird. So auf das Styling. Also wir wieder, außerhalb der Medienabfrage, starten wir mit der.message. Dies war für unsere allgemeinen Nachrichtenstile. Also ein Rand von zehn Pixeln oben und unten, Null links und rechts ein kleiner Füllwert von 0.5em, ein Rand von einem Pixel und eine durchgezogene Linie, ein Grenzradius und eine durchgezogene Linie, von fünf Pixeln. Auch die Schriftgröße 1.2em sein. Speichern Sie das. Lassen Sie uns versuchen, nach draußen zu schauen. Das sieht nun ein bisschen besser aus. Lassen Sie uns nun das Kreuz so anvisieren, dass es nur hier ist, und bewegen Sie es auf die rechte Seite, sowie ändern Sie den Cursor als Zeiger. Wir werden mit dem Mauszeiger darüber fahren. Unter der Nachricht können wir also die close_btn anvisieren. Wir können das nach rechts schweben. So können wir jetzt auch die Schließen-Schaltfläche anvisieren. Aber diesmal ist der Schwebestatus. Alles, was ich hier tun möchte, ist, den Cursor in einen Zeiger zu ändern. Die nächsten drei Stile, die wir hinzufügen werden, werden alle mit dem Nachrichtentyp verbunden sein. Denken Sie also daran, von vorher innerhalb der Layouts, wir haben diesen dynamischen Abschnitt von message_. Also [unhörbar] _info, Erfolg und Fehler. So können wir diese verwenden, um drei verschiedene Farben zu teilen, folgen Sie den Flash-Nachrichten. Beginnen wir also mit der message_info. Der message_success. Dann ist der letzte Message_error. Also alles, was wir hier tun werden, ist ein paar Farben hinzuzufügen. Also die erste, ich werde einen RGB-Wert von 40, 92 und für das Blau einen Wert von 177, für den Erfolg, den Wert von 39, 87 und 39. Dann für die Fehlermeldung wird die rote Farbe ein RGB-Wert von 233, 66 und 66. Fügen wir am Ende dieser drei Zeilen ein Semikolon hinzu. Speichern Sie diese Datei, und laden Sie dann den Browser neu. Also zuerst, wenn wir versuchen, uns abzumelden, erhalten wir eine blaue Nachricht für Informationen. Versuchen wir, uns anzumelden. Also zuerst, wenn wir ein falsches Passwort bei der Anmeldung machen, erhalten wir die rote Fehlermeldung. Versuchen wir es diesmal erneut mit dem richtigen Passwort. Jetzt bekommen wir die grüne Farbe für den Erfolg. Ausgezeichnet. Das funktioniert jetzt gut. Ich werde es hier für das CSS Styling lassen. Aber natürlich, gehen Sie weiter und ändern Sie die Dinge, um Ihre Bedürfnisse zu erfüllen. 64. Vorbereitung für die Produktion: Willkommen zurück. Dies wird ein ziemlich spannender Abschnitt sein, da wir sehen, dass sich all unsere harte Arbeit endlich auszahlt. Wir werden endlich unser Projekt auf einen Live-Webserver für den Rest der Welt zu schieben . Zunächst einmal ein paar Maßnahmen, die ich ergreifen werde, um unsere App bereit zu machen. Zuallererst werde ich die Komprimierung aktivieren. Dies wird gzip Komprimierung hinzufügen, wie wir mit Dateien umgehen, komprimieren wir auf unserem Computer. Dies kann die Größe des Antwortkörpers verringern, was die Leistung unserer App beschleunigt. Dies ist ein npm-Paket, einfach als Kompression bezeichnet, das wir wie gewohnt über die Befehlszeile installieren können. Gehen Sie zur npm i Kompression des Projekts und drücken Sie dann die EINGABETASTE. Es zieht dieses Paket von npm. Sobald dies getan ist, können wir dann dieses Finale in der app.js ganz oben verlangen, genau wie wir es normalerweise tun, also die app.js. Lassen Sie uns einige unserer neuen Briefmarken schließen. Nein, nicht, die app.js rechts oben, ich werde eine Konstante namens Komprimierung erstellen und diese Datei benötigen. Dann müssen wir diese Komprimierung als Middleware mit app.use hinzufügen. Scrollen Sie nach unten und es lassen Sie uns schließen diese nach unserer App. Sagen wir „Antworten komprimieren“ mit unserem app.use Parsing in der Komprimierung. Dies ist alles, was wir tun müssen, um die Komprimierung für unsere Antworten einzurichten. Ich muss sagen, dass es später in unseren Antwort-Headern notiert wird. Als nächstes ist ein Sicherheitsmodul npm, das Helm genannt wird. Dieses Modul schützt unsere App nicht vor jedem Sicherheitsrisiko da draußen, aber es ist ein Schritt in die richtige Richtung und es kann viele gemeinsame Vorsichtsmaßnahmen verursachen, die wir ergreifen sollten. Dieses Modul arbeitet als Middleware und setzt verschiedene HTTP-Header, die wir in einem Moment betrachten werden. Lassen Sie uns zuerst dieses Modul mit npm i und dem Paketnamen der Helme installieren. Sobald dies installiert ist, können wir dann gehen über unsere app.js und dann benötigen dieses Modul wieder an der Spitze, knapp unter unserer Kompression, so const Helm, benötigen die Helme Modul. Dies sollte dann so früh wie möglich in der Middleware-Kette gesetzt werden , wieder mit app.use. Kurz nachdem wir unsere Express-App eingerichtet, so scrollen Sie nach unten zu var app gleich Express. Wir können das hier drin haben, also app.use Parsing in Helm und dann ein Semikolon am Ende. Kurz bevor wir damit arbeiten, werde ich diese Zeile auskommentieren, damit wir sehen können, wie unsere Kopfzeilen aussehen, bevor wir Helme verwenden. Halten Sie dies auskommentiert und gehen Sie dann zu den Entwicklertools. Wenn es den Server mit npm startet, führen Sie DevStart aus. Um unsere HTTP-Header zu sehen, können wir zu den Entwickler-Tools in einem Chrome gehen Klicken Sie also mit der rechten Maustaste und überprüfen Sie. Wenn wir dann auf die Registerkarte Netzwerk gehen, schließen wir dies, laden Sie neu, klicken Sie auf den lokalen Host, und dann, wenn Sie auf die Registerkarte Header klicken, die gerade hier ist. Ich möchte das aufklären, damit es auf dem Bildschirm besser sichtbar ist. Die Informationen, an denen wir interessiert sind, sind diese Antwort-Header. Diese Informationen, die als Header bekannt sind, Informationen, die mit der Anfrage und der Antwort analysiert werden, und lassen Sie uns dies auf die Seite stellen, so dass es leicht zu sehen ist. Da gehen wir. Großartig. Es gibt unsere Antwort-Header, die wir gerade hier sehen können und nur als Vergleich werde ich eine kurze Screenshots davon machen. Ich werde das in einem Augenblick nutzen. Es enthält Dinge wie unseren Content-Type von text/html, es ist so eingestellt, dass es einen Zeichensatz von utf-8 hat, was der Standard ist. Der Codierungstyp von gzip, der von BIOS gesetzt wurde, bevor wir eine Kompression nageln. Eines der Dinge, die wir hier ansprechen müssen, ist das X-Powered-By-Tag, das unten ist und das ist Express. Helm wird diese Informationen zusammen mit anderen verstecken, so dass Hacker keine bekannten Schwachstellen innerhalb des Frameworks nutzen können, in dem wir verwenden. Es wird die Tatsache, dass wir Express verwenden, nicht vollständig verbergen, es gibt andere Möglichkeiten zu überprüfen, aber das ist ein Schritt in die richtige Richtung. Nun, wenn wir zurück zum Projekt gehen und auskommentieren, dieses Stück Middleware, speichern Sie die Datei. Nun, wenn wir den Browser neu laden, klicken Sie auf den lokalen Host und dann zurück zu unseren Antwort-Header, wir sehen, wir haben jetzt mehr Header-Informationen. Lassen Sie uns die Screenshots von vorher hochziehen, doppelklicken Sie darauf. Das erste, was in diesem neuen Antwort-Header zu bemerken ist, dass wir nicht mehr diesen Powered-By-Express-Abschnitt unten unten haben, dieser wurde von Helmen entfernt. Es gibt auch einige zusätzliche Informationen jetzt hinzugefügt. Ich werde hier nicht zu tief in alles eingehen, aber ich gebe Ihnen allgemeine Informationen darüber, was los ist. Wir können sehen, dass wir die Content-Type-Optionen gesetzt haben, um „nosniff“ zu sein. Dies verhindert, dass der Browser versucht, den Namenstyp zu erkennen oder zu erraten. Dies ist die Art von Datei, mit der wir es zu tun haben, beispielsweise eine PNG oder eine JavaScript-Datei. Dies verhindert, dass der Browser automatisch versucht, den Content-Type zu erkennen und ihn im Grunde falsch zu machen, daher einen Code ausführt, den er nicht verwenden sollte. Wir haben auch die DNS-Prefetch-Steuerung ausgeschaltet. Dies ist eher ein Leistungsmerkmal als eine Sicherheit. Wenn wir eine URL in einem Browser besuchen, ist der URL-Name, wie Google.com, im Grunde ein Alias für eine numerische IP-Adresse. DNS ist ein Server, der eine Datenbank dieser URLs und auch die IP-Adressen enthält , um sie dann zu marschieren. Diese URL wie Google.com, ist für die Menschen viel einfacher zu merken als die echte numerische IP-Adresse. Diese Funktion weist den Browser an, eine DNS-Anfrage nicht zu früh zu stellen , bevor der Benutzer auf einen Link klickt oder eine Ressource lädt. Wir haben auch die Download-Optionen noopen zu sein. Dies schützt vor einer alten Internet-Explorer-Schwachstelle, die es dem Browser ermöglicht, Downloads im Kontext Ihrer Website auszuführen. Wenn Sie dies festlegen, wird Internet Explorer stoppen, so dass bösartige HTML-Downloads in einer unsicheren Umgebung ausgeführt werden können. Wir haben die Frame-Option auf SAMEORIGIN gesetzt. Dieser wird steuern, ob Ihre Websites in einen iframe geladen werden können oder nicht. Es sollte deaktiviert werden, es sei denn, Sie haben einen guten Bedarf dafür. Dann haben wir XSS-Schutz und XSS steht für Cross-Site-Scripting, und ist eine Möglichkeit für Angreifer, Zugriff auf unsere Websites zu haben. Sie tun dies, indem sie Wege finden, JavaScript-Code innerhalb dieser Websites auszuführen. Dies ist eines der Dinge, vor denen wir versuchen, zu schützen , wenn die Eingaben des Benutzers in alle Formen bereinigt werden und Helme hat auch diese Option, um mit einigen grundlegenden Sicherheit zu helfen. Wie Sie sich vorstellen können, ist Sicherheit jetzt ein tiefes Thema und schauen Sie sich die Helmdokumente für weitere Informationen an, wenn Sie etwas mehr erfahren möchten. Aber für jetzt wissen, dass dies einige grundlegende Schutz jetzt vorhanden ist. Im nächsten Video laden wir endlich unsere App mit Heroku in die Produktion hoch. 65. Übertragen unserer Express-Anwendung auf Heroku: Ich werde Ihnen jetzt zeigen, wie Sie Ihre fertige Express-Anwendung auf eine Plattform namens Heroku schieben können. Heroku ist eine cloudbasierte Plattform, die es uns ermöglicht, unsere Apps einfach für die Produktion bereitzustellen. Es funktioniert mit Ruby on Rails, PHP, Python, Node und [unhörbar]. Es gibt auch ein kostenloses Kontingent. So können wir lernen, wie man es ohne Kosten benutzt und wir müssen nur bezahlen, wenn unser Projekt wächst. Heroku Räume auf Apps genannt dynodes, die im Grunde vollständig verwaltete Container sind. Um zu Heroku zu pushen, müssen wir zuerst eine Versionskontrollsoftware namens git installieren. Dies ist von gitscm.com erhältlich. Klicken Sie also hier auf diesen Link. Wir nehmen es dann auf die Homepage für git. Gehen wir also zum Download-Bereich am unteren Rand. Klicken Sie darauf und klicken Sie dann auf den Download für Ihr Betriebssystem. Also werde ich auf die Mac-Version nur dort klicken, und stellen Sie es aus dem Download. Ich habe git bereits auf meinem Rechner installiert. Wenn Sie also nicht fortfahren und die Installationsanweisungen befolgen , um für Ihr bestimmtes Betriebssystem zu installieren. Wenn Sie mit git nicht vertraut sind, ist es ein Open-Source-Versionskontrollsystem, das es uns ermöglicht, an Projekten oder Software zu arbeiten und dann unsere Änderungen in verschiedenen Phasen zu schieben. Dadurch können wir nicht nur Änderungen im Auge behalten, sondern auch zu früheren Versionen zurückkehren, wenn wir uns vermasselt haben. Git ist auf unserer Maschine installiert, und wir können unseren Code auch auf gehostete Dienste wie GitHub übertragen, oder in unserem Fall können wir es verwenden, um Heroku zu pushen. Sobald Sie bereit sind, müssen wir zum Terminal gehen oder Sie können das eingebaute Terminal in Visual Studio-Code verwenden. Also im Inneren des hier unten, können wir überprüfen, ob git korrekt installiert ist, indem wir die git dash Version Befehle verwenden. Wenn Sie eine Versionsnummer sehen, die an uns zurückgesendet wurde, bedeutet dies, dass git erfolgreich installiert wurde. Git-Türen projizieren in ein, was ein Repository genannt wird, das Sie sich als Speicher-Buckets vorstellen können. Wir können ein leeres Repository in unseren Projekten mit dem Befehl git in it initialisieren. Ich habe das Repository bereits eingerichtet. Diese Neuinitialisierung ist also das Git-Repository. Möglicherweise erhalten Sie eine etwas andere Nachricht, aber solange Ihr Repository erstellt wurde, können wir jetzt weitermachen. Wir können dann den Status überprüfen, welche Dateien in unseren Projekten an git geschoben werden und welche nicht haben, indem wir den Befehl git status verwenden. Also drücken Sie Enter und sehen Sie jetzt eine Liste von roten Dateien und Ordnern aus unseren Projekten. Das illustre Rot, weil sie als unverfolgt eingestuft werden. Wir müssen erklären, welche Dateien wir zu git hinzufügen möchten und welche nicht. Bevor wir jedoch weiter gehen, gibt es etwas, das wir normalerweise zuerst tun wollen. Dies ist, um eine neue Datei in unserem Projekt namens git ignore zu erstellen. Dies, weil wir alle diese Dateien und Ordner haben, aber wir wollen nicht immer, dass sie alle auf git geteilt werden. Wir möchten die ENV-Datei nicht freigeben, da diese sensible Informationen enthält. Auch der Ordner „Knotenmodule“ kann ignoriert werden, da es sich um einen riesigen Ordner handelt, der viel Platz in Anspruch nimmt. Also all die Designleiste, in der Wurzel unserer Projekte, was alles schließt. Erstellen Sie eine neue Datei namens „.gitignore“. Um diese Dateien zu ignorieren, können wir sie dann innerhalb von hier auflisten. Also beginnend mit dem Knoten Modulordner. Also fügen Sie sie einfach mit Namen hinzu. Also der Knotenmodulordner, können wir auch die.env-Datei ignorieren, und dann schließlich am Ende der DS-Store. Der DS-Store ist eine Datei, die oft automatisch hinzugefügt wird, wenn Sie einen Mac verwenden. Deshalb wollen wir das auch anerkennen, da es nicht für alle Projekte benötigt wird. Diese Git-Ignorier-Datei wird noch wichtiger , wenn wir diesen Code irgendwo wie GitHub schieben. Wenn wir vergessen, dies hinzuzufügen, könnten unsere sensiblen Informationen online für alle anderen sichtbar sein. Auch die Knotenmodule werden nicht benötigt, da wir immer den NPM-Installationsbefehl ausführen können, um sie alle aus der Liste in der package.json-Datei zu installieren. Auch innerhalb dieser package.json-Datei werde ich [unhörbar] Einstellung hinzufügen, und dies soll erklären, welche Version von Knoten wir verwenden werden. Also, wenn wir zum Terminal gehen und Knoten dash-v eingeben, bin ich auf Chromium Version10.3.0 So können wir dies in der package.json setzen. Öffnen Sie das also, und dann ganz unten auf die Entwicklungsabhängigkeiten, können wir die Engines einstellen. Dies ist ein Objekt, bei dem wir die Version von Knoten als String festlegen, was unsere aktuelle Version ist. Also ich auf 10.3.0, und natürlich ist dies die aktuelle Version, die Sie verwenden. Wir setzen hier die Node-Version ein. Die Produktionsversion von Node wird also mit der gleichen Version übereinstimmen , die wir während der Entwicklung verwenden. Dies könnte mögliche Probleme vermeiden, wenn verschiedene Versionen in Entwicklung und Produktion verwendet werden. Wenn wir das schließen und gehen, lassen Sie mich das zuerst speichern und dann zurück zum Terminal. Wir können wieder git Status ausführen, drücken Sie die Eingabetaste, speichern Sie die git Ignorier-Datei und dann git Status ausführen, drücken Sie die Eingabetaste. Jetzt sehen wir, dass wir jetzt die.env-Datei und auch die Knotenmodule fehlen. So können wir jetzt voran gehen und den git als Befehl verwenden, gefolgt von dem Punkt. Also git add dot hit enter. Dies weist git an, alle Dateien, die rot sind, hinzuzufügen oder zu inszenieren. Wir können auch git add gefolgt von dem Dateinamen verwenden, um eine Datei oder einen Ordner zu der Zeit hinzuzufügen, anstatt dot zu verwenden, der verwendet würde, um alle Dateien hinzuzufügen. Wenn wir wieder git status ausführen, drücken Sie die Eingabetaste, die Dateien und Ordner sind nun grün eingestellt. Dies bedeutet, dass sie jetzt bereit sind, zu git verpflichtet zu werden. Dafür gibt es den Befehl git commit. Geben Sie also git, commit-m ein und dann innerhalb von Zitaten können Sie eine Nachricht hinzufügen, wie zum Beispiel initiales Commit. Also fügen wir diese Nachricht hinzu, um zu beschreiben, welche Änderungen wir vorgenommen haben, indem wir ein Bindestrich m-Flag verwenden, dann eine Nachricht in Anführungszeichen kurz danach. Also drücken Sie die Eingabetaste, und dies sollte jetzt alle unsere Dateien in unser leeres Repository übertragen. Über Git-Status, bis zum unteren Hit Enter, wird nun zeigen, dass es jetzt nichts zu begehen ist. Unsere Arbeit im Fach ist sauber und es wird so bleiben, bis wir eine der Dateien ändern. Zum Beispiel, in der style.css, wenn wir etwas wie padding:1px hinzugefügt haben, speichern Sie diesen und [unhörbar] Git-Status. Aber jetzt sehen Sie die modifizierte Version der style.css. Aber ich werde nicht zu Git schieben, da dies gelöscht wird. Also das ist jetzt unsere Arbeit mit git abgeschlossen. Also, jetzt müssen wir zu Heroku übergehen. Das erste, was wir tun müssen, ist auf Heroku.com zu gehen und ein kostenloses Konto zu erstellen. Also lasst uns rüber gehen und uns anmelden. Fügen Sie hier unsere Details hinzu. Aus einer Rolle, gehen Sie für einen Entwickler, fügen Sie das Land hinzu, wählen Sie unsere Hauptsprache aus. Ich möchte von Knoten gehen, keine Roboter, erstellen Sie ein kostenloses Konto und dann müssen Sie in Ihre E-Mails gehen und die Konten bestätigen. Gehen Sie weiter und machen Sie das und kommen Sie in wenigen Augenblicken zurück. Ok. Willkommen zurück. Sobald Sie Ihr neues Konto bestätigt und das Passwort eingerichtet haben, müssen wir fortfahren, was uns dann zum Dashboard-Bereich von Rocchio führt. Innerhalb des Dashboard-Bereichs können wir ein neues Projekt mit diesem Symbol oben erstellen. Klicken Sie auf Neu, erstellen Sie eine neue App. Wir integrieren dann einen Anwendungsnamen. Lassen Sie uns reisen, die nicht verfügbar ist, weil ich es früher verwendet habe, also lassen Sie uns gehen für Let's travel to, die verfügbar ist. Wählen Sie das Land oder die Region aus, und erstellen Sie dann eine Anwendung. Wir nehmen dann in unsere App und wir können sehen, dass wir diesen Abschnitt Deployment Methoden gerade hier haben. Ich werde Heroku Git-Methode verwenden, die Sie hier sehen, die die Heroku CLI verwendet. Mit dieser Methode müssen wir diese CLI installieren. Klicken Sie auf den Link nur hier und wir öffnen diesen in einem neuen Tab. Laden Sie herunter, installieren Sie und installieren Sie dann für Ihr bestimmtes Betriebssystem. Sobald es fertig ist, können Sie darauf klicken und dann durch das Installationsprogramm gehen. Gut. Sobald dies erledigt ist, können wir jetzt zurück zum Terminal gehen und jetzt haben wir Zugriff auf die Heroku-Befehle. Unten im Terminal können wir Heroku Login hinzufügen, um sich dann bei unseren Konten anzumelden. Ich möchte die E-Mail in die E-Mail ändern, die ich gerade registriert habe. Drücken Sie die Eingabetaste und fügen Sie dann das Passwort hinzu, Link zu unseren Konten. Großartig. Jetzt sind wir nur hier als unsere E-Mail-Nutzung eingeloggt. Ich werde tippen, klar, um uns mehr Platz zu geben. Zurück zum Projekt-Dashboard, wir müssen jetzt diese Codezeile nur hier kopieren, die Heroku Gits ist. Dies ist auch mit unserem Let's Travel Projekt verknüpft, also kopieren Sie es und fügen Sie es in das Terminal ein und drücken Sie dann „Enter“. Dies wird also unsere Heroku App als Remote-Version von Gits festlegen. Ein entfernter Zweig ist eine Version unseres Projekts, das anderswo lebt, auf Heroku oder GitHub. Dies ist unsere Remote-Version jetzt eingestellt und jetzt ist die letzte Phase, um voran zu gehen und von Gits nach Heroku zu schieben. Wir machen das mit Gits Push Heroku. Git push, Heroku und dann Master, drücken Sie Enter. Der Master-Zweig ist der Haupt- oder Standardzweig von Gits. Geben Sie uns ein paar Augenblicke, um Heroku zu erreichen. Sobald dies erledigt ist, können wir entweder den Link kopieren, den wir innerhalb des Terminals sehen werden, oder wir können auf einen Befehl namens Heroku Open zugreifen. Lassen Sie uns unser Projekt aufbauen und den Heroku schieben. Gut. Das ist alles jetzt erledigt, also können wir entweder den Link kopieren, den wir hier sehen, oder wir können Heroku eingeben und dann öffnen, drücken Sie die Eingabetaste. Es sollte sich nun innerhalb unseres Browsers unter dem Link öffnen, den wir zuvor gesehen haben. Wir scheinen einen Fehler im Browser zu sehen. Dies liegt daran, dass wir in unserem Projekt Umgebungsvariablen einrichten, aber wir haben die.ENV-Datei ignoriert, die sie enthält. Jetzt müssen wir diese Variablen wieder in Heroku hinzufügen, zurück zum Dashboard und nach oben. Wir haben eine Einstellungsoption nur hier und dann innen hier haben wir einen Abschnitt namens Config Variables. Klicken wir auf offenbaren die Variablen und wir sehen, dass wir noch keine dieser Setup haben. Jetzt können wir die Variablen aus unserer.envfile kopieren. Lassen Sie uns die öffnen. ENV-Ordner. Die erste ist DB. Lassen Sie uns das kopieren. Wir können unseren Schlüssel als DB hinzufügen und dann unseren MongoDB-Wert kopieren. Fügen Sie dies als Wert ein, und fügen Sie dann hinzu. Tun Sie dasselbe für unsere Cloud und benennen Sie den Wert, den API-Schlüssel, und platzieren Sie diesen in. Als nächstes haben wir die API-Geheimnisse. Das hier drin, und dann müssen wir das einfach entfernen und nur den Schlüssel haben. Die Geheimnisse und dann fügen Sie das hinzu. Endlich die Geheimnisse der Reisesitzung. Fügen Sie das in, da gehen wir. Neben diesen Umgebungsvariablen gibt es noch eine, die ich hinzufügen werde. Unten unten wird es node_ ENV sein. Dies wird auf die Produktion gesetzt werden, also fügen Sie dies hinzu. Dadurch werden die Standard-Knotenumgebungen von der Entwicklung zur Produktion geändert. Dadurch werden einige der App-Einstellungen geändert, z. B. das Entfernen einiger Fehlermeldungen, die dem Benutzer nicht angezeigt werden sollen. Es wird jetzt unsere CSS und Review-Vorlagen für die Leistung einzahlen. Es ignoriert nun die Dev-Abhängigkeiten aus der Datei package.json. Sie brauchen diese nicht mehr in der Produktion. Wenn wir nun zurück zum Browser-Tab gehen, klicken Sie darauf und laden Sie dann den Browser neu. Jetzt sehen wir, dass das Projekt wieder funktioniert. Dies ist jetzt ein Live-Link, den Sie jetzt nehmen und zeigen können Ihre Freunde und Familie. Auch wenn Sie Ihre eigene benutzerdefinierte Domain haben, können Sie diese verwenden, um Heroku zu lesen und Sie können herausfinden, wie Sie dies in der Dokumentation tun. Spielen Sie damit herum und alles sollte immer noch wie gewohnt funktionieren. Wir sollten immer noch in der Lage sein, sich einzuloggen. Lasst uns das mal aussuchen. Wir sind jetzt eingeloggt, wir können zu unseren Konten gehen. Es gibt unsere Buchungen, alle Bilder scheinen immer noch aus der Cloud unary zu funktionieren, was gut ist. Natürlich wird immer noch alles aus Mongo gezogen weil wir die Umgebungsvariable von mLab hinzugefügt haben. Denken Sie daran, dass die Version von mLab, die wir zum Testen verwendet haben , nicht für die Produktion konzipiert ist, aber das ist nur für Lernzwecke in Ordnung. Jetzt herzlichen Glückwunsch dazu, Ihre Express-Anwendung in die Produktion zu bringen. Aber für jetzt, ein riesiger Glückwunsch, dass Sie so weit gekommen sind, und jetzt auch Ihre Express-Anwendung auf einen Live-Webserver schieben. 66. Vielen Dank: Herzlichen Glückwunsch zum Ende dieses Kurses. Ich hoffe, dass Sie jetzt viel komfortabler sind, Full-Stack-Webanwendungen mit Technologien wie Node, Express, MongoDB, Hotspot und vieles mehr zu erstellen Full-Stack-Webanwendungen mit Technologien wie Node, . Wir begannen von Anfang an, wie Node und Express funktionieren, neben der Erstellung der Let's Travel Anwendung. Wir haben Seitenvorlagen erstellt, Routing verwendet, um zwischen Seiten zu wechseln, und haben gelernt, wie alle Teile einer Node und Express-App zusammenpassen. Dann gingen wir weiter, wie wir Datenbanken in alle Projekte integrieren können, einschließlich der Modellierung unserer Daten, mit verschiedenen Methoden, um die richtigen Daten zu erhalten, wenn nötig, eine lange Zeit mit dem wesentlichen Erstellen, Lesen, Aktualisieren und Löschen -Aktionen. Danach haben wir unser Wissen verstärkt, indem wir mehr Projekte erstellen , darunter verschiedene Ansichten, Controller, Umgebungsvariablen, Datei-Uploads und Cloud-Speicher sowie einige neue Techniken von ES6 Onward. Wir betrafen die Handhabung von Benutzerkonten, einschließlich Registrierung und Anmeldung, Validierung der Eingaben des Benutzers, Arbeit mit Sitzungen, Flash-Nachrichten und bedingtes Rendern. Um das Projekt abzurunden, haben wir den Bereich Benutzerkonten bearbeitet und dem Benutzer auch erlaubt, Buchungen zu tätigen. Schließlich haben wir unsere Projekte auf einen Live-Server geschoben, damit der Rest der Welt sehen kann. Tschüss für jetzt und hoffe, Sie irgendwann bald in einem anderen Kurs zu sehen. 67. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skill-Anteil überprüfen. Folgen Sie mir für alle Updates, um über neue Klassen informiert zu werden, sobald sie verfügbar werden. Nochmals vielen Dank, viel Glück. Hoffentlich sehe ich dich wieder in zukünftigen Klassen.