‫Kursleiter: Lassen Sie uns nun unsere
‫bisherige Anwendung komplett umgestalten und viele
‫neue Dateien und
‫eine ganz neue Dateistruktur erstellen.
‫Denken Sie also an das letzte
‫Video, dass wir unsere Router in verschiedene Dateien
‫aufteilen wollten.
‫Und das wird der erste Schritt sein, den wir hier machen werden.
‫Also werde ich jetzt einen neuen Ordner
‫namens Routes erstellen und dann darin einen Ordner für Tourrouten haben. js und dann Benutzerrouten. js auch.
‫Okay, und das wird das erste Mal sein, dass
‫wir wirklich mit verschiedenen Modulen
‫arbeiten, okay, und sie wirklich sinnvoll einsetzen.
‫Beginnen wir also mit dem Tourrouter.
‫Kopieren Sie es hierher, nehmen Sie dann diesen Tourrouter
‫hierher und legen Sie ihn hier ab.
‫Als nächstes brauchen wir hier eigentlich Express, weil wir diese
‫Variable
‫verwenden und daher das Express-Modul importieren müssen.
‫Also
‫Express, Express verlangen.
‫Okay, es ist eine
‫Art Konvention, diesen Router einfach zu nennen und nicht tourRouter.
‫Also Router, und jetzt exportieren wir den Router und importieren ihn dann in
‫unsere Hauptanwendung, okay?
‫Erinnern Sie sich also daran, wie wir es machen,
‫wenn wir nur eine Sache zu exportieren haben?
‫Nun, wir verwenden Modul. exportiere, und stelle
‫dann den Router dort ein.
‫Wenn Sie es speichern,
‫erhalten wir natürlich immer noch einige Fehler, aber das
‫liegt daran, dass der Tourrouter nicht in unserer Hauptanwendungsdatei definiert ist.
‫Okay, auch was in
‫dieser Datei nicht definiert ist, sind all diese Funktionen hier.
‫Okay, also lassen Sie uns sie sehr schnell
‫holen und in die Router-Datei einfügen.
‫Zumindest vorerst werden wir später auch dafür
‫eine neue Datei erstellen.
‫Es beginnt also hier.
‫Vorsicht, nicht alles kopieren.
‫Ja, also einfach so.
‫Und eigentlich werde ich sie vor die Routen setzen.
‫Sparen Sie.
‫Und so sollte das jetzt funktionieren.
‫Und jetzt machen Sie dasselbe für den Benutzer.
‫Also nimm den Router.
‫Und machen Sie sich keine Sorgen über all diese Fehler, die wir bekommen.
‫Das liegt wiederum nur
‫daran, dass uns an einigen Stellen einige Variablen fehlen.
‫Also noch einmal, wir würden es hier ausdrücken, dann
‫nennen wir das hier nur
‫Router und dann exportieren wir es.
‫Okay, und jetzt bekomme ich auch die Handler.
‫Okay, wir können diese Route-Handler jetzt loswerden.
‫Okay, und tatsächlich fehlt dieser hier in
‫unseren Tourrouten, also dieses Stück Code, in dem
‫wir die Touren tatsächlich aus
‫der JSON-Datei lesen.
‫Also stell das hier ganz oben ein.
‫Und nun endlich müssen wir den
‫Tourrouter und den Userrouter tatsächlich
‫importieren, damit diese Routen hier weiterhin funktionieren.
‫Okay, aber das sollte ziemlich einfach sein, also lass uns das tun.
‫Also mit
‫dem Tourrouter, ist bei Bedarf, routen/tourRoutes.
‫Okay, und wir brauchen das JS
‫nicht, und dann das gleiche für den userRouter.
‫TourRoutes ist also tatsächlich hier, die userRoutes.
‫Jetzt fragen Sie sich vielleicht, warum ich die Variablen
‫eigentlich userRoute genannt habe, aber dann ist die Datei userRoutes, und das
‫liegt daran, dass dieser Ordner hier
‫routen heißt, und dort haben wir also
‫die tourRoutes und die userRoutes.
‫Okay, aber was wir tatsächlich aus dieser
‫Datei exportieren, ist einfach der Router, in Ordnung?
‫Aber ich glaube, es ist sinnvoller, diesen
‫Ordner hier tatsächlich Routen zu nennen.
‫Okay, und deshalb
‫haben wir diesen kleinen Unterschied zwischen Routen und Router.
‫Jetzt bekommen wir hier immer noch einen Fehler
‫und fs ist nicht definiert, also nehmen wir das,
‫und eigentlich brauchen wir es hier nicht,
‫also fügen wir es gleich hier in die Tourrouten ein.
‫Wir erhalten einen weiteren Fehler.
‫Und dieses Mal, weil dieser Ordner hier jetzt nicht definiert ist, weil unser Dirname
‫jetzt die Routen ist.
‫Also müssen wir da raus.
‫Gehen Sie also einen Ordner nach oben und gehen Sie dort
‫hinein in dev-data, data und tour-simple.
‫Machen Sie sich jetzt keine Sorgen über all diese Fehler.
‫Das ist irgendwie normal, wenn wir all diese
‫Refactorings machen, weil wir überall
‫Sachen ändern, also ist es normal, dass Sachen kaputt gehen.
‫Wie auch immer, es funktioniert jetzt
‫wieder, und wir sind jetzt an der Stelle,
‫an der wir unsere Routen hier erneut testen können.
‫Und tatsächlich, es funktioniert.
‫Das gleiche gilt für die Benutzer, nehmen wir an.
‫Und damit ist alles richtig.
‫Wir haben unsere Router jetzt
‫also jeweils in einer anderen Datei, und wir
‫können sagen, dass jeder von ihnen eine kleine Unteranwendung ist.
‫Also eine Tour-Anwendung und eine Benutzer-Anwendung.
‫Und dann setzen wir alles in
‫unserer globalen App-Datei zusammen, indem wir diese Router
‫importieren und dann die Router auf den beiden
‫verschiedenen Routen montieren, die wir
‫derzeit implementiert haben, okay?
‫Auch hier montieren wir unsere Router.
‫Und ich weiß, dass dieses Konzept etwas
‫schwer zu verstehen sein kann, aber machen Sie sich
‫darüber keine Sorgen.
‫Je länger Sie an diesem Projekt arbeiten und
‫je mehr Code
‫Sie schreiben, desto klarer wird alles automatisch.
‫Das Wichtigste im Moment
‫ist, dass wir diese verschiedenen Router für jede der
‫Ressourcen erstellt haben, um eine schöne
‫Trennung zwischen diesen Ressourcen zu gewährleisten.
‫Also im Grunde eine kleine
‫Anwendung für jeden von ihnen erstellen und dann
‫alles in einer Haupt-App-Datei zusammenfügen, die natürlich diese ist.
‫Also diese App. js-Datei, die wir hier haben, wird normalerweise hauptsächlich
‫für Middleware-Deklarationen verwendet.
‫Wir haben also
‫unsere gesamte Middleware, die wir auf alle Routen anwenden möchten.
‫In diesem Fall haben wir also diese vier Middlewares hier.
‫Also eins, zwei, drei, vier.
‫Diese Middleware möchten wir auf
‫alle
‫Routen anwenden und dann auf diese Route
‫die tourRouter-Middleware und
‫auf diese Route die userRouter-Middleware anwenden.
‫Okay, diese beiden Router sind
‫eigentlich Middleware, weshalb wir eine App verwenden können. verwenden, um sie zu montieren.
‫Okay, und nachdem dies gesagt wurde, gehen wir
‫noch einen Schritt weiter und
‫entfernen diese Routenhandler
‫tatsächlich aus der Routendatei.
‫Okay, also erstellen wir hier wieder einen neuen Ordner, und
‫dieser wird Controller heißen, okay?
‫Also habe ich sie Route-Handler genannt, und daher
‫wäre es sinnvoll, einen Handler-Ordner zu erstellen.
‫Später in diesem Kurs werden
‫wir jedoch eine Softwarearchitektur namens Model View Controller
‫verwenden, und
‫in dieser Architektur werden diese
‫Handlerfunktionen hier eigentlich Controller genannt.
‫Deshalb nenne ich den Ordner und auch
‫die Dateien darin Controller.
‫Lassen Sie uns nun den tourController erstellen. js und die
‫userController. js.
‫Okay, und das wird ein bisschen mehr
‫Sinn machen, wenn
‫wir den Teil des Kurses erreichen, in dem wir
‫tatsächlich über das MVC- oder Model View Controller-Muster sprechen.
‫In Ordnung, also nehmen wir jetzt
‫diesen Code und legen
‫diese Handler in den Controller-Ordner oder die eigentliche Datei.
‫Also all dieser Code.
‫Es ist der tourController, ja, das ist der.
‫Außerdem brauchen
‫wir dieses FS-Modul hier, natürlich ganz oben.
‫Und es geht los.
‫Nun wollen wir alle diese Funktionen aus diesem Modul exportieren,
‫also wie machen wir das?
‫Nun, in diesem Fall haben wir nicht nur einen
‫Export, also werden wir kein Modul verwenden. export, aber stattdessen werden wir
‫all diese Funktionen auf das exports-Objekt setzen,
‫okay?
‫Lassen Sie mich also
‫alle diese Konstanten auswählen, damit ich
‫sie tatsächlich alle gleichzeitig ersetzen kann.
‫Also Exporte. Tour löschen, und . updateTour, createTour, getTour und
‫getAllTours.
‫Okay, das exportiert alles aus dieser Datei.
‫Also gehen wir
‫jetzt in die tourRoutes und importieren sie einfach.
‫Also const, tourController, equals require.
‫Okay, jetzt sind wir hier im Routenordner, oder?
‫Wir müssen also eine Ebene nach oben gehen
‫und dann in die Controller und in den
‫tourController gehen. js.
‫Okay, das ist nicht richtig und in Ordnung.
‫Denken Sie daran,
‫wenn wir Daten mit dem exports-Objekt aus einer Datei exportieren.
‫Also genau wie wir es hier gemacht haben.
‫Wenn wir dann alles in ein Objekt
‫importieren, befinden sich alle Daten,
‫die bei den Exporten waren, jetzt auf tourController.
‫Und so werden wir tourController haben. getAllTours. erstellenTouren. getTour, und wirklich, all
‫das, okay?
‫Dieses Objekt hier wird also den Exporten entsprechen,
‫die wir hier haben.
‫Erinnere dich daran?
‫Und so ist es wirklich einfach.
‫Jetzt muss ich nur noch
‫tourController erstellen. , und das ist es.
‫Jetzt hätte ich auch die Strukturierung
‫verwenden können, die ich dir auch schon gezeigt habe.
‫Um es zu demonstrieren, hätte ich es so
‫verwenden und dann genau die gleichen Namen angeben
‫können, die wir hier haben.
‫Also getAllTours und dann createTour
‫und all das, und
‫dann hätte ich sie direkt hier verwenden können, ohne tourController und dot.
‫Okay, aber eigentlich mag ich es so, und ich sehe kein Problem damit,
‫es so zu haben.
‫So wird schön sichtbar, dass all
‫diese Funktionen hier
‫tatsächlich von diesem tourController-Modul stammen.
‫Okay, ich habe es jetzt gespeichert und
‫es sollte weiter funktionieren, also testen wir das und ja, es funktioniert.
‫Also, das funktioniert jetzt.
‫Schließen wir es tatsächlich ab, und jetzt dasselbe, wo ist es?
‫Ach, hier.
‫Nun natürlich dasselbe mit diesen Funktionen.
‫Legen Sie sie hier ab und exportieren Sie dann all diese
‫Typen.
‫Also Exporte.
‫Ja, das ist also richtig.
‫Hier haben wir gerade das Modul importiert, und wie zuvor müssen wir
‫eine Ebene höher springen.
‫Wir gehen in Controller und userController.
‫Fügen Sie das jetzt endlich hier hinzu.
‫Speichern Sie es und testen Sie es auch für diesen Kerl.
‫Und tatsächlich, es funktioniert.
‫Also war alles, was wir hier gemacht haben, richtig.
‫Wir fangen jetzt also an, eine Menge Dateien zu haben, und daher ist
‫es wichtig, sich wirklich
‫damit vertraut zu machen, wo genau sich all
‫die verschiedenen Teile der Anwendung befinden, okay?
‫Um es noch einmal zusammenzufassen, der Ablauf geht so.
‫Wir beginnen mit dem Empfang der Anfrage in der App. js-Datei, oder?
‫Es wird dann abhängig von der Route einen der
‫Router eingeben, also sagen wir den Tourrouter,
‫und dann wieder abhängig von
‫dieser Route und
‫der Anfrage einen dieser Controller hier ausführen, und
‫diese sind also in die tourController-Dateien.
‫Und hier wird dann endlich die Antwort gesendet
‫und der Anfrage-Antwort-Zyklus beendet.
‫Okay, wir haben jetzt drei Dateien, anstatt alles
‫nur in einer Datei zu haben.
‫Okay, aber das ist noch nicht das Ende der Geschichte, denn
‫ich füge hier einen weiteren Schritt hinzu.
‫Ich werde also einen Server erstellen. js-Datei ebenfalls.
‫Also Server. js.
‫Und warum tue ich das?
‫Nun, einfach weil es eine gute Praxis ist, alles,
‫was mit express
‫zu tun hat, in einer Datei zu speichern und
‫dann alles, was mit dem Server zusammenhängt, in einer anderen Hauptdatei.
‫Also ab sofort Server. js ist eigentlich unsere Startdatei, in der alles beginnt,
‫und sie ist da, wenn wir auf
‫unseren Server hören.
‫Lassen Sie uns diesen Teil von
‫hier aus kopieren oder ausschneiden und auf den Server verschieben.
‫Natürlich kennt dieses Modul hier
‫keine App, und deshalb müssen wir es importieren.
‫Und um es zu importieren, müssen wir es zuerst exportieren.
‫Also verwenden wir Modul. exports, und wir exportieren unsere Anwendung aus
‫dieser Datei.
‫Okay, und jetzt haben wir
‫alles, was im
‫Grunde die Anwendungskonfiguration ist, in einer eigenständigen Datei.
‫Okay, also zurück auf dem Server, importieren wir das jetzt.
‫Require, und da es sich um unser eigenes Modul
‫handelt, müssen wir this verwenden. / um
‫zu sagen, dass wir uns im aktuellen Ordner
‫befinden, und hier ist es einfach app.
‫Also ganz einfach.
‫Und später werden wir tatsächlich andere Dinge in
‫dieser Datei haben, die nichts mit Express zu tun haben,
‫aber immer noch mit unserer Anwendung zusammenhängen.
‫Also Sachen wie Datenbankkonfigurationen
‫oder einige Fehlerbehandlungssachen oder Umgebungsvariablen, all diese
‫Sachen werden auf diesem Server leben. js, das
‫ist unser Einstiegspunkt, okay?
‫Beenden wir nun den Prozess, den wir hier haben, denn jetzt führen wir
‫die Nodemon-App nicht mehr aus. js,
‫aber stattdessen müssen wir server. js.
‫Okay, und da wir das tun, lassen Sie
‫mich dafür ein npm-Skript erstellen.
‫Schließe den Typen sehr schnell ab.
‫Lassen Sie mich
‫hier npm start, nodemon server hinzufügen. js.
‫Denn auf diese Weise muss ich
‫nicht mehr genau wissen, welche Datei ich eigentlich ausführen möchte.
‫Ich muss also nur noch npm
‫start schreiben, und es besteht kein Zweifel, dass es funktionieren wird.
‫Sonst muss ich vielleicht
‫denken, hm, ist es App. js oder server. js oder was?
‫Was müssen wir hier anfangen?
‫Aber so muss ich nicht nachdenken, alles was ich tun muss, ist
‫npm start, und schon geht es los.
‫Okay, also einfach so, und
‫hier führen wir unsere Anwendung wieder aus.
‫Schließen Sie diesen Typen, und das funktioniert übrigens auch
‫ohne dass nodemon als unsere Dev-Abhängigkeit
‫installiert ist, da
‫ich nodemon global installiert habe.
‫Das haben wir im ersten Abschnitt gemacht, und hoffentlich hast
‫du es dort auch getan.
‫Wenn nicht, fahren Sie fort und
‫führen Sie in
‫einem anderen Tab npm install
‫nodemon aus. Wenn Sie diesen Abschnitt aus irgendeinem Grund
‫übersprungen haben, geben Sie npm install nodemon ein und können es
‫dann entweder global so installieren oder als
‫dev installieren Abhängigkeit, so, in Ordnung?
‫Stellen Sie also sicher, dass Sie nodemon installiert haben, egal
‫ob global oder als Dev-Abhängigkeit, okay,
‫damit dies funktioniert.
‫Also letzter Check, nur um sicher
‫zu gehen und diesen zu wollen, und ja, in der Tat.
‫Wir haben unsere App korrekt umgestaltet.
‫Dies waren also viele Änderungen allein
‫in einem Video. Nachdem Sie dieses beendet haben, analysieren
‫Sie bitte alles, was wir getan haben,
‫und versuchen Sie wirklich, einen Pfad zu verfolgen, den
‫eine Anfrage innerhalb
‫unserer App von Anfang bis Ende macht.
‫So bekommen Sie wirklich ein
‫Gefühl dafür, wie hier alles funktioniert.
‫Und wir sehen uns danach im nächsten Video.