Fullstack Trello Klon erstellen: WebSocket, Socket IO

1. Einführung: Willkommen zu meinem Full-Stack-Kurs, in dem wir ein Schienenprojekt von Grund auf neu bauen. Es ist großartig, Sie in diesem Kurs hier zu haben, wir werden ein echtes Projekt umsetzen angefangen vom leeren Ordner bis zur fertigen, voll funktionsfähigen Produktionsanwendung , die auf der Schiene bereitgestellt wird -Server werden wir eine Funktion implementieren, die ein typisches Projekt benötigt, wie zum Beispiel Authentifizierung, Arbeit mit dem Pi, Verwaltung und Erstellung eines reaktiven Zustands, Arbeiten mit Formularen und vieles, vieles mehr. In diesem Kurs werden wir viele verschiedene Tools für unseren Kunden verwenden . Wir werden Angular verwenden, die beste Lösung für große skalierbare Produktionsanwendungen. Im Backend werden wir jetzt Schach verwenden um unsere API zum Speichern unserer Daten zu erstellen. Wir werden MongoDB verwenden , eine sehr beliebte Lösung zum Speichern von Daten in Ihrem Projekt. Außerdem verwenden die Leute Socket Layer, um Echtzeit-Updates in unserer Anwendung zu erstellen . Natürlich werden wir den bestmöglichen Code schreiben , der trocken, skalierbar und leicht zu verstehen ist. Am Ende dieses Kurses können Sie mit diesen Tools Ihre eigenen Projekte beliebiger Komplexität erstellen . Wer bin ich? Mein Name ist Alexander Cohesion und ich bin ein Webentwickler mit mehr als zehn Jahren Erfahrung sowie der professionelle Ausbilder mit verschiedenen Kursen zu Webtechnologien. Ich habe mein Bestes getan, um mein ganzes Wissen in diesen Kurs einzubringen , und sie wollen es mit dir sagen. Also willkommen an Bord und lass uns loslegen. 2. Welche Technologien verwenden wir?: In diesem Video möchte ich über Technologien sprechen , die wir in diesem Kurs verwenden werden. Und von Anfang an möchte ich realistische Erwartungen setzen. Wir werden hier ziemlich viele Technologien einsetzen. Es wird Angular, Node.js Express, MongoDB, TypeScript und Socket IO sein. Und das gibt eine Menge Dinge zu lernen. Und dann werde ich dir in diesem Kurs nicht alles von Anfang bis Ende beibringen. Es ist einfach nicht möglich. Die Menge an Wissen in jedem einzelnen Tool hier ist enorm. diesem Grund ist dieser Kurs fokussiert. Aufbau eines echten Projekts von Anfang bis Ende. Ja, sicher werden Sie all diese Technologien auf einer bestimmten Ebene verstehen und lernen. Aber hier benötigen Sie bei einigen Technologien möglicherweise grundlegendes Verständnis dafür, wovon wir überhaupt sprechen. Nachdem das gesagt ist, springen wir in die Liste. Und der erste in unserer Liste ist Angular. Wenn Sie es nicht wissen, ist Angular eines der drei beliebtesten Front-End-Frameworks, und wir werden es verwenden, um Front und Side unserer Anwendung zu erstellen . Angular ist ein wirklich strenger Rahmen , der für große Unternehmen geeignet ist. Und wir haben dieses TypeScript sofort einsatzbereit, was bedeutet, dass wir mit Angular größere Anwendungen erstellen, sie aufgrund von Tippvorgängen sicher machen und sie bei Bedarf skalieren können sie aufgrund von Tippvorgängen sicher machen . Wenn Sie Angular groß nicht kennen, empfehle ich Ihnen dringend, sich die Liste mit den Grundlagen von Angular anzusehen , wie Komponenten funktionieren, wie Module erstellt werden , wie man Routing hinzufügt und so weiter. Nachdem Sie diese Dinge verstanden haben, wird es für Sie viel einfacher sein, in den Kurs einzusteigen. Die nächste in der Liste kennen wir Schach und eigentlich NodeJS werden wir im Backend mit Framework verwenden , das Express heißt. Und wenn es es nicht ausdrückt, das beliebteste Framework für Node.js, ist es super klein, es ist nicht streng, es ist wirklich flexibel und wir werden es als eine sehr beliebte Lösung zum Erstellen verwenden Backend. Und in diesem Projekt müssen wir nicht nur eine, sondern auch verwaltete Socket-Verbindungen aufbauen . Das Backend, hier drückt hier eine wirklich gute Wahl aus, aber es wird nicht alles standardmäßig ausgedrückt, wir haben JavaScript. Natürlich ist das nicht der beste Ansatz. Wir wollen wirklich TypeScript verwenden, weil wir TypeScript auf dem Client mit Angular verwenden werden. Dies ist, wenn das Backend mit Express läuft. Wir wollen auch TypeScript verwenden. Warum ist das so? Denn eigentlich bringt TypeScript statische Statik zu JavaScript. Dies macht unseren Code viel sicherer und wir sehen alle unsere Probleme, nicht in der Laufzeit, sondern im Transpiler und in der Zeit. Offensichtlich müssen wir jetzt bei einem Projekt unsere Daten irgendwo speichern, was eigentlich bedeutet, dass wir für unser Backend eine Datenbank benötigen. Und die beliebteste Lösung hier ist MongoDB. Dies ist wirklich die beliebteste Datenbank der Welt, in der wir Daten speichern können, und sie passt sehr gut in unseren Stack mit Angular auf dem Client und NodeJS wurde im Backend ausgedrückt. Und zu guter Letzt steht Socket IO in der Liste. Wir möchten in unserer Anwendung WebSockets implementieren, um andere Benutzer zu benachrichtigen , wenn wir eine Aufgaben- oder Kreditspalte erstellen , wenn wir ein Teil wechseln Alle Benutzer in diesen Teilen müssen benachrichtigt werden. Und die beliebteste Lösung für WebSockets innerhalb des bekannten Wortes heißt Socket IO. Es ist die Bibliothek, die uns hilft, WebSockets im Backend und gleichzeitig auf dem Client zu verwalten WebSockets im Backend . Deshalb ist es wirklich eine gute Wahl. Noch einmal, wenn Sie mit einigen Tools hier nicht vertraut sind, ist es völlig in Ordnung. Wir werden bei Null anfangen, aber wir werden das Erlernen all dieser Tools nur auf die täglichen Bedürfnisse konzentrieren . Was eigentlich bedeutet, dass wir grundlegende Dinge lernen, Dinge korrigieren und Dinge, die für die Umsetzung dieses Eisenbahnprojekts benötigt werden. 3. Herunterladbare Ressourcen: In diesem Video möchte ich Sie an den Quellcode erinnern, denn tatsächlich finden Sie in diesem Kurs, in jeder einzelnen Vorlesung, in der wir etwas programmieren, in jeder einzelnen Vorlesung, in der wir etwas programmieren, den angehängten Code dieser speziellen Vorlesung , der tatsächlich bedeutet, dass jede einzelne Vorlesung einen Quellcode enthält. Und wenn Sie sich nur den Quellcode der Vorlesung holen möchten , können Sie das sicherlich tun. Wachsen Sie einfach unter das Video und überprüfen Sie das Archiv, das an das Video angehängt ist. Und anders wie immer, wenn Sie Probleme mit Ihrem Code haben, etwas nicht kompiliert wird oder Sie nur eine Frage zum Video oder zum Kurs im Allgemeinen haben , können Sie einfach Ihre Kommentare schreiben auf diesem Video, und ich werde sie auf jeden Fall beantworten. 4. Installieren von Node und Angular: In diesem Video installieren wir NodeJS Angular auf Ihrem Computer. Wie Sie hier sehen können, bin ich auf der offiziellen Website Node js.org, wo Sie jetzt Schach auf Ihren Computer herunterladen können. Wenn Sie es nicht installiert haben, können Sie überprüfen, ob es auf Ihrem Computer installiert ist. Wenn Sie nur eine Node Minus-Version in Ihre Konsole schreiben die Version wie 16 erhalten, ist es völlig in Ordnung, wenn Sie etwas älteres haben. Ich empfehle Ihnen dringend, Ihre Node-Version zu aktualisieren. Aber hier ist der wichtige Punkt: Sie können sehen, dass wir zwei Versionen haben. Zuallererst 16 LTS und 17 aktuell. Und du denkst vielleicht, okay, ich muss Strom installieren. Und sie können Ihnen nicht empfehlen, die aktuelle Version zu installieren, da Langzeit-Support-Version in der Regel viel stabiler ist. diesem Grund verwende ich für alle meine Projekte, insbesondere wenn sie in Produktion geliefert werden, insbesondere wenn sie in Produktion geliefert werden, die LTS-Knotenversion, was eigentlich bedeutet, wenn Sie zu dieser Website springen und LTS-Version sehen kann 17 oder 18 sein. Ich empfehle Ihnen immer noch, Ts herunterzuladen und nicht aktuell und es spielt keine Rolle, auf welchem Betriebssystem Sie arbeiten. Nein, das funktioniert überall. Sie laden es einfach hier herunter, installieren es auf Ihrem Computer und überprüfen dann in der Konsole mit der Node minus Version, die Node erfolgreich auf Ihrem Computer installiert hat . Sie können auch hier und Pm minus Version eingeben um zu überprüfen, ob npm auch für Sie verfügbar ist. Unser nächster Schritt ist die Installation Angular und die Arbeit mit dem Globus . Wir verwenden ein Tool namens Angular CLI, was bedeutet, dass dies das Tool ist, uns zunächst hilft , ein Angular-Projekt, dann generiere verschiedene Module oder Komponenten und mache eine Menge Sachen mit Angular. Wie wir Angular CLI auf Ihrem Computer installieren können , wie Sie hier sehen können, bin ich auf der offiziellen Website Angular Slash CLI, und hier ist der erste Schritt, um Angular CLI zu installieren. Und wir können diesen Befehl einfach kopieren, der Angular CLI global auf Ihrem Computer installiert. Und wie Sie dafür sehen können, verwenden wir npm, das nach der Installation von bekannten Stühlen vorhanden sein wird. Hier kann ich einfach Zahlungen einwerfen tau minus g Angular CLI. Und ich installiere global Angular CLI auf meinem Computer. Jetzt müssen wir überprüfen, ob unsere Angular CLI erfolgreich installiert wurde. Das können wir einfach in G minus Version schreiben und hier sind einige wichtige Informationen. Zunächst können wir sehen, dass Angular CLI Version 13 ist, was bedeutet, dass wir Angular 13 hier auf unserer Maschine installiert haben . Zweitens ist dies unsere Node-Version , die auf Ihrem Computer aktiviert ist. Das ist npm und das ist das Betriebssystem. Und einige Versionen von Angular, die Sie hier sehen können. Wenn Sie eine solche Ausgabe sehen, bedeutet dies, dass Sie Angular CLI erfolgreich auf Ihrem Computer installiert haben. Der nächste Schritt besteht darin, Front und Teil unserer Anwendung zu generieren . Wie Sie hier sehen können, bin ich in ihm gefaltet. Und sie haben unser Projekt hier nicht erstellt, was bedeutet, dass wir selten alles von Grund auf neu erstellen. Also was ich hier machen will, ich kann es einfach ausprobieren MK Deal und dann den Namen unseres Projekts, L Trello. Und tatsächlich implementieren wir in diesem Projekt den Klon des Trailers. Das ist y. Hier ist nur ein Name mit einem netten Präfix und WSSE, Sie können einen Ordner nicht aus dem Terminalbud erstellen, sondern nur in Ihrem Dateimanager. Jetzt möchte ich in unsere Ultra-Rechtsmappe springen. Und hier müssen wir zwei verschiedene Ordner erstellen , weil wir unser Backend von unserem Frontend trennen wollen . Und du fragst dich vielleicht, warum ist das so? Und eigentlich aus verschiedenen Gründen. Zunächst ist es einfacher, Ihr Front-End und Back-End aufzuteilen , wenn Sie sie aus bestimmten Gründen später in verschiedenen Repositorys oder vielleicht sogar in verschiedenen Teams platzieren möchten sie aus bestimmten Gründen später in verschiedenen Repositorys oder vielleicht sogar in verschiedenen Teams platzieren . Zweitens, wenn wir sie in verschiedene Ordner trennen, dann ist es kein Monolith, was eigentlich bedeutet, dass wir mit Sicherheit keine Sachen aus dem Backend in den Front-End-Ordner injizieren Sachen aus dem Backend in den Front-End-Ordner und umgekehrt. Sie sind wirklich isoliert und trennen es, da sie in der realen Anwendung enthalten sein müssen. Deshalb möchte ich hier zwei Ordner erstellen. Erstens wird es Client sein, und zweitens wird es Server und Insight Client sein. Wir werden unsere eckige Anwendung haben und dann sagen Server. Wir werden unsere bekannten gs mit Express haben, was unsere Backend-Anwendung sein wird. Jetzt können wir unsere eckige Anwendung generieren, wie Sie hier in der Dokumentation sehen können, wir führen einfach den Gen-Farbton und den Namen des Ordners aus. Dann springen wir einfach über den Ordner und starten unseren Server. Aber hier haben wir ein Problem, weil wir direkt unseren Kundenordner erstellt haben und wir können jetzt den Kundenordner einfügen, was bedeutet, dass wir unsere eckige Anwendung nicht mit erstellen können unsere eckige Anwendung nicht mit erstellen Engine Sie, weil der Ordner bereits existiert. Dafür können wir einen wirklich netten Befehl in Gene You verwenden. Und dann müssen wir hier das Verzeichnis des Anwendungsnamens bereitstellen, und hier ist ein Schrägstrich, was bedeutet, dass dieser Befehl für Sie in Ihrer Anwendung von Angular in Ihrem vorhandenen Verzeichnis erstellt wird . Wie Sie hier sehen können, bin ich im Kunden, wo genau wir unsere eckige Anwendung generieren möchten. Und sie können diesen Befehl hier in Gene Hue App Name, Verzeichnis Punkt Schrägstrich einfügen . Und natürlich wollen wir den Namen unserer Anwendungs-App nicht nennen. Hier können wir ELL Trello bereitstellen, so wie wir unser Projekt nach demselben versteckten Enter benannt haben . Und wir haben mit der Generierung eines neuen Angular-Projekts begonnen . Und hier bekommen wir ein paar Fragen von Angular CLI. Brauchen wir Angular Routing? Natürlich, ja, deshalb drücke ich ja, hier, welches Stylesheet wir verwenden müssen. Und hier wähle ich ein CSS. Danach wird unser Projekt generiert. Wie Sie hier sehen können, wurden alle Pakete erfolgreich installiert, aber danach erhalten wir eine Nachricht, die für Sie verwirrend sein könnte. Hier erhalten wir die Nachricht, dass jetzt der Branch-Master als unser Standard-Git-Zweig erstellt wurde . Und sie könnten den Namen später in einen Namen ändern, aber er ist noch nicht da. Und eigentlich egal welcher Branch für Sie generiert wurde, Master oder Main, es wird auf jeden Fall funktionieren. Sie können diese Warnung also einfach ignorieren. Und der letzte Schritt, den wir tun müssen, ist unsere Kundenbewerbung zu starten. Und wie Sie hier in der Dokumentation sehen können, befindet es sich in G serve. Also fügen wir einfach den Client ein, der es versuchen muss und einfach dienen, ohne etwas zu spezifizieren. Wie Sie hier sehen können, erhalten wir eine grüne Ausgabe. Die Nachricht, dass jetzt der eckige Live-Entwicklungsserver 1200 auf dem lokalen Host abhört. Jetzt können wir einfach localhost 4.200 öffnen. Und hier sehen wir die Standard-Winkelseite und fügen jetzt die Konsole ein. Unser Webserver muss während der Entwicklung der Anwendung ständig laufen . Schauen wir uns nun die Dateien an , die schnell generiert wurden. Wie Sie hier sehen können, habe ich meinen Editor geöffnet, ich bin im Ordner L Trello, und wir haben hier zwei Ordner, Server und Client und Insight Client. Alle diese Dateien wurden mit Angular CLI generiert. Und der interessanteste Teil für uns ist dieser Quellordner. Und in AB haben wir unsere App-Komponente. Genau das sehen wir hier auf dem Bildschirm. Dies ist die Standardkomponente von eckig. Hier möchte ich zunächst die App-Komponente, SCSS, App-Komponenten-Spezifikation entfernen . Und hier haben wir nur diese vier Akten. Jetzt können wir in das HTML der App-Komponente springen, und wir möchten wirklich alles außer dieser letzten Zeile, dem Router-Outlet, entfernen . Das ist schnell extrem wichtig. Also werde ich alles aus dieser Datei entfernen und einfach hier leben Dürre die Steckdose. Und ganz oben können wir es einfach versuchen. Hallo l Trello. Wir wissen also, dass es funktioniert. Danach müssen wir in unsere App-Komponente springen und sie ändern. Denn eigentlich verwenden wir hier Stil-URLs aus der Datei, die die entfernten ändern. Hier können wir diese Zeile einfach entfernen und verwenden hier einfach eine Vorlage. Und wir brauchen diesen Title-L-Trailer nicht einmal , weil wir ihn nicht benutzen. Wir haben einfach unsere App-Komponente und sie ist eine leere Komponente. Wenn ich jetzt zur Seite im Browser springe, kann ich sehen, dass alles entfernt wurde. Unsere Seite ist komplett gereinigt und jetzt haben wir nur eine kleine Trailer-Nachricht, was tatsächlich bedeutet, dass wir den Kundenteil unserer Anwendung erfolgreich vorbereiten , den Goodwill später implementieren. 5. Konfigurieren von Servern: In diesem Video möchte ich unseren Back-End-Teil unseres Projekts darauf vorbereiten , mit der Implementierung zu beginnen. Wie Sie hier sehen können, ist es völlig leer. Also was wir hier erstellen werden, was wir eigentlich tun müssen, müssen wir Paket-JSON-Datei mit bekannten initialisieren. Also hier können wir npm in Not schreiben und es wird für uns eine Paket-JSON-Datei erstellen. Hier müssen wir einige Fragen beantworten. Normalerweise drücke ich bei allen einfach die Eingabetaste. Für uns spielt es keine Rolle. Und am Ende drücken wir einfach auf Ja und wir sind bereit. Jetzt können wir springen und den Redakteur verlassen und außerhalb unseres Clients zu unserem Server gehen. Jetzt haben wir hier nur eine einfache Datei, Beckett Jason mit Namen, Versionsbeschreibung, Hauptskript, wo wir nichts im leeren Autor und der Lizenz haben . Jetzt müssen wir zwei Pakete installieren, die uns helfen, unser Backend-Projekt zu erstellen. Also hier können wir Impairments Stil schreiben. Und nach diesem Nicht-Dämon minus d, was bedeutet das? Zuallererst, was ist kein Dämon? Dass dies ein spezielles Paket ist , das uns hilft, jedes Mal neu zu laden , wenn wir eine Datei ändern , unsere Back-End-Anwendung. Und genau das macht Angular im Client schnell. Aber in unserem Back-End-Projekt gibt es keinen Webserver , der das schnell macht. Deshalb habe ich, als Stalin und ein Dämon, und wie Sie hier sehen können, die Option minus d verwendet, was eigentlich bedeutet, dass in unserem Paket Jason kein Dämon innerhalb der Entwicklungsabhängigkeiten installiert wurde. Und Entwicklungsabhängigkeiten sind Abhängigkeiten, die wir bei der Entwicklung eines Projekts verwenden. Wir brauchen keinen Dämon in der Produktion. Das ist nur für die Entwicklung gedacht. Und unser nächstes Paket heißt Ts node und dient auch nur zur Entwicklung. Hier schreiben wir den Knoten npm install Ts minus t, was bedeutet, dass es sich um eine Entwicklungsabhängigkeit handelt. Was macht Node also? Dies ist nur ein Prozess , der unseren TypeScript-Code im laufenden Betrieb in JavaScript-Code überträgt, der genau wie normaler JavaScript-Code innerhalb des Knotens ausgeführt wird. Das ist extrem effizient , da wir TypeScript-Code schreiben wollen. Deshalb müssen wir es zuerst von TypeScript in JavaScript umwandeln . Und dieses Paket hilft dabei auf sehr einfache Weise. Jetzt springen wir und sagen Beckett Json und überprüfen, was wir haben. Wir haben hier Abhängigkeiten zu entwickeln. Und hier möchte ich ein neues Skript erstellen, brauche aber den Skripttest nicht. Wir wollen hier unseren Webserver starten. Das ist y, hier ist ein Skriptstil, und hier können wir einem Dämon den Pfad zu unserer Datei nennen. Und hier möchte ich den Quell-Slash server.js schreiben. Und wie Sie hier sehen können, haben wir die server.js, die wir in einer Sekunde erstellen werden. Das ist also die TypeScript-Datei und der interessanteste Teil hier, den wir nicht angegeben haben, dass wir hier den Ts-Knoten in keinem Daemon verwenden . Daemon macht es automatisch aus der Box, wenn wir Tier snowwed installiert haben und hier keine JavaScript-Datei, sondern eine TypeScript-Datei angegeben haben. Und das Letzte , was wir tun müssen ist die Konfigurationsdatei zu erstellen, die eine Konfigurationsdatei für TypeScript ist. Das ist hier in einem Service-Ordner. Ich möchte eine neue Datei erstellen, ts config dot json. Hier werde ich einen solchen Konflikt einfügen und das ist ein super typischer Konflikt für Anwendung Node.js mit TypeScript. Also hier setzen wir Compiler-Optionen. Genau so wird TypeScript unseren Code von TypeScript nach JavaScript übertragen. Das Modul CommonJS bedeutet also, dass wir unser TypeScript im Backend innerhalb der Nomen-Truhe schreiben. Und unser Ziel ist atmosphärische Optik, weil Node an meinem Skript problemlos sechs Code lesen kann. Unsere Modusauflösung ist also node, weil wir in Substantivstühlen schreiben, bewegen Sie sich auf Quellkarten. Hier kommt die Quellzuordnung durch. Unser Deal ist Verzeichnis. Die Ausgabe wird generiert. Hier haben wir einen dist Ordner, automatisch erstellt wird. Wir haben hier auch strict true NDS module inter pop, und wir brauchen diese Option ja module inter Pope um korrekt zu konvertieren sind TypeScript-Eingaben innerhalb des bekannten Jazz erforderlich. Wir haben also erfolgreich unsere TypeScript-Konfiguration erstellt, und jetzt können wir unseren Quellordner und in dieser Datei erstellen , da sich unser Server, wie Sie hier sehen können, innerhalb des Quellservers Ts befindet. Also springe ich in eine solche Quelle und erstelle einen Dateiserver-Punkt ts. Und vergiss Ts NodeJS nicht. Jetzt können wir reinspringen und einfach den Konsolenprotokollserver schreiben , nur um zu testen, ob er funktioniert. Jetzt werde ich in die Konsole springen und hier im Serverordner kann ich npm start schreiben, wie Sie hier sehen können, haben wir eine Ausgabe von no demon, was völlig in Ordnung ist. Es werden TypeScript-Dateien hier und hier gewaschen. Kein Dämon hat unseren Ts-Knoten-Quellserver-Test gestartet, was eigentlich bedeutet, dass er einfach den Ts-Knoten darin verwendet, aber unseren Server neu startet. Und das ist der Ausgabeserver , den wir in diese Datei geschrieben haben. Und jetzt startet Demon Bull unseren Server jedes Mal neu , wenn wir einige Änderungen vornehmen. 6. Installieren von Datenbanken: In diesem Video werden wir über die Styling-Datenbank auf Ihrer Maschine sprechen . Und es gibt noch eine andere Dimension, in der wir MongoDB hier verwenden werden. Was war die Idee? Wir müssen auf unserer lokalen Maschinendatenbank installieren , damit wir dort speichern und von dort einige Daten lesen können dort speichern und von dort einige Daten lesen , die wir in unserer Anwendung verwenden werden. Diese Daten werden für uns lokal live verfügbar sein. In dem Moment, in dem wir unser Projekt für die Produktion bereitstellen möchten , müssen wir die Datenbank für die Produktion einrichten , und wir werden dies am Ende dieses Kurses tun. Jetzt stellt sich die Frage, wie wir MongoDB auf Ihrem spezifischen Computer installieren können und Sie in verschiedenen Betriebssystemen arbeiten können. Wir wollen also etwas, das überall problemlos funktioniert. Die Installation der Datenbank kann immer einige Schwierigkeiten haben. Wie Sie sehen können, habe ich bereits die offizielle MongoDB-Website mit der Installation von MongoDB geöffnet die offizielle MongoDB-Website . Dies ist die URL, mit der Sie sie überprüfen können, wenn Sie interessiert sind, und sie sieht wirklich einfach aus. Wir wählen hier einfach ein operatives System. Also hier klicke ich auf den Link MongoDB Download Center. Und ich bin jetzt hier auf dieser Webseite. Und an dieser Stelle ist schon nicht wirklich klar, welche MongoDB wir installieren müssen. Es gibt verschiedene Versionen davon. Es gibt kostenlose Versionen , die wir verwenden möchten, und die kostenpflichtigen Lösungen , die wir nicht benötigen. Und eigentlich müssen wir hier ein bisschen kriechen und hier den MongoDB-Community-Server sehen. Eigentlich ist diese MongoDB-Community der Name der kostenlosen Version von MongoDB, die wir verwenden möchten. Also hier rechts können wir die Version auswählen aktuell ist völlig in Ordnung. Jetzt ist hier Ihre Plattform, vielleicht Windows, und jetzt laden Sie sie einfach herunter und installieren sie. Also doppelklicken wir einfach hier rein und installieren es. Danach gibt es jedoch einige zusätzliche Schritte. Wir müssen das Datenverzeichnis einrichten. Hier können Sie sehen, dass sie es in der Befehlszeile wie dieser tun . Und dann können Sie MongoDB so installieren. Das ist völlig in Ordnung. Das ist der offizielle Weg, aber tatsächlich hatten meine Schüler viele Probleme bei der Verwendung von Datenbanken mit offizieller Installation. Warum ist das so? Denn tatsächlich jedem einzelnen Betriebssystem können Sie in jedem einzelnen Betriebssystem einige Probleme haben. Zusätzlich müssen Sie einen Ordner erstellen, dann müssen Sie den Pfad angeben usw. Es ist schwieriger. diesem Grund empfehle ich Ihnen dringend die zweite Möglichkeit in Betracht zu ziehen, wie Sie die Datenbank auf Ihrem Computer installieren können. Und dann spreche ich hier über DACA und über Docker Desktop. Was ist Docker? Dies ist ein spezielles zusätzliches Tool , das Sie nicht lernen sollten, aber Sie können es einfach verwenden. Die Hauptidee ist, dass Docker alles in den Container packt. Es ist vollständig isoliert und hat nichts mit Ihrem Betriebssystem zu tun. Docker funktioniert auf allen Betriebssystemen und ist kostenlos, was eigentlich die Idee bedeutet , dass wir Docker zunächst auf Ihrem Computer installieren . Und zweitens verwenden wir das offizielle Mongo-Image von Docker. Wie Sie hier sehen können, der Link für Mongo , der von MongoDB selbst unterstützt wird. Das ist also kein Tool von Drittanbietern. Das ist super offiziell und die Hauptidee ist, dass dieser Mongo in einem Container verpackt ist, sodass er vollständig isoliert auf Ihrer Maschine ist und Sie einfach aus dem Container, dem Hafen, in dem Sie können verbinden und Daten in diesen Container schreiben. Und so wird es aussehen, wenn du damit anfängst. Wie Sie hier links sehen können, muss es grün sein. Und an diesem Punkt, weißt du, okay, mein Docker läuft und für dich wird die Liste hier wahrscheinlich leer sein. Das ist völlig in Ordnung. Die Hauptidee ist, dass Sie Docker zunächst auf Ihrem Computer starten. Danach springen wir einfach zur Konsole und müssen einen solchen Befehl ausführen, wie Sie hier sehen können. Ich habe docker run geschrieben und nachdem Sie Docker Desktop auf Ihrem Computer installiert haben, können Sie Docker in die Konsole. Dies ist der bekannte Name, und hier schreiben wir docker run dann minus d, was bedeutet, dass dies ein abgetrennter Prozess sein muss, was eigentlich bedeutet, dass wir ihn nicht hier in diesem Terminal ausführen wollen . Wir wollen es nur vom Terminal trennen. Hier geben wir Ports an und danach geben wir den Namen mongodb an. Und hier, Mongo, dieser Name, ist mongodb der Name des Containers auf meinem Computer. Und hier, was wir herunterladen wollen, das ist genau das Bild, das wir verwenden werden. Hier verwenden wir Mongo 404. Sie können auch eine spätere Version verwenden, hier können Sie sie auf der offiziellen Website des Mongo oder hier im Docker überprüfen auf der offiziellen Website des . Wie Sie sehen können, können Sie hier klicken Tags, ein wenig scrollen. Sie können beispielsweise die neueste Version verwenden oder einfach die Version überprüfen, wie Sie hier sehen können, die neueste Version ist 507. In diesem Moment habe ich auf meinem Computer für 0 für installiert, aber das macht keinen großen Unterschied. Die Dinge, die wir in MongoDB ausprobieren werden, sind bei all diesen Versionen gleich. Jetzt schlage ich hier und Docker wird dieses Bild auf meinen Computer herunterladen. Wie Sie sehen können, habe ich außer einem Hash überhaupt keine Ausgabe erhalten . Und das liegt daran, dass MongoDB bereits von Docker auf meinen Computer heruntergeladen wurde. Das ist also kein Problem, und diese Linie hat Mongo DB einfach wieder auf meinem Computer gestartet. Und tatsächlich, wenn ich jetzt das Docker-Tool öffne, können Sie hier eine MongoDB sehen und sie ist grün weil sie gerade läuft und wir mit ihr sprechen können. diesem Grund müssen Sie, wie Sie sehen, keine zusätzlichen Dateien erstellen. Sie müssen sich nicht um einige Berechtigungen oder Ordner kümmern. Es funktioniert einfach. Und dies ist eine einzelne Linie , die für viele Projekte verwendet wird. Nun ist die Frage offensichtlich, wie wir in die Konsole von MongoDB springen können , wenn sie sich im Container befindet. Und dafür haben wir einen speziellen Befehl, docker exec, was bedeutet, IT ausführen. Und hier ist der Name unseres Containers. In unserem Fall war es MongoDB. Und danach schreiben wir unseren Befehl und wir wollen Mongo hierher kommen , weil dies im Container installiert ist. Innerhalb des Containers kann was auch immer installiert werden. In unserem Fall enthält dieses Mongo-Bild einfach Mongo. Deshalb drücken wir die Eingabetaste. Wir bekommen hier viele Nachrichten von MongoDB. Und wie Sie danach sehen können, bin ich jetzt hier im Terminal von Mongo innerhalb des Containers, und sie können hier einige Mongo-Befehle schreiben. Zeigen Sie zum Beispiel Datenbanken, Semikolon, ich drücke die Eingabetaste, und Sie können sehen welche Datenbanken ich hier habe. Nun könnte man sagen, okay, aber ich habe Docker nicht benutzt, MongoDB nur auf offizielle Weise installiert , was sollen sie tun? Und eigentlich musst du nur eine einzige Sache tun. Wenn Sie es auf offizielle Weise installiert haben, haben Sie zwei verschiedene Befehle in Ihrer Konsole. Zuallererst wird es ein Gottes Befehl sein, und dies wird genau so beginnen, wie wir es mit dem Docker Run MongoDB-Prozess auf Ihrem Computer getan haben , was tatsächlich bedeutet, dass die Datenbank ein Prozess ist läuft auf Ihrem Computer. Und der zweite Befehl, den Sie verwenden möchten, ist Mongo. Dieser Befehl springt direkt in die Konsole ein, genau wie wir es mit dem Drehmoment getan haben. Es wird genauso sein. Das Wichtigste in diesem Kurs ist, dass Ihre Datenbank Mongo während der Entwicklung des Projekts direkt auf Ihrem Computer ausgeführt werden muss direkt auf Ihrem Computer ausgeführt werden . Was bedeutet, dass du wirklich drei Dinge hast. Zuallererst haben Sie eine Standarddatenbank. Zweitens habe ich den Webserver für das Backend gestartet. Und der letzte ist der statische Webserver für das Frontend. 7. Benutzst du einen guten Editor?: Wir sind fast fertig mit der Subtypisierung all unserer Tools. Und die letzte Frage , die ich dir stellen möchte, benutzt du wirklich den richtigen Editor? Denn eigentlich werden wir eine Menge TypeScript in Ihren Editor schreiben . Und der Editor unterstützt TypeScript nicht so gut, dann denken Sie vielleicht darüber nach, einen anderen Editor zu verwenden. Wie Sie hier sehen können, bin ich in meinem Editor, das ist Vim, aber ich schlage es Ihnen nicht vor. Ich will nur zeigen, wovon ich spreche. Wie Sie hier sehen können, wo die Komponente in Angular eingefügt wird und hier haben wir die Eingabe unserer Komponente. Normalerweise, wenn wir den Code mit schreiben , invertiert nicht mit schreibe einfach etwas wie add component oder vielleicht einfach add than comp. Und dann haben wir eine automatische Vervollständigung. Und das kannst du hier sehen, wir können eine Menge Sachen auswählen. Wir wollen eigentlich eine Komponente von Angular eingeben. Er tendierte nicht nur dazu, hier zu sein. Und zuallererst wurde es bis zum Ende automatisch vervollständigt. Und zweitens habe ich diese äußere Eingabekomponente von Angular com bekommen. Und es ist äußerst wichtig , dass Ihr Redakteur dies kann. Sie benötigen wirklich Unterstützung für diese äußeren Eingaben, wenn Sie Code schreiben. Denn jedes Mal, wenn Sie eine Eingabe schreiben müssen, wenn Sie sie wirklich von Hand machen wie die Eingabekomponente aus, und Sie wissen nicht wirklich, aus welchem Paket Sie sie eingeben müssen. Das ist nicht effizient. Du verbringst einfach Zeit damit, Code für Ron-Dinge zu schreiben. Wir brauchen diese Funktion des äußeren Eingangs wirklich. Und das zweite Feature ist offensichtlich, dass Sie eine Unterstützung von TypeScript in Ihrem Editor haben möchten , was bedeutet, dass wir etwas schreiben, das nicht korrekt ist. Zum Beispiel, nicht hier auswählen, sondern nur auswählen, wo Sie direkt hierher gelangen, ein Nachrichtenargument vom Typ select existiert nicht für type component, was eigentlich bedeutet, aber keine Zeit verbringen etwas Magie debuggen. Wir sehen unseren Tippfehler einfach dort direkt im Editor. Sie können hier jeden Editor verwenden , der TypeScript unterstützt. Aber wenn Sie nicht wissen, welchen Editor Sie verwenden sollen, empfehle ich Ihnen dringend, sich VS Code anzusehen. Dies ist ein völlig kostenloser Editor , der auf jedem einzelnen Betriebssystem funktioniert. Sie installieren es einfach. Sie erhalten einen solchen Editor mit integrierter Unterstützung von TypeScript sofort, was bedeutet, dass Sie all diese Funktionen in Ihrem Editor haben. Und in diesem Fall ist es für Sie viel reibungsloser, Code zu schreiben. 8. Einrichten von Socket mit Express: In diesem Video beginnen wir mit der Entwicklung unseres Projekts. Und eigentlich ist das Ziel dieses Videos unseren Backend-Server mit Express, MongoDB und Socket IO einzurichten . Also lass uns anfangen. Hier. Wir müssen mehrere neue Pakete installieren. Zunächst möchten wir zum Ausdruck bringen, dass dies ein Rahmen ist. Deshalb möchte ich in die Konsole springen. Und wie Sie sehen können, wo innerhalb des Stammordners dies gezeichnet ist, wollen wir hier keine Pakete installieren , da wir zuerst in unseren Serverordner springen müssen in unseren Serverordner springen Boop will Pakete installieren. Hier bin ich in npm install express richtig. In diesem Fall installieren wir dieses Framework als Abhängigkeit. Hier können Sie sehen, dass wir jetzt eine neue Abhängigkeit haben, drücken Sie dies als unseren Rahmen aus. Das nächste, was wir installieren wollen, ist Mungo. Und wenn Sie nicht wissen, was Mongoose ist, ist dies das beliebteste Paket für die Arbeit mit MongoDB in bekannten Stühlen. Warum es am beliebtesten ist, weil Sie damit einfach Ihre Verbindung zur MongoDB einrichten können , können Sie Ihre Modelle erstellen und korrekter mit MongoDB arbeiten , indem Sie mit Modellen arbeiten. Sie haben also normalerweise so etwas wie ein RAM und wir werden in den nächsten Vorlesungen Mongoose steiler lernen. Und das Letzte , was wir hier installieren wollen, ist Socket IO. diesem Grund installiert npm Socket Dot Ion. Und das ist genau unsere Bibliothek, um mit WebSockets in bekannten Stühlen zu arbeiten. Wie Sie sehen können, sind alle unsere Abhängigkeiten installiert und jetzt können wir in set source, Server Ts springen , und wir haben hier nichts. Und wir können mit der Konfiguration unseres Sirups beginnen. Aber eigentlich ist hier die Frage. Es ist wirklich einfach, einfach Ihren Code für Stratton Express zu schreiben . Ihre Entität ist wirklich einfach, einen Webserver für Socket IO zu erstellen, aber eigentlich ist es nicht so einfach, MongoDB Express und Socket IO zusammen zu konfigurieren . Denn was wir von ausdrücken wollen, wollen wir normale Runden, genau wie in der normalen Anwendung, aber wir wollen auch an seine Socket-IO binden , damit wir mit WebSockets arbeiten können. Und zusätzlich zu all müssen wir unsere MongoDB irgendwie starten. Also wie gesagt, es ist nicht einfach, aber das ist die Produktion weg, denn eigentlich braucht niemand nur ein einziges Paket. Wir wollen wirklich die ausgewachsene produktionsbereite Anwendung. Also zuerst werde ich hier unseren Express eingeben. ausdrücken. Und tatsächlich denkst du in diesem Moment wahrscheinlich, okay, was er tut. Er hat versucht, innerhalb von Nomenstühlen eine Umkehrung durchzuführen. Und eigentlich ist das völlig in Ordnung, weil wir nicht richtig hier sind. Javascript, wo genau hier drin, TypeScript. Und es ist mit unserer Konfiguration passiert. Und nur um Sie daran zu erinnern, dass wir unsere TS-Konfiguration haben. Dies geschah in ECMO ScriptSig, das inzwischen gelesen werden kann, Jess. Am wichtigsten ist jedoch, dass CommonJS und Node eine höhere Auflösung ist. Hier wird es nach Bedarf umgewandelt und es wird wie ein Zauber im Jazz wirken. Für uns ist es jedoch äußerst komfortabel, da Verwendung von Eingaben viel besser ist als die Verwendung von Rechten. Und hier haben wir ein nächstes Problem. Wie Sie hier sehen können, habe ich einen Fehler. Die Deklarationsdatei für das Modul wurde nicht gefunden. Was bedeutet es? Typescript versucht uns bei der Umkehrung zu helfen. Er kann es nicht sofort machen, weil TypeScript nichts über Express-Paket weiß. Und hier ist eine Lösung, die wir mit npm install save-dev installieren müssen , Typen express. So können wir zusätzliche Installationstypen für Expresspakete installieren und dann kann uns das Typskript klein helfen. Und genau das wollen wir tun. Wir müssen springen und Konsole und Recht und Zahlungen Tau setzen . Und hier ist bei Typen Slash Express, und hier ist wichtig minus der Option, es einfach als Entwicklungsabhängigkeit zu installieren. Wir brauchen diese Bibliothek nicht für die Produktion. Und wie Sie nach der Installation sehen können, ist dieser Fehler behoben. Und jetzt kann uns TypeScript bei Express helfen. Hier haben wir unser Express-Paket erfolgreich importiert und können jetzt unsere Anwendung erstellen. Also kann ich einfach hier schreiben const ab equals, und hier rufen wir Express. Und wie Sie jetzt sehen können, wenn ich Halite und Express bin, können Sie alle Arten von Ausdrücken aus diesem speziellen Paket sehen . Zum Beispiel können wir hier lesen, dass es eine Express-Anwendung erstellt , was für Entwicklungszwecke äußerst hilfreich ist . Das zweite , was wir tun wollen, ist, dass wir einen HTTP-Server erstellen müssen und Sie werden gleich sehen, warum. Also hier möchte ich destrukturieren, Server erstellen, und hier wird http sein. Wie Sie sehen können, holen wir ATP aus der Box und erstellen auch Server, da dies das Standardknotenpaket ist. Es kann jedoch vorkommen, dass Ihnen Schreibweisen für bekannte Stühle fehlen . Hier können wir direkt in die Konsole springen und npm install types node minus t schreiben . Und in diesem Fall installieren wir mit Sicherheit alle Typings , die für Nomenstühle benötigt werden. Also hier haben wir create server von http importiert. Jetzt müssen wir es benutzen. Nach der App können wir also unseren HTTP-Server erstellen. Und hier wollen wir unseren Create Server aufrufen und in unserer App bereitstellen. Und nur um Sie daran zu erinnern, App, dies ist eine Instanz unseres Express. Das ist unser Express-Server. Wir erstellen hier einen HTTP-Server. Das nächste, was wir hier eingeben möchten, ist Socket. Dies ist hier, wo wichtiger Server mit großem S aus dem Socket-IO-Paket. Und jetzt können wir direkt unseren Socket-Server erstellen. Also hier const ion, und hier nennen wir uns Server. Und im Inneren stellen wir unseren HTTP-Server bereit. Genau aus diesem Grund haben wir diesen HTTP-Server zuerst erstellt und bevor er ausgedrückt wird. Jetzt haben wir in dieser Datei drei verschiedene Dinge. Zunächst haben wir unsere App, damit wir direkt mit Express arbeiten können. Zweitens haben wir unseren HTTP-Server , den wir mit einem Port beginnen können. Die dritte ist unsere IR, sodass wir einige WebSockets-Anfragen stellen können. Und nur um zu überprüfen, ob alles funktioniert, möchte ich hier unsere App verwenden und es einfach ausprobieren apt-get slash. Deshalb wollen wir unsere neue Route auf Schrägstrich erstellen. Und hier brauchen wir nichts, aber ich möchte nur mit einer Zeichenfolge antworten. Deshalb können wir hier Anfragen und Antworten schreiben. Und hier im Rest ist Dot Send API aktiv. Wenn Sie mit Express nicht vertraut sind, erstellen wir auf diese Weise nur Spielrouten innerhalb unseres Backend-Servers. Also hier sagen wir, okay, wir erstellen jetzt get route für Schrägstrich, was für die Homepage bedeutet. Und hier ist unser Kohlberg. Innerhalb unseres Kohlbergs bekamen wir Anfrage und Antwort. Und hier können wir dot send verwenden, um die Zeichenfolge an diese bestimmte Runde zu senden. Das Letzte, was wir hier tun müssen, ist unseren Server zu starten. Also hier können wir einen HTTP-Server schreiben. Höre nicht zu und höre nicht. Wir stellen einen Port bereit, zum Beispiel für 1001. Danach haben wir einen Rückruf. Der Tower-Webserver ist ebenso erfolgreich wie talentiert. So können wir zum Beispiel in ein Konsolenprotokoll schreiben, dass unsere API auf dem Port lauscht. Und hier wird unser Teil sein. Und eigentlich wäre es isoliert gewesen, den Sport in eine zusätzliche Konfigurationsdatei zu legen , aber im Moment wird es auch gehen. Prüfen wir also, ob es funktioniert. Ich habe hier eine Registerkarte mit offenem API-Server. Und wie Sie hier sehen können, kein Dämon diesen Webserver immer wieder neu gestartet. Und irgendwann bekommen wir jetzt unsere Konsolenprotokoll-API hört auf Port 4.001, was tatsächlich bedeutet, dass sogar der Browser lokalen Host für 1001 öffnen wird. Sie können hier sehen, dass unsere Nachrichten-API aktiv ist, aber nicht tolerierbar ist. Ich möchte auch überprüfen, ob unsere Socket-Layer-Verbindung funktioniert. Deshalb können wir hier nach EB ir dot schreiben und hier haben wir einen. Und wie Sie sehen können, holen wir zunächst alle Typisierungen mit Socket Layer aus der Box. Wir müssen kein zusätzliches Paket installieren. Zweitens können Sie das in der Listener-Funktion zu unserem Socket-IO sehen , was eigentlich bedeutet, dass wir hier auf schreiben können, und wir stellen hier als ersten Parameter eine Verbindung zur Verfügung. Und tatsächlich ist dies die Standardaktion , die innerhalb von Socket IO ausgeführt werden kann. Und hier haben wir unseren Rückruf. Wir wollen hier vorerst nichts, aber wir können einfach console.log verbunden schreiben. Und wir können nicht wirklich sehen, dass die Socket-Layer für uns funktioniert , weil wir nur eine Registerkarte im Back-End gesetzt haben, aber nicht auf dem Client. Aber auf diese Weise schreiben wir unseren Socket Layer-Code das Backend und wir sind voll darauf vorbereitet. Also hier zappen wir, wir arbeiten mit Express mit einem Yard, wir arbeiten mit Socket Layer und HTTP-Server, die wir zum Starten des Servers verwenden. Und das Letzte , was wir hier tun müssen , ist unseren Mungo aufzustellen. Und nur um Sie daran zu erinnern, dass Mungos das Paket für die Arbeit mit MongoDB verwenden. Also hier oben möchte ich eingeben, dass man von Mungo geht. Und jetzt ist hier ein wirklich wichtiger Punkt. Sie möchten Ihre Webserver niemals starten bevor Sie eine Verbindung zur Datenbank hergestellt haben. Die Hauptidee ist, dass Sie in Ihrem Beobachter einige Anfragen an die Datenbank stellen werden und die Datenbank noch nicht bereit ist Dann können wir diese Anfrage ausführen, was eigentlich jedes einzelne Mal bedeutet wir wollen sicher sein , dass MongoDB ist, ihre Verbindung ist hergestellt. Und erst danach starten wir unseren Webserver. Das ist y hier was ich nach unserem Socket IO schreiben möchte, wir können hier Mongoose dot schreiben und wir haben hier eine Methode connect. Und eigentlich wollen wir im Inneren unsere Mongodb-URL angeben. Also was ich hier einfügen möchte ist dieses Jahr, es ist MongoDB Doppelpunkt zwei Schrägstriche, lokaler Host 27017 Port-Schrägstrich l Trello. Und tatsächlich ist dieser Teil auf der linken Seite der Standardpfad von MongoDB. Und es spielt keine Rolle, wie Sie Mongo DB auf offizielle Weise oder mit Docker-Container installiert haben, es wird genauso funktionieren. Entweder haben Sie einen laufenden MongoDB-Prozess auf Ihrem Computer, auf dem Sport, oder Sie haben eine laufende MongoDB innerhalb des Containers mit dem Sport, der draußen auf unserem lokalen Computer verfügbar ist. Hier nach dem Schrägstrich ist dies nur der Name, wie eine Datenbank Sie hier schreiben können, beliebiger Name und sie wird erstellt. Ich habe gerade hier l Trailer geschrieben, wie der Name unseres Projekts. Diese Zeile ist also eigentlich ein Versprechen. Deshalb können wir hier dot schreiben. Nachdem wir uns erfolgreich mit unserer MongoDB-Datenbank verbunden haben, wird dann ausgelöst. Und jetzt können wir zunächst schreiben , dass wir uns erfolgreich mit unserer Datenbank verbunden haben. Also kann ich hier in Verbindung mit MongoDB schreiben. Und ich möchte auch diesen HTTP-Listener hineinverschieben. In diesem Fall wird zunächst unsere Verbindung zu MongoDB hergestellt. Und danach starten wir unseren Server. Jetzt möchte ich in unseren Webserver springen und überprüfen, ob er funktioniert. Wie Sie jetzt sehen können, erhalte ich eine Nachricht mit MongoDB und nach dem Semester , dass unsere API erfolgreich war, der Standard, was bedeutet , dass dies genau unser Ziel ist. Zuallererst MongoDB. Zweitens unser Webserver. In diesem Moment erhalten Sie möglicherweise etwas Azure bezüglich der Verbindung hier. Und das beliebteste Problem , das Sie möglicherweise haben, ist, dass Sie Ihren MongoDB-Prozess nicht auf Ihrem Computer gestartet haben. Wenn es nicht gestartet wird, können wir keine Verbindung zu einer MongoDB-Datenbank herstellen. Dann werden Sie hier wahrscheinlich einen Fehler bekommen, z. B. kann keine Verbindung zu Mongo DB herstellen oder Verbindung ist fehlgeschlagen. Wenn Sie jedoch auf Ihrem Bildschirm eine Verbindung zu MongoDB sehen und die Zahlung gestartet ist, bedeutet dies, dass Sie alles erfolgreich konfiguriert haben. Und wir haben unseren Webserver im Backend mit MongoDB und Socket IO gestartet . 9. Erstelle eines Mongoose: In diesem Video werden wir über die Erstellung unseres Benutzermodells sprechen . Eigentlich wird jetzt Application Boot registrierte Benutzer starten. Damit wir uns als aktueller Benutzer mit dem Benutzer anmelden können, was bedeutet, dass wir unsere Benutzer im Frontend, im Backend und in der Datenbank irgendwie behandeln müssen unsere Benutzer im Frontend, im Backend und in der Datenbank irgendwie behandeln . In diesem Video konzentrieren wir uns also auf Mungo und Datenbank. Wieder einmal, was ist Mungo wurde dieses Paket bereits in R-Paket JSON installiert. Sie können Mongoose hier sehen, aber was es im Wesentlichen tut, ist die offizielle Website von Mongoose. Sie können das Beispiel hier sehen. Also injizieren wir menschliche Güter und wir stellen Mongoose Dot Connect her. Und hier ist eine MongoDB-Datenbank. Danach können wir das Mungo-Modul cat schreiben, und wir definieren, dass unsere Katze einen benannten String hat, was tatsächlich bedeutet, dass cat unsere Entität ist. Und jetzt können wir diese Entität direkt in JavaScript erstellen. Hier sind wir direkt in Großbritannien, und wir geben innerhalb des Namens an. Also haben wir hier eine Katze geschaffen, die nur ein Objekt ist. Aber jetzt haben wir in Katie eine Speichermethode. Und diese Methode wird als Versprechen zurückgegeben, was tatsächlich bedeutet, dass wir den Datensatz auf diese Weise in MongoDB speichern. Jetzt fragst du dich vielleicht, okay, warum brauchen wir Mungo? Warum wir nicht einfach den offiziellen MongoDB-Treiber wie mongodb dot save verwenden und in ein Objekt werfen können , das wir speichern möchten. ist nicht angenehm, in dem riesigen Projekt zu arbeiten, selbst im mittleren Projekt, es ist nicht so bequem weil Sie keine Abstraktion haben. Sie schreiben Super-Low-Level-Code, wie Sie Daten in der Datenbank speichern müssen oder wie Sie sie lesen werden. Aus diesem Grund bevorzugen wir die Verwendung Rampen in unseren Backend-Projekten. Was sind Ram Dass schnell, wir definieren so etwas wie Modelle, die unsere Entitäten in unserem Projekt sind. Zum Beispiel haben wir einen Benutzer , der vielleicht Aufgaben hat, oder Sie haben Boards, wenn wir über Trail-Anwendungen sprechen und so weiter. Und dann können wir definieren , welche Beziehungen zwischen diesen Modellen bestehen. Und dann werden all diese Beziehungen auf viel einfachere Weise hergestellt. Wir können es selbst mit MongoDB machen, was bedeutet, dass wir einfach weniger Code schreiben. diesem Grund möchten wir uns in diesem Video auf unser Benutzermodell konzentrieren. Und das erste, was ich innerhalb der Quelle tun möchte, möchte ich den Typenordner erstellen. Und eigentlich sind wir hier drin TypeScript, was bedeutet, dass wir es nutzen müssen. Und das ist extrem wichtig , um mehr Zeit in TypeScript zu investieren als in das Schreiben Ihres Codes. In diesem Fall ist es für Sie einfacher , Ihre Anwendung zu entwickeln. Hier in Quelltypen möchte ich Benutzeroberflächenpunkte erstellen. Und wie Sie hier sehen können, habe ich diese Notation, in der wir ein Postfix dessen haben , was genau es ist. Im Inneren möchte ich unseren neuen Interface-Benutzer erstellen. Und wenn Sie TypeScript nicht wirklich gut kennen, ist dies nur eine Definition des Objekts, die wir überall verwenden können. In diesem Fall verwenden wir hier die Word-Schnittstelle, die ein reserviertes Wort in TypeScript ist. Und hier definieren wir einen Schnittstellenbenutzer und wir können definieren, welche Felder wir in unserem Benutzer haben. Zunächst müssen wir eine E-Mail erstellen, da wir in der Anwendung E-Mail verwenden , um den Benutzer zu registrieren, diesen Benutzer zu validieren und dann eine E-Mail an den Benutzer zu senden. Außerdem benötigen wir hier einen Benutzernamen und dieser wird gestreamt und ein Passwort wird ebenfalls benötigt. Und natürlich müssen wir ein Passwort hashen und niemals Passwörter stoppen, nur als eine Flugzeugbelastung. Und zu guter Letzt wird hier erstellt, wir müssen dieses Feld nicht verwenden, aber es ist wirklich schön, es zu haben, allem für Debugging-Zwecke. Und zweitens können wir es von Mongoose sofort nach dem Auspacken bekommen und es wird ein Datum sein. So sieht also eine Benutzeroberfläche aus. Jetzt können wir in unserer gesamten Anwendung, unserer Backend-Seite, auf unserer Backend-Seite, diese Benutzeroberfläche verwenden. Jetzt auf der rechten Seite möchte ich ein Modell für diesen Benutzer erstellen. diesem Grund können wir in der Quelle einen neuen Ordner erstellen , der als Modelle bezeichnet wird. Und im Inneren können wir Benutzerpunkte registrieren, und das ist unser Modell. Das ist genau etwas für Mongoose. Was ich hier schreiben möchte, ist unser Benutzerschema. Und was es hier bedeutet, definieren wir ein Schema unseres Modells. Und dafür verwenden wir ein neues Schema. Und wie Sie sehen können, habe ich keine automatische Vervollständigung. Versuchen wir also, das Schema hier zu importieren. Und wie Sie sehen können, habe ich hier keine korrekte Eingabe. Ich habe eine weitere Eingabe von Inspector, und das ist nicht korrekt. Also tippe ich hier ein Eingabeschema von Mungo. Prüfen wir, ob wir einen Fehler haben. Wir haben keinen Fehler, was bedeutet, dass dies nur ein Problem meines Redakteurs war. Hier kann ich das Schema überprüfen, was bedeutet, dass es wirklich mit TypeScript verfügbar ist. Hier sind wir genau in deinem Schema. Und jetzt können wir in runden Klammern unser Objekt definieren, aber das Schema ist nicht das, was wir in der Anwendung verwenden werden. Es sollte ein Modell sein. diesem Grund können wir hier schreiben , dass dann das Standardmodell exportiert wird. Und dieses Modell stammt auch von Mongoose. Also lass uns hier ein Komma-Modell setzen. Und hier ist model eine Funktion , bei der wir unsere Saite bereitstellen. Es wird mit großem Farbton verwendet. Und es gibt ein zweites Argument. Wir stellen hier ein Benutzerschema zur Verfügung. So definieren wir ein Modell in Mongoose. Hier können wir also das Standardmodell, das wir hier angeben, sowie den Namen und unser Schema exportieren . Und hier müssen wir unser Schema definieren. Aber wir haben Recht mit TypeScript. Und eigentlich ist es nicht der beste Weg, ein neues Schema zu erstellen. Warum ist das so? Hier heben wir unser Schema hervor und Sie können sehen, dass eine Menge n hier ist und das ist schlecht. Warum ist das so? Weil wir keinen Typ unseres Schemas definiert haben. Deshalb wollen wir das tun. Wir möchten eine Definition des Schemas für einen Benutzer erstellen. Also möchte ich hier links springen und hier eine Expertenschnittstelle erstellen. Es ist also eine neue Oberfläche für Benutzerdokumente. Hier ist ein riesiger Unterschied, wir haben hier eine Schnittstelle für den Benutzer. Dies ist nur ein Benutzer mit den Feldern und dies ist ein Dokument verwenden. Das verwenden wir nur für Mungo. Und hier möchte ich x tans schreiben. Und wenn Sie nicht wissen, womit es erweitert wird, nehmen Sie einfach alle Felder von unserem Benutzer hier. Also möchte ich hier schreiben erweitert Benutzerkomma-Dokument. Und eigentlich muss dieses Dokument von Mongoose geladen werden. Also hier oben muss ich ein Eingabedokument von Mungo schreiben. Und eigentlich müssen wir vorerst nichts im Inneren bereitstellen. Und du fragst jetzt vielleicht, okay, aber es ergibt keinen Sinn Was ich getan habe, war hier draußen. Wir haben ein Benutzerdokument für die Benutzeroberfläche erstellt. Hier sind wir einfach erweiterter Benutzer und Dokument. Und ja, das ist sinnvoll, denn zuallererst haben wir unseren Interface-Benutzer. Wir können es überall benutzen. Das ist unser Teil, aber wir mischen es auch mit dem Dokument. Und das Dokument kommt von Mongoose. Dies ist die Definition des Dokuments und ein schneller wichtiger Teil ist zum Beispiel dieses AD, da jedes einzelne Dokument in mongodb NAD hat. Und in diesem Fall müssen wir hier nicht angeben, dass der Benutzer AD hat, es stammt aus dem Dokument des Mungos. Und jetzt können wir hier rechts springen und oft das Schema verwenden. Wir können in Tanks ein Benutzerdokument bereitstellen , das wir gerade erstellt haben. Und jetzt kann ich es hier oben eingeben. So ist es von unserer Typen-Benutzeroberfläche. In diesem Fall sagen wir hier, dass unser Benutzerdokument das ist, was wir innerhalb unseres Benutzerschemas bereitstellen müssen . Und genau das Gleiche können wir mit unserem Modell machen , hier können wir unser Benutzerdokument bereitstellen. Und wenn Sie nicht wissen, was dieser Teil bedeutet, ist dies eigentlich ein generischer Typ, was eigentlich bedeutet, dass wir hier einen generischen Typ anbieten. Es kann alles sein, was standardmäßig es war. Aber wenn wir jetzt unser Schema überprüfen, können Sie sehen, dass es kein Schema mehr ist. Hier haben wir unser Benutzerdokument, und das ist extrem wichtig für uns und für die TypeScript-Validierung. Denn eigentlich hier, jetzt in dem, was ich tun möchte, möchte ich etwas werfen , das nicht innerhalb des Benutzers existiert. Nehmen wir zum Beispiel an , wir haben innerhalb des Benutzereigenschaftsformulars. Und hier drinnen wollen wir den Typ is string angeben. Und ich speichere das und gehe dann hier rein und schränke das Argument vom Typ foo ein, das nicht dem Parameter des Typs zugewiesen werden kann. Und hier können wir unseren E-Mail-Benutzernamen sehen, Passwort erstellt, Unterstrich-ID hinzufügen, die aus dem Dokument und hier zur Unterstreichung der Version kommt . Was eigentlich bedeutet, wenn wir dieses Benutzerdokument hier nicht mit ausprobieren , erhalten Sie keine Validierung von TypeScript. Es ist äußerst wichtig , dass wir es bekommen. Stellen Sie jetzt in der Maske alle Felder bereit. Chairman d'etre für unseren Benutzer. Und fangen wir mit der E-Mail an. Also hier ist unser Feld E-Mail und dann gesagt, Wir müssen den Typ angeben, es ist eine Zeichenfolge. Zweitens können wir hier die erforderliche Eigenschaft sagen und wie Sie sehen können, hilft uns TypeScript und zeigt welche Eigenschaften wir Einsicht bieten können Mongoose. Also eigentlich innerhalb erforderlich, kann aber ein Array mit einigen gültigen Daten und Nachrichten bereitstellen . Denn eigentlich wollen wir im Frontend eine nette Nachricht zeigen , wenn unsere E-Mail nicht gültig ist. Es ist also nicht nur eine Zeichenfolge. Dies ist eine ungültige E-Mail. Und dafür können wir hier auf dem Top-Validator eingeben. Also hier möchte ich gültige Daten für John Validator eingeben. Und wie Sie sehen, bekommen wir ein Fehlermodul. Validator ist nicht installiert, also müssen wir in unseren Server springen. Hier stoppe ich Webserver und sie werden hier Beeinträchtigungen tau gültige Daten schreiben , aber das ist nicht tolerierbar. Ich möchte auch Typen für dieses Paket erhalten. Dies ist hier bei Typen Schrägstrich gültige Daten, aber es muss im Entwicklungsmodus installiert werden. Also hier, vergiss nicht, minus t. Wir können jetzt auf der rechten Seite öffnen, sind JSON gepackt und wie Sie hier in den Entwicklungsabhängigkeiten sehen können, habe ich Typenvalidator und Abhängigkeiten validiert. Jetzt haben wir hier keinen Fehler für die gültigen Daten, sodass wir sie innerhalb von required angeben können. Und eigentlich liege ich hier ein bisschen falsch. Dies ist kein erforderliches Feld, da stattdessen mit einfach angeben erforderlich ist, ob es erforderlich ist oder nicht. In unserem Fall ist eine E-Mail erforderlich. Hier können wir als zweiten Parameter eine Fehlermeldung ausgeben, wenn sie leer ist. Und hier können wir E-Mail angeben, ist erforderlich. Und danach haben wir unsere Bestätigung. Hier haben wir eine Eigenschaft validieren, und genau hier wollen wir unseren Validator verwenden. Also hier kann ich validator dot schreiben und wir bekommen wegen der Typen eine nette automatische Vervollständigung. Und hier schreibe ich seine E-Mail. Also hier haben wir viele Validierungen. Und wo ich sofort eine E-Mail-Bestätigung erhalte. Und es gibt ein zweites Argument, das wir hier angeben können , die ungültige E-Mail. guter Letzt möchte ich Indizes erstellen. Und wenn Sie nicht wissen, was Indizes sind, sind dies Dinge, die Ihre Datenbankanforderungen beschleunigen können . Und zweitens kann es beispielsweise ein E-Mail-Feld eindeutig machen . In diesem Fall möchte ich Create-Indizes schreiben. Und hier als Objekt biete ich Einblicke, einzigartig, wahr, was es tut, es liest unsere E-Mail ist ein eindeutiger Index in diesem Fall, aber kann nicht zwei Personen mit derselben E-Mail retten. Also stellen wir innerhalb des Mungo-Schemas wieder alle Felder bereit , die wir für unseren Benutzer benötigen. Und das erste Feld war hier eine E-Mail, muss aber einen Typ enthalten. Und das ist genau die Onload-Leitung , die wir standardmäßig benötigen. Aber eigentlich können wir hier erforderlich angeben , was wir in true oder false setzen können , hier können wir einige Validatoren bereitstellen und wir können Indizes erstellen. Und tatsächlich können wir all diese Sachen einfach innerhalb des MongoDB-Treibers der Ebene machen. Deshalb bevorzuge ich die Verwendung von Mongoose, weil es sich in einem Bereich befindet , in dem wir all diese Dinge aus der Box holen . Unser nächstes Feld ist unser Nutzername. Hier können wir also unseren Benutzernamen angeben und es wird einfacher. Erstens ist der Typ string, und zweitens muss required true sein. Und hier möchte ich auch den Validierungsfehler angeben. diesem Grund verwenden wir dieselbe Notation mit dem Array. Hier ist true und der Benutzername ist erforderlich. Jetzt können wir diesen Benutzer kopieren und einfügen , da es derselbe sein wird. Und das letzte, was wir hier haben, ist unser Passwort und unser Passwort ist Typ string, und es ist auch erforderlich, aber hier ist ein Passwort erforderlich. Und das Letzte, was wir tun wollen, ist falsch auszuwählen. Und was select false tut, wird dieses Feld niemals auswählen , wenn wir eine Anfrage stellen. Zum Beispiel möchten wir einen Benutzer nach ID aus der Datenbank abrufen . Wir werden dieses Feld nicht zurückbekommen. Und das ist äußerst wichtig, da unsere Anwendung dadurch sicher ist. Es spielt keine Rolle, welche Fragen wir schreiben. Wir wissen immer, dass wir kein Passwort zurückbekommen, was bedeutet, dass wir standardmäßig auf der sicheren Seite sind. guter Letzt wollen sie hier Zeitstempel bereitstellen. Also können wir hier innerhalb eines Objekts bereitstellen und hier Zeitstempel schreiben, und hier setzen wir es auf true. In diesem Fall wird unsere createDat-Eigenschaft direkt von mangoose generiert. Aber wie Sie hier sehen können, gibt es einen Tippfehler. Wir müssen das Thema hier nicht angeben. Es ist ein zweites Argument nach unserem Objekt, was eigentlich bedeutet, dass wir im neuen Schema als Funktion erstens dieses Objekt mit all unseren Feldern zur Verfügung stellen , und zweitens das Objekt mit timestamps wahr. Dies ist also das zweite Dokument darüber, wie das neue Schema aussieht. Wir sind also bereit mit dem ersten Teil unseres Modells. Aber wir haben hier ein wirklich großes Problem, wenn wir einfach versuchen, unseren Benutzer so zu benutzen. Zum Beispiel können wir hier einen neuen Benutzer schreiben und wurden in einem Objekt mit E-Mail-Benutzernamen-Passwort versehen. Und danach rufen wir sicher auf, dann speichert unser Benutzer dieses Passwort direkt als einfache Zeichenfolge. Das ist verboten, das ist falsch und wir sollten das niemals tun. Deshalb müssen wir dieses Problem beheben. Was wir dagegen tun können, müssen wir unser Passwort hashen bevor wir es in der Datenbank speichern. Und dafür können wir eine wirklich nette Bibliothek benutzen, die Krypta genannt wird. Und das ist die beliebteste Lösung. Hash das Passwort. Hier müssen wir in die Konsole springen und dieses Paket installieren. Also npm installiert sei crypt jazz und wir wollen auch Typings installieren. Also hier bei Typen Slash Crypt Jazz sein, aber offensichtlich muss es Breite minus t sein. Also lasst uns den Sound überprüfen. Ich springe zum Paket JSON. Und hier sehe ich Typen sind Christen in Entwicklungsabhängigkeiten und Krypto-Unabhängigkeiten. Das ist völlig richtig. Was wir nun hier tun können, können wir das Benutzerschema dot Prayer definieren. Und das ist die Möglichkeit, eine Funktion vor etwas auszuführen . Hier sind wir daran interessiert, einen Safe bereitzustellen, was bedeutet, dass wir unsere Funktion direkt vor dem Safe ausführen . Also hier möchte ich eine sinc-Funktion schreiben und sie werden sagen, warum ich hier Funktion und nicht Pfeilfunktion verwende in einer Sekunde sagen, warum ich hier Funktion und nicht Pfeilfunktion verwende. Es ist wirklich wichtig , es so zu schreiben. Und hier kommen wir als Nächstes. Und jetzt haben wir hier eine Klammer und wir können etwas drinnen machen. Die Hauptidee ist, dass wir hier mit unserem Objekt machen können, was wir wollen. Und danach, wenn wir zum Beispiel das Thema wechseln, müssen wir als nächstes anrufen und dann wird Mungo mit dem Speichern unserer Daten fortfahren. Und Pre-Sales bedeutet, dass diese Funktion zuerst nach Create und zweitens nach dem Update aufgerufen wird. Und genau das wollen wir. Zum Beispiel möchten wir nicht nur ein Passwort für den Benutzer erstellen, sondern auch später im Aktualisierungsformular aktualisieren. Und die erste Bedingung, die ich hier schreiben möchte , ist so. Wenn nicht, wird dieser Punkt geändert. Und wie Sie sehen können, haben wir eine Funktion geändert und wir können Einblickwort, Passwort zur Verfügung stellen , und dann wollen wir einfach nichts tun und als nächstes zurückkehren. Was wir also hier machen, wir prüfen, ob unser Passwortfeld geändert wurde. Es ist nicht der Fall wurde erstellt weil wir dort ein Passwort haben werden, aber es ist der Fall mit update wenn Vorschläge user und wir das Passwort nicht geändert haben, dann macht es keinen Sinn, sich zu bewerben diese Funktion. Das ist hier, wo Hühnchen, okay, wenn das Passwortfeld nicht geändert wird, dann sagen wir einfach für Mungo, mach weiter. Wie Sie hier sehen können, haben wir eine sinc-Funktion geschrieben und keine Fehlerfunktion. Und es ist wichtig hier, weil wir diese Eigenschaft hier nutzen wollen. Und um diese Referenz korrekt zu haben, müssen wir sie als Funktion schreiben und nicht als Pfeilfunktion, denn in einem anderen Fall wird dies ausgeführt und wir verwenden hier auch eine sinc-Funktion, weil Die Crypt-Operation wird synchron sein. Danach möchte ich try-catch schreiben. Und wenn wir einen Fehler bekommen, wird es Krypta sein, dann kommen wir in den Käfig. Hier, wir bekommen unseren Fehler und wir wollen diese Sarah als nächstes zurückgeben. Hier werfen wir als Fehler in Azure. Und du fragst vielleicht, okay, aber warum ist dieser seltsame Notationsfehler als Ära? Wenn Sie versuchen, einfach so zu schreiben, erhalten wir einen Fehler. Das Argument vom Typ unknown kann nicht einem Parameter vom Typ Callback error oder undefined zugewiesen werden, was tatsächlich bedeutet, dass innerhalb eines Käfigs jedes Azure unbekannt ist, was offensichtlich ist, weil dies skizzieren und wir wissen nicht, was passiert ist. Deshalb schreiben wir catch, aber eigentlich können wir einen solchen Pfeil nicht verwenden und wir können ihn als nächstes im Inneren bereitstellen Deshalb müssen wir einen Typ unserer Ära in etwas Sinnvolles umwandeln . In diesem Fall verwende ich den S-Pfeil und wir können Fehler in der nächsten Funktion bereitstellen. Das ist genau das, was wir hier machen. Jetzt müssen wir es mit unserer Logik versuchen, das Passwort zu hashen. Und dafür möchte ich oben unser großes geripptes js-Modul eingeben. Also gebe ich be Crypt Jazz von Big Rip Jazz ein. Und jetzt können wir in unserem Versuch zuerst ein Salz bekommen. Und wenn Sie nicht wissen, wo Sie Crypt generieren und zuerst salzen und dann haben wir eine Entschlüsselungsfunktion bereitgestellt , um das Passwort zu hashen. Das ist so, wir brauchen ein Salz. Und dafür sind wir Colin, der sein Dot Gen Salz gecrimpt hat. Wie Sie sehen können, ist dies eine Funktion, die synchron schnelles Salz erzeugt. Und hier können wir zum Beispiel zehn bereitstellen. Und das ist eine asynchrone Funktion. Hier müssen wir versuchen zu warten, damit es schnell Salz bekommt. Und jetzt müssen wir hier unser Passwort aktualisieren. Und tatsächlich wird diese Funktion aufgerufen, bevor wir diesen Datensatz gespeichert haben, was bedeutet, dass wir damit einen Verweis auf alle Felder haben , die wir speichern möchten. Und hier schreibe ich dieses Punkt-Passwort, um unser Feld zu ändern, das wir speichern möchten. Hier wollen wir einen Weight B Creep Chess Dot Hash und tatsächlich Hash zuweisen , wie Sie hier sehen können, haben wir unser Passwort und im Inneren müssen wir zunächst unser Passwort, dieses Passwort, angeben. Und zweitens salt, in diesem Fall wird unser Passwort gehasht und wir speichern nur einen Hash in unserer Datenbank. In diesem Fall wird dieses Passwort aktualisiert, nachdem wir das nächste Mal anrufen und es sicher tun müssen, dieses Passwort aktualisiert und wir werden den sauberen Datensatz speichern. diesem Grund wollen wir im Inneren return als nächstes schreiben und wir nennen es einfach, dies wird das Speichern für einen Datensatz in der Datenbank auslösen. Und der wichtigste Teil, der diese Logik innerhalb von Modal neu zeichnet , verkaufte diese Logik mit Speichern ist innerhalb des Modells vollständig isoliert. Und wenn wir Code schreiben , der sich auf den Benutzer bezieht, werden wir nicht einmal über diese Logik Bescheid wissen. Es ist alles im Modell enthalten. Es hat nichts damit zu tun, einen Benutzer zu finden oder den Benutzer zu retten. Es ist das, was innerhalb des Modells passiert. Das Letzte, was wir für die Zukunft benötigen ist die Funktion Passwort validieren. Warum brauchen wir es? Denn wenn wir versuchen, den Benutzer anzumelden, möchten wir nicht nur die E-Mail, sondern auch das angegebene Passwort vergleichen . Und wir haben eine wirklich nette Sache, die Methoden in Mongoose genannt wird. Hier können wir also Benutzerschema-Methoden schreiben, und hier möchten wir eine neue Methode erstellen, zum Beispiel das Kennwort validieren. Und tatsächlich funktioniert es genauso, wie zum Beispiel Methoden innerhalb von Klassen. So können wir unsere Instanz unseres Benutzers aufrufen. Diese Methode validiert das Passwort. Und hier müssen wir die Funktion bereitstellen. Und wieder schreibe ich hier nicht die Pfeilfunktion, sondern nur eine Funktion hier, indem ich ein Passwort als Parameter erhalte. Denn wenn wir ein Passwort vergleichen wollen, werden wir tatsächlich etwas bereitstellen , das wir vergleichen möchten. Dies ist y hier password ist eine Zeichenfolge, und hier drinnen möchten wir das angegebene Passwort mit unserem Passwort in unserer Instanz vergleichen das angegebene Passwort mit . Also hier können wir einfach zurückkehren be grip js dot compare. Und dies ist eine Funktion, um zunächst ein Flugzeugpasswort zu vergleichen, das von außen bereitgestellt wird. Und zweitens unsere Zeichenfolge, und das ist dieses Punktpasswort, das wir als Hash in unserem Datensatz speichern. Unsere letzte Nutzung wird also so aussehen, wo wir zum Beispiel hier drin einen Benutzer haben und ihn speichern wollen. Also hier haben wir einen neuen Benutzer. Wir müssen in unserer E-Mail angeben. Dann müssen wir hier einen Benutzernamen angeben, und dann geben wir hier ein Passwort. Danach werden wir versuchen, einen Benutzer zu speichern. Also hier werden wir use nennen. Es spart. Und tatsächlich, nachdem Colin so dünn ist, wird unsere Presse Save aufgerufen und wir werden das korrekte Passwort speichern. Aber nach dieser Zeile können wir auch ein Benutzerpasswort zur Punktvalidierung schreiben. Und hier können wir jedes Passwort angeben , das wir vergleichen möchten. Diese Funktion gibt für uns je nach Richtigkeit des Passworts true oder false zurück je nach Richtigkeit des Passworts true oder false . Und das ist völlig richtig, um all diese Dinge innerhalb des Benutzermodells zu erledigen all diese Dinge innerhalb des Benutzermodells und nicht in einigen Controllern , in denen wir einfach mit Benutzern arbeiten. Denn in diesem Fall ist unsere Logik innerhalb des Benutzers vollständig isoliert. Und jetzt fehlt uns nur noch eine einzige Zeile in unserer Typen-Benutzeroberfläche mit definiertem Benutzerdokument. Aber eigentlich müssen wir in diesem Benutzerdokument angeben , dass wir hier eine neue Methode geschrieben haben , das Kennwort validieren. diesem Grund möchte ich, was ich hier tun möchte, eine neue Methode innerhalb des Validate-Passworts erstellen. Und wir wissen, dass wir im Inneren einen Parameter bekommen, wir können ihn einfach param1 nennen, und das ist eine Zeichenfolge, und wir wissen, dass wir zurück eine Zeichenfolge bekommen. In diesem Fall werde ich verwenden, dass ein Dokument vollständig korrekt typisiert ist und wir es später in TypeScript verwenden können , um diese Methode zum Überprüfen des Passworts aufzurufen und eine automatische Vervollständigung zu erhalten. 10. Hinzufügen von Registrierung: Im vorherigen Video haben wir unser Benutzermodell erfolgreich erstellt. Und sie können verstehen, dass das vorherige Video wirklich trocken war, weil wir gerade ein Modell erstellt haben und Sie nicht gesehen haben, wie wir dieses Modell in einer echten Anwendung verwenden. diesem Grund besteht das Ziel dieses Videos darin, unsere Registrierungsmethode zu erstellen, was bedeutet, dass wir den Benutzer registrieren, und genau so werden wir unser Benutzermodell verwenden. Schauen wir uns also unseren Code an. Im Moment haben wir nur ein Modell in Quellmodellen. Und was wir bauen wollen, ist MVC-Architektur. Was hat es eigentlich ein Mittelwert innerhalb eines Frameworks ausgedrückt. Keine Architektur , die mit einfach definierten Routen zum Ausdruck gebracht einfach definierten Routen starten den Webserver und wir sind startklar. Wir haben nicht viele Regeln, die innerhalb von express definiert sind. Deshalb müssen wir selbst etwas tun. Und die wirklich beliebte Architektur, die unser Back-End-Projekt gut nutzt , ist MVC, was eigentlich Modellansicht und Controller bedeutet. Und tatsächlich werden wir in 90 Prozent der Fälle nur Modelle und Steuerungen verwenden. Wir werden keine Ansichten verwenden, nur weil wir gerade arbeiten und eine EPI erstellen und dort keine Ansichten rendern müssen. Wir antworten nur mit den Keuschern und das ist es. diesem Grund ist es meine Idee, einen neuen Ordner zu erstellen , der Controller genannt wird. Die Hauptidee ist , dass hier stattdessen Sorority S alle unsere Routen registriert. Zum Beispiel haben wir hier eine Route für die Homepage. Die Hauptidee ist, dass wir die Logik dieser Route hier nicht direkt als Callback schreiben , sondern in einen standortspezifischen Controller schreiben, was eigentlich alle unsere Anfragen bedeutet in die wir uns aufteilen möchten verschiedene Controller. Zum Beispiel haben wir einen Benutzercontroller und es gab Unruhen bei all unseren Aktionen in Bezug auf Registrierung, Anmeldung, Benutzerabmeldung usw. Dann haben wir einen Board-Controller, in den wir alles schreiben , was mit Board zu tun hat. Der wichtigste Teil ist, dass das interne Modell definiert wie wir mit der Datenbank arbeiten. Also erstellen wir unsere Entity wie user, aber innerhalb des Controllers , indem wir diese Entität verwenden. Und wir erstellen einige Antworten unserer API, was bedeutet, dass wir unsere Logik trennen. Alles war Datenbank wird zu Modellen gehen, aber wir verwenden Modelle in solchen Controllern. Das war also die Theorie. Erstellen wir nun unseren ersten Controller. Und dafür möchte ich mich hier in Ihrer Route registrieren, und es wird eine Route für die Registrierung sein. diesem Grund haben wir hier einen App-Beitrag und die URL wird Slushy Pie Slash-Benutzer sein. Hier wird unser Benutzer-Controller-Punktregister sein. Also unsere erste Regel hier ist, dass wir alle unsere URLs mit Slash-API beginnen, denn eigentlich ist es wirklich schön, einen Namespace für unsere API zu haben. Zweitens, wie Sie sehen können, wo es nicht wichtig ist, so etwas wie registrieren, wo Eingaben hier die gesamte Benutzersteuerung und wir einige gute Namen haben müssen. Der typische Name und für Controller ist immer mit Asset als beispielsweise Controller eines Benutzers und nicht der Benutzercontroller. Jetzt importieren wir Stern, während die Benutzer es kontrollieren. Und wenn Sie nicht wissen, was das bedeutet, ist die Hauptidee, dass wir im Inneren eine Reihe von Funktionen haben werden. Und dieses Mal als Gruppen, all diese Funktionen in diesem Objekt. Und dann können wir so etwas wie user controller dot register schreiben . Also hier wollen wir es importieren, und hier haben wir unseren Controller-Schrägstrich, und hier werden wir Dateibenutzer erstellen. Und wie Sie sehen können, macht es keinen Sinn, diese Datei als Controller zu bezeichnen, da sich diese Datei direkt in Controllern befindet . Das ist so hier, Lass uns reinspringen, damit es kontrolliert. Und hier ist users.js. Und das ist unsere Akte , die ein Controller ist. Und dann sagen wir, es war richtig, alle Aktionen, die sich auf die Benutzerentität beziehen. Jetzt auf der rechten Seite möchte ich unseren Server Ts öffnen. Und wie Sie sehen können, ist dieser Teil, den Sie hier sehen können, das , was wir innerhalb des Controllers schreiben. Das ist also unser Rückruf. Und wie Sie sehen können, ist dies nur eine einfache Funktion mit der Anforderungsantwort. Und der dritte Parameter hier kann der nächste sein. Deshalb möchte ich, was ich hier machen möchte, eine Funktion erstellen , die register heißt. Und das ist eine asynchrone Funktion. Warum wir hier in einer synchronen Funktion brauchen, weil wir mit der Datenbank und diesen Anfragen für unsere Datenbank oder als synchron arbeiten werden . Und hier bekommen wir als Argument zuallererst Anfrage, zweitens Antwort, und das letzte ist das nächste. Und das ist nur eine Funktion. Das ist also genau das, was wir hier direkt eingefügt haben, aber wir haben es einfach nach draußen verschoben, in unseren Controller. Aber dieser Code ist schlecht. Warum ist das so? Denn eigentlich haben wir hier unsere Anfrage-Antwort nicht eingegeben. Und als nächstes, also hier kann ich Doppelpunkt schreiben, und hier haben wir unsere Anfrage. Und das ist der wichtigste Teil. Hier haben wir eine Anfrage, die von der Fetch API stammt. Wir brauchen es nicht, aber wir brauchen eine Anfrage, die von ausgedrückt wird. Das ist y hier, Importanfrage von Express. Und wie Sie jetzt sehen können, haben wir eine völlig andere Definition. Wir haben hier drinnen Kleid, Körper, Wunschkörper. Und genau das brauchen wir. Außerdem brauchen wir hier nicht nur eine Anfrage, sondern eine Antwort, und ich bin hier in Großbritannien auch eine Antwort. Geben Sie hier die Antwort als Antwort ein. Und die letzte ist nicht die nächste, sondern die nächste Funktion. Hier sind unsere beiden Eingaben korrekt. Es ist von ausgedrückt. Auf diese Weise werden wir normalerweise eine neue Aktion des Controllers erstellen. spielt keine Rolle, ob es sich Benutzercontroller oder um einen Artikelcontroller handelt, es wird immer derselbe sein. Jetzt wollen sie direkt im Inneren try-catch schreiben. Warum ist das so? Denn tatsächlich werden wir in dieser Funktion einen synchronen Code mit async await schreiben . Und wir wollen mit allen Fehlern umgehen. Und der einfachste Weg , um einen Fehler zu behandeln, ist die Verwendung von next, und wir haben es bereits zuvor in unserem Modell verwendet. Hier funktioniert es genauso. Also können wir hier schreiben, versuchen und wir haben einen Käfig und wir bekommen einen Fehler. Was wir tun wollen, das, was wir als nächstes aufrufen und den Fehler hineinwerfen. Das ist es tatsächlich, dies ist eine einzelne Zeile, die unseren Fehler zum Ausdruck bringt, und dann wird Express die Sarah auf dem Bildschirm zeigen. Jetzt im Inneren möchten wir einen Benutzer erstellen, da dies tatsächlich die Registrierung ist und die Registrierung bedeutet, einfach einen Benutzer zu erstellen. diesem Grund möchte ich hier das Benutzermodell importieren. Und hier haben wir unsere Modelle Slash-Benutzermodell, das wir zuvor erstellt haben. Und wie Sie hier sehen können, habe ich es nicht als Benutzer mit Großbuchstaben U bezeichnet, sondern das Modell verwendet. Dies soll nur kristallklar in unserem Code sein , mit dem wir arbeiten, model. Und jetzt können wir dieses Modell drinnen verwenden. Also können wir hier const schreiben, und hier ist neuer Benutzer, denn hier wollen wir einen neuen Benutzer registrieren und wir sind genau hier im Hue User Model. Und jetzt müssen wir ein paar Daten weitergeben. In unserem Fall müssen wir hier männlich als Benutzername und Passwort übergeben . Also hier wollen wir das schreiben. Wir möchten eine E-Mail einrichten, und dies ist eine Anfrage Punkt Body Dot E-Mail. Dann wollen wir hier den Benutzernamen festlegen, und das ist request dot, dot username. Und das letzte ist Passwort, und es ist Anfrage Dot Body Dot Passwort. Aber hier haben wir ein riesiges Problem. Standardmäßig kann Express nicht mit Kochen arbeiten und Express übergibt es standardmäßig kein Tau. Deshalb müssen wir, was wir tun müssen, ein zusätzliches Paket dafür installieren. Und dieses Paket heißt BodyParser. Deshalb werde ich in die Konsole springen und mir bewusst sein, dass ich hier im Server bin. Ich werde npm install schreiben. Und hier wollen wir BodyParser installieren. Ich drücke die Eingabetaste und das Paket ist installiert. Jetzt können wir unseren Server erneut starten und zurückspringen. Die Hauptidee ist also, dass ich hier anstelle der Schwesternschaft S meinen Körperparser importieren werde. Also hier nennen wir es BodyParser mit camelCase und wir importieren es aus dem Paket bodyParser. Jetzt irgendwo hier, bevor wir unsere Routen machen, können wir eine Verwendung schreiben und drinnen wollen wir es versuchen bodyParser dot json. Und tatsächlich können Sie hier direkt überprüfen, was BodyParser Jason macht und es wird eine Middleware zurückgegeben, die Tonlippe parst JSON und genau das wollen wir. Wir wollen unseren JSON weitergeben, aber es ist nicht nur das, sondern wir wollen auch einen weiteren Körperparser für IPOs. Und hier wird Punkt-URL codiert sein. Und im Inneren bieten wir erweiterte Informationen über das, was diese beiden Linien tun. erste Zeile sucht nur nach Anwendung json des Inhaltstyps und dann nach den Eltern eines Körpers im JSON. So können wir mit unserem Körper als Objekt arbeiten und das ist extrem einfach. der nächsten Zeile machen wir genau das Gleiche aber für URL-codierte Strings. Und dann bekommen wir auch unseren Körper. Mit dieser Konfiguration in jedem Projekt können Sie also normal mit der API arbeiten, können Sie also normal mit der API arbeiten bei der Sie Körper als angrenzend haben. Und genau das machen wir hier. Wir lesen den Text von Anfrage. Jetzt möchte ich hier unseren neuen Benutzer protokollieren , damit wir überprüfen können, wie es aussieht. Und danach möchte ich versuchen, den Benutzer zu retten. Also hier können wir versuchen , den Benutzer zu speichern, und hier können wir ein Gewicht in Ihrem Benutzerpunkt speichern. Diese einzelne Zeile wird Frankreich einen neuen Benutzer in der Datenbank schaffen . diesem Grund möchte ich hier gespeicherten Benutzer, Koma, gespeicherten Benutzer in der Konsole protokollieren . Jetzt möchte ich ein solches Tool namens Postman verwenden, um eine Anfrage zu stellen. Und wenn Sie keinen Postboten auf Ihrem Computer haben, können Sie einfach zu Postman springen. Laden Sie es nicht hier. Es ist völlig kostenlos. Es hat kostenpflichtige Stufen, aber wir brauchen sie nicht für unseren Kurs. Hier sieht es aus wie. Und was wir eigentlich tun wollen, wollen wir eine Post-Anfrage an unsere URL stellen. Und hier haben wir unseren lokalen Host für 1001 Slash-Slash-Benutzer. Jetzt müssen wir hier zum Körper springen und hier falsch wählen. Und rechts können wir sagen, dass dies angrenzend ist. Was wir nun übergeben wollen, ist ein Objekt mit drei Feldern. Zunächst einmal haben wir hier E-Mail, zum Beispiel foo at gmail.com. Dann haben wir unser Benutzername-Feld, zum Beispiel foo, und wir haben unser Passwortfeld, zum Beispiel 123. Jetzt senden wir eine Anfrage und prüfen, ob sie funktioniert. Wie Sie sehen können, hängt die Anfrage. Und das ist völlig normal, weil eigentlich hier aber nicht zum Beispiel Jason genannt wurde. Deshalb ist es eine Handfeuerwaffe. Aber jetzt können wir in die Konsole springen und das ist unsere Ausgabe. Zuallererst können wir hier unseren neuen Benutzer sehen. Dies ist vor dem Speichern. Das ist also das, was wir nach Colin haben, ein neues Benutzermodell, was eigentlich bedeutet, dass wir in diese drei Felder werfen und Benutzer von einer Goose bekommen. Und wie Sie sehen können, besteht der Hauptunterschied unseres Objekts darin, dass wir hier NAD haben , ein MongoDB AD, und es wurde automatisch schnell generiert. Und danach können wir diesen neuen Benutzer verwenden und ihn beispielsweise mit der Punktspeichermethode in der Datenbank speichern, was extrem einfach ist. Und der wichtigste Teil ist hier gespeicherter Benutzer. Dies ist unser gespeicherter Benutzer , der aus der Datenbank stammt. Woran wir erkennen können, dass es bereits gespeichert ist. Zunächst sehen wir hier unser Passwort und eigentlich unser Passwort hier. Wir haben 123 gegeben, aber hier haben wir es nicht wie 123 gespeichert. Es ist ein gehashtes Passwort. Warum passiert es? Denn eigentlich definieren wir das Modell und hier haben wir eine Methode drücken Save. Und nur um Sie daran zu erinnern, wir hier einen Hash aus unserem Passwort generiert haben und diesen Hash mit der Krypta anstelle des Passworts speichern. Und das ist ein extrem wichtiges Muster. Wir wollen hier keine Logik bezüglich der Änderung des Passworts für den Hash schreiben . Es ergibt keinen Sinn, weil wir ein Modell mit einer gewissen Logik definieren wollen. Und dann passiert es auf magische Weise , weil es definiert ist. In diesem Fall speichern wir hier, wir haben nur unser Passwort und Hash geändert und innerhalb unseres Controllers wissen wir nichts darüber. Die gleichen Ziele in Bezug auf diese Felder wurden um erstellt und aktualisiert um. Diese beiden Felder wurden für uns hinzugefügt, da wir hier timestamps true definiert haben. Unser Benutzer wurde also erfolgreich in MongoDB gespeichert. Aber eigentlich können wir den gespeicherten Benutzer nicht einfach als Antwort werfen. Ist das zuallererst, wir brauchen nicht alle Felder und natürlich sollten wir dieses Passwort niemals draußen geben. Und eigentlich nur um Sie hier daran zu erinnern, innerhalb unseres Modellbenutzers gesagt wurde, dass das Passwort nicht ausgewählt ist, sondern falsch ausgewählt ist. Aber tatsächlich, nachdem wir den Benutzer hier gespeichert haben, wird dieses Passwort schnell zurückgegeben. Und wenn es uns gut geht, bekommen wir das Passwortfeld nicht. Aber nach dem Speichern wird der Benutzer es offensichtlich bekommen. Deshalb müssen wir eine nette Antwort finden, die unseren Bedürfnissen entspricht. Deshalb möchte ich hier eine zusätzliche Funktion erstellen , den Benutzer normalisieren. Und hier bekommen wir Benutzer und wir wissen, dass dies ein Benutzerdokument ist. Und wie Sie in unserem Benutzerdokument sehen können, können wir Eingaben von Typen benutzeroberfläche. Nur um Sie daran zu erinnern, ein Dokument zu verwenden, ist genau wie ein Benutzerobjekt mit ID und validierter Kennwortmethode. Und wie Sie hier sehen können, können wir neuen Benutzer untersuchen und sehen, dass dies ein Dokument und die Eigenschaft verwendet, genau das übergeben wir hier und hier in dieser Funktion, wir wollen den normalisierten für API-Benutzer zurückgeben. Also zuerst, hier werden wir eine E-Mail haben, das ist User Dot E-Mail. Dann wollen wir unseren Nutzernamen. Es wird ein Benutzername verwendet, und der letzte ist 80, es ist die Benutzerpunkt-ID. Und nur um Sie daran zu erinnern, in MongoDB oder Ladies werden mit Unterstrich-ID gespeichert. Aber tatsächlich können wir sie hier in Mongoose auf beide Arten verwenden, wie Unterstrich-ID und wie Punkt AD. Diese Methode existiert bereits und sie ist einfach als Referenz Unterstrich id. Also werde ich die Verwendung einer Funktion normalisieren komplett fertig ist und jetzt können wir hier eat aufrufen, wenn wir mit diesem gespeicherten Benutzer antworten. Also kann ich hier einfach als Sand schreiben und drinnen passieren wir normalisierten Benutzer und hier ist unser gespeicherter Benutzer. Prüfen wir, ob es funktioniert. Wir haben hier im Webserver keine Fehler. Ich werde hier Postman öffnen und erneut auf Senden klicken. Und wie Sie sehen können, ist unser Benutzer erfolgreich normalisiert und wir sind nicht hier angekommen, zum Beispiel Passwort zurück, was extrem wichtig ist. Aber hier ist etwas, das mir an unseren Antworten nicht gefällt. Tatsächlich haben wir einige Validierungen innerhalb eines Modells durchgeführt. Aber wenn ich hier den Benutzernamen entferne und auf Senden klicke, bekommen wir hier 500. Und das ist eigentlich eine HTML-Seite mit einiger Validierung hier. Das ist nicht das, was wir wollen, was wir hier tun können, wir können die Skizze verwenden und Botschaften aus unserer Zeit lesen. Das Hauptproblem ist jedoch, dass unser Fehler nicht immer ein Validierungsfehler ist. Es können zum Beispiel 500 sein, aber wir können auch Validierungsfehler bekommen. Und der richtigste Weg, es in TypeScript zu überprüfen , ist so, wo genau hier, wo Azure eine Instanz des Azure DOD-Validierungsfehlers ist . Aber hier ist es wichtig , den Fehler korrekt einzugeben da wir diesen Fehler von Mongoose importieren wollen. Also hier gebe ich unsere Ära von Mongoose ein. In diesem Fall wird es korrekt behandelt, da dieser Validierungsfehler in dieser Ära tatsächlich eine Klasse von Mungo ist. Und wenn wir irgendwelche Validierungsfehler von Mongoose haben, können wir hier mit ihnen arbeiten. Jetzt versuchen wir es einfach innerhalb Konsolenprotokolls und schauen uns an, was wir hier bekommen. Ich werde erneut auf Senden klicken. Und wie Sie in der Konsole sehen können, bekommen wir hier Fehler. Und das ist ein Objekt. Was bedeutet, dass wir Nachrichten aus dem Betreff lesen und auf dem Bildschirm anzeigen können . Hier möchte ich eine Immobiliennachricht erstellen. Und hier können wir Objektpunktwerte schreiben, die Werte aus unserem Objekt ablesen. Und im Inneren werfen wir Fehlerfehler. Das ist genau das, was wir von Mungo bekommen und wir wollen jedes einzelne Feld durchgehen. Und hier bekommen wir einen Fehler und wir brauchen nur eine Fehlermeldung. Das wird also ein Array von Strings sein. Jetzt können wir einfach den Status des Rückgaberisikos schreiben, zum Beispiel vier bis zwei, was bedeutet, dass die Einheit nicht verarbeitet werden kann. Und hier Punkt JSON-Nachrichten, was eigentlich bedeutet, dass hier, wenn wir irgendwelche Validierungsnachrichten erhalten mit diesem Status geantwortet und wir diese Fehlermeldungen anzeigen, wir haben keine irgendwelche Fehler in der Konsole. Also lass es uns noch einmal versuchen. Ich schlage hier Sand und wir bekommen eine nette Fehlermeldung. Dabei ist ein Benutzername erforderlich , da wir hier zum Beispiel in den Käfig der Klasse eingecheckt haben, unsere Nachrichten hier normalisiert und mit ihnen geantwortet haben. Und tatsächlich ist es sehr sinnvoll, diese Funktion später auf einen Helfer zu verschieben , da wir immer wieder genau das Gleiche tun werden , wo wir eine Validierung haben. Und hier ist der letzte Schritt, den wir machen wollen. Wir müssen unseren Kunden tatsächlich ein Token bereitstellen, was bedeutet, dass wir, wenn unser Benutzer Logger Tin ist, ein eindeutiges Token generieren, um eine DVT-Authentifizierung durchzuführen. Was heißt das? Wir haben einen speziellen String-Token, der auf den Client geworfen wurde. Und dann kann der Kunde dies als t an den Header anhängen. Und später werden wir prüfen, ob die Anfrage authentifiziert ist und der Diffusor einige Änderungen vornehmen darf. Aber in diesem Video müssen wir einfach in unsere Antwort werfen, den GBT-Token, den wir generieren werden. Und dafür müssen wir ein zusätzliches Paket installieren. Hier werde ich npm install JSON-Web-Token schreiben. Und es ist nicht nur, es wird auch tippen wollen. Also hier wird bei Typen Slash JSON-Web-Token sein. Also haben wir zwei Pakete installiert und dann meinen Webserver neu gestartet. Jetzt lasst uns wieder einsteigen. Hier wollen wir jetzt unser JSON Web Token oder einfach nur DVT importieren . Versuchen wir es hier in der Produktivität von JSON-Web-Token. Und jetzt, was wir hier innerhalb von normalisieren wollen, und das ist der beste Ort dafür, denn hier haben wir den gesamten Benutzer und wir bauen etwas, das nicht mit der Datenbank zusammenhängt. Also wollen wir hier unser Ziel generieren. Und dafür sind wir nur Colin, GBT-Punkte signieren das Innere. Wir müssen eine Nutzlast und einen geheimen Schlüssel bereitstellen. Was zeigen wir Insight Payload hier? Zunächst möchten wir eine AD erhalten und dies ist eine Benutzerpunkt-ID und dann eine E-Mail. Es ist user.email. Eigentlich reicht es für uns, nur eine ID anzugeben , damit wir sie später anhand eines Ausweises verwenden können. Aber E-Mail ist auch schön für eine Bestätigung und ein Verständnis mit Susan und was hier geheim ist. Es ist nur eine zufällige Zeichenfolge, die uns hilft, Tokens zu dekodieren und dann aufzurufen. Was wir also eigentlich tun wollen, wollen hier in diesen Diensten eine neue Datei erstellen. Beispiel: config dot ds. Hier speichern wir alle benötigten Eigenschaften wie zum Beispiel geheim. Also hier möchte ich nur unser geheimes Eigentum exportieren, const, und sie werden es Secrets nennen, offensichtlich aus Produktionsgründen möchten Sie hier etwas Sicheres haben. Vielleicht sind ein langer Hash wie 12 Symbole. Jetzt können wir das Geheimnis hier nutzen indem wir einfach unser Geheimnis für John umkehren. Und hier haben wir unsere Konfigurationsdatei. Jetzt schreibe ich statt dieses geheimen oder privaten Schlüssels einfach ein Geheimnis. Was diese Zeile also macht, sie generiert ein Token , das nur eine Zeichenfolge ist. Und jetzt müssen wir hier zu unserer Antwort dieses Token hinzufügen. Prüfen wir, ob es funktioniert, aber keine Fehler haben. Lass uns reinspringen. Postbote, klicken Sie auf Senden. Wie Sie hier sehen können, muss ich meinen Benutzernamen angeben. Schauen wir uns das zum Beispiel an. Hier bekommen wir alle unsere Bereiche und reden auch. Und wie Sie sehen können, ist unser Token nur eine einzigartige Zeichenfolge , die wir an alle Ihre Anfragen an den Client anhängen an alle Ihre Anfragen und im Backend wieder dekodieren, was wir in unseren nächsten Videos tun werden. Deshalb haben wir unsere Registrierungsmethode auch mit Validierung und Normalisierung für unsere API erfolgreich implementiert unsere Registrierungsmethode auch . 11. Implementierung von Anmeldung: In früheren Videos, aber unsere Registermethode in diesem Video vollständig implementiert, wollen wir den Anfang unseres Benutzers implementieren, aber eigentlich möchte ich, dass Sie versuchen, es selbst zu tun, weil es so sein wird super ähnlich wie Registrierung und wir sind schon alles vorbereitet. Also was brauchst du, um einen Zeh zu machen? Zuallererst, insights server.js, Sie möchten eine neue Route erstellen. Und eigentlich haben wir hier schon unsere Route zur Registrierung. Jetzt müssen wir eine für die Anmeldung erstellen. Zum Beispiel können wir einen String Slash API Slash Benutzer Slash-Anmeldung erstellen . Jetzt muss hier in einer solchen steuerbaren neue Methode Login erstellt werden. Die Frage ist offensichtlich, was wir dort erreichen werden und was diese Methode leisten muss. Und tatsächlich Postman einfügen, wir können einfach versuchen, es zu benutzen. Also hier haben Sie Slash-Login und anstelle von E-Mail, Benutzername, Passwort werfen wir einfach auf unsere Anfrage E-Mail und Passwort. Wir haben keinen Benutzernamen, da dies ein Login ist und die E-Mail-Adresse eindeutig ist. Und hier haben Sie zwei mögliche Abweichungen, wie Sie sie implementieren können. Die erste Variante ist einfacher. Sie möchten einfach eine E-Mail aus dem Text lesen. Sie möchten versuchen, den Benutzer in der Datenbank zu finden und diesen Benutzer zurückzugeben. Und vergessen Sie nicht, normalisierte Benutzer zu verwenden , weil wir dieses Gespräch brauchen. Und wenn Sie einen schwierigeren Ansatz wünschen, können Sie auch versuchen, nicht nur E-Mails, sondern auch das Passwort für diese Validierungsmethode in unserem Modell zu validieren. Aber selbst wenn Sie versuchen, den ersten Schritt alleine zu machen, ist das völlig in Ordnung. Wenn Sie eine davon implementieren möchten, halten Sie das Video jetzt einfach an, und jetzt machen wir es gemeinsam. Unser erster Schritt wird also sein, in unsere Schwesternschaften zu springen. Hier wollen wir eine neue Route erstellen. Also haben wir hier einen Beitrag weil dies eine Post-Anfrage ist, die Guinean folgt. Und hier haben wir den CPI-Slash-Benutzer Slash-Login. Und hier ist die Dot-Login-Methode für den Controller unserer Benutzer, die wir in einer Sekunde erstellen werden. Jetzt werde ich in den Speicher-Controller-Benutzer springen und sie werden nichts kopieren und einfügen, weil wir versuchen wollen , es von Grund auf neu zu schreiben. Hier haben wir also unsere Anmeldemethode und wir wissen, dass dies eine asynchrone Methode ist , bei der wir unsere Anfrage erhalten, die genau wie oben in der Registrierung angegeben ist . Zweitens haben wir hier unsere Antwort, die Typantwort ist. Die letzte ist die nächste, das ist die nächste Funktion. Und jetzt wollen wir hier in unserer Funktion schreiben, versuchen und fangen. In den Käfigen hier werden wir also unsere Ära bekommen und sie wollen sie nur in die nächste Ära propagieren. Warum ist das so? Denn eigentlich haben wir hier keine Validierungsregeln, aber wir werden nur die Validierung in unserem Versuch überprüfen und nicht innerhalb von catch. Was müssen wir drinnen machen? Hier erhalten wir unseren Anfragetext mit E-Mail und Passwort. Und unser erster Schritt ist der Versuch, diesen Benutzer in die Datenbank aufzunehmen. Hier können wir ein K schreiben Wir brauchen unseren Benutzer und versuchen es erneut mit einem Gewicht Benutzermodell zu finden. Und wie Sie hier sehen können, haben wir einen Ausweis finden, finden und finden. Verwendung von model.fit find versucht also , alle Dokumente durch ein Prädikat als Array zu finden. Hier finden wir zum Beispiel eine Liste nach dem aktiven Feld. Hier, finde einen. Wir machen dasselbe, aber gut, nur eine einzige Platte. Das wollen wir verwenden und manchmal müssen wir ein Element anhand der ID finden. Hier haben wir eine nette Geldstrafe nach der Methode. Und wie Sie hier sehen können, haben wir auch viele andere Methoden, wie zum Beispiel eine finden und löschen und aktualisieren und so weiter. Aber jetzt werden wir find one verwenden und dann sagen Wir müssen ein Prädikat als Objekt angeben. Und hier haben wir unsere E-Mail und dies ist eine E-Mail mit dem Anforderungstext. Tatsächlich wird dieser Single-Liner versuchen, durch diese E-Mail unseren Datensatz in der Sammlung des Benutzers zu finden . Hier können Sie sehen, wo Sie das Benutzerdokument erhalten. Aber eigentlich stimmt das nicht, weil wir jetzt hierher kommen können und kein Dokument weil das Weibchen vielleicht nicht existiert. Das ist so hier. Ich möchte überprüfen, ob wir keinen Benutzer bekommen, dann wollen wir einen Fehler auslösen. Und dafür können wir einfach unseren Antwortpunktstatus zurückgeben . Hier haben wir ein Foto zum Status wie zuvor. Und hier wollen wir etwas JSON zurückwerfen. Und eigentlich haben wir hier keine anderen Validierungen. In jedem Fall werfen wir einfach einen ungültigen Login oder ein ungültiges Passwort. Das ist ganz oben. Ich kann unsere Fehler erstellen und in dem Objekt speichern. Also hier möchte ich Fehler erstellen. Dies ist zum Beispiel ein Objekt mit Feld, E-Mail oder Passwort. Und hier ist der Wert falsche E-Mail oder Passwort. Der Hauptpunkt ist also, dass wir genau die gleiche Struktur unserer Fehler haben, genau wie an allen anderen Orten. Hier geben wir nur unsere Fehler innerhalb von JSON zurück. Wenn wir keinen Benutzer haben. Danach können wir mit unseren Benutzern antworten. Also hier ist Sand und hier können wir unseren normalisierten Benutzer anrufen und wurden Benutzer einfügen, den wir gefunden haben. Und wenn Sie diesen Code auch ohne diesen Fehler geschrieben haben , überprüfen Sie Ihr Golden, weil Sie versucht haben, selbst etwas zu tun. Prüfen wir nun, ob dieser Code funktioniert. Wir haben also keine Fehler hier im Webserver. Öffnen wir unseren Postboten und klicken auf Senden. Und wie Sie hier sehen können, funktioniert es tatsächlich schon. Hier ist unser Slash-API-Slash-Benutzer Slash-Login. Dies ist eine Post-Anfrage mit unseren beiden Feldern. Hier holen wir Bank den richtigen Benutzer mit dem Tonkin. Und tatsächlich, wenn hier unsere E-Mail nicht existiert, versteckt gesendet und wir bekommen ein Objekt mit E-Mail und Passwort, falscher E-Mail oder Passwort, was tatsächlich bedeutet, dass wir erfolgreich implementierte unsere Lunge Kenianer des Benutzers. Aber hier fehlt uns nur eine Kleinigkeit, und diese ist für das Passwort validiert , aber das ist extrem einfach zu bedienen Nur weil wir bereits alles in unserem Modell vorbereitet haben. Und nur um Sie in unserem Benutzermodell unten daran zu erinnern , dass wir diese Methode zur Kennwortvalidierung haben und wir verwenden hier be crypt compare, wo wir das Passwort von vergleichen der Benutzer mit einer Zeichenfolge. Das ist genau das, was wir hier tun wollen. Wir können einfach eine Variable mit demselben Passwort erstellen. Hier wollen wir user dot validate password aufrufen. Und wie Sie sehen können, haben wir hier unsere automatische Vervollständigung des TypeScripts. Und tatsächlich bekommen wir diese automatische Vervollständigung nur weil wir in unserem Benutzeroberflächendokument diese Zeile geschrieben haben. Wenn Sie diese Zeile hier nicht geschrieben haben, erhalten Sie diese automatische Vervollständigung nicht. Hier haben wir also unser validiertes Passwort und im Inneren möchten wir eine Zeichenfolge angeben, um zu überprüfen, ob es korrekt ist. Und das ist das Anforderungstextpasswort. Und tatsächlich, wenn diese Passwörter gleich sind, dann werden wir hier Boolean bekommen. Aber wie Sie sehen können, bekommen wir eine Zeichenfolge, was bedeutet, dass etwas nicht stimmt. Schauen wir uns unsere Oberfläche an. Validate password gibt eine Zeichenfolge zurück, sie ist falsch, sie sollte hier boolescher Wert sein. Jetzt gibt dasselbe Passwort einen falschen booleschen Wert zurück. Und hier können wir eine Bedingung schreiben. Wenn zum Beispiel nichts dasselbe Passwort ist, wollen wir genau den gleichen Fehler auslösen. Also werde ich hier einfügen. seit dem Status wir uns das an, seit dem Status der beiden JSON-Fehler. Ich sitze hier und wir bekommen diesen netten Benutzer. Aber was passiert, wenn wir hier ein falsches Passwort werfen? Ich drücke hier senden und wir bekommen einen Fehler. Schauen wir uns also in die Konsole. Hier bekommen wir eine ziemlich seltsame Nachricht, illegales Argument, Zeichenfolge undefiniert. Und wie Sie hier in unserem Stack-Trace sehen können, kommt es von unserem Controller und hört standardmäßig von unserer Quellmodell-Ts-Linie. Also lasst uns in unser Modell Ts line 44 springen. Wie Sie sehen können, ist dies unser großer Kryptovergleich. Die Frage ist, was ist das Problem? Deshalb können wir hier das Passwort validieren schreiben. Und hier haben wir zunächst unser Passwort und dieses Passwort. Und eigentlich will ich das hier nur sehen, um zu wissen, dass wir auf der sicheren Seite sind. Unser Server wurde neu gestartet. Schauen wir uns den Sound an. Ich drücke endlosen Blick in die Konsole senden. Und wie Sie hier sehen können, desto feiner sehen wir zunächst das Passwort. Dies ist eine Zeichenfolge und hier ist unser Objekt. Aber wie Sie in diesem Betreff sehen können, mit Don't have password können wir mit Don't have password das Objekt nicht mit dem Passwort vergleichen Objekt nicht mit dem Passwort weil wir kein Passwort haben. Warum haben wir es nicht? Denn eigentlich haben wir hier oben für das Passwort gesagt, wähle falsch, was völlig richtig ist. In 99 Prozent der Fälle möchten wir kein Passwort wählen, da dies sicher ist. Aber in diesem speziellen Fall, bei dieser Anmeldemethode, können wir ohne Passwort nicht arbeiten, da wir unser Passwort des Benutzers vergleichen müssen. Deshalb müssen wir davon ausgehen, dass wir einen finden, was wir tun können . Also bekommt es auch ein Passwort. Und dafür können wir dot select schreiben. Hier ist eine Zeichenfolge in der wir schreiben plus Passwort. Und eigentlich ist das eine wirklich nette Notation weil wir hier plus Passwort, minus Biographie und so weiter verwenden können . Wenn wir bestimmte Felder entfernen oder hinzufügen möchten , erhalten wir in diesem Fall nur für diese spezielle Anfrage nur für diese spezielle Anfrage nicht nur den gesamten Benutzer, sondern auch das Passwortfeld. Und wenn wir es jetzt noch einmal versuchen, stoße ich auf Sand. Wir können nachsehen und die Konsole sagen. Und jetzt bekommen wir unseren Benutzer mit Passwort, das Hash ist, und dann haben wir keinen Fehler, aber es funktioniert nicht richtig, weil ich hier ein falsches Passwort habe und wir immer noch Benutzer bekommen, warum es passiert. Und wenn wir uns hier unsere Methode zur Kennwortvalidierung ansehen , verwenden wir hier Big Crypt Compare. Die Frage ist, was wir hier wieder reinbekommen, wir können in den Taipings sehen, dass wir Versprechen bekommen Boolean. Und das ist extrem wichtig. Dies ist eine asynchrone Operation. Sie ist nicht synchron. diese Weise müssen wir hier zurück in unsere Typen-Benutzeroberfläche springen . Und hier können wir sagen, dass wir den Boolean bekommen. Es ist eigentlich Ramis vom Boolean. Und jetzt ist es völlig richtig, denn jetzt, wenn wir in unseren Controller springen hier in unseren Controller springen, haben wir das Validate-Passwort verwendet. Wir sehen, dass wir das Versprechen Boolean zurückbekommen Jetzt ist dasselbe Passwort versprochen Boolean, was nicht das ist, was wir wollen. Hier können wir ein Gewicht schreiben und dies wird unser Versprechen lösen. Und hier bekommen wir unseren Boolean. Wie Sie sehen können, hilft uns TypeScript sehr dabei korrekte Eingaben zu verstehen. Und wir können immer überprüfen , welchen Typ wir haben. Hier. Wir bekommen das gleiche Passwort und jetzt sollte es funktionieren. Schauen wir uns das in Boltzmann an. Ich schlage auf Sand und wir bekommen eine Nachricht, E-Mail ein Passwort oder nicht korrekt. Hier mit dem richtigen Passwort, 123, erhalten wir unseren Benutzer zurück und dies ist genau die implementierte Login-Anfrage. 12. Erstellen von auth: In diesem Video möchte ich über Middlewares sprechen. Was ist Middleware? Wenn wir eine Anfrage vom Kunden an das Backend stellen, werfen wir diese Anfrage normalerweise eine Anfrage vom Kunden an das Backend stellen, einfach innerhalb unserer Route. Und dann innerhalb des Controllers, genau das haben wir hier in unserem Quellserver gemacht . Hier haben wir also zwei Post-Requests, Register und Login, und wir springen einfach in unseren Controller, was eigentlich bedeutet, dass wir hier Controller einfügen , Anfrage und Antwort erhalten. Middleware ist etwas, das aufgerufen werden kann , bevor wir hier ankommen, was eigentlich bedeutet, dass Middleware im Back-End angewendet wird , aber bevor unsere Anfrage ein Doppelpunkt in unserem ist Controller oder innerhalb unserer Route, Kohlberg, indem wir es überhaupt Middlewares machen. Wenn Sie etwas mit request machen müssen , bevor diese Anfrage in den Controller gelangt, benötigen Sie genau hier eine Middleware. Middleware, brauchen wir in unserem Projekt? Dies ist die Authentifizierungs-Middleware. Warum brauchen wir es? Stellen Sie sich vor, dass wir jedes Mal, wenn wir etwas mit Stratege at user machen müssen, sein Token überprüfen müssen, was in jeder einzelnen Methode bedeutet, wie zum Beispiel hier register, wir bekommen das Token des Benutzers. Wir müssen dieses Zeichen weitergeben. Wir müssen dieses Token validieren und wir müssen den aktuellen Benutzer mit diesem Token finden. Und es macht keinen Sinn , diesen Code in jede einzelne Controller-Aktion zu schreiben . diesem Grund müssen wir eine Middleware entwickeln , die wir überall wiederverwenden werden. Deshalb möchte ich hier in den Quellordner springen und hier einen neuen Ordner erstellen , der Middle heißt. Während wir hier alle unsere Middlewares lagern können. Und die erste Middleware , die wir erstellen müssen , ist owls dot ts. Und was ist eigentlich Middleware? Das ist nur eine Funktion. diesem Grund möchte ich hier die Standardfunktion und die synchrone Funktion exportieren . Und du fragst dich vielleicht, okay, aber warum ist es ein Synchron? Wir bekommen einfach hier unsere Anfrage und machen etwas damit. Denn eigentlich wollen wir hier auch mit der Datenbank arbeiten. Wenn wir ein Token haben, ist dieses Token gültig. Wir wollen eine Vorstellung des Benutzers aus diesem Token lesen und diesen Benutzer aus der Datenbank holen. So können wir diesen Benutzer verwenden, der später in unserem Controller vorbereitet wird . diesem Grund handelt es sich um eine asynchrone Funktion. Hier erhalten wir eine Antwort auf eine Anfrage. Und als nächstes, genau wie zuvor, geben wir hier unsere Anfrage ein, dann haben wir unsere Antwort. Die letzte hier ist unsere nächste Funktion, die nächste Funktion von R ausgedrückt wird. Und hier werde ich oben unsere Anfrage und Antwort umkehren . Und diese Funktion gibt nichts zurück. diesem Grund handelt es sich um eine Void-Funktion. Und innerhalb dieser Funktion wollen wir das Token aus unserer Anfrage lesen, aber ich werde nicht direkt unseren gesamten Code mit try catch umschließen. Warum ist das so? Weil wir versuchen werden, eine asynchrone Anfrage an unsere Datenbank zu stellen , die möglicherweise fehlschlägt. Deshalb ist es hier ein guter Ansatz, try-catch zu schreiben , wo wir unseren Pfeil und dann den Seitenfang bekommen . Wir wollen nur Risiken und Status eingehen und hier wird 401 sein. Du fragst dich vielleicht, okay, aber warum haben wir hier keinen Fehler angezeigt? Weil es uns eigentlich egal ist. Dies ist eine Middleware zur Überprüfung unserer Authentifizierung. Wenn wir aus irgendeinem Grund das Gespräch nicht analysieren und sprechen und zuhören können , ist dies gültig. Wir konnten diesen Benutzer auf keinen Fall finden, das bedeutet, dass unser Benutzer nicht angemeldet ist. Hier befinden wir uns direkt in unserem 401-Status. Jetzt müssen wir hier unseren Status lesen. Also hier möchte ich unseren Header erstellen und wir können unseren Header von Anforderungs-Punkt-Headern, Punkt-Autorisierung, erhalten . Eigentlich bedeutet das, dass wir unser Token in unserem Autorisierungsheader speichern . Und eigentlich ein typischer Ansatz, hoffe wir implementieren unsere Pflicht Autorisierung ist hier Autorisierungsschlüssel, das ist unser Header und der Wert hier wird Bearer Space Token sein. Also hier werden wir einen einzigartigen Stream haben. Deshalb müssen wir unser Token entsprechend aufteilen. Aber zuerst lesen wir hier unseren Header und es könnte sein, dass er nicht gesetzt ist. In diesem Fall können wir einfach für 01 sagen, das ist y hier. Wenn wir unseren Header nicht haben, können wir diese Zeile einfach kopieren und mit Pausen und Status für 01 einfügen. Danach müssen wir unser Token wirklich analysieren. Also hier werden wir uns unterhalten und das ist unser Header-Split, und das ist nur eine Zeichenfolge , die durch Leerzeichen geteilt wurde. Also bekommen wir ein Array mit zwei Elementen. Wie Sie hier sehen können. In der ersten Position werden wir besser sein. Und auf der zweiten Position wird es unsere Saite sein. Was wir bekommen wollen, hier nehme ich das zweite Element des Arrays und es wird unser Token sein. Aber wie Sie hier sehen können, erhalten wir die Nachricht vom TypeScript. Dieses Objekt ist möglicherweise undefiniert. Und deshalb mag ich TypeScript so sehr. Es hilft sehr bei der Entwicklung. Was ist das Problem? Eigentlich haben wir hier unsere IV und Kleidung und unseren Status, was eigentlich bedeutet, dass wir nicht hierher kommen werden. Aber TypeScript versteht, dass wir hierher kommen werden , weil wir es hier eigentlich nicht versucht haben, kehren Sie zurück. Und aus diesem Grund ist dieser Code ungültig, da in diesem Fall unser Header belastet oder undefiniert sein kann. Aber nach dieser korrekten Überprüfung mit return kann es sich nur um eine gültige Zeichenfolge handeln. Der nächste Schritt, den wir tun müssen, ist also die Überprüfung unseres Tokens. Durch die Verwendung von GBT möchte ich auf diese Weise DVT aus JSON Web Token importieren. Und nur um Sie daran zu erinnern, dies eine Bibliothek ist, mit der wir ein Token im Backend generiert haben, und jetzt müssen wir es validieren. Deshalb können wir hier einfach versuchen , dass wir einige Daten von unserem Token erhalten. Und hier wird GBT das Innere überprüfen. Nun Python, zuallererst ein Zeichen. Zweitens unser geheimer Schlüssel. Und nur um dich hier in unserer Konfiguration daran zu erinnern, dass wir unser Geheimnis haben. Deshalb werde ich es hier einfach geheim versuchen und es wird aus unserer Konfiguration heraus eingegeben. Und wir müssen keine zusätzlichen Optionen für das Hören bereitstellen. Aber wenn wir hier unseren Datenstamm oder das TVT-PE-Los überprüfen, aber tatsächlich wissen wir, dass dies nicht korrekt ist, beginnen wir nicht damit. Wenn wir hier in unseren Controller-Benutzern nachschauen , wir hier unser Token generiert und im Inneren haben wir ID und E-Mail, was eigentlich bedeutet, dass es hier gültig ist, um nach der Ableitung als zu sagen. Und hier können wir sagen, dass wir ein Objekt mit einer D-Zeichenfolge und auch unsere E-Mail, die eine Zeichenfolge ist, zurückbekommen einer D-Zeichenfolge und auch unsere E-Mail, die eine Zeichenfolge ist, die eine Zeichenfolge ist In diesem Fall erhalten wir jetzt in den Daten . In diesem Fall erhalten wir jetzt in den Daten die richtige Datenbank. Dies ist ein Objekt mit einer D- und D-Mail. Wir bekommen hier also die Idee des Benutzers und können jetzt versuchen, sie aus der Datenbank zu holen. Aber dafür müssen wir unser Modell verwenden. Das ist ganz oben. Wir können unser Benutzermodell aus unseren Modellen importieren. Hier können wir also wieder in den Schrägstrich unserer Modelle springen, und hier haben wir unseren Benutzer. Jetzt können wir nach unseren Daten eine Anfrage stellen, um einen Benutzer zurückzuholen. Und eigentlich verwenden wir hier ein Gewicht. Hier haben wir einen Modellpunkt verwendet. Und hier wollen wir den Benutzer von AD finden, und wir haben diese Funktion standardmäßig in Mungo. Und hier können wir anstelle eines div data dot AD schreiben, und dieser Benutzer wird da sein, oder es könnte jetzt sein, müssen wir es auch überprüfen. Wenn wir keinen Benutzer zurück haben, möchten wir auch sagen, dass der Benutzer nicht angemeldet ist. Aber wenn alles in Ordnung ist, dann wollen wir Inside Anfrage an unseren Benutzer stellen. Die Hauptidee ist also, dass diese Anfrage hier von uns aktualisiert wird. Und später, wenn wir das nächste Mal anrufen, wird diese Anfrage an unseren Controller weitergeleitet und dann haben wir direkten Zugriff auf diesen Benutzer. Das ist so hier, ich möchte Anfrage schreiben Benutzer ist gleich Benutzer. Und das ist dieser Benutzer, den wir aus der Datenbank bekommen haben. Und nach dieser Romanze rufen Sie einfach als nächstes an. Und diese Zeile besagt , dass wir mit unserer Middleware bereit sind und unsere Anfrage an unseren Controller weitergeleitet werden kann. Aber hier haben wir ein Problem, wie Sie hier sehen können, wo ich eine Fehlereigenschaft bekomme, die Benutzer auf Typanfrage nicht existiert und tatsächlich vollständig gültig ist. Diese Anfrage kommt von Express und innerhalb wird ausgedrückt, dass es keinen Feldbenutzer gibt. Was wir also hier tun können, der Ron Ansatz wird sein, hier irgendwas zu schreiben , und ich empfehle Ihnen dringend , keine in Ihren Projekten zu verwenden , da TypeScript Ihnen dann nicht wirklich helfen kann. Sie haben einfach Ihren Code mit Löchern aus einfachem JavaScript. Das ist y hier, Ras wie jeder andere, wird ein super schlechter Ansatz sein. Warum ist das so? Denn hier sagen wir einfach, dass uns egal ist, was mit Anfragen zu tun hat. Wir sagen einfach, es ist ein beliebiger Punkt-Benutzer und es funktioniert. Das ist der Anfänger-Ansatz. Wir schreiben keinen solchen Code. Hier. Anfrage Benutzer ist völlig in Ordnung, aber diese Anfrage sollte keine ausdrückliche Anfrage sein. Wir müssen es erweitern. Und tatsächlich können wir hier innerhalb von Typen einen neuen Typ erstellen und nennen wir ihn Express Request dot interface, dot ds. Jetzt kann ich im Inneren dieses neue Interface erstellen. Und nennen wir es Express Request Interface und eigentlich muss es erweitert werden. Also hier ist Anfrage verlängern. Und tatsächlich wird diese Bitte direkt von ausgedrückt kommen. Also hier oben kann ich eine Importanfrage von ausgedrückt schreiben . Was wir hier machen, eigentlich haben wir einfach eine Schnittstelle erstellt und wir haben alles, was wir innerhalb unserer Anfrage hatten, auf unsere Schnittstelle erweitert . Und jetzt können wir hier einfach sagen, dass wir ein Feld haben, den Benutzer, das möglicherweise nicht definiert ist, und dies ist unser Benutzerdokument. Hier könntest du eine Aufgabe stellen oder k, Aber warum kann der Benutzer undefiniert sein Aber warum kann der Benutzer undefiniert sein? Hier haben wir keinen Fall in dem der Insider-Request-Benutzer definiert ist und Sie völlig Recht haben, aber wir verwenden keine Middleware bei jeder einzelnen Anfrage. Manchmal haben wir keinen Benutzer in unserer Anfrage da nicht jede einzelne Anfrage autorisiert werden muss. Und jetzt können wir diese Express-Anforderungsoberfläche einfach kopieren diese Express-Anforderungsoberfläche einfach kopieren und unsere Middleware einstellen und sie hier anstelle von Anfrage ablegen. Also muss ich jetzt Express-Request-Middleware importieren. Wir verwenden keine Anfragen von Express mehr. Wir verwenden die reguläre erweiterte Version. Und jetzt haben wir keine Fehler mehr. Und was wir hier bekommen, ist vollständige Anfrage von Express plus unser Benutzerfeld. Und das ist genau der richtige Ansatz , um TypeScript zu verwenden. Deshalb haben wir erfolgreich unsere Middleware entwickelt. Jetzt müssen wir es benutzen. Und dafür möchte ich eine neue Route erstellen. Nun, wir werden den aktuellen Benutzer durch Gespräche erreichen. Also springen wir zurück und sagen Quellserver. Und hier haben wir zwei hintere Schienen hier. Jetzt möchte ich apt-get erstellen und wir haben hier einen Slash-API-Slash-Benutzer. Dies ist die Route, um den aktuellen Benutzer abzurufen. Jetzt danach mit Komma möchte ich Middleware ausschreiben. Und tatsächlich haben wir in dieser Datei nicht deklariert, was unsere Middleware ist. Also müssen wir hier unsere Middleware aus unseren Middlewares eingeben . Also hier haben wir Middlewares-Stunden. Und genau das werden wir tun. Wenn Sie so schreiben, wenden Sie diese Middleware bevor wir hier als Doppelpunkt Controller arbeiten. Und hier bekommen wir unseren Benutzercontroller dot, zum Beispiel die aktuelle Benutzeraktion, was eigentlich bedeutet, auf dieser Route diese Owls Middleware ausgeführt wird, wenn wir eine Benutzeranfrage wird in den Controller gehen, dann wo Champion hier ist. Und wie Sie mit Express sehen können, ist es ziemlich einfach zu lesen und zu verstehen. Jetzt möchte ich in den Benutzercontroller springen und diese neue Methode erstellen. Also lasst uns ganz unten unsere neue Funktion erstellen, unsere neue Funktion erstellen, die ein aktueller Benutzer sein wird. Und hier wissen wir , dass wir Anfrage und Antwort erhalten , aber wichtig, aber hier verwenden wir keine Anfragen von Express, unsere erweiterte Version. Also hier werde ich so schreiben , dass ich ein Express-Request-Interface bekomme . Und der nächste Parameter hier wird eine erhöhte Antwort sein. Es bleibt genauso wie zuvor. Und hier in unserer Funktion müssen wir eine gewisse Logik anwenden. Was wir hier tun wollen, tatsächlich innerhalb des aktuellen Benutzers, können wir diesen Benutzer direkt aus der Anfrage abrufen. Hier können wir Dress Dots sagen und den Benutzer normalisieren, genau wie wir es oben getan haben. Und hier werden wir diesen Benutzer anfragen. Und tatsächlich wird es hauptsächlich funktionieren , weil wir, was wir hier tun, unseren Benutzer aus der Anfrage verwenden, indem wir ihn in einen normalisierten Benutzer werfen. Und nur um Sie daran zu erinnern, wir haben den Benutzer hier oben normalisiert. Und das ist nur ein normales Benutzerdokument. Und wir generieren hier unsere Antwort und senden sie zurück. Aber eigentlich haben wir hier TypeScript. Was heißt das? Hier erhalten wir ein Fehlerargument vom Typ Benutzerdokument oder undefiniert. Er ist nicht befugt, ein Dokument zu verwenden. Und das ist völlig gültig, weil wir gesagt haben, dass in unserer Anfrage nicht immer einen Benutzer haben. Und tatsächlich ist der Punkt, dass diese Logik niemals passieren wird, weil wir in unserem Server hier diese Middleware rollen, was bedeutet, dass diese Haus-Middleware dies tun wird, wenn wir keinen Benutzer haben kehre für 01 zurück. TypeScript kümmert sich jedoch nicht um unsere Middleware, da es einfach unsere Funktion liest. Und wenn ich nur auf unsere Funktion ohne unsere Middleware schaue , dann ist unser Code dadurch ungültig, weil wir hier versuchen, undefiniert in einen normalisierten Benutzer zu werfen . Und um das für TypeScript zu handhaben, müssen wir es hier versuchen. Wenn wir keinen Benutzer haben, wollen wir 401 werfen. Also hier können wir return, res, send status und hier drinnen für 01 schreiben . In diesem Fall ist es für TypeScript vollständig gültig , da es hier in request user nicht undefiniert sein kann. Hat das hier überprüft? Und tatsächlich ist dieser Code viel besser, denn in diesem Fall haben wir hier diese einzelne Funktion und wir können vollständig isoliert testen, aber es ist uns egal in dieser Funktion, was wir draußen gemacht haben mit zusätzlichen Funktionen, Middleware über Terror mit einfacherem Hinweis, dass diese Funktion in jedem einzelnen Fall korrekt funktioniert, da wir hier alle Fälle behandelt haben, muss unsere Funktion korrekt implementiert sein. Prüfen wir, ob es funktioniert. Ich springe zum Server und wir haben einen Fehler. Schauen wir mal, was wir haben. Und tatsächlich können Sie hier sehen, dass es die Ära von TypeScript war und die letzte Kompilierung erfolgreich war. Wir haben den mit MongoDB verbundenen Observer gestartet und hier ist unsere API. Wir können also direkt zu Postman springen und versuchen, eine GET-Anfrage zu stellen. Aber in unserer Anfrage müssen wir ein Token bereitstellen. Das ist so hier. Ich werde Paste kopieren, um zu sprechen , weil wir es benutzen müssen. Und dafür erstelle ich hier GET-Anfrage. Und das ist Slash API Slash User. Ich schlage gerade her geschickt. Und wie Sie sehen können, kommen wir unautorisiert hierher. Warum ist das so? Weil die interne Autorisierung mit kein gültiges Token geliefert hat. Aber wenn statt dieser Saite, werde ich unser Gespräch so Birra als Raum einfügen. Und dann haben wir unsere Saite, ich drücke hier senden, und es hat auf magische Weise funktioniert. Und hier bekommen wir unseren normalen Benutzer mit dem Tonkin. Aber am wichtigsten ist , dass wir es nicht versucht haben. All diese Logik, die den aktuellen Benutzer in diese Methode bringt , ist in Middleware geschrieben. Und jetzt können wir unsere Middleware an jedem einzelnen Ort verwenden , an dem wir nach aktuellen Benutzern suchen möchten oder ob wir die aktuellen Benutzerinformationen in unserem Controller benötigen . 13. Erstellen von auth: In früheren Videos werden immer einige Anfragen von Pi für unseren registrierten Benutzer und den aktuellen Benutzer vorbereitet . Jetzt wäre es also nicht schön, etwas im Frontend zu implementieren. Deshalb möchte ich hier in unseren Kunden einsteigen. Und hier möchte ich mit unserem Benutzermodul beginnen. Und was wir in unserem Benutzermodul haben werden zwei Seiten, die sich anmelden und registrieren. Es reicht jedoch nicht aus, nur zwei Seiten für die Registrierung und Anmeldung in unserem Modul zu haben , wir benötigen auch einen Dienst, um mit dem aktuellen Benutzer zusammenzuarbeiten. Zum Beispiel müssen wir den Benutzer registrieren, Benutzer anmelden, den aktuellen Benutzer abrufen usw. In dieser Schleife benötigen wir auch eine Schnittstelle für unseren aktuellen Benutzer Darauf konzentrieren wir uns in diesem Video die Grundlagen unseres Authentifizierungsmoduls zu erstellen. Dafür möchte ich in unseren Quell-App-Ordner springen. Und hier möchte ich einen neuen Ordner erstellen. Hier wollen wir alles isolieren, was über Authentifizierung spricht , die Registrierung beginnt. Unser erster Schritt besteht darin , ein Modul zu erstellen. Und wenn Sie mit Angular nicht so vertraut sind, nur zwei Worte zu Modulen in Angular, innerhalb der anderen Frameworks wie zum Beispiel React, verwenden wir einfach Importe und Exporte, Bot Insight angular, wir haben viel mehr, wir haben Abhängigkeitsinjektionen, was bedeutet, dass die gesamte Anwendung in verschiedene Module aufgeteilt ist. In unserem Fall definieren wir beispielsweise das Modul „Hier und Jetzt“. Jetzt können wir verschiedene Dinge in diesem Modul erstellen und sie werden in diesem Modul isoliert. Und wir können definieren, was wir für die Verwendung im Freien verfügbar machen möchten. Und wenn wir nichts für die Verwendung im Freien verfügbar gemacht haben, können wir nicht einfach die Sachen aus diesem Modul verwenden. Und das ist wirklich ein netter Ansatz für riesige Anwendungen. Lassen Sie uns zunächst unser Modul erstellen. Dazu müssen wir unsere Klasse, unser Modul, exportieren. Zu Beginn dieser Klasse wollen wir nun einen NG-Modul-Decorator bereitstellen. Und drinnen werden wir verschiedene Dinge passieren, aber im Moment müssen wir hier noch nichts registrieren. Was ich jetzt machen möchte Ich möchte zurück in unser App-Modul springen, denn eigentlich müssen wir dieses Modul in unserem App-Modul registrieren . In einem anderen Fall ist dieses Modul nicht an unsere Anwendung gebunden, da wir nur ein Modul laden und alle untergeordneten Module auch darin laden müssen . Hier drinnen in den Vögeln können wir einfach unser Modul schreiben. Und mit dieser Zeile, wo man hier oben eine automatische Eingabe bekommt. Und jetzt sind wir sicher, dass unser Modul geladen ist. Unser nächster Schritt besteht darin, eine aktuelle Benutzeroberfläche zu erstellen. Und aus meiner Sicht es nichts mit dem Eulen-Modul zu tun. Also hier können wir einen neuen Ordnertyp erstellen und uns hier registrieren, aktuelle Benutzeroberfläche dot ts. Und innerhalb unseres Express-Projekts hatten wir keine Regeln für die Benennung von Dateien da wir dort gerade ausgedrückt hatten und alles , was wir schreiben, einfach mit unseren eigenen Richtlinien schreiben In sagen wir den Winkel, es wird dringend empfohlen, alle unsere Dateinamen zu benennen, Start und dann Postfix der Entität. Zum Beispiel haben wir hier das Punktmodul geschrieben, weil es ein angekündigtes Modul ist. In diesem Fall sind wir genau hier, dot interface, weil es eine Schnittstelle sein wird und genau das Gleiche gilt für Klassen. Hier schreiben wir keine Klassen-Eulen, sondern unser Modul. Und hier in CurrentUser sind wir genau hier, Experten-Oberfläche, und hier haben wir unsere aktuelle Benutzeroberfläche. Jetzt ist die Frage, was wir hineinbekommen werden? Und es ist leicht zu beantworten, dass wir nur in unseren Postboten schauen müssen. Hier kommen wir also zurück für unseren aktuellen Benutzer, unsere E-Mail-Adresse, unseren Benutzernamen, unsere ID und unser Token. Also können wir hier einfach schreiben , dass wir einen DStream bekommen. Wir haben unser Token, das ist string. Wir haben den Namen unseres Benutzers. Es ist auch eine Zeichenfolge, und die letzte ist unsere E-Mail. Und damit sind wir erfolgreich mit der Definition unserer aktuellen Benutzerentität für unseren Kunden. Und jetzt können wir an jedem einzelnen Ort, an dem wir über aktuelle Benutzer sprechen, diese Schnittstelle verwenden. Unser nächster Schritt besteht darin, eine Klasse zu erstellen, denn eigentlich, bevor wir mit der Erstellung von Komponenten für die Registrierung und Leukämie beginnen , müssen wir einen Dienst erstellen , der mit unserer API kommuniziert. Und der Service gehört mit Sicherheit in unser Modul. diesem Grund werde ich hier einen neuen Ordner erstellen, services, und ich möchte hier out dot services.js erstellen. Eigentlich ist es wirklich eine nette Benennung wenn Sie nicht wissen, wie Sie Ihren Service benennen sollen. Wenn Sie nur einige Methoden in Ihr Service-Inside-Modul packen möchten und nicht wirklich wissen, worum es bei Methods II geht. Sie können den Dienst einfach wie ein Modul benennen. In unserem Fall haben wir hier unser Modul und unseren Service. Aber wenn Sie irgendwann Service sind, wird es zu groß sein. Du kannst immer trennen. Es kann sich um den Anmeldedienst, die Registrierung, Dienst oder den aktuellen Benutzerdienst handeln, was auch immer Sie bevorzugen. Im Moment ist unser Service völlig in Ordnung. Hier möchte ich neue Unterrichtsstunden exportieren. Jetzt ist es sehr wichtig, nicht zu vergessen, auf das obere injizierbare zu schreiben. Wenn Sie möchten, probieren Sie diese einzelne Zeile aus. Es wird sehr schwierig sein, ein Problem zu debuggen. Ihre Eingaben werden funktionieren, aber Sie werden etwas Magie in der Konsole bekommen. Vergessen Sie deshalb niemals injizierbar, wenn es sich um Dienste handelt Jetzt müssen wir den Dienst innerhalb eines Moduls registrieren. Und genau das geht in Richtung von Abhängigkeitsinjektionen und Modulen innerhalb von Angular. Was wir also hier tun wollen, wir wollen ein neues Feld schaffen , das Anbieter genannt wird. Und hier ist es ein Array und wir schreiben in unserem, unserem Service. Das ist also genau der richtige Weg, um alle Dienste innerhalb unseres Moduls zu registrieren . Jetzt wollen wir hier unsere erste Methode erstellen und sie wird vom aktuellen Benutzer abgerufen. Nun, hier können wir einfach schreiben, dass wir erstellen wollen, aktuelle Benutzerfunktion abrufen und es wird schnell vom aktuellen Benutzer beobachtbar sein. Und an dieser Stelle könnten Sie Fragen haben, könnten Sie Fragen haben wenn Sie Angular nicht so tief kennen, und wenn Sie nicht wissen, wofür unsere Observables überhaupt und dieses Thin mit Generika hier verwirrend sein könnten Sie. Was ist also beobachtbar? Dies ist nur eine Darstellung des Streams. Was ist Stream? Das hat sich im Laufe der Zeit geändert, was bedeutet, dass wir den Stream abonnieren können. Und wenn die Änderung im Stream stattfindet, erhalten wir einen neuen Wert. Dann sag der Winkel, alles arbeitet an der Liebe mit Streams, wenn du keine Versprechungen benutzt. Das, was eigentlich Streams und Observables bedeutet, ist ein bestimmtes Muster, wie wir unseren Code schreiben werden. Also was wir hier sagen, dass wir ein Observable zurückbekommen. Und hier geben wir an welchen Datentyp wir zurückbekommen. Und in unserem Fall sagen wir hier, dass diese Funktion eine beobachtbare aktuelle Benutzeroberfläche vom Typ zurückgeben muss . aktuelle Benutzeroberfläche ist genau unser aktuelles Benutzerobjekt. Jetzt wollen wir einige Daten holen, und dafür haben wir in Angular HTTP. Deshalb schreibe ich hier Konstruktor und innerhalb des privaten, http ist gleich HTTP-Client. Also, was diese Zeile oben macht, diese Notation mit Konstruktor, dann private eine Variable entspricht einer Klasse ist, wie wir einige Abhängigkeiten innerhalb eines Dienstes injizieren. Und es ist völlig in Ordnung, wenn es für dich ein bisschen beängstigend ist , solchen Code zu sehen, wir werden in jedem einzelnen Video immer wieder genau den gleichen Code schreiben . Im Moment müssen Sie nur verstehen, dass wir HTTP hier in unserem Service verwenden müssen. Hier müssen wir diesen HTTP-Client injizieren. Und jetzt hier in unseren Methoden können wir diesen Punkt HTTP verwenden und dynamic ist hier wollen wir die GET-Methode verwenden , um unseren Benutzer zu bekommen. Also was ich jetzt machen möchte Ich möchte eine URL erstellen. Und eigentlich können wir hier einfach http localhost 4.001 slash api slash user einfügen , und wir werfen einfach hier unsere URL. Und jetzt müssen wir diese HTTP-GET-URL zurückgeben. Aber hier bekommen wir einen Fehler. Observable Observable ist dem Typ beobachtbare aktuelle Benutzeroberfläche nicht zuweisbar , warum passiert das? Weil sie tatsächlich HTTP GET standardmäßig beobachtbares Off-Objekt zurückgeben , weil unser HTTP GET Cantril und wissen welche Daten wir zurückbekommen, wenn nein, es ist nur uns selbst in unserer Anwendung, aber wir können das hier tun, wir müssen angeben, was wir zurückbekommen. Und in diesem Fall sagen wir hier, okay, dieses spezifische HTTP-GET von dieser URL wird eine falsche aktuelle Benutzeroberfläche zurückgeben falsche aktuelle Benutzeroberfläche und nicht nur ein zufälliges Objekt. diesem Grund wird in diesem Fall kein Fehler angezeigt, da diese einzelne Zeile schnell von der aktuellen Benutzeroberfläche beobachtbar ist . Und Sie müssen sich nur daran erinnern , dass all diese HTTP für uns immer beobachtbar von etwas zurückkehren wird. Das nächste, was wirklich schlimm ist, ist diese Zeile. Warum ist das so? Zunächst einmal, hier stützen wir uns direkt auf die Straße. Das ist ein super schlechter Ansatz. Warum ist das so? Weil diese Linie bei der Produktion kaputt gehen wird. Es ist nur für die Entwicklung geeignet. Und wir müssen in jeder einzelnen Methode immer wieder genau den gleichen Code schreiben , das ist schlecht. Dafür haben wir Umgebungsvariablen in Angular. Wir können zurück in die Quellumgebungen und hier in die Umgebung springen , ja, genau hier müssen wir alle unsere Konstanten basierend auf einer bestimmten Umgebung definieren . Was wir also hier tun müssen, wir können eine neue Eigenschaften-API-URL erstellen, und wir können unseren Stream einfach hier einfügen. Also lokaler Host für 1001 Slash-API. Und das ist völlig in Ordnung, denn hier in unserer Entwicklungsumgebung wo die API-URL festgelegt ist, wird auch hier die Umgebung für die Produktion haben. Und wir können dort verschiedene API-URLs definieren. Dies ist der richtigste Weg, dies zu tun. Jetzt können wir einfach hier die Umgebung verwenden, und wie Sie sehen können, erhalten wir eine äußere Eingabe-Punkt-API-URL plus. Und hier müssen wir einfach Slash-Benutzer verwenden und nichts weiter. In diesem Fall verwenden wir diese Umgebungs-URL wieder und sie ist vollständig innerhalb der Umgebungsvariablen isoliert, sodass unsere Dienste vollständig bereit sind. Aber was wir tun wollen, wir wollen diesen Benutzer jedes Mal bekommen , wenn wir unsere Winkelanwendung laden. Warum ist das so? Weil sie tatsächlich gestohlen wurden. Unser aktueller Benutzer ist normalerweise im Speicher und nach der Anmeldung oder Registrierung sprechen wir einfach innerhalb des lokalen Speichers. diesem Grund müssen wir jedes Mal, wenn wir in unsere Anwendung springen, wir in unsere Anwendung springen, den aktuellen Benutzer finden. Dafür möchte ich zurück in unsere App-Komponente springen. Und das ist genau die Komponente , die auf jede Seite geladen wird. Hier können wir implement auf init schreiben. Und wenn Sie nicht wissen, was nicht drin ist, ist dies eine spezielle Methode, die bei der Initialisierung unserer Komponente aufgerufen wird . Hier bin ich in der Technik richtig. Und dann sagten wir können unseren Service nutzen, aber um ihn nutzen zu können, müssen wir ihn hier injizieren. Und hier schreiben wir genau die gleichen Sachen wie wir sie in unserem Service geschrieben haben. Privat, nicht HTTP wie wir es im Service getan haben, sondern unser Service, den wir gerade erstellt haben. Und hier müssen wir unseren Service eingeben, der sich in unserem Modul befindet. Und jetzt können wir es hier direkt im Motor verwenden . Also das ist unser Service und wir haben hier die aktuelle Benutzermethode bekommen. Aber was ist am wichtigsten diese Renditen für uns und beobachtbar. Und normalerweise wollen wir etwas tun , um uns die Veränderungen des Beobachtbaren anzuhören. Deshalb werden wir hier versuchen, dot subscribe zu abonnieren. Und jetzt drinnen abonnieren wir werden einige Informationen bekommen. Also hier werde ich einfach Rads und Console Log Ras schreiben , damit wir überprüfen können, ob es funktioniert. Ich werde zum Browser springen und die Seite neu laden. Und nur um Sie daran zu erinnern, auch Ihr Client-Webserver gestartet sein muss. Hier bekommen wir einen Fehler. Http-Client-Dienst, kein Anbieter für den HTTP-Client. Was heißt das? Das bedeutet, dass wir den HTTP-Client in unserer Anwendung verwenden, aber kein Modul des HTTP-Clients in unsere Anwendung injiziert haben . diese Weise können Sie das Problem beheben. Wir müssen in ein Modul springen, und hier müssen wir das HTTP-Client-Modul importieren. In diesem Fall wird unser Fehler behoben. Laden wir die Seite neu. Wie Sie jetzt sehen können, funktioniert es, aber hier erhalten wir jetzt eine Fehlermeldung bezüglich der Cross-Origin-Anfrage. Und das ist eigentlich völlig richtig, weil wir unsere Express-Backend-Anwendung nicht richtig konfiguriert unsere Express-Backend-Anwendung nicht richtig haben, um mit Cross-Origin-Anfragen zu arbeiten. Deshalb können wir einfach wieder in unseren Server springen. Und hier Open Source Server Tiers, unser nächster Schritt wird die Installation eines zusätzlichen Pakets sein. Deshalb werde ich in unseren Server springen. Und genau hier ist npm install course and course das beliebteste Paket, um das Kursproblem mit der Express-Anwendung zu lösen . Ich werde einfach wieder hineinspringen oder Schwesternschaft S. Und hier kann ich auf den obersten Input-Kurs schreiben, Drum Corps. Und jetzt müssen wir hier nur noch vor unserem Body Parser eine Bank schreiben und wir bieten einen Einblickskurs als Funktion an. Wie du siehst, haben wir jetzt keine Fehler im Backend und wir können unsere Frontend-Seite neu laden. Wie Sie jetzt sehen können, haben Sie keine Diskursära und wir werden nur unbefugt. Schauen wir uns an, was wir im Netzwerk haben. Wir haben diese Anfrage für den Benutzer, und wenn ich sie ein bisschen kleiner mache, können wir sehen, was wir in den Antwort-Headern bekommen, und wir bekommen hier Zugriffskontrolle erlaubt Ursprungsstern. Und das ist eigentlich der Grund, warum es funktioniert. Unser Backend, setze es richtig ein. Diese ermöglichen den Zugriff auf den Ursprung. Aus diesem Grund erhalten wir keine Fehlermeldung vom Browser. Aber wie Sie hier sehen können, bekommen wir 401 nicht autorisiert. Und eigentlich ist das völlig normal. Wir sind in unserer Anwendung nicht angemeldet. Wir haben einfach den aktuellen Benutzer abgerufen und es ist ein Fehler aufgetreten. Das ist völlig in Ordnung. Was nicht in Ordnung ist, hat in keiner Weise auf diese autorisierte Anfrage reagiert . Was wir also tun können, wir können zurück in unsere App-Komponente springen , in der wir diesen Code geschrieben haben. Und wir können auch mit einem Fehler umgehen. Und dafür können wir in Subscribe schreiben, keine Funktion, sondern ein Objekt. Hier innerhalb des Objekts können wir zwei Felder haben. Zunächst einmal ist dies genau unser Erfolg. Und wie Sie hier sehen können, lasse ich diese Funktion so wie sie ist. Aber nach dem nächsten können wir einen Fehler erstellen. Und in diesem Fall passiert das, wenn wir einen Fehler haben. Also hier können wir einfach einen Konsolenprotokollfehler schreiben und vielleicht wollen wir die Sarah sehen, lass uns überprüfen, was wir bekommen. Ich lade die Seite neu und wir erhalten unseren Fehler, die HTTP-Fehlerantwort. Und hier haben wir Unbefugte und können auf diese Ära reagieren. Also was ich jetzt machen möchte, ich möchte die aktuelle Benutzerfunktion festlegen. Und eigentlich macht es nicht viel Sinn, weil wir kein Glück haben, aber wir müssen immer noch Informationen in unserer Anwendung speichern , dass der Benutzer nicht gesperrt ist. In diesem Fall kann die gesamte Anwendung, jede einzelne Komponente überprüfen, ob wir ab und zu eingesperrt sind, wir ab und zu eingesperrt sind weiß unsere Komponente, wie sie darauf reagieren soll. Deshalb müssen wir wieder in unseren Service einsteigen. Und hier möchte ich eine neue Methode erstellen set aktueller Benutzer. Hier drinnen bekommen wir den aktuellen Benutzer, was unsere aktuelle Benutzeroberfläche ist. Und es wird eine Lücke zurückgeben , weil wir tatsächlich nur die Daten im Inneren ändern und nichts zurückgeben. Und eigentlich ist es nicht ganz richtig. Hier ist die aktuelle Benutzeroberfläche oder null, wenn wir keinen aktuellen Benutzer haben. Denn eigentlich, wenn wir nicht in Poupon gesperrt sind, um den aktuellen Benutzer auf jetzt zu setzen. Die Frage ist nun, was wir reinkommen? In der Regel das, was Sie in vielen Anwendungen sehen werden. Die Leute definieren einfach eine lokale Eigenschaft innerhalb von Stunden, wie Benutzer. Und dann können Sie hier einfach schreiben Dieser Benutzer ist gleich Benutzer. Dies ist nicht der beste Ansatz mit Angular. Und im Angular ist es super komfortabel und effizient, mit Streams zu arbeiten , da es viel einfacher ist, auf Streams zu reagieren und sie zu kombinieren. diesem Grund müssen wir einen schwierigeren Ansatz verwenden, jedoch am besten für große Anwendungen geeignet ist. Es ist richtig. Hier möchte ich schreiben, dass wir hier ankommen, aktueller Benutzerstream. Hier. Ich möchte ein neues Verhalten als Thema erstellen, und es heißt Verhalten ein Thema. Ich sage, dass wir hier die aktuelle Benutzeroberfläche oder jetzt bekommen oder es nicht definiert haben. Und nach diesen runden Klammern, und hier sagen wir standardmäßig undefiniert. Also was ich hier überhaupt geschrieben habe und wie wir es verwenden werden. Was ist eigentlich ein Verhaltensthema? Dies ist nur eine Darstellung von Streams. Dies ist nur ein Stream , der einen Standardwert hat. In diesem Fall ist unser Standardwert undefiniert, und wir können innerhalb des Streams auch Typen wie aktuelle Benutzeroberfläche jetzt oder undefiniert festlegen . Und jetzt können wir innerhalb des aktuellen Benutzers den Stream ändern. Wir können hier diesen Punkt aktuellen Benutzer schreiben. Und um den Stream zu ändern, verwenden wir dot next und bieten Ihnen einen Mehrwert. In diesem Fall stellen wir hier den aktuellen Benutzer zur Verfügung und er ist vollständig gültig, da die aktuelle Benutzeroberfläche ein gültiger Typ ist. Der Hauptpunkt ist hier, dass viele Komponenten in unserer Anwendung diesen aktuellen Benutzerstream abonnieren können , und es werden automatische Plünderer sein in diesem Moment hier beendet wurden, als wir ändern den Wert innerhalb des aktuellen Benutzerstreams. Und keine Sorge, wenn Sie es nicht vollständig verstehen, werden Sie in späteren Vorlesungen sehen, wie wir es verwenden. Also haben wir erfolgreich unseren aktuellen Benutzer erstellt. Jetzt können wir hier in unserer App-Komponente, zumindest irrtümlich, etwas tun. Wir können unseren aktuellen Benutzer auf zwei setzen. Nun, hier werde ich diesen Punkt unseren Service dot set aktuellen Benutzer schreiben . Und hier drinnen werde ich es jetzt tun. Was passiert hier auf Initialize unserer Anwendung, wir bekommen hier aktuellen Benutzer. Wenn wir den aktuellen Benutzer nicht erhalten haben, setzen wir ihn auf null. Und jetzt willst du mich sicher fragen, warum ich jetzt hier geschrieben habe und definiere es und aktuellen Benutzer, es macht Sinn, hier den aktuellen Benutzer und jetzt einzustellen, aber nicht undefiniert. Außerdem haben sie es mit dem Zweck gemacht, weil wir eigentlich mit drei verschiedenen Zuständen umgehen müssen. Zunächst einmal haben wir es standardmäßig nicht definiert, was für uns tatsächlich bedeutet, wir den aktuellen Benutzer noch nicht abgerufen haben. Es ist nicht bereit, wenn wir jetzt hier sitzen, es bedeutet, dass wir den aktuellen Benutzer abgerufen haben, aber es war erfolglos. Wir sind nicht eingesperrt. Also jetzt bedeutet hier, dass wir nicht eingesperrt sind. Und die aktuelle Benutzeroberfläche bedeutet offensichtlich, dass wir eingesperrt sind. So haben wir erfolgreich unser Modul, unseren Service, die aktuelle Benutzeroberfläche und einige grundlegende Funktionen erstellt , die wir in den nächsten Vorlesungen benötigen werden. 14. Register – Markup + Formular: Im vorherigen Video haben wir viele Mitarbeiter für den aktuellen Benutzer vorbereitet . In diesem Video möchte ich mich auf die Erstellung unserer Registrierungsseite konzentrieren , da der Kuchen für die Registrierung bereits implementiert ist. Und dafür müssen wir zunächst eine neue Komponente erstellen. Deshalb bin ich hier in App Stunden hier müssen wir einen neuen Ordner erstellen , der Komponenten genannt wird. Die erste Komponente, die wir implementieren können, ist die Registrierung. Und hier ist ein wichtiges Wort. Eigentlich werden wir später zwei Komponenten implementieren , Registrierung und Anmeldung. Die Unterschiede zwischen diesen beiden Komponenten sind nicht so signifikant. Wir haben in Registrierung, zusätzliches Feld, Benutzername und Anmeldung mit, dieses Feld nicht. Dann haben wir anders Der Reifengummi. Das ist es. Alles. Andere Sachen bleiben gleich. diesem Grund haben wir zwei Möglichkeiten. Wir könnten eine einzelne Komponente erstellen und diese einfach zwischen Anmeldung und Registrierung verwalten. Oder wir können zwei verschiedene Komponenten erstellen. Ich bevorzuge es, zwei verschiedene Komponenten zu erstellen nur weil es später einfacher zu warten ist, auch wenn wir den Code ein wenig duplizieren. Also hier erstellen wir einen neuen Ordner und nennen ihn Register. Jetzt müssen wir in diesem Ordner seine Datei erstellen, eine HTML-Datei. Und hier werden wir die Punktkomponente dot ts und auch Punktkomponente dot HTML registriert haben. Jetzt müssen wir in unserer Komponente unsere neue Klassenregisterkomponente testen und dann sagen, dass wir diese Komponente zuerst einen Selektor bereitstellen müssen . Hier haben Sie eine wichtige Entscheidung. Sie können alle Ihre Selektoren benennen beginnend mit dem Namen Ihrer Anwendung. Sie erstellen beispielsweise ein Präfix , das innerhalb der Anwendung gültig ist. In unserem Fall können wir es zum Beispiel L Trello oder einfach L nennen. Und dann haben Sie einen Unterschied zwischen allen Bibliotheken, die Sie verwenden und Komponenten aus unserem Projekt. Denn wenn wir innerhalb des HTML springen, haben wir hier ein L-Register, dann wissen wir, dass dies Bestandteil unseres Projekts ist. Wenn Sie hier zum Beispiel das Präfix leer und dann eine Schaltfläche haben , verstehen Sie das k. Dies ist eine Materialbibliothek und es ist nicht unser Projekt. Dies ist der erste Ansatz , der möglich ist. Ich bevorzuge einen anderen Ansatz, bei dem ich jede einzelne Komponente innerhalb des Moduls voranstelle , was bedeutet, dass wir uns jetzt in unserem Modul befinden. Hier wird der Selektor dort draußen registriert sein. Es ist viel einfacher, weil wir keine Bibliotheken verwenden. Und in diesem Fall können wir sehen, von welchem Modul wir diese Komponente erhalten. Das nächste, was wir in unserer Komponente angeben müssen , ist unsere Vorlagen-URL. Und das ist die URL für unsere Register-Komponente HTML. Jetzt sollten wir nicht vergessen, unsere Komponenten in unserem Modul zu registrieren . Hier springen wir in unser Modul Ts und erstellen hier eine Felddeklaration. Und im Inneren können wir jetzt Registerkomponente und Delta E schreiben , die aus registrierten und registrierten Komponenten importiert wurden. Unsere Komponente ist also da. Jetzt können wir ein Markup für unsere Komponente in unsere Registerkomponente schreiben , ja, und tatsächlich habe ich hier den Buchstaben S im Wortregister verpasst . Lassen Sie uns nun einen Marker für unsere Registerseite verwenden. Und die erstklassige , die wir hier haben, ist div mit Klassen-Login-Seite. Und es mag für Sie verwirrend sein, aber das liegt nur daran, dass unsere Stile für die Anmeldeseite geschrieben wurden und es genau so ist wie bei der Registrierungsseite. Also hier haben wir unsere div-Anmeldeseite, und jetzt haben wir oben einen Link. Hier haben wir einen Router-Link und hier ist Slash. Diese Route geht also auf unsere Homepage. Innerhalb unseres Routerlinks wollen wir ein Bild. Also hier wird Bildquelle Slash Acids, Slash Trello, Logo Dot SVG sein. Und nach dieser Klasse, Thread-Gesetz, Hauptlogo. Und in diesem Moment möchten Sie mit Sicherheit sagen, okay, wir haben keine Bilder. Dies ist speziell für Sie vorbereitet alle Bilder und legen Sie sie in diesen Ordner, innerhalb von Assets. Und Sie können all diese Bilder aus dem Archiv dieser speziellen Lektion im Beschreibungsfeld unten aufnehmen , wie Sie hier sehen können, innerhalb der Quelle, in Assets, ich habe ziemlich viele Bilder, also vergessen Sie nicht um sie für unser Projekt zu übernehmen. Lassen Sie uns nun zurück in unsere App springen, unsere Komponenten registrieren sich, registrieren HTML, und nach unserem a -Tag hier oben wollen wir div mit class firm container erstellen, und es wird unser Container sein für unser Formular. Jetzt, innerhalb des Containers, wollen wir zunächst den login-Header der def-Klasse schreiben. Und wieder haben wir die Klasse aus dem Login, aber es ist keine große Sache. Und hier schreiben wir Register für Trello. Danach schreiben wir eine Klasse für Validierungsfehler. Und eigentlich werden wir vorerst keine Fehler machen, aber wir werden es später verwenden. Das ist y hier, nur div Klassenfehler haben es geschlossen. Es ist völlig leer und dort ist noch nichts gerendert. Danach haben wir unser Formular. Öffnen und schließen wir also das Formular-Tag. Und innerhalb von haben wir spezifische Bereiche. Zuallererst haben wir hier eine E-Mail, also geben Sie eine E-Mail ein. Und hier möchten wir die E-Mail-Adresse des Inhabers platzieren. Und der letzte wird eine Klassen-Login-Eingabe sein. Jetzt möchte ich diese Zeile zweimal kopieren , weil wir nicht nur E-Mail benötigen, sondern wir brauchen hier auch den Namen unseres Benutzers. Also hier brauchen wir keinen Typ. Platzhalter sind Nutzername und Klasse. Wir werden nach Input suchen. Und nach diesem Typ Passwort und Platzhalter-Passwort. Danach können wir unseren Button erstellen, um den Benutzer zu registrieren. Hier sind wir Button-Typ, Submit, Klasse, Login, Submit-Button. Und innerhalb dieser Schaltfläche versuchen wir es für eine Registrierung. Nach unserem Formular wollen wir unsere Links rendern. Also hier werden wir div class bottom form links haben. Schließen wir dieses Div und erstellen darin einfach einen einzigen Link zu unserer Anmeldeseite. Also hier wird ein Router-Link sein. Schon wieder. Hier haben wir eine Slash-Anmeldeseite und einen Klassenregistrierungslink. Hier in unserem a-Tag führen wir einfach die Anmeldung aus. Prüfen wir, ob etwas gerendert wurde. Eigentlich wollen wir zur Slash-Registrierungsseite springen und unsere Seite sehen, aber es funktioniert nicht, weil wir unsere Route nicht registriert haben. Registriert. Dafür müssen wir zurück in unser Modul, unser Modul, springen . Und hier müssen wir alle Routen registrieren , die wir in diesem speziellen Modul erstellen möchten. Hier oben können wir ein Routen-Array erstellen und wir können sagen, dass dies Runden sind, und in diesem Fall wird es nicht nur ein Array sein. Wir werden die Validierung jeder Runde innerhalb haben. Hier müssen wir also ein Objekt mit unserem Pfad hinzufügen, der registriert wird, und unserer Komponente, die wir gerade erstellt haben. Und es ist Registerkomponente. In diesem Fall funktioniert es, nachdem wir diese Routen zu unseren Eingaben hinzugefügt haben. Hier müssen wir gerade Vögel einsteigen und den Punkt des Hörrouten-Moduls für Kinder verwenden . Und es ist wichtig , hier für Kinder und nicht gerunzelt zu verwenden , da wir den Strauss innerhalb oder ein untergeordnetes Modul erstellen möchten, nicht innerhalb des App-Moduls. Hier finden Sie untergeordnete Routen und Routen für dieses spezielle Modul. Schauen wir uns das jetzt an. Ich werde die Seite neu laden und zum Slash-Register springen. Und wie Sie in diesem Fall sehen können, wurde es gerendert. Wir können unser Telefon ohne CSS sehen, und hier ist unsere SVG-Datei, die wir oben zur Verfügung stellen. Jetzt ist Ihre Frage sicher, wohingegen unser CSS ist und das ist der Punkt. Ich habe auch das gesamte CSS für unser Projekt vorbereitet. Wir werden uns also voll und ganz auf Angular konzentrieren und in Geschäftslogik schreiben. diesem Grund müssen Sie den Quellcode unseres Projekts unter das Video aufnehmen. Und dann müssen Sie diese Zeilen innerhalb des Quellordners in styles.css kopieren. Und wie Sie hier sehen können, befinden sich diese alle in Teilen der Stile für neue Ordner, die Sie ebenfalls kopieren müssen. Sie müssen also zwei Dinge kopieren, Quellstilordner und Quellstile, CSS, Sie müssen diese Datei überschreiben. In unseren Quellstilen haben wir also viele verschiedene Stile. Wie Sie hier sehen können. Erstellen Sie beispielsweise eine Aufgabe. Wir haben alles, was das Erstellen von Aufgaben betrifft. Und all diese Stile sind global und wir werden die ältesten Stile verwenden , um uns voll und ganz auf die Angular-Anwendung zu konzentrieren. Außerdem möchte ich Sie daran erinnern, dass unsere globale Datei, Source Styles, CSS, automatisch von Angular verwendet wird. Das heißt , wenn Sie diese Symbole hier geschrieben haben, funktioniert es sofort. Und jetzt, wenn wir die Seite neu laden, haben wir hier unser Markup. Wir haben hier also ein Trello-Symbol, und das ist eigentlich ein Link zur Homepage. Und wir haben unser Anmeldeformular mit E-Mail, Benutzername und Passwort. Das einzige Problem ist hier, hallo l Trello das wir in der Ecke sehen können. Dies sind nur ein paar Reste in unserer Quell-App, App-Komponenten-HTML. Hier können wir diese Leitung entfernen und einfach hier leben Router Outlet. Also hier haben wir erfolgreich unser Markup für die Registrierungsseite erstellt . Binden Sie nun dieses Formular irgendwie mit Angular zusammen. Und tatsächlich haben wir im Angular reaktive Formen. Und dies ist ein zusätzliches Angular-Modul, um mit Formularen auf Schachweise dieser Woche zu arbeiten. Das ist y. Lassen Sie uns zurück ins Innere springen, um unsere Komponenten zu registrieren, die Komponenten ts zu registrieren. Und hier möchte ich zunächst eine neue Attributformulargruppe in unser Formular einfügen. Und hier werde ich versuchen, es ist gleich Form. Und auch hier brauchen wir NG Submit zum Absenden des Formulars. Und hier werden wir auf Submit erstellen. Die Frage ist nun, was ist diese Formulargruppe? Und tatsächlich können wir innerhalb reaktiver Formulare eine Formulargruppe innerhalb einer Komponente erstellen. Und es wird eine Darstellung unseres HTML-Formulars sein. Und es wird vollständig an unsere HTML-Elemente gebunden sein und funktioniert sofort. Was wir hier in unserer Klasse machen wollen, wir wollen unser Formular erstellen. Und das ist eigentlich diese Punkt-wenn-b-Punkt-Gruppe. Und wir haben überhaupt kein B in unserer Komponente. diesem Grund müssen wir den Konstruktor injiziert einfügen. Also hier werde ich privat schreiben wenn b, und das ist Form Builder. Und wie Sie sehen können, wurde es aus eckigen Formen importiert. Jetzt haben wir hier oben Zugang zu dieser großen Gruppe und hier ist unser Formular. Welche Bereiche haben wir also? Zuallererst haben wir eine E-Mail und tatsächlich können wir hier als Array unsere Validatoren sagen, also der Anfangswert hier ist leer und hier können wir Validatoren schreiben, die erforderlich sind, in diesem Fall reaktive Formen. Wir überprüfen dieses Feld standardmäßig auf Leere. Jetzt können wir diese Zeile kopieren und einfügen , weil wir genau dasselbe haben. Wir haben hier unseren Benutzernamen, ebenfalls ein leeres Feld und eine Validierung erforderlich, und hier ist unser Passwort. Es ist auch standardmäßig ein leeres Feld und es ist erforderlich, damit unsere Firma bereits erfolgreich ist. Und diese Zeile hier für Firm Group-Formular bindet dieses spezielle Formular an unser HTML, aber es ist nicht alles. Wir müssen auch jedes einzelne Feld binden. Hier haben wir überall diesen Input. Und was ich hier machen möchte, möchte ich ein Namensattribut für Formularsteuerelemente eingeben. Hier binden wir für jede Eingabe ein bestimmtes Feld. Die erste hier ist also unsere E-Mail. Der zweite ist unser Benutzername und der letzte ist Passwort. In diesem Fall, wenn wir diese Eingaben ändern, werden sie in unserer Formulargruppe hier aktualisiert. Und das Letzte, was wir erstellen müssen , ist die Submit-Methode. Wir haben es also bereits in unserem HTML erstellt. Hier können wir einfach beim Absenden hinzufügen und es wird ungültig zurückgegeben. Und jetzt möchte ich nur noch die Konsole anmelden Submit Komma, dieses Formular Punktwerte. Prüfen wir, ob es funktioniert. Ich werde den Patienten neu laden, bei dem ein Fehler nicht an die Formulargruppe gebunden werden kann, da es sich nicht um ein bekanntes Element des Formulars handelt ein Fehler nicht an die Formulargruppe gebunden werden kann, da es sich nicht um . Warum passiert es? Weil wir kein Modul für reaktive Formulare in unser Modul injiziert haben. Also lasst uns zurück ins oder aus dem Modul springen. Und hier in den Eingaben müssen wir reaktives Forenmodul schreiben. Und nach diesem Input sollten wir die Sarah nicht mehr bekommen. Laden wir die Seite neu. Wie Sie sehen, haben wir keine Fehler. Jetzt kann ich etwas hineinlegen und einfach auf Registrieren klicken. Und wie Sie hier in der Konsole sehen können , wo Sie onsubmit, E-Mail, Benutzername und Passwort erhalten , was tatsächlich bedeutet, dass alle unsere Felder erfolgreich an unsere eckige Komponente gebunden wurden . 15. Register – Service + Validierung: In früheren Videos haben wir den Markt für die Registerseite und auch für die Firma erstellt , aber wir vermissen immer noch unseren API-Aufruf , den wir in diesem Video implementieren müssen. Deshalb möchte ich zuallererst wieder in unsere, unsere Dienste, unseren Service einsteigen , denn eigentlich werden wir hier alle unsere API-Aufrufe schreiben und wir haben bereits hier aktuelle Benutzer bekommen, was wir tun werden später polieren. Aber jetzt möchte ich Register API-Kohle erstellen. Deshalb können wir hier einfach Register schreiben. Und die Frage ist, was bekommen wir hier? Wir bekommen unser Formular, aber wir haben es noch nicht eingegeben. diesem Grund ist es nicht bequem zu bedienen. Und wir wollen hier nicht schreiben , dass wir welche bekommen, weil es nicht viel Sinn macht, was diese Methode will, sie möchte wissen, was darin bereitgestellt wurde. Deshalb wollte ich wieder in unsere Typen einsteigen und hier einen neuen Typ erstellen. Und wir können diesen Typ Registeranforderungsschnittstelle nennen. Und du fragst vielleicht, okay, aber warum so ein seltsamer Name? Und eigentlich ist es nicht seltsam. Die Hauptidee ist die Zeit alles repariert wird , was wir in Bezug auf Anfrage und Antwort schreiben Bezug auf Anfrage und Antwort mit einem bestimmten Postfix in diesem Fall hier weiß ich. Okay. Dies ist eine Registrierungsanfrage. Das ist also der Hauptteil der Anfrage. Wenn wir bei Bedarf über eine Antwort unseres Registers sprechen , dann wäre es ein registrierter Antwortschnittstellentest. In diesem Fall ist es einfacher zu verstehen, wofür Sie diese Schnittstelle verwenden. Jetzt erstellen wir diese Schnittstelle. Also hier möchte ich unsere neue Schnittstelle exportieren und es wird Registeranforderungsschnittstelle sein. Was wir in genau all unseren Feldern haben werden , die wir in ein Formular geschrieben haben. Also hier haben wir unsere E-Mail, es ist eine Zeichenfolge, unser Benutzername, es wird auch eine Zeichenfolge sein. Und das letzte ist unser Passwort. Und das Passwort ist auch eine Zeichenfolge. Und eigentlich geht es nicht nur um das Formular. Wenn wir in unsere Server Source Controller schauen, wurden hier bereits Benutzer eine Registermethode erstellt. Und innerhalb unserer Registermethode suchen wir genau das im Körper. Fordern Sie also die E-Mail-Adresse, den Benutzernamen und das Passwort an, genau das senden wir vom Kunden. Deshalb haben wir uns registriert, dass wir wieder in unsere Dienste, unsere Service-Stufen, einsteigen können . Hier im Register, was wir als Parameter bekommen, es ist unsere Registeranfrage und unser Typ ist eine es ist unsere Registeranfrage und unser registrierte Anforderungsschnittstelle , die wir gerade erstellt haben. Jetzt ist die Frage, was ich nach der Registrierung zurückbekomme , wir bekommen unseren aktuellen Benutzer zurück. Auf diese Weise können wir genau so schreiben , wie der aktuelle Benutzer die aktuelle Benutzeroberfläche beobachten kann. Wir haben es schon. In diesem Fall ist alles innerhalb unserer Methode korrekt getippt. Jetzt müssen wir eine URL-Eigenschaft erstellen. Also hier URL und wir verwenden wieder Umgebung Punkt ein Payer-Realm, weil es die gleichen Slash-Benutzer sind, weil sie registriert waren Anfrage ist nur für Slash-Benutzer zu posten. Und jetzt möchte ich dieses HTTP zurückgeben und wir haben hier Zugriff auf den HTTP-Post und im Inneren stellen wir die Festival-URL zur Verfügung. Und zweitens Körper, und unser Körper ist unsere Registeranfrage. Aber auch hier erhalten wir einen Fehler, weil unser Typ für das Objekt beobachtbar ist und von der aktuellen Benutzeroberfläche nicht beobachtbar ist. Denn offensichtlich weiß der HTTP-Post standardmäßig nicht, was wir Einblicke geben wollen. Hier müssen wir in unserem HTTP-Beitrag bereitstellen, was wir zurückbekommen. Und es ist die aktuelle Benutzeroberfläche, aber es ist nicht alles, muss auch eine zusätzliche Methode erstellen , um das Token im lokalen Speicher festzulegen . Was heißt das? Tatsächlich, wenn wir einen Benutzer registrieren oder den Benutzer bekommen, erhalten wir auch das Token-Feld, das wir im Backend vorbereitet haben. Und wir sollten nichts mit diesem Feld auf dem Client tun , aber wir müssen es einfach speichern und den lokalen Speicher speichern und an jede einzelne Anfrage anhängen. In diesem Fall kann unser Backend nachvollziehen, wann die Anfrage autorisiert wurde und dass wir das richtige Token bereitgestellt haben. Hier möchte ich ein zusätzliches Methodenset-Token hinzufügen . Und tatsächlich werden wir den aktuellen Benutzer bereitstellen , da wir diese Methode entweder aufrufen , nachdem wir einen aktuellen Benutzer erhalten haben, oder nach der Registrierung oder Guinean. Hier ist der aktuelle Benutzer aktuelle Benutzeroberfläche und jetzt wird es void zurückgeben, weil wir im Inneren einfach lokalen Speicher verwenden möchten. Und hier werde ich lokale Speicherpunkt-Set-Artikel schreiben. Und drinnen möchte ich vor Ort sprechen und wir schreiben innerhalb des aktuellen Benutzer-Punkt-Tokens. Diese Methode speichert also am einfachsten in LocalStorage unser Token des aktuellen Benutzers, und jetzt sind wir bereit, unsere Komponente anzupassen. Lassen Sie uns also zurück in unsere Komponente für das Komponentenregister springen . Und hier haben wir eingereicht, und offensichtlich wird dieser feste Wert hier gezogen. Wir wollen unseren Service nutzen. Deshalb möchte ich hier unseren Service injizieren. Wir schreiben also wieder privat und haben unseren Service , der unsere Auth-Serviceklasse ist. Und hier im Inneren auf Submit können wir dieses Service-Punktregister ausschreiben. Und wie Sie sehen können, werden wir innerhalb einer Registeranforderung bereitgestellt , aber innerhalb unserer Komponente haben wir nur diese Punktform, den Punktwert. Und tatsächlich ist dieser feste Wert, wie Sie hier sehen können, die Art davon ist beliebig, deshalb wird er für uns funktionieren und wir können ihn in keiner Weise wirklich eingeben. Also was registriert kehrt schnell zurück? Es ist ein Observable. diesem Grund können wir hier wieder Subscribe mit so object in Felder schreiben Subscribe mit so object in , die als nächstes kommen, wenn es korrekt ist oder es ein Fehler ist. Also drinnen als nächstes, aber wir werden die aktuelle Benutzertasche bekommen. Und hier werden wir etwas Logik machen. Und wenn wir hier einen Fehler haben, müssen wir einen Flugplatz angeben. Und hier ist eine Funktion mit Era. Und drinnen können wir einfach protokollieren und eingrenzen. Also zuerst möchte ich hier Fehler schreiben, Fehler hier in der nächsten Konsole protokollieren unseren aktuellen Benutzer, Koma, aktueller Benutzer. Prüfen wir jetzt, ob es funktioniert. Ich werde eine E-Mail angeben , die nicht in Benutzername und Passwort existiert , und klicke auf Registrieren. Und wie Sie sehen können, ist hier unser Netzwerk. Wir kommen hier, um eine Anfrage zu stellen. Zuallererst erhalten wir eine Optionsanfrage. Und das ist völlig normal , weil wir natürlich benutzt haben. Und wir haben eine Anfrage zwischen zwei verschiedenen Hosts weil wir unsere Anwendungen auf verschiedenen Stellen hosten . Sie werden diese Optionen also jedes Mal sehen. Das ist völlig normal. Aber wir sind an unserer Post-Anfrage interessiert, bei der es sich um matschige, weglose Benutzer handelt. Und hier ist unsere Nutzlast. Die Nutzlast ist völlig korrekt und hier ist unsere Antwort. Wie Sie sehen können, erhalten wir unser E-Mail-ID-Token und unseren Benutzernamen zurück , was bedeutet, dass eigentlich alles einwandfrei funktioniert. Und hier bekommen wir unseren aktuellen Benutzer. Aber wie Sie zuvor sehen können, erhalten wir eine Fehlermeldung, eine HTTP-Fehlerantwort. Und es sollte Sie nicht stören, denn dies ist der Fehler dieser nicht autorisierten Anfrage und wir werden ihn im späteren Video beheben. Es hat nichts mit unserer Registerkomponente zu tun. Wie Sie hier in der Konsole sehen können, erhalten wir unseren aktuellen Benutzer, was bedeutet, dass unser Code hier völlig korrekt ist. Was wir jetzt tun können, wir können diesen Punkt schreiben und hier haben wir unseren Service und wir können hier ein Methodenset-Token aufrufen und insert current user bereitstellen. Dann speichert diese Zeile, weil wir hier den aktuellen Benutzer haben , unser CurrentUser-Token im lokalen Speicher, aber es wird nicht gehalten. Wir möchten auch einen Benutzer für die gesamte Anwendung speichern, und wir sind bereits zuvor auf dieselbe Methode vorbereitet dot set currentUser. Innen. Wir können einfach unseren CurrentUser zur Verfügung stellen und diese Methode abhören. Es wird nur dieser aktuelle Benutzer im Stream der aktuellen Benutzer festgelegt . werden Sie sehen, wie Sie den aktuellen Benutzerstream verwenden In späteren Videos werden Sie sehen, wie Sie den aktuellen Benutzerstream verwenden. Am wichtigsten ist, dass wir es jetzt nach der Registrierung auf Target setzen und wir uns bei einem CurrentUser in unserer Anwendung saßen . Und das Letzte , was wir implementieren wollen, ist unsere Validierung. Denn wenn wir einen Fehler bekommen, wollen wir ihn tatsächlich zeigen. Deshalb hier. Zunächst möchte ich unseren Fehler eingeben, weil wir wissen, was es ist. Es ist eine HTTP-Fehlerantwort. Und hier bekommen wir unseren Fehler und wir können hier zumindest dot Azure schreiben. Und ja, dieser Pfeil wird jeder sein, aber er ist immer noch besser als nichts. Aber wir wollen jetzt unseren Fehler hier speichern. Jetzt stellt sich die Frage, in welchem Format wir unsere Fehler bekommen werden. Und für diese Sekunde wieder geöffnet, unsere Controller, Benutzer. Und wie Sie sehen können, ist hier unser Haken. Und was wir in dieser Zeile tun, wir ordnen unsere Fehler zu und wir erhalten Nachrichten als ein Array von Strings, was bedeutet, dass wir sicher sind , dass wir, wenn wir einen Fehler bekommen, es ist immer ein Array von Strings. diesem Grund können wir, was wir in unserer Client-Insider-Register-Komponente tun können, eine Fehlermeldung generieren und sie hier anzeigen. Das ist y. Was ich hier machen möchte, ich möchte nur einen einzigen Fehler erstellen und es wird jetzt vom Typ string sein. Und standardmäßig ist es jetzt so , weil wir keinen Fehler haben. Jetzt, hier in unserem Fehler, können wir diese Punkt-Ära schreiben. Wir wissen, dass wir hier unseren Fehler als Array bekommen . diesem Grund können wir hier einfach Azure dot dot join in erstellen wird hier ein Leerzeichen, was eigentlich bedeutet, dass wir alle unsere Fehler mit Komma und Leerzeichen verbinden möchten , und es wird nur ein einziger sein Feld. Jetzt möchte ich hier in ein Registerkomponenten-HTML springen , wo wir div-Klassenfehler haben. Ich möchte schreiben und GE und dieses Feld nur anzeigen wenn wir einen Fehler haben und darin können sie einfach unseren Fehler rendern. Prüfen wir jetzt, ob es funktioniert. Aber wie Sie hier sehen können, erhalten wir einen Fehler, der nicht an G gebunden werden kann , wenn es keine bekannte Eigenschaft von div ist. Und es passiert , wenn wir kein gemeinsames Modul in unser Modul injiziert haben. Hier innerhalb der Importe müssen wir ein allgemeines Modul von Angular eingeben. Wie Sie sehen können, erhalten wir keine Fehler. Und was ich tun möchte, ich möchte ungültige Daten angeben. In einer E-Mail gebe ich beispielsweise Daten und kein falsches Format an. Jetzt reinigen wir alles und klicken auf Registrieren. Und wie Sie hier sehen können, bekommen wir unseren Fehler. Und das ist ein Array mit ungültiger E-Mail. Und wir rendern diese ungültige E-Mail hier oben, was bedeutet, dass wir richtig reagiert werden azurblau und Don Erfolg bei der Registrierung unseres Benutzers. Lassen Sie uns nun prüfen, ob wir nach der Registrierung wirklich sicher sprechen. Hier wird es Laden Sie die Seite neu und geben Sie die korrekte E-Mail-Adresse, Benutzernamen und das richtige Passwort ein und klicken Sie hier registrieren. Wie Sie sehen können, haben wir unseren Benutzer, was bedeutet, dass wir im Speicher angefangen haben. Aber hier, wenn ich Champion im lokalen Anwendungsspeicher bin , können Sie unser Token sehen und hier ist ein Wert, was tatsächlich bedeutet, dass wir die Registrierung des Benutzers erfolgreich implementiert haben und wir haben das Token in LocalStorage gespeichert. 16. Anmeldeseite: Im vorherigen Video haben wir unsere Registrierungsseite erfolgreich abgeschlossen. In diesem Video müssen wir die Anmeldeseite implementieren. Und ich denke, das ist eine großartige Idee , dass Sie versuchen, sie selbst umzusetzen. Was müssen wir also auf dieser Seite implementieren? Eigentlich ist die Anmeldeseite einfach ein URL-Slash-Login und wir sehen genau das gleiche Formular wie register, aber Login-Formular. Wir haben also eigentlich nur eine E-Mail und Passwort und wir haben keinen Benutzernamen. Offensichtlich sind alle Texte unterschiedlich, aber im Wesentlichen ist es das. Außerdem werden wir die weitere Anfrage verwenden, um dem Spielen auf Slushy Pie Slash-Benutzern die Slash-Anmeldung zu folgen . Und hier habe ich drei Komplexitätsstufen für Sie. Zunächst können Sie dieses Video jetzt pausieren und versuchen, es selbst zu implementieren. zweite Stufe ist, dass Sie von mir eine Anleitung erhalten , bevor Sie mit der Implementierung beginnen. Was müssen wir also überhaupt tun? Zuallererst haben wir, wie Sie hier sehen können, innerhalb von Out-Komponenten eine Registerkomponente. Und wie ich bereits sagte, möchte ich die Komponente nicht zwischen Registrierung und Anmeldung teilen , was tatsächlich bedeutet, dass wir das neue Komponenten-Login mit genau dem gleichen Markup implementieren können , aber ohne unseren Benutzernamen und unsere TS-Datei wird super ähnlich sein. Wir brauchen ein Formular, wir brauchen onsubmit und so weiter. Aber der Hauptunterschied wird es in einem Dienst geben, wir werden unseren Dienst nicht nutzen, der sich registriert, aber wir müssen eine Methode erstellen login, was eigentlich bedeutet, dass wir in unserem Service hier eine Login-Anfrage erstellen müssen , was einen API-Aufruf tätigt. Und eigentlich wird es unserem Register super ähnlich sein. Aber hier müssen wir keine registrierte Anforderungsschnittstelle erstellen , sondern eine Anmeldeanforderungsschnittstelle. Und dann müssen wir im Inneren eine korrekte URL angeben , wenn Sie es selbst ausprobieren möchten. Jetzt pausiere das Video einfach hier. Und wenn du es nicht alleine ausprobieren willst, lass es uns zusammen machen. Und unser erster Schritt wird darin bestehen, die Schnittstelle für unseren Service zu erstellen. Also hier haben wir unsere Schnittstelle zur Registrierungsanfrage. Und wie Sie sehen können, haben wir hier drei Felder, sodass wir sie nicht innerhalb des Logins wiederverwenden können. Aber ich möchte hier machen, ich möchte eine neue Schnittstelle erstellen, Login-Anforderungsschnittstelle. Lassen Sie uns in diese Datei springen und wir können unsere Registeranforderungsoberfläche komplett kopieren und einfügen , nur weil sie sehr ähnlich ist und sie nicht viel tippen wollen. Also müssen wir hier unsere Schnittstelle erstellen , Login-Anforderungsschnittstelle. Und wir haben eine Insider-E-Mail und ein Passwort, und wir haben unseren Benutzernamen nicht. Also haben wir erfolgreich unsere Schnittstelle erstellt. Jetzt können wir zurück in unseren Service springen und wir können die Paste-Register-Methode vollständig kopieren , da ich Anmeldemethode super ähnlich sein werde. Nennen wir unsere Methode login. Und hier bekommen wir keine registrierte Anfrage, sondern unsere Login-Anfrage, hier brauchen wir eine andere Schnittstelle , die wir gerade erstellt haben. Es ist eine Schnittstelle für Anmeldeanfragen. Und zurück bekommen wir unseren Benutzer, was bedeutet, dass es sich um eine korrekte, beobachtbare aktuelle Benutzeroberfläche handelt. Jetzt ist hier die URL. Wir haben hier API-URL-Slash-Benutzer Slash-Anmeldung. Und diese API sind wir bereits in unserem Backend implementiert. Die Anmeldung ist sicherlich eine Post-Anfrage, was bedeutet, dass wir hier einen Beitrag mit einer Anmeldeanfrage für den Körper bereitstellen müssen den Körper , den wir als Parameter festlegen, und unser Login-In-Service ist vollständig implementiert. Unser nächster Schritt wird darin bestehen, hier eine Komponente zu erstellen , bei diese Set-Register-Komponente unserer Login-Komponente sehr ähnlich ist . Es ergibt keinen Sinn, alles selbst erneut zu tippen. Deshalb möchte ich den gesamten Ordner kopieren und hier einfügen und den Ordner login umbenennen. Jetzt haben wir eine Login-Komponente. Wir müssen hier Seiten umbenennen. Es wird also login dot component dot html sein. Und hier login dot component dot ts. Nova muss in unser HTML springen und es ein bisschen ändern und es wird nicht so anders sein. Zunächst können wir hier, anstatt bei Trello registriert zu sein, Log in den Trailer schreiben. Jetzt verlassen wir hier einen Fehler, genau wie wir sie hatten. Es gab auch ein Formular zum Absenden und hier haben wir E-Mail, Benutzername. Wir brauchen den Großen nicht, wir können ihn entfernen. Wir haben unser Passwort. Und jetzt ist hier die Schaltfläche „Senden“, nicht mit Register, aber wir melden uns an, zum Beispiel, guter Letzt ist der Router-Link hier unten, es sollte zu einer Registrierungsseite gehen. Hier ist Slash-Register. Und statt dieses Textes können wir schreiben, um ein Konto zu eröffnen. Also haben wir erfolgreich unser HTML geändert. Gehen wir nun zu unserer TypeScript-Datei. Zuallererst müssen wir unseren Selektor ändern. Es ist nicht registriert, aber unser Login und unsere Vorlage sind Login-Komponente HTML. Jetzt ist ClassName auch anders. Es ist Login-Komponente Live-Ära wie es ist. Und hier ist unser Formular. Wir benötigen E-Mail und Passwort, aber keinen Nutzernamen. Also lass uns einfach den Benutzernamen hier entfernen. Unser Konstruktor bleibt derselbe. Unser onsubmit bleibt fast gleich. Aber hier verwenden wir keine Registermethode. Wir haben eine Anmeldemethode erstellt, in der das gesamte Formular bereitgestellt wird. Und hier haben wir abonniert und wenn wir uns erfolgreich anmelden, dann sind wir hier Konsolenprotokoll und aktueller Benutzer, wo Gespräch kommen und wir sind in den aktuellen Benutzer eingestellt, was tatsächlich bedeutet, dass es zu 99% genau gleich ist Code wie innerhalb der Registrierung. Und unser letzter Schritt hier ist die Registrierung unserer Komponenten. Also müssen wir in die Tränen unseres Moduls springen. Hier in den Deklarationen müssen wir sagen, dass wir eine neue Komponente haben und es ist eine Login-Komponente. Und wir müssen hier auch eine neue Route erstellen. Also werde ich die Registerroute kopieren und diese Pfad-Login und Komponente werden Login-Komponente sein. Prüfen wir, ob es funktioniert. Wir haben hier keine Pfeile innerhalb des Beobachters. Ich werde die Seite neu laden und versuchen, hier unten zu springen, zum Beispiel auf der Anmeldeseite. Und wie Sie sehen können, wo Sie sich bei Slash anmelden können. Und hier ist unser Formular und wir können die Seite neu laden , wo Fleck auf dieser Seite ist, alles ist in Ordnung. Versuchen wir jetzt, ob wir uns überhaupt anmelden können. Also hier möchte ich zunächst etwas Falsches schreiben. Hier ist eine E-Mail , die es nicht gibt. Und dann ein Passwort. Ich schlage hier rein und wir bekommen einen Fehler, wie Sie hier zuvor sehen können, wir bekommen ein Foto mit Validierungen zu einem Fehler. Und in unserem Fehler, wo ausgefüllte E-Mail oder ein Passwort eingegeben wurde, falsche E-Mail ein Passwort. Und wir tun dies in diesem Fall, weil wir den Benutzer nicht darüber informieren möchten , was genau nicht korrekt ist. Wir sollten nicht sagen, dass so etwas wie diese E-Mail bereits vergeben ist. Wir sagen einfach, dass es ungültig ist. diesem Grund funktioniert diese Logik innerhalb der Login-Komponente von Bone. Und nur um Sie hier daran zu erinnern, dass wir beim Senden eingefügt wurden und hier innerhalb eines Fehlers mit unseren Fehlern eingefügt wurden, denn im Fall auf der Registerseite hatten wir hier ein Array von Strings. Hier haben wir es nicht mit direkt sehen einen Pfeil, E-Mail, ein Passwort, was eigentlich bedeutet, dass wir hier anstelle des Joins eine Dodd-E-Mail oder ein Passwort schreiben können. In diesem Fall werden wir es korrekt im Inneren anwenden . Schauen wir uns den Sound an. Ich lade die Seite neu. Geben wir hier eine E-Mail ein, die es nicht gibt, einige Passwort-Anmeldungen und wir erhalten eine falsche E-Mail mit einem Passwort, was bedeutet, dass unsere Validierung ordnungsgemäß funktioniert. Versuchen wir nun, uns mit den richtigen Anmeldeinformationen anzumelden. Also hier habe ich voll auf gmail.com und hier ist unser Passwort 123. Ich schlage hier, sagen wir gemein, und wir bekommen den aktuellen Benutzer. Aber das Hauptproblem ist, dass wir auf dieser Seite bleiben. Und zweitens haben wir diesen Bereich überhaupt nicht entfernt. Und eigentlich können wir beide Dinge gleichzeitig machen. Zuallererst, was ich hier auf Submit machen möchte , können wir die Sarah entfernen. Also hier, diesen Dollarfehler können wir jetzt hineinschreiben. Und tatsächlich kann ich jetzt sagen, dass der Name der Ära nicht der beste ist, weil der Fehler tatsächlich super generisch ist und sie diesen Namen hier von Ära zu Ära ändern möchten , zum Beispiel in dieser Fall, wir müssen es hier in der nächsten und hier in der Ära ändern. Und danach müssen wir zur Vorlage springen und sie auch dort ändern. Also hier haben wir Angie wenn Fehler, es sollte eine Fehlermeldung sein. Hier stellen wir unsere Ära dar. Und ich denke, dass dieser Ansatz viel sauberer ist weil wir dadurch verstehen was wir hier rendern. Es handelt sich nicht um einen generischen Fehler. Das ist wirklich eine Fehlermeldung. Jetzt müssen wir genau dasselbe in unserem Register anwenden. Also lasst uns wieder in unser Register springen. Und hier möchte ich zunächst eine Fehlermeldung schreiben. Hier ist auch eine Fehlermeldung und dann die Datei ts, ich möchte die zwei-Fehlermeldung hier ändern, richtige Fehlermeldung innerhalb der Ära, und wir wollen es jetzt in unserem Erfolg setzen. Also hier ist diese Fehlermeldung gleich jetzt, das Letzte, was wir tun wollen, wir wollen den Benutzer auf eine andere Seite umleiten. Es macht keinen Sinn, dass wir dieser Seite bleiben und sie listet auf, wir wollen zur Startseite springen, nachdem wir uns angemeldet haben. Um das zu tun, müssen wir hier unseren Router einspritzen. Das ist mein Insert-Konstruktor. Ich kann privaten Router gleich Router schreiben. Und wie Sie sehen können, kommt dieser Router vom angular-ui-Router. Und jetzt hier im Erfolg, in der letzten Zeile, können wir diesen Punkt schreiben, Punkt navigieren nach URL. Und wir stellen hier eine URL zur Verfügung, zum Beispiel nur einen Schrägstrich. Und jetzt müssen wir genau das Gleiche auf unserer Anmeldeseite tun . Also springe ich hier in die Login-Komponente. Zuallererst möchte ich einen privaten Zhao-Router injizieren. Und danach kann ich diese Zeile einfügen, diese Route navigiert nach URL-Schrägstrich, was in beiden Fällen bedeutet, mit Registrierung und Anmeldung wir mit Registrierung und Anmeldung unseren Benutzer auf die Homepage zurückweisen möchten. Prüfen wir, ob es funktioniert. Ich bin hier auf der Anmeldeseite Ich schreibe hier f2 auf gmail.com, hier 123. Ich klicke auf Anmelden und setze mich dann für die Homepage ein, was bedeutet, dass wir unsere Anmeldeseite erfolgreich implementiert haben. 17. Startseite: In früheren Videos haben wir unsere Anmeldeseite fertiggestellt. In diesem Video werden wir unsere Homepage für das Projekt implementieren . Und der Hauptpunkt ist , dass diese Seite nur Markup und überhaupt keine Logik sein wird . Warum ist das so? Denn eigentlich ist diese Seite nur für anonyme Benutzer gedacht, wenn wir eingesperrt sind, diese Seite aber nie sehen, weil wir direkt auf die Insight Board-Seite umgeleitet werden. Lassen Sie uns zunächst in Ihrem Modul implementieren. Und dafür möchte ich in der App ein neues Modul erstellen, das Home heißt, was bedeutet, dass es sich um ein komplett separates Modul handelt. Es hat nichts mit Stunden zu tun, und es gibt nur eine Homepage-Komponente , die in diesem Modul isoliert ist. Also lasst uns in diesen Ordner springen und eine neue Datei erstellen Home-Modul Ts. Und viele Schüler fragen mich sehr oft warum sie zusammen mit Angular keine Generatoren verwenden. Und eigentlich gibt es dafür einen Grund. Ich finde, dass es länger dauert, einen Generator zu verwenden das Modul einfach zu kopieren und einzufügen, wenn wir das brauchen, und auch für den Bildungsprozess, damit Sie sich besser daran erinnern können. Ich schreibe es von Grund auf neu. Das ist y. Lassen Sie uns noch einmal ein Home-Modul von Grund auf neu erstellen. Und jedes nächste Modul werden wir einfach kopieren und einfügen. Das wollen wir hier tun. Wir wollen eine neue Klasse erstellen und nennen wir sie Home-Modul. Danach müssen wir hier einen Decorator in das GI-Modul injizieren. Und im Inneren müssen wir unsere Abhängigkeiten bereitstellen, zumindest hier in den Eingaben, müssen wir ein gemeinsames Modul bereitstellen da wir es in jedem einzelnen Modul benötigen. Zum Beispiel für Schleifen wie in G4, G anbieten Wenn wir jetzt unsere Home-Komponente für diese Biomasse erstellen, erstellen wir eine neue Verzeichniskomponente. Und drinnen wollen wir einen neuen Ordner erstellen home. Und ja, ich verstehe, dass wir hier nur eine einzige Komponente haben und es nicht viel Sinn macht, Slash-Komponenten als den Home-Ordner zu erstellen . Nichtsdestotrotz ist es eine gute Struktur. Und wenn Sie diese Homepage nicht in verschiedene Komponenten aufteilen mussten , können Sie dies auf jeden Fall tun. Also lasst uns in die Startseite springen und hier home component dot html und home component dot ds erstellen . Lass uns jetzt in die HTML-Seite springen und einfach hier nach Hause fahren, aber wir brauchen nichts, nur etwas zum Testen. Jetzt springen wir in unsere TS-Datei. Und hier wollen wir unsere Klasse erstellen und sie ist Home-Komponente. Danach müssen wir unsere Komponenten registrieren. Hier wollen wir also unsere Komponente injizieren und im Inneren müssen wir zunächst einen Selektor bereitstellen. Also hier werde ich einfach einen Home-Selektor verwenden , da es nicht viel Sinn macht , unserer Home-Komponente den Modulnamen wie home , home voranzubringen, es wird einfach nicht benötigt, nachdem wir selektiv ausgewählt haben geben Sie hier bei Template-URL an und sagen Sie dann Template-URL, wir haben Home-Komponenten-HTML. Und unser letzter Schritt besteht darin, unsere Komponente in unsere Erklärung aufzunehmen. Im Home-Modul hier möchten wir Deklarationen erstellen und in unsere Home-Komponente einfügen. Hier sieht alles gut aus, aber wir haben keine Route erstellt. diesem Grund möchte ich hier eine Immobilienroute erstellen. Und wir können sagen, dass dies Typ-Routen und dies ein Array mit nur einem einzigen Schlüssel ist. Und hier wird unser Weg sein. Dies ist eine leere Zeichenfolge, es bedeutet Homepage, und hier ist unsere Komponente, und unsere Komponente wird Home-Komponente sein. Danach können wir diese Route innerhalb der Eingaben registrieren. Also hier wird Routenmodulpunkt für untergeordnete Routen sein. Und jetzt sollten wir nicht vergessen, unser Home-Modul in unserem App-Modul zu registrieren . Deshalb möchte ich wieder in unser App-Modul springen. Hier, Insider in Birds, können wir unser Home-Modul hinzufügen. Alles sieht gut aus. Ich sehe keine Fehler in Observer. Also lass uns einen Browser öffnen und hier ist unsere Homepage. Wie Sie sehen können, wird hier das Wort home gerendert, was bedeutet, dass wir unser gesamtes Modul und unsere leere Komponente erfolgreich erstellt haben. Und jetzt müssen wir einfach versuchen, die ganze Seite zu markieren. Das ist mein, lass uns zurück in die Home-Komponenten, Home, Home-Komponenten-HTML springen . Fangen Sie hier an, unser Markup zu schreiben. Nichts besonderes hier, nur viele DOM-Elemente. Also hier haben wir Header mit Glas-Home-Header. Und jetzt schließen wir diesen Header. Dann wollen wir einen Link zu unserer Homepage erstellen. Also hier wird ein Router-Link-Slash sein. Und hier haben wir Klasse Home hatte einen Home-Link. Schließen wir den Verkauf und die Doppelbindung ab , um ein Bild zu zeigen. Also hier haben wir einen Schrägstrich der Bildquelle usw., Slash Trello, das Logo, den weißen Punkt SVG. Und schließen wir dieses Bild. Wie Sie im Browser sehen können, wird es angewendet. Und hier sehen wir unseren Header und Link zu unserer Homepage. Jetzt müssen wir Links zur Anmelde- und Registrierungsseite bereitstellen. Deshalb können wir nach a div schreiben. Und innerhalb von div können wir zwei Links schreiben. Zuallererst wird hier innerhalb von div einen Router-Link zu unserem Slash-Login haben , den wir gerade mit der Klasse erstellt haben, die ein Login hatte, ich werde den Verkauf abschließen. Und direkt im Login, jetzt können wir diesen Link kopieren und hier haben wir Slash-Register. Hier ist das Klassen-Home-Header-Register, und der darin enthaltene Text wird ebenfalls registriert. Lassen Sie uns überprüfen, ob es funktioniert, wie Sie im Browser hier rechts sehen können, haben wir einen Login-Link und einen Registrierungslink. Nehmen wir nun den ersten Block unserer Seite an. Also hier wird div sein, Klassenheim-Held. Schließen wir dieses div und im Inneren möchten wir einen Home-Container der div-Klasse hinzufügen . Lass uns dieses Div schließen. Und innerhalb des Home-Containers haben wir ein div. Und in diesem Div wird H1-Tag sein. Und hier haben wir den Klassen-Home-Desh-Titel. Schließen wir dieses H1 und in jedem einzelnen, den ich einfügen möchte. Obwohl der vorbereitete Text den Teams hilft, besser zusammenzuarbeiten und nach jedem einzelnen mehr zu erledigen, haben wir p-Tag. Das ist unsere Beschreibung. Hier sollte die Beschreibung des Glashauses sein. Und in dieses p werde ich die Beschreibung über Trello-Boards, Listen und aktuelle einfügen . Nach dem ersten Div werden wir ein zweites Div haben. Lass es uns schließen. Innen. Es sollte ein Bild sein. Also hier wird Bildquelle Slash Acids Slash Hero Dot SVG sein. Und lass uns dieses Bild schließen und prüfen, ob es funktioniert. Wir springen in den Browser. Und wie Sie hier sehen können, haben wir einen ersten Abschnitt unserer Homepage. Hier links haben wir Text und ein schönes Bild auf der rechten Seite. Ich denke, dass Sie eine Vorstellung davon bekommen, wie Arbeitsrate und Blogs für die Homepage erstellt werden. Wie Sie sehen können, haben wir einfach einen solchen Blogtitel, eine Beschreibung und ein solches Bild, was bedeutet, dass Sie den Prozess der Erstellung einer Homepage beschleunigen möchten den Prozess der Erstellung einer Homepage beschleunigen , da dies nur ein HTML ohne Logik ist. Also hier möchte ich das zweite Blog-Heimteam einfügen. Wenn Sie möchten, können Sie das Video einfach anhalten , alles erneut eingeben oder einfach den HTML-Code der Homepage aus dem Quellcode unter dem Video übernehmen . Also was wir hier haben, wir haben Heimteam, Heimcontainer Team Container drin. Wir haben mit jedem Team zusammengearbeitet, eine Beschreibung und ein Bild. Schauen wir uns an, wie es aussieht. Hier. Nach unserem ersten Element haben wir das zweite mit Text und jetzt das Bild. Erstellen wir jetzt einen weiteren Block hier. Ich füge Hausinformationen ein. gleiche Zeug hier haben wir Klassen in Bild als H1 und p. Schauen wir uns das an. Ich lade die Seite neu und wir haben hier unten einen weiteren Block mit einem Bild und Texten. Und jetzt fügen wir unseren letzten Block ein. Wie Sie sehen können, ist es ein bisschen größer. Wir haben hier etwas über Workflow und Automatisierung. Hier haben wir eine H1-Beschreibung und auch die Aufzählungsliste. Und rechts haben wir wie immer ein Bild, wie Sie hier rechts sehen können, haben wir ein Bild und links haben wir zuerst eine Titelbeschreibung und dann eine Aufzählungsliste, die bedeutet eigentlich, dass wir unsere Homepage erfolgreich erstellt haben. Es war nichts besonderes, nur ein Marker für nicht eingeloggte Benutzer. 18. Auth: Im vorherigen Video haben wir unsere Homepage erfolgreich erstellt, aber jetzt haben wir nur noch ein einziges Problem. Wir haben tatsächlich implementiert, dass der Benutzer nach der anderen häufig angezeigt wird, um Sie daran zu erinnern, dass wir in unserer Client-Insight-App, App-Komponenten, unseren Service als aktuellen Benutzer aufrufen. Und eigentlich bekommen wir hier immer einen Fehler und sind nicht autorisiert. Und tatsächlich, wenn ich zur Registrierungsseite springen und einfach ein Konto erstellen werde , das es vorher nicht gab. Wie Sie nach der Registrierung sehen können , wo auf die Homepage reagiert wurde. Und innerhalb des lokalen Speichers haben wir dieses Token. Dies haben wir vom Backend aus festgelegt , um unseren Kunden zu authentifizieren. Aber danach lade die Seite neu. Dieses Token wird nicht verwendet und wir kommen nicht autorisiert hierher. Und die Idee ist im Grunde , dass der Tower-Client bei jeder einzelnen Anfrage dieses Token aus dem lokalen Speicher anwenden muss dieses Token aus dem lokalen Speicher anwenden , wenn wir es haben. In diesem Fall weiß unser Backend, wann wir autorisiert wurden, aber Stellen Sie sich vor, wir müssen selten in jede einzelne Methode gehen, wie zum Beispiel den aktuellen Benutzer abrufen und dass er einige Haare aus dem lokalen Speicher hat. Dies ist nicht mangelhaft, zeitaufwändig, und wir möchten dieses Token wirklich nur bei jeder einzelnen Anfrage hinzufügen . Dafür haben wir in der Angular Middleware. diesem Grund werden wir jetzt eine Middleware erstellen. Was ist Middleware? Dies ist etwas in der Mitte zwischen dem Start unserer Anfrage und, und tatsächlich haben wir hier zum Beispiel den HTTP-GET und wir werden eine Middleware erstellen. bedeutet, dass diese Anfrage zwar gestartet wurde, aber nicht an diese Adresse gesendet wurde. Wir wollen Middleware einsetzen, also wollen wir etwas tun. Zum Beispiel braucht es dort einen Header. diesem Grund möchte ich in unsere Hausdienste einsteigen und hier in Ihren Servicezeiten Interceptor DOD-Servicepunkte erstellen . Und es wird nur eine Klasse sein, genau wie ein normaler injizierbarer Service. Hier haben wir Experten, Unterrichtsstunden, Interceptor, und hier müssen wir sagen, implementiert http Interceptor. Die Hauptidee ist also, dass diese Middleware in Angular als interceptive bezeichnet wird , weil sie unsere Anfrage abfängt. Und hier schreiben wir Geräte http Interceptor, um einen engen Klassenhaus-Interceptor zu bekommen einen engen Klassenhaus-Interceptor , der die Schnittstelle falsch implementiert und Property Intercept fehlt, und genau das müssen wir create, um diese Middleware zu implementieren. diesem Grund werden wir hier eine neue Methode erstellen , die als Intercept bezeichnet wird. Und wie Sie hier sehen können, hat meine automatische Vervollständigung bereits Anfrage und als nächstes erhalten, und es gibt ein beobachtbares Office-HTTP-Ereignis zurück, was tatsächlich bedeutet, dass wir einen vollen Zugriff auf oder eine Anfrage hier innerhalb der Request-Eigenschaft haben . Und wir werden als Nächstes anrufen, wenn wir bereit sind und alles erledigt haben , was wir hier tun müssen. Aus diesem Grund möchten wir zunächst möchten wir einen Token aus unserem lokalen Speicher holen. Schreiben wir also hier, dass wir ein Ziel haben und dies ist ein lokales Speicher-Get Item. Und im Inneren stellen wir Token zur Verfügung. Danach hier möchte ich request equals request clone schreiben . Und hier drinnen stellen wir ein Objekt mit Feldsatz-Headern zur Verfügung. Die Erkenntnisse, die Header für ein Objekt sind, das wir autorisieren, sind gleichbedeutend mit sprechenden oder leeren Strings. Und danach rufen wir den Rückholgriff von nebenan an und wurden in unserer Anfrage bereitgestellt. Also was dieser Code überhaupt macht, zuerst haben wir hier ein Token von der Google-Suche bekommen. Es ist also entweder ein undefiniertes It oder es ist ein gültiges Token. Jetzt machen wir hier den Anforderungsklon. Warum machen wir das? Da die Anfrage unveränderlich ist, können wir sie nicht wirklich ändern. Hier müssen wir es könen , um etwas zu setzen. Hier verwenden wir properties set header, um einen Header zu setzen. Der Header heißt Autorisierung und im Inneren stellen wir unser Token bereit. Wenn wir also kein Token haben, sagen wir hier eine leere Zeichenfolge. Und danach rufen wir next handle auf, was im Wesentlichen bedeutet, dass wir unsere Anfrage fortsetzen müssen und eine aktualisierte Anfrage im Inneren bereitstellen. So erstellen wir also Middlewares oder Interzeptoren in Angular. Aber jetzt müssen wir diesen Out-Interceptor in unsere Anwendung injizieren . Aber die Hauptsache ist , dass wir einen Interceptor injizieren, nicht Inside-Out-Modul, sondern innerhalb des App-Moduls, weil wir es auf globaler Ebene tun wollen , um Interceptor zu injizieren, wir verwenden hier Anbieter. Was wir also innerhalb dieses tun wollen, liefert ein Objekt mit field provide, und hier verwenden wir HTTP-Interzeptoren. Es kommt von Angular auch hier richtig in der Gebrauchsklasse. Und das ist unsere Klasse, unser Abfangjäger, den wir gerade geschaffen haben. Und der letzte wird auf wahr gesetzt. Und genau so müssen wir HTTP-Interzeptoren in Angular bereitstellen . Hier sagen wir also, dass wir uns registrieren müssen und Sie haben angegeben, dass es sich einen HTTP-Interzeptor handelt und wir unseren Interzeptor für Unterrichtsstunden verwenden müssen. Prüfen wir jetzt, ob es funktioniert. Ich lade die Seite neu und lass uns im Netzwerk nachschauen , unser angeforderter Benutzer. Eigentlich möchte ich hier nach unten scrollen. Hier können wir die Autorisierung sehen und unser Token, was eigentlich bedeutet, dass unser Abfangen korrekt funktioniert. Und wir haben diesen Autorisierungsheader direkt auf jede einzelne Anfrage angewendet diesen Autorisierungsheader direkt auf jede einzelne Anfrage , um beispielsweise einen aktuellen Benutzer zu erhalten. Aber wir bekommen immer noch unseren 401-Fehler zurück und sie wissen tatsächlich, was das Problem ist. Wenn wir in den lokalen Speicher schauen, können wir sehen, dass das Token einfach ein Ziel ist, das ist nur ein Wert. Aber wenn wir hier wieder in unser Backend springen, Inside Source, Middleware, Eulen. Und hier überprüfen wir hier ein Token, da Sie sehen können, wo es durch ein Leerzeichen geteilt wird. Denn wie ich schon sagte waren richtig im Bier und dann im Weltraum reden. Wenn wir eine DVT-Authentifizierung verwenden, ist dies hier nicht der Fall. Wir haben hier kein Wort, Bier, und genau das ist unser Problem. Wir haben es nicht implementiert, und wir müssen es tun, wenn wir ein Token an den Kunden zurückgeben. Also hier in den Quellsteuerungen der Diener, Benutzer, wenn wir hier drin Drehmoment erzeugen, innerhalb normalisierter Benutzer, müssen wir hier Platz schreiben. Hier haben wir Justice Train, wo drinnen, wo richtig, und Bier. Und hier injizieren wir unser Token, das wir generiert haben. Prüfen wir, ob es funktioniert. Unser Token ist also ungültig, sie entfernen es einfach und es wird zur Registrierungsseite gesprungen. Jetzt möchte ich nur noch ein paar Anmeldeinformationen eingeben und auf Registrieren klicken. Und jetzt, wenn wir unser lokales Lager überprüfen, können Sie sehen, dass wir Bier als Platz haben und uns unterhalten. diesem Grund erhalten wir hier unsere Antwort, wenn ich die Seite mit dem Fehler don't get for 01 neu lade mit dem Fehler don't get for 01 . Und tatsächlich können Sie hier sehen, dass unser Anforderungsbenutzer 200 ist und unsere Antwort genau das ist, was wir erwartet haben, wie es funktioniert. Wir registrieren uns zum Beispiel erneut oder melden uns an und setzen ein Token im lokalen Speicher. Also Birra Space und das Token dann jedes Mal, wenn wir einen Request Out Interceptor innerhalb von Angular stellen , hängt es innerhalb des Headers, dieses Autorisierungstoken. Und hier haben wir Bär und dann überprüft unser Token und unser Backend diesen Benutzer und gibt uns hier eine Antwort. diesem Grund erhalten wir jedes Mal, wenn wir die Seite neu laden, unseren aktuellen Benutzer zurück. Und genau das wollten wir erreichen. Jetzt hier in unseren Kunden Quelle AB, AB Komponente, ja, ich möchte eine kleine Verbesserung vornehmen , denn eigentlich haben wir hier den Service angekündigt, aber wir verwenden diesen Ras nicht und jetzt bekommen wir einen Benutzer, damit wir hier nicht trans schreiben können, aber das ist aktueller Benutzer. Und statt des Konsolenprotokolls möchten wir es mit der Methode festlegen , die wir bereits vorbereitet haben. Also hier haben wir diesen, unseren Service Punkt setzt den aktuellen Benutzer, und im Inneren stellen wir unseren aktuellen Benutzer zur Verfügung. Jetzt ist unser Benutzer erfolgreich in unserer Anwendung angemeldet. 19. Auth: In diesem Video möchte ich in unseren URLs über Gvd sprechen, was zum Beispiel bedeutet, dass wir dem Benutzer nicht erlauben sollten, zur Homepage zu springen. Wenn er bereits eingesperrt ist, muss er direkt zum Board springen. Wenn wir zum Beispiel nicht eingesperrt sind und versuchen, zur Seite des Boards zu springen, müssen wir auf die Homepage weitergeleitet werden, wenn wir nicht zugelassen sind müssen wir auf die Homepage weitergeleitet werden, wenn wir nicht zugelassen . Es gibt also unterschiedliche Herangehensweisen an dieses Problem. Aber für jeden Anwendungsfall empfehle ich Ihnen dringend, zunächst ein beobachtbares islamisches Zinn zu erstellen . Lass uns das jetzt machen. Also eigentlich möchte ich in unsere App springen, unsere Dienste, unser Service hier wird erstellt aktuelle Benutzer Stream. Und wie gesagt, das ist getrimmt, das wir von jedem Ort unserer Anwendung aus verwenden können . Und nur um Sie daran zu erinnern, wir verwenden hier den aktuellen Benutzer festlegen, um den Stream zu ändern. Also im Wesentlichen, was wir jetzt tun können, zum Beispiel unserer App-Komponente irgendwo hier nach Juni drin in unserer App-Komponente irgendwo hier nach Juni drin, können wir diesen Punkt schreiben, unseren Service dot aktuellen Benutzer hier haben wir recht und abonnieren Sie das Board, und wir erhalten hier unsere Antwort. Und jetzt möchte ich nur noch hier ein Konsolenprotokoll schreiben. Siehst du, wovon ich rede? Also haben wir hier den Stream von unserem Service abonniert. Und jetzt, jedes Mal, wenn wir unseren Stream ändern, erhalten wir diese Daten wieder in diese Komponente. Lass uns jetzt im Browser einchecken. Und wir bekommen hier zwei Konsolenprotokolle. Zuerst race und definiere es, und dann Ras und die Information über unseren Benutzer, warum es so am Anfang des Streams passiert , ist undefiniert weil wir noch keinen fischigen Benutzer hatten. Aber nach einiger Zeit, wenn unser CurrentUser-Aufruf beendet ist und er erfolgreich ist, setzen wir diesen CurrentUser in diesen Stream. diesem Grund kann jeder Ort, an dem wir diesen aktuellen Benutzer abonnieren, diese Informationen erhalten. Und das sind genau diese Informationen. Aber wir können es noch besser machen, weil wir im Wesentlichen überprüfen möchten, ob wir eingesperrt sind oder nicht. diesem Grund möchten Sie diese Antwort normalerweise verwenden und booleschen Wert konvertieren und auf true prüfen. In diesem Fall sind wir eingesperrt, aber wir wollen diesen Code nicht an jedem einzelnen Ort schreiben . Hier können wir in unserem Service zusätzlichen Stream erstellen, unserem Service zusätzlichen Stream erstellen auf unserem ersten Stream basiert. Also hier ist unser aktueller Stream-Benutzer. Aber jetzt möchte ich einen neuen Stream erstellen , der Logger Tin heißt. Und jetzt ist in unserer Anwendung an jedem Ort, den wir verwenden können, neuer Stream das Protokollteam. Also was haben sie dort gemacht? Hier verwenden wir diesen aktuellen Benutzer und dies ist bereits ein Stream. Wir wollen es einfach in einen anderen Wert umwandeln. Hier bin ich direkt in der DOD-Pipe, dann in der Site Map-Funktion. Und wenn Sie nicht wissen, dass dies der Rix JS-Code ist. Also verwenden wir im Wesentlichen Looks Chess und sagen zu Angular, um unsere Streams zu transformieren. Und wir verwenden es auf diese Weise. Wir schreiben immer Dot Pipe und dann die Liste unserer Transformationen. Hier sehen Sie die Pipe überall und hier drinnen, wo Sie Map verwenden, um unsere Daten abzubilden. Wir wissen also, dass wir innerhalb unserer Karte drei verschiedene Zustände haben können, undefiniert, falsch und wahr. Aber der Hauptpunkt ist, dass unsere Anwendung sich nicht um undefiniert kümmert. Es war relevant , seinen Login zu überprüfen. Wenn wir diese Informationen haben, wenn wir diese Informationen noch nicht haben, dann wollen wir nur auf diese Informationen warten. Das ist lange bevor ich diese undefinierte Eigenschaft überspringen möchte . Hier können wir Filter vor unserer Map verwenden. Und Filter ist auch eine Funktion. Im Wesentlichen verwenden wir also zunächst einen Filter innerhalb des Rohres und dann eine Map. Was wir also Insight Filter innerhalb des Filters bekommen, indem wir unseren aktuellen Benutzer abrufen, und tatsächlich kann dieser aktuelle Benutzer jetzt oder unser aktueller Benutzer nicht definiert werden. Und hier wollen wir nicht zur Map kommen , wenn sie nicht definiert ist, deshalb können wir hier schreiben aktueller Benutzer ist nicht gleich undefiniert. Dann kommen wir in diesem Fall hierher und hier ist unsere Karte. Also was wir machen wollen Nebenkarte, wo ich hier reinkomme, aktueller Benutzer. Hier wollen wir es einfach in boolesche Werte umwandeln, damit wir hier boolean und dann aktuellen Benutzer schreiben können. In diesem Fall bringt uns diese Logik zurück wahr oder falsch, und wir werden dies überspringen, undefiniert es, das wir nicht benötigen und in unserer Anwendung nicht verwenden werden. Wir können diesen Code jedoch noch weiter vereinfachen. Statt Flight und diese Logik kann Map setzen, können wir hier einfach Boolean schreiben, und es wird genau dasselbe tun. R is look at tin ist also ein neuer Stream, der auf dem aktuellen Benutzer basiert für uns true oder false zurückgibt. Prüfen wir, ob es funktioniert. Ich werde in der Setup-Komponente zurückspringen. Und hier möchte ich diesen Punkt schreiben oder Service Dot ist gesperrt. Hier können wir auch Abonnieren schreiben und unsere Köpfe und unser Rest wird eingesperrt sein. Schauen wir uns das an. Wir können es sogar verständlicher nennen , ist eingeloggt. Und hier ist das Konsolenprotokoll Log von Tin, Koma ist Login-Eigenschaft. Lassen Sie uns das speichern und überprüfen und durchsuchen. Ich lade die Seite neu und hier sehen wir nicht, dass der Islam undefiniert wird. Es. Wir sehen einfach, dass es hier nur wenig durchkommt, weil dies der erste Zustand ist , in dem wir wahr oder falsch haben. Und genau so können wir an jedem Ort unserer Anwendung diesen Stream verwenden, um festzustellen, ob der Benutzer angemeldet ist oder nicht. Jetzt möchte ich diesen Code entfernen , weil wir ihn hier nicht benötigen. Es war nur zum Testen gedacht. Und jetzt möchte ich Ihnen die einfachste Lösung zeigen, wie Sie Benutzer auf eine andere Seite umleiten können. Und wir können einfach mit unserer Home-Komponente beginnen, denn im Wesentlichen möchten wir hier den Benutzer auf die Seite des Boards umleiten , wenn er bereits eingesperrt ist , wie wir das machen können. Zuallererst müssen wir hier in den Konstruktor unseren Service injizieren . Also hier wird der Service für private Stunden angekündigt, Service, den wir bereits haben. Jetzt wollen wir hier Implementierungen auf need schreiben, also haben wir initialisiert. Jetzt werden wir hier Technik einsetzen. Und jetzt können wir genau diese Logik Lake Road in unsere App-Komponente schreiben . Also hier wird dieser Punkt sein, unser Service Punkt. Hier haben wir ist eingesperrt. Also danach können wir Subscribe schreiben und wir können hier hinkommen, ist die Login-Eigenschaft hier in diesem Subscribe entweder true oder wir bekommen falsch. Und wenn es hier stimmt, wollen wir den Benutzer auf die Seite des Boards umleiten. Hier können wir es einfach ausprobieren. Eve ist wie eine Dose. Dann wollen wir den Benutzer umleiten. Und um zu versuchen, umzuleiten, können wir, wie wir es zuvor benutzt haben, Router verwenden. Also hier erstellen wir einen neuen Router für Privateigentum. Und dieser Router, jetzt in unserer if-Bedingung, können wir diesen Punkt schreiben, Punkt navigieren nach URL. Und hier können wir nur Schrägstriche bereitstellen. Und eigentlich haben wir diese Slash-Boards noch nicht implementiert, aber das ist egal. Wir machen es einfach als Beispiel, wie Sie den Zugriff auf die URLs einschränken können. Schauen wir uns das an. Und tatsächlich bekommen wir hier schon einen Fehler, können keine neuen Routen zuordnen. Und hier sind Bretter. Und im Wesentlichen können wir es überprüfen, zum Beispiel mit Slash-Register. Um zu verstehen, dass es funktioniert, werde ich die Seite neu laden und wie Sie sehen können, wo im Slash-Register, warum es passiert, wo ich zur Homepage gehe, drücke ich die Eingabetaste und wir haben nicht einmal gesehen unsere Homepage wo sie sich direkt innerhalb registrieren. Dies ist also der einfachste Weg, wie Sie beispielsweise die Winkelumleitung in eine andere Route implementieren können . Aber hier ist ein Problem, das wir hier verwendet haben, abonnieren Sie von einer Börse. Sie müssen sehr vorsichtig damit sein. Denn wenn wir subscribe verwenden, müssen wir auch unsubscribe schreiben. Wenn wir nicht versucht haben, uns abzumelden, bedeutet das, dass wir in unserer Anwendung ein Kurzwaffenabonnement haben . Eigentlich wurde unsere Home-Komponenten-Pathologie zerstört, weil wir uns auf der Registrierungsseite befinden, aber dieses Abonnement ist immer noch da, weil wir uns nicht davon abgemeldet haben. Hier müssen wir immer daran denken uns von unseren Abonnements abzumelden. Um dies zu tun, müssen wir einfach ein Abonnement hier oben erstellen . Melden Sie sich beispielsweise beim Abonnement und der Typ ist Abonnement. Jetzt können wir hier in unserer Engine darin das eingeloggte Abonnement zuweisen. Das Ergebnis von Subscribe ist unser Abonnement. Jetzt können wir hier oben auf Destroy hinzufügen. Also wann diese Komponente zerstört wird, aber in G auf Destroy-Methode erstellen wollte. Und im Inneren können wir einfach schreiben, dass dies wie Abonnement, DOD, Abbestellen ist. Ich speichere das, aber wir erhalten einen Fehler. Wir haben hier keinen Initialisierer, weil der niedrige Get In standardmäßig nicht gesetzt ist, es ist undefiniert und es ist wahr. Deshalb können wir es hier schreiben oder undefinieren, weil es nicht standardmäßig gesetzt ist und wir es einfach in der Technik darin festlegen. Aber das ist mein Code hier, ist ungültig, weil dieses Objekt undefiniert sein kann. Deshalb müssen wir hier ein Fragezeichen setzen. Diese Zeile wird also nichts bewirken , wenn es sich um eine undefinierte Linie handelt. Aber wenn wir ein Abonnement haben, wird die Abmeldung erfolgreich sein , wenn die Komponente zerstört wird. Aber jetzt möchte ich dir die zweite mögliche Variante innerhalb und Farbe zeigen die zweite mögliche Variante innerhalb , um Weiterleitungen vorzunehmen oder deine Routen zu schützen. Und genau das ist das Feature, das innerhalb von Angular Quadranten genannt wird . Und die Idee ist genau die gleiche wie bei Interzeptoren, vor der Arbeit etwas getan haben. Also wollen wir im Wesentlichen etwas überprüfen und dann true oder false zurückgeben. Das ist hier innerhalb unserer Modulstunden. Ich möchte einen Insights-Service erstellen und Sie archivieren, und es wird unser Word-Punkt-Service sein. Also hier möchte ich unseren neuen Unterrichtsstunden-Word-Service exportieren . Und hier schreiben wir Geräte können aktivieren. Und das ist genau das Gleiche wie bei unseren Abfangjägern. Wie Sie hier sehen können, müssen wir definieren, können aktivieren, damit dieses R-Quadrat funktioniert. Deshalb können wir hier schreiben, aktivieren und hier haben wir eine Menge Sachen drin. Wir brauchen das ganze Zeug eigentlich nicht. Wir können es entfernen und diese Rückgabe ist zu ausführlich. Wir wollen hierher zurückkehren. Wir wollen ein Observable von Boolean zurückgeben, was tatsächlich bedeutet, dass wir true oder false zurückgeben. Aber als Stream wollen wir jetzt hier drinnen unseren, unseren Service nutzen. diesem Grund müssen wir hier den Konstruktor definieren und hier in unseren Service unserer Stunden einfügen. Und die Idee ist, dass wir innerhalb dieser Methode ein Observable of Boolean zurückgeben müssen. Das ist so direkt hier. Ich kann das schreiben. Unser Service. Punkt ist Holzdose. Hier möchte ich Pipe schreiben , weil wir ein paar Sachen drinnen machen müssen. Das ist meine Einsicht. Ich werde auch MAB hinzufügen und wir kommen hierher, da ein Argument Login-Eigenschaft ist. Jetzt hier drinnen wollen sie einfach überprüfen, ob wir uns angemeldet haben, also ist es wahr, dann wollen sie direkt true zurückgeben. Aber wenn wir falsch haben, möchte ich den Benutzer auf eine andere Seite umleiten. Hier brauchen wir auch einen Router. Also können wir hier privaten Router injizieren, und das ist unser Router, und wir können ihn hier benutzen. Also schreiben wir diesen Punkt-Router-Punkt-Navigieren nach URL. zum Beispiel mit dem Detektor Verwenden Sie zum Beispiel mit dem Detektor die zur Startseite. Wenn sie nicht eingeschlossen sind. Danach müssen wir false zurückgeben. Es ist obligatorisch, da dies im Wesentlichen ein Observable von Boolean ist und wir hier nicht nur etwas tun müssen, sondern auch false zurückgeben müssen. Und hier möchte ich nach URL navigieren, nicht nach leerer Zeichenfolge, sondern nur nach einem Schrägstrich. Und Sie könnten sagen, aber warum wir nicht zurückgekehrt sind, hören Sie sich das einfach an, denn dieses Locked-In ist ein Stream mit true oder false. Denn hier wollen wir auch route verwenden und nach URL navigieren, und wir können es tun, wenn wir einfach true oder false zurückgeben. Jetzt ist unsere Gouache fertig, aber wir müssen uns korrekt registrieren. Das ist mein inneres Modul. Hier innerhalb der Anbieter müssen wir unseren Eulen-Kabelservice anbieten , den wir gerade erstellt haben. Jetzt müssen wir eine Route überprüfen, unseren Routenquadranten, hier können wir sie aktivieren. Und im Inneren stellen wir ein Array mit unserem Authentifizierungsdienst zur Verfügung, was bedeutet, dass unser Outward Service überprüft, ob wir unter Verwendung unseres Streams in einem Knoten eingesperrt sind, wenn wir zur Anmeldung springen unser Outward Service überprüft, ob wir unter Verwendung unseres Streams in einem Knoten eingesperrt sind, wenn wir . Und wenn es false zurückgibt, werden wir auf die Homepage weitergeleitet. Schauen wir uns das an. Ich lade die Seite neu und wir erhalten einen Fehler. Die Klasse, unser quadratischer Service, kann nicht erstellt werden , da er keinen eckigen Dekorator hat. Und eigentlich hier Inside-Out-Quadrat habe ich vergessen, injizierbar zu schreiben. Vergiss es nicht. Das ist so hier. Lassen Sie uns injizierbare und runde Klammern setzen. Laden wir die Seite neu, aber wir haben keinen Fehler. Jetzt möchte ich versuchen, zu demselben Mittelwert zu springen. Ich schlage den gleichen Mittelwert. Und wie Sie sehen können, kann ich auf die Anmeldeseite zugreifen , da wir hier geschrieben haben, dass wir unseren Kader aktivieren können. Was bedeutet, dass wir auf diese Seite zugreifen können , wenn wir hier durchkommen . Was bedeutet, dass ich hier in unserer Anwendung unser Token entferne und sie die Anmeldung der Seite neu laden. Ich werde auf die Homepage weitergeleitet, weil sie aufgrund von can activate keinen Zugriff auf diese bestimmte Seite haben Zugriff auf diese bestimmte Seite haben, was tatsächlich bedeutet, dass wir erfolgreich implementiert die Seiten in zwei zu zugreifen verschiedene Möglichkeiten. Erstens durch die Verwendung der Komponente und zweitens durch die Verwendung der Angular-Funktion, die aktiviert werden kann. Aber tatsächlich haben wir dieses Owl Squared erstellt, nicht für die Anmeldung oder Registrierung, sondern für zukünftige Boards und die Portseiten, da es viele Anfragen nur für angemeldete Benutzer gab . Hier werde ich entfernen, kann aktivieren. Und sie wollen auch unseren Code wieder in Home Components Home ändern , denn hier sollten wir nicht auf Slash-Register umleiten, sondern auf Slash-Boards, die wir in unserem nächsten Video implementieren werden. 20. Gettings: In früheren Videos haben wir die Implementierung unserer Homepage abgeschlossen und jetzt beginnen wir mit einem neuen Abschnitt. Und das ist ein Pageboard. Also worum es auf dieser Seite geht, ist eine Seite, auf der wir die Liste der Boards des Benutzers abrufen, sie auf dem Bildschirm ausführen und ein neues Board erstellen können die Liste der Boards des Benutzers abrufen, . Hier willst du sicher fragen, okay, aber wir haben Socket IO. Verwenden wir Sockets, auf denen Sie genau auf dieser Seite sind? Und meine Antwort ist nein, weil wir Socket nicht verwenden müssen oder überall, wo wir dafür haben , ist TP gestern, viele Fälle, in denen wir Socket IO brauchen, aber sicher nicht für diese Seite. Warum nicht? Denn eigentlich ist dies die Seite, auf der wir für den aktuellen Benutzer eine einfachere zufällige Liste von Wörtern haben. Wir haben keine anderen Benutzer, die Zugriff auf diese spezielle Seite benötigen. Hier macht es keinen Sinn, hier Socket IO zu verwenden, aber keine Sorge, wir werden Socket Ion viel später auf der Single-Board-Seite verwenden . In diesem Video konzentrieren wir uns darauf, unser Board im Backend zu erstellen und die Liste der Boards von der API abzurufen. diesem Grund springen wir zurück von unserem Client zu unserem Server. Hier in unserem Quellordner, innerhalb von types, wollen wir eine neue Schnittstelle erstellen und nennen wir sie board, dot interface und dot ts. Board ist also unsere neue Einheit. Im Inneren werden wir unsere Board-Schnittstelle registrieren , die wir auf verschiedenen Seiten verwenden werden. Zum Beispiel auf der Seite mit der Liste der Boards und auf der Single-Board-Seite. Also hier wollen wir unsere neue Schnittstelle und dieses Board exportieren . Und die Frage ist, was wir in uns haben werden, genau wie wir es in unserem Benutzer getan haben. Wir werden hier eine solche Schnittstelle für das Board haben. Und wir werden hier ein Boarddokument haben, das das Dokument erweitert , um mindestens eine ID zu erhalten. Wir brauchen hier also kein NAD, aber wir brauchen mindestens einen Titel. Also muss jeder Port einen Titel haben. Zweitens haben wir es hier geschaffen, es ist ein Datum, und es wird auch ein Datum sein. Und tatsächlich haben wir hier auf der rechten Seite, Benutzer, wie Sie sehen können, keinen aktualisierten Kopf erstellt, aber er ist wegen Mongoose da, also können wir ihn auch hier schreiben. Das letzte Feld, das wir hier in unserem Board brauchen. Unser Board muss einigen Benutzern gehören. Hier müssen wir MAD des Benutzers retten , der dieses Board erstellt hat. Und dafür können wir hier die Benutzer-ID schreiben, und wir schreiben hier keine Zeichenfolge, sondern Schema-Punkttypen, Punktobjekt-ID. Jetzt müssen wir hier das Top-Schema von Mongoose importieren. Wie Sie hier sehen können, haben wir diese spezielle Notation, Schematypen, Punktobjekt-ID. Und genau so schaffen wir ein D in Mongoose. Darin ist also nicht nur eine Idee, das ist eine Objekt-ID, aber in dem Moment, in dem wir unsere API erstellen, wird diese Benutzer-ID einfach eine schnelle Zeichenfolge sein, sodass wir verstehen können, was Benutzer erstellt hat dieser spezielle Teil. Unser nächster Schritt besteht darin, unser Dokument für den Vorstand zu erstellen. Hier möchte ich eine Expertenschnittstelle haben und hier haben wir ein Word-Dokument, genau wie wir es auf der rechten Seite hatten. Hier wollen wir das Extents-Dokument verwenden und dieses Dokument kommt von Mongoose zu uns, also sollten wir nicht vergessen , es hier oben hinzuzufügen , da es in einem anderen Fall nicht funktioniert. Hier setzen wir einfach Klammern und nichts weiter. Wir haben hier also kein validiertes Passwort oder ähnliches, weil wir einfach das Dokument erweitern und mit entmutigenden Dingen Neues. Also haben wir erfolgreich unsere Board-Schnittstelle erstellt. Jetzt ist es an der Zeit, unser Modell zu erstellen. In Modellen erstellen wir also neue File Board Dot ts. Und wieder, genau wie wir es im Benutzer getan haben, werden wir unser Board-Schema erstellen. Also hier rechts öffne ich unseren Benutzer, damit wir einen Blick darauf werfen können. Zuallererst werde ich hier oben Schema und Modell importieren. Und jetzt wollen wir unser Board-Schema genauso erstellen , wie wir es für unseren Benutzer getan haben. Und hier sehen wir ein neues Schema und das ist Mungo-Schema. Und im Inneren stellen wir unser Board-Dokument zur Verfügung , das wir gerade erstellt haben. Danach haben wir runde Klammern und im Inneren müssen wir alle Felder unseres Boarddokuments bereitstellen. Das erste Feld hier wird betitelt sein. Was ist also Titel? Es ist eine Zeichenfolge. Nehmen wir also an, unser Typ ist string. Und zweitens ist es erforderlich, weil wir unser Board ohne Titel nicht erstellen können. Deshalb setzen wir hier erforderlich durch. Wie Sie hier sehen können, erhalten wir einen Fehler. Das Argument vom Typ title kann also nicht dem Parameter zugewiesen werden, was tatsächlich bedeutet, dass wir mit unserem Board-Dokument etwas falsch gemacht haben . Und sehen Sie sich unser Problem denn hier wurden aus dem Dokument erweitert, aber wir haben nicht von unserem Board erweitert, was tatsächlich bedeutet, dass all diese Eigenschaften nicht schnell verfügbar waren, wie Sie können sieh jetzt wir haben keine Fehler. Titel ist, dass wir jetzt nur noch die Benutzer-ID angeben müssen. Und hier drinnen müssen wir unseren Typ festlegen und es wird genau das gleiche Schema sein, Punkttypen, Punktobjekt-ID. Und der nächste ist in diesem Fall erforderlich, wenn nein, okay. Verwendung von Ray D ist ebenfalls obligatorisch. Danach müssen wir unser Modell exportieren. Hier wird ein Experten-Standardmodell sein , und wir geben einen Einblick als generisches Board-Dokument . Jetzt können wir unsere Klammern öffnen und machen den ersten Umfang, den wir hier bereitstellen, mit dem Namen Board. Und es gibt einen zweiten Parameter, unser Board-Schema. Wie Sie sehen können, haben wir unser Board genauso implementiert wie beim Benutzer. Aber Board ist viel einfacher, da wir hier keine zusätzlichen Methoden und die zusätzlichen Validierungen haben. Jetzt müssen wir den Controller eines neuen Boards erstellen. Und die Methode, Alberts reinzubringen. diesem Grund möchte ich, was ich tun möchte, in solchen Service-Quellserver-Tiers springen. Hier. Zunächst möchte ich eine neue Route registrieren und es wird app.get sein. Und wir haben hier Slash-API-Slash-Boards. Und dies ist die Liste, um alle Boards des aktuellen Benutzers zu erhalten. Hier wollen wir unsere OS-Middleware verwenden, denn wenn wir nicht angemeldet sind, können wir Boards bekommen. Wir müssen einen Benutzer haben. Und der letzte hier wird der Controller unseres Boards sein. Wir haben es nicht hier und hier, Punkt zum Beispiel, holen Sie sich Boards. Also müssen wir den Controller unseres Boards erstellen und hier die Board-Methode bekommen. Deshalb ganz oben. Zuallererst möchte ich unseren Stern als Board-Controller, Rom, eingeben , und hier werden Slash-Boards für Pfad-Controller sein. Und wir haben diese Datei noch nicht, also erstellen wir sie jetzt. Hier in Controllern kann ich Boards dot ts erstellen, und hier müssen wir eine neue Aktion erstellen. Hier werden wir es genauso machen wie in genauso machen wie unserem Benutzer-Controller. Zunächst müssen wir also oben unsere Anforderungsantwort und die nächste Funktion von Express eingeben . Danach können wir unsere neue Funktion get boards erstellen, die eine asynchrone Funktion sein wird. Und wir kommen zuerst hierher, unsere Anfrage und das ist Typanfrage, dann Antwort, es ist Typantwort. Und der letzte ist der nächste Typ, nächste Funktion. Und das wollen wir vorher hier try-catch schreiben , damit wir alles richtig handhaben können. Hier bekommen wir unseren Fehler und wir können ihn einfach in unsere nächste Ära werfen. Hier wird die nächste Ära sein. Jetzt muss unser Stamm versuchen, Logik dafür zuzulassen. Wir müssen hier unser Board-Modell injizieren , das wir bereits erstellt haben. Hier wird also ein wichtiges Board-Modell für Rom sein. Und hier, um zu tanzen, springen wir in das Schrägbrett der Modelle. Und jetzt können wir versuchen, alle Boards anhand einer bestimmten Benutzer-ID zu finden . Also hier wollen wir unsere Property Boards bekommen. Und hier verwenden wir einen Gewichtsbohr-Modell-Punktfund. Und wenn Sie es nicht wissen, findet find für uns alte Aufzeichnungen nach einem bestimmten Prädikat. Im Inneren können wir also ein Objekt mit betriebenem Wucher versehen T entspricht Anfrage dot Benutzer-Punkt-ID. Und wie Sie hier sehen können, erhalten wir direkt einen Pfeil von TypeScript, dass der Benutzer in der Anfrage nicht existiert. Und das ist völlig richtig. Nur um Sie daran zu erinnern, wir hier unsere eigenen benutzerdefinierten Anfragen mit einem Feld darin erstellt haben. Hier können wir eine Express-Anforderungsschnittstelle schreiben , und in diesem Fall wird es korrekt funktionieren, aber unser Anforderungsbenutzer kann es möglicherweise nicht definieren und dann funktioniert dieser Code nicht. Hier müssen wir es versuchen. Wenn wir keinen request dot user haben, dann wollen wir hier für 01 werfen. Also Rücksendeadresse, Sendestatus, und hier ist 401, genau wie wir es zuvor in einem Benutzercontroller getan haben genau wie wir es zuvor in einem Benutzercontroller getan haben. Also hier unten haben wir genau das Gleiche gemacht. Und jetzt müssen wir einfach mit unseren Boards antworten. Also hier können wir Rest Dot Sand schreiben, und wir schicken hier Boards. Und die zentrale, die Liste dieses Boards ist nur ein Array. Prüfen wir, ob es funktioniert. Wie Sie hier sehen können, fügen Sie den Server ein, dieser ist verbunden und es gibt keine Fehler. Also lasst uns in den Postboten springen. Lassen Sie uns hier eine Anfrage machen Slushy Pie Slash Boards. Und wie Sie hier in Headern sehen können, haben Sie bereits ein injiziertes Token weil wir diese Anfrage zuvor verwendet haben. Ich schlage hier Sand. Und wie Sie sehen können , bekomme ich ein leeres Array zurück , weil wir keine Boards haben. Nun die Frage, wie wir einige Boards bekommen können wenn wir immer noch keinen Kuchen haben, um ein Board zu erstellen. Und dafür können wir einfach in Mongo springen und diesen Port selbst erstellen. Das ist so hier. In der Konsole werde ich docker exec minus 80 MongoDB Mongo schreiben . Also wollen wir im Wesentlichen den Mongo-Befehl in unserem Container MongoDB aufrufen . Nur um Sie daran zu erinnern, dass Sie Darker hier nicht verwendet haben, sondern einfach MongoDB auf Ihrem Computer installiert haben. Dann müssen Sie nur noch die MONGO-Einfügekonsole schreiben und es wird funktionieren. Ich schlage hier ein, gib sie hier in der Konsole von Mongo ein. Jetzt müssen wir hier unsere Datenbank benutzen. Das ist der Grund, warum ich hier schreibe, benutze den Raum extrem lang. Und danach setzen sie Semikolon. Ich drücke die Eingabetaste. Und wie Sie hier sehen können, haben wir auf dB-HL-Trailer umgestellt. Jetzt können wir hier Semikolons für Show-Sammlungen schreiben, und wie Sie sehen können, sind dies unsere Sammlungen. Wir haben hier Boards und wir haben unsere Benutzer. Was wir jetzt tun wollen, wollen wir einen neuen Rekord in unsere Boards einfügen . Dafür können wir db dot, ports, dot insert schreiben , und hier haben wir eine Funktion, also runde Klammern und innerhalb eines Objekts. Und hier müssen wir bereitstellen , was wir einfügen wollen. In unserem Fall ist es nur der Titel, zum Beispiel das erste Board. Und wir müssen hier eine Benutzer-ID schreiben, aber hier sollten wir nicht die Zeichenfolge angeben VM muss eine Objekt-ID bereitstellen. Hier möchte ich den Doppelpunkt der Benutzer-ID und dann die Objekt-ID schreiben . Ich habe hier runde Klammern geöffnet und drinnen bin ich in unseren Stream eingefügt. Wie Sie sehen können, ist dies nicht nur Wucher, das Ende der Saite. Wir beginnen hier innerhalb Benutzer-ID und der Objekt-ID mit der Zeichenfolge. Und am Ende müssen wir ein Semikolon setzen. Ich drücke die Eingabetaste und wir erhalten das richtige Ergebnis. Und jetzt können wir hier versuchen, alle Datensätze in dieser speziellen Sammlung zu erhalten . Also db dot boards, dot find und runde Klammern. Ich drücke die Eingabetaste und wir erhalten nur ein Objekt mit ID. Und das ist die Idee unseres Boardtitels First Board und Benutzer AD ist eine korrekte Objekt-ID. diesem Grund können wir jetzt wieder in unseren Postboten springen, unsere API-Board-Anfrage auswählen und auf Senden klicken. Wie Sie jetzt sehen können, bekommen wir unser ASHRAE mit einem Objekt darin. Hier haben wir unsere ID und hier sehen wir sie als Zeichenfolge, Titel und Benutzer-ID, was eigentlich bedeutet, dass wir unser erstes Board erfolgreich von der Konsole aus erstellt haben und die Liste unserer Boards haben. Aber hier möchte ich das letzte kleine Thin verbessern, wie Sie hier sehen können, bekommen wir unsere IDs aus dem Backend mit Unterstrich. Und tatsächlich bekommen wir normalerweise von der API einen DES. Normalerweise ohne Unterstrich. Das ist nur die Sache von MongoDB, was bedeutet, dass es nicht so bequem ist, eine zu bekommen, das war ein Unterstrich im Frontend und will das nicht tun. Und in Mongoose gibt es eine Möglichkeit, dies zu tunen. Deshalb möchte ich wieder in unseren Code einsteigen , in Schwesternschaften. Und hier, zum Beispiel, nach unserer Konfiguration von Missbrauch, können wir hier Mungose-Punktsatz hier als ersten Parameter schreiben Mungose-Punktsatz hier als , den wir Jason zur Verfügung stellen. Und als zweiten Parameter stellen wir ein Objekt zur Verfügung. Und im Inneren sagen wir zuallererst, dass wir Charles fertig sind. Und zweitens transformieren. Und hier im transformierten haben wir zwei Argumente. Der erste wird unterstrichen und zweite wird umgewandelt. Und das ist die Funktion. Und innerhalb dieser Funktion wollen wir konvertierte Punkt-Unterstrich-ID löschen. Was wir hier überhaupt tun, hier können wir zur JSON-Methode wechseln, die in einer geschrieben ist . Hier stellen wir Transformation bereit, also sagen wir, wie wir sie transformieren werden. Und tatsächlich werden wir in Mongoose NAD zurückbekommen und die ID unterstreichen. Und hier werden wir nur aus der JSON-Unterstrich-ID entfernen, was eigentlich bedeutet, dass wir in Mongoose immer noch diese Unterstrich-ID haben. Wir können es sicher benutzen, aber wir werden es nicht in JSON bekommen, wir bekommen eine normale ID. Und vielleicht möchten Sie auch wissen, was virtuell stark ist , und Anstiftung steckt tatsächlich in Modellen. Wir können virtuelle Eigenschaften erstellen und standardmäßig innerhalb von Mongoose Whoop werden sie nicht zurückbekommen. Und eigentlich wollen wir sie zurückholen. Das ist, wo wir hier Virtuals schreiben, stimmt. Prüfen wir also, ob dieser Code funktioniert. Ich springe zurück zum Postboten und stoße auf Sand. Und wie Sie hier sehen können, erhalten wir genau die gleiche Antwort, aber wir haben keine Unterstrich-ID. Wir haben nur ein normales d, was eine Zeichenfolge ist. Und das ist genau so, als würden wir es im Frontend verwenden wollen . 21. Frontend für gettings: Im vorherigen Video haben wir erfolgreich implementiert, unsere Boards ins Backend zu bringen. Jetzt müssen wir mit unserem Frontend-Part-Festival beginnen. Dafür müssen wir unser Boards-Modul implementieren. Aber nur um Sie hier in Kundenquelle, App, Home-Komponenten, Home, Home Ts zu erinnern Kundenquelle, App, Home-Komponenten, Home, , haben wir sehr direkt auf den Schrägbrettern, wenn wir eingesperrt sind. Hier müssen wir zunächst unser Boards-Modul und innerhalb dieser Route implementieren, damit zumindest unser Code erfolgreich funktionieren kann. Hier im Inneren wollen wir neue Modulplatinen erstellen. Und dies ist ein separates Modul für eine einzelne Seite, auf der wir eine Liste der Boards haben und tatsächlich darin auch eine Komponente für ein einzelnes Board erstellen könnten . Aber ich möchte diese beiden Module wirklich trennen , weil sie zwei verschiedene sind. Das ist mein inneres Modul unseres Boards. Wir können Boards dot module.js erstellen. Und hier möchte ich nicht alles von Grund auf neu schreiben. Ich möchte das gesamte Modul komplett kopieren und einfach ändern. Also was haben wir hier? Zuallererst wird sich unsere Klasse Modul langweilen. Wir werden hier keine Deklarationen haben, Home-Komponente und wir brauchen hier und Sie Runde, aber hier brauchen wir keinen Pfad nach Hause, aber wir brauchen Pfadbretter. Und dieses Komponentenhaus gibt es hier nicht, also müssen wir es auf unsere neue Komponente, die Platinenkomponente, umstellen . Hier möchte ich eigentlich das tun, ich möchte, dass Inside Home-Komponenten dieses Home-Verzeichnis vollständig kopieren und hier in die Boards einfügen , in den Komponentenordner. Sie können also eigentlich Winkelgeneratoren verwenden , wenn Sie möchten. Ich möchte wirklich nur das Einfüge-Modul kopieren. Für mich ist es schneller. Also hier möchte ich diese Komponenten in Boards umbenennen, und das ist unsere Hauptkomponente von Modulplatinen. Und darin haben wir zwei Akten. Zuallererst, Boards Komponenten-HTML. Zweitens, Boards Komponente ts. Hier im HTML können wir einfach alles entfernen und einfach Boards schreiben, damit wir überprüfen können, ob es funktioniert. Jetzt können wir in unsere Board-Komponente springen. Und hier können wir zunächst unseren Selektor ändern und wir können hier Boards schreiben und unsere Vorlagen-URL wird eine wichtige Komponente HTML sein. Jetzt hier drinnen haben wir unsere Klasse, die Boards Komponente ist, und hier müssen wir Geräte entfernen. Wir brauchen es vorerst nicht. Und sie werden den gesamten Code aus unserer Board-Komponente entfernen, und wir können auch alle Eingaben entfernen. Deshalb haben wir erfolgreich unsere neue leere Platinenkomponente erstellt unsere neue leere Platinenkomponente und können sie jetzt in unserem Boards-Modul verwenden. Hier können wir Board-Komponenten schreiben und dies tun. Gib es hier oben automatisch ein. Und jetzt haben wir hier eine Route für Schrägstriche. Und hier in Deklarationen können wir unsere Board-Komponente definieren. Und der letzte Schritt, den wir nicht vergessen sollten, ist, dass wir das Modul dieses Boards in unserem App-Modul registrieren müssen . Also hier in unseren Eingängen müssen wir Boards Modul hinzufügen. Prüfen wir, ob es funktioniert. Ich habe hier im Webserver keine Pfeile. Jetzt möchte ich auf unsere Seite springen und neu laden. Und wie Sie sehen können, wo auf Schrägstrichen steht, ist hier unser Text. Wenn ich hier auf der Homepage springen werde, komme ich direkt zum Board, weil ich eingesperrt bin. Lassen Sie uns nun prüfen, ob wir zurückgeleitet werden. Wenn wir uns nicht anmelden. Dazu können wir zum Beispiel einfach Token entfernen und die Seite neu laden. Und wie Sie hier sehen können, werden wir nicht autorisiert, aber wenn sie nicht zur Homepage zurückgeleitet werden. Und das Wesentliche dafür ist, dass wir in unserem Haus Dienstleistungen r quadriert erstellt haben, und wir können dieses R-Quadrat jetzt in unserem Board-Modul verwenden . Also innerhalb von Boards, innerhalb der Boards Modul Ts hier auf der Route, die wir anbringen können, können aktiviert werden. Und hier müssen wir ein Array mit World Service bereitstellen , das wir zuvor erstellt haben. Es ist völlig in Ordnung, es einfach so zu benutzen. Wir müssen es hier nicht registrieren. Wie Sie hier sehen können, gibt es keine Fehler. Laden wir also die Seite neu. Wie Sie jetzt sehen können, können wir nicht zu unseren Schlammsportarten springen und wurden auf die Homepage weitergeleitet. Was eigentlich bedeutet, dass r aktivieren kann , funktioniert ordnungsgemäß. Und jetzt können wir mit nur einer einzigen Zeile definieren, welche Seiten nur für eingeloggte Benutzer erlaubt sind. Also haben wir erfolgreich unser Boards-Modul erstellt, und jetzt möchte ich eine Port-Schnittstelle erstellen. Und wir könnten es innerhalb des Boards-Moduls erstellen. Aber eigentlich möchte ich hier in AB einen neuen Ordner erstellen und ihn als freigegeben bezeichnen. Denn eigentlich möchte ich alle Typen, die wir überall verwenden, in diesen freigegebenen Ordner legen . Zum Beispiel eine Aufgaben-Spalte. Dies sind alles gemeinsame Entitäten, die wir in verschiedenen Modulen verwenden können. Gleiches gilt die Dienste oder Dienste, die gemeinsam genutzt werden, wie Board-Service, Einplatinendienst, Säulendienst, Aufgabendienst. Wir könnten es in ein bestimmtes Modul einfügen, aber ich möchte wirklich all diese Dinge dort platzieren, wo wir nur Daten für den Shared Service abrufen. Deshalb haben wir hier AB geteilt. Und hier möchte ich zunächst neue Ordnertypen erstellen. Und jetzt können wir in unseren App-Shot-Typen einen neuen Typ definieren, und es ist eine Board-Punkt-Schnittstelle. Ts. Und lassen Sie uns hier unsere neue Oberfläche exportieren. Und dies wird eine Schnittstelle unseres Boards sein und wir müssen es Port-Schnittstelle nennen. Und im Inneren müssen wir genau die gleichen Felder definieren , die wir im Backend erstellt haben. Und zuallererst ist hier NAD, es ist eine Zeichenfolge. Zweitens ist es title, es ist auch string. Außerdem haben wir hier geschaffen, dass dies angespannt ist und das letzte aktualisiert wird. Es ist auch eine Zeichenfolge. Und tatsächlich bekommen wir hier zusätzlich eine Benutzer-ID, nur um Sie hier in unseren Server-Quellmodellen daran zu erinnern und hier haben wir unser Board. Wir haben userID, was eigentlich bedeutet, dass wir hier auch die Benutzer-ID bekommen und es ist eine Zeichenfolge. Unsere Schnittstelle für Single Boyd ist komplett fertig und wir können sie in jeder Komponente verwenden. Jetzt möchte ich den Service für die Arbeit mit Boards erstellen. Und tatsächlich werden alle Anfragen wie Board erstellen, sich langweilen, Boards holen, Board löschen in den Service gehen. Hier in Shared möchte ich einen neuen Ordner erstellen und ihn Services nennen. Und dann sagen wir werden einen neuen Dienst erstellen, der Boards service dot ds heißt . Also hier definieren wir jetzt unsere neue Klasse. Hier haben wir einen erstklassigen Board-Service, und wir müssen darauf schreiben injizierbar, damit wir es überall verwenden können. Die erste Methode, die wir hier definieren wollen , ist get boards. Genau darauf sind wir bereits im Backend vorbereitet. Also hier sind unsere Get Boards und wir müssen hier keine Argumente angeben. Und wir werden ein Observable mit einem Strahl unserer Bretter zurückbekommen . diesem Grund können wir hier ein Port-Interface-Array schreiben. Das ist genau das, was wir gerade definiert haben. Jetzt innerhalb dieser Get Boards wollen wir sicherstellen, dass HTP Anfrage. Deshalb müssen wir hier versuchen zu konstruieren und zu injizieren. Hier sind die HTTP- und HTTP-Clients. Jetzt möchten wir in unseren Boards eine URL erhalten, genau wie zuvor für den Benutzerdienst. Also hier haben wir unsere URL und es ist Umgebung. Keine API-URL zu uns. Und hier ist ein Schrägbrett. Das ist genau unser Kind. Jetzt können wir diesen Punkt http.get zurückgeben, und wir möchten unsere URL ohne Optionen erhalten. Und wie Sie hier sehen können, erhalten wir offensichtlich einen Fehler. Observable Object kann nicht beobachtbaren Board-Schnittstelle zugewiesen werden. Hier müssen wir wie zuvor angeben, dass wir wieder in eine Reihe von Boards zurückkehren, damit unsere Dienste vollständig bereit sind und sie es nur testen wollen. diesem Grund möchte ich hier zurück in unser Boards Boards Modul springen in unser Boards Boards Modul und wir müssen zuerst den Service hier innerhalb der Anbieter injizieren . Hier können wir schreiben, dass wir hier Boards Service haben, und es ist schnell verfügbar. Jetzt dürfen wir in unsere Komponente springen, die hier injiziert wird. Zunächst möchte ich unseren Konstruktor definieren und wir wissen, dass wir hier Boards-Service haben und dies ist unser Boards-Service. Jetzt möchte ich hier zusätzlich Implementierungen darauf schreiben . Und jetzt nicht initialisiert, wollen sie diese Liste unserer Boards abrufen. Hier haben wir also unsere Energie drin und im Inneren können sie einfach diesen Board-Service schreiben, Boards besorgen, abonnieren, damit wir das Ergebnis erhalten. Hier ist ein Ergebnis. Eigentlich sind das Boards und sie wollen nur protokollieren, was wir zurückbekommen. Also hier holen wir unsere Bretter, Koma-Boards. Prüfen wir, ob es funktioniert. Aber ich habe hier im Frontend-Webserver keine Pfeile . Und lass uns jetzt wieder einloggen , weil wir gesperrt sind. Also hier werde ich unser Foo auf gmail.com zur Verfügung stellen. Wie Sie jetzt nach dem Einloggen sehen können, komme ich aber in Schrägstriche. Und hier in der Konsole können wir Bretter sehen. Und dies ist ein einzelnes Board, während wir es bekommen, weil im vorherigen Video in der Konsole erstellt wurden , um den Kuchen an diesem Punkt und im Wesentlichen diese Unterplatinen für unseren aktuellen Benutzer zu testen diesem Punkt und im Wesentlichen diese . Warum ist das so? Weil sie tatsächlich hier sind, ist unsere Backend-Anfrage. Hier finden wir unsere Boards nach Benutzer-ID, was bedeutet, dass wir alle Boards dieser Anforderungs-Benutzer-ID finden , von denen wir diese Benutzer-ID aus unserer Netzwerkanfrage erhalten . Hier ist die Anfrage unseres Vorstands und hier sind unsere Header. Und wie Sie hier in den Kopfzeilen unten sehen können, haben wir diese Berechtigung und hier ist unser Token. Dies sind genau die Informationen , die unser Backend benötigt , um schnell korrekte Daten des aktuellen Benutzers zu liefern . Wie Sie sehen können, funktioniert das Erhalten der Boards innerhalb des Moduls korrekt. Und wir haben unseren Service erfolgreich vorbereitet , um eine Liste der Boards für den Kunden zu erhalten. 22. Inline-Formular: In diesem Video möchte ich über ein zusätzliches Modul sprechen , das normalerweise live für unsere Anwendung erstellt werden soll. Und ich spreche hier von einem Inline-Formular. Werfen wir einen Blick auf das vollständig abgeschlossene Projekt , das wir implementieren. Wie Sie hier sehen können, bin ich auf der Slash-Sportseite und hier habe ich gerade einen Benutzer erstellt. Wir haben also überhaupt keine Boards. Und hier haben wir ein Create-Board. Wie Sie sehen können, ist dies nur ein Quadrat mit einigen Texten. Aber wenn ich darauf klicke, kannst du hier eine Eingabe ohne Platzhalter sehen, wir können hier zum Beispiel foo board tippen und wir drücken die Eingabetaste. Und danach wird unser Board direkt erstellt. Hier. Wir sehen diese Karte wieder, und dies ist im Wesentlichen ein Beispiel für ein Inline-Formular. Also haben wir hier ein Quadrat mit dem Text. Dann klicken wir hier und aktivieren einen Bearbeitungsmodus, in dem wir einfach etwas eingeben und die Eingabetaste drücken. Die einfachste Lösung wäre also, diese Komponente einfach zu erstellen und in unsere Boards zu werfen . Aber dann springen wir in ein einziges Board. Hier links haben wir genau das Gleiche. Du kannst hier den Titel unseres Boards sehen ich hier klicke und wir werden in den Bearbeitungsmodus versetzt. Hier sehen wir den Titel unseres Boards, aber jetzt können wir ihn ändern, um ihn zu aktualisieren Enter und Web-Datum, den Titel unseres Boards, zu drücken , genau das, was wir hier mit der Liste haben. Dies sind nur einige Texte, die hier versteckt sind und wir bekommen hier nicht nur eine Eingabe, sondern zumindest auch einen Button. Und wie Sie sehen können, unterscheiden sich die Stile in jedem einzelnen Fall, aber es macht nicht viel Sinn, zusätzliche Komponenten für jeden einzelnen Fall zu erstellen , z. B. ein Onboard zu erstellen, das Aktualisieren des Name des Boards, dann erstellen Sie eine Aufgabe, erstellen Sie eine Spalte usw. Denn auch in unserer Spalte können wir die Aufgabe hinzufügen und dies ist auch eine Inline-Firma. diesem Grund wäre es ein wirklich kluger Ansatz, eine einzige Komponente zu schaffen , die alle unsere Bedürfnisse abdecken kann. Welche Fälle haben wir also? Zuallererst haben wir auf jeden Fall ein Markup. Dann haben wir einen Bearbeitungsstatus , wenn wir einfach auf das Element klicken. Aber wie Sie sehen können, kann das Markup völlig anders sein. Aber was anders ist, ist nicht das Markup, es ist nur Stil es tatsächlich, wenn wir hier überprüfen, wie Sie sehen können, ist dies eine Inline-Schriftart, die ich erstellt habe , und wir fügen einfach hier Create Task Formular hinzu. Die Hauptidee ist, dass all diese Klassen global verfügbar sind und wir sie einfach mit CSS ändern können. Innen waren verschiedene Dinge vorgesehen . Zum Beispiel können wir zunächst einen Text eingeben, der hier angezeigt wird, wie zum Beispiel im aktuellen. Wir können hier aber auch diesen Text wie den Namen unseres Boards zeigen . Jetzt sind wir hier versteckt, Edit und vielleicht möchten wir diesen Text im Bearbeitungsformular propagieren. Aber hier mit einer Aufgabe müssen wir das nicht tun. Aber auch hier haben wir einen Fall, in dem wir einen Einkaufswagen-Button haben und nicht nur eine Eingabe. Alle diese Fälle müssen sich also in dieser einzelnen Komponente befinden , um reibungslos zu funktionieren. Versuchen wir jetzt, diese Komponente zu erstellen. Und diese Komponente ist super teilbar. Deshalb möchte ich es in AB srand packen. Und hier wollen wir die Ordnermodule erstellen. Hier fragst du dich vielleicht, okay, aber wir sprechen über Komponenten. Ja, Sie haben völlig Recht, aber Sie können keine Komponenten ohne Modul verwenden. Sie können entweder eine Komponente in einem Modul registrieren oder Sie können ein Modul injizieren , und das Injektionsmodul ist viel besser, da Sie definieren können , welche Komponenten Sie außerhalb zulassen möchten und was ist nicht. Dies ist normalerweise der Punkt, an dem wir eine Komponente teilen möchten. Ich empfehle Ihnen dringend, ein Modul dafür zu erstellen. Hier haben wir Module und können einen neuen Ordner erstellen , der ein Inline-Formular sein wird. Und das ist genau das richtige Formular für all diese Fälle. Jetzt springen wir hinein und erstellen hier Inline-Formular dot module.js. Und hier müssen wir unsere Klasse exportieren, die ein Inline-Formularmodul ist. Jetzt oben auf einem, um unser NG-Modul zu injizieren , wie wir es zuvor getan haben. Und hier wollen wir interne Eingänge , um unser gemeinsames Modul hinzuzufügen. Der nächste Schritt besteht darin, unsere Komponenten zu erstellen. Hier haben wir also einen Komponentenordner, und hier drinnen haben wir unser Inline-Formular mit zwei Dateien. Erstens in Live-Form Punkt-Komponente, Punkt ts und zweitens Inline-Formular-Punkt-Komponente Punkt-HTML. Versuchen wir es jetzt einfach in einigen Texten, zum Beispiel in Zeilenform. Und lassen Sie uns von hier aus in unser Inland springen, Experte, unsere Klassen-Inline-Formularkomponente. Jetzt müssen wir hier oben unsere Komponente definieren. Im Inneren können wir einen Selektor bereitstellen, und diese Selektoren werden nur ein Inline-Formular sein. Und hier müssen wir auch eine Vorlagen-TRL bereitstellen. Dies ist Inline-Formular-Komponenten-HTML. Unsere Basiskomponente ist also bereit, wenn Masse jetzt im Modul registriert ist. Also hier zunächst, unsere Deklarationen, werden wir hier eine Inline-Formularkomponente haben. Und zweitens, und es ist sehr wichtig, dass Experten hier die Verwendung dieser Komponente im Freien zulassen wollen. diese Weise fügen wir hier eine Inline-Formularkomponente innerhalb des Experten-Arrays hinzu . Lassen Sie uns nun zurück in unsere Komponente springen und einige Eingaben wie zuvor in diesem Set definieren. Zunächst möchten wir einen Titel für unser Inline-Formular angeben . diesem Grund haben wir hier einen Eingabetitel und dies ist eine Zeichenfolge, und standardmäßig ist es eine leere Zeichenfolge. Es ist jedoch wichtig, zwischen dem Titel des Formulars zu unterscheiden. Das wollen wir ändern und nur die Texte, die wir zeigen, weil wir in verschiedenen Fällen unterschiedliche Dinge brauchen . Sie möchten beispielsweise einen Standardtext ausführen, aber wenn Sie auf unserem Telefon versteckt sind, möchten Sie einen anderen Text rendern. Und das ist im Wesentlichen Titel, aber wir brauchen jetzt auch hier als Standardtext, das ist es, was wir rendern, wenn wir unsere Firma nicht aktiviert haben. Lassen Sie uns hier Standardtext erstellen, und das ist eine Zeichenfolge. Und hier möchte ich eine wirklich nette Wendung machen. Ich möchte hier schreiben, nicht definieren. Und das ist im Wesentlichen das, was ich Ihnen empfehle, viel zu tun wenn Sie gerade anfangen, etwas zu implementieren , oder sogar für die Produktion, wenn Sie nicht sicher sind , ob Sie einige Daten haben, ist es viel besser, dies nicht zu tun es als nur undefiniert oder nur eine leere Zeichenfolge. In diesem Fall können die Leute direkt sehen, dass der Wert nicht da ist und nicht kaputt ist. Haben Sie auch einen Fall, wenn wir eine Schaltfläche anzeigen wollen, hier müssen wir eine weitere Eingabe erstellen, hat eine Schaltfläche und es ist boolesch. Und standardmäßig ist es falsch, was bedeutet, aber nicht rendern. Wenn wir eine Schaltfläche haben, möchten wir den Text auf dieser Schaltfläche ändern. Hier wird unsere Eingabe mit Schaltflächentext sein und es ist eine Zeichenfolge. Und standardmäßig möchten sie es auf Senden festlegen da dies die beliebteste Art des Textes ist. Danach möchten wir manchmal auch einen Platzhalter für unseren Beitrag bereitstellen. Hier wird mit Eingabe-Platzhalter eingegeben, und dies ist eine Zeichenfolge, und standardmäßig ist es eine leere Zeichenfolge. Und das Letzte , was wir brauchen, ist ein Eingabetyp, weil wir einen Fall haben , in dem wir ein Massentrend sind und keine Eingabe, sondern eine Textarea. Hier möchte ich Eingaben mit dem Eingabetyp schreiben, und das ist nur eine Zeichenfolge. Wir könnten hier ein Enum erstellen, aber ich lasse es wie eine Zeichenfolge. Standardmäßig können wir schreiben, dass dies nur eine String-Eingabe ist. Und in dem Moment, in dem wir den Textbereich schreiben wollen, werden wir hier einen String-Textbereich bereitstellen. Jetzt müssen wir hier auch eine Ausgabe definieren. Dies sind die Werte , die wir nach dem Absenden eines Formulars weitergeben möchten . Das ist hier, Lassen Sie uns einen endlosen Ausgabenamen definieren , den es mit Submit behandelt. Und das ist ein neuer Event-Emitter. Und hier gibt es einen wichtigen Punkt. Wir müssen es vom eckigen Kern und nicht vom Knoten eingeben und dann einen neuen Ereignis-Emitter hinzufügen. Wir möchten die Art von Daten bereitstellen , die wir zurückerhalten möchten. Und es wird eine Zeichenfolge sein, weil wir in der Substantivform nur eine einzelne Zeichenfolge haben , die wir zurückgeben möchten. Auch hier müssen wir die lokale Eigenschaft zu handhaben standardmäßig bearbeitet werden, wir müssen edit auf false setzen, und dann aktivieren wir die Bearbeitung, wir setzen sie auf true. Dies ist y hier ist die Bearbeitung ein boolescher Wert und standardmäßig wird es falsch sein. Und zu guter Letzt wollen wir hier eine reaktive Form erstellen. Hier möchte ich den Insight-Konstruktor privat bereitstellen , wenn b und das ist Formulargruppe und wir haben bereits zuvor ein reaktives Formular für unsere Registrierung erstellt. Hier werden wir genau dasselbe verwenden, aber wir erstellen hier einfach ein Formular. Und hier können wir diese Punkt FB Punktgruppe schreiben. Wir müssen innerhalb unserer Felder sorgen. Und in unserem Fall haben wir nur einen Titel. Und hier können wir sagen, dass dies eine leere Zeichenfolge ist. Und eigentlich habe ich hier einen Fehler gemacht. Wenn b keine feste Gruppe ist, ist es tatsächlich Form Builder. Also hier brauchen wir noch einen Input. Lassen Sie uns nun einen Markt schreiben, damit Sie die logische Beta verstehen. Also hier möchte ich in HTML springen und wir brauchen diesen Text nicht. Jetzt hier wollen wir zuerst ein div erstellen, und dieses div wird unser Standard-Div mit etwas Markup sein. Deshalb brauchen wir hier eine Klasse , die wir global und immer wieder verwenden können, richtig, für unsere Bedürfnisse. Also hier können wir Inline-Formularcontainer schreiben. Auch hier schreiben wir keine Styles für unseren Inline-Formularcontainer. Jeder einzelne Anwendungsfall muss seine eigenen Stile erstellen. Auch hier möchte ich eine weitere Klasse erstellen auch zum Stylen, wenn ich im Bearbeitungsmodus Hier werde ich in der G-Klasse erstellen. Und hier stelle ich ein Objekt zur Verfügung, Whiskyglas in Line Dash, Armaturenbrett-Behälter. Also der gleiche Name, Dash Editing. Hier stellen wir den Wert der Bearbeitung zur Verfügung, die wir gerade erstellt haben. Die Hauptidee ist , dass wir genügend Klassen erhalten , damit andere Entwickler diese Komponente verwenden und sie für jeden einzelnen Status richtig stylen können. Und das letzte, was hier ist, ist natürlich ein Klick. Wir wollen unsere Bearbeitung aktivieren. Erstellen wir also hier eine neue Funktion, aktivieren die Bearbeitung und müssen hier nichts angeben. Definieren wir nun diese Funktion. In unserer Datei hier unten können wir also die Bearbeitung aktivieren und was dies aktiviert hat und was es tut. Legen Sie zunächst fest, dass dieser Punkt bearbeitet wird auf true, aber es ist nicht alles. Wir haben einen Fall, in dem wir den Wert sehen wollen , den wir ändern wollen. Zum Beispiel haben wir ein Bearbeitungsformular wie ein lustiger Name des Boards. Und dafür haben wir in diesem Eingabetitel angegeben. Aber wie Sie in unserer Firma sehen können , ist der Titel leer, was richtig ist. Aber in unserem Fall, wenn wir zur Bearbeitung übergehen, wollen wir unseren Titel festlegen. Deshalb können wir hier schreiben, wenn wir einen Titel haben. Also wenn wir this.title haben, dann wollen wir es in unser Formular einfügen. Und dafür können wir diesen Punkt-Tonhöhenwert in Punktform schreiben. Und im Inneren befindet sich ein Objekt mit Titel, dieser Titel. Was macht diese Zeile also, wenn wir sie bei der Bearbeitung aktivieren und ihr einen Titel geben , dann werden wir unseren Wert des Formulars mit dem Funktions-Pitch-Wert aktualisieren . Kehren wir nun zu unserem HTML zurück. Also innerhalb eines Divs mit Festival eins, um ein Div zu erstellen , das wir zeigen werden, wenn wir nicht in der Schnittphase sind. Und das ist nur ein Text mit Klasse, die wir stylen können. Das ist hier, Div-Klasse. Hier werden wir Inline-Formulartext sein. Und hier wollen wir diesem DFF nur einen zeigen. Wir sind nicht im Editor und sagen das hier so ist, NADH editiert. Dann zeigen wir dieses Div und innerhalb eines, um unseren Standardtext zu rendern , den wir in der Eingabe erhalten. Und danach erstellen wir unser Formular, genau wie bei der internen Registrierung. Es ist also eine reaktive Form und eine gut definierte Formulargruppe. Hier können wir also unsere Formulargruppe bereitstellen. Dies ist unser Formular und wir werden auch hier NG Submit haben. Und wir müssen die onsubmit-Funktion erstellen. Aber lassen Sie uns mit diesem Formular hier abschließen. Zunächst möchten wir dieses Formular in der Bearbeitungsphase nur einen Takt rendern . diesem Grund wird in GE bearbeitet. Und wir werden auch eine Klasse für das Styling bereitstellen wollen und wir nennen sie einfach Inline-Form. Springen wir jetzt zurück in diese Datei und erstellen hier unsere onsubmit Funktion. Und hier ist der knifflige Teil. Wir könnten ein Formular öffnen, keinen Wert angeben und dann einfach die Eingabetaste drücken. Und das wollen wir nicht ausstrahlen. Es macht keinen Sinn, eine leere Zeichenfolge zu treffen. Also hier wollen wir es überprüfen. Wenn wir nur diese Punktform, Punktwert, Punkttitel Punktwert, Punkttitel haben, dann wollen wir sie ausgeben. Und für ein Fleisch haben wir dieses Punkt-Handle, das eine Mitte einreicht, und im Inneren geben wir diesen Firm Value Dot-Titel an, was eigentlich bedeutet, dass wir, wenn wir dieses Formular einreichen und eine leere Eingabe haben, wollen wir sofort was wir tun wollen nachdem wir unsere Ohren schließen wollen Bearbeitungsstatus, diesem Grund ist edit gleich falsch. Und wir werden auch unsere Firma auf den Ausgangszustand zurücksetzen wollen . Aus diesem Grund erhalten wir diese Punktform Punkt-Reset und diese Funktionalität, die wir von Angular aus der Box bekommen . Kehren wir nun zu unserem HTML zurück. Hier haben wir ein Formular. Jetzt müssen wir eine Eingabe definieren. Also hier erstellen wir eine Eingabe mit einem Typtext. Und wir kommen hier innerhalb des Formularkontrollnamens. Und wenn in dieser blumigen reaktiven Form, hier haben wir unseren Namenstitel, wollen wir auch hier eine Klasse für das Styling erstellen. Also hier Klasseneingabeformular Eingabe. Wir möchten hier auch unseren Platzhalter angeben und wir erhalten ihn aus der Eingabe. Es ist also ein Eingabe-Platzhalter und wir wollen diese Eingabe rendern. Nur einer, der den richtigen Typ im Inneren angegeben hat. Hier ist NG IV mit Eingangstyp, wobei unser Eingabetyp der Eingabe entspricht. Und jetzt wollen wir genau die gleiche Breite textarea machen. Also haben wir hier bei Exterieur und wir wollen unseren Textbereich direkt schließen. Und jetzt wollen wir drinnen diesen NG IV überprüfen. Also hier ist unser Eingabetyp gleich textarea, dann werden wir randy. Aber wir müssen hier auch einen Formularkontrollnamen angeben, und dies wird auch ein Titel sein. Und wir müssen auch hier eine Klasse anbieten. In diesem Fall ist die Klasse dieselbe Eingabeformular-Eingabe, die Klasse dieselbe Eingabeformular-Eingabe und nachdem sie sich über die Maske erstreckt, erstellen Sie eine Schaltfläche zum Senden. Hier in der Schaltfläche und im Inneren haben wir unseren Text, Schaltflächentext, den wir von der Eingabe erhalten. Und wir wollen diesen Button nur rendern , wenn wir eine richtige Eingabe haben. Also, wenn wir einen Input hat Button haben, dann werden wir ihn rendern. Dann wollen wir hier den Typ submit, und hier wollen wir ihn deaktivieren, wenn er ungültig ist . Hier ist er deaktiviert und wir können form dot invalid verwenden. Und danach werden wir auch eine Klasse hinzufügen wollen , um sie zu stylen. Und hier wird die Inline-Formularschaltfläche sein. Und tatsächlich ist mit diesen Eingabeformular komplett fertig. Also was wir hier machen, wir haben ein div, wir haben hier die Bearbeitung aktivieren. Wir haben hier verschiedene Klassen für jedes einzelne Element hier wurden in unserem Standardtext gerendert und hier ist unser Formular mit Eingabe oder Textarea und Button, wenn wir es brauchen. Im nächsten Video werden wir versuchen, unsere Firma im Inland den Anwendungsfall der Erstellung des Boards einzusetzen. 23. Implementierung eines Vorstands: Im vorherigen Video haben wir unser Inland-Formular erfolgreich vorbereitet, aber es ist nicht klar, wie wir es verwenden werden, indem wir es gerade mit allen möglichen Werten erstellt haben. In diesem Video werden wir es verwenden wollen, aber wir haben nichts auf unserer Board-Seite. Dies ist die Art und Weise, wie wir in unser Inlandformular einfügen. Wir müssen auch unsere Board-Seite erstellen. Und hier haben wir hauptsächlich Online-Markups weil wir bereits Zugriff auf unsere Boards haben, weil wir bereits die get board-Methode erstellt und sie abonnieren, um unsere Boards zu erhalten. Beginnen wir also mit unserem Markup hier können wir die Sportwelt entfernen. Und zuallererst möchte ich oben schreiben, weil wir in diesem Video unsere obere Leiste nicht implementieren, aber wir sollten nicht vergessen, dass wir sie später implementieren müssen. Und hier können wir unser Markup starten. Zuallererst haben wir hier Boards, Seitencontainer. Jetzt schließen wir dieses Div und drinnen haben wir ein weiteres Div mit der linken Seitenleiste der Klasse Home. Hier schließen wir unser Div. Und tatsächlich erstellen wir hier unsere Seitenleiste auf der linken Seite und im Inneren haben wir Links zu unseren verschiedenen Seiten. diesem Grund haben wir hier einen Router-Link und möchten hier einen Link auf Slash-Boards bereitstellen. Danach müssen wir hier auch eine Klasse hinzufügen, Seitenmenüoption Boards. Auch hier wollen wir den Link halite wenn es inaktiv ist Route und ein Angular dafür haben wir ein spezielles Attribut, das Router Link aktiv genannt wird. Und eigentlich ist es eine Richtlinie. Und dann gesagt, wir können angeben, welche Klasse Put bekommen möchte. In unserem Fall möchten wir eine Seitenmenüoption für Klassenbretter auswählen. Schließen wir unser a hier und drinnen. Versuchen wir es mit Texten. Es sind auch Bretter. Lassen Sie uns hier einen weiteren Link setzen, der zu Hause sein wird. diesem Grund werde ich diesen Router-Link komplett kopieren und einfügen . Router-Link derselben Klasse ist aktiv. Hier können wir nicht Boards schreiben, sondern nach Hause, aber auch hier wollen wir damit aktive Routerlink-Optionen schreiben , denn eigentlich haben wir hier Link-Slash geroutet und wir haben in jeder einzelnen Routerverbindung einen Schrägstrich. diesem Grund hebt dieser aktive Router-Link immer dieses Element hervor, das wir vermeiden möchten. diesem Grund müssen wir aktive Router-Link-Optionen bereitstellen. Und hier drinnen stellen wir ein Objekt mit field exact true zur Verfügung. In diesem Fall werden wir diese Lean-on-Schleife hervorheben und wir haben ein volles Netz auf dem Schrägstrich. Und aus unserer Sicht ist es eigentlich nicht sehr sinnvoll diese beiden verschiedenen Verbindungen herzustellen. Denn wenn wir eingesperrt sind, aber nicht auf unser Zuhause zugreifen können , werden wir direkt auf unsere Board-Seite weitergeleitet. Aber das ist das Markup , das wir von dem Projekt erhalten. Also implementieren wir einfach das, was wir hinter unserer Seitenleiste haben. Wir müssen einen Hauptteil mit unserem Container für die Boards erstellen , hier wird div Klasse Boards Abschnitt Container sein . Jetzt schließen wir hier div und drinnen wollen wir ein weiteres div erstellen. Hier werden wir Div-Klasse meine Boards haben. Schließen wir dieses Div und darin wollen wir eine weitere Klasse mit einem Header erstellen. Das ist so hier, div class, my Boards Abschnitt Header und innen müssen wir eine weitere Klasse erstellen. Und es wird der Seitenkopf und der Name der Glasbretter sein, und im Inneren werden wir es versuchen. Meine Boards. Nach unserem Header wollen wir unsere Liste rendern. Das ist so hier. Wir werden eine Div-Board-Kachelliste haben, da wir hier jedes Board als Kachel haben werden. Hier können wir unser Div schließen und innerhalb dieses Divs möchten wir unser Inline-Formular rendern. Ich werde es in einer Sekunde beenden, weil ich vorerst gerade unser Markup beenden möchte. Und nachdem wir die Gruppe eins inline bilden, rendern wir alle unsere Kacheln, die Boards sind. Und dafür schreiben wir hier unser Diagramm, also einen Router-Link. Und hier wollen wir einen Link zu jedem einzelnen Board bereitstellen. Hier haben wir einen dynamischen Parameter. Hier können wir also ein Array mit Schrägstrichen bereitstellen. Und der zweite Parameter, den wir hier eingefügt haben, Komma-Board-Punkt-ID. In diesem Fall werden wir zu jeder einzelnen Platine eine korrekte Routerverbindung generieren . Aber um hier Zugriff auf das Board zu bekommen , müssen wir schreiben und G for loop. Das ist so hier in G4 und wir durchlaufen unsere Boards. Also hier lass Board of Boards, und hier werden wir auch unsere Klasse verpassen. Also hier sollten wir eine Board-Kachel haben und schließen wir diese a. Jetzt wollen wir in unserem a-Link ein div mit Klassen-Board-Kachel-Detailnamen angeben . Schließen wir dieses Div und rendern einfach innerhalb des Namens. Es wird sich langweilen Kachel und sie werden Markup ist vollständig fertig. Prüfen wir, ob es funktioniert. Ich habe hier tatsächlich einen Pfeil weil sie Property nicht richtig benutzt haben. Hier sollten wir doppelte Klammern setzen und keine einzelnen Klammern. Lass uns nochmal nachsehen. Wir haben eine Erzählung, dass wir keine Eigenschaftsboards haben, und das ist in unserem Typskript vollständig gültig. Wir bekommen unsere Boards, aber wir haben einfach hier ein Konsolenprotokoll mit Dan, speichere sie. Und eigentlich müssen wir es so machen, hier oben können wir Boards Property erstellen. Es wird unsere Board-Schnittstelle sein , die wir bereits haben. Dies ist ein Array und standardmäßig haben wir eine leere Liste unserer Boards. Jetzt können wir hier anstelle unseres Konsolenprotokolls einfach die Boards dieses Boards zuweisen, die wir von unserem Service erhalten. Lass uns nochmal nachsehen. Wie Sie jetzt sehen können, haben wir keinen Fehler, aber wir haben eine Fehlerplatine. Die Kachel existiert nicht. Und deshalb mag ich TypeScript so sehr. Es war einfach ein Tippfehler, aber wir debuggen ihn nicht zur Laufzeit. Wir haben einfach eine Validierung von TypeScript. Also hier sollte der Titel sein, und jetzt haben wir keinen Fehler mehr. Du solltest nicht gültig sein. Schauen wir uns das an. Ich lade die Seite neu und tatsächlich sieht sie irgendwie aus. Wir haben hier unsere App zur Bar. Wir haben es noch nicht implementiert. Hier auf der linken Seite haben wir einen Boards-Link und einen Home-Link. Links sind also da. Und hier ist unser Hauptinhalt mit meinen Boards in Landforms, dass wir ein zweites und unser erstes Board mit dem richtigen Link erstellen werden . Und wie Sie hier unten sehen können, handelt es sich um einen Slash-Port, Schrägstrich-ID, was bedeutet, dass unsere URL auch funktioniert. Aber ich habe einen kleinen Tippfehler im Markup. Wie Sie sehen können, sieht unsere Seitenleiste nicht so gut weil ich hier in der linken Seitenleiste einer div-Klasse home einen Wort-Container verpasst habe, ich hier in der linken Seitenleiste einer div-Klasse home einen Wort-Container verpasst habe, also sollte es links zu Hause sein, aber Container, wie Sie jetzt sehen können, unsere Sidebar ist viel größer und sieht besser aus. Wie Sie sehen können, haben wir unsere Boards mit diesem Code erfolgreich in unserer Komponente mit unserem Service abgerufen . Wir speichern diese Informationen in unserem Board-Eigentum und wurden in unsere Liste der Boards gerendert. Und tatsächlich können wir hier in unserem Netzwerk sehen, dass wir auf dem lokalen Host eine Anfrage für 1001 matschige, pathlose Boards haben. Und wir bekommen unser einziges Board, das wir haben. Und jetzt ist es an der Zeit, über Binnenfirmen zu sprechen. Also wie werden wir es hier in unserem HTML verwenden. Und dafür möchte ich unser Inland-Formular hier auf der rechten Seite öffnen , damit wir verstehen können , was wir in unserer Komponente haben. Also hier haben wir viele Inputs. Was wir also für diese spezifische Verwendung bereitstellen sollten, eigentlich haben wir hier Recht, dass wir unser Inline-Dash-Formular haben. Lass es uns hier schließen. Und jetzt möchte ich zunächst drinnen einen Kurs geben. Und die Hauptidee ist, dass dies die übergeordnete Klasse ist , die wir stylen können , weil wir einzigartige Stile auf unsere Komponente anwenden möchten . Und nur um Sie daran zu erinnern, dass wir hier Klassen wie Inland von Container, Inland von Text und Lied haben. Die Idee ist, dass diese Klasse diese Klasse jedes CSS überschreiben. Und genau das ist die Idee. Hier stellen wir hier einige Klassen zur Verfügung, zum Beispiel das Erstellen eines Board-Formulars. Jetzt werden alle diese Cluster in unserem CSS einfacher verschachtelt sein. Das zweite, was wir hier brauchen, ist Standardtext. Und das sind die Texte, die wir vorher auf der Karte sehen werden. Und hier haben wir unsere Standardtexte, neues Board erstellen. Und das Letzte , was wir hier bereitstellen müssen , ist das Absenden. Das bekommen wir von unserem Formular. Hier. Wir können zum Beispiel schreiben, Board erstellen und wir kommen hierher. Also was hat dieses Ereignis gemacht, nur um Sie hier daran zu erinnern, wir haben ein Handle submit und es ist eine Zeichenfolge. Dies ist unser Titel und wir brauchen hier keinen Schaltflächentitel, Schaltflächentext, Platzhalter, Eingabetyp, nur weil dies die wichtigste Standardfirma im Inland ist. Lassen Sie uns nun überprüfen, ob es funktioniert, wo das Springen hier in der Konsole und die direkt einen Fehler haben. Wir haben kein Methodenerstellungsboard, also erstellen wir es jetzt hier. Dies ist eine Methode, bei der wir eine Zeichenfolge erhalten. Wir können also sagen, dass wir hier einen Titel bekommen, es ist eine Zeichenfolge und zurück werden wir void zurückgeben, was nichts bedeutet. Und es listet hier auf, dass ich unseren Titel konsultieren möchte , der in unserer Inlandform erstellt wurde. Jetzt kommen wir hierher und ein schmales Argument vom Typ event kann nicht zugewiesen werden , um eine Zeichenfolge zuzulassen. Und tatsächlich könnte es super schwierig für dich sein zu debuggen, weil du vielleicht denkst, okay, ich biete hier etwas anderes an. Aber das Problem liegt nicht darin. Das Problem ist, dass wir in diesem Modul nicht in unser Inland-Formular-Modul injiziert haben. Hier innerhalb des Boards-Moduls müssen wir unser gemeinsam genutztes Modul importieren und es wird für das Modul in der Reihe sein. Und die Hauptidee ist, dass wir hier bei einem Modul invertiert sind, aber im Inneren haben wir eine Experten-ID-Komponente. diesem Grund können wir diese ausgenutzte Komponente jetzt Aus diesem Grund können wir diese ausgenutzte Komponente jetzt im Inland hier in unserer Komponente verwenden. Schauen wir uns das an. Wie Sie sehen können, haben wir diesen Fehler nicht mehr. Wir haben etwas anderes und wir können hier nicht an die Formulargruppe binden , da es keine bekannte Eigenschaft des Formulars ist. Deshalb müssen wir das tun. Wir müssen reaktive Formulare in unser Inline-Formularmodul einfügen. diesem Grund möchte ich in das Inline-Formularmodul springen. Und hier in den Eingängen möchte ich ein Modul für reaktive Formulare schreiben. Jetzt sollten wir keinen solchen Fehler bekommen. Schauen wir uns das an. Wie Sie sehen, ist alles grün und wir können loslegen. Lassen Sie uns sie in einem Browser überprüfen, in dem die Seite neu geladen wird und voila, das ist unser Element. Und es könnte jetzt sehr schwierig für Sie sein zu verstehen, was hier passiert, weil wir kein CSS geschrieben haben und CSS bereits schnell vorbereitet war. Lassen Sie uns dieses Element untersuchen. Was haben wir hier? Wie Sie sehen können, ist dies ein Inland-Formular und dies ist unser Klassenformular zum Erstellen eines Boards. Schauen wir uns das an. Was wir in unserem Projekt und unseren Stilen haben. Wir haben keine Quellstile und hier viele Stile erwähnt und wir sind jetzt daran interessiert, Board-Form zu erstellen. Öffnen wir es, und das ist unser CSS. Das ist genau das , was wir hier sehen. Dies ist ein Board-Formular erstellen. Das ist unser Elternteil. Am wichtigsten ist, dass wir innerhalb der Binnenform unterschiedliche Stile haben. Zum Beispiel ist hier der Inline-Formularcontainer der Div-Klasse und wie wir ihn stylen, wir verwenden hier unsere übergeordnete Klasse, die wir gerade hier haben. Dies ist Board-Formular erstellen und dann Inline-Formularcontainer. Und das können Sie hier sehen. Stellen Sie hier, allen Inland von Klassen, immer das create board-Formular vor, das unser übergeordnetes Formular ist, nur für diese spezifische Verwendung. Auf diese Weise machen wir unser Inland super flexibel. Es enthält 0 CSS im Inneren und wir definieren einfach unser gesamtes CSS außerhalb für jeden einzelnen Fall. diesem Grund haben wir hier definiert, okay, wir haben Inland von Container, Sie sollten Display Flex haben, Elemente ausrichten und Inhalte rechtfertigen. Wenn wir dann zum Beispiel inline aus Texten stylen müssen , waren wir in diesem Fall nicht stilvoll, aber wir könnten auch genau hier Board-Formular, Inline-Formular, Text erstellen und dieses Element stylen. Auf diese Weise haben wir unsere großartige Inland-Form geschaffen, die für jeden einzelnen Fall super geteilt werden kann. Prüfen wir jetzt, ob es wirklich funktioniert. Also haben wir hier unseren Standardtext neues Board erstellen. Wir können darauf klicken, und jetzt haben wir unseren Input und können hier etwas schreiben. Und sie sehen hier schon einen Fehler. Wie Sie hier sehen können, haben wir eine Eingabe mit einer Klasseneingabeformular-Eingabe, aber das ist es, was wir Stil haben und wo wir Inline-Formulareingabe stylen, was eigentlich bedeutet, dass wir dort einen Tippfehler gemacht haben. Lassen Sie uns zurück in unsere Komponente, die Inlandform-Komponente, springen . Und hier haben wir unsere Eingabe und hier müssen wir unsere Eingabeformulareingabe auf Inline-Formulareingabe ändern . Und wie Sie sehen können, haben wir hier in Textarea genau das gleiche Problem. Es sollte eine Inline-Formulareingabe sein. Lass uns nochmal nachsehen. Ich lade die Seite neu, wo sie auf der Schaltfläche versteckt ist, und jetzt haben wir eine korrekt gestaltete Eingabe. Jetzt kann ich etwas wie foo bezahlen und dann die Eingabetaste drücken und unser Formular ist erfolgreich geschlossen. Wir sehen wieder neue Boards erstellen. Und innerhalb der Konsole sehen wir, dass unser Titel dafür genau unsere Output-Inside-Board-Komponente ist. Was uns hier jedoch komplett fehlt, ist Erstellung eines Boards auf dem Client und auf dem Server. Und jetzt möchte ich umgekehrt machen. Ich möchte mit dem Frontend beginnen und mit dem Pi fertig werden. Und dann können Sie in umgekehrter Reihenfolge sehen , wie wir das machen . Also Festival hier haben wir unsere Create Board inside Komponente. Die Idee ist also, dass wir hier unseren Boardservice nutzen werden. Das ist mein innerer Board-Service, wir müssen eine neue Methode entwickeln. Nennen wir es zum Beispiel create point. Was wir also hier bekommen, wir kommen einfach hier beim Titel und es ist String und zurück werden wir ein Observable mit dem erstellten Board bekommen, was bedeutet, dass es sich um eine langweilige Schnittstelle handelt. Und jetzt, was wir drin haben werden, können wir zuerst die URL kopieren und einfügen, können wir zuerst die URL kopieren und einfügen da sie genau gleich sein wird. Es sind Schrägstriche und wir stellen eine Post-Anfrage. Hier können wir sagen, dass wir dieses HTTP zurückgeben und nicht bekommen, sondern posten. Und drinnen. Zuallererst müssen wir eine URL angeben. Und zweitens stellen wir hier ein Objekt mit Feldtitel zur Verfügung. Und das ist eigentlich unser Körper. Und für unseren Vorstand geben Sie einfach den Titel an. Denn im Backend mit Set nur zwei Dinge. Das ist Titel und Benutzer-ID. Und die Benutzer-ID muss unser Backend von selbst verstehen, da wir mit unserer Anfrage ein Token bereitstellen und authentifiziert sind. Das Hauptproblem ist hier, dass wir das Tippen umgehen. Wir müssen einen Einblick oder einen Beitrag geben. Wir bekommen unser Board-Interface zurück. In diesem Fall haben wir erfolgreich Create Board-Methode erstellt. Und wie Sie alle unsere API-Methoden sehen können, sehe ich genau gleich aus. Das ist einfach eine URL und dann HTTP-Post gestürzt, den wir brauchen. Verwenden wir nun die Service-Methode in unserer Komponente. Also lasst uns zurückspringen. Und hier ist unser Create-Board. Und hier wollen wir es diesen Wortdienstpunkt nennen. Und hier Create Point. Und drinnen geben wir genau den Titel an, den wir hier von unserer Inland-Form bekommen haben. Und danach schreiben wir dot subscribe und hier werden wir wieder Board erstellt. Was wollen wir mit diesem Punkt anfangen? Wir wollen einfach unsere, diese Boards Rate ändern. diese Weise werde ich hier schreiben , dass Dot Boards gleich sind. Und hier verteilen wir unsere These Dot Boards und dann wollen sie unser erstelltes Board platzieren. Also erstellen wir im Wesentlichen hier in Ihrem Array, wo wir alle unsere Felder aus dem alten Array platzieren und dann Board erstellt werden. Also unsere Front und das voll vorbereitet. Jetzt müssen wir zum Backend springen und dort alles erstellen. Im Backend. Es ist nicht so schwierig, weil wir alle ein Modell für das Board erstellt haben und es verwenden können. Wir müssen nur springen und sagen Schwesternschaft S. Und hier erstellen Sie Ihre API-Anfrage. Hier können wir kopieren, einfügen , komplett bekommen, und es wird auf Schrägbrettern veröffentlicht. Hier müssen wir OS-Middleware verwenden , da es sich um eine authentifizierte Anfrage handelt. Und hier verwenden wir den Controller-Punkt des Boards, zum Beispiel create board. Und jetzt müssen wir diese Methode in unserem Controller erstellen. Also lasst uns wieder in den Controller unseres Boards springen. Und hier wollen wir genau dasselbe erstellen, aber es wird eine Post-Anfrage sein, um einen Datensatz zu erstellen. Deshalb kopiere ich das komplett und benenne es einfach um. Hier haben wir also unser Create-Board und wir bekommen hier unsere Antwort auf Ihre Anfrage. Und als nächstes, und wir haben drinnen versuchen, hier zu fangen. Zuallererst, wo Hühnchen auf Anfrage verwenden, dass das völlig in Ordnung ist. Und danach wollen wir ein neues Board erstellen. Hier werde ich diese Zeile entfernen. Also hier werde ich schreiben , dass wir unser neues Board erstellen und dafür verwenden wir Ihr gelangweiltes Modell und dann sagen Wir müssen ein gültiges Objekt bereitstellen. Hier. Zunächst stellen wir einen Titel aus dem Anforderungsboard zur Verfügung , den Punkttitel. Und zweitens ist der Benutzer AD und die tatsächliche Verwendung relativ zur Masse aus unserer Anfrage, aus unserer Middleware. Also hier haben wir Anfrage Punkt USA, Punkt Unterstrich ID. Und tatsächlich können wir beide Unterstrich-ID oder ein D verwenden , egal. Wir haben beide zur Verfügung. Diese Zeile speichert also nichts in der Datenbank. Wir erstellen hier einfach eine Instanz unseres Modells. Danach möchten wir diesen Datensatz in der Datenbank speichern. Deshalb können wir hier versuchen, es zu speichern Board und wir verwenden hier ein Gewicht, und Sie haben dot save gekauft. In diesem Fall speichern wir diesen Datensatz und erhalten unser gespeichertes Board zurück. Und wie Sie sehen können, handelt es sich um ein Word-Dokument. Danach können wir also mit unserem gespeicherten Board antworten. Wir haben also wieder eine Post-Anfrage, wir haben hier eine Create Board-Aktion. Wir überprüfen, ob wir eingesperrt sind. Danach verwenden wir unser Board-Modell, um ein neues Board mit dem von uns bereitgestellten Titel zu erstellen und verwenden 3D, das wir nicht bereitgestellt haben. Aber Gott, von unserem gesperrten Benutzer und wir haben diesen neuen Punkt in der Datenbank gespeichert. Wir haben unser gespeichertes Board zurück und antworten mit dieser API. Prüfen wir, ob es funktioniert. Ich habe hier im Backend keine Fehler. Also lasst uns hier in den Client springen Ich möchte auf Neues Board erstellen klicken und ich tippe etwas und drücke Enter. Und wie Sie direkt hier sehen können, haben wir unser neues Board. Schauen wir uns unser Netzwerk an. Und tatsächlich haben wir innerhalb des Netzwerks die Anfrage unseres Vorstands. Und das ist ein Beitrag über Slushy Pie Schrägstriche. Und was noch wichtiger ist hier in der Vorschau, das ist unsere Antwort. Dies ist ein Titel Benutzer-ID. Das ist genau das, was in der Datenbank gespeichert wurde, was bedeutet, dass wir, wenn ich die Seite hier neu lade, jetzt zwei Boards bekommen, weil diese Informationen alle in der Datenbank gespeichert sind . Und hier in unserem Netzwerk bekommen wir unsere Boards. Und wie Sie in der Vorschau sehen können, haben wir bereits zwei Boards und kein einziges, was bedeutet, dass wir mit unserer Board-Seite vollständig fertig sind. Zunächst einmal wird hier die Sidebar gerendert, aber wir haben nichts damit gemacht. Wir verwenden hier auch unsere Inland-Form, die super teilbar ist. Und wir haben unseren Service , der mit unserer API spricht, erstellt , um auf dieser Seite ein neues Board zu erstellen. 24. Hinzufügen von Top-Bar und Logout: Im vorherigen Video haben wir unsere Board-Seite fertiggestellt, aber wir haben vergessen, unsere obere Leiste zu implementieren. Und tatsächlich ist dies die TBA auf jeder einzelnen Seite für einen angemeldeten Benutzer, was eigentlich nicht nur meine Board-Seite bedeutet, sondern auch eine einzelne Board-Seite Deshalb müssen wir sie als gemeinsam nutzbares Modul erstellen. Also möchte ich zu unserer gemeinsamen Client-Quell-App springen. Und hier haben wir unsere Module und Inland-Firmen. Und eigentlich möchte ich hier dieses Inline-Formular komplett kopieren, einfügen und in unsere Zunge umbenennen . Aber jetzt innerhalb der Masse ändert sich alles. Beginnen wir zunächst mit unserem Modul. Also hier haben wir ein Modul in der oberen Leiste und innen haben wir kein reaktives Formularmodul, wir werden einfach ein Markup und die Abmeldeschaltfläche haben. Hier können wir diese Eingabe entfernen und wir müssen auch unsere Komponente ändern. Aber zuerst ändern wir den Namen der Klasse. Es sollte unser Top-Bar-Modul sein. Lassen Sie uns nun in unsere Komponenten eintauchen. Und hier haben wir keine Firma im Inland, wir haben unsere obere Leiste und wir haben zwei Dateien darin. Zuallererst wird es Top Bar Dot Komponente Punkt HTML sein. Und hier ist unsere obere Bar Dot Komponente Punkt ts. Jetzt ändern wir das Markup. Ich möchte alles in der einfacheren rechten oberen Leiste entfernen. Gehen wir nun zu unserer ts-Datei und entfernen alles aus unserer Komponente. Jetzt möchte ich unseren Selektor in die obere Leiste umbenennen , um zu verdeutlichen, wo er hingehört. Eigentlich haben wir nur einen einzigen Toba in unserer Anwendung. Wir könnten einfach hier Tampa schreiben, aber da es für uns teilbar ist, werde ich hier oben schreiben, aber nur an diesem einzigen Ort, hier haben wir unsere Vorlagen-URL. Dies ist die obere Leiste und unser Komponentenname ist Top Bunk Component. Jetzt kann ich die Symbole entfernen und einfach hier unseren Input der Komponente leben. Jetzt springen wir zurück in ein Modul. Jetzt haben wir diese Inline-Formularkomponente nicht, aber wir möchten hier unsere obere Bar-Komponente und die Experten-TBA-Komponente deklarieren , da wir sie außerhalb verwenden möchten. Unser Modul ist jetzt also vollständig fertig. Ja, wir haben keine Logik darin implementiert, aber wir können sie immer noch nicht wirklich binden. Und wir wollen springen und das Board-Modul und in unseren Eingängen können wir hier das obere Balkenmodul hinzufügen. Jetzt hier in unseren Komponenten Boards, Boards, HTML oben. Anstelle dieses Textes können wir einfach die obere AP-Leiste schreiben und sie hier schließen. Prüfen wir, ob es funktioniert. Wir haben hier keine Fehler. Ich werde die Seite neu laden. Und hier oben siehst du die Texte in der oberen Leiste, was bedeutet, dass wir unser Modul und unsere Komponente erfolgreich an unsere Board-Seite gebunden haben. Versuchen wir nun, unsere Toolbar zu vermarkten. Hier springe ich zurück in unser Tombow-Komponenten-HTML. Hier, lass es uns schreiben. Also zuallererst haben wir hier div mit Klasse Navbar Boards. Lass uns dieses Div drinnen schließen. Wir werden noch eine div, div, navbar, linke Seite haben. Schließen wir dieses Div und drinnen haben wir zunächst einen Link zu unserem Zuhause. diesem Grund ein Router-Link. Hier wird unser Schrägstrich sein, und hier wird das Navbar-Symbol der Klasse sein. Schließen wir unser a und im Inneren müssen wir ein neues Bild liefern. Also hier wird Bildquelle Slash Assets Slash Home Dot SVG sein. Danach haben wir noch einen Router-Link. Deshalb werde ich es komplett kopieren und einfügen und es läuft auf Schrägbrettern. Und es wird Naropa Eigenspace sein, Navbar-Board-Symbol. Und drinnen haben wir eine weitere SVG-Datei. Es sind Slash-Assets Slash-Boards, wie Sie jetzt sehen können, wenn ich die Seite neu lade, haben wir zwei nette Symbole, eines zum Homepage-Link und eines zu unseren Boards. Aber wie Sie das hier sehen können, sind Schienen ungültig. Wir haben sie überhaupt nicht, weil wir tatsächlich in unser oberes Bar-Modul springen müssen. Und hier, importieren Sie das Routenmodul. Speichern wir das und laden die Seite neu. Und wie Sie jetzt sehen können, verlinkt dies vor allem die Homepage und hier Slash-Boards. Fahren wir nun mit unserem Markup fort. Nach unserer linken Seite haben wir unsere rechte Seite. Hier. Wir möchten unser Bild mit Quell-Slash-Säuren, einem Schrägstrich-Trello-Logo und einem SVG mit weißem Punkt versehen. Und hier ist unsere Klassen-Navbar. Länger nach einem Bild haben wir ein div mit der Klasse navbar rechts. Nennen wir das t. Und im Inneren wollen wir ein Linkfolgekleid erstellen , das ist y. Hier wird div Klasse, Navbar-Symbol, Navigationsleiste, Abmelde-Symbol sein. Und hier drinnen möchte ich einfach Log-Gichttext schreiben. Prüfen wir, ob es funktioniert. Hier haben wir unsere Links auf der linken Seite, wir haben ein Trailer-Bild in der Mitte und wir haben eine Schaltfläche als Logout-Link auf der rechten Seite. Aber wir haben hier keine Logik angehängt. Unsere obere Leiste ist also im Wesentlichen vollständig fertig. Wir haben alles implementiert, aber jetzt müssen wir unseren Logout implementieren. Implementierung des Logouts ist sehr einfach. Wir müssen nur unser Token aus dem lokalen Speicher entfernen, CurrentUser in unserem Speicher bereinigen und es auf die Homepage umleiten oder verwenden. Das wollen wir hier tun. Wir möchten ein Klickereignis anhängen. Also hier klicken wir mit der rechten Maustaste. Und was wir tun, wir nennen unsere Logout-Methode. Und die Nummer muss dieses Logout in unserer Komponente erstellen. Was wollen wir also drinnen machen? Eigentlich möchte ich unsere Logo-Logik in unserem Service speichern Logo-Logik in unserem Service da dies mit der Authentifizierung zusammenhängt und sie diese Logik nicht direkt hier schreiben möchten. Das ist y. Was wir tun müssen, wir müssen unseren Stunden-Service injizieren , der unser Dienstleister in dieser Komponente ist. Und jetzt können wir hier unseren this dot out dot logout verwenden. Und eigentlich haben wir keine solche Methode. Wir müssen es erstellen, aber es ist nicht alles, aber auch danach, um den Benutzer auf die Homepage umzuleiten , weil wir nicht mehr angemeldet sind. Und dafür müssen wir hier Router injizieren. So kann ich Router haften und es wird unsere Dürre sein. Nach dem Doppelpunkt sind unsere Dienste. Wir können hier diesen Router-Punkt-Navigieren nach URL schreiben, und wir wollen den Benutzer einfach auf unsere Homepage umleiten. Also sind wir fast fertig. Wir müssen nur unsere Logout-Methode hier innerhalb unserer Serviceklasse implementieren . Also hier unten schreibe ich logout mit brauche hier nichts. Wir wollen einfach unseren Token entfernen. Hier können wir also lokale Speicherpunkte entfernen und wurden innerhalb des Ziels bereitgestellt. Das reicht, aber wir haben unser Gedächtnis nicht gereinigt. Und tatsächlich hat dieser aktuelle Benutzer immer noch einen gültigen aktuellen Benutzer. Das ist nicht gut. Wir müssen es auf „Jetzt“ setzen. diesem Grund ist dieser Punkt aktueller Benutzer dot. Als nächstes werden wir jetzt im Inneren bereitgestellt und mit diesem einzigen Liner werden alle unsere Komponenten darüber informiert, dass wir nicht mehr eingeschlossen sind. Prüfen wir, ob es funktioniert. Ich habe hier keine Fehler. Wir müssen nichts im Backend implementieren. Jetzt klicken wir einfach hier auf Logout. Und wie du siehst, boom, ich bin direkt auf der Homepage und wir können überprüfen, ob wir nicht eingesperrt sind. Eigentlich wurde er hier innerhalb des lokalen Speichers der Anwendung genannt . Ich habe meinen Spielstein nicht. diesem Grund erhalte ich beim erneuten Laden der Seite 401 Unauthorized, was bedeutet, dass wir unsere obere Leiste und Abmeldefunktion erfolgreich implementiert haben. 25. Erstellung eines board: Im vorherigen Video haben wir die Implementierung unserer Board-Seite erfolgreich abgeschlossen. In diesem Video beginnen wir mit Implementierung unserer Single-Board-Seite. Und wir konzentrieren uns hier nur auf Erstellung unseres Basismoduls und unserer Komponente. Deshalb möchte ich innerhalb des Quellsatzes springen. Und hier möchte ich einen neuen Ordner mit einem neuen Modul erstellen. Und tatsächlich könnte man sagen: Okay, aber warum packen wir unser Component Board nicht in Boards Modul und ja, das können Sie tun, aber ich möchte es teilen, weil die Logik in diesen beiden Modulen ziemlich ist anders. Wir müssen immer noch ziemlich viel in unserem Board-Modul bezahlen . Das ist y. Erstellen wir hier einen neuen Ordner, der Board heißt. Und innen wollen wir unser Board dot module.js erstellen. Lassen Sie uns hier auch direkt unseren Komponentenordner und den mu-Ordner erstellen unseren Komponentenordner und den , in dem Board genannt wird. Und hier brauchen wir zwei neue Dateien. Zuallererst Board Dot Komponente Punkt ts und zweitens Board Dot Komponente Punkt HTML. Lassen Sie uns nun innerhalb von HTML tendieren, wortgekocht, und lassen Sie uns unsere Komponente erstellen. Hier können wir also unsere neue Klasse exportieren, und sie wird Board-Komponente genannt. Und oben hat ein Komponenten-Decorator remastert. Im Inneren möchten wir unseren Selektor bereitstellen und wir können hier einfach sagen, dass wir Board ausgewählt haben und wir müssen auch hier eine Vorlagen-URL angeben , die als Komponenten-HTML gegossen wird, unsere Board-Komponente ist vollständig vorbereitet. Wir müssen wissen, dass wir unser Modul erstellen. Also hier wollen wir eine neue Klasse exportieren, die Boardmolekül genannt wird. Und wir wollen den Decorator und das GI-Modul hinzufügen und Einblicke geben, zumindest die Liste der Eingaben. Und hier haben wir zunächst ein gemeinsames Modul, auch jetzt können wir unsere Deklarationen erstellen und Einblicke in unsere Board-Komponenten geben, die wir gerade erstellt haben. Deshalb möchten wir uns hier in Ihrer Route registrieren. Hier oben können wir eine neue Eigenschaft erstellen , die Routen genannt wird. Und es sind unsere Rufe, die ein Array sind. Und im Inneren müssen wir ein neues Objekt mit Feldpfad versehen. Und hier haben wir den Schrägstrich der URL-Boards, und hier haben wir eine Doppelpunkt-Board-ID. Was bedeutet diese Board-ID? Das bedeutet, dass wir einen dynamischen Parameter haben, was bedeutet, dass wir hier eine Board-ID haben und diese für jedes einzelne Board unterschiedlich ist. Danach müssen wir hier eine Komponente bereitstellen, und in unserem Fall wird es unsere Platinenkomponente sein. Auch hier möchte ich den Wortdienst nutzen. Deshalb können wir hier schreiben, aktivieren. Dies ist ein Array, und hier ist unser erforderlicher Service. Warum machen wir das? Weil diese URL nur für eingeloggte Benutzer ist. Wenn wir nicht angemeldet sind, möchten wir überhaupt nicht auf diese URL zugreifen. Und jetzt müssen wir diese Routen in unseren Eingaben registrieren. Hier können wir also Routenmodulpunkt für Kind platzieren, und hier geben wir einen Einblick in unsere Routen. Und zu guter Letzt müssen wir dieses Modul in unserem App-Modul registrieren. Hier in unseren Eingängen können wir einfach ein Board-Modul schreiben, und dies ist unser neues Modul, das hier oben eingegeben wird. Prüfen wir, ob es funktioniert. Wir können jetzt in unseren Browser springen und unsere Entwicklungstools öffnen. Hier können wir auf unser erstes Board klicken. Und wie Sie jetzt sehen können, haben wir keinen Fehler. Wir sehen hier auf dem obersten Wortbrett und dann die URL, die wir sehen, Schrägstriche, Schrägstriche und sie D dieses speziellen Boards. Was wir jetzt tun müssen, ist ein einziges Board für diese spezielle Seite zu bekommen . Warum ist das so? Denn eigentlich springen wir nicht immer von der Board-Seite auf unser einzelnes Board. Und du könntest sagen: Okay, nun, auf der Board-Seite haben wir alle unsere Boards. Aber wenn wir auf dieser einzelnen Seite sind und die Seite neu laden, haben wir keine wichtigen Informationen, was bedeutet, dass wir diese Anzeige von unserer URL abrufen und dieses spezielle Board mit der CD erhalten müssen . Später auch zusätzliche Informationen, wie Spalten oder Aufgaben. diesem Grund möchte ich unsere App, Shared Services, Boards, Service Tiers öffnen , und der Verkauf wird zuvor festgelegt. Hier schreiben wir alle unsere Anfragen an den Farbstoff, die sich auf unsere Boards beziehen. Deshalb können wir hier eine neue Methode erstellen , die sich langweilen heißt. Und dann, um ein Board zu bekommen, müssen wir eine Board-ID angeben, die eine Zeichenfolge ist, und zurück erhalten wir ein Observable mit unserer Board-Schnittstelle. Jetzt müssen wir hier unsere URL vorbereiten. Also hier werden wir die Umgebung Doherty Pi URL plus verwenden, und hier wollen wir unsere Boards plus AD verketten. diesem Grund ist es sehr sinnvoll, hier ECMO ScriptSig-Strings zu verwenden und innerhalb dieser Umgebung eine DPI-URL einzufügen. Dann haben wir hier Schrägstrich, Boards, Schrägstrich, und hier ist eine AD als Argument. Und eigentlich ist es keine AD, es ist geboren und AD. Das ist also die URL, die wir aus dem Backend holen wollen. Und jetzt müssen wir unsere Anfrage von diesem Punkt http.get zurückgeben . Und wir bieten Insidern unseren Urinbereich , den wir holen wollen. Aber auch hier werden wir wieder beobachtbar von Objekten und wir müssen angeben, dass wir unsere Board-Schnittstelle zurückbekommen. Versuchen wir nun, diese URL abzurufen. diesem Grund müssen wir wieder in unser Platinenmodul, unsere Komponenten und unsere Platinenkomponente zurückkehren. Und hier drinnen möchte ich eine neue Methode zum Abrufen von Daten erstellen, und diese Methode gibt void zurück. Und im Inneren wollen wir diese Methode verwenden, die wir gerade erstellt haben, um unser Board per AD abzurufen. Hier müssen wir einen Konstruktor bereitstellen und hier wird ein privater Boards-Service sein , dass wir diesen Boards-Dienst beendet haben. Und in unsere Abrufdaten können wir diesen Dotboard-Service-Punkt schreiben , langweilen Sie sich. Wir stellen eine Insight-Board-ID zur Verfügung, aber wir haben noch kein D in dieser Komponente. Und eigentlich müssen wir diese Board-ID aus der URL darin speichern , da wir sie in dieser Komponente häufig verwenden werden. Aber wenn wir hier schreiben Board-ID ist gleich string, dann bekommen wir hier ein schmales Board, das sie graben, hat keinen Initialisierer und ist nicht im Konstruktor definiert. Und eigentlich wollen wir nicht undefiniert hierher kommen weil es später nicht angenehm sein wird, zu arbeiten. Board AD ist für unsere Komponente obligatorisch. Und um den Perimeter von unserer URL zu erhalten, müssen wir hier Route injizieren. Also hier wird ein privates Leichentuch sein. Hier wollen wir die aktivierte Route verwenden. Jetzt wollen wir hier drinnen versuchen , diese aktivierte Dürre zu lesen. Also hier möchte ich die Board-ID als Parameter bekommen und wir verwenden hier diese Punkthülle, Punkte, Schnappschuss, Punkt-Parameter-Map hier wird Board-ID sein. Und so erhalten Sie normalerweise Parameter von der URL in Angular. Aber wie Sie sehen können, bekommen wir das zurück. Wir werden jetzt belastet, das ist völlig vernünftig, da Angular sicher sein kann, dass dieser Parameter immer da ist. Deshalb können wir hier schreiben, weil wir wirklich nur einen String speichern wollen. Wir können überprüfen und einen Fehler auslösen, wenn er nicht da ist. Deshalb können wir hier schreiben. Wenn wir unser Board AD nicht haben, werfen wir einen Pfeil. Hier wird ein neuer Fehler geworfen, zum Beispiel kann sich nicht langweilen AD von URL. Und danach schreiben wir einfach diese Board-ID gleich Board-ID. Und wie Sie in diesem Fall sehen können wo sich die Anmeldung innerhalb der Zeichenfolge befindet, weil wir hier nach TypeScript gesucht haben, dass es jetzt nicht ist. Und wenn es jetzt ist, werfen wir einen Fehler aus. Dies ist eigentlich das Beste, was wir tun können , um eine Zeichenkette in dieser Komponente zu erhalten. Weil es nicht bequem sein wird, jeden einzelnen Ort zu überprüfen , an dem wir diesen Parameter erhalten. Und jetzt können wir hier in guter Tafel Einblicke geben. Dieses Dotboard AD. Danach können wir dot subscribe schreiben und wir bekommen unser Board zurück und wir können es zuweisen und irgendwo speichern. Aber zumindest für den Moment möchte ich nur unser Board Comma-Board in der Konsole protokollieren, aber wir haben diese Daten nicht irgendwo aufgerufen. Deshalb müssen wir hier Geräte darauf schreiben. Und jetzt, nach unserem Konstruktor, können wir im Juni drin sein und drinnen können wir diese Daten abrufen. Und tatsächlich bevorzuge ich jedes Mal in jeder Komponente, in der ich einige Daten abrufen muss, eine zusätzliche Methode dafür zu erstellen, die als Fetch-Daten bezeichnet wird. Und werfen Sie diese Logik nicht einfach hinein und machen Sie mit, nur um sie sauberer zu machen. Wie Sie sehen können, wenn wir zum Browser springen, stellen wir jetzt eine Anfrage für unseren Slash-API-Slash, Forward Slash und diese spezifische ID von Momma-Parameter, was tatsächlich bedeutet, dass wir erfolgreich sind auf dem Client implementiert oder als Sie ein Modul gekauft haben und sogar unser Board aus dem Backend geholt haben. Offensichtlich haben wir keinen Backend-Teil implementiert, und wir werden es im nächsten Video tun. 26. Ein einziges Board: Im vorherigen Video haben wir den Front-End-Teil unserer Board-Komponente und unseres Port-Moduls erfolgreich implementiert den Front-End-Teil unserer Board-Komponente und unseres . Aber jetzt im Backend wollen wir implementieren, ein einziges Board zu bekommen. Das ist genau die Anfrage , die hier kaputt ist. Und ich denke, dass wir eine Menge Sachen zusammen implementiert haben und du wusstest schon nicht, wie das geht. Aus diesem Grund empfehle ich Ihnen dringend, es selbst umzusetzen. Wie immer gesagt, haben drei verschiedene Stufen für EU-Ebene Nummer eins Sie halten das Video einfach hier an und machen es selbst. Am Ende musst du hier unser Board aus dem Backend holen, Level Nummer zwei, lass uns darüber reden. Was müssen wir also umsetzen? Zunächst möchte ich hier unseren Server-Quellserver öffnen . Und hier müssen wir in Ihrer Anfrage angeben und es wird auf Slash, API-Slash-Boards und dann auf Boyd AD erzeugt, und es muss ein dynamischer Parameter sein. Es muss geschützt werden Dürre. Innerhalb unseres Board-Controllers müssen wir eine neue Aktion erstellen. Jetzt springen wir hier in gekochten Controllern, und wir machen einfach genau das Gleiche, wie wir Boards vergessen haben. Aber hier Groupon, um ein einzelnes Board mit dem d dieses Boards aus der URL zu finden . Wenn du also ein Level machen willst um das Video hier anzuhalten, und wenn du es einfach zusammen machen willst , lass uns loslegen. Zunächst müssen wir hier zurück in unsere Serverstufen springen und eine neue API-URL erstellen. Also hier haben wir apt-get slushy pie Schrägstriche und hier riskieren Doppelpunkt-Board-ID. Jetzt wollen wir eine neue Methode erstellen. Deshalb werde ich in oder Controller-Ports springen und hier langweilen wir uns. Sie wollen sie komplett kopieren weil sie sich sehr ähnlich sind. Also hier kopiere ich eingefügt, langweile mich, und sie wollen diese Methode benennen, langweilen sich. Und hier bekommen wir eine Antwort auf eine Anfrage und als nächstes prüfen wir, ob wir eingesperrt sind. Jetzt werden hier statt find alle Boards find one verwenden wollen, um nur ein einziges Board zu finden. Und eigentlich noch besser können wir hier find by ID verwenden. Es ist auch eine Methode , die möglich ist und innerhalb von Vermis nur eine ID dieses Sports angeben. diesem Grund können wir ein Objekt entfernen und einfacher hier, fordern Sie dot params dot board ID an. Und zurück bekommen wir unser Board und schicken diese Board-Tasche einfach in unsere API. Lassen Sie uns nun überprüfen, ob wir unsere Methode hier richtig anwenden, und hier ist der Controller des Boards dot get boards. Das ist nicht richtig. Es sollte sich langweilen. Wir haben hier in unserer API keine Fehler und wir haben erfolgreich implementiert, dass wir von der Stange gehen. Schauen wir uns das an. Ich lade die Seite neu, habe aber keinen Fehler. Hier. Wir bekommen unser Board von d, und hier sind die Informationen aus der Datenbank. Wir haben einen D-Titel und eine Benutzer-ID. 27. Hinzufügen von board: Im vorherigen Video haben wir erfolgreich die Messung unserer einzelnen Platine über die API implementiert . In diesem Video möchte ich meine Idee teilen, wie wir dieses Board verwenden und speichern werden. Und tatsächlich könnte es ein bisschen schwierig sein. Warum ist das so? Denn eigentlich hier im Kunden haben wir unsere Board-Komponente und können sie hier einfach in einer Immobilie lagern. Das ist völlig in Ordnung. können wir machen. Aber später werden wir ein Modell haben und hier werden die Dinge anders sein. Um nur zu erwähnen, dass wir hier eine Seite mit dem Board haben und dann eine Aufgabe getroffen haben, um diese Aufgabe innerhalb des Modells zu öffnen Das Hauptproblem ist, wenn wir die Seite neu laden, wir wollen zu dieser spezifischen Aufgabe zurückkehren, was bedeutet, dass wir in unserem URL-Slash-Board-Slash-Board-ID-Slash-Aufgaben-Slash-Aufgaben-ID haben möchten . Dann laden wir die Seite neu und holen uns zuerst unser Board, dann vielleicht alle Spalten, alle Aufgaben. Und wir wollen diese Aufgabe innerhalb des Modells lösen, aber hat es einen Mittelwert? Wir speichern zum Beispiel unser Board hier in der Board-Komponente, aber wir können diese Informationen nicht wirklich in unserer Aufgabenkomponente verwenden . Warum ist das so? Denn später werden wir unsere Aufgabenkomponente hier als untergeordnete Komponente dieses Pfades registrieren. Und wir können in keiner Weise auf einige Daten zugreifen , die in dieser Board-Komponente des Kindes gespeichert wurden . Was ist die Lösung für dieses Problem? Wir müssen einen Dienst in Anspruch nehmen. Wie können wir das machen? Zunächst möchte ich innerhalb eines Boards einen neuen Ordner erstellen , der Services genannt wird. Und hier können wir Board Dot Service erstellen, dot ds. Hier. Wir sollten unseren Board-Service hier nicht mit unserem Board-Service mischen , der Shared Services-Boards hat. Dieser Service dient nur dazu, Daten aus dem Backend abzurufen. Wenn wir unsere Boards bekommen wollen, verwenden wir gute Boards, langweilen uns, erstellen Boards und so weiter. Aber was wir innerhalb des Boards tun, das ist eine Art Zustand für diese spezielle Seite, was eigentlich bedeutet, dass wir hier unsere Board-Spalten, Aufgaben, alles, was wir auf dieser Seite haben, speichern werden unsere Board-Spalten, Aufgaben, alles, , und dann können alle Komponenten auf dieser Seite den Dienst verwenden, um diese Informationen über Streams abzurufen. Deshalb wollen wir hier unsere Klasse erstellen und es wird sich langweilen Service. Und hier oben sollten wir nicht vergessen, ein injizierbares Mittel zu verwenden. Was ich jetzt hier machen möchte, genau das Gleiche, was wir mit unserem aktuellen Benutzer gemacht haben. Nur um Sie daran zu erinnern, wir hatten hier unseren Service. Hier oben haben wir diesen aktuellen Benutzerstream erstellt , wir in unserer gesamten Anwendung verwenden können. Wir wollen genau das Gleiche tun. Jetzt hier, wir wollen hier erstellen Board war größer und das ist ein Stream und das ist in deinem Verhaltensthema. Und wir bekommen jetzt beide Board-Schnittstellen an. Und hier drinnen setzen wir jetzt nur weil wir standardmäßig kein Board haben werden. Wir haben es noch nicht geholt. Und nachdem wir dieses Board abgerufen haben, können wir es einrichten und den Stream aktualisieren. diese Weise müssen wir hier eine neue Methode schaffen, sagte Board. Und inside womb muss unser Board bereitstellen, das unsere Board-Schnittstelle ist, und das ist nichtig. Und hier was wir tun wollen, gut, diese Dartscheibe Stoller Punkt als nächstes zu nennen , weil wir einen Stream aktualisieren und uns innerhalb unseres Boards zurückziehen wollen . Jetzt sollten wir nicht vergessen, unseren Boardservice innerhalb eines Moduls zu registrieren . Also müssen wir hier unsere Anbieter erstellen und wir schreiben unseren Boardservice darin. Und jetzt können wir es direkt in unserer Komponentenplatine verwenden . Wir wollen hier also kein Property Board erstellen. Wir wollen hier in unseren Konstruktor tatsächlich eine neue Eigenschaft injizieren . Und es wird sich langweilen Service vom Bordservice. Und wie Sie sehen können, ist dies der Unterschied, den wir hier haben, sowohl Dienstleistungen als auch Boardservice und Boardservice. Und das ist ein großer Unterschied. Zuallererst ist dies ein Service für die Zusammenarbeit mit eBay. Der zweite Dienst ist eher wie ein Staat. Und was wir jetzt mit Abrufen von Daten nach dem Abonnieren tun können, können wir diesen Board-Service schreiben und sagen, Dot Set Board. Und wir werden innerhalb unseres Boards versorgt. In diesem Fall speichern wir das hier im Stream. Und jetzt können wir diese Informationen nicht nur innerhalb unserer Board-Komponente verwenden , sondern später auch innerhalb unserer Aufgabenkomponente. Und das ist extrem flexibel und die beste Lösung, die ich mir vorstellen kann, um Daten zwischen zwei Runden auszutauschen. Und nur um zu überprüfen , ob es funktioniert, möchte ich hier im Top-Stream für das Board erstellen. Also tatsächlich haben wir hier einen Board-Stream und wir wissen, dass dies eine beobachtbare Board-Schnittstelle ist. Also zeigen wir hier, dass wir ein Board brauchen. Es gibt keine andere Möglichkeit. Und um diesen Typskriptfehler ohne Initialisierer zu vermeiden, schreiben wir diesen Code direkt in den Konstruktor. Das ist völlig in Ordnung. Also hier können wir dieses Dotboard mit Dollar gleich schreiben, und hier wollen wir den gespeicherten Service dot verwenden. Und hier haben wir unsere Saite, die Board Dollar ist. Und du könntest sagen: Okay, warum benutzen wir das nicht direkt? Da wir hier im Board-Stream sind, können wir jetzt in unsere Komponente gelangen , ohne dass Null überhaupt nicht benötigt wird. Wir wollen einfach mit unserer Komponente arbeiten , wenn das Board nicht jetzt ist. Deshalb können wir hier schreiben, Pipe schreiben und dann das Ergebnis filtern. Also hier wird nur Filter Boolean eliminieren. Von hier aus werden wir nichts mehr bekommen , wenn es jetzt ist, wir werden nur unser Board aktualisieren. Wenn wir ein Board bekommen und jetzt in unsere HTML-Datei springen und hier unseren Board-Stream nur zum Testen rendern können , ist dies der Grund, warum Board-Dollar. Und hier verwenden wir eine einzelne Pipe , um diese Informationen zu rendern. Schauen wir uns das an. Ich lade die Seite neu und wir bekommen object, object weil wir im Wesentlichen benachbart sind und wir es mit Jason Pipe übergeben müssen. Schauen wir uns das nochmal an. Wir bekommen hier unser Board, und wie Sie sehen können, dies unsere Informationen unseres Boards, die vorab abgerufen wurden. Das ist Titel, Benutzer, Benutzer-ID. Die Idee ist also im Wesentlichen, dass dieser Dienst Informationen enthält, aber wir müssen diese Informationen nicht irgendwie in unserer Board-Komponente speichern . Wir verwenden einfach Streams aus dem Service und verwenden sie in jeder einzelnen Komponente , in der wir müssen. Beispielsweise schreiben wir bei Bedarf genau denselben Code in unsere Aufgabenkomponente Beispiel der Zugang für unseren Vogel. Was noch wichtiger ist, wir können Daten wie diese zuordnen, was sehr praktisch ist. 28. Erstellung von socket: In diesem Video starten wir einen interessanten Teil unserer Anwendung und sie richtet unsere Socket-Layer-Verbindung ein. Und nur um Sie daran zu erinnern, wir haben es bereits eingerichtet. Also Quetta, du bist im Backend. Also können wir hier in unserem Code Service Source Server Test öffnen. Und hier oben haben wir einen neuen IR-Server, und dann haben wir hier eine IR-Verbindung. Und hier ist unser Konsolen-Log Connect, was bedeutet, dass wir es erfolgreich eingerichtet haben. Gehen Sie also ins Backend, und jetzt müssen wir es auf dem Client implementieren. Und dafür werden wir genau dieselbe Bibliothek verwenden , die wir im Backend verwenden. Nur um Sie daran zu erinnern , dass wir Socket benutzt haben Das ist hier in der Konsole, ich möchte in unseren Client-Ordner springen. Und hier möchte ich ein neues Paket installieren, das socket Datta your dash client heißt . Und dies ist genau das gleiche Paket aus demselben Team, aber es dient zur Einrichtung unseres Kunden. Und dieses Paket hat nichts mit eckig zu tun. Das ist nur ein einfaches JavaScript. Also was wollen wir jetzt überhaupt machen? Zunächst möchte ich in der Quell-App unserer Kunden , den Shared Insight-Diensten, einen neuen Dienst erstellen, und es wird unser Service sein, mit Socket zu arbeiten. Das ist so hier. Nennen wir seinen Socket, DOD-Dienst dot ts. Und jetzt müssen wir im Inneren unsere Klasse erstellen , die Socket-Service genannt wird. Und natürlich sollten wir hier oben injizierbar nicht vergessen . Was wir also hier schaffen wollen, wir wollen eine Funktion schaffen, die für uns eine neue Verbindung generiert. diesem Grund können wir hier eine SetTab-Socket-Verbindung schreiben. Und hier bekommen wir unseren aktuellen Benutzer. Warum verwenden sie es aktuell, weil sie tatsächlich einige private Daten über die Socketverbindung senden wollen . Warum ist das so? Weil wir eigentlich Socket benutzen werden. Du bist auf der Board-Seite, was bedeutet, dass unser Benutzer registriert ist. Aber wenn wir in Yogis eintauchen, haben wir kein System wie GET, wie wir es für die Authentifizierung verwendet haben. Wir haben dort keine HTTP-Header und können unser Token nicht an unseren Socket anhängen. Aber es gibt eine Möglichkeit, unser Token mithilfe von Socket zu übergeben. diese Weise wird dies möglich. Wir möchten diese Verbindung für unseren aktuellen Benutzer einrichten. Und wir können dann bei jeder einzelnen Anfrage das Token vom CurrentUser innerhalb unserer Socket-Verbindung werfen . Wie ich hier schon sagte, bekommen wir als Argument den aktuellen Benutzer und diese aktuelle Benutzeroberfläche. Und zurück werden wir nichtig. Jetzt hier drinnen wollen wir unser Ion benutzen. Und eigentlich muss ich hier oben auf deiner Trommel eingeben. Und hier haben wir unseren Socket-IO-Client. Jetzt kann ich hier in der Notaufnahme eine URL angeben, unter der wir uns verbinden möchten. Und eigentlich können wir hier einfach versuchen, HTTP und unseren Port des Servers zu verwenden. Wir wollen das nicht verwenden, weil wir dafür Umgebungsvariablen haben, was eigentlich bedeutet, dass wir in die Quellumgebung des Kunden springen wollen , ja, und hier haben wir unsere API Euro, wir wollen Socket eine URL erstellen. Hier können wir die Sockets-URL erstellen, und das ist der http localhost. Hier haben wir 4.001 und müssen hier keinen Schrägstrich von acht Pi setzen , da wir unsere Socket-Layer-Verbindung direkt auf unserem Server einrichten . Und Sie könnten sagen, okay, aber wir könnten diese API wie eine einzelne Eigenschaft für API-URL und Socket-IO wiederverwenden . Ja, das könnten wir, aber ich empfehle Ihnen dringend , es auf zwei verschiedene Immobilien aufzuteilen. In diesem Fall ist es einfacher, es später zu teilen, wenn Sie Ihren Socket-Layer auf einen anderen Webserver verschieben möchten. Jetzt können wir in unserem Socket-Service unsere Umgebung nutzen. Das ist so, Environment Dot, wir haben Sockets, URL. Das ist genau das , was wir von innen nach außen oder Ihrer Verbindung geben müssen . Und ausgezeichnet. Jetzt möchte ich zusätzlich das Token von unserem aktuellen Benutzer bereitstellen, da wir die Socket-Layer-Verbindung nur für Login-Benutzer eingerichtet haben, was bedeutet, dass wir nie einen Fall haben , in dem wir dieses Token nicht haben. Auf diese Weise können wir Feldstunden schreiben und dann die Seite, auf der wir sprechen, was das aktuelle Benutzer-Punkt-Token ist. Und tatsächlich stellen wir hier als zweites Argument ein Objekt mit unserem Feld zur Verfügung und dieses Outfield innerhalb von Socket IO dient genau dazu, einen Benutzer zu authentifizieren. Und was wir zurückbekommen, ist das Ergebnis unseres AR ist diese Socket-Verbindung. Hier möchte ich diesen Socket gleich IR schreiben. Und hier müssen wir diese Eigenschaft erstellen, sie innerhalb des Sockets. Und wie Sie sehen können, sind dies unsere beiden Eingaben. Das ist nicht richtig. Wir wollen den Socket aus dem Socket Layer-Client importieren, oder er ist nicht definiert weil wir standardmäßig keinen Socket haben. Und dann haben wir es irgendwann eingerichtet, indem wir die Setup-Socket-Verbindung verwenden. Zusätzlich zu unserer Setup-Funktion möchte ich eine Disconnect-Funktion erstellen, was tatsächlich bedeutet, dass unser Benutzer irgendwann gesperrt wird und wir ihn von unserem trennen möchten Socket-Verbindung. Hier erstellen wir hier eine zusätzliche Funktion disconnect. Und das ist ganz einfach. Was wir hier nennen wollen, wir wollen diesen Punkt-Socket schreiben. Und hier haben wir eine Methode , die Disconnect genannt wird. Und wie Sie hier sehen können, bekomme ich keine automatische Vervollständigung, da dieser Socket möglicherweise nicht definiert sein kann. Und es gibt zwei mögliche Abweichungen, wie wir das beheben können. Zuallererst kann ich hier einfach ein Fragezeichen setzen und ich bin fertig. Aber ich möchte den Code nicht so schreiben. Ich möchte einen Entwickler wirklich darüber informieren , dass wir ein Problem haben, wenn wir keinen Socket haben. Wir können Disconnect nicht wirklich verwenden , bevor wir unsere Verbindung herstellen. Wenn wir diese Punktfassung nicht haben, wollen wir werfen und verengen. Also hier wird ein neuer Fehler geworfen. Und zum Beispiel ist hier keine Steckdosenverbindung hergestellt. Damit ist unser Basis-Socket-Service erfolgreich erstellt. Jetzt müssen wir irgendwann die Einrichtung einer Socket-Verbindung implementieren und sie wollen es wirklich in unserem App-Modul tun. Warum ist das so? Denn jedes Mal, wenn wir authentifiziert sind und Berlin, jetzt wo wir CurrentUser haben, möchte eine Verbindung aufbauen. Hier können wir in unsere App-Komponente springen. Und hier haben wir einen nächsten. Und nur um Sie daran zu erinnern, wir hier jedes Mal aktuelle Benutzer erhalten , wenn wir unsere Anwendung starten. Und hier stellen wir den aktuellen Benutzer ein und können, bevor wir hier eine Verbindung herstellen. Hier können wir privat schreiben und wir haben einen Socket-Service, und das ist unser Socket-Service. Jetzt hier bevor wir schreiben können, dass wir hier diese Punkte haben, Socket-Service, Punkt, Setup-Socket-Verbindung. Und tatsächlich bekommen wir hier unseren aktuellen Benutzer und wir können ihn reingeben. Speichern wir das und prüfen, ob es funktioniert, wie Sie hier sehen können, haben keine Fehler und springen dann in den Browser. Und hier ist es rot, wir bekommen einen Fehler. Kein Anbieter für den Socket-Service das beendet, weil wir unseren Socket-Service erstellt haben , aber wir haben nicht in ein Modul injiziert. Und hier verwenden wir den Socket-Service innerhalb unserer App-Komponente, was bedeutet, dass es sinnvoll ist, dieses Modul in unsere Anbieter einzufügen . diesem Grund können wir hier einen Socket-Service schreiben und wir loslegen. Schauen wir uns das an. Ich lade die Seite neu und wir erhalten einen weiteren Fehler. Was auch immer wir bekommen, wir stellen diese Anfrage auf Garn. Sie können es hier sehen, aber wir erhalten einen Fehler. Wir haben einen Kurs, was eine Cross-Origin-Politik bedeutet. Denn hier mit haben Sie keine Zugriffskontrolle erlauben Origin-Header auf der angeforderten Ressource. Und das ist eigentlich völlig richtig und wir müssen innerhalb von Serum herausfinden, warum es überhaupt passiert, weil unser Server keine Verbindungen von anderen Hosts zulässt und hier sicher einen anderen Host verwenden wird, das ist ein lokaler Host für 1200. diesem Grund müssen wir in eine Serverquelle gehen. Und hier haben wir unsere Serverstufen, und hier müssen wir unseren IIS-Server ein bisschen anders konfigurieren . Hier können wir als zweiten Parameter einige Optionen bereitstellen und wir suchen nach der Option , die als Kerne bezeichnet wird. Und im Inneren können wir den Ursprungsstern setzen und tatsächlich bedeutet Start, dass wir Verbindungen von jedem Host zulassen . Und beim Bahnprojekt möchten Sie vielleicht hier nur einen Host Ihrer Domain schreiben. Aber für unsere Zwecke ist der Ursprungsstern völlig gültig. Prüfen wir, ob es funktioniert. Ich freue mich jetzt über die Seite und wir haben keine Fehler. Jetzt können wir ins Netzwerk springen, und wie Sie sehen, haben wir hier WebSocket-Verbindungen. Also hier kommen wir zu Hunderten. Und wenn Sie in Ihrem Browser so etwas sehen können, bedeutet das, dass Ihre Anfrage der Socket-Verbindung das ist. Und tatsächlich können wir jetzt in unsere Backend-Konsole springen. Und hier können wir connect dreimal sehen , denn jedes Mal, wenn ich die Seite neu lade, wird eine neue Verbindung hergestellt, was bedeutet, dass wir erfolgreich eine Socket-Verbindung erstellt haben auf den Kunden. Jetzt ist die einzige Frage, was ist mit Disconnect? Wir erstellen eine Verbindung , konnten sie aber nicht verwenden, wo immer wir sie verwenden wollten. Eigentlich würde ich es innerhalb des Logouts verwenden wollen. Hier können wir in unsere App, das Gesundheitswesen und den Ergebnisdienst einsteigen . Und hier haben wir unseren Logout. Und hier entfernen wir zuerst unser Reden, dann wenn null und unser aktueller Benutzer. Und hier können wir Socket verwenden, um unsere Verbindung zu trennen , weil wir wissen wie wir es verwenden, ist es nicht mehr gesperrt. Wir benötigen diese Socket-Verbindung nicht. Dies ist hier im Konstruktor, wir können unseren neuen Socket-Service injizieren, und das ist unser Socket-Service. Jetzt können wir hier unten in unserem Logout diesen Socket-Service dot disconnect schreiben, und wir werden unseren aktuellen Benutzer trennen und unsere Socket-Verbindung schließen. 29. Verbinden und Verlassen von Board: In diesem Video möchte ich Ihnen zeigen, wie wir Sockets am Beispiel der Verbindung mit unserer Platine verwenden und sie von der Platine trennen können Beispiel der Verbindung mit . Was heißt das jemals? Tatsächlich Socket-IO einfügen. Wir haben so ein dünnes, das heißt Räume, was eigentlich bedeutet, wenn wir unser Backend nicht nur mit einer Socket-Nachricht oder einem anderen Kunden benachrichtigen unser Backend nicht nur mit einer Socket-Nachricht oder , wenn sie alle Clients definieren , die mit bestimmten verbunden sind zimmer. Und wenn wir über Boards im Trailer sprechen , ist das sehr sinnvoll. Wir möchten wirklich nur Benutzer benachrichtigen , die diesem speziellen Board beigetreten sind. Was zum Beispiel bedeutet, dass wir zwei verschiedene Benutzer haben. Ein Benutzer hat das Board voll geöffnet. Zweiter Benutzer öffnet das Board-Formular. Jetzt hat der erste Benutzer eine Aufgabe erstellt und wir müssen einen zweiten Benutzer über das Erstellen dieser Aufgabe informieren , da er mit diesem Raum oder diesem Board verbunden ist . Hier werden wir in diesem Video erläutern, wie wir beitreten und unseren Vorstand verlassen können. Und dafür müssen wir eine neue Methode in unserem Socket-Service erstellen . diesem Grund möchte ich hier unsere Circuit Service Tiers öffnen und eine neue Methode erstellen, die Emmet genannt wird. Warum wir diese Methode überhaupt brauchen, eigentlich Insights Socket selbst. Wir haben diese Punkte, Socket, Dot und Meet, und wir können nur eine Zeichenfolge wie foo liefern. Es wird unsere Botschaft sein. Und hier können wir einige Informationen bereitstellen, zum Beispiel Ambar-String. Auf diese Weise können wir normalerweise Sockets in unserer Anwendung verwenden , aber ich möchte sie aus zwei Gründen in eine zusätzliche Methode einbinden . Zunächst möchten wir eine Bibliothek isolieren und einen Wrapper erstellen. In diesem Fall können wir diese Verwendung, zum Beispiel Socket für Ihren Client, immer wegwerfen zum Beispiel Socket für Ihren Client, und eine andere Bibliothek verwenden. Zweitens möchte ich hier validieren , dass mit der Buchse ein Garn verbunden waren. Das ist so, hier ist unser Image und wir kommen hier, zuallererst, unser Veranstaltungsname, es ist nur eine Zeichenfolge. Und wenn Sie sich innerhalb von Socket IO nicht auskennen, emittieren wir immer nur mit eindeutigen Strings, die wir auf anderen Clients oder in unserem Backend hören . Und die zweite hier wird eine Nachricht sein in der ich jede Verschwendung schreiben werde, irgendeine, weil es eine Nachricht ist, die wir eine Zeichenfolge und kein Objekt oder irgendwelche Daten bereitstellen können , die wir mögen. Und hier bekommen wir eine Lücke, aber wir wollen drinnen machen. Zunächst werde ich diese Zeile kopieren und einfügen, um die Socket-Verbindung zu überprüfen. Denn wenn wir keine Steckdosenverbindung haben , können wir kein Fleisch verwenden. Danach. Wir können einfach diesen Socket-Punkt-Commit verwenden und wurden in unserem Ereignisnamen-Komma bereitgestellt. Und hier ist unsere Botschaft. Unsere Bildfunktion ist also bereit und jetzt können wir sie verwenden. Und eigentlich möchte ich es direkt in unseren App-Board-Komponenten, Board-Komponenten, Komponenten verwenden in unseren App-Board-Komponenten, . Und hier haben wir im Juni die Init-Methode. Und tatsächlich ist es ein netter Ort, um einfach hier den Beitritt des Benutzers zu platzieren, was bedeutet, dass jedes Mal wenn diese Komponente geladen wird, es bedeutet, dass die Benutzer zu diesem spezifischen Punkt gesprungen sind Route und wir müssen uns dem Benutzer anschließen, wenn er die Route geändert hat und wir diesen Raum oder dieses Board verlassen wollen. Also mit Trennen Sie einen Benutzer von diesem bestimmten Raum. Deshalb können wir das hier schreiben. Zuallererst müssen wir hier unseren Socket-Service injizieren. Das ist y, hier wird Socket-Service sein, und das ist unser Socket-Service. Jetzt können wir diese Methode verwenden und diesen Punkt Socket Service Dot schreiben. Und hier haben wir unser Image und wir müssen zuerst einen Einblick in unseren Veranstaltungsnamen und zweitens einige Daten geben. Also im Wesentlichen, was wir hier schreiben wollen, so etwas wie Boards beitreten. Und hier wird unsere Nachricht zum Beispiel ein Objekt mit Board-ID sein. Und hier geben wir die Board-ID dieser spezifischen URL an. Das ist diese Board-ID. Wir haben diese Informationen bereits. Warum ich diese Informationen in das Objekt gepackt habe. Weil deflate, wenn wir aus irgendeinem Grund mehr Informationen mit dem Objekt hinzufügen möchten, können wir es direkt tun. Wenn wir hier haben, muss ein String all diese Stellen von der Zeichenkette bis zum Objekt widerspiegeln . Und wie Sie hier sehen können, können wir jede Belastung ausstoßen. Wir können hier schreiben für. Es ist völlig in Ordnung, aber wir werden viele verschiedene Socket-Events haben und wir wollen sie irgendwie organisieren. diesem Grund bevorzuge ich hier Boards, die ein Plural einer Entität sind, wie Boards oder vielleicht Spalten oder Aufgaben. Und was ist passiert? Zum Beispiel haben wir uns angeschlossen, das ist nur ein Anfang. Wir können später so etwas wie gemeinsamen Erfolg erzielen, wenn es in einem synchronen Prozess ist, was eigentlich bedeutet, Vögel beitreten in Ordnung sind. Was nicht in Ordnung ist, ist, dass wir hier eine Zeichenkette schreiben wo direkt in TypeScript ist und wir unzählige verwenden müssen. Und eigentlich sind unzählig nur einige Konstanten innerhalb einer einzelnen Eigenschaft. diesem Grund möchte ich hier auf der rechten Seite unseren freigegebenen Ordner öffnen, und hier haben wir Typen. Hier. Ich möchte Socket-Ereignisse Punkt in m Punkt ts erstellen. Hier. Jetzt können wir unsere Enum exportieren, die ENM von Socket UN ist, und das ist nur ein Objekt, in dem wir Feldbretter join equals schreiben können , und hier schreiben wir Boards join. Zuallererst haben wir hier einen Codestil. Zweitens Luba hier nicht gezogen, eine Schnur. Genau hier drin verketten sich Socket-Ereignisse in m Dotboards, in diesem Fall an jeder einzelnen Stelle , an der dieselbe Zeichenfolge verwendet wird, aber wir werden sie niemals falsch schreiben , weil wir hier Justin unum verwenden, was eine Variable und keine einfache Zeichenfolge ist. Was diese Zeile also tut, sendet sie für unser Back-End in einer neuen Socket-IO-Nachricht aus. Hier wurden einige Zeichenketten und einige Daten bereitgestellt. Warum wir genau diese Daten bereitstellen, weil wir im Backend unserem aktuellen Benutzer beitreten möchten. Also unsere aktuelle Steckdosenverbindung zu der spezifischen Platine. Und das reicht aus, damit unser Backend darauf reagieren kann. Jetzt ist es an der Zeit, es auf der Back-End-Seite zu implementieren Hier müssen wir die Quelle unseres Servers öffnen. Und hier haben wir unseren Servertest. Und hier unten haben wir unsere eigene Verbindung. Das ist völlig in Ordnung. Jetzt können wir dieses Konsolenprotokoll entfernen und wir möchten mit eingeschaltetem Socket-Punkt auf einige Ereignisse reagieren und tatsächlich hören, worauf wir warten. Wir warten auf die Vorstandssitzung. Aber hier haben wir genau das gleiche Problem, wo wir im Backend sind und wir wollen nicht nur einfache Strings schreiben. Wir wollen sie auch in der Aufzählung organisieren. Und tatsächlich werden wir genau die gesamte Datei unserer Socket-Events im Client und im Sirup duplizieren . Und man könnte sagen, okay, das ist nutzlos. Wir können nur eine einzige Datei erstellen. Sie könnten, aber möglicherweise können Sie Ihren Client und Server in verschiedene Repositorys aufteilen und dann alles zwischen ihnen teilen. Deshalb möchte ich unseren Kunden und unser Backend wirklich isolieren. Was wir also hier in unseren Typen machen wollen, können wir genau das Gleiche schaffen. Es werden unsere Socket-Events sein, die keine Punkte aufzählen. Und jetzt könnten sie genau den gleichen Code platzieren , den wir auf dem Client haben. Was ich jetzt hier machen möchte, anstelle von Birds Join kann ich anstelle von Birds Join Socket Events in m Dot Boards Churn schreiben. Und wie Sie sehen können , stammt diese Eingabe von Socket-Ereignissen. So abonnieren wir unsere Veranstaltung vom Kunden mit socket, the tongue, aber von wo wir unseren Socket bekommen, ist dies unser erster Parameter hier. Wie Sie sehen können, ist dies Socket und hier haben wir Socket Dot an, aber hier müssen wir zwei Argumente angeben. Erstens ist es unsere Veranstaltung und zweitens unser Kohlberg. Was wir also hier bekommen, wo normalerweise einige Daten eingehen, und das sind genau die Daten , die wir vom Kunden bereitgestellt haben. Wir könnten hier etwas Logik schreiben, wollen es aber nicht, weil wir eigentlich alles geschrieben haben, was unseren Boards zu tun hat, innerhalb der Kontrolle. Und es ist sehr sinnvoll, unseren gesamten Socket-IO-Code auch innerhalb des Controllers zu schreiben . uns egal, ob es Socket Layer oder Justice GTP ist. Wir können den ganzen Code in unseren Controllern isolieren. Hier können wir hier den Controller-Punkt unseres Boards verwenden, zum Beispiel Join Board. Das wollen wir umsetzen. Und jetzt möchte ich zuerst mehr als Socket und dann Daten geben. Und wir werden in jedem einzelnen Fall, wenn wir mit Socket Layer arbeiten diese Informationen innen geben. Das ist dem, was wir mit unserem Express machen, sehr ähnlich . Hier. Wir verwenden Geburtenkontrolle oder Create Board. Und tatsächlich geben wir auf diese Weise direkt eine Antwort auf Insider-Anfragen. Und als nächstes, warum wir das tun. Wenn wir alles im Inneren bereitstellen, können wir tatsächlich verwenden, was wir wollen. Wenn wir ein Y'all brauchen, können wir beim Radfahren ein Garn verwenden. Wir können diese Informationen verwenden wenn wir Daten von der Veranstaltung benötigen, wir können sie auch verwenden. Und jetzt müssen wir nur noch unser Joint umsetzen. Deshalb möchte ich in unseren Controller-Sport einsteigen. Und hier unten müssen wir eine neue Funktion erstellen. Hier haben wir Expertenkegel, Joan Board, und wir kommen zuerst hierher, Iowa, was ein Server ist. Eigentlich haben wir hier viele Inverse. Deshalb müssen Sie vorsichtig sein, aber wir müssen hier unseren Server von Socket IO eingeben. Das ist wichtig. Hier bekommen wir ein Garn und es ist unser Server als Typ. Danach haben wir unsere Steckdose. Und Socket kommt auch von Socket IO. Und zu guter Letzt sind hier unsere Daten. Und tatsächlich wissen wir, dass wir im Inneren eine Board-ID angeben, die eine Zeichenfolge ist, und das sind genug Informationen für uns. So sieht also eine typische Funktion innerhalb des Controllers aus, wenn wir mit Socket Layer arbeiten. Und was wir jetzt drinnen machen wollen, wir wollen einfach Socket Dot Join schreiben. Hier stellen wir die Daten-Punktboard-ID zur Verfügung. Und das ist es, das ist nur eine einzige Zeile. Also was macht dieser Code, so wird Mi in dieser aktuellen Socket-Verbindung angezeigt. Also unser aktueller Benutzer für diese Board-ID, und das ist nur eine Zeichenfolge, nichts weiter. Aber eigentlich, wenn wir join und einige foo schreiben, sagen wir socket einfach, dass er den aktuellen Socket mit diesem Namen mit diesem Raum verbinden soll, aber wir haben keine Räume in unserer Anwendung, wir haben Boards, aber die Idee ist genau das Gleiche, wo unsere Benutzer dem Board beitreten und sie dann unsere Nachrichten an dieses spezielle Board erhalten. Jetzt wollen einige testen, ob unser Code funktioniert. Deshalb möchte ich hier nur einen Konsolenprotokollserver schreiben , Socket Join. Und hier werde ich in diesem Fall Komma Data Dot Board AD schreiben . Aber jetzt, wenn wir dieses Konsolenprotokoll sehen, bedeutet das, dass unsere Nachricht erfolgreich vom Client oder dem Backend gesendet wurde . Und unser Backend reagierte auf die Nachricht und begleitete unseren Benutzer in diesen Raum. Hier springen wir in unser Backend und laden die Seite neu. Und wie Sie sehen können, haben wir keine Fehler. Und tatsächlich wird unser Code mit dieser Board-Komponente und diesem Bild ausgelöst, weil unsere Komponente gerendert wurde. Und jetzt können wir in die Konsole springen und du kannst den Service Circuit oder deinen Join sehen. Und hier ist das d unseres Vorstands. Hier schließen wir uns unserem aktuellen Socket an. Und wie Sie im Browser sehen können, ist dies genau das d unseres Boards. Und jetzt wollen wir genau das Gleiche mit Wohnen und Verpflegung machen. Und was sie eigentlich tun wollten, ich möchte hier eine zusätzliche Methode erstellen, Zuhörer initialisiert und eigentlich alle meine Zuhörer wie Abonnements, zum Beispiel packe ich immer ein zusätzliche Methode. Dies ist der gleiche Name in wie zum Beispiel Daten abrufen. In diesem Fall packen sie im Juni nicht viele Informationseinblicke hinein. Hier möchte ich schreiben, Zuhörer initialisieren und hier live auf einer Seite abonnieren . Und tatsächlich können wir das tun, wenn wir eine Dürre-App verwenden und wir hier eine Dürre haben, aber keinen Router. So müssen wir hier den Router benutzen und es ist unsere Aufgabe. Und jetzt können wir hier ein Abonnement schreiben, um auf einer Seite zu leben. Und hier können wir diese Punkt-Router-Punkt-Ereignisse schreiben. Und hier haben wir uns angemeldet. Und tatsächlich abonnieren wir, wir bekommen hier Zugriff auf jedes einzelne Ereignis, das von einem Router ausgelöst wird. Und was wir hier schreiben wollen, wenn Ereignis, Instanz von hier haben wir Navigationsstart. Und der Navigationsstart ist der Beginn einer Änderung unserer Route. Und wenn das passiert, dann möchte ich hier die Konsole protokollieren und eine Seite verlassen. Also nutzen wir hier erneut Dürreereignisse, um alle Dürreereignisse zu abonnieren. Und wir erhalten jetzt mit Abonnieren Zugriff auf jedes einzelne Ereignis hier, um nach dem spezifischen Ereignis zu suchen , bei dem die Instanz von verwendet wird, und wir stellen hier den Navigationstapel zur Verfügung. Und hier ist unser Konsolenlog, in dem wir eigentlich eine Socket-Nachricht ausgeben wollen und diese Nachricht wird live in einem Board sein. Dann müssen wir einen Benutzer von diesem speziellen Board trennen . Schauen wir uns das an. Ich lade die Seite neu und wir haben eine enge Ich habe vergessen, hier oben ein Komma zu setzen. Also lass es uns jetzt tun und die Seite neu laden. Und wie Sie sehen können, haben wir keine Fehler, aber wir können nicht wirklich zu einer anderen Seite springen , auf der sie versuchen können, dies hier zu tun. Ich kann einfach zurückschlagen und wir verlassen die Seite, weil wir jetzt auf der Slash-Board-Seite sind. Und hier ist dieses Konsolenprotokoll, was eigentlich bedeutet, dass dieses Konsolenprotokoll jedes Mal ausgelöst wird , wenn wir eine Seite leben. Aber eigentlich möchte ich hier keinen Sockets Service Summit verwenden. Stattdessen möchte ich hier dieses Board Service Dot Leaf Board schreiben . Und eigentlich fragst du vielleicht, aber warum, warum nicht einfach in den Socket schreiben, inmitten der Antwort hier, es ist nicht auf LinkedIn , das wir innerhalb eines Board-Service machen wollen , wenn wir die Seite verlassen. Und tatsächlich haben wir hier im Overboard-Service den Stream des Boards und wir müssen ihn auch auf jetzt einstellen , als wir das Board verlassen haben, das ist hier. Lassen Sie uns unsere Leafboard-Methode erstellen und wir haben hier nur noch eine Lücke drin. Zuallererst, whoop, möchte dieses Board neben jetzt setzen, was eigentlich bedeutet, dass wir kein Board mehr haben. Und danach wollen wir diese Botschaft erfüllen , die den Vorstand verlassen wird. Deshalb müssen wir unsere gemeinsamen Typen öffnen. Und hier sind Socket-Events. Hier haben wir Boards Churn. Jetzt können wir diese Nachricht kopieren, einfügen und sie live als Boards benennen. Und das langweilt sich einfach. Verlasse. Jetzt werde ich diese Zeile kopieren und einfügen. Und jetzt können wir hier unseren Socket-Service nutzen. Aber dafür muss VM es hier in den Konstruktor injizieren. Hier haben wir also unseren Socket-Service, und das ist ein Socket-Service und wir verwenden ihn genau wie zuvor. Was ich hier schreiben möchte, ist dieser Dots Socket Service Punkt m es und wurde in unserem Eventnamen bereitgestellt. Und in diesem Fall werden es unsere Socket Events E und M Dot Boards live sein. Und eigentlich müssen wir hier bereitstellen, was der Vorstand wir leben müssen. Hier fehlt uns eine Board-ID, die eine Zeichenfolge sein muss, und wir müssen von unserer Komponente bereitgestellt werden. Hier möchte ich eine Board-ID angeben. Jetzt müssen wir unsere Komponente aktualisieren. Also hier haben wir unsere Board-Komponente, und hier im Live-Board schreibe ich diese Punkt-Port-ID. Jetzt müssen wir nur noch genau das Gleiche auf dem Server implementieren , das wir beim Joining gemacht haben, aber wir müssen live verwenden. Hier ist es Lass uns zurück in Silos springen, Server, Quelle, Server es, ja. Und hier haben wir unseren Verbindungs- und Port-Riesen. Was ich jetzt tun muss, ich möchte die Socket-Ereignisse in ihnen im Backend aktualisieren , und es werden auch Ports verlassen. Und hier bin ich live Boards. Nun, hier können wir diese Zeilen komplett kopieren und einen weiteren Socket registrieren, nicht für Boards aufgewühlt, aber für Dotboards live raten er hat einige Daten. Und hier wollen wir den Ports-Controller verwenden, nicht dem Board beitreten, sondern das Board verlassen. Und wir müssen jetzt diesen Live-Pod in unserem Controller erstellen . Und eigentlich wird es hier genauso sein. diesem Grund werde ich diese Methode komplett kopieren und sie einfach live hier nennen . Wir bekommen unsere IR als zuvor Sockel, da zuvor Insider-Daten enden, wir haben unsere Board-ID. Jetzt können wir hier im Konsolenprotokoll unseren Garten schreiben, um zu verlassen. Und hier ist die Datenplatine AD und anstelle der Steckdosenverbindung, wo genau hier, Socket Dark Leaf, und mit dieser einzigen Leitung, wo wir unsere aktuelle Steckdose aus diesem speziellen Raum bewegen , was bedeutet, dass wir wird keine Events von diesem Board bekommen. Prüfen wir, ob es funktioniert. Ich lade die Seite neu und wir sind drin. Jetzt bin ich hier versteckte Tasche und wir müssen den Abschnitt für unser Backend versenden. Schauen wir uns das an, wie Sie hier sehen können. Zuallererst hatten wir hier eine Steckdose, an die ich anschließe und mit diesem speziellen Raum beitrete. Und wenn ich dann zurückschlage, haben wir ein Blatt aus diesem Raum. Und genau so arbeiten ein Kunde und ein Betteln zusammen, wenn wir Socket IO verwenden. 30. Authentifizierung in socket.io: In diesem Video müssen wir die Arbeit an der Authentifizierung beenden, jetzt ein User Insights Socket. Aber zuerst wollen wir ein großes Problem lösen. Wie du hier siehst, bin ich eingeloggt und auf der Board-Seite. Aber was passiert, wenn ich mich abmelde? Also möchte ich einfach in die Anwendung springen und unser Token entfernen und die Seite neu laden. Ich bin jetzt direkt auf der Homepage. Das ist völlig gültig. Aber dann möchte ich mich irgendwann wieder authentifizieren. Ich klicke hier auf login und füge dann hier f2 auf gmail.com ein. Und unser Passwort, ich treffe hier das gleiche Mittel. Und wie Sie sehen können, haben wir keinen Fehler, aber nach dem gleichen Sprung in den Erstgeborenen und wir bekommen einen Fehler, wird die Socketverbindung nicht hergestellt, warum es passiert. Tatsächlich haben wir unsere Initialisierungs-Socket-Verbindung in unserer Quell-App, App-Komponente ts, diesem Code. Nach Page Lord holen wir den aktuellen Benutzer ab und richten hier die Socketverbindung ein, aber am Anfang sind wir nicht eingesperrt . Deshalb sind wir hierher gekommen und haben jetzt unseren aktuellen Benutzer eingestellt, dann haben wir uns erfolgreich angemeldet. Und nur um Sie daran zu erinnern, dass dies passiert, wo sich unsere Komponenten anmelden. Hier ist unser onsubmit hier, wo wir den Login abonnieren und wir sitzen hier und reden und aktuellen Benutzer, das ist völlig in Ordnung, aber wir haben unseren Socket nicht aktualisiert. Damit unsere Socket-Layer-Verbindung nach der Registrierung oder nach dem Login nicht existiert Registrierung oder nach dem Login und nicht live ist, wenn wir die Seite neu laden, wird diese Socket-Verbindung hergestellt. Auch dies ist offensichtlich nicht korrekt und wir müssen diese Verbindung nach dem Login oder nach der Registrierung herstellen. Und das ist extrem einfach. Was wir hier tun müssen, können wir einfach in unseren Konstruktor eine neue Eigenschaft injizieren, und es wird unser Socket-Service sein , der unser Socket-Service ist. Jetzt können wir diese Methode verwenden. So können wir zum Beispiel nach einem bestimmten Token diese Punkte Socket Service Dot schreiben. Und hier haben wir eine SetTab-Socket-Verbindung , damit sie Zugriff auf einen aktuellen Benutzer haben und wir werfen sie einfach in unsere Setup-Socket-Verbindung. Und genau das müssen wir in unserer Registrierung tun. Also hier injizieren wir zunächst unseren Socket-Service. private Socket-Service ist also ein Socket-Service. Und jetzt danach können wir diese Methode für unseren Erfolg einsetzen. Also nach dem Setzen des Tokens ist es dieser Dots-Socket-Dienst, Dot-Setup-Socket-Verbindung mit dem aktuellen Benutzer In diesem Fall funktioniert es ordnungsgemäß. Ich möchte wieder reden, gesprungen oder logge mich ein und versuche jetzt, mich anzumelden. Also hier ist voll auf gmail.com und unser Passwort, ich bin hittin sagen gemein, und dann springe in den ersten Teil. Und wir haben derzeit keinen Fehler, da wir unsere Socketverbindung direkt nach dem Einrasten erfolgreich eingerichtet haben. Aber wir machen nichts mit unserer Authentifizierung innerhalb von Socket IO, und genau das wollen wir tun. Was passiert also innerhalb unserer Setup-Socket-Verbindung? Hier werden wir in unser aktuelles Benutzer-Token geworfen. Das ist völlig in Ordnung. Von vorne und von der Seite haben wir alles getan , was wir brauchen. Aber jetzt müssen wir in einen Server springen und ihn entsprechend analysieren. Dafür muss der Boom innerhalb unserer Serverstufen springen. Und hier ist deine eigene Verbindung. Und eigentlich vor unserer eigenen Verbindung, schreibe hier weiter, dot use. Hier haben wir unsere Funktion und es wird unsere Middleware sein. Und danach haben wir unsere eigene Verbindung, was bedeutet, dass sie genau dieselbe ist, wie unsere Middleware hier unsere Anfrage authentifiziert und weiß , dass wir eingesperrt sind, weil unsere Socket-Verbindung ist nur für eingeloggte Benutzer verfügbar. Hier schreiben wir IOUs und innerhalb müssen wir die Funktion bereitstellen. Und hier wird es eine asynchrone Funktion sein, nur weil wir unseren CurrentUser aus der Datenbank holen wollen . Und hier bekommen wir zuerst unseren Socket, der Socket ist , und wir bekommen, und die nächste Funktion, weil es eine synchrone Funktion ist , die wir hier schreiben wollen , try and catch. Also zuerst müssen wir direkt versuchen und wo, Küche und Irrtum und was wir innerhalb des Fangs passieren werden. Wir wollen einfach als nächstes hier schreiben und Einblicke in eine neue Ära einleiten, zum Beispiel mit unserem Authentifizierungsfehler. Und hier ist eine super wichtige Sache , an die Sie sich erinnern müssen. Wir haben keine Fehler im Socket. Sie sind überhaupt nicht da. Wir propagieren keine Fehler an den Client zurück, was bedeutet, dass wir, wenn wir beispielsweise im Backend einen Fehler erhalten , einfach eine Nachricht an den bestimmten Kunden senden möchten . Wir können eine Verengung senden, die wir gerade in ein Objekt werfen möglicherweise eine Fehlermeldung mit Fehlercode oder was auch immer Sie bevorzugen. Und es ist wichtig, sich daran zu erinnern. Socket Layer funktioniert also nicht genau auf die gleiche Weise, wie sollten es Fehler sein? Und jetzt ist das erste , was wir in unserem Versuch tun möchten , unser Gespräch von der Anfrage aus zu bekommen. Und hier können wir Socket Dot, Handshake, Dot, House, Dot Token schreiben . Und es wird genau das sein , was wir hinter uns haben. Und tatsächlich bekommen wir hier den Token, und sie wollen das nicht, denn eigentlich möchte ich hier eine Zeichenfolge bekommen. Deshalb kann ich hier runde Klammern schreiben und einfach S strain schreiben. Und wenn wir dieses Token nicht bekommen, dann möchte ich hier eine leere Zeichenfolge verwenden. Warum mache ich das? Denn hier wollen wir Jason Verify verwenden, um unser Token zu verifizieren. Und in diesem Fall wollen wir nicht, dass es undefiniert ist. Es. Wir können es überprüfen, wenn es sich um eine Zeichenfolge handelt. Das ist so hier. Wir können jetzt versuchen zu analysieren, indem wir JSON-Web-Token verwenden. Hier oben können wir also GPS aus unserem JSON Web Token-Paket importieren . Jetzt können wir zu unserem Code hier zurückkehren und ihn verwenden. Also hier werden wir JWT Punkt haben, und hier haben wir es überprüft. Und jetzt müssen wir im Inneren zuallererst unser Ziel erreichen. Aber nur um Sie daran zu erinnern, innerhalb eines Tokens wir innerhalb eines Tokens Bearer-Space und dann unser Token haben, hier möchte ich es nach Leerzeichen aufteilen und das zweite Argument übernehmen. Und danach müssen wir hier ein Geheimnis verraten. Und nur um dich daran zu erinnern, was das Geheimnis ist, das es aus unserer Konfiguration kommt. Und das verwenden wir, um unser JSON-Token zu analysieren. Und das bekommen wir zurück. Wir bekommen hier eine Schnur oder ein TVT-PE-Los. Aber hier wollen wir wirklich sagen, was wir zurückbekommen. Hier. Wir bekommen wie immer unser Objekt, wir sagen D, welches eine Zeichenfolge ist. Und zweitens bekommen wir eine E-Mail, die ebenfalls eine Zeichenfolge ist. In diesem Fall erhalten wir hier korrekte Daten und können jetzt einen Benutzer abrufen, genau wie wir es in unserer Auth-Middleware getan haben. Und dafür müssen wir hier oben einen Benutzer eingeben. Deshalb verwenden wir jetzt ein Benutzermodell, genau wie zuvor. Also verwenden wir einfach Slash-Modelle Slash-Benutzer. Und jetzt können wir hier eine Anfrage stellen. Also hier wollen wir unseren Benutzer zurückholen, und hier möchten wir eine Anfrage an die Datenbank mit dem Benutzer dot stellen . Und hier ist unser guter Tschüss. Hier können wir nach ID suchen, da wir NAD Insight Data Dot ID haben . Und wenn wir unser brauchbares nicht haben, wollen wir einen Fehler werfen. Wenn wir also keinen Benutzer gefunden haben, bedeutet das, dass wir hier nicht eingesperrt sind. Wir führen einfach return next aus und wir werden in einen Authentifizierungsfehler der neuen Ära geworfen, genau wie wir es in unserem Catch getan haben. Und danach wollen wir diesen Benutzer in unserem Socket aufschreiben . Eigentlich ist Socket unsere Instanz, und wir können in die zusätzlichen Informationen schreiben , wie wir es zuvor mit Anfrage getan haben. In diesem Fall können wir später in jedem einzelnen Controller auf diesen aktuellen Benutzer zugreifen. Dies ist der Weg hier, socket dot user entspricht user , den wir gefunden haben. Und wie Sie hier sehen können, erhalten wir direkt eine Fehlereigenschaft Benutzer existiert nicht auf dem Typ Socket und wir müssen genau das Gleiche tun , was wir mit der SAML-Anfrage gemacht haben. Nur um Sie daran zu erinnern, haben wir eine ausdrückliche Anfrage erstellt, in wir unsere Anfrage erweitert haben , um den Benutzer einzubeziehen Und jetzt wollen wir genau das Gleiche machen , aber mit unserer Steckdose. Das ist so hier. Lassen Sie uns Socket-Punkt-Schnittstelle dot ds erstellen. Und hier drinnen wollen wir eine neue Schnittstelle erstellen, Socket heißt. Und hier wollen wir extends von Socket, Socket verwenden. Eigentlich habe ich hier einen ziemlich seltsamen Namen , weil das keine gültige Eingabe aus dem Socket ist. Das ist so hier. Ich möchte Socket als Socket oder deinen Socket importieren. Und ich mache das von Socket aus oder nur weil wir nicht genau den gleichen Namen haben können. Also hier Gabun, um unseren Socket zu exportieren und hier waren wichtige Sockets, das ist ungültig. Hier wollen wir unseren Eingang von Socket IO umbenennen und auf diese Weise von unserem Socket Socket Socket erweitern. Und wir möchten hier unseren Benutzer hinzufügen. Und es wird nicht immer so gemacht , hier gibt es ein Fragezeichen, und dies ist ein Benutzerdokument , das wir auch hier oben von unserer Benutzeroberfläche importieren müssen , Unsere Socket-Schnittstellen dort. Jetzt können wir wieder in unseren Server springen und ihn anstelle des einfachen verwenden. Also nur um Sie daran zu erinnern, hier haben wir eine Eingangsbuchse von Socket IO. Das ist nicht mehr gültig. Hier Woburn um unseren Socket zu invertieren, und hier sind unsere Typen Slash Socket. Prüfen wir, ob es funktioniert. Ich scrolle hier nach unten und wir haben hier keinen Fehler mehr. Der Socket-Benutzer ist vollständig gültig und es ist entweder ein Benutzerdokument oder es ist nicht definiert. Prüfen wir nun, ob unser Code funktioniert. Also springe ich hier in die Konsole und wir haben keine Fehler, also funktioniert es. Was ich jetzt tun möchte, ich möchte in unsere Controller-Boards springen. Hier drin machen wir Join-Board. Also hier anstelle von Data Board AT kann ich hier einen Benutzer von Mama, einem Socket, anmelden. Und tatsächlich ist der Socket-Punkt-Benutzer hier offensichtlich ungültig, da wir hier keine korrekte Schnittstelle verwendet haben. Das ist y hier oben. Wir müssen keinen Socket von Socket IO verwenden, aber wir müssen unsere Socket-Schnittstelle importieren, die wir gerade aus unserer Slash-Socket-Schnittstelle erstellt haben. Hier haben wir keinen Fehler. Lass uns in die Konsole springen und prüfen, ob sie funktioniert. Und dafür müssen wir diese Seite einfach neu laden und wir haben keinen Fehler. Schauen wir uns jetzt die Konsole an. Sie können sehen, dass es hier keine Nachricht gibt, was bedeutet, dass wir etwas vergessen haben. Und was wir vergessen haben, ist in der sayo use to write next, was eigentlich bedeutet, dass nach dieser Zeile unser Code nirgendwohin kommt. Das ist y hier, muss aber als nächstes schreiben, und in diesem Fall muss es funktionieren. Lass uns nochmal nachsehen. Hier lade ich die Seite neu. Wir springen in unser Backend und wie Sie sehen können, finden hier unsere Informationen. Also Socket Layer beitreten und wir bekommen hier unseren Benutzer, und hier bekommen wir zwei Konsolenprotokolle, denn jedes Mal, wenn Sie die Seite aktualisieren, bekommen wir diesen Socket IO zum Beitritt, weil dies Missbräuche passieren. Wir überprüfen unseren Benutzer, wir holen ihn aus der Datenbank. Jetzt ist es für uns in unserem Controller verfügbar. Mit diesem Code haben wir unseren Benutzer erfolgreich von der Anfrage erhalten. Und jetzt haben wir in jeder einzelnen Aktion innerhalb des Controllers über eine Schaltung, innerhalb des Controllers über eine Schaltung, ein Garn, diesen Benutzer schnell zur Verfügung. 31. Spalten erhalten: In diesem Video beginnen wir mit der Implementierung unserer Kolumnen. Und ich denke, es ist eine nette Aufgabe , dass man versucht, sie selbst umzusetzen. Was wollen wir also umsetzen? Ein Top? Wir haben unser Board und wir sind bereits über unseren Kunden zitiert und haben es im Backend und beim Kunden implementiert . Jetzt müssen wir Spalten implementieren. Warum brauchen wir Säulen? Dies befindet sich wirklich in einem Board, in dem wir Aufgaben speichern und unsere Benutzer Spalten innerhalb des Boards erstellen können, was bedeutet, dass die Spalte den Benutzern gehören muss. Wir müssen also 3D verwenden, aber auch Board AT, da unsere Spalte ohne Board nicht existieren kann und das ist y. Hier sind drei Schwierigkeitsgrade für Sie. Zunächst einmal, wenn Sie das schwierigste Level wollen, pausieren Sie das Video jetzt und implementieren Sie auf dem Backend-Festival ein Modell für die Kolumne Geben Sie dann für die Spalte ein und dann eine get-Methode, um eine Liste der die Spalten in unserem Board wenn du es auf der zweiten Ebene ausprobieren möchtest. Unter meiner Anleitung finden Sie hier einige Tipps, wie das Set innerhalb unserer Servicetypen genau wie bei Board erstellt werden muss . Wir müssen hier eine Spalte erstellen und wir benötigen hier eine Schnittstelle für die Spalte und auch eine Schnittstelle für das Spaltendokument. Es wird also unserem Board sehr ähnlich sein. Danach möchten wir in unserem Server eine neue Route erstellen. Und hier werden wir apt-get API-Boards haben, Board AT genau wie hier, Schrägstrich-Spalten. Und es wird eine GET-Anfrage sein, um alle Spalten dieses bestimmten Ports abzurufen. Und wir brauchen diese Menge wirklich innerhalb unserer Route. In anderen Fällen wissen wir nicht, für welches Board wir unsere Kolumnen erhalten müssen. Dazu müssen wir in Ihrem Controller implementieren , der columns-Controller ist, und wir müssen innerhalb der Methode get columns implementieren , genau wie wir es hier im Inneren haben. Langweile dich. Und sie haben es getan, ist, dass wir alle unsere Spalten bis zu diesem Zeitpunkt AD aus der Datenbank holen wollen . Wenn du es also selbst ausprobieren möchtest, pausiere das Video jetzt einfach. Und jetzt die einfachste Variante, lass es uns gemeinsam umsetzen. Und wir fangen hier an. Zuallererst von unseren Typen. Hier wollen wir einen neuen Typ erstellen , der Column Dot Interface ab.js sein wird. Und eigentlich möchte ich unser Board komplett kopieren und einfügen , weil es super ähnlich sein wird. Also hier haben wir unsere Schnittstelle und Datenspalte. Und was brauchen wir in unserer Kolumne? Zunächst benötigen wir einen Namen, was bedeutet, dass der Titel vollständig gültig ist, auch hier erstellt und aktualisiert wird. Und wir haben hier UserID , weil es das Set ist. Möglicherweise benötigen wir Informationen, wer diese spezielle Spalte erstellt hat. Und danach möchten wir einen Hinweis auf unseren Vorstand haben. Hier haben wir ein Board AT. Und es ist die gleiche Objekt-ID für Schematypen, genau wie wir es hier oben für unseren Benutzer haben. Und jetzt wollen wir hier anstelle unseres Board-Dokuments unser Spaltendokument erstellen und wir werden hier erweitert Dokument und unsere Spaltenschnittstelle, die wir gerade erstellt haben. Und jetzt ist es an der Zeit , unser Modell zu erstellen. Also hier haben wir Bohr-Modell, jetzt brauchen wir ein Säulenmodell. Also hier haben wir ein Board Tränen. Jetzt müssen wir hier die Spalte Ts erstellen. Und eigentlich werde ich alles von unserem Board kopieren und einfügen , weil es super ähnlich ist. Was wir hier haben, wir erstellen hier ein Spaltenschema, und hier verwenden wir das NADH-Board-Dokument, aber stattdessen das Spaltendokument, das wir gerade hier erstellt haben, Board-Dokument oben, das wir entfernen können. Hier wissen wir, dass wir unseren Titel haben, wir verwenden 3D, es ist erforderlich. Und die letzte hier ist unsere Board-ID, die eine Typobjekt-ID ist, und sie ist auch erforderlich, und es ist unser Modell des Typspaltendokuments und der Name ist Spalte. Und hier haben wir unser Spaltenschema. Wie Sie sehen können, ist es unserem Board sehr ähnlich. Und tatsächlich werden viele Modelle , die Sie in Ihren zukünftigen Anwendungen erstellen werden , wirklich so aussehen. Also haben wir erfolgreich unseren Typ und unser Modell entwickelt. Jetzt müssen wir innerhalb unserer Service-Tiers generieren und nutzen . Und hier möchte ich diese Zeile mit einer Pi-Board-ID kopieren und einfügen . Und hier haben wir ein Get auf genau diese Route Schrägstrichspalten, weil wir, wie gesagt, unsere Spalten für diesen speziellen Punkt bekommen wollen. Und hier müssen wir unsere Middleware verwenden da diese Anfrage nur für eingeloggte Benutzer gilt. Und hier müssen wir nicht den Controller unseres Boards verwenden , der hier einen neuen Controller haben möchte, columns controller, und hier können wir es zum Beispiel get columns nennen , aber wir haben keinen columns controller tall. Also hier möchte ich den Controller des Paste Boards hier oben kopieren und ihn einfach zwei Spalten nennen controller Von Slash-Controllern Slash-Spalten. Und unser letzter Schritt besteht darin einen neuen Controller zu erstellen , der als Spalten bezeichnet wird. Und das ist der Controller, um alle unsere Aktionen für die Spalten zu verwalten . Also hier erstellen wir unsere Spalten dot ts. Und hier möchte ich nur eine Methode von unseren Boards kopieren und einfügen , weil sie super ähnlich ist und es gute Boards sind. Springen wir also zurück in Treppe unserer Säulen und fügen diese Methode hier ein. Zuallererst ist es nicht langweilig, sondern bekommt Säulen. Und wir brauchen hier eine ausdrückliche Anforderungsschnittstelle, weil wir nach dem aktuellen Benutzer suchen wollen. Und hier brauchen wir unsere nächste Funktion. Und auch wir müssen hier auf die Antwort von Express eingehen. Und hier suchen wir wie immer nach CurrentUser. Wir werfen für 01, wenn es nicht da ist. Aber jetzt müssen wir hier nicht gelangweiltes Modell verwenden, sondern das Modell spalten. Lassen Sie uns hier das Modell der obersten Spalte eingeben , aus dem wir gerade erstellt haben. Und hier schreiben wir Slash-Modelle Slash-Spalte. Und jetzt warten wir hier darauf, eine Anfrage für die Suche nach einem Spaltenmodell zu stellen . Aber anstatt unsere Spalten zu finden, erhalten wir hier ein Array nach Benutzer-ID. Wir wollen sie von unserem Vorstand AD finden. In diesem Fall erhalten wir unglückliche Spalten für dieses spezielle Board. Und wir erhalten diese Informationen von request dot, params dot, und hier haben wir die Board-ID. Also zurück bekommen wir ein Array unserer Spalten und wir wollen dem Kunden einfach mit diesem Array antworten. Und eigentlich sind wir fertig. Prüfen wir, ob es funktioniert. Ich springe ins Backend. Es liegen keine Fehler vor. Jetzt möchte ich eine Anfrage stellen, und hier habe ich unsere API, aber anstelle von Slash-API-Slash-Boards möchte ich hier Slash und dann NAD haben. diesem Grund möchte ich aus unserer Anwendung das d unseres Boards kopieren, möchte ich aus unserer Anwendung das d unseres Boards kopieren um es hier in den Postboten einzufügen. Wir stellen eine GET-Anfrage und klicken auf Senden. Wie Sie sehen können, wo ich eine Nachricht bekomme wo ich nicht autorisiert bin, was bedeutet, dass ich mich zunächst einloggen muss. Das ist mein Benutzer, ich melde mich an und hier erhalte ich ein Token. Lass uns dieses Stalking kopieren und es noch einmal versuchen. Hier ist eine GET-Anfrage für einen matschigen, unbegründeten Punkt. Hier ist AD und sie haben hier Schrägstrichspalten verpasst. Dies ist eine Anfrage zum Abrufen, und hier ist unser Header. Das ist Bier. Und dann werde ich mein Token setzen, ich drücke jetzt senden und wir bekommen unsere Antwort, die ein leeres Array ist. Und eigentlich ist es völlig richtig, weil wir keine Spalten in unserer Datenbank erstellt haben. Aber um es sicher und sauber zu machen, erstellen wir sie von der Konsole aus, damit wir überprüfen können, ob es wirklich für Behinderte funktioniert . Springen Sie in die Konsole und versuchen Sie Docker Exec minus 18 MongoDB, Mongo , wie wir es zuvor für unseren Vorstand getan haben. Jetzt müssen wir hier unsere L Trello-Datenbank verwenden. Also nützlicher Trailer und jetzt möchte ich einen Datensatz in unsere Kolumnensammlung einfügen. Deshalb können wir hier db dot columns, dot insert schreiben, und hier drinnen wollen wir zuerst auf title werfen, zum Beispiel die erste Spalte. Also hier müssen wir eine Benutzer-ID angeben, und hier müssen wir schreiben, dass das Datum ein Objekt mit einer Zeichenfolge ist mit einer Zeichenfolge ist , die wir aus der Anfrage entnehmen müssen. Und zuletzt wird hier unser Board AT sein, und es ist auch eine Objekt-ID und innerhalb der Zeichenfolge. Also langweilen wir das D. Wir wissen schon, wir können es einfach hier vom Postboten nehmen und sie werden es hier ablegen. Aber unser Benutzer AT, wir können in unserem Backend nachschauen. Wie Sie hier sehen können, habe ich immer noch dieses Konsolenprotokoll mit unserem Benutzer. Und hier ist das D meines Benutzers, mit dem ich eingesperrt bin. Hier in unserer Benutzer-ID füge ich den Hash meines Benutzers ein. wir die Eingabetaste. Und wie Sie sehen können , wo eine eingefügt wird. Jetzt können wir überprüfen, ob es richtig ist. Also db dot Spalten, Punktsuche und nur runde Klammern. Und wie Sie hier sehen können, ist unsere Antwort. Schauen wir jetzt in Postman nach, ob es funktioniert, ich klicke hier erneut auf Senden, und wir bekommen innerhalb des Arrays ein einzelnes Objekt. Hier sind unsere AD Boyd AD-Benutzer-ID und der Titel, was bedeutet, dass wir unser Spaltenmodell erfolgreich erstellt haben und die erste Anfrage, alle Spalten für diese spezifische Bindung abzurufen. 32. Erstellen einer Spalte mit Websockets: Im vorherigen Video haben wir erfolgreich eine Methode erstellt , um eine Liste unserer Spalten für das Board zu erhalten. In diesem Video konzentrieren wir uns auf den Back-End-Teil der Erstellung unserer Kolumne. Und wir werden es nicht auf die typische Weise tun , weil wir hier kein HTTP verwenden werden. Wir werden es mit Socket erstellen indem wir Spalten mit Socket erstellen müssen? Denn tatsächlich ist dies der Fall, in dem Woburn alle anderen Personen , die in unserem aktuellen Board schauen, über die Erstellung der neuen Kolumne informiert alle anderen Personen , die in unserem aktuellen Board schauen . In diesem Fall sehen alle Benutzer mit dieser einzelnen offenen Tafel dieser einzelnen offenen Tafel direkt unseren nukleierten Teil. Wie sollen wir das also machen? Und wir beginnen hier innerhalb eines Quellservers. Sie wussten tatsächlich schon, wie wir die Dinge machen. Wir haben hier deine eigene Verbindung und hier ist unsere Steckdose an. Hier müssen wir in Ihrer Steckdose nachdenken. Warum ist das so? Da wir tatsächlich auslösen werden, erstellen Sie genug Spalte auf einem der Clients, was eigentlich innerhalb oder Angular-Anwendung bedeutet. Im nächsten Video werden wir einen Frontend-Pod mit dem Formular zum Erstellen einer Spalte erstellen. Und dann werden wir ein Ereignis für unser Socket IO ausgeben. Deshalb müssen wir uns hier diesem Inmitten anschließen. Unser erster Schritt wird darin bestehen, hier eine neue Veranstaltung zu erstellen. Und eigentlich möchte ich hier drei Ereignisse erstellen, weil wir eine asynchrone Operation haben, wir beginnen mit der Erstellung einer Spalte, dann haben wir Erfolg und Misserfolg. Und sie sagten, wir können nicht wirklich Fehler von der Socket IO bekommen. diesem Grund ist es sehr sinnvoll, alle unsere Veranstaltungen als Erfolg und Misserfolg von Start zu organisieren . Und im Falle eines Board-Beitritts brauchen wir es nicht. Wir brauchen nur ein einzelnes Ereignis, da es sich im Wesentlichen nicht um eine synchrone Operation handelt nicht um eine synchrone Operation bei der wir hier keinen Erfolg haben, aber wir haben es mit create another column. So ist es hier, Nennen wir es Columns grade. Und das ist eine Zeichenfolge, und wir können sie columns colon nennen und dann diese erstellen. Sie können sehen, dass ich die gleiche Notation wie hier oben verwende , wir haben eine Entität und sie ist Plural, und dann unser Verb, was wir jetzt hier machen, können wir diese Zeile zweimal einfügen , weil wir müssen hier erstellen, Spalten schaffen Erfolg und Spalten schaffen Misserfolge. Hier auf der rechten Seite haben wir Spalten mit camelCase erfolgreich sind, und hier Spalte create failure. Unsere Veranstaltungen sind also bereit und jetzt können wir unsere Serverstufen öffnen. Und hier wollen wir noch einen Socket aufschreiben. Also hier wollen wir jetzt darauf reagieren, dass Socket-Ereignisse in ihnen nicht vorhanden sind. Und hier haben wir Spalten grade, und es gibt einen zweiten Parameter, mit dem wir einige Daten bekommen , mit denen wir nicht einmal wissen , was diese Daten sind. Jetzt wollen wir hier drinnen unser Spalten-Steuerelement verwenden und wir haben es auch erstellt, aber wir hatten keine Socket-Informationen darin. Hier wollen wir eine neue Methode erstellen , die Create column heißt. Und wir geben genau das Gleiche hinein, was wir hier im Live-Board getan haben, zum Beispiel ist es ein Coma Socket gemeinsame Daten, in diesem Fall an allen Stellen, an denen der Code und alle Parameter geschrieben werden auf die gleiche Weise. Deshalb ist es einfacher, unsere Anwendung zu verstehen. Jetzt ist es an der Zeit, diesen Abschnitt innerhalb des Controllers zu erstellen . An dieser Stelle springen wir zurück in die Spalten unserer Controller. Hier haben wir Get-Kolumnen. Und eigentlich schreiben wir hier von Grund auf unsere neue Methode. Also hier haben wir unsere Konstante und es ist create column. Und das ist eine asynchrone Funktion, in genau alle Sachen abgerufen werden, wie wir sie zuvor bekommen haben. Zuallererst ist es also ein Garn und es ist Serum. Zweitens haben wir hier unseren Socket, den Socket, und der letzte sind Daten. Die Frage ist also, welche Daten wir erhalten, um eine Spalte zu erstellen? Und wir brauchen zwei Dinge. Zuallererst und Name der Spalte. Und zweitens unsere Board-ID. Dies sind die Informationen , die wir bereits in unser Modell geschrieben haben. Deshalb haben wir hier Body D und es ist eine Zeichenfolge. Und zweitens haben wir hier den Titel. Es ist auch eine Zeichenfolge. Und nur um Sie an den Moment zu erinnern , in dem Sie unsere beiden Eingänge hier sind, Socket, sollten Sie wissen, wie man es vom Typ eingibt Socket-Schnittstelle, nicht vom Socket-IO, weil wir müssen verwendet eine Benutzereigenschaft innerhalb dieser Schnittstelle. Und jetzt drinnen haben wir try-catch, genau wie immer, weil wir hier eine asynchrone Operation machen und innerhalb des Käfigs, was wir machen wollen, haben keinen Zugriff auf next, aber wir können hören etwas, das du zum Beispiel hier schreiben möchte ich socket Datta meet und wir werden in unsere Socket-Ereignisse E und M dot geworfen, und hier ist ein Fehler, also erstellen Spalten einen Fehler. Und zweitens möchte ich hier eine Botschaft zurückgeben. Aber das Hauptproblem ist , dass diese Sarah unbekannt ist und das völlig normal ist, weil wir im Fang sind, wir können nicht wissen, was die Sarah ist. diesem Grund müssen wir, wenn wir eine Nachricht aus dem Fehler lesen müssen, etwas Ähnliches versuchen. Hier wollen wir also unsere Fehlermeldung lesen und können überprüfen, ob unser Pfeil ein Beispiel für eine Ära sein muss. In diesem Fall können wir hier die Fehlermeldung lesen. Und in einem anderen Fall, in dem wir unseren Fehler hier einfach als zweiten Parameter stringieren möchten , können wir einen Einblick in unsere Fehlermeldung geben, die eine Zeichenfolge sein wird. In diesem Fall ist dies das bestmögliche Elternteil und sagt TypeScript. Sie können mit einem unbekannten Fehler in catch arbeiten. Aber hier ist das Problem. Wir werden diese einzelne Zeile in jede einzelne Aktion schreiben , wenn wir einen Fehler erhalten, und wir wollen eine Nachricht lesen und wir werden sie in jedem einzelnen Bild innerhalb von catch verwenden . Deshalb möchte ich diesen Code verschieben, um ihr zu helfen. Und wir haben unsere Helfer noch nicht. diesem Grund Quelle von Erkenntnissen. Lassen Sie uns Helfer dot ds erstellen und diese Methode zurück. Hier kann ich eine neue Methode erstellen , die eine Fehlermeldung erhält. Und wir bekommen hier unseren Fehler und er ist unbekannt. Das ist also genau das, was wir in Catch Butt Back bekommen. Wir wollen eine Zeichenfolge bekommen. Jetzt kann ich diese Zeile vollständig kopieren und hier einfügen. Brauche hier keine ständige Nachricht. Wir können diese einzelne Zeile einfach zurückgeben. Wie Sie sehen können, sieht es so aus. Wir bekommen hier Fehler unbekannt, wo Chicken Instanz von Error und gut geschrieben entweder Fehlermeldung oder String-Ära. Und jetzt können wir hier in unserer Säulentreppe diese Methode importieren. Deshalb können wir hier destrukturieren, eine Fehlermeldung erhalten und das kommt von unseren Helfern. Und jetzt können wir hier statt dieser Zeile hier schreiben, Fehlermeldung erhalten und wurden in unserer Ära bereitgestellt. Und jetzt ist dieser Helfer super schnell nutzbar. Jetzt müssen wir unseren Code innerhalb des Stammes schreiben. Also müssen wir zuerst prüfen, ob Burlington oder nicht. Wir machen das nur für TypeScript weil sie aufgrund der IOUs und unserer Middleware, die wir zuvor erstellt haben , hier eingeschlossen waren der IOUs und unserer Middleware, die . Aber hier müssen wir überprüfen, ob put keinen Socket-Punkt-Benutzer hat. Und nur um Sie an diese Socket-Schnittstelle zu erinnern, muss unsere Schnittstelle sein und nicht von Socket Ion. Hier drinnen können wir genau das gleiche Zeug ausstoßen. Also hier ist Steckdose und Fleisch und wurden in einer Steckdose bereitgestellt. Ereignisse, die ENM-Spalten erstellen, schlagen fehl. Hier drinnen können wir einfach die Zeichenkette schreiben user ist nicht autorisiert. Was also diese Zeile macht, wir senden eine Nachricht an unseren Socket, was bedeutet, dass wir einen Kunden haben und dieser Kunde eine Nachricht sendet, bitte erstellen Sie eine Spalte. Und dann entweder hier im Käfig, hier innerhalb des CIF wird nur an einen einzigen Kunden gesendet, der uns eine Nachricht sendet , diese Nachricht zurück. Und dieser Kunde kann auf diese Nachricht hören und etwas entsprechend tun. Und nachdem wir uns getroffen haben, können wir hier einfach eine Rückkehr anrufen , mit der wir nichts tun wollen. Aber wenn wir einen Socket-Benutzer haben, können wir unsere Spalte erstellen. Also versuchen wir hier, dass wir eine neue Spalte haben und um sie zu erstellen, müssen wir ein neues Spaltenmodell verwenden. Eigentlich Spalte Modellwelt mit dem umgekehrten hier oben. Also können wir es hier benutzen. Um also eine Spalte, das Modell, zu erstellen , müssen wir zunächst einen Titel liefern , und es ist ein Datenpunkttitel. Zweitens wollen wir hier die Board-ID angeben und es ist Theta Dot Board AT. Dies sind die gesamten Informationen von unserer Veranstaltung. Und zu guter Letzt ist unsere Benutzer-ID. Es ist eine Entzündung von der Socket Dot User Dot ID. Also hier haben wir erfolgreich eine neue Spaltennummer erstellt, in der Datenbank speichern müssen. Das ist mein hier. Holen wir uns unsere gespeicherte Kolumne zurück , weil wir auch hierher kommen wollen NAD. Und wir warten auf unsere neue Kolumne, die dot save erstellt wurde. Wir warten darauf, es in der Datenbank zu speichern. Und danach wollen wir diese Informationen nicht nur an unseren Socket senden . Wir möchten alle Personen, alle unsere Kunden, die unseren Vorstand abonniert haben, benachrichtigen . Was eigentlich bedeutet, dass wir diese Nachricht senden, nicht nur Vektor-Socket, wir senden diese Nachricht an viele Leute. Und wir können diesen Code mit Socket hier so schreiben. Es ist also nicht Socket Dot zwei und k im Inneren, wir stellen Datenpunkt AD zur Verfügung. Und nur um Sie hier vor Inboards zu erinnern wo wir Join-Code mit John Boyd geschrieben haben, hier geschrieben haben, Socket Join, Daten, Port-ID. Hier. Jetzt haben wir ein Zimmer mit einem d unseres Boards. Und jetzt können wir hier einige Daten für alle Benutzer treffen , die sich in diesem Raum mit I2 befinden. Hier ist unser Data Board AT dot m meet und wurde in unseren Socket-Events ENM bereitgestellt, und in diesem Fall wird es ein Erfolg sein. Dies ist meine Kolumne, die Erfolg schafft. Hier möchten wir auch die gesamten Informationen unserer gespeicherten Spalte bereitstellen . Und eigentlich ist das genauso wie die Verwendung von HTTP, aber diese Informationen werden an alle unsere Benutzer gleichzeitig weitergegeben , wenn sie dieses spezielle Board abonniert haben . Jetzt hier ohne schwierige Client-Logik möchte ich testen, ob es überhaupt funktioniert. Das ist y hier, zum Beispiel, nach unserem i2, möchte ich eine gespeicherte Spalte für das Konsolenprotokoll schreiben , damit wir überprüfen können, ob wir hierher kommen. Jetzt danach, möchte ich in unsere Kunden Quelle, App, Board, Komponenten, Board-HTML hier rein springen unsere Kunden Quelle, App, Board, Komponenten, Board-HTML , ich möchte nur zum Testen, um eine Schaltfläche zu erstellen wurde geklickt. Also klicken wir auf den Button und hier haben wir eine Testfunktion. Wenn wir jetzt auf den Button klicken, möchte ich diese Veranstaltung kennenlernen. diese Weise haben wir hier unsere Testfunktion und im Inneren möchte ich diesen Socket-Service Punkt und Fleisch schreiben diesen Socket-Service Punkt und und wurde innerhalb unserer Veranstaltung bereitgestellt. Und in unserem Fall ist es Spalten erstellen und es gibt einen zweiten Parameter, den wir hier ein Objekt mit pour the tea bereitstellen müssen , das diese Board-ID sein wird. Und zweitens muss der Titel für diese einzelne Zeile unserem Backend mitteilen, für diese einzelne Zeile unserem Backend mitteilen, dass wir diese spezielle Spalte für diesen Teil erstellen möchten . Jetzt können wir zum Backend springen und prüfen, ob es funktioniert. Wie Sie sehen können, haben wir keine Fehler in der API. Öffnen wir nun einen Browser und laden die Seite neu. Und wir sind hier auf unserer Single-Board-Seite. Hier drin ist ein Knopf. Und eigentlich habe ich vergessen, den Text in den Button zu schreiben. Also lass uns hier testen, damit wir wenigstens einen Button sehen können und dann einmal auf den Button klicken. Jetzt springen wir rein, winkte. Und tatsächlich bekommen wir hier die Spalte „Letzte Nachricht gespeichert“, was bedeutet, dass unser Backend unsere Anfrage erhalten hat. Und das passiert in unseren Service-Stufen mit diesem Code, bei dem wir die Spaltennote abonniert haben. Und dann auf der Seite, wo Colin, unser Spalten-Controller, eine Spalte erstellt , und innerhalb dieser Funktion überprüfen wir zunächst, ob wir eingesperrt sind. Danach generieren wir eine neue Spalte mit diesen Daten , die wir von der Veranstaltung erhalten haben. Dann haben wir diese Spalte gespeichert und die Nachricht an alle unsere Benutzer , die diesen Punkt abonniert haben. Wir werden diesen Code im nächsten Video eingehend testen. Aber wie Sie hier sehen können, ist meine ständig gesperrte gespeicherte Spalte. Und genau das sehen wir hier im Konsolenprotokoll, was bedeutet, dass wir unsere Arbeit zwischen Socket auf dem Client und Socket im Backend erfolgreich implementiert Arbeit zwischen Socket auf haben. Und in Bezug auf die Erstellung unserer Kolumnen. 33. Spalten erhalten: Im vorherigen Video haben wir erfolgreich das Nomen-Backend vorbereitet ein Off unserer Kolumne erstellt. Bevor wir jedoch das Inline-Formular implementieren , um eine Spalte auf dem Client zu erstellen, müssen wir zumindest unsere Boards-Seite erstellen, da sie vorerst vollständig leer ist und auch unsere Spalten rendern. diesem Grund möchte ich als Erstes auf unserem Kunden die Schnittstelle für den Kegel erstellen, da wir sie noch nicht haben. diesem Grund müssen wir uns für Sets, Quellen und gemeinsam genutzte Typen einsetzen . Und hier müssen wir die Spaltenschnittstelle Ts erstellen. Und lassen Sie uns hier unsere neue Oberfläche ausprobieren, bei der es sich um eine Spaltenschnittstelle handelt. Und im Inneren bekommen wir zuallererst NAD, was eine Zeichenfolge ist. Zweitens bei title, was eine Zeichenfolge ist. Und zuletzt hat es erstellt, was eine Zeichenfolge ist. Und eigentlich bekommen wir auch hier einen aktualisierten Kopf , der auch eine Zeichenfolge ist. Unser nächster Schritt besteht darin, einen Service mit der Methode zu erstellen , mit der alle Spalten für dieses spezielle Board abgerufen werden. Und eigentlich haben wir hier keinen solchen Service. Wir haben nur einen Boards-Service , einen zustandslosen Dienst nur mit Methoden wie Boards bekommen, sich langweilen, Boards erstellen und so weiter. Wir müssen genau das Gleiche tun. Aber für Spalten möchte ich aus diesem Grund hier Spalten erstellen, Service Dot ts. Und wie Sie sehen können, wo in AP geteilt wird und nicht im Board. Jetzt hier zunächst injizierbar mit Biomasse-Merkmalen und zweite Schleife, um unsere Klasse zu exportieren, die unser Säulen-Service sein wird. Jetzt müssen wir Sie dem Kunden vorstellen, da wir Anfragen stellen, um eine Liste unserer Spalten zu erhalten. Das ist so hier. Zuallererst müssen wir einen Konstruktor schreiben. Und hier bekommen wir ein HTTP, das ein HTTP-Client ist. Das reicht. Nobu muss die Methode get columns erstellen, die für uns Spalten aus dem Backend liefert, und im Backend haben wir diese Methode bereits erstellt. Hier müssen wir hier zuallererst eine Board-ID besorgen. Dies ist eine eindeutige Kennung, um eine Liste von Spalten für dieses spezielle Board zu erhalten. Und zurück bekommen wir ein Array unserer Spalten, offensichtlich als Observable, weil es immer von HTTP ist, wo Observables abgerufen werden, hier beobachtbar von der Spaltenschnittstelle und vergessen Sie nicht, dass es ein Reihe. Jetzt machen wir hier drinnen genau das Gleiche wie an Bord. Wenn Sie also nicht alles erneut eingeben möchten, können Sie einfach kopieren und einfügen, um sich zu langweilen, und schon kann es losgehen. Der Code ist sehr ähnlich. Also wollen wir hier zunächst eine URL erstellen, und hier möchten wir zunächst unseren DOD-API-URL-Slash für die Umgebung zusammenführen . Hier haben wir unseren Boards Schrägstrich n. Hier wollen wir Board-ID-Schrägstrichspalten injizieren. Und danach müssen wir nur noch eine HTTP-GET-Anfrage stellen. diesem Grund möchte ich hier dieses http.get zurückgeben und wir müssen das zurückgeben, wo unser Spalten-Interface-Array bekommen. Und hier drinnen geben wir unsere URL an. Und mit diesem Code erhalten wir unsere Spalten für ein bestimmtes Board. Und jetzt ist es an der Zeit, den Service in unserer Komponente zu nutzen . Aber dafür müssen wir in unser App-Board springen , Board-Molekül. Und der Input hier innerhalb der Anbieter ist in Ihrem Dienst und es wird unser Säulen-Service sein. Jetzt können wir hier in Komponenten, Board, Board-Komponente springen und diese Daten hier abrufen. Jetzt wollen wir hier in unseren Abrufdaten unsere Spalten abrufen. Aber für diesen Insider-Konstruktor müssen wir diesen Dienst injizieren. Und es war columns service, das ist ein Columns-Service , den wir gerade erstellt haben. Jetzt können wir hier in unsere Abrufdaten springen und hier this.com Service Get Columns verwenden. Das ist genau die Methode , die wir gerade entwickelt haben. Und hier drinnen stellen wir jetzt an dieser Stelle diese Informationen bereits zur Verfügung. Aber hier wollen wir genau das Gleiche machen, aber wir wollen diese Spalten nicht direkt hier in der Komponente speichern . Dafür haben wir bereits unseren Boardservice geschaffen. Darin können wir all diese Informationen speichern. Deshalb können wir hier schreiben, abonnieren und wir bekommen unsere Kolumnen zurück. Und was wir mit Spalten machen wollen , die wir hier in Ihrer Methode benötigen, diesen Board-Service, DOD, zum Beispiel, setzt Spalten. Und drinnen werfen wir unsere Liste von Spalten. Und jetzt müssen wir nur noch diese Methode implementieren set-Spalten. Hier öffnen wir die Boards Services , unseren Boardservice. Und wir machen genau das Gleiche wie hier. Wir sagten Vorstand. Also hier sind eingestellte Spalten. Wir erhalten unser Array von Spalten, dem es sich um ein Spalten-Interface-Array handelt. Hier bekommen wir eine große Lücke und wir brauchen hier einen neuen Datenstrom. Hier kann ich unseren Boss-Stream kopieren, einfügen und ihn als Spaltenstream bezeichnen. In diesem Fall kann jeder einzelne Ort unserer Bewerbung, wenn wir dieses Board verwenden, wenn wir dieses Board verwenden, abonnieren und die Liste der Spalten abrufen , die wir jetzt haben. Und tatsächlich wird dies ein Verhaltensthema des Column-Interface-Arrays sein. Und wir müssen hier jetzt nicht angeben, da wir hier standardmäßig einfach ein leeres Array bereitstellen können. Und jetzt können wir in unserer set columns-Methode diese Punktspalten einfach dot next nennen. Und wir bieten Einblicke in Spalten, die vorab abgerufen wurden. Kehren wir nun zu unserer Komponente zurück und lesen diesen Stream. diesem Grund haben wir hier oben bereits dieses Board, Dollar, das ein Stream ist. Und jetzt müssen wir Spalten erstellen. Dollar, ein String für unsere Spalten, und es ist ein beobachtbares für Spalten-Interface-Array. Und jetzt können wir hier direkt nach diesem Punkt schreiben , diese Punktspalten. Und hier verwenden wir diesen Board Service Dot. Und hier haben wir unsere Kolumnen. Wir brauchen hier keinen Boolean Pipefilter , da dies einfach ein Array ist. Es ist entweder leer oder älter, das Feld mit unseren Spalten, die Hauptidee ist, dass wir keine Streams haben und wir sie direkt im HTML verwenden können. Aber hier möchte ich dir eine noch bessere Variante zeigen, denn eigentlich haben wir hier schon zwei Streams später. Wir werden eine weitere für Aufgaben haben, was bedeutet, dass wir drei verschiedene Datenquellen haben und wir unsere Seite rendern möchten , wenn alle Datenquellen erfüllt sind. diesem Grund können wir diesen Code ein bisschen anders umschreiben . Wir können hier diese Punktdaten mit größer schreiben. Und das ist eine spezielle Notation, die ich verwende. Dies ist eine sehr beliebte Variante, wie Sie Ihre Daten für Ihre Komponente verwalten können. der Regel haben Sie eine Seite mit vielen Datenquellen und möchten diese in einem einzigen Stream kombinieren. Und dann kannst du die ganze Seite nur ausführen , wenn du alle Streams erfüllt hast. Und wir werden den Stream mit den Daten erfüllen , wenn wir Sie in Ihre Daten aufnehmen. Hier möchte ich kombinierte neueste schreiben und wurde in einer Reihe von Streams und Festivals bereitgestellt . Hier können wir diese Zeile mit Boards Stream kopieren und einfach hier einfügen. Und danach nehmen wir diese Port-Service-Spalten und fügen sie auch hier ein. Offensichtlich müssen wir direkt hier Komma, denn das sind zwei verschiedene Streams. Die Hauptidee ist, dass wir die Streams kombinieren. Und hier wollen wir das mit pipe und map machen, weil wir das tatsächlich als Array bekommen und die wollen ein Objekt hier, das ist y. Hier innerhalb der Map können wir die Struktur direkt steuern, zuallererst, ein Brett und hier ist Ordnung wichtig. Zweitens haben wir hier Kolumnen. Danach wollen wir die Daten in einem anderen Format als Objekt zurückgeben . Und hier kehren wir zuallererst an Bord zurück und zweitens unsere Kolonnen. Also was macht dieses Ding überhaupt für uns. Also bekommen wir hier Daten, was eigentlich bedeutet, dass wir hier keine zwei Streams benötigen. Wir können jetzt hier erstellen und Stream-Daten verwenden. Und das sind die gesamten Daten für unser Bauteilboard. Jetzt sagen wir hier, dass dies ein Observable des Objekts ist. Und zuallererst haben wir hier ein Board, das eine Board-Schnittstelle ist. Und zweitens bekommen wir hier unsere Spalten, denen es sich um ein Spalten-Interface-Array handelt. Und jetzt können wir Board Dollar und Columns Dollar entfernen, wir brauchen sie nicht mehr. Der Hauptpunkt ist, dass unsere Logik darin bestand, Daten abzurufen und in diesen Daten festzulegen, dass der Wortdienst dort bleibt. Dies ist nur eine Kombination aus zwei Streams, um diese Daten für unsere Komponente abzubilden. Jetzt stellt sich die Frage, wie wir diese Daten in unserem HTML verwenden werden . Hier möchte ich alles entfernen und eigentlich auch hier den Test auf der Unterseite entfernen. Wir brauchen es überhaupt nicht. Jetzt möchte ich einen Marker für unsere Seite schreiben. Zunächst möchten wir hier die obere Leiste unserer App rendern. Es ist schon da. Danach lassen Sie uns das Board ausführen. Also hier werden wir div class board haben, und hier ist ein Trick, den wir hier in GE verwenden, aber wir liefern Insight Data Dollar, das ist unsere kombinierte neueste Synchronisation als Daten, und das ist es. Die Hauptidee ist, dass wir nicht mehr mit Streams im Inneren arbeiten. Wir arbeiten mit Daten als lokalem Eigentum. Und das wird für uns eine lokale Immobilie direkt in diesem Div schaffen . Jetzt wollen wir hier zunächst unseren Board-Header-Container erstellen. Hier ist der Div-Klasse-Board-Header-Container. Und schließen wir dieses Div. Aber wir werden das späte ausführen Insight ist ein Inline-Formular für die Aktualisierung unseres Boards. Hier schreibe ich einfach eine Inline-Formularbindung, damit wir sie nicht vergessen. Danach werden wir unser div mit den Klassenspalten rendern und innen möchte ich eine G for -Schleife für jede einzelne Spalte erstellen . Das ist hier y, Klassenspalte und dann G4. Und hier können wir eine Lead-Spalte von Datenpunktspalten schreiben. Wie Sie hier sehen können, benötigen Sie keine asynchronen Pipes, da wir unsere Dateneigenschaft auflösen und diese Daten darin erhalten, und diese Daten werden automatisch aktualisiert, wenn die Der Stream von Spalten wird ebenfalls aktualisiert. Hier schließen wir unsere Spalte und dann wollen wir unseren Div-Klassenspaltentitel rendern. Jetzt drinnen werden wir noch einen Spaß haben. Dies ist hier in Zeilenform zum Aktualisieren der Spalte. Und nach dieser Kolumne haben wir noch eine in Linienform. Also hier haben wir ein Inline-Formular zum Erstellen einer Spalte. Das ist also unser grundlegendes Markup. Eigentlich haben wir hier nicht viel gerendert, aber zumindest rendern wir hier bei Spalten, die wir aus unseren Daten erhalten. Prüfen wir, ob es funktioniert. Ich springe zur Konsole und wir erhalten eine Fehlermeldung. Epitope ist für uns nicht verfügbar, daher müssen wir es in unser Board-Modul importieren. Also hier in den Eingängen können wir einfach das obere Balkenmodul hinzufügen. Wie Sie jetzt sehen können, habe ich keine Fehler, also laden wir die Seite neu. Eigentlich ist es schon da. Wir können unsere schöne obere Bar sehen. Hier sind einige Platzhalter und das sind eigentlich schon unsere Kolumnen. Und ja, wir sind beim Titel nicht nur zum Testen im Trend, wir können es sehr schnell machen. Lass uns wieder in unser Board springen, und hier ist der Titel für unsere Kolumne. Anstatt eines Inline-Formulars zum Aktualisieren der Spalte können wir hier einfach den Spaltenpunkttitel rendern. Ich lade die Seite hier neu, wir bekommen die erste Spalte und das erste Formular. Dies sind genau diese beiden Spalten , die bereits erstellt wurden. Zuallererst in der Konsole von MongoDB. Und zweitens in der letzten Vorlesung, in der wir mit der Veranstaltung erstellt haben , unsere neue Kolumne. Und sie empfehlen Ihnen dringend, kombinierte neueste Daten zu verwenden , um Daten wie diese in all Ihren Anwendungen zu kombinieren. Dies ist äußerst effizient und skalierbar. 34. column erstellen: In früheren Videos waren wir erfolgreich Event-ID-Spalten für unser Board und jetzt können wir mit Formular für unsere Kolumne erstellen fortfahren. Und nur um Sie daran zu erinnern, dass wir im Backend bereits die gesamte Logik implementiert haben, wir im Backend bereits die gesamte Logik implementiert um eine Spalte mithilfe von socket a yarn zu erstellen, und jetzt müssen wir sie nur noch auf dem Client implementieren. Und zunächst möchte ich mit etwas HTML beginnen. Und eigentlich sind wir hier bereits vorbereitet Inline-Formular zum Erstellen von Spalten. Genau hier wollen wir unsere Inlandsfirma einsetzen und wir haben sie bereits. Wir müssen nur die richtigen Daten liefern. Hier schließen wir unser Inland-Formular anstelle der Nachricht. Und was müssen wir jetzt hier geben? Zuallererst müssen wir eine Klasse festlegen. Und nur um Sie daran zu erinnern, dass dies eine übergeordnete Klasse mit Stilen ist, die wir für unser Inline-Formular für diesen speziellen Fall hier außer Kraft setzen Unsere Klasse wird ein Spaltenformular erstellen. Danach wollen wir einen Standardtext festlegen. Das werden wir standardmäßig sehen, und es ist der Text, zumindest auch hier, zumindest auch hier, wir müssen eine Schaltfläche zum Absenden dieses Formulars rendern. Deshalb können wir hier schreiben , dass wir seine Button-Eigenschaft wollen. Und es ist wahr, dass wir danach unseren Schaltflächentext bereitstellen möchten, und dieser Text wird es zumindest sein. Also hier wollen wir unseren Standardplatzhalter ändern. diesem Grund können wir hier einen Eingabe-Platzhalter schreiben, und hier können wir den Namen der Add-Spalte schreiben. Und zu guter Letzt ist natürlich hier handle submit. Und dies ist ein Callback , bei dem wir einen Titel unserer Kolumne erhalten , die wir erstellen möchten. Also hier möchte ich eine neue Methode hinzufügen, die Create column heißt und dann Site, wo unser Titel durch Ereignis abgerufen wird. Und das Letzte , was wir tun müssen, ist, dass wir diese Grade-Spaltenfunktion in unserem Board erstellen müssen . Hier bekommen wir einen Titel als Sorte von unserem Inland Forum. Und hier ist innen nichtig und sie wollen nur hier protokollieren, Spalte erstellen und einen Titel sehen. Laden wir die Seite neu und schauen uns an, wie sie funktioniert. Und eigentlich bekommen wir hier eine Nachricht. Inline-Formular ist kein bekanntes Element unseres Moduls. Hier müssen wir wieder in unser Board-Modul springen. Und hier in den Eingaben möchten wir unser Inline-Formularmodul eingeben. Wie Sie im Browser sehen können, haben wir jetzt einen neuen Button. Zumindest können wir auf diesen Button klicken. Und wir sehen jetzt unsere Eingaben, die gestylt sind, und unsere mindestens Taste. Und wenn Sie sich fragen woher alle Stile kommen, wie er Ihnen zuvor gesagt hat, wie er Ihnen zuvor gesagt hat stylen wir alle Inline-Formularelemente mit unserem übergeordneten und dynamischen Fall hier wurde es erstellt spalten-Formular. Hier können Sie die Stile zum Erstellen von Spaltenformularen und dann zur Inline-Bearbeitung von Formularcontainern sehen . Deshalb ist unser Formular so teilbar. Und jetzt überprüfen wir, ob wir eine neue Spalte hinzufügen können. Hier tippe ich etwas, zumindest schlage ich zu. Und in der Konsole können wir unsere Kreditspalte und unseren Titel der Spalte sehen , was eigentlich bedeutet, dass wir hier ein Ereignis für unseren Socket ausgeben können , für unser Back-End, aber ich möchte es wirklich besser machen. Ich möchte unseren Input spezifizieren. diesem Grund haben wir hier in solchen geteilten Typen Board und Column, aber ich möchte einen Input erstellen. Was heißt das? Genau wie wir in unseren Eulentypen hatten, hatten wir hier eine Anmeldeanfrage und eine registrierte Anfrage, die im Wesentlichen ein Teil unserer Anfrage ist. Normalerweise möchten wir es entweder als Anfrage benennen oder vielleicht möchten Sie eine Worteingabe. diese Weise können wir hier bei gemeinsam genutzten Typen unsere Spalteneingabe erstellen oder Sie können sie auch als Spaltenanforderung bezeichnen. Nehmen wir an, dies ist die Spalteneingabeschnittstelle Ts, und dies sind die Daten, die wir für das Back-End bereitstellen müssen , um unser Ereignis zu senden. Und hier wollen wir es innerhalb einer Schnittstelle spezifizieren. In der gesamten Anwendung wird also wissen, wie wir Ihre Spalte erstellen. Das ist so hier, Nennen wir es Column Input Interface und die Hauptunterschiede, es ist keine ruhige Schnittstelle, es ist Eingabe. Deshalb ist es ein Körper. Und hier haben wir unseren Titel, der eine Zeichenfolge ist. Das müssen wir für unser Backend sorgen. Und zweitens eine Board-ID, die ebenfalls eine Zeichenfolge ist. Und jetzt können wir diese Eingabeschnittstelle in unserer Board-Komponente verwenden . Hier können wir also anstelle des Konsolenprotokolls unsere Spalteneingabe erstellen und wir wissen, dass der Typ hier ist, Spalteneingabe, und hier müssen wir jetzt alle möglichen Werte angeben. In unserem Fall ist es nur ein Titel. Und zweitens Vorstand, AD und Körper. Haben wir innerhalb dieser Punkt-Port-ID? Und wie Sie hier sehen können, haben wir einen richtigen Typ, und jetzt müssen wir ihn in unsere Socket-IO werfen. Das ist hier, diese Spalte Service Punkt erstellen Spalte. Und eigentlich haben wir hier keine create column-Methode. Deshalb müssen wir es schaffen. Ich möchte in unsere Shared Services-Kolumnen springen. Und hier haben wir gerade eine Kolumne bekommen. Hier wollen wir einen Kegel erstellen. Aber diese Methode wird mit diesem GTP nichts anfangen. Es wird unser Socket IO verwenden, und das ist völlig normal, während die späten, all diese Methoden innerhalb unserer Dienste und wir einfach unsere Dienste aufrufen. Das ist so hier, Lass uns die create column Methode machen und wir bekommen hier unsere Spalteneingabe. Das ist wirklich nett, dass hier eine Schnittstelle erstellt wurde. Hier können wir es wiederverwenden und es wird unsere Spalteneingabeschnittstelle sein und zurück werden wir void bekommen. Und nur um Sie hier mit HTTP daran zu erinnern, holen Sie sich immer ein Observable zurück. Aber in der Socket-Layer wird es so nicht funktionieren. Mit Socket haben Sie einen einzigen Datenfluss. Hier ist das Einzige, was wir tun wollen , unsere Emission auszulösen. Aber dafür müssen wir hier unseren Socket-Service injizieren, und dies ist unser Socket-Service, den wir erstellt haben, und wir können ihn jetzt innerhalb dieser Methode verwenden. Also dieser Punkt, Socket Service Punkt und treffen sich, und wir müssen hier einen Namen geben. Lassen Sie uns also zuerst überprüfen, ob wir einen solchen Namen in unseren gemeinsamen Typen haben, wir Socket-Ereignisse haben, und hier haben wir nichts. Und tatsächlich können wir diese Enumeration im Back-End öffnen , weil interne Typen aber auch Socket-Ereignisse haben. Und hier haben wir Spalte erstellen, Erfolg und Misserfolg, und es ist genau dasselbe. Deshalb werde ich es komplett kopieren und einfügen. Und jetzt können wir es hier anstelle des Ereignisnamens verwenden, wir können hier schreiben Socket-Ereignisse ENM enden hier nicht. Wir wollen die Spaltenbewertung auslösen und sie dann als Parameter speichern. Wir möchten unserer Spalte einen Input geben. Es gibt uns einen weiteren Vorteil, unseren Code mit Socket innerhalb des Dienstes zu schreiben . Wir isolieren diesen Code innerhalb eines Dienstes. diesem Grund weiß unsere Komponente nicht , dass wir hier zum Beispiel Socket-Layer verwenden Wir nennen hier einfach die Spalte Service Dot Grade Column, und wir werden in unserer Spalteneingabe angegeben. Prüfen wir, ob es hier funktioniert, wir können versuchen, eine neue Spalte zu erstellen. Ich klicke auf Hinzufügen. Und jetzt können wir in unserer winkenden Spalte die gerettete Spalte sehen. Und nachdem Sie die Seite neu geladen haben, können Sie hier sehen, dass der Kegel erstellt wurde, was im Wesentlichen bedeutet, dass er funktioniert, aber wir aktualisieren unsere Seite nicht im laufenden Betrieb. Und natürlich möchten wir diese Seite zunächst für unseren aktuellen Benutzer aktualisieren , zweitens auch für alle anderen Benutzer. Dafür müssen wir jedoch unseren Socket-Service verbessern. Warum ist das so? Denn was wir eigentlich innerhalb der Front tun müssen, müssen wir uns auf komfortable Weise für unseren Erfolg anmelden. Und nur um Sie daran zu erinnern, in unserem Backend, hier in den Controller-Spalten, wir in unserem Backend, hier in den Controller-Spalten, ein Treffen haben und tatsächlich sind dies Ihre beiden, die diese Nachricht an alle Benutzer senden , die abonniert sind zu diesem speziellen Raum. Deshalb müssen wir das tun. Wir möchten dieses spezielle Ereignis abonnieren, das die Erstellung einer Spalte erfolgreich sein wird, aber wir wollen es ineffizient machen. Und dann sagte Socket-Schicht, es ist nicht effizient. Wir wollen es auf Angular-Art machen. diesem Grund müssen wir unseren gemeinsam genutzten Service, den Socket-Service, öffnen . Und hier möchte ich nach dem Treffen eine weitere Methode erstellen und sie heißt Listen here. Zuallererst möchte ich es hineinschreiben. Und wenn Sie nicht wissen, wie man Generika verwendet, Die Hauptidee hier ist, dass wir jeden Datentyp für die Bindung innerhalb des Hörens bereitstellen können , und es wird das sein, was wir von der Socket-IO zurückbekommen. Also hier stellen wir t zur Verfügung und hier wird der Ereignisname eine Zeichenfolge sein. Und zurück möchte ich von t beobachtbar werden. Und das ist im Grunde die Idee. Diese Methode gibt uns ein Beobachtbares zurück. Es ist nicht bequem, mit Socket Layer innerhalb des Winkels zu arbeiten. Deshalb wollen wir es hier auf Observable umstellen. Zunächst einmal gut, um zu überprüfen, ob wir Socket IO haben oder nicht. Deshalb kann ich diese if-Bedingung hier kopieren, denn wenn wir keinen Socket haben und du verbunden bist, dann sollten wir nichts tun. Danach. Ich möchte ein neues Observable zurückgeben. Und hier drinnen müssen wir eine Funktion bereitstellen. Und hier haben wir nur ein einziges Argument , das ein Abonnent ist. Und jetzt können wir es drinnen trocknen. Steckdose an. Dies ist nur ein einfacher Code von Socket Ion. Hier haben wir unseren Eventnamen, was bedeutet, dass wir den Client für diesen Ereignisnamen abonnieren , den wir als Parameter übergeben haben. Hier ist unser zweiter Parameter, hier bekommen wir einige Daten und was wir tun wollen, wir wollen unseren Abonnenten als nächstes mit den Daten ausgeben. Also was macht dieser Code überhaupt? Zuallererst müssen wir dies und das hier versuchen, Sie können sehen, dass wir einen Fehler bekommen. Objekt ist möglicherweise nicht definiert. Und tatsächlich ist das ein TypeScript-Problem, denn hier kann er nicht verstehen, dass dieser Code mit Eve es undefiniert abdeckt. Was wir stattdessen tun können, können wir hier schreiben con socket entspricht dem Socket. Und danach decken wir diesen Sockel hier ab. Und dann anstelle dieser Schaltung, wo nur Socket verwendet wird und in diesem Fall wenn nicht, bekomme ich es im TypeScript-Theorem. Was ist also die Idee dieser Funktion? Wir werden es so benutzen. Also hier ist zuhören. Dann stellen wir einen Datentyp bereit, zum Beispiel einen String. Und danach hier zurückziehen und Event, zum Beispiel Spalte erstellen oder Spalte schafft Erfolg. In unserem Fall, dieser einzigen Linie, wird es uns ein Beobachtbares zurückgeben. Deshalb können wir danach schreiben, zum Beispiel abonnieren und hier, und wir werden hier unsere Daten bekommen. Sie werden gleich sehen, wie wir diese Funktion verwenden werden. Die Hauptidee ist, dass diese Funktion schnell und beobachtbar ist. Wir werden mit Socket Layer diesen speziellen Ereignisnamen abonnieren . Und wenn dieses Ereignis ausgelöst wird, werden wir einfach unser Observable aktualisieren. Dies ist eine wirklich bequeme eckige Art , Dinge mit Socket Layer zu tun. Versuchen wir nun, diese Funktion zu verwenden. Ich möchte zurückspringen und sagen , dass unsere Board-Komponente, und hier haben wir unsere initialisierten Zuhörer. Und hier ist ein wirklich netter Ort, um sich die Ereignisse anzuhören. diesem Grund möchte ich hier diese Dot-Socket-Service-Dot-Lektion schreiben . Und hier müssen wir den Typ angeben , da er obligatorisch ist. Und hier werden wir das nicht bieten. Wir bekommen unsere Kolumnen-Oberfläche zurück. Das bekommen wir nach dem Erstellen der Spalte. Und hier ist unser Veranstaltungsname und wir möchten hier abonnieren Socrative endet in einer Punkt-Spalte schafft Erfolg, weil wir auf den Erfolg warten. Und hier, danach können wir schreiben, abonnieren Sie einfach und wir bekommen hier eine Kolumne. Und hier können wir diese Spalte einfach protokollieren. Also noch einmal, was diese Linie tut, sie schafft für uns ein neues Observable und wir können es einfach als Observable verwenden. Am wichtigsten ist, innen wo rechts und Steckdose an. Also warten wir auf unsere Emission. Lassen Sie uns jetzt überprüfen, ob es hier funktioniert, ich möchte eine neue Spalte erstellen und ich schlage zumindest zu. Und Viola, wie Sie in der Konsole sehen können, bekommen wir unsere Kolumne. Und eigentlich ist das dieser Code mit dem Erfolgsereignis. Und hier bekommen wir genau unsere Spalte, die in der Datenbank gespeichert wurde , denn wie Sie sehen können, ist hier eine 80 unserer gespeicherten Spalten. Und jetzt können wir etwas auf dem Client tun, um die Schleife zu aktualisieren, ist viel ambulant unser Board, aber es ist nicht groß, wie Sie hier sehen können. Ich habe denselben Tab für denselben Benutzer geöffnet. Aber der Unterschied ist , dass der Socket hier anders ist , weil wir jedes Mal wenn wir eine neue Registerkarte öffnen, aber eine neue Verbindung mit einem anderen Socket-Ion herstellen. Deshalb werden wir versuchen, eine Liste hinzuzufügen, wenn wir hier sind. Und ich schlage gerade hier, zumindest bekommen wir hier dieses Spaltenkonsolenprotokoll. Aber eigentlich bekommen wir hier auch dieses Spaltenkonsolenprotokoll da dies zwei separate Registerkarten sind, zwei separate Benutzer, was eigentlich bedeutet, ob zwei verschiedene Clients sein werden verbunden und dieses Board öffnen, erhalten sie gleichzeitig unsere Veranstaltung zur Erstellung einer neuen Kolumne. Und das ist im Wesentlichen die Kernfunktionalität, die wir innerhalb des Socket-Ions erreichen wollen. Jetzt müssen wir eine Liste unserer Kolumnen irgendwie ändern. Und eigentlich ist das hier so. Ich möchte diesen Dotboard-Service schreiben und vorsichtig sein, nicht schlecht, es ist nicht unser staatenloser Service mit Funktionen, sondern unser Board-Service für den Kunden. Hier müssen wir eine neue Methode erstellen , die Add Column heißt. Und wir können einfach in unsere Kolumne werfen, was im Wesentlichen bedeutet, dass unsere Komponente nichts über Geschäftslogik weiß, wie man mit Spalten in unserem Board arbeitet, weiß es. Deshalb müssen wir hier in unseren Board-Service springen und können hier eine neue Funktion erstellen , die ABC-Spalte genannt wird. Und hier kommen wir auf Ihre Spalte vom Typ, Spaltenschnittstelle und zurück wir werden ungültig, weil wir uns nicht um die Rückkehr kümmern. Wir müssen lediglich unseren Stream aktualisieren. Und nur um Sie daran zu erinnern, dass wir hier oben einen Stream unserer Kolumnen haben. Und jetzt müssen wir das irgendwie aktualisieren. diesem Grund möchten wir, was wir hier schreiben können, zunächst unsere Kolumnen aktualisieren. Das ist y. Lassen Sie uns hier aktualisierte Eigenschaftsspalten erstellen. Hier müssen wir zunächst das verbreiten , was wir jetzt haben. Und das ist dieser Kolumnen-Stream. Und hier haben wir eine Funktion getValue, und sie liest nur den Wert aus unserem Stream, den wir derzeit haben. Und am Ende müssen wir in Ihre Kolumne schreiben. Das wird also unser neues aktualisiertes columns-Array sein. Wie Sie sehen können, ist der Typ korrekt. Dies ist ein Array von Spalten und Schnittstellen, und jetzt können wir es einfach mit diesen Spalten als nächstes aktualisieren. Und hier werfen wir aktualisierte Kolumnen auf der Website ein. Also erstellen wir einfach in Ihrem Array und schreiben es in unseren Stream. Prüfen wir, ob es funktioniert. Ich lade die Seite neu. Hier am Ende haben wir mindestens einen Button und tatsächlich sieht er irgendwie kaputt aus, weil er herausgezoomt ist. Jetzt erstellen wir hier eine neue Spalte. Ich klicke auf Liste bearbeiten. Und wie Sie direkt hier sehen können, sehen wir unsere neue Spalte, was bedeutet, dass dieser Code unseren Stream aktualisiert und dann unsere Komponente den Stream hier oben abonniert hat kombiniert spätestens, diese Spalten werden aktualisiert. Und dann senden wir diese Komponente automatisch erneut. Noch einmal, wie funktioniert das alles? Zuallererst bekommen wir hier unsere Firma im Inland. Und diese Firma im Inland produziert für uns nur den Titel. Danach erstellen wir dieses Objekt mit title und Boyd AD und werfen es in unseren Column-Service. Hier ist unsere Kreditspalte. Hier treffen wir unsere Veranstaltung und werfen unsere Daten ein, nachdem dieses Backend dieses Ereignis empfangen hat, erstellt für uns die Spalte und die Mittel für alle Benutzer in diesem Raum, in diesem Forum, die Nachricht dass wir unsere Kolumne erfolgreich erstellt haben. Und danach wird jeder einzelne Kunde von Anfang an mit diesem Code abonniert . Toller Erfolg. Und wenn es passiert, kommen wir hier, unsere Kreditspalte, und wir sind Doppelpunkt hier, aber Service, um eine Spalte hinzuzufügen. Und dadurch wird im Wesentlichen ein Stream mit den Spalten aktualisiert. Und unsere Komponente wird für alle unsere Kunden aufgezogen. 35. Erstellen einer grundlegenden Aufgabe: Im vorherigen Video haben wir die Erstellung unserer Säulen erfolgreich abgeschlossen. In diesem Video fangen wir an, an Aufgaben zu arbeiten. Und tatsächlich müssen wir den Back-End-Teil der Erstellung der Aufgaben und des Abrufs einer Aufgabenliste für unser Board implementieren Erstellung der Aufgaben und . Und denken Sie tatsächlich, dass es eine gute Möglichkeit für Sie ist, es selbst umzusetzen. Denn eigentlich hast du in diesem Projekt schon kleine Risse gemacht. Und jetzt bist du bereit , etwas Größeres zu tun. Und tatsächlich eine Liste von Aufgaben zu erhalten und eine Aufgabe zu erstellen , ist unseren Spalten sehr ähnlich, was bedeutet, dass Sie die gesamte Logik von dort aus verwenden können. Was müssen Sie also tun, wenn Sie es selbst umsetzen möchten? Zuallererst sprechen wir hier über winkte. Wir müssen also eine neue Schnittstelle für unsere Aufgabe erstellen, dann die Model-Controller-Methode, um diese Aufgaben für die Jungs zu erhalten , und die Methode insert steuert sie, um eine Aufgabe zu erstellen. Die Frage ist, welche Bereiche brauchen wir in unserer Aufgabe? Und eigentlich möchte ich hier nur schreiben , welche Felder wir brauchen. Zunächst einmal ist es ein Titel unserer Aufgabenbeschreibung , der nicht verpflichtend ist. Sie kann leer sein. Verwenden Sie dann 3D, damit wir wissen, wer diese Aufgaben-Spalten-ID erstellt hat. Wir wissen also, in welcher Spalte unseres Vorstands wir diese Aufgabe und die zusätzlichen AT an Bord verfolgen müssen. In diesem Fall ist es für uns einfacher, alle unsere Aufgaben anhand einer bestimmten Board-ID zu erledigen . Im Backend benötigen Sie eine Schnittstelle und ein Modell und registrieren sich dann in Ihrer API, registrieren sich dann in Ihrer API um diese Aufgaben innerhalb des Boards zu übernehmen. Und die Methode, um diese Liste von Aufgaben nach gefallenem Board zu erhalten. Außerdem müssen Sie eine neue Erstellungsmethode auch in unserem Controller erstellen. Und es wird eine Methode mit Socket Yacht sein da wir alle unsere Benutzer , die dieses spezielle Board abonniert haben, über diese neue Aufgabe informieren möchten , die dieses spezielle Board abonniert haben . Und wenn du alleine weitermachen möchtest, kannst du das Video jetzt einfach pausieren und ausprobieren. Aber wenn du einfach mitmachen willst, lass es uns zusammen machen. Und das alles wird gesagt. Es wird unseren Kolumnen sehr ähnlich sein. Deshalb werde ich viel kopieren und einfügen. Zuallererst möchte ich hier in unsere Serverquelltypen springen . Und hier haben wir unseren Spaltenschnittstellentest. Und tatsächlich können wir es vollständig kopieren, einfügen und einfach unsere Task-Interface-Ts erstellen. Hier in der Muskulatur ist es genau wie der Plan. Zunächst haben wir unseren Titel erstellt, um ihn zu aktualisieren. Wir haben immer, hier ist unsere Benutzer-ID und Board AT das ist völlig in Ordnung. Aber wir müssen auch hier eine Kolumne Dame erstellen. In diesem Fall, wenn nein, wo immer die spezifische Aufgabe beherrscht wird. Und wir brauchen auch hier eine Beschreibung, aber nicht verpflichtend ist. Deshalb habe ich hier ein Fragezeichen gesetzt. Unsere Oberfläche sieht also gut aus. Lassen Sie uns nun das Dokument ändern, das wir hier erstellen müssen aufgabendokument, das das Dokument und unsere Aufgabe, die wir erstellt haben, erweitert. Und wie Sie hier sehen können, habe ich vergessen, unsere Spalte in die Aufgabe umzubenennen. Lassen Sie uns jetzt springen und unser Modell erstellen. Hier waren Innenmodelle bereits Säule. Ich werde auch alles kopieren, einfügen und es einfach in unsere neue Datei legen, die task dot ds ist. Hier müssen wir alles ändern. Festival Hier haben wir ein anderes Spaltenschema, aber ein Aufgabenschema. Und hier kein Spaltendokument, sondern unser Aufgabendokument, das wir gerade hier oben erstellt haben, kann ich das Spaltendokument sicher entfernen. Hier haben wir unseren Titel. Sie ist erforderlich. Das ist völlig in Ordnung. Danach füge ich den Titel erneut ein und benenne ihn in description um, aber es ist optional. Hier wird required through hier nicht benötigt. Wir haben hier auch unsere Benutzer-ID, Board-ID, und hier möchte ich eine neue Spalten-ID eingeben. Und es ist sicher auch erforderlich. Und type ist die Objekt-ID. Es sieht total in Ordnung aus. Nun unten müssen wir hier unser Aufgabendokument zur Verfügung stellen. Und hier ist es eine Aufgabe, bei der es sich um ein Aufgabenschema handelt. Unser Modell ist komplett fertig. Jetzt müssen wir eine neue API in unserem Server erstellen. Das ist y. Lassen Sie uns zurück in die Stufen der Dienstquellserver springen. Hier haben wir unsere API-Aufrufe. Und tatsächlich wird unser neuer API-Aufruf diesem Code sehr ähnlich sein. Hier erhalten wir Spalten nach einer bestimmten Board-ID. Eigentlich wollen wir alle unsere Aufgaben für einen bestimmten Port erledigen. Deshalb werde ich diese Zeile kopieren, einfügen, hier einfügen und einfach umbenennen. Es werden Slushy Pie Slash Boards sein. Board ist ein dynamischer Parameter, und hier haben wir unsere Aufgaben und hier brauchen wir auch unsere Middleware. Und hier brauchen wir einen neuen Controller , der Tasks Controller sein wird, denn im Inneren wollen wir unsere Aufgaben verwalten. Und hier erhält die Methode Aufgaben, und diese Methode muss alle Aufgaben für dieses spezielle Board zurückgeben . Jetzt ist es an der Zeit, einen Controller zu erstellen. Deshalb werde ich springen und Controller sagen. Und ich möchte die gesamten Dateispalten kopieren und einfügen nur weil es einfacher zu ändern ist und es sehr ähnlich ist. Also füge ich es hier ein und benenne zwei Aufgaben um, dot ds. Hier im Inneren haben wir zwei Methoden, create column und get column. Und eigentlich können wir hier einfach get columns umbenennen , um Aufgaben zu bekommen. Und hier lassen wir alles so wie es ist, bitten um Antwort. Als nächstes ist das völlig in Ordnung. Hühnchen für den Benutzer ist hier in Ordnung. Terminieren Sie neu, alles ist großartig. Hier müssen wir kein Spaltenmodell verwenden, sondern stattdessen das Aufgabenmodell hier verwenden. Hier oben werde ich das Aufgabenmodell eingeben. Aus der Modell-Aufgabe. Jetzt können wir hier unser Spaltenmodell in ein Aufgabenmodell ändern. Hier finden wir nach Rand verschiedene Anforderungsparameter, Board-Id, und genau das brauchen wir und deshalb haben wir Körper in unserem Schema. In diesem Fall mit nur einem Arbeitsgang, der alle unsere Aufgaben für dieses spezielle Board findet. Also hier zurück bekommen wir unsere Aufgabenliste, und hier können wir sie einfach zurück an unsere API senden. Und damit ist unsere Aktion, die Liste der Aufgaben zu erhalten , vollständig vorbereitet. Jetzt ändern wir die direkt diese Create-Spalte. Und wie Sie hier sehen können, sprechen wir über Socket IO, und es wird auch super ähnlich sein. Zuallererst haben wir hier eine Methode zum Erstellen einer Aufgabe, bei der Sie Ihren Socket und Ihre Daten erhalten. Was brauchen wir also, um Insiderdaten zu bekommen? Zuallererst langweilen wir uns oder ED, weil wir alle Benutzer in diesem speziellen Board benachrichtigen müssen . Das ist völlig in Ordnung. Jetzt haben wir hier die Titelzeichenfolge, und die letzte hier ist die Spalten-ID. Und die Spalten-ID ist auch eine Zeichenfolge und Pflichten obligatorisch. Und Sie können hier sagen, dass wir darin keine Beschreibung enthalten. Ihre Gesamtsumme stimmt mit Erstellen, Nachzählen, Ändern der Beschreibung, die wir nur innerhalb von Update bereitstellen können. Deshalb ist das völlig in Ordnung. Was wir also hier drinnen machen, wollen wir zunächst einmal einen Misserfolg für unsere Aufgaben schaffen. Dafür müssen wir jedoch zuerst unsere Socket-Events aktualisieren. Deshalb werde ich in solche Quelltypen springen. Und hier haben wir unsere Socket-Events, und hier haben wir bereits Columns Grade und sie wollen alle drei Aktionen kopieren und einfügen. Hier können wir es von Spalten in tasks create umbenennen, und hier ist es tasks create, dann Tasks, großer Erfolg und Tasks create, falls unsere Socket-Events nicht fertig sind. Wir können zurück in unsere Aufgaben springen und hier Socket-Ereignisse in ihnen in Punkt-Aufgaben ändern , die blasser erstellen und sie werden hier nicht direkt unseren Catch ändern, und hier können wir nur dot tasks create Misserfolg. Jetzt aktualisieren wir hier einen inneren Teil , wir haben kein Spaltenmodell, sondern ein Aufgabenmodell, wir sind bereits eingegeben. Hier werden wir anhand der Daten betitelt. Das ist in Ordnung. Board-ID. Und hier ist der Benutzer vom Socket bereit. Das ist alles völlig in Ordnung, aber wir müssen hier auch die Alkalität aus der Datenpunktspalte angeben . Und danach speichern wir hier keine neue Spalte, sondern eine neue Aufgabe. Hier. Benennen wir es in neue Aufgabe um. Und hier können wir einfach new task dot save aufrufen und wir bekommen die gespeicherte Aufgabe zurück. Mit dieser Zeile möchten wir jetzt alle unsere Benutzer darüber informieren , dass wir eine neue Aufgabe erstellt haben. Auf diese Weise veranstalten wir dieses Ereignis und diese Aufgaben schaffen Erfolg. Und hier wollen wir die Speicheraufgabe zurückgeben. Und hier können wir dieses Konsolenprotokoll entfernen. Wir brauchen es nicht mehr und wir haben unsere Create Task-Methode vollständig erstellt. Und das Letzte , was wir tun müssen, müssen wir abonnieren, um mit der Erstellung der Aufgabe vom Kunden zu beginnen. Deshalb müssen wir wieder in unsere Schwesternschaft S springen und hier unten haben wir die Steckdose an. Eigentlich können wir Einfügen von Spalten erstellen und es einfach in unseren Socket ändern, sogar CNN-Punkt-Aufgaben erstellen. Und hier bekommen wir unsere Daten und müssen einfach unsere Spalte zum Erstellen des Aufgabencontrollers aufrufen. Und hier werden Sie keine Spalte erstellt, sondern eine Aufgabe erstellen. Und wie Sie hier sehen können, hat unser Aufgabencontrolling nicht importiert. diesem Grund möchte ich den Controller zum Einfügen von Spalten kopieren und in unsere neue Datei umbenennen, die Task-Controller ist. Von Controller-Aufgaben aus sieht es so aus, als hätten wir alles implementiert. Jetzt springen wir in die Konsole. Wie Sie sehen können, haben wir keine Fehler bei Verbindung mit MongoDB. Api hört zu. Deshalb möchte ich eigentlich nur das Board kopieren, einfügen Ich öffne Postman hier und versuche , unsere Aufgabenliste zu bekommen. Es ist also Slash-Sport als ein Einfügen dieser ID-Slash-Aufgaben und sie hier versteckt senden. Und wie Sie zurück sehen können, erhalte ich ein leeres Array, was völlig in Ordnung ist, da wir noch keine Aufgaben erstellt haben, was bedeutet, dass unser Backend vollständig vorbereitet ist. Und jetzt können wir mit der Implementierung der Kundenseite beginnen. 36. Aufgaben erledigen: Im vorherigen Video haben wir die Vorbereitung unserer Aufgabenmodelle und das Abrufen von Aufgaben im Backend erfolgreich abgeschlossen . In diesem Video müssen wir genau das Gleiche für den Kunden tun. Und ich empfehle Ihnen dringend, dies auch alleine zu tun , da Sie bereits so viel Wissen haben. Was musst du tun, wenn du es alleine machen willst? Zuallererst müssen Sie springen und die Quelle der Kunden, App geteilt. Und hier haben wir unsere Typen, wir haben hier Boyd und Column, und jetzt müssen wir eine neue Schnittstelle für unsere Aufgabe erstellen. Danach müssen wir einen neuen Dienst erstellen, um mit Aufgaben zu arbeiten, unabhängig davon, ob sie Boards oder Spalten haben. Jetzt brauchen wir einen neuen Server , der als Task-Service bezeichnet wird. Hier bekommt Boop die Aufgaben auf genau die gleiche Weise, wie wir hier Spalten für unser Board bekommen, aber es ist noch nicht alles. Sie müssen auch das Insider-Board-Molekül in solchen Diensten, Board-Service-Tests Denn hier sprechen wir über Stream für Board und Stream für Kolumnen. Und wir müssen hier zusätzlich einen Stream für unsere Aufgaben erstellen und zusätzlich eine Funktion , die den Stream aktualisiert. Und danach müssen Sie einfach Daten hier in dieser kombinierten neuesten Version abrufen . Und das ist es. Wenn du diesen Spot selbst umsetzt , bist du großartig. Aber wenn du es gemeinsam umsetzen willst, lass uns das jetzt machen. Zuallererst werde ich in solche Client-Quelle, App, geteilte Typen springen . Und hier möchte ich einen neuen Typ für unsere Task-Interface-Ts erstellen . Und wir müssen genau die gleichen Eigenschaften haben wie in unserem Backend. diesem Grund können wir hier unsere neue Oberfläche exportieren und es ist die Task-Schnittstelle, die Innenseite. Zuallererst haben wir unsere ID, die eine Zeichenfolge ist. Danach haben wir unseren Titel, der eine Zeichenfolge ist. Wir werden auch hier eine Beschreibung haben, jedoch nicht verpflichtend ist. Deshalb ist hier ein Fragezeichen. Es ist auch eine Zeichenfolge. Wir brauchen hier auch unsere Spalte sie D, die die Referenz für die spezifische Spalte ist , unsere übergeordnete. Und wir brauchen hier unsere Board-ID, und sie ist auch eine Zeichenfolge. Und eigentlich bekommen wir hier Wucher t , der auch eine Schnur ist. Unsere Task-Oberfläche ist also komplett fertig. Jetzt können wir wieder in Shared Services einsteigen und hier in Ihrem Service erstellen. Und was ich eigentlich tun möchte, möchte ich den Dienst zum Einfügen von Spalten kopieren nur weil es super ähnlich sein wird. Lassen Sie uns den Spaltendienst in Tasks, Service Ts umbenennen , und wie Sie hier sehen können , ist der MenuService-Aufgabendienst. Was wir hier machen wollen, wir wollen den Namen ändern. Also hier haben wir Aufgaben, Service wo lebenden Konstruktor wie es ist, wir müssen hier http und latest verwenden. Also guter Service. Und hier ist eine Methode, die keine Spalten abruft, sondern Aufgaben abruft. Und hier wollen wir unsere Aufgaben nach Board AT bekommen, weil wir nur einmal alle unsere Aufgaben für ein bestimmtes Board abrufen . Und hier bekommen wir Becker beobachtbar vom Task-Interface-Array. Und hier ist unsere URL. Es ist ein Schrägstrich-Board-ID-Slash-Aufgaben. Hier ist das HTTP GET nicht die Spaltenschnittstelle Operation sondern das Task-Interface-Array. Im Moment möchte ich die Kreditspalte vollständig entfernen , da wir in diesem Video keine Erstellungsaufgabe implementieren. Deshalb kann ich diese drei Eingänge oben entfernen. Wir brauchen sie vorerst nicht. Jetzt ist es an der Zeit, unseren Boardservice zu aktualisieren. diesem Grund füge ich Board Services, Board Service hinzu. Und hier müssen wir eine neue Zeichenfolge erstellen. Ich kopiere den Spaltenstream zum Einfügen hier und ändere ihn in Task Stream. Und das ist ein Verhalten, das Gegenstand des Task-Interface-Arrays ist. Und standardmäßig haben wir hier ein leeres Array, was schnell völlig in Ordnung ist. Jetzt haben wir hier eine Methode, Boards an Spalten zu senden. Wir müssen eine neue Methode erstellen , die als set tasks bezeichnet wird. Und hier ist ein Argument. Wir bekommen unsere Aufgaben und es ist ein Array, also ist es ein Task-Interface-Array. Und jetzt, hier in unserem Stream, Aufgaben mit Dollar, wollen wir unsere neuen Aufgaben so stellen, dass wir fast fertig sind. Jetzt springt Biomasse in unsere Komponente, Platine, Leiterplattenkomponente. Und hier ist unser kombiniertes neuestes. Und nur um Sie daran zu erinnern, hier in sagen wir Daten, kombinieren wir alle unsere Streams , um Daten für das Board abzurufen. Das müssen wir hier tun. Jetzt müssen wir hier diesen Board-Service hinzufügen, und hier werden Stream-Tasks verwendet. Und jetzt müssen wir innerhalb von map als drittes Argument versuchen, Aufgaben auszuführen, und wir wollen sie hier zurückgeben. In diesem Fall haben wir in unserem Datendollar nicht nur Board und Spalten, sondern auch Aufgaben. Und wenn du hier alles alleine gemacht hast, bist du wirklich großartig und du machst gute Fortschritte. Und jetzt ist das einzige, was wir hier tun müssen, wir müssen sie im HTML rendern. Öffnen wir also das HTML unserer Board-Komponenten. Und was wir hier haben, ist unsere Spalte für Schleife. Und drinnen haben wir einen Titel und sonst nichts. Und nach diesem Titel wollen wir noch einen tiefer rendern. Und hier brauchen wir. Und, und G for -Schleife für unsere Aufgaben in der Spalte. Und eigentlich können wir das nicht tun, weil wir nur diesen Stream für unsere Aufgaben innerhalb von Daten haben , aber wir haben keine Aufgaben für diese spezifische Spalte und wir müssen diese Daten irgendwie filtern. Deshalb möchte ich hier in G4 schreiben und es wird die Aufgabe sein, und hier möchte ich eine neue Funktion erstellen. Sie beispielsweise Aufgaben nach Spalte ab. Und dann müssen wir zuerst die Spalten-ID angeben und zweitens, alle unsere Aufgaben, es sind Datenpunktaufgaben. Und nur um Sie hier im Datenstrom daran zu erinnern, wo wir in unseren Board-Spalten und Aufgaben stehen. Das ist so, dass wir hier in dieser Funktion als Argument einfach Datenpunktaufgaben werfen können, oft G4, wir müssen auch hier eine Klasse, es wird Aufgabe sein. Und hier drinnen wollen wir den Aufgabentitel rendern. Und jetzt müssen wir diese Kinderaufgaben nur noch nach Spaltenfunktion erstellen . Das ist hier in der OTS-Datei. Ich werde diese Funktion hier erstellen. Zuallererst bekomme ich die Spalten-ID, die unsere Zeichenfolge ist. Und zweitens, tasks, und es ist ein Task-Interface-Array. Und hier zurück bekommen wir unser Task-Interface-Array. Warum ist das so? Denn im Wesentlichen wollen wir einfach unser Array mit allen Aufgaben erhalten und nach dieser spezifischen Spalte filtern. Das ist so, das Task-Interface-Array ist völlig in Ordnung. Und was wir drinnen tun wollen, wir wollen unsere Aufgaben filtern, die Gott waren diesem Grund erhält der Aufgabenfilter Zugriff auf jede einzelne Aufgabe. Und hier können wir überprüfen, ob der Punkt der Aufgabe Doppelpunkt unserem Spaltennamen entspricht, den wir als Argument angegeben haben, was tatsächlich bedeutet, dass wir für jede einzelne Spalte, die wir rendern, ein Colin sind, diese Funktion erhält Aufgaben nach Spalte und wir werden hier in energy for loop unsere Aufgaben rendern. Schauen wir uns den Sound an. Haben wir irgendwelche Fehler? Ja, wir haben Eigenschaftsaufgaben Spalten des Typboards nicht vorhanden sind, was im Wesentlichen bedeutet, dass wir unsere Dateneigenschaft nicht aktualisiert haben. Und wie Sie hier oben sehen können, definieren wir, dass wir in unserem Observable gerade und Columns gekauft haben. Aber hier haben wir auch unsere Aufgaben, bei denen es sich um ein Task-Interface-Array handelt. Jetzt haben wir hier keine Fehler in unserem Webserver und wir können zur Seite springen und wir sehen alle unsere Spalten, aber wir sehen keine Aufgaben darin, warum es passiert, weil wir unseren Fetch eigentlich nicht aufgerufen haben. Und tatsächlich müssen wir hier in unserem Konstruktor unseren Task-Service injizieren, den wir gerade erstellt haben. Und es ist unser Aufgabenservice, der geteilt wird. Und jetzt müssen wir in unsere Abrufdaten springen, genau wie wir es hier getan haben. Wir können unseren Columns-Dienst kopieren, einfügen und in unseren Aufgaben-Dienst umbenennen. Und hier werden keine Spalten abgerufen, sondern Aufgaben und das Innere, das es wert ist, unsere Board-ID zu werfen, die dieser Teil AD ist und zurück, wir bekommen keine Spalten, sondern Aufgaben. Und hier wollen wir diesen Board-Service nicht als gesetzte Spalten bezeichnen , sondern Aufgaben festlegen. Und drinnen werfen wir auf Aufgaben, die wir geholt haben. diesem Grund haben wir mit diesem Code unseren Stream aktualisiert und der Stream erhält neue Daten in unserem HTML. Schauen wir uns das an. Ich werde die Seite neu laden und es wird ein Fehler angezeigt. Wie Sie jetzt sehen können, sind wir auf Schrägbrettern. Und wenn ich zum ersten Teil übergehe, erhalten wir einen Fehler , den wir nicht für den Aufgabenservice bereitgestellt haben , denn eigentlich ja, wir müssen ihn in unser Board-Modul injizieren. Hier innerhalb von Anbietern müssen wir zusätzlich unseren Aufgaben-Service hinzufügen. Laden wir die Seite neu und wie Sie jetzt sehen können, haben wir keinen Fehler. Und hier im Netzwerk müssen wir eine Anfrage für unsere Aufgaben haben. Und hier ist eine Anfrage Slushy Pie Schrägstriche Slash-ID-Slash-Aufgaben. Und hier ist eine Vorschau ohne Aufgaben, was völlig in Ordnung ist. Wir haben sie noch nicht erstellt, aber natürlich möchten wir überprüfen , ob unser Code funktioniert. Deshalb möchte ich das in der Konsole machen. Ich möchte unseren Mongo öffnen, genau wie wir es zuvor getan haben. Jetzt muss ich unsere Datenbank auswählen, damit wir L-Trailer verwenden können. Und hier können wir überprüfen, was wir haben. Zum Beispiel können wir hier jetzt db dot boards schreiben , dot find. Und damit werden wir alle Boards sehen, die wir haben. Wir haben nur ein einziges Board. Und auf die gleiche Weise können wir db dot, columns, dot find und wo ich in unsere Spalten komme schreiben . Und was wir jetzt tun wollen, möchten wir in Ihre Aufgabe in eine dieser Spalten einfügen . Deshalb können wir hier db dot schreiben und wir haben Aufgaben dot, insert, und im Inneren werfen wir ein Objekt. Die erste Frage: Was brauchen wir, um Erkenntnisse zu liefern? Und dafür können wir unsere Task-Oberfläche überprüfen. Zuallererst wird die ID outer generiert, wir müssen einen Titel angeben. Also hier ist der Titel. Zum Beispiel liefert meine erste Aufgabe nach diesem Versprechen eine Beschreibung. Nehmen wir an, Beschreibung ist meine Beschreibung. Und danach müssen wir die Spalte bedürftig zur Verfügung stellen. Und eigentlich sehe ich hier oben schon Kolumnen. Hier kann ich einfach eine AD oder FirstColumn nehmen und sie werden sie hier werfen. Es wird also die Spalten-ID sein. Und hier ist diese AD. Und danach muss ich auch ein Board AD hier bereitstellen. Wir werden auch eine Board-Anzeige hier oben haben und wir können sie annehmen. Und zu guter Letzt ist es aber ein Benutzer AT und nutzt tatsächlich 3D. Ich sehe hier oben nicht, aber ich kann es aus dem Backend übernehmen. Und wie Sie hier in unserem Backend sehen können, haben wir immer noch ein Konsolenprotokoll mit E-Mail unserer Benutzer- und Objekt-ID. Deshalb werde ich einfach die Idee, wie ein Benutzer funktioniert, kopieren und hier schreiben. Also use re d ist gleich dieser Objekt-ID. Ich drücke die Eingabetaste und hier ist unser erster Rekord. Erstellen wir noch eine weitere, zum Beispiel meine zweite Aufgabe, und hier ist meine Beschreibung. Ich drücke die Eingabetaste und wir bekommen noch eine Aufgabe. Laden wir jetzt die Seite und den Browser neu. Wie Sie hier sehen können, voila, haben wir unsere beiden Aufgaben. Wie es hier funktioniert, ist unser Netzwerk und wir haben eine Anfrage mit PS-Aufgaben an unser Backend. Und hier werden alle Aufgaben nach dieser spezifischen Board-ID gefiltert. Und dann haben wir in unserem Code, in unserem Board, diesen Code, den wir geschrieben haben, um unsere Daten zu filtern. Also hier haben wir eine Funktion Aufgaben nach Spalte abrufen, in der wir alle unsere Aufgaben nach dieser spezifischen Spalte AD filtern . Hier rendern wir nur Aufgaben, die sich auf diese Spalte beziehen, was bedeutet, dass wir erfolgreich im Front-End implementiert haben, unsere Aufgaben erhalten und rendern sie in unserer Komponente. 37. Erstelle ein Aufgabenformular: In diesem Video können wir endlich Implementierer oder Inland-Formular eine neue Aufgabe erstellen. Und eigentlich haben wir schon alles vorbereitet , was wir im Backend brauchen. Wir müssen es nur auf dem Kunden implementieren. Fangen wir also mit unserem Forum an. Das ist das, was sie tun wollen. Ich möchte einsteigen, unsere Board-Komponente HTML setzen. Gibt es hier einen Unterschied, der bei der Aufgabe gerendert werden muss? Und danach wollen wir am Ende unser Inline-Formular rendern. Lassen Sie uns hier die Inline-Formularkomponente verfolgen. Und schließen wir es hier. Und jetzt innerhalb wann müssen einige Werte angegeben werden. Zuallererst ist Klasse. Dies ist unsere Musterklasse, die die gesamten Stile überschreibt und sie ist Create Task Form. Danach müssen wir auch Standardtext bereitstellen. Es wird eine Karte hinzufügen, aber auch eine Schaltfläche hier haben. Also hier muss der Button wahr sein und wir müssen einen Text bereitstellen. Hier wird der Schaltflächentext sein und es ist aktuell. Außerdem möchten wir hier unseren Eingabe-Platzhalter angeben und geben Sie einen Titel für diese aktuelle und nicht zuletzt unsere Handle-Submit-Methode ein, die wir erstellen müssen. Nennen wir es, erstellen Sie eine Aufgabe, genau wie wir es mit unserer Kolumne getan haben und die Erkenntnisse, die wir zunächst jedem Ereignis geben möchten. Dies wird der Titel der kreativen Aufgabe sein, aber wir brauchen hier auch unsere Kolumnierung, da unser Backend wissen muss, in welcher Spalte wir diese Aufgabe erstellen. Und wenn Sie fragen möchten, warum wir hier nur kolumniert sind und nicht Boyd AD. Wir haben ein 3D-Board in dieser inneren Komponente. Deshalb müssen wir das nicht tun. Lassen Sie uns nun diese Methode erstellen. Ich werde zu unserem Board springen und eigentlich müssen wir genau das Gleiche tun. Was wir gemacht haben, war Kolumne zu erstellen. Aber hier ist eine Frage. Wir haben hier eine Spalteneingabe-Schnittstelle. So sieht es aus und wir müssen jetzt unsere Task-Input-Schnittstelle erstellen. Also sind alle unsere Sachen auf die gleiche Weise geschrieben und es wird vermieden, dass wir sie senden müssen, um eine Aufgabe zu erstellen. Hier können wir es auch als Task-Input-Interface Ts bezeichnen und was wollen wir hineinschreiben? Dies ist unsere Schnittstelle, bei der es sich um eine Aufgabeneingabe-Schnittstelle handelt. Und das Innere, vor allem, muss der Boom einen Titel liefern. Es ist obligatorisch und es ist eine Zeichenfolge. zweiten Schleife geben wir hier unsere Spalten-ID an, die ebenfalls eine Zeichenfolge ist. Und zu guter Letzt ist unser gekochtes AD, und es ist auch eine Schnur. Und jetzt haben wir einen netten Input und können wieder in unser Board springen. Und jetzt möchte ich diese Erstellungsspalte kopieren und einfügen weil es genau dasselbe ist, aber für die Aufgabe. Also hier müssen wir es umbenennen, um eine Aufgabe zu erstellen. Hier erhalten wir nicht nur den Titel, sondern auch unsere Spalten-ID weil wir sie aus unserem HTML bereitgestellt haben. Und jetzt können wir hier den Namen von Spalteneingabe in Aufgabeneingabe ändern . Und unsere Schnittstelle hier wird die Task-Input-Schnittstelle sein , die wir gerade erstellt haben. Und wie Sie sehen können, wo ich hier vermisse, unsere Spalten-ID. Hier müssen wir es aus dem Argument hinzufügen. Und hier müssen wir keinen Kegelservice anrufen. Wir müssen unseren Aufgaben-Service zusammenhalten. Und nur um Sie daran zu erinnern, dass dies unser zustandsloser Dienst ist , bei dem wir unsere HTTP-Anfrage und unsere Socket-IO schreiben. Und diese Methode muss create task heißen, und wir werfen in unsere Aufgabeneingabe. Diese Methode gibt es jedoch noch nicht. Wir müssen es schaffen. diesem Grund gehen wir zurück und sagen, es handelt sich Quell-App-Shared Services, und hier ist unser Task-Service. Aber was sie tun wollen, ich möchte die Methode create column kopieren einfügen, weil das eigentlich genau dasselbe sein wird. Ich kopiere die eingefügte Erstellungsspalte und sie möchten sie hier in den Task-Service einfügen. Diese Methode wird jedoch create task genannt. Und wir bekommen als Argument unsere Aufgabeneingabe und wissen gut geschrieben, dass es sich bei diesem Typ Task-Input-Schnittstelle handelt. Hier wollen wir auch ein Socket IO aufrufen , weil es genauso funktioniert . Wir haben eine asynchrone Operation und wir haben Erfolg und Misserfolg begonnen. Also fangen wir an, eine Aufgabe zu erstellen, werden uns mit dem Treffen unseres Backends benachrichtigen. Dann erstellt Bacon eine Facettenaufgabe und benachrichtigt dann das Backend alle Personen, die unser Board abonniert haben, über neue Aufgaben. Hier müssen wir eigentlich unsere Socket-Ereignisse in ihnen aktualisieren. Ich möchte es hier auf der rechten Seite öffnen und zusätzlich das Enum innerhalb eines Servers öffnen, öffnen und zusätzlich das Enum innerhalb eines Servers öffnen da wir bereits in unseren Events geschrieben sind. Diese drei neuen Ereignisse, Aufgaben, führen zu Erfolg und Misserfolg. Und jetzt können wir sie hier einfügen, um sie auf dem Client zu verwenden. Danach können wir wieder in unseren Aufgaben-Service zurückkehren und den Namen hier ändern. Und es werden DOD-Aufgaben erstellt. Und hier gibt es einen Parameter. Wir erhalten eine Aufgabeneingabe, was bedeutet, dass wir nach dem Ausfüllen unseres Inlandformulars hier unseren Socket, Ihr Bild an unser Backend senden und unser Speck bereits bereit ist , unsere Aufgabe zu erstellen und der Fleischerfolg zurück an alle unsere Benutzer. Schauen wir uns das an. Ist es wirklich so, dass wir in unsere Server-Source-Controller springen können , und hier ist unser Task-Controller. Und wie Sie sehen können, haben wir hier die Methode create task, und hier erstellen wir eine neue Aufgabe und benachrichtigen dann mit dieser Zeile alle unsere Kunden, was eigentlich bedeutet, dass wir diese nur abonnieren müssen Veränderungen innerhalb unseres Kunden. Hier springe ich zurück in unsere Board-Komponente ts. Und nur um Sie daran zu erinnern, hier haben wir unsere initialisieren Listener und hier haben wir einen Listener für unsere Kolumne, der Erfolg schafft. Jetzt machen wir genau das Gleiche für unsere Aufgabe, ein großer Erfolg. Also hier haben wir unsere Task-Oberfläche, und hier ist der Typ DOD. Tasks schaffen Erfolg. Und was diese Task-Oberfläche auf diese Weise macht, bekommen wir zurück Task-Oberfläche, weil es generisch ist. Und jetzt haben wir angegeben oder k, Diese Lektion gibt uns unsere Task-Oberfläche zurück. Hier müssen wir eine neue Methode bei der Aufgabe innerhalb des Word-Service erstellen . Und wir stellen hier unsere Aufgabe bereit, die wir vom Backend bekommen haben. Und das Letzte , was wir tun möchten, ist diese Methode in unseren Service aufzunehmen. Öffnen wir unseren Boardservice. Und hier haben wir bei der Kolumne. Und da Sie alle den Stent gemacht haben, möchte ich ihn kopieren, einfügen und genau das Gleiche tun. Hier haben wir eine Aufgabenmethode und wir kommen hierher, wenn Sie eine Aufgabe erstellen, und es ist eine Task-Oberfläche. Hier müssen wir eine Reihe aktualisierter Aufgaben erstellen. Also hier bekommen wir diesen als keinen Stream von Spalten, sondern einen Stream von Aufgaben, dann bekommen wir Wert. Und hier am Ende wollen wir unsere neue Aufgabe schreiben. Und danach müssen wir unsere Sorte erneut aktualisieren. Hier ist der Aufgaben-Stream und hier sind aktualisierte Aufgaben. Und mit diesem Code werden wir unseren Stream erfolgreich aktualisieren und alle unsere Komponenten, die diesen Stream abonniert haben werden automatisch mit Buchstaben beendet. Prüfen wir, ob es funktioniert. Wir haben hier keine Fehler. Und jetzt möchte ich hier zwei Tabs öffnen. Und sie wollen mit beiden Kunden in dasselbe Board springen. Und wie Sie sehen können, ist hier unser Konsolenlog. Und sie wollen den Schnitt hier ausprobieren. Also hier ist unser Inline-Formular und nennen wir es, hat eine Aufgabenfunktion erstellt. Jetzt drücke ich die Eingabetaste, und wie Sie direkt hier auf dieser Registerkarte sehen können , erscheint dieses Element. Also, wie es funktioniert, eigentlich haben wir unsere Firma im Inland gefüllt. Wir schicken unser Bild an das Backend. Backend, habe es bekommen, eine neue Aufgabe erstellt und alle Leute, alle unsere Kunden, die dieses Board abonniert haben, über diese Änderung informiert alle unsere Kunden, die dieses Board abonniert haben . Und mit diesem Hören haben wir aktualisiert, dass wir unser Aufgabenspektrum abgelehnt haben und diese Komponente wurde nachgeholt. Der interessanteste Teil ist hier ein weiterer Tab und ein anderer Benutzer, dies ist ein weiterer Client mit einem anderen Socket AD. Und wie Sie hier sehen können, haben wir auch unsere Funktion „Aufgabe erstellen“, da jetzt alle unsere Kunden synchron sind. Und du könntest sagen, okay, aber dein Ziel, du brauchst nur einen einzigen Browser. Es ist nicht wirklich wichtig. Es ist nur eine andere Socket-Verbindung zu Ihrem Server. Wenn Sie nur zwei Computer haben und Ihr Projekt für die Produktion bereitgestellt wird, funktioniert es genauso. Zum Beispiel kann ich hier einfach eine neue Aufgabe erstellen. Zum Beispiel, foo, ich schlage hier auf Karte und bekomme dann genau die gleichen Informationen ohne Pedro Lot in einem anderen Tab, was eigentlich bedeutet, dass unsere Funktion Aufgaben erstellt hat komplett fertig. 38. Aktualisieren Sie den board: In diesem Video werden wir eine weitere fehlende Funktion implementieren und es ist ein Aktualisierungsformular unseres Boardnamens. Und wie Sie hier sehen können, haben wir ein Platzhalter-Inline-Formularbrett, und hier müssen wir unser Inland-Formular verwenden. Und tatsächlich ist dies unser erstes Video in dem wir gemeinsam das gesamte Feature-Backend und den Client in nur einem einzigen Video implementieren werden das gesamte Feature-Backend und . Und tatsächlich wird die gesamte Logik genau die gleiche sein , wie wir es bereits zuvor getan haben, denn wir haben eine schöne Architektur gebaut und können jetzt ganz einfach neue Funktionen erstellen. Also worum es bei diesem Feature geht, werden wir hier und dann meine Firma haben und wir bekommen daraus einen Titel. Am wichtigsten ist, dass wir zunächst unseren Titel des Boards in dieses Formular für unseren Erfolg des Updates unterschreiben müssen , aber wir möchten das GTP hier nicht verwenden. Whoop, möchte Socket IO dadurch verwenden, weil alle unsere Kunden benachrichtigt werden müssen, wenn die ER, an dieser Stelle, wir den Board-Namen geändert haben. Hier ist wie immer Socket oder dein Fleisch. Und dann müssen wir in unserem Backend dieses Ereignis verfolgen und unseren Namen aktualisieren. Und tatsächlich können wir eine Methode erstellen , um das gesamte Board zu aktualisieren, aber wir werden vorerst den Ebenentitel aktualisieren. Versuchen wir das jetzt zu tun. Dafür möchte ich in unseren Code springen und loslegen. Zuallererst war unser Server. Und für dieses Boom-Massenregister und verwenden Sie Socket-Ereignis hier in unserem Sokrative und Xenon. Und wir haben hier schon Boards, Leaf- und Port-Chain und tatsächlich wollen wir genau das gleiche wie mit Säulen. Und hier haben wir zum Beispiel Spalten erstellt, und sie wollen alle drei kopieren und einfügen. Denn eigentlich wollen wir hier zum Beispiel, nachdem Boards live sind, Boards schreiben und hier wird es Update geben. Hier können wir es direkt ändern, um Board-Updates erfolgreich zu aktualisieren und Board-Updates fehlgeschlagen. Und jetzt hier auf der rechten Seite müssen wir genau das Gleiche tun. Hier werden Boards und Updates sein. Nach dem erfolgreichen Update dieses Boards und dem Fehler beim Update der Boards. Unser Socket-Ereignis wurde also erfolgreich erstellt und jetzt müssen wir es in unserer Socket-IO registrieren. Das ist, indem wir zurück in einen Dienst springen, ja. Und hier unten haben wir unsere Steckdose an. Hier müssen wir uns registrieren und Socket Ton verwenden. Dazu können wir zum Beispiel einfach kopieren, einfügen, hier eine Aufgabe erstellen und schreiben, nicht erstellen, sondern auf Punktbretten-Updates reagieren , die wir gerade erstellt haben. Wir warten also Update der Event-Boards von unserem Kunden. Und hier wollen wir keinen Aufgaben-Controller verwenden, sondern den Controller des Boards hier keine Aufgabe erstellen, sondern das Board aktualisieren. Und tatsächlich übergeben wir drinnen oder Ihre Socket-Daten, genau wie wir es zuvor getan haben. Lassen Sie uns nun diese Update-Board-Methode für diese Zahlungen erstellen . Jump in unseren Controller-Boards. Und hier haben wir bereits diese Methode create board, aber das ist nicht das, was wir wollen, weil diese Methode mit einem Schuh-TP ist. Deshalb wollen wir eigentlich zum Beispiel so etwas wie Live-Board. diesem Grund werde ich diese Methode kopieren und einfügen , da alle Optionen ähnlich sind und wir dieses Methodenupdate Board benennen können. Und wir wissen, dass wir hier unsere IR-Steckdose und dann unsere Daten bekommen . Und die Frage ist, welche Daten wir benötigen, um ein Board zu aktualisieren sicher müssen wir beim Titel des Boards wissen , das wir bereitstellen wollten. Und zweitens die Idee des Boards, die wir aktualisieren wollen. Hier ist unser Körper völlig in Ordnung. Und eigentlich möchte ich hier keinen Titel schreiben, ich möchte Felder schreiben. Und hier werden wir die Titelzeichenfolge übergeben. Warum haben wir eine solche Notation? In diesem Fall können wir hier ganz einfach ein neues Feld hinzufügen , das wir in unserem Board aktualisieren möchten. Wenn wir zum Beispiel später eine Beschreibung haben, können wir sie einfach hierher werfen, aber im Moment haben wir nur einen Titel. Jetzt können wir hier dieses Konsolenprotokoll entfernen, wir brauchen es nicht und auch Socket Leaf. Die Frage ist also, was wir hier überhaupt schreiben werden? Zunächst müssen wir hier try-catch schreiben, nur weil wir einen Fehler bekommen können. Das ist so hier, Lass uns kreieren, versuchen und fangen. Und hier kommen wir rein, fangen einen Fehler auf. Und wenn wir einen Fehler haben, wollen wir nur Socket und Fleisch schreiben. Und hier sind unsere Socket-Events in einem Punkt. Und wir haben bereits einen Fehler beim Update unserer Boards erstellt. Und was wir Einblicke geben möchten ist unsere Fehlermeldung erhalten. Und nur um Sie daran zu erinnern, dies unser Helfer ist, der einen Pfeil verwandelt. Das ist mein Inneres. Wir können einfach unseren unbekannten Fehler angeben. Erstellen wir jetzt unseren Trie. Also Festival hier wollen wir überprüfen ob ein gültiger Benutzer, das ist y. Lassen Sie uns überprüfen, ob wir keinen Socket-Punkt-Benutzer haben, dann gehen wir weiter, um genau den gleichen Fehler auszugeben. Also hier versuchen wir Socket, die Socket-Ereignisse, ENM-Board-Aktualisierungsfehler. Und hier, anstatt eine Fehlermeldung zu erhalten, können wir einfach schreiben, dass der Benutzer nicht autorisiert ist. Außerdem sollten wir hier nicht vergessen, eine Rücksendung zu schreiben. In diesem Fall werden wir einfach aufhören, irgendetwas zu tun. Denn danach, wenn wir unsere Logik schreiben wollen, ist dies eine Aktualisierung des Boards. Und eigentlich ist es extrem einfach, aber wir müssen diese Methode synchron machen , weil wir sie in Kuwait intern verwenden wollen . Jetzt hier in dem, was ich tun möchte, möchte ich unser aktualisiertes Board zurückbekommen. Und um ein Board zu aktualisieren, müssen wir hier ein Gewicht verwenden und wir haben hier auf unser Arbeitsmodell zugegriffen . Und wir können „ Nach ID suchen“ und „Update“ verwenden. Und tatsächlich ist das eine erstaunliche Methode von Mongoose. In diesem Fall stellen wir hier nur NAT zur Verfügung und in unserem Fall ist es die Datenpunktboard-ID. Und hier ist unser Update. Und tatsächlich ist Update genau das, was wir in unserer Entität aktualisieren möchten. Hier können wir einfach die Board-Punktfelder ausprobieren und das ist ein Objekt. Und die letzte sind Optionen. Hier möchte ich Ihnen eine Option anbieten. Diese Option ist wirklich wichtig, da wir in diesem Fall unser aktualisiertes Board zurückerhalten. Wie Sie hier sehen können, habe ich auch einen Fehler gemacht. Es ist kein Board-Punktfeld, es sind Datenpunktfelder. Jetzt haben wir keine Fehler und können mit diesem Port reagieren. Und dafür können wir einfach Socket benutzen und uns treffen. Hier hat unsere Steckdose sie sogar gesehen. Und wir haben hier Erfolg. Boards aktualisieren also erfolgreich. Wir möchten als zweite Parameter ein aktualisiertes Board bereitstellen . In diesem Fall werden alle unsere Kunden nach diesem Gutschein über dieses Ereignis informiert , um alle unsere Kunden, die dieses Board abonniert haben, über unsere Änderung zu informieren. Hier können wir ir dot t2 schreiben, und hier möchten wir alle Kunden in unserem Raum benachrichtigen. Hier werden wir Daten haben, dot board Id dot und treffen uns, wie wir es zuvor geschrieben haben. Und hier drinnen können wir unsere Socket-Ereignisse in m Punkt verwenden. Und hier haben wir ein erfolgreiches Board-Update. Und es gibt einen zweiten Parameter, den wir hier schreiben wollen , den aktualisierten Port. In diesem Fall werden Oliver-Benutzer darüber informiert, dass das TO-Board aktualisiert wurde, und sie wissen, welche Felder sie ändern müssen. Unser Backend-Teil ist komplett fertig. Jetzt müssen wir einen Kundenteil implementieren. An dieser Stelle springen wir zurück in unsere Client-Quell-App. Und hier möchte ich zunächst in Shared Services, Board Service, gehen . Warum ist das so? Denn eigentlich werfen wir hier unsere Events für das Backend. Und eigentlich bevor wir hier geschrieben haben, genauso wie GTP-Katze und die wählerischen vorgeschlagen haben. Aber in unserem Fall müssen wir jetzt ein Socket-Ereignis ausgeben. diesem Grund möchten wir hier das Methodenaktualisierungsboard erstellen . Wir wollen hier für Sie sorgen. Erstens unser Board AD, dies ist eine Zeichenfolge und zweitens Felder, die wir aktualisieren möchten. Wie Sie sehen können, haben wir Parameter genau wie im Backend. Hier haben Felder den Titel, was eine Zeichenfolge ist, und zurück mit brauchen nichts zu bekommen , weil wir hier einfach Socket IO verwenden, aber um es hier zu verwenden, müssen aber in den Konstruktor injiziert werden. Hier bekommen wir unseren Socket-Service , der unser Socket-Service ist. Jetzt können wir in unserem Update-Board diesen Dot-Socket-Service, Punkt und Fleisch, nutzen. Und hier müssen wir unser Socket-Event bereitstellen. Aber hier ist das Problem. Wir haben es noch nicht bei unserem Kunden registriert. Hier haben wir keine solchen Schnüre. Hier unten möchte ich unsere Server-Socket-Ereignisse darin öffnen. Und hier möchte ich diese Poren kopieren, Erfolg und Misserfolg aktualisieren. Und jetzt wollen wir sie nur noch hier in unseren Kunden einfügen . Jetzt haben wir unserem Kunden die Saiten nicht gesagt und können sie ausgeben. Deshalb können wir hier einfach Socket-Ereignisse in m Punkt schreiben und hier haben wir ein Board-Update. Dies ist der Beginn unseres Updates aus Protest. Und geht der zweite Parameter hier weiter, um unser Board-ID-Komma, unsere Felder, bereitzustellen . Wir haben also genau den gleichen Data Lake wir in unserem Backend vorbereitet haben. Und jetzt können wir von jedem Teil unserer Anwendung aus diesen Shared Board-Service nutzen. Verwenden Sie diese Update-Board-Methode, um ein Treffen zu versenden. Jetzt ist es an der Zeit, unser Formular hinzuzufügen, das wir noch nicht erstellt haben. Deshalb springen wir zurück in unsere App. Board-Komponenten, Board, Board-Komponenten HTML. Und wie Sie hier auf der oberen Innenseite des Board-Header-Containers sehen können , haben wir dieses Platzhalter-Inline-Formularboard. Und genau hier wollen wir ein Inline-Formular schreiben, um unseren Boardtitel zu aktualisieren. Das ist so, schreiben wir unser Inline-Dash-Formular, das wir verwenden möchten, und schließen wir es hier. Zuallererst muss inside womb die Klasse bereitstellen, um ein korrektes Styling zu erhalten. Und in diesem Fall wird es hier hinzugefügt Board-Forum. Danach möchten wir auch unseren Standardtext angeben. Und hier haben wir unser Data Dot Board, Punkt Titel. Warum ist das so? Denn eigentlich, nur um Sie hier oben daran zu erinnern, haben wir unsere Daten, lokale Eigenschaftsdaten, und darin haben wir alle unsere Spalten, alle unsere Aufgaben und ein Board. diesem Grund haben wir hier direkten Zugriff auf den Datenboardtitel und möchten ihn als Standardtext rendern. Danach möchten wir auch einen Titel angeben, und das ist der Wert für unser Unternehmen. Hier werden wir auch den Data Board-Titel schreiben und guter Letzt wird das Einreichen behandelt. Dies ist unser Ereignis und wir möchten eine neue Methode erstellen, zum Beispiel Namen des Boards aktualisieren und inside dollar event ist eine Zeichenfolge zum Aktualisieren eines Boards. Erstellen wir nun diese Methode. Ich werde in die RTS-Datei springen und irgendwo unten können wir den Namen des Update-Boards hinzufügen. Und wir wissen, dass wir hier unseren Board-Namen bekommen , der eine Zeichenfolge ist. Und zurück wollen wir eine Lücke bekommen, weil wir hier einfach unseren Service nutzen wollen. Und tatsächlich haben wir hier bereits Zugriff auf unseren thes dot boards Service. Und das ist wichtig, nicht gelangweilt, sondern Boards Punkt. Und hier haben wir unser Update Board hier drinnen. Zuallererst müssen wir unsere Board-ID angeben, und das ist dieses dot board AT. Und zweitens unsere Bereiche. In unserem Fall haben wir hier nur einen Titel, das ist unser Board-Name, den wir von unserer Inland-Form erhalten haben. Also haben wir erfolgreich einen einzigen Flow erstellt. Also haben wir unser Inland von hier aus erstellt , unseren Board-Namen aktualisiert und ein Ereignis für unser Backend ausgegeben. Prüfen wir, ob dieser Teil funktioniert. Ich habe keine Fehler im Client oder im Backend. Und jetzt öffnen wir einen Browser. Wie Sie hier sehen können, haben wir jetzt ersten Teil und ich kann hier klicken, um ein Formular zu öffnen. Und hier sehen wir unser erstes Board. Sie können hier etwas schreiben und die Eingabetaste drücken. Und wie Sie sehen können, wurde es nicht aktualisiert da wir nicht auf unsere Änderungen im Backend reagiert haben. Und tatsächlich, wie Sie hier im Inneren sehen können, haben wir keine Fehler und wahrscheinlich wurde unser Titel bereits aktualisiert, aber wir haben unseren Kunden nicht benachrichtigt. Und eigentlich können wir es leicht überprüfen. Wir können die Seite einfach neu laden. Und wie Sie jetzt sehen können, erhalten wir unseren aktualisierten Titel, was bedeutet, dass die gesamte Logik bereits funktioniert und unser Backend unser Board erfolgreich aktualisiert hat. Das Hauptproblem ist jedoch, dass wir nicht alle unsere Kunden über Änderungen informiert haben. Eigentlich ja, wir haben es im Backend gemacht, aber wir haben kein Abonnement für diese Veranstaltung auf dem Client erstellt . Das ist y. Lass es uns jetzt machen. Zuallererst müssen wir also wieder in unsere Board-Komponente springen . Und nur um Sie hier oben daran zu erinnern, dass wir Abonnements für verschiedene Veranstaltungen haben. Deshalb möchte ich hier ein Abonnement kopieren , einfügen und ändern. Hier haben wir unseren Socket-Service und wir hören auf das Ereignis der Aktualisierung unseres Boards, was tatsächlich bedeutet, dass wir zurück ein neues Board bekommen. Hier haben wir eine Board-Schnittstelle und hier haben eine Board-Schnittstelle und wir das Socket-Ereignis C num dot. Und hier hören wir auf den Erfolg. Hier haben wir Boards, Updates, Erfolge. Und in unserem Jetzt abonnieren bekommen wir unser aktualisiertes Board. Was wollen wir also damit machen? Eigentlich möchte ich nur eine Methode innerhalb unseres Board-Service aufrufen und sie wird unseren Datenstrom aktualisieren. diesem Grund können wir hier Board Service, Dot Update Board und Worth Row verwenden . Und in unserem aktualisierten Board ist super erfolgreich für unsere Veranstaltung abonniert. Und wir müssen nur diese Update-Board-Funktion in unserem Board-Service erstellen . Also lasst uns in unseren Boardservice einsteigen. Und hier unten können wir es schaffen. Also hier ist der Aktualisierungspunkt, und wir wissen, dass wir hier ein aktualisiertes Board bekommen, das eigentlich eine Vollplatinenschnittstelle ist. Und hier werden wir breit , weil wir einfach unseren Stream aktualisieren wollen. Aber hier haben wir ein Problem. Standardmäßig ist unser Board jetzt, das ist so hier. Typescript wird schreien , mit dem wir nicht arbeiten können. Nun, hier möchte ich überprüfen, ob wir jetzt Inside Board haben oder nicht. Also hier möchte ich ein Board bekommen, und das ist, sind diese Boards Stream, um Wert zu bekommen. Und danach möchte ich überprüfen , ob es jetzt ist. Wenn wir also unser Board nicht haben, möchte ich einen Fehler werfen. Also hier wirf einen neuen Fehler weil wir das Board eigentlich nicht aktualisieren können , wenn wir kein Board haben. Nehmen wir an, das Board wird danach nicht initialisiert wenn wir mit einem Teil arbeiten können und wir eigentlich nur unseren Stream aktualisieren wollen. Also dieses Board mit Dollar Punkt als nächstes, und hier möchte ich das gesamte Board, das wir haben, mit dem Titel zusammenführen , weil ich nur beim Titel aktualisieren möchte. Titel ist also unser aktualisierter Board-Punkt-Titel. Und du könntest sagen, okay, wir könnten einfach das ganze Objekt nehmen. Ja, wir sind gut, aber ich möchte auf der sicheren Seite bleiben und einfach eine Funktion implementieren , die wir lösen müssen. Dieser Code sollte den Stream erfolgreich aktualisieren und unsere Komponente, da sie den Stream abonniert hat, wird benachrichtigt und beendet. Prüfen wir, ob es funktioniert. Wir haben hier keine Fehler. Lass uns die Seite neu laden und hier haben wir das erste Board. Ändern wir einfach Ihren Titel und drücken die Eingabetaste. Und wie Sie sehen können, sind hier direkt meine Änderungen. Jetzt duplizieren wir diese Registerkarte und versuchen es erneut. Also hier auf der zweiten Registerkarte werde ich einfach versuchen zu tunen und die Eingabetaste zu drücken. Und wie Sie hier auf der ersten Registerkarte sehen können, wurde es auch aktualisiert, was bedeutet, dass wir eine Funktion zur Aktualisierung eines Boardtitels von Anfang bis Ende erfolgreich implementiert haben. 39. Löschen von Board: In diesem Video werden wir das Löschen des Punktes implementieren. Und tatsächlich wird diese Funktion unserer vorherigen Funktion sehr ähnlich sein , mit dem Update genug unser Board, das ist y. Lassen Sie uns es wirklich schnell wie immer implementieren. Legen Sie einen an, um mit unserem Server zu beginnen. Das ist y. Lass uns in die Serverquelle springen. Und hier interessieren uns unsere Socket-Events. Und genau wie bei diesem Update benötigen wir drei neue Ereignisse zum Löschen. Das ist hier, lass uns drei neue Events erstellen. Es ist Port Delete Boards zu seinem Erfolg und Misserfolg. Und lass uns auf der rechten Seite ändern, unsere String-2-Boards löschen. Dann löschen Boards Erfolg und Boards löschen Fehler. Abonnieren wir jetzt unser Event für diesen Bonussprung auf unserem Server. Und hier können wir unseren Board-Erfolg kopieren, einfügen und in unsere Boards ändern. Löschen. Hier wollen wir eine neue Methode verwenden, nicht Board aktualisieren, sondern Port löschen. Springen wir nun zu unserem Controller und erstellen diese Methode in der Steuerung unseres Boards. Und eigentlich möchte ich dafür unsere Update-Board-Methode vollständig kopieren und einfügen unsere Update-Board-Methode da eine Löschung super ähnlich ist. Lassen Sie uns zunächst den Namen ändern. Es ist delete board und es ist eine asynchrone Methode. In unseren Daten brauchen wir nur noch kein D unseres Boards. Hier habe ich das D gekauft, das reicht hier, aber ich muss nichts anderes angeben weil wir einfach unser Board von d löschen. Und für das Back-End sind es genug Informationen. Jetzt haben wir hier drinnen wie immer try-catch und wir suchen nach unserem Socket-Benutzer. Aber hier, im Fehlerfall, wollen wir einen weiteren Fehler auslösen und es wird ein Fehler beim Löschen der Boards sein. Hier. Lass uns auch unseren Käfig wechseln. Es wird auch ein Fehler beim Löschen von DOD-Boards sein. Und jetzt müssen wir unser logisches Flüstermodell ändern, denn hier haben wir ein Update gemacht. Jetzt haben wir Azure move und eigentlich wollen wir nichts zurückbekommen, aber wir wollen diese Bindung einfach durch d aufheben. Und dafür können wir verschiedene Methoden verwenden. Zum Beispiel können wir find one und delete verwenden. Das ist völlig in Ordnung. Das ist genau so, wie wir es innerhalb des Updates gemacht haben Aber eigentlich kann man auch direkt ohne Zucker verwenden , einen löschen. Und dies ist eine Methode, die Sie nur innerhalb von delete one kennen Wir müssen ein Objekt mit müssen. Wir müssen ein Objekt mit Feldern versehen, mit denen wir das sensible Objekt finden möchten. Und eigentlich können wir hier nur Unterstrich-ID equals und d bereitstellen . Nun, falls es sich um Data Dot Board AD handelt und es eigentlich egal ist, ob Sie delete one oder find by the end delete verwenden , funktioniert es genau das Gleiche. Also entfernt diese Linie erfolgreich für uns unser Board. Und danach wollen wir unseren Erfolg des Entfernens ausstrahlen. Hier wollen wir für alle unsere Benutzer innerhalb dieses Ports Boards ausgeben, Erfolg löschen. Und eigentlich müssen wir hier keine ID unseres Boards angeben , da sich all diese Benutzer in diesem speziellen Board befinden und wissen, welches Board entfernt wurde, und sie müssen die Startseite umgeleitet werden. weil sie nicht auf dem Board bleiben können, das einer der Kunden entfernt hat. Unsere Serverlogik ist also komplett bereit. Kehren wir nun zu unserem Kunden zurück und genau wie zuvor. Zunächst möchten wir mit Shared- und Socket-Events beginnen . Und ich werde Paste aus unseren Socket-Events, drei Ereignissen, Board-Delete-Erfolg und Misserfolg kopieren drei Ereignissen, Board-Delete-Erfolg und Misserfolg und hier unten einfügen. Jetzt müssen wir in unsere Dienste einsteigen, Board-Service, denn hier wollen wir eine neue Methode zum Entfernen eines Boards erstellen . Hier kopieren wir unser Update-Board und ändern es in Löschpunkt. Und das einzige, was wir brauchen, ist unser Board AT, wir brauchen hier keine Felder. Und hier wollen wir unser Board Delete Event ausgeben. Also lass es uns hier versuchen. Gekauft löschen und im Inneren werden wir ein Objekt mit nur einem Feld versehen. In der Tat ist unsere Board-ID. Jetzt in unserer Anwendung können wir dieses Löschboard nennen und es wird Einblicke in das korrigierende Socket Layer werfen. Jetzt aktualisieren wir unsere Komponente. Also möchte ich wieder in unser Board gehen. Komponenten kauften HTML. Hier haben wir unser Inline-Formular. Und nach diesem Inline-Formular müssen wir ein Symbol erstellen , das Board löscht. Hier sagen wir mal div class Delete Board. Und hier haben wir unser Klickereignis und klicken Sie auf Poupon , um unseren Punkt zu löschen. Und eigentlich müssen wir nichts im Inneren bereitstellen, da wir NAD unseres Boards in unserer Testdatei haben. Also hier möchte ich unser div schließen und es einfach innerhalb des Delete Board-Codes ausprobieren. Jetzt müssen wir in unsere ts-Datei springen und diese Methode hier unten erstellen. Und was wir in unserem Löschboard tun wollen, müssen wir einfach unseren Service anrufen. Nun, hier wissen wir, dass es eine Lücke ist und wir möchten einen Service anrufen. Aber eigentlich möchte ich hier zusätzlich eine Bestätigung schreiben, möchte ich hier zusätzlich eine Bestätigung schreiben weil wir sicher sein müssen, dass Benutzer ein Board wirklich entfernen wollen. Also lass es uns hier versuchen. Wenn Sie bestätigen und nicht wissen, was bestätigt wurde, ist dies ein Standard-Javascript-Popup im Browser, das Ihnen ein Ja oder Nein anzeigt. Also hier wollen wir etwas schreiben wie: Bist du sicher, dass du das Board löschen willst? Und wenn die Antwort ja ist, dann gehen wir in dieses Sieb und rufen diesen Boardservice an. Und hier haben wir einen Löschpunkt, an dem wir unser Board AD bereitstellen können. Und jetzt denkst du vielleicht, okay, wir müssen jetzt unseren Boardservice aktualisieren. Aber wir müssen das überhaupt nicht tun weil es tatsächlich viel einfacher ist. Was wir tun wollen Poupon hier zu unserem Socket Event zu abonnieren, das erfolgreich gelöscht wird. Lass uns das jetzt machen. Dafür wollen wir unseren Socket-Service kopieren, hören und hören, boop will void hören , weil Back Whoop kein Board bekommt. Wir wissen, dass dies nur ein Erfolg beim Löschen unseres Boards ist. Hier wird die Veranstaltung gekauft, Erfolg gelöscht und zurück, wenn Sie nichts bekommen. Und die Frage ist, was wir drinnen machen wollen und eigentlich wollen wir den Benutzer einfach auf unsere Homepage umleiten. Warum ist das so? Denn eigentlich haben wir hier oben in der Navigation Start einen Hörer , was eigentlich bedeutet, dass wir in dem Moment unser Benutzer auf eine andere Seite geht, zum Beispiel auf die Homepage, , in dem unser Benutzer auf eine andere Seite geht, zum Beispiel auf die Homepage, wird live über unseren Boardservice übertragen und wir werden alle Streams korrekt entfernen. diese Weise möchten wir hier in unserem Abonnement tun, Sie schreiben einfach diesen Router Punkt navigieren nach URL. Und hier haben wir zum Beispiel Schrägstriche, was eigentlich bedeutet, dass das Board nicht existiert. Wir müssen für jeden einzelnen Kunden eine Liste möglicher verfügbarer Boards anzeigen . Prüfen wir, ob dieser Code funktioniert. Wie Sie sehen können, haben wir keine Fehler beim Client. Wir haben keine Fehler im Backend. Öffnen wir es jetzt im Browser. Und wie Sie sehen können, funktioniert unsere Seite immer noch. Und jetzt haben wir dieses Löschboard. Aber eigentlich möchte ich diesen Teil nicht entfernen , da wir hier ziemlich viele Tests gebaut haben. Aber ich möchte es tun, ich möchte zurück in unsere Boards springen und ein neues Board erstellen, zum Beispiel zu entfernen. In diesem Fall können wir diese Funktionalität auf dieser neuen leeren Leiste testen . Aber wir wollen es jetzt tun, wir wollen diese Registerkarte duplizieren, nur um zu überprüfen, ob sie für den zweiten Benutzer funktioniert. Was ich jetzt tun möchte, ich möchte auf Punkt löschen klicken, und wie Sie sehen, sehe ich eine Bestätigung. Ich versichere dir, du willst ein Board löschen, wo es versteckt ist, okay? Und wo Regelmäßigkeit auf unsere Vorstände reagiert wird. Und wie Sie hier sehen können, haben wir unser Board nicht , weil es erfolgreich war oder entfernt wurde. Und wie Sie auf der zweiten Registerkarte sehen können, wo alle Ziffern auf unseren Schrägstrich gerichtet sind weil alle unsere Kunden in diesem Raum über das erfolgreiche Entfernen der Platine informiert wurden in diesem Raum über das erfolgreiche Entfernen der Platine informiert und sie müssen auf unsere Board-Seite zurückgewiesen werden. Und wie Sie sehen können, ist unsere Architektur so beeindruckend, dass wir in wenigen Minuten neue Funktionen erstellen können. 40. Spalte löschen: In diesem Video müssen wir das Löschen unserer Spalte implementieren. Und tatsächlich haben wir hier eine Spalte in unserem Board und die Masse in der Nähe des Titels zeigt das Symbol zum Löschen einer Spalte. Und wieder muss es mit dem Socket IO implementiert werden. Daher werden wir einen anderen Benutzer über unsere Löschung informieren. Und ich denke, dass es eine wirklich nette Funktion ist , die Sie selbst implementieren können, da sie dem Löschen in einem Vogel sehr ähnlich ist. Und hier ist Hilfe von meiner Seite. Zuallererst müssen wir wie immer im Backend neue Ereignisse implementieren und das Socket-Ereignis verwenden. Danach müssen wir eine neue Controller-Aktion erstellen , die aus Spalten besteht. Löschen Sie beispielsweise eine Spalte. Wir müssen auch nur für den Kunden Sinn machen. Zuallererst, Registrierung und neue Veranstaltung. Dann haben wir eine neue Methode innerhalb des Spaltendienstes erstellt, die gemeinsam genutzt werden kann, um eine Spalte zu entfernen. Danach müssen wir unsere Komponente aktualisieren, um eine Schaltfläche hinzuzufügen , auf der wir diese spezifische Spalte ab diesem Punkt entfernen . Und eigentlich ist dies nur ein Treffen der Veranstaltung für das Backend. Und wir müssen auch den Erfolg abonnieren, um diese Spalte bei allen unseren Kunden zu entfernen. Und hier ist das Markup des Buttons. Sie wissen also, was Sie implementieren müssen. Wie Sie hier sehen können, befinde ich mich im HTML der Board-Komponente. Hier haben wir unsere Spaltentitel und direkt nach dem Titel wollen wir hier ein Bild mit Quelle schreiben. Und hier haben wir Schrägstrich-Assets, Slash schließen Unterstrich, Icon Dot SVG. Und hier können wir unser Bild schließen, aber wir müssen hier auch eine Klasse bereitstellen , die das Symbol zum Löschen der Spalte sein wird. Schauen wir uns das an. Ich lade die Seite neu und jetzt haben wir ein schönes Kreuz. Und genau hier binden Sie das Ereignis von click. Aber wenn du einfach mitmachen willst, lass uns das gemeinsam umsetzen. Und wie gesagt, es wird dem Löschen des Boards sehr ähnlich sein. Das ist y. Lass es uns schnell und wütend machen. Zunächst möchte ich mit unserem Backend beginnen und Biomasse springt hier in unsere Serverquelltypen. Und hier haben wir unsere Socket-Events. Und wieder haben wir hier Boards löschen, ich kann es kopieren einfügen und es einfach in Spalten löschen ändern. Dies ist y hier auf der linken Seite werden wir Spalten löschen lassen und auf der rechten Seite statt Boards werden überall Spalten schreiben. Und wir müssen es auch in Erfolg und Misserfolg ändern. Unsere Veranstaltungen sind also da. Jetzt müssen wir in unsere Server-Tiers springen und hier Socket verwenden, anstatt Boards löschen, ich möchte Spalten löschen, die wir gerade erstellt haben. Hier. Anstelle des Board-Controllers müssen wir unseren Columns-Controller verwenden. Hier löschen wir kein Board, aber wir werden unsere Spalte löschen. Und jetzt sind wir die Methode zum Löschen von Spalten in unserem Spalten-Controller . Aber ich möchte nichts erneut eingeben, da der Code genau das gleiche Bein ist, das das Board löscht. Hier können wir dieses Löschboard kopieren, vollständig einfügen und in unseren Spalten-Controller einfügen, da es zu 99% gleich sein wird. Zuallererst ist die Frage, was wir hier als Parameter bekommen müssen? Hier sind wir schon, ich komme in Board AD und sie wollen auch hier Spalte D bekommen, weil wir wissen müssen, was wir löschen. Und du könntest hier sagen, okay, aber warum brauchen wir die arme Frau? Wir brauchen nur eine Kolumne und eigentlich nicht, weil wir alle benachrichtigen müssen , die diese spezielle Board-Anzeige abonniert haben. Deshalb müssen wir hier beide Werte angeben. Danach suchen wir hier nach unserem Benutzer und hier müssen wir ein Fehlerereignis treffen. In unserem Fall wird es ein Fehler beim Löschen von Spalten sein. Hier ist dieser Benutzer nicht autorisiert, und hier haben wir unseren Catch und wir können hier die gleichen Spalten delete failure mit unserer get error message verwenden die gleichen Spalten delete failure . Hier. Anstelle des Board-Modells verwenden wir unser Säulenmodell. Hier löschen wir einen Datensatz nach Datenpunkt, und hier ist die Spalten-ID, da wir unsere Spalte nicht geboren löschen müssen unsere Spalte nicht geboren und auf diese Weise unseren Erfolg erreichen müssen. Aber hier werden wir versuchen, für unsere Kolumne erfolgreich zu sein, und hier wird Erfolg haben. Und eigentlich sind wir schon bereit mit unserem Backend. Was ich jetzt tun möchte, ist diese Socket-Ereignisse zu kopieren und einzufügen, da wir sie auf dem Client verwenden werden. Auf diese Weise kopiere ich Einfügen von Spalten, lösche Erfolg und Misserfolg und dass der deaktivierte Champion die Quell-App des Clients festlegt. Und hier haben wir gemeinsame Typen und hier sind unsere Socket-Events, in denen wir Spalten einfügen und löschen können. Als nächstes werden die Spalten „Tub Data, Service, Insight Shared Services“ sein. Weil wir delete column genau hier implementieren wollen. Wir können eine neue Methode delete column schreiben, und wir wissen, dass wir hier unsere Board-ID, die eine Zeichenfolge ist, und auch unsere Spalten-ID, die ebenfalls eine Zeichenfolge ist, erhalten die eine Zeichenfolge ist, und auch unsere Spalten-ID, . Und wir bekommen eine große Lücke, weil wir nur unser Socket-Ereignis ausgeben wollen. Deshalb können wir hier diesen Socket-Service schreiben und uns treffen, und wir verwenden hier unsere Socket-Ereignisse in m Punktspalten delete. Und wir müssen als zweiten Parameter und ein Objekt mit unserem Board AD und auch der Spalten-ID bereitstellen , die wir von den Parametern erhalten. Danach müssen wir unseren Boardservice aktualisieren. Und nur um Sie daran zu erinnern, langweilen Sie Dienste genau dort, wo wir unseren Kolumnenstrom speichern. Was hier eigentlich bedeutet, dass wir das Löschen der Spalte implementieren müssen . Also hier unten kann ich die Methode zum Löschen von Spalten erstellen. Und hier brauchen wir nur unsere Kolumnen. Wir brauchen hier überhaupt keine Board-Idee, da wir diese Methode nur von der Komponente aus aufrufen , um unseren Stream zu aktualisieren. Hier wissen wir also die Spalten-ID, die wir löschen möchten , und zurück werden wir ungültig, und jetzt möchten wir die Liste unserer Spalten aktualisieren. Das ist so hier. Wir können eine Eigenschaft mit aktualisierten Spalten erstellen. Und hier können wir mit diesem Columns-Stream auf unseren Stream zugreifen . Hier bekommen wir unseren Wert. Und danach wollen wir unser Array filtern. Und tatsächlich bekommen wir hier Zugriff auf jede einzelne Spalte und wir wollen diese spezifische Spalten-ID ablehnen. Deshalb können wir hier überprüfen, ob die Spalten-ID nicht mit unseren Spaltennamen übereinstimmt die als Parameter übergeben wurden. In diesem Fall erhalten wir hier genau die gleiche Liste unserer Spalten, aber ohne diese eine Spalte. Und danach müssen wir einfach unseren Stream aktualisieren. Dafür können wir diese Spalten als nächstes schreiben und wir werfen in unsere aktualisierten Spalten. Diese Methode aktualisiert also tatsächlich unseren Stream und entfernt eine Spalte aus dem Stream. Der nächste Schritt besteht darin, unsere Komponente zu aktualisieren. Und eigentlich haben wir unser HTML bereits geändert. Hier haben wir jetzt ein Bild, aber wir müssen anhängen, ein Klickereignis hören. Und was ich tun möchte, ich möchte eine Spalte löschen. diese Weise können wir hier eine Methodenlöschspalte bereitstellen, und wir müssen innerhalb der COM-Punkt-ID übergeben. Und hier oben, wie Sie sehen können, haben wir Zugriff auf unsere Spalte. Jetzt können wir in unsere Komponente springen und diese Methode erstellen. Dalit-Spalte erhält also nur ein einziges Argument, nämlich unsere Spalten-ID, die wir entfernen und wo sie ungültig wird. Und jetzt wollen wir drinnen einfach unseren Shared Service anrufen. Hier wird also diese Kolumnendienstwelt oder der Herodes sein. Jetzt haben wir hier eine Methode delete column inside. Wir müssen ein Board-AD bereitstellen, und tatsächlich sind es diese Board-AD und dann die Spalten-ID. Diese Codezeile sendet also ein Ereignis an unser Backend, um diese Spalte zu entfernen und alle unsere Kunden zu benachrichtigen. Und jetzt müssen wir nur noch unser Abonnement hier oben abonnieren , dass wir unsere Spaltenliste aktualisieren möchten. Hier können wir hier eigentlich etwas Ähnliches kopieren und verschweißt haben hier Säulen Erfolg. Ich kopiere es, füge es ein und füge es hier unten ein. Und hier haben wir delete und tatsächlich löschen mit hat es nicht richtig gemacht. Ich möchte zurück in unsere Controller-Säulen springen. Wie Sie hier sehen können, haben wir i2 data board sie emittieren, und hier habe ich nur den Namen geändert spalten löscherfolg, aber es ist nicht genug. Wir müssen hier einige Daten angeben, da eigentlich alle unsere Kunden wissen müssen, welche Spalte wir entfernen müssen. Hier möchte ich als zweiter Parameter die Datenpunktspalte tief bereitstellen. Und in diesem Fall erhalten wir allen unseren Kunden genügend Informationen bezüglich unserer Spaltenlöschung. Jetzt können wir wieder in die Board-Komponente springen und hier ist unser Hören. Und eigentlich hören wir uns hier unsere Kolumnen an , Erfolg löschen. Und hier erhalten wir keine Spalte, sondern nur die Zeichenfolge, die wir entfernen möchten. diesem Grund können wir hier schreiben , dass dies die Spalten-ID ist und dies tatsächlich genug Information ist damit der Client eine Spalte entfernen kann. Deshalb können wir hier jetzt Board Service Dot anrufen. Und hier haben wir unsere Löschspalte. Und im Inneren stellen wir, wie Sie sehen können , Spalte D zur Verfügung, und genau das haben wir hier von unserem Backend. Also haben wir eigentlich alles für unser Feature implementiert. Prüfen wir, ob es funktioniert. Lassen Sie uns zunächst das Backend überprüfen, das wir hier haben, ein Problem. Spalte löschen existiert nicht im Typ und hier sind Spalten. Schauen wir uns das an. Ich werde zurück in unsere Controller springen, und hier haben wir unser Löschboard. Das ist also das Problem. Ich kopiere die eingefügte Delete Board-Methode, aber sie haben sie nicht umbenannt. Es sollte Spalte löschen sein. Lass uns das nochmal überprüfen. Ich speichere es und springe in die Konsole. Und wie Sie jetzt sehen können, haben wir keine Fehler. Schauen wir uns jetzt unseren Kunden an. Alles sieht gut aus. Also lasst uns zu unserem Board springen. Wie Sie sehen können, funktionieren unsere Seiten. Und jetzt kann ich hier klicken, um zum Beispiel diese vollständige Spalte zu entfernen . Ich klicke darauf und wie du siehst, ist es komplett weg. Und was noch interessanter ist, wir können die Registerkarte duplizieren und versuchen, diese nächste Spalte zu entfernen , F, F, d, d usw. Ich treffe hier Kreuz und es wird nicht nur hier, sondern auch in dieser Registerkarte entfernt . Und alles wird automatisch aktualisiert, was bedeutet, dass wir die Entfernung der Spalten in unserer Anwendung erfolgreich implementiert haben. 41. Update: In diesem Video müssen wir eine der letzten Funktionen in Bezug auf unser Board implementieren , und dies ist die Aktualisierung der Kolumne. Und wie Sie bereits verstehen können, ist es sehr ähnlich, die Spalte zu löschen. Der einzige Unterschied ist, dass wir ein Inland von den aktualisierten haben werden, aber viele Dinge werden genau gleich bleiben. Wo ein Meeting, ich bin ein Socket-Ereignis, bei dem es ins Backend kommt , und wenn wir alle unsere Clients definieren, ist dies y. Lassen Sie es uns jetzt gemeinsam implementieren, zunächst möchte ich zurück in unseren Server springen Quelltypen. Und hier müssen wir Inside-Socket-Ereignisse in neuen Typen und Hairball in die Kopfsäulen-Note erstellen , ich kann es kopieren, einfügen und zwei Spalten umbenennen Update. Also hier haben wir die Spalten Update, Spalten Updates, Erfolg und Misserfolg. Hier rechts. Dann können wir es in Update ändern. Dann ein Erfolg beim Geburtsdatum und ein Aktualisierungsfehler, nachdem dieses Lithium wieder in unserer Schwesternschaft S und hier und Ihrem eigenen Event ist. Also hier kopiere ich das Löschen der eingefügten Spalte und ändere es unser Spaltenupdate , das wir gerade erstellt haben. Und hier verwenden wir unseren Columns Controller, aber hier bekommen wir nicht delete column sondern update column. Jetzt müssen wir diese Aktion erstellen, aber tatsächlich können wir sie von unseren Boards kopieren und einfügen , da wir hier bereits ein Update Board implementiert und es wird super ähnlich sein. diesem Grund möchte ich das Einfügen vollständig kopieren und unten in unseren Spalten-Controller einfügen. Hier muss zunächst die Benennung geändert werden. Also hier haben wir unsere Update-Kolumne und eigentlich möchte ich es mit der armen Dame und den Feldern genau so belassen . Wir haben also genau die gleiche Struktur. Hier brauchen wir nur die Spalten-ID, die eine Zeichenfolge ist. Und das einzige Feld, das wir hier aktualisieren, ist unser Titel. Jetzt ändern wir unseren Inhalt. Hier werden wir Socket-Ereignisse in m haben und hier wurde ein Spaltenaktualisierungsfehler erstellt. Und lassen Sie uns auch unseren Fang ändern, hier wird auch ein Fehler beim Aktualisieren der Spalte sein. Jetzt müssen wir unsere Logik ändern. Anstelle von Bohrs Modell werden wir hier ein Säulenmodell haben und wir werden bis zum Ende-Update eine Geldstrafe verhängen. Das ist völlig in Ordnung. Aber hier wollen wir kein Board bekommen, sondern spaltenweise ID. Und hier haben wir Datenfelder. Dies ist völlig normal und wird rückwärts aktualisiert und nicht aktualisiert. Jetzt möchten wir hier allen unseren Kunden unsere Veranstaltung vorstellen, die ein Erfolg der Kolumnenaktualisierung sein wird. Und hier müssen wir unsere aktualisierte Spalte bereitstellen , damit sie auf dem Client geändert werden kann. Unser Backend ist erfolgreich, es hat sich geändert. Jetzt müssen wir unseren Kunden auf den neuesten Stand bringen. Und zuerst möchte ich diese drei neuen Ereignisse kopieren, nämlich die Spalten Update, Erfolg und Misserfolg. Lassen Sie uns nun zurück in die Quell-App unserer Kunden springen. Und hier haben wir nicht gesagt, dass unsere Typen Socket-Ereignisse vergossen werden. Und hier unten werde ich Spalten hinzufügen Update Erfolg und Misserfolg. Jetzt wollen wir unseren Shirts-Service ändern , der dafür verantwortlich ist, Anfragen an unsere API zu stellen. Hier sind die Services-Spalten und hier haben wir bereits eine Delete-Spalte implementiert, aber wir müssen jetzt unsere neue Methodenaktualisierungsspalte tun. Hier wissen wir schon , was wir bekommen. Wir bekommen hier unsere Board-ID, die eine Zeichenfolge ist. Danach erhalten wir unsere Spalten-ID, die auch eine Zeichenfolge ist. Und zu guter Letzt sind unsere Felder, bei denen es sich um ein Objekt mit einem Titel handelt, bei dem es sich um eine Zeichenfolge handelt. Und zurück werden wir nichtig, weil wir hier einfach ein Ereignis ausstrahlen. Hier trifft sich der Hörsteckdosen-Service Datta und wir wollen hier die Steckdose verwenden, um sie sogar zu sehen. Und hier haben wir unsere Spaltenaktualisierungsaktion als zweiten Parameter. Wir müssen für alles sorgen. Zuallererst Board AT zweitens Spalte bedürftig. Und zuletzt sind Filme. Und damit ist unser Service komplett fertig. Jetzt müssen wir unseren Boardservice aktualisieren , damit wir unsere Komponente ändern können. diesem Grund werde ich in unsere App springen, Board Services, Board Service. Und hier haben wir bereits ein Methodenaktualisierungsboard erstellt. Hier erstellen wir unsere Update-Spaltenmethode. Und wir wissen, dass diese Gruppe einen einzelnen Datensatz innerhalb unseres Arrays aktualisieren möchte . Und hier wollen wir nur eine etwas veraltete Spalte bekommen. Das haben wir von unserem Backend bekommen. Hier. Wir bekommen die gesamte Spaltenschnittstelle und zurück wollen wir void werden. Nun, hier ist unsere Idee. Wir müssen jede einzelne Spalte durchgehen und diese Spalte für Tag aktualisieren. diese Weise können wir hier unsere aktualisierten Kolumnen zurückerhalten. Und hier wollen wir zunächst den Wert unseres Streams erhalten . Hier erhalten unsere Spalten einen Wert und wir mappen durch dieses Array. Also hier ist map und wir bekommen Zugriff auf jede einzelne Spalte hier drin, in der wir unsere Logik schreiben müssen. Wenn also unsere Spalten-ID , die wir durchlaufen , unserer aktualisierten Spaltenpunkt-ID entspricht, müssen wir unsere Magie entfalten. Und wenn nicht, dann wollen wir unsere Kolumne einfach ohne Update zurückgeben. Was wollen wir nun innerhalb der ersten Schleife tun , um diese spezifische Spalte zu aktualisieren. Deshalb möchte ich unsere Kolumne mit dem Titel zusammenführen. Und hier stellen wir einen aktualisierten Spaltenpunkttitel zur Verfügung. In diesem Fall aktualisieren wir hier nur eine einzige Jacke , wenn sie passt. In anderen Fällen, wo einfach unsere Kolumne zurückgegeben wird. Danach müssen wir nur noch unseren Stream mit diesen Spalten aktualisieren . Wir werden in unseren aktualisierten Spalten bereitgestellt, sodass unsere Methode vollständig bereit ist. Jetzt müssen wir nur noch unsere Komponente aktualisieren. Lassen Sie uns also zurück in unsere Board-Komponente springen, und hier haben wir unseren Spaltentitel, aber statt nur eines Titels müssen wir uns hier im Trend befinden Inline-Form, das ist y hier. Lassen Sie uns das Inline-Formular ausprobieren und schließen wir es hier direkt. Nun müssen wir hier zunächst unsere Klasse festlegen , die hinzugefügt wird Spaltenform. Danach müssen wir Standardtext bereitstellen. Und hier wollen wir den Namen unserer Spalte schreiben, die Spalte sein wird, den Titel, aber auch hier einen Wert angeben müssen. Das ist y, hier ist der Titel , der unser Spaltentitel ist. Und der letzte ist unser Callback , der mit submit behandelt wird. Und tatsächlich können wir diese Methode benennen, aktualisieren, Spaltennamen, und darin bekommen wir Festival, unser Event, das eigentlich unser Spaltenname ist. Und hier müssen wir zusätzlich die Spalten-ID angeben, da Groupon nicht weiß, für welche Spalte wir diesen speziellen Bildschirm aktualisieren möchten. Lassen Sie uns nun diese Methode in unserer Komponente erstellen. Also hier unten möchte ich den Namen der Aktualisierungsspalte hinzufügen. Und hier bekommen wir zuallererst unseren Spaltennamen, der die Zeichenfolge aus unserem Inlandspaß ist. Und zweitens bekommen wir hier unsere Spalten-ID. In diesem Fall wissen wir, was wir aktualisieren müssen und was wir hier tun wollen. Wir wollen unsere Methode nur aus Shred-Spalten aufrufen. Das ist y, hier, dieser Spaltendienst, und hier ist unsere Methodenaktualisierungsspalte , die wir gerade erstellt haben. Zunächst müssen wir hier unsere Board-ID, Spalten-ID und auch unsere Felder angeben . In unserem Fall haben wir hier nur ein einzelnes Feld, das unser Titel sein wird, nämlich unser Spaltenname. Auf Kundenseite ist alles bereit, aber wir müssen den Erfolg eines Geburtsdatums in der Spalte abonnieren . Deshalb müssen wir hier ganz oben gehen, auf jetzt einen Socket-Service. Und eigentlich haben wir hier schon unser Update des Boards, was eigentlich bedeutet, dass ich diese Zeilen kopieren, einfügen und einfach ändern möchte . Denn hier zurück erhalten wir unsere Spaltenschnittstelle, nachdem wir unsere Kolumne aktualisiert haben. Und eigentlich wollen wir hier abonnieren, um sie als Update-Erfolg zu bezeichnen. Und hier bekommen wir kein aktualisiertes Board, aber wir bekommen eine aktualisierte Spaltennummer eine andere Methode von unserem Board-Service aufrufen muss. Und diese Methode wird Update-Spalte sein. Und im Inneren stellen wir unsere aktualisierte Spalte zur Verfügung, was bedeutet, dass mit diesem Code alle unsere Kunden benachrichtigt werden und wir diese spezielle Spalte aktualisieren werden. Schauen wir mal, ob es hier im Backend funktioniert, alles sieht gut aus. Hier auf dem Client haben wir keine Fehler. Lass uns zum Browser springen. Und wie Sie hier sehen können, habe ich diesen schönen Namen und jetzt kann ich darauf klicken , weil dies unsere Inlandsfirma ist und nicht nur der Titel. Jetzt versuchen wir es hier, aktualisiert und ich drücke die Eingabetaste. Und wie Sie sehen können, wurde es aktualisiert und das Laden der Seite verschoben, dann ist dieser Code auch Fleck, was bedeutet, dass wir diese Änderung erfolgreich im Backend vorgenommen haben und sie haben alle unsere Kunden. Und hier, wenn ich zur zweiten Registerkarte springe, sieht es genauso aus, da es auch über Socket IO aktualisiert und benachrichtigt wurde . Vor diesem Hintergrund haben wir unsere Update-Funktion in der Spalte erfolgreich implementiert . 42. Abmelden: In diesem Video möchte ich über das Abbestellen sprechen , da wir tatsächlich ein Problem haben. Schauen wir uns unseren Board-Komponententest an. Hier haben wir unsere initialisierenden Listener und wir verwenden dot subscribe ziemlich oft. Und tatsächlich müssen Sie wissen, dass Sie in Angular jedes Mal, wenn Sie das Wort Abonnieren schreiben, in Gefahr sind, weil Sie dort ein Abonnement erstellen. Und dieses Abonnement wird dort bis zum Ende der Welt hängen. Was zum Beispiel bedeutet, dass wir unser Board verlassen und zu einem anderen Board springen. Und all diese Abonnements sind bereits da und werden niemals zerstört werden , da alle Abonnements nichts mit unserer Komponente zu tun haben und das Angular nicht. irgendwas über sie. Aber hier ist es wichtig zu erwähnen, wenn wir innerhalb von Angular über den HTTP-Client sprechen, dann dürfen wir uns nicht davon abmelden. Dies ist nicht zwingend erforderlich, da Angular automatisch abmeldet, was bedeutet, dass wir hier, wenn wir diesen Router Ereignisse abonnieren, das völlig in Ordnung ist. Hier können wir auch auf unsere Abrufdaten schauen und hier abonnieren wir auch unsere Langeweile. Und dafür müssen wir uns langweilen und überprüfen, was wir hier haben. Und tatsächlich ist das ein ziemlich großer Gad, ein HTTP-Client, was bedeutet, dass dieser Code völlig in Ordnung ist und wir uns nicht abmelden sollten. Aber eigentlich ziehe ich es vor, mich überall abzumelden, in jeder einzelnen Anwendung, in der ein C-Abonnement besteht, weil man nie weiß, was genau diese Get-Board-Methode ist? Ist es wirklich ein HTTP-Client oder ist es nur ein Wrapper? Und du musst dich wirklich abmelden. Und die Frage ist, wie Sie sich in Ihrer Bewerbung abmelden können , um es bequem zu machen. Und dafür gibt es viele Möglichkeiten. Und eigentlich wollen wir uns immer abmelden, wenn wir eine Komponente zerstören. Und in der Regel, wo diese Turner-Komponente, wenn wir uns umziehen, was eigentlich bedeutet, dass wir hier so etwas wie dieses Board-Abonnement schreiben können . Und hier erhalten wir das Ergebnis unseres Abonnements und das Ergebnis des Subscribe Easy-Abonnements, was tatsächlich bedeutet, dass pro Masse diese Eigenschaft erstellt wird und dann direkt in unserer Engine destroy Boards Abo dot abbestellen. Das ist absolut gültig, aber dann werden wir viele Immobilien schaffen und das ist nicht so komfortabel. diesem Grund gibt es bessere Möglichkeiten, dies zu tun. Ich wollte Ihnen einen einfachen Ansatz zeigen , den Sie verwenden können. Was ich in meiner Board-Komponente tun möchte, möchte ich eine weitere Eigenschaft erstellen und sie möchten diese Eigenschaft abbestellen. Und eigentlich möchte ich hier Dollar setzen , weil es ein Stream sein wird. Und hier möchte ich ein neues Fach und eigentlich auch das Jugendverhaltensfach innerhalb unseres Vorstands zuweisen eigentlich auch das Jugendverhaltensfach . Aber hier haben wir ein neues Thema mit Leere, und ich nenne es nur, der Hauptunterschied zwischen Subjekt und Verhaltenssubjekt ist das Verhaltenssubjekt immer einen Anfangswert hat und dann sag, Subjekt, wir haben keinen Anfangswert. Jetzt wollen wir hier Geräte auf Destroy hinzufügen, was eigentlich bedeutet, dass wir in G on destroy erstellen müssen. Und jetzt sprechen wir hier in Deutschland darüber. Und hier können wir im Juni destroy schreiben und was wir drinnen machen wollen, wir wollen diesen Abmeldepunkt als nächstes schreiben, also spalten wir den nächsten Wert. Und danach ist dieser Abmeldepunkt abgeschlossen, was bedeutet, dass wir, nachdem wir diese Komponente zerstört haben, keine neuen Werte innerhalb dieses Abmeldevorgangs erhalten möchten. Und jetzt können wir dieses Abbestellen überall verwenden , um Abonnements zu ignorieren. Wie sieht es aus? Eigentlich müssen wir es hier nicht verwenden, aber wir müssen es innerhalb des Socket-Service verwenden, da es sich um aber wir müssen es innerhalb des Socket-Service verwenden ein benutzerdefiniertes Abonnement handelt. Und um das zu tun, bevor wir es abonniert haben, können wir es einfach versuchen dot pipe und innen wollen wir die Methode take verwenden bis und innerhalb wollen sie dieses Abbestellen , das wir gerade erstellt haben, was eigentlich bedeutet, dass wir hier nehmen, okay, wir müssen neue Werte annehmen und dieses Abonnement haben , bis diese Abmeldung gültig ist. In dem Moment, in dem wir Colin komplett mit Bond sind, kommen Sie hier zu unserem Abonnement. Was eigentlich bedeutet, dass wir in jedem einzelnen Fall, wenn wir ein Abonnement haben, einfach vorher versuchen können, indem wir es bis zu diesem Abbestellen aufnehmen. Und wir können loslegen, nachdem unsere Komponenten zerstört werden. Hier werden wir vollständig und diese Logik wird niemals passieren. Dies ist wirklich eine komfortable und einfach zu implementierende Variante , abbestellen. diesem Grund möchte ich diesen Code kopieren, einfügen und in jede einzelne Lektion einfügen, die wir hier kurz vor dem Abonnieren schreiben. In diesem Fall ist es auf der sicheren Seite, und wir werden diesen Code nicht aufrufen, nachdem wir eine Komponente zerstört haben. Jetzt möchten Sie sicher wissen, ob es wirklich so funktioniert. Aus diesem Grund können wir, um es zu testen, einfach auskommentieren, bis zum Beispiel in Spalten, der Zugriff auf Updates erfolgt . Aber eigentlich wird es so nicht funktionieren denn als wir das Board verließen, sendet Bacon keine Ereignisse mehr, um zu fragen. Aus diesem Grund wird das, was wir nur zum Testen tun können , in den Controller-Spalten eingesetzt. Und hier ist unsere Methodenaktualisierungsspalte, und hier haben wir unsere Funktion sind Ihre beiden. Und hier müssen wir nur Kunden finden , bei denen sie sich in diesem speziellen Teil befinden. Nur zum Testen werde ich hier entfernen, um alle Kunden überhaupt zu benachrichtigen, weil sie Ihnen zeigen möchten, dass dieses Abonnement immer noch da ist, wenn wir das Board verlassen. Also jetzt hier möchte ich einfach versuchen, das Konsolenprotokoll zu erstellen. Spalte wurde aktualisiert. Hier ist unsere aktualisierte Kolumne. Schauen wir uns das an. Ich lade die Seite neu, springe zu diesem Punkt und versuche die Spalte zu aktualisieren. Wie Sie sehen können, ist dies unser Konsolenprotokoll, und hier haben wir auch das Konsolenprotokoll. Es ist völlig in Ordnung. Aber jetzt springen wir zurück zu unseren Boards und wir haben nichts und unsere Komponente wurde zerstört. Jetzt hier auf der zweiten Registerkarte werden wir diese Spalte aktualisieren. Und wie Sie hier sehen können, fügen Sie den ersten Schritt ein. Wir haben diese Spalte wurde aktualisiert und wir bekommen sie, weil dieses Abonnement immer noch hängt mit Wir haben uns nicht von unserem Code abgemeldet und dafür angegeben, wir können einfach die Kommentare entfernen bis , Lass es uns versuchen es Jetzt springen wir in unsere Anwendung. Wir bekommen eine aktualisierte Kolumne, in der der Champion zurück zu unseren Boards kommt. Und jetzt können wir hier versuchen, unsere Kolumne zu aktualisieren. Aber wie Sie jetzt im ersten Schritt sehen können, haben wir keine Nachricht erhalten, da hier diese Einstellung erst durchlaufen wurde. Aus diesem Grund ist es so wichtig, alle unsere Abonnements abzubestellen . Jetzt ändern wir diesen Code zurück. Zuallererst benötigen wir dieses Konsolenprotokoll nicht. Und zweitens werde ich in unsere Controller-Spalten springen und Code zurück in die i2-Datenbank-ID ändern. In der realen Anwendung empfehle ich Ihnen daher dringend, sich von all Ihren Abonnements abzumelden. 43. Aufgabenmodul und Basiskomponente: In diesem Video starten wir neue und interessante Funktion und sprechen dann hier über das Feature-Aufgabenmodell. Was bedeutet es? Eigentlich, wie Sie hier sehen können, wo innerhalb des Boards und wenn wir innerhalb dieses Punktes auf eine bestimmte Aufgabe klicken , müssen wir hier ein Modell öffnen, aber so einfach ist das nicht, denn was wir wollen zu tun, wir wollen unser Routing ändern. Jetzt haben wir also eine Schrägbrett-Slash-Board-ID. Und wenn wir eine Aufgabe nach dem Neuladen der Seite öffnen, möchten wir dieselbe Aufgabe sehen. Und der einfachste Weg, dies zu implementieren, ist offensichtlich das Routing. Also wollen wir in dem Moment, in dem wir eine Aufgaben-URL wie Slash Board Slash Board ID Slash-Aufgaben Slash-Aufgabe KD öffnen , was eigentlich bedeutet, dass wir eine verschachtelte Route innerhalb des Boards haben. Und tatsächlich erlaubt uns Angular wirklich einfach, die Dürren der Kinder zu bewältigen. Warum brauchen wir hier eine Kinderdürre? Da sie tatsächlich hier sind, wollen wir zunächst das gesamte Board rendern und zusätzlich dieses Modell rendern, was eigentlich bedeutet, dass unser Modell hier oben und unter unserem Modell sein wird, werden wir sehen das ganze Board. Und das ist extrem wichtig, denn tatsächlich werden wir, sogar innerhalb des Modells, das gesamte Board holen. Und tatsächlich wird diese gesamte Komponente gerendert, wie sie ist, ohne Änderungen. Und was auch in unserem Aufgabenmodell interessant ist, wir werden diese Informationen aus dem Board verwenden, und genau das haben wir hier implementiert. Hier in unserer Kundenquelle, App, Board Services, Bot Service haben wir drei Streams. Unsere Aufgabenspalte und, aber, und das ist erstaunlich, denn jetzt können wir in unserem Aufgabenmodell alle unsere Aufgaben lesen, benötigte Aufgabe anhand dieser ID innerhalb der URL finden , die wir in einer Sekunde implementieren werden und dann rendern Sie einfach diese Informationen der Aufgabe ohne zusätzliche Anfragen. Und in diesem Video möchte ich mit den Grundlagen dieses Aufgabenmodells beginnen . Hier wollen wir eine Basiskomponente erstellen und unsere Route korrekt binden. Und dafür möchte ich zurück in unser Board-Modul springen . Und hier haben wir unsere Route mit Schrägbrettern, Schrägbrett-ID. Und hier wollen wir eine Kinderdürre haben. Hier können wir Kinder schreiben und das ist ein Array. Hier haben wir auch ein Objekt mit Pfad, das Tasks Slash sein wird. Und hier ist die Aufgaben-ID, was eigentlich bedeutet, dass wir hier den übergeordneten Pfad und unseren untergeordneten Pfad nehmen . Und zusammen haben wir hier unseren Aufgaben-ID-Pfad, müssen aber auch eine Komponente bereitstellen , die wir in einer Sekunde erstellen werden. Und es ist unsere Aufgabenmodellkomponente. Aber wir haben auch keine Änderung unserer Route implementiert. Und dafür möchte ich in unser Komponentenboard springen. Und hier ist Komponenten-HTML gekauft. Und wie Sie hier sehen können, haben wir einen Link zu unserer Aufgabe. Dies ist diese Aufgabe der Div-Klasse, und hier ist Energie für die Schleife. Und eigentlich wollen wir hier ein Klickereignis schreiben. Und was wir tun wollen, wir wollen die Aufgabe öffnen. Und dafür brauchen wir nur unsere Aufgabenpunkt-ID. Und was wir innerhalb dieser Methode tun wollen , ist einfach eine Route zu ändern. Das ist so hier. Lassen Sie uns diese offene Aufgabe innerhalb der Board-Komponente erstellen. Und hier bekommen wir unsere Aufgaben-ID, die eine Zeichenfolge ist. Auf der Rückseite werden wir nichtig. Und jetzt können wir hier einfach unseren Router benutzen , um die Route zu ändern. Also hier können wir diesen Router dot navigate schreiben, und wir verwenden hier navigate und nicht nach URL navigieren , weil wir innerhalb eines Arrays übergeben wollen. Hier. Zuallererst haben wir Boards, dann verketten wir diese Zeichenfolge mit dieser Board-ID und dann mit einem Komma. Und wir haben hier unsere Aufgaben, und hier haben wir unsere Aufgaben-ID. Wie Sie sehen können, ist es viel einfacher, navigate mit array zu schreiben und dann nach URL zu navigieren, wo wir diese Zeichenfolge selbst verketten müssen. Unser Klickereignis ist also komplett fertig, und jetzt müssen wir nur noch diese neue Komponente erstellen. diesem Grund sprechen wir in unserer Platine immer noch über Komponenten für Platinenmoduleinsätze. Wir wollen unsere neue Komponente erstellen und sie wird unser Aufgabenmodell sein. Jetzt innen mit zuallererst, müssen eine Aufgabe Modell Ts und auch Aufgabenmodell Punktkomponente Punkt HTML erstellen . Und jetzt hier im HTML möchte ich das gesamte Markup unseres Modells ohne Logik direkt verknüpfen. In diesem Fall können wir direkt sehen, dass der Begriff Modell funktioniert und der Router auch funktioniert. Hier schreiben wir den gesamten Markt. Hier haben wir zunächst unseren Klassenaufgabenmodell-Container, und hier binden wir noch keine Daten. Jetzt in diesem Div müssen wir es noch einmal tiefer ausprobieren, und es wird unser modaler Task-Header sein. Schließen wir dieses Div und darin werden wir später unseren Aufgabentitel in Zeilenform rendern . Und nach unserer Inlandform müssen wir hier ein Bild rendern. Und tatsächlich wird hier Source Slash Assets Slash Schließen Symbol Punkt SVG sein. Und hier müssen wir auch eine Klasse bereitstellen , die eine Aufgabe sein wird. Model nah und eigentlich habe ich es nicht richtig geschrieben. Dieses Bild muss nach unserem Aufgabentitel Inline-Firma stehen. Wir sprechen hier also über den modalen Header für Aufgaben. Und nach dem modalen Header der Dämmerung wollen wir das nächste Div erstellen, das der modale Task Body sein wird. Schließen wir hier unser div und innen wollen wir ein Motiv erstellen, weil wir unsere Elemente gruppieren müssen. In diesem Div möchten wir unser Formular später erstellen. Sie fragen sich vielleicht, okay, aber warum verwenden wir hier Justin Lin Firma und hier wollen wir eine echte Firma gründen, denn tatsächlich brauchen wir hier später auch eine Auswahl, um unsere Spalte zu ändern. diesem Grund ist es für dieses Forum viel einfacher zu verwenden. Das ist mein hier. Lassen Sie uns vorerst ein Formular ohne feste Gruppe erstellen , einfach Glas verquirlen. Und hier haben wir unseren Spaltenauswahlcontainer. Schließen wir dieses Formular. Und in unserem Formular werden wir später eine Auswahl rendern, aber im Moment haben wir sie nicht. Hier wählen Sie einfach die Spalte aus. Und danach wird die Firma ein Motiv erstellen wollen, in dem wir unsere Aufgabenmodellbeschreibung haben werden. Und hier haben wir unser div mit der Beschreibung des Klassenaufgabenmodells. Und dann schreiben wir einfach eine Wortbeschreibung. Nach diesem Div haben wir ein Inline-Formular für unsere Beschreibung. Hier ist eine Inline-Formularbeschreibung , die wir spät erstellen werden. Und jetzt, nach diesem Div, das wir erstellt haben , müsste ein Motiv erstellt werden. Und hier haben wir unsere Aufgabenmodellaktionen mit zuallererst, benötigen eine zusätzliche Klasse und es werden Aufgabenmodellaktionen sein , die beschriftet sind, und innerhalb dieses Divs werden wir einfach Aktionen schreiben. Und danach müssen wir noch ein Div erstellen. Und in diesem Div packen wir ein Motiv mit Klasse, Aufgabe, Modell, Aktionen, Aktion. Hier, schließen wir dieses div und dann können wir im Inneren ein Bild mit Quell-Slash-Acidslash-Trash-SVG rendern . Und hier ist unsere Klasse, die als Modellaktionssymbol beauftragt wird. Und nach dem zweiten werden wir einfach ein Wort löschen. Und nach dem gesamten Markup am Ende müssen wir einen Hintergrund rendern, damit unser gesamtes Board ein bisschen versteckt ist. Hier müssen wir div mit dem Hintergrund des Klassenaufgabenmodells erstellen Hintergrund des Klassenaufgabenmodells Schließen wir dieses div damit unser Markup vollständig fertig ist. Jetzt müssen wir nur noch diese Komponente erstellen. Lassen Sie uns hier zunächst eine Klasse erstellen und sie wird unsere modale Aufgabenkomponente sein. Oben wurden unsere Komponente gemeistert, und wir registrieren uns im Inneren. Zuallererst wird ein Selektor, es wird ein Aufgabenmodell sein. Und danach, eine Vorlagen-URL und geschweißt, desto schwerer ist es Aufgabe modale Komponente HTML, aber es ist nicht alles. Wir müssen eine weitere Klasse für den gesamten Wrapper dieser Komponente bereitstellen . Nur in diesem Fall wird unser Markt korrekt sein. Und hier müssen wir gerade Host-Bindung. Und hier biete ich Einblickskurse an. Hier können wir Klassen gleich Aufgabenmodell schreiben. Und wenn Sie so etwas nie geschrieben haben, verwenden wir eine solche Notation, wenn wir diese Klasse nicht auf einige tief in dieser Komponente anwenden müssen , aber wir möchten, dass genau eine Klasse auf unsere Komponenten-Element. Also haben wir einige grundlegende Komponenten erstellt. Prüfen wir jetzt, ob es überhaupt funktioniert. Also Festival hier haben wir eine Menge Fehler. Zum Beispiel kann hier im Board-Modul keine modale Komponente der Aufgabe finden. Zuallererst müssen wir hier in unser Board-Modul springen. Und hier müssen wir unsere Aufgabenmodellkomponente eingeben. Und wir müssen es auch hier innerhalb der Deklaration bereitstellen, das ist eine Aufgabenmodellkomponente. Lassen Sie uns noch einmal nachschauen mit habe hier keine Fehler. Ich werde die Seite neu laden und sie sehen jetzt keine Fehler in der Konsole. Aber was wir jetzt tun müssen, wir müssen auf eine der Aufgaben klicken. Hier ist zum Beispiel meine erste Aufgabe und ich klicke nur. Und wie Sie sehen können, ist nichts passiert. Aber in der Dürre können wir jetzt Bretter zerschneiden, unsere Board-ID zerschneiden, Aufgaben zerschneiden und das d unserer Aufgabe, die wir gerade geöffnet haben, zerschneiden . Und jetzt fragen Sie sich vielleicht, okay, aber warum wir unsere Komponente nicht sehen und eigentlich nicht den Outlet für unsere Kinder im Trend haben , was eigentlich bedeutet, dass innerhalb unseres Boards, innerhalb des Board-Komponenten-HTML, Irgendwo in unserem Markup, zum Beispiel unten, müssen wir Zhao Outlet genauso rendern , wie wir es in unserer App-Komponente getan haben. Also hier schließen wir einfach den Router Outlet und jetzt muss es funktionieren. Ich werde die Seite neu laden. Und wie Sie sehen können, sehen wir unser Modell daran, denn das ist eigentlich die Route. Und jetzt sehen wir jedes Mal, wenn ich die Seite neu lade, unsere Eltern im Hintergrund. Und hier sehen wir unser Modell und haben tatsächlich bereits einige grundlegende Markups für dieses Modell, was bedeutet, dass es voll funktionsfähig ist. Aber jetzt möchte ich eine große Fallgrube beheben , von der es sehr schwierig sein wird, das zu debuggen, wovon ich spreche. Wie Sie hier in unserer Board-Komponente sehen können, haben wir hier einen Routencheck und tatsächlich haben wir hier oben diese Event-Navigationssterne abonniert. Und hier lösen wir Live Born aus. Was macht Live-Board? Eigentlich treffen wir hier ein Socket-Ereignis für unser Back-End, was eigentlich bedeutet, dass wir uns in diesem aktuellen Socket abmelden Unser aktueller Benutzer von Ihnen ging auf diesen Punkt , der tatsächlich bedeutet, dass wir hier an diesem Punkt waren, Slash Board Slash AD. Und jetzt bekommen wir hier Events. Alles ist in Ordnung. Aber in dem Moment, in dem wir unser Modell öffnen , haben wir uns verändert. Und tatsächlich bedeutet es, dass wir hier in dieser IV sind und hier live sehen, was wir leicht überprüfen können. Zum Beispiel werde ich es hier einfach live ausprobieren, aber ich lade die Seite neu. Es sieht gut aus. Aber wenn ich zu unseren Boards springe und dann einfach auf meine erste Aufgabe klicke. Wie Sie hier sehen können, bekommen wir Leave Board. Dies wird komplett neu gezeichnet, da wir in diesem Fall keine Benachrichtigung in unserem Board erhalten, aber das Board bereits verlassen haben. Das ist Sean Verhalten weil wir kein Board leben wollen. Wenn wir das Modell nur öffnen, wollen wir immer noch auf dieser Seite sein, aber wir können tun, um es zu reparieren, wir müssen eigentlich nur nach unserer Slash Board-Route suchen. Denn wenn wir hier in der Dürre Schrägstriche haben, bedeutet das, dass wir immer noch auf dieser Seite bleiben. Denn wenn wir auf unsere Board-Seite zurückspringen, dann haben wir hier nur Schrägstriche und wir haben keinen Schrägstrich. Und dann kann ich hier end not event dot URL schreiben . Und das ist die gesamte URL, zu der wir gehen, enthält, und wir überprüfen, ob dieser spezifische URL-Schrägstrich Boards Schrägstrich ist. Also werden wir hier tatsächlich unser Lives-Board auslösen , wenn unser Navigationsstart passiert ist. Und diese URL, die wir verwenden enthält keinen Slash-Port-Schrägstrich. Dieser Schrägbrett-Schrägstrich ist entweder unsere Einzelbindung oder unser Single-Board-Modell. Prüfen wir, ob es funktioniert. Ich klicke hier auf meine erste Aufgabe und jetzt werden wir nicht mehr links, was bedeutet, dass alles gut funktioniert. Und jetzt implementieren wir gemeinsam. Geh zum Board, denn das ist nur eine einzige Zeile, die ich machen möchte. Ich möchte in unser Aufgabenmodell einsteigen. Und hier oben haben wir dieses enge Bild. Und eigentlich können wir hier zusätzlich einfach ein Klickereignis erstellen und es nennen, an Board gehen. Jetzt können wir direkt in unser Aufgabenmodell springen und diese Methode erstellen, weiter zur Bindung. Und was müssen wir in dieser Komponente wissen , um in unser Board zu springen, müssen wir aus diesem Jahr lesen. Nun, zuallererst, unsere Aufgaben-ID, werden wir sie auf jeden Fall brauchen. Und hier am wichtigsten, Board AD, was tatsächlich bedeutet, dass wir den gleichen Code schreiben, wie wir es in unserem Konstruktor innerhalb des Boards getan haben. Also hier registrieren wir unseren Konstruktor. Und drinnen müssen wir zuallererst unseren Vorstand AT bekommen. Dafür müssen wir die Route verwenden, was eigentlich bedeutet, dass wir hier unsere Route injizieren müssen, die eine aktivierte Route ist. Und jetzt können wir hier diese Route dot snapshot, dot, params, map, dot, get schreiben . Und hier versuchen wir unsere Board-ID zu bekommen. Und wie Sie hier sehen können, werden wir jetzt belastet. diesem Grund ist es sehr sinnvoll zu überprüfen, ob wir unsere Board-ID wirklich haben. In diesem Fall können wir Board-ID und Aufgaben-AD direkt als Eigenschaft in unserer Komponente speichern . So möchte ich hier zunächst unser Board AD erstellen. Es ist eine Zeichenfolge. Und zweitens, Aufgabe Katie, es ist auch eine Zeichenfolge. Jetzt können wir hier überprüfen, okay, ein Board duplizieren. Wenn nicht, müssen wir einen Fehler auslösen. Dies ist, wo hören Sie den Fehler geworfen haben. Und hier können wir sagen, dass die Board-ID nicht von der URL abgerufen werden kann. Und jetzt müssen wir genau dasselbe für unsere Aufgaben-ID tun. Das ist so hier. Versuchen wir, AD zu beauftragen, und wir versuchen, die Aufgabe auf eine andere Route zu bringen. Und jetzt wollen wir hier noch eine Eve schreiben und hier nach Aufgabe AD suchen. Also hier können wir schreiben, können die Aufgaben-ID nicht von der URL abrufen. Aber eigentlich habe ich hier einen großen Fehler gemacht dass Sie sehen können, dass wir eine Board-ID und eine Aufgaben-ID haben, aber mit Taskade ist es völlig in Ordnung. Es ist diese Route Snapshot Params Map. Aber mit Boyd AD ist das nicht in Ordnung, da wir all diese Informationen von unseren Eltern lesen möchten . Deshalb müssen wir hier route dot parent ausprobieren, und hier müssen wir ein Fragezeichen setzen und dann Snapshot-Programme zuordnen. In diesem Fall lesen wir es direkt vom Elternteil. Und jetzt, nach diesen beiden Prüfungen, können wir einfach diese Aufgabe AD zuweisen, und das ist jetzt eine Zeichenfolge, und hier haben wir auch diese Board-ID und sie ist auch eine Zeichenfolge. Jetzt können wir hier die Go-to-Board-Methode implementieren, aber für diesen Mutterleib muss hier injiziert werden. Sie außerdem an, Ihre Route zu ändern. Also hier haben wir unseren Router. Und jetzt können wir innerhalb dieser Methode einfach diese Route schreiben und wie zuvor navigieren. Und hier wollen wir an Bord gehen. Und als zweiter Parameter ist es dieses Board. In diesem Fall wird die URL hier Schrägstriche sein , Schrägstrich-Board-ID. Schauen wir uns das an. Ich lade die Seite hier neu. Ich bin in der Aufgabe und hier klicke ich auf Cross. Und nachdem sie geklickt haben, wo sie direkt einen Einblick-Slash-Vorwärts-Slash-ID springen. Und vor allem hatten wir keine Seite neu geladen. Wir müssen für diesen Teil keine Daten abrufen , da die gesamten Daten vorhanden sind. Und jetzt können wir einfach die zweite Aufgabe öffnen, sie schließen, und sie ist wirklich reibungslos und schnell, da wir hier keine zusätzlichen Informationen abrufen müssen. 44. Erhalte Aufgaben und Spalten: In diesem Video-Coupon können Sie über Datenströme innerhalb unseres Aufgabenmodells sprechen . Hier wird es wirklich interessant sein. Warum ist das so? Da sie tatsächlich bereits die gesamten Daten für jedes einzelne Modell in unserem Board hatten , müssen wir nur diese Daten verwenden und sie innerhalb des Aufgabenmodells korrekt zuordnen. Hier ist das erste, was ich tun möchte , hier unseren Board-Service, den wir bereits haben , und nicht den Board-Service, um nicht mit dem Kuchen zu arbeiten, sondern unseren Board-Service mit dem Staat. Jetzt möchte ich zunächst die Aufgabe finden. Und tatsächlich können wir hier zum Beispiel nach dieser Board-ID im Konstruktor einfach schreiben, nach dieser Board-ID im Konstruktor einfach schreiben, dass diese Aufgabe größer war und es wird unser Stream der aktuellen Aufgabe sein, die wir geöffnet haben. Und hier können wir diesen Sportdienst eigentlich einfach ausprobieren. Und hier haben wir unseren Stream mit allen Aufgaben unseres Vorstands. Und wie Sie sehen, ist es bereits verfügbar, aber wir benötigen nicht die gesamte Palette unserer Aufgaben. Auf diese Weise möchte Boop map verwenden. Hier können wir per Map schreiben und dann angeben, wo wir Zugriff auf all unsere Aufgaben erhalten. Und jetzt müssen wir nur noch eine spezifische Aufgabe finden , die wir für dieses Aufgabenmodell benötigen. Also hier möchte ich einfach Aufgaben finden, und hier drinnen bekommen wir Zugriff auf jede einzelne Aufgabe. Und hier bekommen wir einfach diese Aufgabe von AD und wir vergleichen sie mit dieser Aufgabe AD , die hier oben im Konstruktor ist. Was das eigentlich macht, es verändert unsere Stream-Board-Serviceaufgaben. Und hier ordnen wir nur die einzelne Aufgabe zu und hier holen wir sie zurück. Aber es ist nicht alles nach Map. Ich möchte Filter schreiben und hier drinnen möchte ich einen booleschen Wert angeben. Warum machen wir das? Denn tatsächlich kann es vorkommen, dass am Anfang keine Aufgabe hat, weil wir hier nicht alle diese Aufgaben abgerufen haben , was eigentlich bedeutet, wo in den Konstruktor in unserem Model, das ist unser Stream. Tasks ist einfach ein leeres Array. Hier haben wir versucht, es zu finden und wir können es nicht und wir bekommen ein undefiniertes, aber undefiniert interessiert es nicht schnell. Hier habe ich Filter Boolean geschrieben und es wird einfach jedes undefinierte los. In diesem Fall wird dieser Stream erst erfüllt, wenn wir eine Aufgabe gefunden haben. Versuchen wir nun, dieses Trimm in unserem HTML zu verwenden. Hier oben müssen wir ein Inline-Formular erstellen, den aktualisierten Titel unserer Aufgabe. Und wir können hier einfach unser Inline-Formular schreiben , das bereits hunderte Male verwendet wurde. Und dann zuerst müssen wir eine Klasse festlegen, und hier haben wir das Aufgabenmodell hinzugefügt Titelforum. Danach möchten wir unseren Standardtext festlegen. Und eigentlich müssen wir hier den Titel der Aufgabe angeben. Aber auch hier möchte ich es noch besser schreiben. Wir könnten diesen Stream in unserem HTML verwenden. Aber wie ich bereits zuvor gesprochen habe, können wir verschiedene Datenströme innerhalb einer einzigen Eigenschaft kombinieren , und genau das können wir jetzt hier tun, wir können schreiben diese Daten größer waren und wir hier verwenden können kombinierte neueste, genau wie wir früher und tatsächlich später verwendet haben, werden wir hier nicht nur eine Aufgabe haben, zumindest müssen wir auch hier eine Liste unserer Spalten bekommen, weil wir tatsächlich eine Auswahl haben ändere die Spalte , in der sich diese Aufgabe befindet. Das ist so hier. Zunächst werden wir diese Aufgabe und später zusätzlich Schüler hier haben , Stream für die Kolumnen. Und hier müssen wir all diese Daten per Pipe Map zuordnen und wir wollen unser Array in das Objekt konvertieren. Hier. Zuallererst werden wir unsere Aufgabe bekommen. Hier. Wir müssen nur eine Aufgabe zurückgeben. Jetzt müssen wir diese Daten in dieser Komponente erstellen, auf diese Weise hier oben. Zuallererst müssen wir den Aufgabendollar in beobachtbar ändern. Und hier bekommen wir unsere Task-Oberfläche und jetzt nie, weil wir sie mit Filter überprüft haben. Und jetzt brauchen wir hier auch Daten, die wir gestohlen haben. Und hier werden wir auch ein Observable des Objekts haben. Und hier haben wir unsere Aufgabe, die eine Task-Oberfläche ist. Jetzt sind die Daten bereit, tatsächlich innerhalb des HTML, wir können diese Daten direkt verwenden. Hier in unserem Top-Div werde ich es einfach versuchen. Und G, hier haben wir unseren Stream mit Daten als, und hier bekommen wir Daten, was eigentlich bedeutet, dass wir jetzt in der gesamten Datei einfach Daten verwenden können. Dies ist hier innerhalb des Standardtextes, wir können Datenpunktaufgabe, Punkttitel bereitstellen. Und danach müssen wir einen Titel innerhalb des Formulars angeben, es wird auch der Punkttitel der Datenaufgabe sein. Und wie Sie sehen können, haben wir hier keine Streams, aber tatsächlich haben wir hier innerhalb von data einen Aufgaben-Stream erstellt, dem es sich um eine Zeichenfolge handelt, die auf unserem Stream basiert und in dem wir eine Reihe von Aufgaben haben. Und das Letzte ist eine Ausgabe hier und hier haben wir unser Handle submit, zum Beispiel den Namen der Aktualisierungsaufgabe. Und hier drinnen, wo man eine Veranstaltung bekommt. Und sie wollen nur diese Funktion in unserer Komponente erstellen . Ich werde hier nichts umsetzen. Also hier bekommen wir den Namen unserer Aufgabe. Welches ist ein String, zurück ist nichtig. Und jetzt möchte ich nur noch hier ein Konsolenprotokoll schreiben. Dies ist der Name der Aktualisierungsaufgabe, und hier erhalten wir unseren Aufgabennamen. Schauen wir mal, ob es überhaupt funktioniert. Wir haben hier keine Fehler und sie werden die Seite einfach neu laden. Und wie Sie direkt hier sehen können, bekommen wir meine erste Aufgabe. Wie funktioniert das? Hier erstellen wir unsere Stream-Aufgabe, die auf unseren Aufgaben basiert und tatsächlich viel nach Seiten sucht , wenn kein Fehler auftritt. Und wir könnten es möglicherweise bekommen. Eigentlich nicht, weil wir hier in GE mit Chegg haben, aber es ist immer schön Filter Boolean zu schreiben , nur um zu wissen, dass wir auf der sicheren Seite sind. Und hier bekommen wir unsere erste Aufgabe in diesem Datenstrom. Hier können wir das direkt ändern, meine erste Aufgabe und aktualisiert. Und wie Sie sehen können, ist dies unser Konsolenlog. Natürlich haben wir noch kein Update implementiert, aber wir sind auf dem richtigen Weg. Jetzt. Wir können genau den gleichen Code mit unserer Inline-Formularbeschreibung schreiben. Deshalb möchte ich zurück in unser HTML springen. Hier ist unser Inland aus der Beschreibung. Und eigentlich können wir es hier einfach in der Inline-Form ausprobieren , wie wir es für den Titel getan haben. Und hier haben wir bereits die Daten im Datenstrom. Das ist so hier. Zunächst unser Klassenaufgabenmodell , Bearbeiten, Beschreibung, Formular. Und danach haben wir zunächst Standardtext. Hier werden wir es mit der Beschreibung der Datenaufgabe versuchen. Und hier möchte ich schreiben, oder weil eigentlich eine Beschreibung innerhalb der Aufgabe nicht obligatorisch ist, was bedeutet, dass es irgendwann eine leere Zeichenfolge sein wird. So fügen Sie hier eine detailliertere Beschreibung hinzu. Danach wollen wir auch unseren Titel setzen. diesem Grund wird die Beschreibung der Datenpunktaufgabe. Wir wollen auch hier im Exterieur anbieten, und dies ist unsere erste Verwendung von Textarea. Das ist so hier. Eingabetyp ist Textbereich hat auch Button-Eigenschaft muss auf true gesetzt sein. Und nach dieser Schaltfläche kann der Text auf Speichern gesetzt werden. Und wir müssen hier auch angeben, dass ich mich um die Einreichung kümmere. Nennen wir es hier, aktualisieren Sie die Aufgabenbeschreibung. Hier bekommen wir eigentlich unsere Veranstaltung. Hier müssen wir die Funktion erstellen, aber sie wird genau dieselbe sein. diesem Grund kopiere ich Einfügen, aktualisiere den Aufgabennamen und ändere einfach den Namen und das Konsolenprotokoll. Aber offensichtlich ist es kein Aufgabenname, sondern eine Aufgabenbeschreibung. Ändern wir es und das Konsolenprotokoll und prüfen, ob es funktioniert. Wie Sie hier sehen können, erhalten wir einen undefinierten Fehlertyp. Sie ist nicht dem Typ string zuweisbar . Eigentlich ist es ein gültiger Punkt von TypeScript, weil unser Inland From hier nur eine Zeichenfolge und keine undefinierte Zeichenfolge erhalten möchte . Deshalb können wir es einfach versuchen oder eine leere Zeichenfolge. Das ist völlig in Ordnung. Wie Sie jetzt sehen können , liegt kein Fehler vor. Hier bekommen wir jetzt meine Beschreibung, die eine echte Beschreibung unserer Aufgabe ist. Wir können es ändern und die Eingabetaste drücken. Und eigentlich ist das hier ein Textarea, also hilft Endo nicht. Wir müssen auf die Schaltfläche Speichern klicken. Und hier bekommen wir ein Update der Inside Console, Aufgabenbeschreibung, meine Beschreibung, was tatsächlich bedeutet, dass unsere Firma im Inland arbeitet und unser Stream auch schnell Daten liefert. Und jetzt reden wir über Kolumnen. Eigentlich ist es noch einfacher. Wir müssen einfach einsteigen, sagen wir Aufgabenmodell. Und hier brauchen wir diesen Stream für die Kolumnen aus unserem Board. Und eigentlich müssen wir hier nicht einmal zusätzliche Immobilien innerhalb der neuesten Kombination erstellen , ich kann diesen Board Service Hund einfach schreiben. Und hier haben wir eine Stream-Spalte und wir können einfach Array von Spalten hier in diese Komponente packen, und wir sind startklar. Also hier bekommen wir unsere Aufgabe. Und zweitens wollen Spalten hier innerhalb des Objektboops dieses Array von Spalten zurückgeben. Und jetzt können wir hier diese Säulen verwenden, um eine Auswahl in unserem Markov zu erstellen. Also eigentlich haben wir hier ein Formular und darin wollen wir eine Auswahl schreiben. Lass uns das jetzt machen. Zuallererst wird hier S Select sein und wir wollen hier den Namen des Formularsteuerelements schreiben , weil wir es tatsächlich von Group einbinden müssen. Warum machen wir das? Denn eigentlich ist es viel einfacher, mit reaktiven Formularen zu arbeiten, wenn man zum Beispiel einen Select hat. Das ist so hier. Erstellen wir eine Formulargruppe. Und hier wollen wir zum Beispiel ein Spaltenformular erstellen . Und hier in select können wir einfach den Namen des Formularsteuerelements packen, und es wird unsere Spalten-ID sein. Und hier müssen wir auch die Klassenspalte auswählen. Jetzt wollen wir innerhalb von select alle unsere Optionen rendern und es wird unser Array von Spalten sein. Das ist so hier, Option innerhalb von G4, wir rendern es hier mit einer Schleife durch unsere Spalten, weil wir sie in Datenpunktspalten haben und wir uns hier nicht mit Streams beschäftigen müssen. Auch hier wollen wir den Wert in G verwenden und den Wert innerhalb der R-Option angeben. Dies wird Spalte Punkt AD weil wir sie durchlaufen. Schließen wir diese Option und führen einfach das Innere jeder einzelnen Option bei title aus. Also hier werden wir einfach den Spaltenpunkttitel ausführen. Prüfen wir, ob es funktioniert. Ich springe hier und wir bekommen einen Fehler und der G-Wert ist unbekannt. Und zuallererst müssen wir unser Formular erstellen. Deshalb springen wir zurück und setzen unsere Komponente. Und hier oben müssen wir ein Formular für nur eine einzelne Eigenschaft erstellen. Also hier werde ich versuchen, dass wir unser Spaltenformular haben. Und es ist dieser FB. Und eigentlich haben wir hier nicht gespritzt, wenn p. Also lass uns das jetzt machen. Wenn B wie immer ist, nur Form Builder, und hier schreiben wir diese F B-Gruppe und innerhalb werden wir unsere Steuerelemente übergeben. Und hier haben wir nur eine Spalten-ID, brauchen aber nichts anderes. Und standardmäßig wird es so sein. Jetzt kriegen wir immer noch diese Sarah. Und tatsächlich, weil wir keine reaktiven Formen in unser Board-Modul injiziert haben. Also müssen wir zurückspringen und unser Board-Modul einstellen. Und genau hier im Modul für reaktive Eingabeformulare, wie Sie jetzt sehen können, erhalten wir einen weiteren Fehler in unserem HTML. Und hier bekommen wir Spalten, die auf dem Typ Task-Schnittstelle nicht existieren , weil wir unsere Schnittstelle nicht erweitert haben. Hier oben haben wir einen Datenstrom und hier sagen wir, dass wir nur eine Aufgabe haben und das stimmt nicht. Wir haben hier Spalten, und dies ist nur ein Array unserer Spaltenschnittstelle, wie Sie jetzt in unserer Konsole sehen können , ohne dass ein Fehler vorliegt. Also lass uns das überprüfen. Jetzt lade ich den Patienten hier neu, wir haben jetzt unsere tolle Auswahl und wir sehen keinen Wert, weil wir keinen Standardwert angegeben haben. Jetzt können wir hier diese Auswahl öffnen und zwischen verschiedenen Spalten wählen. Und wie Sie sehen können, haben wir direkt unsere Spalten, die wir im Board haben. Jetzt ist das einzige letzte, was ich implementieren möchte, Standardwert innerhalb der Auswahl festlegt, weil wir standardmäßig eine Spalte haben und diese Aufgabe in einer Spalte liegt. Und das können wir leicht machen , weil wir Streams haben. Also hier können wir einfach diese Aufgabe benutzen wurde gestohlen weil wir den Stream haben. Und hier wissen wir, dass wir unsere Aufgabe bekommen und wir können hier einfach Abonnieren schreiben und wir bekommen Zugriff auf unsere Aufgabe. Und jetzt müssen wir unser Formular aktualisieren. Hier haben wir also Zugriff auf dieses Spaltenformular, welchen Wert, und wenn Sie nicht wissen, was der Tonhöhenwert tut, Eigenschaften innerhalb des Formulars aktualisiert. Also müssen wir hier ein Objekt mit Feldern versehen. Und in unserem Fall ist das nur eine einzelne Feldspalten-ID. Im Inneren möchten wir ein Ideal für die Säule von dieser Aufgabe bieten . Es ist die Aufgaben-Punkt-Spalten-ID, was eigentlich innerhalb des Konstruktors bei der Initialisierung bedeutet , wo der Task-Stream abonniert wird. Und wenn wir unsere Aufgabe hier haben, patchen wir den Wert. Wie Sie jetzt sehen können, stattdessen Browser, wir bekommen unsere erste Spalte. Aber was mir hier nicht gefällt, wir verwenden wieder abonnieren, ohne uns abzumelden. Deshalb möchte ich genau das Gleiche tun , was wir in unserem Board getan haben. Zunächst müssen wir hier unsere Abmeldung erstellen. Und das ist ein verwendetes Thema , in dem wir im Inneren für Leere sorgen. Und jetzt wollen wir hier in G über das Zerstören erstellen. Das ist so hier, implementiert auf diesem Troja. Und irgendwo nach dem Konstruktor, den wir im Juni erstellen können, wollen die Strike und Insight zunächst diese Abmeldung als nächstes aufrufen und dann abschließen. Diese Abmeldung ist also abgeschlossen. Und danach sollten wir nicht vergessen bevor wir Write-Pipe abonnieren. Und hier dauert es, bis wir ihnen diese Abmeldungen zur Verfügung stellen, die wir gerade erstellt haben. In diesem Fall sind wir auf der sicheren Seite onDestroy dieser Komponente. Unser Abonnement wird ebenfalls zerstört. 45. Aktualisierungsaufgabe: In diesem Video müssen wir die Aktualisierung unserer Aufgabe von Anfang bis Ende implementieren . Und tatsächlich haben wir innerhalb einer Aufgabe drei verschiedene Dinge. Zunächst einmal haben wir hier ein Inline-Formular für unseren Titel, für alle implementierten. Und wir bekommen hier das Konsolenprotokoll. Eigentlich ist dies ein teilweises Update unserer Aufgabe. Wir haben genau die gleiche Logik mit Beschreibung. Hier können wir es einfach ändern und auf Speichern klicken. Aber auch hier haben wir eine Änderung unserer Kolumne und eigentlich haben wir uns überhaupt nicht darum gekümmert und wir müssen es tun. Und dies ist auch eine Aktualisierung der Aufgabe. Am wichtigsten ist, dass dies alles teilweise Updates sind , die wir für unser Back-End einhalten müssen , da wir alle unsere Kunden über diese Änderung innerhalb der Aufgabe informieren möchten , was tatsächlich bedeutet, dass unsere Logik genau das gleiche wie zuvor innerhalb eines Teils, wir emittieren etwas auf dem Client, im Backend tun wir etwas mit unserer Datenbank, zum Beispiel Webdaten-Aufgabe. Danach benachrichtigen wir alle unsere Kunden, die dieses spezielle Board abonniert haben. Und das erste , was wir tun müssen, ist ein neues Socket-Ereignis zu erstellen. Fangen wir dieses Mal mit dem Client an. Und innerhalb unserer Quell-App-Shred-Typen haben wir Socket-Events. Und eigentlich sehe ich hier Aufgaben erstellen, und jetzt brauchen wir genau das gleiche mit PS Tasks Update. Und hier haben wir wie immer Erfolg und Misserfolg. Und hier können wir den Namen in Aufgaben ändern, aktualisieren, dann Update-Erfolg und Aktualisierungsfehler. Damit unsere Veranstaltung fertig ist, muss Nobu eine neue Methode in unseren Shirts-Serviceaufgaben implementieren , da wir wie zuvor unseren Socket innerhalb dieser Methode in Share-Aufgaben verstecken wollen . Das ist so hier. Lassen Sie uns unsere Methode erstellen , die die Aufgabe aktualisiert. Hier. Zunächst erhalten wir unsere Board-ID, weil wir wissen müssen, welche Benutzer wir benachrichtigen müssen. Hier hören wir Geburtstag, diese Zeichenfolge benötigt auch eine Aufgaben-ID da wir wissen müssen, welche Aufgabe wir aktualisieren müssen. Und zu guter Letzt finden Sie hier eine Liste von Feldern. Und hier haben wir ein Objekt, bei dem alle unsere Felder nicht obligatorisch sind. Deshalb schreibe ich sie mit einem Fragezeichen, damit wir unseren Titel aktualisieren können. Es ist eine Zeichenfolge. Wir können auch unsere Beschreibung aktualisieren. Es ist auch optional und string. Und hier haben wir auch unsere Kolumne und unsere Kolumne Lady ist der Ort, an dem sich unsere Aufgabe befindet. Und hier zurück werden wir nichtig. Das einzige, was wir hier tun müssen, ist Socket Meet. diesem Grund Socket Service Summit. Und hier wollen wir unsere neue Methode verwenden, Socket-Ereignisse in m Punkt. Und wir haben hier unsere Aufgaben-Updates beginnen hier als zweiten Parameter, wir müssen ein Objekt mit all diesen Feldern bereitstellen. Zuallererst ist es ein Grenzradius, dann eine Spalten-ID und dann unser Objekt mit Feldern. Und wie Sie hier sehen können, habe ich einen Tippfehler gemacht. Es ist keine Kontinuität, sondern eine Aufgaben-ID und aufgrund von TypeScript wird direkt ein Fehler angezeigt. Jetzt können wir also zurückspringen und unsere Komponente setzen und die notwendigen Änderungen vornehmen. Und hier haben wir den Namen unserer Aktualisierungsaufgabe und die Datumsbeschreibung. In beiden Fällen möchten wir diese Update-Task-Methode aufrufen. Das ist so hier oben mit zuallererst, muss diese Tasks Service, die gerade aktualisiert wurden, injizieren. Und es ist ein Aufgabenservice. Danach können wir einfach hier diesen Task-Service schreiben, und hier ist unsere neue Methodenaktualisierungsaufgabe, und dann sagen Sie es. Zuallererst müssen wir ein Board auswählen. Bei dieser Board-ID handelt es sich hier eine Aufgabe oder haben wir hier eine Aufgaben-ID? Ja, das haben wir, wir haben es hier im Konstruktor festgelegt. Also hier können wir auch diesen Punkt schreiben macht KD, und hier haben wir unsere Felder. In diesem Fall müssen wir nur den Titel aktualisieren. diese Weise können wir hier Titel, Aufgabe, Name sagen , und wie Sie hier sehen können, eine seltsame Eigenschaftsspalten-ID fehlt eine seltsame Eigenschaftsspalten-ID im Typ, was tatsächlich bedeutet, dass ich etwas falsch gemacht habe. Und sie können das Problem bereits hier erkennen. Column Lady ist ebenfalls optional. Es darf nicht immer da sein. Hier ist hier. Sie können jetzt sehen, dass wir keinen Fehler erhalten , da alle unsere Felder undefiniert sein können. Und hier müssen wir nur einen Titel angeben. Also haben wir hier unseren Aufgabennamen aktualisiert. Jetzt kann ich diesen Code kopieren, einfügen und hier unsere Beschreibung aktualisieren. Hier werde ich nur eine Beschreibung geben, und dies ist unsere Aufgabenbeschreibung aus dem Parameter und jetzt ist der interessanteste Teil. Wir müssen mit dieser Änderung dieser Single Select umgehen. Und tatsächlich ist das eine reaktive Form, was eigentlich gut ist, weil wir auf die Veränderungen vollständig reagiert reagieren können . Was ich hier schreiben möchte, ist diese Punktsäule von Gad. Und hier können wir unsere Spalten-ID bekommen, aber eigentlich wollen wir hier auf Wertänderungen reagieren und die tatsächlichen Wertänderungen geben uns zurück und sind beobachtbar, was tatsächlich bedeutet, dass wir hier schreiben können abonnieren. Aber wie Sie hier sehen können, erhalten wir eine Warnung von TypeScript, dass dieses Feld möglicherweise jetzt sein kann, aber nicht in unserem Fall, denn in unserem Fall wird immer gesagt, dass wir hier tatsächlich sind kann diese Warnung einfach unterdrücken, indem Sie hier die Bank verwenden. In diesem Fall sagen wir TypeScript, kümmern Sie sich nicht um die Überprüfung , ob diese Eigenschaft vorhanden ist. Und wie Sie jetzt hier sehen können, sind Wertänderungen beobachtbar. Hier kann ich es jetzt einfach ausprobieren abonnieren und dann hierher kommen, was nach der Änderung in dieser Kolumne ist , was eigentlich bedeutet, iss diese Kolumne Dame, als es war aktualisiert. Und jetzt muss ich nur noch Insert Console Log schreiben. Geänderte Spalten-ID. Und hier können wir überprüfen, ob es wirklich funktioniert. Laden wir die Seite neu. Wie Sie hier in der Konsole sehen können, werde ich die Spalte D geändert, und hier ist unsere Spalten-ID. Und tatsächlich ist das ein Problem, denn was wir jetzt in diesem Abonnement tun wollen, wollen wir eine Änderung für das Backend auslösen, wie wir es hier mit der Aktualisierungsaufgabe getan haben. Aber es macht keinen Sinn, es am Anfang auszulösen , wenn wir dieselbe Spalten-ID haben, wir wollen wirklich einfach zu knifflig, wenn wir es ändern. Deshalb können wir das hier schreiben. Wir können überprüfen, ob die Spalte bedürftig ist, was geändert wurde, ist nicht dasselbe wie eine gültige Hälfte. Aber auch hier, das Problem, wir haben diese Informationen nur in unserem Aufgaben-Stream, was eigentlich bedeutet, dass wir diese beiden Streams miteinander kombinieren müssen . Deshalb können wir hier wie zuvor kombinierte Laser verwenden . Und hier können wir zunächst bereitstellen, dass diese Aufgabe größer war. Und danach, diesen Stream, den wir hier unten geschrieben haben, werde ich ihn einfach als zweiten Parameter einfügen. Und diese kombinierte neueste Version gibt uns ein Array zurück, was bedeutet, dass wir hier Zugriff auf unsere Aufgabe und danach auf unsere Spalten-ID aus dem Formular haben . Und hier kann ich jetzt beide in der Konsole protokollieren. Hier möchte ich erstens sehen, veränderte Kolumne Dame und zweitens, was wir Insider-Aufgabe haben. Und eigentlich wollen wir hier die ID der Aufgabenlosspalte überprüfen. Schauen wir uns das an. Ich lade die Seite neu und wir bekommen beide Achtziger. Und wie Sie sehen können, sind sie ähnlich, was bedeutet, dass dies genau dann der Fall ist , wenn wir nichts tun müssen. Also was wir hier schreiben wollen, wenn unsere Aufgabenspalte D nicht mit unserer Spalten-ID übereinstimmt, dann müssen wir ein Update durchführen. Hier können wir diesen Task-Service einfach schreiben genau wie wir es bei der unteren Aktualisierungsaufgabe getan haben. Und hier wurden drinnen gesorgt. Und zuerst diese Board-ID, dann Aufgabe, haben wir innerhalb der Aufgabe Punkt-ID, und hier sind unsere Felder. Innerhalb von Feldern haben wir nur unsere column-id-Eigenschaft. Wie Sie sehen können, hilft uns Erics JS wirklich dabei mit reaktiven Formularen, Streams, unseren eigenen Streams oder einem Pfad zusammenzuarbeiten , der äußerst effizient ist. Jetzt können wir diesen kommentierten Code entfernen. Wir brauchen es nicht mehr. Aber was sie hier machen wollen, möchte ich schreiben, um mich mit Abmeldungen zu befassen . In diesem Fall werden wir kein Kurzwaffenabonnement haben. Hier müssen wir gerade Rohre nehmen bis genau wie wir es hier schon getan haben. Und innerhalb dieser Abmeldungen und tatsächlich ist unser Frontend-Teil des Codes komplett fertig. Jetzt müssen wir das Standardmaterial im Backend ausprobieren, was eigentlich bedeutet, dass wir zuerst Paste-Events kopieren müssen. Dann müssen wir ein neues Abonnement für dieses Ereignis erstellen und dann eine neue Methode innerhalb des Controllers implementieren , um eine Aufgabe zu aktualisieren. Lass uns das jetzt machen. Zuallererst möchte ich in unsere Socket-Events springen und das Update von Paste-Tasks kopieren. Danach können wir innerhalb eines Serverquelltyps springen. Hier haben wir unsere Socket-Events und unten kann ich diese drei neuen Ereignisse einfügen. Jetzt können wir wieder hineinspringen oder Schwesternschaft S. Und hier unten können wir neue Socket Tonnen hinzufügen. Hier wollen wir uns unsere Socket-Events in m dot anhören. Und hier haben wir unsere Aufgaben hier aktualisiert, mit denen wir keinen Spaltencontroller aufrufen möchten, sondern einen Aufgaben-Controller. Und hier haben wir eine neue Funktion, Aktualisierungsaufgabe, und wir müssen Einblicke in Ihren Socket und Ihre Daten geben. Jetzt ist es an der Zeit, diese Aktualisierungsaufgabe zu erstellen. Und eigentlich muss ich Paste aus Spalten Update kopieren , weil es super ähnlich sein wird , wie Sie hier sehen können, haben wir Update-Spalte. Ich werde die gesamte Methode kopieren, einfügen und springen und Aufgaben sagen und sie hier unten einfügen. Jetzt ändern wir es hier. Wir haben zunächst unsere Aktualisierungsaufgabe und wir bekommen hier die Daten. Also was haben wir Insiderdaten bekommen? Es war eine Board-ID. Dann haben wir hier bei der Aufgaben-ID, und innerhalb unserer Felder haben wir drei Felder. Zuallererst ist title optional. Dann könnten wir hier eine Beschreibung bekommen. Es ist auch eine optionale Zeichenfolge. Und zuletzt ist unsere Spalte sie D, die ebenfalls optional ist. Jetzt aktualisieren wir unser Try and Catch Festival hier wir suchen nach Kolumnen Update dies ist gezeichnet, wir müssen es an unsere Aufgaben ändern. Fehler beim Update. Hier senden wir den Benutzer ist nicht autorisiert, wir müssen auch den Fehler innerhalb des Käfigs ändern. Also hier haben wir auch einen Fehler beim Aktualisieren von Aufgaben. Und jetzt müssen wir unser Modell ändern. Das Aufgabenmodell „Suche nach ID und Update“ ist völlig in Ordnung. Und hier haben wir unseren Datenpunkt und hier haben wir unsere Aufgaben-ID. Hier werfen wir einfach alle Datenfelder, die wir darin haben , und es wird nur mit dem aktualisiert, was wir bereitgestellt haben. Hier zurück erhalten wir eine aktualisierte Aufgabe und möchten diese aktualisierte Aufgabe an unseren Kunden senden. Und hier stellen wir die Datenboard-ID zur Verfügung. Das ist völlig in Ordnung und die Nachfrage hier ist der Erfolg der Aufgabenaktualisierung. Und hier drinnen stellen wir unsere aktualisierte Aufgabe zur Verfügung. Wir sind also mit unserem Back-End-Teil fertig, aber wir müssen auch auf den Kunden hören, um alle unsere Kunden über Änderungen zu informieren. Also müssen wir den Gipfel über den Kunden regeln. Und dafür muss man zurück in die Quell-App unserer Kunden gehen , Board Services, Board Service von hier, denn eigentlich müssen wir einfach eine Lektion in unsere Board-Komponenten schreiben mit don't müssen listen innerhalb des Board-Modells schreiben, weil das tatsächlich gekaufte Modell einfach unsere Streams von hier aus verwendet, was eigentlich bedeutet, dass Sie nur innerhalb unserer Board-Komponente abonnieren müssen. Hier rufen wir eine Methode auf, um eine Aufgabe in unserem Aufgaben-Stream zu aktualisieren. Deshalb möchte ich hier nur auf unsere Update-Spalte schauen , da sie unserer Update-Aufgabe sehr ähnlich sein wird . Und tatsächlich können wir es vollständig kopieren und einfügen. Also lass es uns jetzt ändern. Hier haben wir unsere Update-Aufgabe. Wir bekommen hier eine aktualisierte Aufgabe, die sich tatsächlich in der Abenddämmerung befindet. Hier müssen wir genau das Gleiche tun und nur eine einzelne Aufgabe innerhalb unseres Arrays aktualisieren. Hier bekommen wir also aktualisierte Aufgaben und hier verwenden wir unsere Stream-Aufgaben get value und wir erhalten Zugriff auf jede einzelne Aufgabe. Jetzt überprüfen wir, okay, unsere Aufgaben-ID sollte mit unserer aktualisierten Aufgaben-AD übereinstimmen. In diesem Fall müssen wir hier zurückkehren, werden diese Aufgabe verteilt und wir wollen hier nur einen Titel aktualisieren. Und eigentlich ist das nicht gültig, denn hier müssen wir hier mehr zurückgeben. Zunächst die aktualisierte Aufgabe, der Titel, aber wir müssen hier auch unsere Beschreibung aktualisieren , da es vorkommen kann, dass wir sie aktualisiert haben. Hier hören Sie die aktualisierte Aufgabenpunktbeschreibung und die letzte hier wird unsere Spalte bedürftig sein, und es ist auch eine aktualisierte Aufgabenpunktspalten-ID. Es sieht jetzt völlig in Ordnung aus. Und in anderen Fällen wir einfach unsere Aufgabe zurück. Und danach müssen wir unseren Aufgabenstream mit einigen aktualisierten Aufgaben aktualisieren, damit unsere Methode vollständig fertig ist. Jetzt müssen wir nur noch zurückgehen und unsere Komponenten Board, Board Component einstellen. Und hier müssen wir noch eine Lektion erstellen, die Vorlesung. Ich möchte hier unseren Cone Update Erfolg finden , weil es super ähnlich sein wird. Hier ist es. Ich kopiere es einfach und füge es ein. Und hier müssen wir es ändern. Zuallererst, zurück, wir bekommen unsere Task-Oberfläche und hier ist Erfolg der Aktualisierung von Socrative- und C-num-Punkt-Aufgaben. Jetzt haben wir unsere Abmeldung und zurück bekommen wir unsere aktualisierte Aufgabe. Und jetzt können wir hier einfach diese Methode, die wir gerade erstellt haben, diese Aktualisierungsaufgabe aufrufen . Und hier müssen wir unsere aktualisierte Aufgabe bereitstellen , die wir vom Backend erhalten. In diesem Fall aktualisieren wir hier mit diesem Code den Task Stream für jeden einzelnen Kunden, der unsere Seite abonniert hat. Lassen Sie uns jetzt überprüfen, ob Follow a Code hier funktioniert. Wir haben keine Fehler im Frontend, keine Fehler im Backend. Jetzt öffnen wir unsere Website und eigentlich möchte ich den Tab duplizieren, damit wir ihn mit einem anderen Kunden überprüfen können. Also hier haben wir meine erste Aufgabe geöffnet und sie wollen hier nur einen Titel aktualisieren. Schreiben wir einfach voll und drücken die Eingabetaste. Und wie Sie sehen können, wurde es direkt hier aktualisiert, hier im Board. Und auch im nächsten Schritt wurde es auch aktualisiert, was bedeutet, dass wir es erfolgreich im Backend aktualisiert haben. Wir werden die Anwaltskanzleien mit diesem Hörabonnement benachrichtigen, werden die Anwaltskanzleien mit diesem Hörabonnement benachrichtigen wo es aktualisiert wurde der Stream und jetzt alle Orte, die die Streams abonniert haben, dramatisch hinten. Das funktioniert super. Prüfen wir nun, ob wir eine Spalte ändern können. Also hier möchte ich die zweite Spalte auswählen, aktualisiert und eine Nummer. Und wie Sie direkt sehen können, ist diese Aufgabe von der ersten Spalte weg, und jetzt befindet sie sich hier in der zweiten Spalte. Es wurde in unserem Formular aktualisiert. Und hier zum nächsten Schritt Wir sehen meine erste Aufgabe, die auch in der nächsten Spalte aktualisiert wird. Was bedeutet, dass wir die Aktualisierung unserer Aufgabe erfolgreich implementiert und sie auch zwischen unseren Spalten verschoben haben. 46. Löschen von Aufgaben: In diesem Video werden wir die letzte Funktion in unserem Projekt implementieren , und dabei werden die Aufgaben gelöscht. Lass uns das jetzt machen. Zuallererst möchte ich von unserem Server hier aus starten, muss aber innerhalb unserer Quelltypen Socket-Ereignisse springen und drei neue Socket-Ereignisse erstellen. Denn eigentlich wollen wir alle anderen Kunden benachrichtigen , denen eine Aufgabe entfernt wurde. diesem Grund werden wir dies über Socket-Ereignisse tun. Hier werde ich kopieren, Aufgaben einfügen, aktualisieren, einfach in Aufgaben ändern, löschen. Und hier auf der rechten Seite können wir es in Aufgaben, Löschen, Aufgaben, Löschenerfolg und Aufgaben löschen Fehler ändern . Danach können wir in diese Prominenten und neue Socket Tonnen springen . Also hier müssen wir es Punkt nennen, und hier haben wir unsere Aufgaben löschen, was ein Standard ist. Und hier ist unser Aufgaben-Controller , in dem wir unsere Löschaufgabe aufrufen. Und jetzt möchte ich eigentlich unser Löschen der Spalte kopieren und einfügen. Es wird super ähnlich sein. Wie Sie hier oben sehen können, haben wir die Methode delete column und sie werden sie einfach kopieren und in unsere Aufgaben hier unten einfügen. Und jetzt ändern wir diese Methode. Löscht zunächst keine Spalte, sondern löscht die Aufgabe. Und was wir hier bekommen, wir langweilen uns wie immer, sie müssen alle unsere Kunden benachrichtigen. Und hier müssen wir genau die Aufgabe haben, Katie, zu wissen, was wir entfernen müssen. Und hier haben wir unseren Fehler und wir müssen hier nur Aufgaben delete failure aufrufen. Und hier in unserem Käfig können wir auch Aufgaben delete failure nennen. Jetzt können wir hier anstelle des Spaltenmodells einfach ein Aufgabenmodell verwenden dot delete one, und wir löschen einfach unsere Aufgabe nach der von uns angegebenen Aufgaben-ID . Und danach definieren wir nicht alle unsere Kunden mit diesen Socket-Aufgaben. Lösch erfolgreich hier Beckwith, muss nur einer Aufgabe ein D geben weil wir keine weiteren Informationen haben und diese Informationen ausreichen damit unser Kunde versteht, welche Aufgabe entfernt werden muss. Jetzt müssen wir mit dem Client-Pfad fortfahren und dafür müssen diese drei Socket-Ereignisse , die wir gerade erstellt haben, kopieren und einfügen . Ich werde zurück in die Quelle AB unserer Kunden gehen, gemeinsame Typen, Socket-Ereignisse. Und hier unten können wir sie hinzufügen. Und jetzt müssen wir aktualisieren oder warten, um mit Aufgaben zu arbeiten. Und was wir hier tun wollen, wir wollen eine neue Methode erstellen , die bei der Aufgabe entfernt wird. Das ist so hier. Erstellen wir eine Löschaufgabe. Und wir wissen, dass wir hier einfach eine Board-ID angeben, bei der es sich um eine Zeichenfolge handelt. Und wir brauchen hier auch unsere Aufgaben-ID, und sie ist auch eine Zeichenfolge. Und zurück kommen wir hier leer. Und jetzt können wir im Inneren einfach unsere Schaltungen Service Dot Image nennen. Hier zeigt Ihnen Event Socket Event Cinema Dot Tasks löschen Sie hier als zweiten Parameter. Wir stellen unsere Optionen zur Verfügung, die in erster Linie die AT des Vorstands und zweitens unsere Aufgaben-ID sind. Und damit ist unsere API-Methode vollständig bereit. Jetzt müssen wir in das Board-Modul und den Board-Service springen . Und eigentlich brauchen wir hier eine neue Methode, genau wie delete column, aber es wird gelöscht, und tatsächlich wird der Code super ähnlich sein weil wir hier nur eine bestimmte filtern wollen Aufgabe aus unserem Array. Hier ändern wir es, um die Aufgabe zu löschen, und hier ist ein Argument, dass wir unsere Aufgaben-AD erhalten. Hier wollen wir unseren Stream durchlaufen , der ist Task Stream get value hier wo ich Zugriff auf jede einzelne Aufgabe bekomme. Und wir vergleichen unsere Aufgabe k, d mit der Aufgaben-ID, die wir entfernen müssen. Und hier werden rückwärts aktualisierte Aufgaben. Und jetzt wollen wir hier unseren Stream aktualisieren , der unser Task Stream Reserve ist und Ihr aktualisiertes Aufgaben-Array. Deshalb haben wir erfolgreich unsere Löschaufgabe für den Board-Status erstellt . Und jetzt möchte ich diesen Kommentar auch hier entfernen. Wir brauchen es nicht mehr. Jetzt müssen wir etwas HTML erstellen, um unsere Aufgabe zu entfernen. Hier müssen wir zurückspringen und unser Komponentenaufgabenmodell sagen . Und hier am Ende unserer Aufgabenmodellkomponente HTML haben wir Aktionen, und hier haben wir ein Löschen mit einem Bild. Und tatsächlich können wir jetzt auf diesem Div einfach das Click-Ereignis hinzufügen und hier eine neue Methode aufrufen , die gelöscht wird. Erstellen wir nun diese Löschaufgabe in unserer Komponente. Hier brauchen wir nichts, wir brauchen nur diese Aufgaben-ID und diese Board-ID, und wir haben sie bereits. diesem Grund können wir hier einfach diesen Task-Service Dot Delete Task schreiben diesen Task-Service Dot Delete Task und wir stellen sie im Inneren zur Verfügung. Also hier dieser Punkt bei dieser Aufgabe KD, also haben unsere Kunden dieses Ereignis erfolgreich an das Backend ausgegeben. Backend hat unsere Aufgabe aktualisiert und alle unsere Kunden benachrichtigt. Aber eigentlich müssen wir uns mit dem Zuhören an verschiedenen Orten anmelden . Zuallererst wollen wir es hier in unserem Aufgabenmodell tun . Und zweitens müssen wir in unserem Board und tatsächlich innerhalb des Boards einfach diese Methode aufrufen, und tatsächlich innerhalb des Boards einfach diese Methode aufrufen, die wir erstellt haben Delete Task nur damit wir einen Stream aktualisiert haben. Aber was ich hier machen möchte, ich nicht, dass direkt innerhalb Löschaufgabe auf unsere Board-Seite geht. Eigentlich macht es Sinn, aber wir sind uns nicht sicher, ob wir erfolgreich bei der Aufgabe entfernt haben. Deshalb möchte ich hier keinen Code schreiben. Ich möchte zum Beispiel wirklich in unserem Konstruktor hören . Dafür müssen wir hier unseren Socket-Service injizieren. Hier hören wir den privaten Circuit-Service und wir bekommen hier unseren Socket-Service. Und jetzt können wir hier im South Constructor zum Beispiel unten zum Beispiel unten einfach diese Socket-Servicelektion schreiben. Hier, muss das bieten, indem man Rückenbelastung bekommt. Und das ist die Aufgabe , die wir entfernen. Jetzt können wir hier Socket-Ereignisse in m Punkt verwenden und wo das Abonnieren unserer Aufgaben erfolgreich gelöscht wird. Und hier möchte ich vorbeifahren, bis wir auf der sicheren Seite sind und dann Einblicke in diese Abmeldung geben. Und nach der Pipe können wir unser Abonnement nutzen und kümmern uns eigentlich überhaupt nicht um Tuskegee. Wir wollen einfach zu weit gehen und haben eine solche Methode bereits geschaffen. Das ist, wozu geht das? Wir haben diese Methode direkt hier in dieser Datei, was bedeutet, dass, wenn wir Erfolg haben und unser Modell geöffnet ist, dieser Code direkt zum Board zurückspringt , weil wir zeigen können diese gelöschte Aufgabe nicht mehr. Und jetzt möchte ich diesen Code vollständig kopieren und einfügen weil wir genau dasselbe in unser Board schreiben werden . Und wie Sie sich erinnern, schreiben wir all diese Anrufe an unseren Vorstandsservice. Hier ist es sehr sinnvoll, diesen Code hier abzuspielen. Und anstatt das an Bord zu gehen, probieren Sie es einfach hier aus, diesen Wortdienstpunkt. Und hier haben wir unsere Löschaufgabe bei der wir die Aufgaben-ID angeben. Und in diesem Fall brauchen wir hier diese Aufgabe AD, die wir vom Backend erhalten, und sie wurden tatsächlich vollständig mit dieser Funktion implementiert. Prüfen wir nun, ob es funktioniert, aber hier gibt es keine Fehler und keine Fehler im Backend. Jetzt springen wir zum Browser. Hier habe ich meine erste Aufgabe, also entfernen wir sie jetzt, wie Sie in den Aktionen sehen können, haben wir dieses Löschen und dann klicken Sie hier löschen und diese Aufgabe ist komplett weg mit sehe es nicht hier im Board, und wir sehen es nicht in der zweiten Tafel. Und tatsächlich bei Erfolg, wo erfolgreich auf Slash-Board-ID umgeleitet wurde, was bedeutet, dass wir diese Funktion, Fool Live, von Anfang bis Ende erfolgreich implementiert haben. 47. Bereitstellung: Wir haben unser Projekt erfolgreich mit der Erstellung von Trello-Klonen abgeschlossen , und jetzt müssen wir über die Bereitstellung sprechen. Und in der Regel ist die Bereitstellung keine leichte Aufgabe und viele Leute haben Fragen. Wie sollte der Spieler projizieren, wie werden wir es verwalten, welchen Service müssen wir dafür nutzen. Und das ist eigentlich ein Problem. Es gibt Hunderte verschiedener Unternehmen, bei denen Sie Geld bezahlen können und die für Ihr Projekt eingesetzt werden. Zunächst müssen Sie jedoch alle diese Unternehmen vergleichen, verstehen wie sie ihr Projekt bereitstellen, ihre Online-Tools erlernen und so weiter. Es ergibt nicht viel Sinn. Eigentlich tun all diese Tools genau das Gleiche. Sie richten Ihr Projekt auf einem echten Server in Produktion ein. Die beste Variante, um Produktion und Bereitstellung zu erlernen , besteht darin unser Projekt selbst auf unserem eigenen Server bereitzustellen. Dies ist der Kern des Einsatzes. Hier ist es sehr sinnvoll zu lernen, wie das geht. Außerdem wird es wahrscheinlich die günstigste Variante sein, wie Sie Ihr Projekt hosten können. Ja, es ist nicht kostenlos weil Sie für den Server bezahlen müssen, aber Sie bezahlen das Unternehmen nicht für die Verwaltung eines Servers und Sie zahlen nicht für einige grafische Tools die Ihnen Ihr Projekt applaudieren. Hier müssen wir in diesem Video gemeinsam einen Server mieten, ihn konfigurieren und dann unser Projekt bereitstellen. Und eigentlich, wenn Sie nicht für den Server bezahlen möchten, ist das völlig in Ordnung. Sie können Ihr Projekt einfach so lassen, wie es ist. Und überprüfen sagte das Video, wie ich es mache und eine Serverfirma, ich selbst benutze Hertz und das ist ziemlich billig und zuverlässig Server-Anbieter. Und tatsächlich können Sie jeden Anbieter wählen, den Sie mögen. Sie benötigen lediglich Zugriff auf den virtuellen privaten Server. Aber ich mag Hatsune, weil es zuverlässig und nicht so teuer ist. Wie Sie hier sehen können, können wir auf die Cloud klicken und die Preise hier unten überprüfen. Wie Sie sehen können, gibt es viele verschiedene Pakete und das Minimum ist hier für Jahre und 0,15$, was für den Monat mit 20 Terabyte, tragischen zwei Gigabyte RAM und CPU-Prozessor, ziemlich billig ist . Und tatsächlich verwende ich diesen kleinsten Server für zwei Projekte in der Produktion, aber es kommen ziemlich viele Leute. Und wenn Sie Ihren Projekt-Thriller optimieren, gut, dann sind Sie mit einem kleinen Sirup völlig in Ordnung. Deshalb werden wir in diesem Video genau den Sirup ausleihen. Jetzt besteht der erste Schritt darin, direkt in ihrem Sohn einen Kamm oder einen beliebigen Anbieter zu registrieren in ihrem Sohn einen Kamm oder einen , den Sie möchten. Ich habe hier bereits ein Konto und nach der Registrierung und Bestätigung Ihrer E-Mail werden Sie eine solche Seite sehen. Eigentlich ist dieser Dienst in Ihrem Profil leer, aber das ist mein eigener Webserver. Hier möchte ich auf Server klicken, weil sie nur für diesen Kurs einen neuen Server erstellen wollen . Also der erste hier ist der Standort, spielt keine Rolle. Wir können hier Helsinki wählen oder was auch immer Sie bevorzugen. Bildverletzung ist völlig in Ordnung. Wir müssen uns für nichts entscheiden. Hier ist Typstandard, völlig in Ordnung. Und hier, die kleinste Stufe, die für Sie ist, 0,15$. Wir müssen nichts ändern. Wir brauchen keine Volumes, Netzwerke, Firewalls, zusätzliche Funktionen, SSH-Schlüssel und hier nur einen Namen. Wir können es hier benennen, l Trailer, genau wie unser Projekt, damit wir wissen, wovon wir sprechen. Und wie Sie hier sehen können, haben Sie unseren SSH-Schlüssel nicht ausgewählt, was bedeutet, dass wir eine E-Mail mit Root-Benutzer und dem Passwort erhalten , was völlig in Ordnung ist. Ich drücke hier create und jetzt, und unser Server wird erstellt. Wie Sie sehen können, ist mein Server bereits grün und läuft. Und tatsächlich in der E-Mail habe ich meine Anmeldeinformationen erhalten, wo ich einen Root-Benutzer und das Passwort für unseren Server habe. Jetzt müssen wir in die Konsole springen und SSH schreiben. Und hier wird zunächst unser Root-Benutzer hinzufügen. Dann können wir die IP-Adresse, die wir hier haben , einfach darauf klicken und sie wird kopiert und sie müssen sie hier einfügen. Also haben wir hier SSH, root at und hier den AP-Künstler. Ich drücke die Eingabetaste und wir erhalten die Nachricht. Ich versichere Ihnen, dass Sie weitermachen möchten. Wo genau hier drin, ja. Und wenn Sie die Eingabetaste drücken, wie Sie hier sehen können , erhalten wir zunächst die Frage zu unserem Passwort. Also müssen wir ein Passwort aus der E-Mail nehmen und hier einfügen. Und danach erhalten wir viele Informationen über unseren Server. Und wir beginnen den Prozess der Änderung des Root-Passworts und tatsächlich, um das Passwort zu ändern, müssen zunächst ein aktuelles Passwort angeben. Deshalb füge ich es erneut ein und drücke die Eingabetaste. Und jetzt müssen wir ein neues Passwort für unseren Root-Benutzer angeben. Und wir tun es nur damit Kasner unser Passwort nicht kennt. Hier werde ich nur 123 zur Verfügung stellen. Und noch einmal 123. Und wie Sie sehen können, erhalten wir eine Nachricht. Sie müssen ein längeres Passwort wählen. Machen wir es 12345678. Und noch einmal, und eigentlich müssen Sie verstehen, dass Sie für das echte Produktionsprojekt ein sicheres Passwort erstellen sollten und nicht so, dies ist nur zum Testen gedacht. Wenn Sie also eine solche Ausgabe mit root bei L, Trello und Hash hier haben, bedeutet das, dass Sie erfolgreich waren, wir schauen in den Observer. Hier können wir etwas tun. An dieser Stelle möchte ich etwas Wichtiges erwähnen. Wir sprechen in diesem Kurs nicht darüber, wie man Server effizient und sicher verwaltet. Was eigentlich bedeutet, dass ich alles zeigen werde, die gesamte Bereitstellung mit unserem Root-Benutzer. Normalerweise möchten Sie in einem echten Produktionsprojekt nicht alles mit dem Root-Benutzer machen. Sie möchten einen weiteren Benutzer mit eingeschränkten Berechtigungen erstellen , der einfach ein Projekt bereitstellen kann. ist also wieder schlecht, Route in der Produktion zu verwenden, aber wenn Sie es als Ihr Lieblingsprojekt machen, ist das völlig in Ordnung. Unser nächster Schritt besteht darin, unser Projekt in den Sirup zu bringen . Und eigentlich gibt es dafür viele Möglichkeiten und ich möchte die einfachste hier nutzen. Was wir tun können, wir könnten unser Projekt einfach auf GitHub oder GitLab übertragen, was auch immer Sie bevorzugen, und dieses Projekt dann in unseren Sirup klonen. Dies ist sehr effizient, da Sie einige Änderungen an einem Projekt vornehmen können. Sie werden mit Sicherheit Ihr Projekt im Git-Repository speichern und aktualisieren , was bedeutet, dass Sie jedes Mal , wenn Sie Ihr Projekt aktualisieren möchten, einfach hier in Ihrem Konsole und sagte Sarah, du versuchst einfach, Pool zu bekommen, um dein Projekt zu poolen , und dann startest du es neu. Das ist es. Ich hoffe, du wusstest bereits nicht, wie dein Projekt einsetzen kannst , um Lab oder GitHub zu bekommen. Aber wenn Sie keine kurzen Schritte hören, verwende ich für meine eigenen Projekte lieber MATLAB, aber es ist nur meine persönliche Präferenz. Hier habe ich mich bereits in GitHub angemeldet und sie haben auf Neues Projekt erstellen geklickt. Jetzt muss ich nur noch auf Leeres Projekt erstellen klicken. Und hier können wir einen Namen schreiben. Zum Beispiel können wir unserem Projekt L-Trailer einen Namen geben, und wir müssen hier nichts ändern. Und tatsächlich werden wir in GitHub standardmäßig kostenlos privat, und das ist großartig für unsere Bedürfnisse. Jetzt müssen wir hier in unserer Projekt-URL unseren Namespace auswählen, und sie wählen den Namespace meines Benutzers aus. Jetzt klicke ich einfach hier auf Projekt erstellen und unser Projekt ist erstellt. Und hier bekommen wir einige Schritte, wie wir dieses Projekt ins Labor bringen müssen. Jetzt müssen wir in die Konsole unseres Projekts springen und gut in Not schreiben. Dies wird gut für unser Projekt initialisieren. Ich schlage hier und bekomme dann eine Nachricht , dass mein Ordner bereits ein Git-Repository ist , weil sie mein Projekt bereits in Ordnung haben, normalerweise bekommst du keine solche Nachricht, aber nur die Nachricht, dass wir erfolgreich initialisiert haben. Gut in diesem Repository Unser zweiter Schritt besteht darin, alle unsere Dateien in MATLAB bereitzustellen . Aber der wichtigste Punkt hier ist , dass wir hinzufügen müssen, um alle Knotenmodule innerhalb von Client-Knotenmodulen und Insights zu ignorieren alle Knotenmodule innerhalb von Client-Knotenmodulen Server Node-Module. Wir müssen nicht all diese Bibliotheken in das Git-Repository hochladen . diesem Grund müssen wir eine Punkt-Gitignore-Datei innerhalb des Servers erstellen . Sie haben hier Knotenmodule in diesem und auch innerhalb des Clients. Hier, wie Sie sehen können, habe ich auch Dot Gitignore, und hier haben wir viele Sachen. Es wurde automatisch von Angular erstellt , ohne dass hier etwas geändert werden muss. Hier signalisierten Knotenmodule und dies wird ignoriert, was bedeutet, dass wir eigentlich nur den Server wechseln müssen. Und hier werden wir ignoriert. Danach müssen wir hier in die Setkonsole springen, oder? Git add dot und es wird alle unsere Dateien zum Guten hinzufügen. Jetzt müssen wir unseren ersten Commit dafür erstellen, wir können versuchen, git commit am zu machen. Und hier, zum Beispiel, abgeschlossenes Projekt, wie Sie hier sehen können, bekomme ich eine Nachricht, nichts zu verpflichten, aber es sollte nicht Ihr Fall sein. In Ihrem Fall erhalten Sie hier Hunderte von Dateien, die bereits in diesem Projekt erstellt wurden. Unser letzter Schritt hier ist, dass Sie sehen können ist das Hinzufügen dieser Zeile, git remote, add origin HTTPS, und dann den vollständigen Pfad, ich werde ihn jetzt hier einfügen. Und damit haben wir get lip erfolgreich an dieses Projektarchiv gebunden. Und unser letzter Schritt hier wird dieser Git Push minus uf Origin Main sein. Und wie Sie hier sehen können, ist es in main geschrieben. Aber für mich habe ich standardmäßig einen Branch Master, was völlig in Ordnung ist. Deshalb möchte ich main in master umbenennen. Es ist gut. Drücken Sie minus uf origin, master sie hier versteckt, geben Sie ein, wie Sie hier sehen können, muss ich zunächst einen Benutzernamen meines GitHub-Benutzers angeben . Und zweitens ist das Passwort, Sie können hier sehen, dass ich eine Nachricht bekomme, dass der grundlegende Zugriff verweigert wird , was eigentlich bedeutet, dass es nicht passiert ist. Aber hier müssen wir ein persönliches Zugriffstoken mit neu hinterlegtem Repository in GitLab erstellen . Wenn du zum Beispiel GitHub verwendest, hat es vielleicht für dich funktioniert. Wenn nicht hier, können wir zu diesem Link springen Slash-Profil persönliche Zugriffstoken. Wie du siehst, habe ich es hier geöffnet und hier müssen wir nur ein Zugriffstoken erstellen, damit wir auf GitHub pushen können. Und hier kann es zum Beispiel einen sprechenden Trello-Namen erstellen. Und hier müssen wir Bereiche auswählen. Für uns. Wir müssen das richtige Repository erstellen und das Repository lesen. Das ist das Wichtigste. Ich schlage hier, erstelle Zugriffstoken, und hier kommen wir ganz oben auf unser neues Zugriffstoken. Und zum Glück müssen wir jetzt unsere Fernbedienung wegen dieses Zugriffstokens für diese Tabelle wieder ändern , oder? Guter abgelegener Ashram oder Region, die diesen Ursprung, den wir hier oben mit dieser Linie geschaffen haben, entfernen wird, und dieser wird entfernt. Jetzt möchte ich diese Zeile kopieren und so machen wir das mit dem Zugriffstoken in GitHub. Wie Sie hier sehen können, wenn Sie git remote schreiben , fügen Sie Origin HTTPS hinzu. Hier müssen wir zunächst den Namen des Zugriffstokens angeben. Deshalb haben wir hier l Trailer als unser Token erstellt. Ich werde das hier schreiben, ultra law, und jetzt haben wir hier Doppelpunkt und unser Zugriffstoken. Ich werde es auch von unserer Seite kopieren und einfügen , auf der wir es generiert haben. Und danach haben wir genau das gleiche, was wir hier oben haben. Für mich ist es https github com slash mein Spitzname slash L dot. Gut. Hier werde ich genau das Gleiche schreiben. Und dann schauen wir uns das in meinem Repository an, ich werde Trello. Wir versuchen erneut, mit git push origin master in unser Repository zu pushen, genau wie wir es zuvor getan haben. Wir schlagen hier zu. Und wie Sie sehen können, wenn Sie nicht nach unserem Benutzernamen und Passwort gefragt werden , drücken wir jetzt mit unserem Zugriffstoken. Und wie Sie sehen können, haben wir keinen Fehler. Hier. Wir bekommen, dass alles gelöst ist, und jetzt ist es uns gelungen, den Master-Branch innerhalb von Origin zu verbessern. Wie Sie jetzt hier in unserem Projekt sehen können , haben wir eine Hauptniederlassung, und hier sind alle unsere Änderungen. Wir haben hier zwei Ordner, Client und Server. Und hier drinnen können wir das gesamte Projekt sehen , das wir bauen. Und jetzt können wir unseren Code unserem Server applaudieren. Deshalb möchte ich hier wieder in unseren Server springen , den wir gerade erstellt haben. Und wie Sie sehen können, bin ich im Sirup. Also zuerst möchte ich hier ein neues Verzeichnis erstellen , das Projekte heißt. Jetzt möchte ich in dieses Verzeichnisprojekt springen und dieses Projekt hier klonen. Und tatsächlich können wir hier versuchen dasselbe Zugriffstoken zu verwenden, das wir gerade verwendet haben. Wir können einfach in die Konsole schreiben, chmod minus Version innerhalb der lokalen Konsole bekommen, nicht innerhalb des Servers. Und hier ist unsere Fernbedienung mit dieser Token-URL. Und eigentlich können wir einfach kopieren, diese URL einfügen und sie hier in Sirup verwenden . Ich möchte nur git clone schreiben und dann diese URL, die ich hier treffe. Und wie Sie sehen können, haben wir keine Berechtigungsprobleme. Und wir haben unser Projekt hier in Projekten erfolgreich geklont . Und jetzt kann ich Ls schreiben. Und wie Sie sehen können, haben wir den Folder L Trailer, was bedeutet, dass wir unser Projekt im Ausland erfolgreich auf unserem Server haben. Um fortzufahren, müssen wir nun alle Pakete auf unserem Server aktualisieren . Und dafür können wir einfach apt-get update schreiben und die Eingabetaste drücken. Wie Sie sehen können, wurden alle unsere Pakete aktualisiert und jetzt möchte ich sie installieren, zunächst in Jeans und zweitens in MongoDB. Was ist in Jinx? Dies ist unser zukünftiger Webserver , den wir für unser Projekt verwenden werden. Hier können wir EPT mit Stil und Jinx schreiben. Hier müssen wir ja drücken, um dieses Paket zu installieren. Wie Sie sehen können, wurde unser Paket erfolgreich installiert. Lassen Sie uns überprüfen, ob es hier funktioniert, wir können einfach den Service- und Jinx-Status schreiben. Und wie Sie sehen können, drücke ich die Eingabetaste und wir bekommen ziemlich viele Informationen. Zuallererst, was in Jinx und hier aktiv läuft, was eigentlich bedeutet, dass es erfolgreich installiert wurde und jetzt läuft, ist unser nächster Schritt die Installation unserer Datenbank, und es war MongoDB. Das ist so hier, apt installiere Mongo DB und wir müssen es mit ja bestätigen. Lassen Sie uns nun den Status unserer MongoDB für dieses Wochenende überprüfen , richtig, Service dann Mongo DB-Status. Und wie Sie sehen können, ist es auch aktiv und läuft, was bedeutet, dass alles in Ordnung ist. Das nächste Tool, das ich installieren möchte, heißt n. Und tatsächlich werden wir es verwenden um unsere Node-Version zu verwalten da es tatsächlich vorkommen kann, dass wir node aktualisieren wollen und es ist viel mit diesem Tool ist es einfacher, dies zu tun, insbesondere wenn Sie mehrere Projekte haben und zwischen verschiedenen Knotenversionen wechseln müssen. Hier werde ich diese Zeile in die Konsole einfügen. Es ist also curl minus l und diese URL ist Gita, dein Schrägstrich n in style bash. Ich drücke die Eingabetaste und wir erhalten eine Fehlermeldung. Deshalb müssen wir das tun. Wir müssen zuerst apt install ausführen. Und hier ist wesentlich gebaut. Ich drücke Enter und wir müssen es bestätigen. Wie Sie sehen können, ist es installiert, sodass wir versuchen können, es zu installieren. Und wieder drücke ich die Eingabetaste und setze. Habe keine Fehler. Hier. Wir können einfach ja schreiben und mit der Installation fortfahren. Wie Sie hier sehen können, ist n standardmäßig für mich installiert, wissen Sie, 16151. Und tatsächlich ist das genau derselbe Knoten , den sie lokal haben. Und sie empfehlen Ihnen immer dringend, dieselbe Node-Version auf Ihrem Produktionsserver und in der lokalen Umgebung zu verwenden. In diesem Fall vermeiden Sie Ärger und Magic Box. Und die letzten beiden, die wir installieren möchten, heißen PM2.5. Dies ist ein spezieller Manager, um unsere Knotenprozesse neu zu starten , und wir werden ihn verwenden, um unsere angekündigten zu starten. Hier können wir npm install minus g schreiben, was global VM2 bedeutet. Und wie Sie hier sehen können, erhalten wir einen Fehlerbefehl npm not found, und dasselbe gilt für command node not found. Wenn ich genau hier bin, Knoten minus Version. Und tatsächlich nach der Installation von n, sowohl im Inland als auch beim Erhalten von Node und NPM. Aber wir müssen unser Terminal neu starten. Wir müssen also die Verbindung zum Server trennen und erneut eine Verbindung herstellen , um bekannte Chancen in den Pfad zu bringen. Hier können wir einfach exit schreiben und dann wieder SSH-Root und unsere IP-Adresse verwenden. Keaton hier Geben Sie ein und wir müssen unser neues Passwort angeben. Und wie Sie hier sehen können, bin ich drin und jetzt kann ich Knoten minus Mode schreiben und dann die Version des Knotens bekommen und das gleiche mit NPM minus Version, was eigentlich bedeutet, dass wir jetzt TM2 installieren können wieder mit npm installiere global VM2. Jetzt haben wir keinen Fehler und unser PM two wird installiert. Jetzt müssen wir alle unsere Pakete für den Client und den Server installieren . Und dafür muss ich wieder in den Projekte-Ordner springen. Und wie Sie sehen können, habe ich unser Ultra-Lab-Projekt. Wie Sie hier sehen können, bin ich im Trailer und sie haben Client und Server. Zuallererst möchte ich springen und Server sagen. Und hier haben wir viele Dateien, so dass wir einfach schreiben und bezahlen können und es werden alle Abhängigkeiten für unseren Server installiert. Wie Sie sehen können, ist jetzt alles installiert wir müssen in unseren Client einsteigen. Also schreibe ich CD-Client und nach dieser npm-Installation wieder, und wir werden alle unsere Front-End-Pakete für Angular installieren . Also wurden alle unsere Pakete erfolgreich installiert und jetzt müssen wir eine Konfiguration für nginx für unser Projekt erstellen. Und dafür können wir cd slash UTC und jinx Cohens d. Und hier drinnen müssen wir eine neue Datei erstellen. Und dafür können wir Tij schreiben und dann L Trailer dot com.com. Und um die Datei zu öffnen und zu bearbeiten, müssen wir einen Editor von der Konsole verwenden. Und ich werde hier nano schreiben und dann den Namen unserer Datei, die der alte Trailer ist, ruhig, ruhig. Ich schlage hier zu und so sieht dieser Editor aus. Also hier können wir einfach etwas tippen und dann später sicher sein. Und eigentlich möchte ich hier schon den Konflikt einfügen , oft jinx den zuvor vorbereiteten Typ, und so sieht es aus. Also hier haben wir einen Server-Blog. Jetzt haben wir AT gehört, was ein Standard-AT-Teil ist. Und hier liegt unsere Wurzel des Frontends. Hier sind Schrägstrich-Projekte bei denen es bereits erstellt wurde. Hier ist der Ordner stark. Es ist eigentlich ein extrem niedriger Ordner, den wir gerade erstellt haben. Dann slash client slash und slash app. Und eigentlich müssen wir auch später unseren Client bauen , nachdem wir Pakete installiert haben. Also wird unser Typskript in JavaScript konvertiert und es befindet sich hier in diesem Ordner, in der Slash-App. Deshalb ist es jetzt völlig in Ordnung. Hier lösen wir unsere index.HTML auf und hier ist der Servername, der Nachname ist wirklich wichtig weil das eigentlich unsere Domain ist. Das sind L.com und www L Trello.com. Und eigentlich haben wir überhaupt keine Domain. Und das ist völlig in Ordnung, weil wir in unserer lokalen Maschine, in der Host-Datei, einfach eine APR-Adresse des Servers schreiben können in der Host-Datei, einfach . In diesem Fall müssen wir uns nicht mit der Strategie beschäftigen, sobald es sich um eine echte Domain handelt, und sie wird genau wie bei der Domain funktionieren. Danach haben wir einen Standort. Also versuchen wir immer unsere index.HTML zu laden. Und hier haben wir Location Slash API. Und eigentlich ist das wichtig, denn hier sagen wir: Okay, wenn wir Champion in L Trello.com Slash API sind, müssen wir unsere Anfrage an diesen Webserver und diesen Webserver wir verwenden werden, weiterleiten in unserem Backend. Dies ist ein lokaler Host für die 1001-Slash-API. Danach haben wir genau das Gleiche, aber für Socket-IO-Anfragen. Und hier haben wir http localhost 4.001, und hier haben wir einige Header. Und eigentlich ist das die ganze Konfiguration , die wir für In Jinx benötigen. Jetzt stellt sich die Frage, wie wir diese Datei speichern können? Und dafür wollen wir zunächst auf Control O klicken. Und hier unten sehen wir den Dateinamen, um ys l Trello com conf zu schreiben, wo einfach die Eingabetaste gedrückt wird. Und das ist völlig in Ordnung. Es wurde gerettet. Jetzt möchte ich hier auf Control X klicken, und jetzt sind wir draußen, wir sind wieder in unserer Konsole. Und jetzt, wenn du überprüfen musst , ob alles erfolgreich gespeichert wurde, kannst du cat schreiben und dann werde ich Trello, ich drücke Enter und wir bekommen in der Konsole diese nette Ausgabe mit dem Inhalt unserer Datei, aber es ist nicht alles, was auch einen Benutzer innerhalb der Gene-Konfiguration ändern muss . Das ist so hier. Ich möchte aus diesem Ordner hier raus ich möchte nochmal nano schreiben, aber in unserem Fall wird es jetzt in jinx.com sein. Und eigentlich ist das die Standardkonfiguration, oft Jinx. Und hier wollen wir nur eine einzige Zeile ändern. Hier oben haben wir Benutzerdaten und wir möchten sie in die Benutzerroute ändern , mit der wir hier eingesperrt sind, und wir müssen diese Datei erneut speichern. Also Control O Enter, dann Control X. Jetzt müssen wir In Jinx neu starten , um die Konfiguration anzuwenden , die wir gemacht haben. diesem Grund können wir Service schreiben und jinx neu starten. Ich drücke die Eingabetaste und wir haben keine Fehler. Und jetzt sollten wir nicht vergessen, unsere Front zu bauen. Und aus diesem Grund müssen wir wieder in Slash-Route-Slash-Projekte einsteigen . Und hier ist unser L-Trailer und Kunde. Und tatsächlich sind wir innerhalb des Kunden. Und um unser Angular-Projekt zu erstellen, können wir einfach npm, run build ausführen. Und wie Sie hier sehen können, rufen wir GI Bill auf, das der Befehl von Angular ist, und es wird für uns das gesamte Projekt in diesem Ordner erstellen , wie Sie hier sehen können, nach dem Bau Ich erhalte ziemlich viele Fehler in der Konsole. Und tatsächlich ist das Hauptproblem , dass es sich um einen Produktions-Build handelt und die Gehaltsabrechnung nicht auf dem Typ production Boolean existiert , was eigentlich bedeutet, dass wir unsere Umgebungen nicht aktualisiert haben, Config in unserem Projekt. Hier ist es echt und schön, dass wir jetzt gute Dinge haben, damit wir schnell Anpassungen vornehmen können. Hier möchte ich wieder in unser Projekt einsteigen und wir interessieren uns für unsere Kunden-Teilequellumgebungen. Hier haben wir zwei Akten. Umwelt, ja. Und auf der rechten Seite werde ich die Umweltproteste eröffnen. Hier. Wie Sie links sehen können, haben wir die API-URL und die Socket-URL bereitgestellt, aber wir haben sie nicht auf der rechten Seite bereitgestellt. Und eigentlich werde ich sie hier einfach von links nach rechts kopieren . Jetzt haben wir diese Eigenschaften in unserer Konfiguration. Nach dieser Wunde müssen diese Änderungen an den gut für Behinderten Sprung im lokalen Projekt eingesetzt werden, richtig? Git add dot, es werden nur alle Dateien lokal und nach diesem Commit hinzugefügt . Also git commit minus m und zum Beispiel aktualisierte Umgebung. Ich schlage hier ein, gib unsere pendelnden sie ein. Danach können wir einfach git push origin master schreiben und Enter drücken. Und unsere Änderungen sind bereits in GitHub oder GitLab enthalten. Danach können wir wieder in unseren Server springen , der eingegeben wurde. Und hier möchte ich den Kunden verlassen. Und hier bin ich in unserer kleinen Trailermappe. Jetzt habe ich gerade Git Pool ausprobiert und wir bringen unsere Änderungen mit, wie Sie hier sehen können, Umweltprotease in unserem Server. Und danach müssen wir erneut versuchen, build auszuführen, und es ist npm run build, aber wir sollten nicht vergessen, dass wir in den Client springen müssen, wie Sie sehen können, keine solche Datei oder ein solches Verzeichnispaket, Jason, weil ich nicht im Kunden bin. Also der Client und hier npm run build. Wie Sie sehen können, liegen keine Fehler vor und wir erhalten eine Meldung, dass alles abgeschlossen wurde. Und eigentlich müssen wir hier überprüfen was wir in unserem dist Ordner haben. Also ist es gesunken. Und wie Sie hier sehen können, haben wir alle Trailer und in Trello all diese Dateien. Zuallererst unsere index.HTML und dann unsere Assets, Manager und so weiter. Aber eigentlich bedeutet das, dass wir ein kleines Problem in unserer Konfiguration haben ein kleines Problem in unserer Konfiguration und jinx, weil unser Stammordner, diese Slash-App, gerollt wurde . Und in unserem Fall haben wir hier einen verringerten Schrägstrich, ich werde Trello, was eigentlich bedeutet, dass wir ihn jetzt aktualisieren müssen. Also müssen wir Nano Slash, ETC ausprobieren. Und jinx Cohens d. Und hier haben wir unsere L Trello Comic-Con. Ich drücke die Eingabetaste und öffnete erneut unsere Konfiguration. Und hier innerhalb der Route müssen wir diesen Schrägstrich l Trello versuchen. Jetzt drücke ich Control O, Enter Control Leaks und wir müssen neu starten und jinx, also starten Service und Jinx neu. Jetzt ist unser Frontend komplett fertig und wir müssen einfach unser Backend ausführen und wir müssen nicht irgendwie unser Fronted starten , weil in Jinx es schnell geht. Aber für den Anfang wird es nicht so sein, weil tatsächlich in unserem Frontend nur statische Dateien wie HTML, JavaScript und CSS vorhanden sind. Aber in unserem Backend haben wir unser Observable. Deshalb möchte ich in unser Backend springen. Also hier CD-Server, und hier müssen wir unseren Server mit PM2.5 starten. Aber eigentlich haben wir hier auch ein Problem in unserem Server. Wir haben TypeScript ohne JavaScript-Dateien und tatsächlich muss womb unser gesamtes TypeScript in JavaScript konvertieren , bevor wir es ohne PM2.5 ausführen können. Und eigentlich muss man dafür in deinem Befehl erstellen. diesem Grund müssen wir wieder in unser Projekt einsteigen und in das Serverpaket Jason gehen. Und hier haben wir ein Skript für Start, aber wir haben kein Skript für Build. Deshalb können wir hier einfach build schreiben und hier wird das Skript TAC sein. Was ist TAC? Eigentlich ist es ein TypeScript und es wird einfach den gesamten Code, den wir in diesem Projekt haben, mit dieser TS-Konfiguration übertragen den gesamten Code, den wir in diesem Projekt haben . Wie Sie hier sehen können, ist die Ausgabe, es ist dist-Ordner. Das ist schnell völlig in Ordnung. Aber nachdem wir das gemacht haben, ändert sich das. Wir müssen in die Set-Konsole springen und genau das Gleiche noch einmal machen, zuerst bekommen wir head, dann git commit und dann git push. Mit diesen Befehlen bringen wir unsere Änderungen in den Get Wrapper. Jetzt springen wir zurück statt einer Umfrage. Hier gehen wir aus und ich ziehe mein Projekt wieder durch. Also sind wir jetzt startklar, wir können zurückspringen und sagen, oh, Serverordner. Und hier können wir versuchen, unser Backend aufzubauen. Hier kann ich einfach npm run build schreiben, und es wird mein Typskript in mein JavaScript übertragen. Wie Sie hier sehen können, ist es geschafft. Jetzt können wir es einfach mit weniger Abstand versuchen und überprüfen, was wir haben. Und wie Sie hier sehen können, sehen wir alle unsere Dateien, die erstellt wurden, aber mit js Erweiterung, was eigentlich bedeutet, dass das völlig in Ordnung ist und wir müssen dist slash server.js starten und es wird starte unser Projekt. Wir wollen PM2.5 verwenden. Hier können wir einfach PM in den Weltraum laufen lassen , Start Space. Hier wird die Schrägstrichsuche verringert. Ja, ich drücke die Eingabetaste und wir bekommen eine Menge Output. Wie Sie hier sehen können, ist dies die gesamte Ausgabe von PM zwei. Es spielt keine Rolle, aber hier unten sehen wir, wie PM zum Dämon spawnen. Es wurde erfolgreich dämonisiert und wir beginnen mit diesen Überspannungen im 4K-Modus, und es ist fertig und hier ist unser Server. Und warum wir hier P M2 verwenden, nicht nur den Prozess notieren wir könnten hier Knoten schreiben und dann zum Beispiel den Surge, ja, das ist völlig in Ordnung. Aber pm tubule, zuallererst, Risiken beginnen für uns, diesen Webserver, wenn er aus irgendeinem Grund kaputt ist. Zweitens ist PM two besser für die Produktionsanwendungen geeignet. Was wir hier gemacht haben, haben wir erstens unseren Kunden erfolgreich aufgebaut und zweitens haben wir unser Backend gestartet. Und der letzte Schritt, den wir tun möchten, ist einen Browser zu öffnen. Aber wir können einfach einen Browser öffnen , weil wir auf unsere Domain L Trello.com verweisen müssen , die nicht existiert. Wir haben es nicht von unserem lokalen Computer auf unseren Server gekauft. Und eigentlich muss ich hier lokal in die Konsole springen. Und öffnen Sie die Host-Datei, zum Beispiel in Linux und MacOS, es ist Zeile in Schrägstrich, ETC Slash-Hosts. Also hier, wie es für mich aussieht, wenn du unter Windows bist, hier ist dein Pfad, es ist Disk C, Windows-System, also die beiden Treiber, ETC, Host und du öffnest diese Datei und das ist genau wie meine Akte hier. Und wie Sie hier sehen können, habe ich dieses Projekt bereits getestet. Deshalb habe ich diese Zeile. Also hier habe ich eine Domain, L Trello.com. Das ist es, was wir registriert haben, aber das ist die alte API-Adresse. Ich brauche es nicht. Ich muss zurück in meine Kopf-SNA springen und diese Domain kopieren und sie einfach hier einfügen, was eigentlich auf unserem lokalen Computer bedeutet , wenn wir in die extrem niedrige Dosis springen , wenn nicht in der DNS-Nachschlagetabelle suchen, zeigen wir nur auf unsere IP-Adresse des Servers. Jetzt der Moment der Wahrheit Öffnen wir unser Projekt. Ich schreibe im Browser L Trello.com. Und das, Sie können sehen, das ist unser Projekt. Es funktioniert. Und eigentlich möchte ich hier die Konsole öffnen , damit wir überprüfen können, ob wir einige Fehler haben. Und tatsächlich haben wir hier einen engen lokalen Host für 1001 Slushy Ice Lift-Benutzer vom Ursprung, ich werde Trello und tatsächlich, wie Sie sehen können, Netzwerk, das ist unsere Anfrage an API. Dies ist http localhost 4.001 slushy Paare plus Benutzer. Und das ist offensichtlich stark. Das müssen wir nicht nutzen. diesem Grund müssen wir wieder in unser Projekt einsteigen und lokal in den Kunden gehen und es ändern. Hier ist also der Protest unserer Kunden zu Quelle, Umwelt und Umwelt. Hier. Offensichtlich existiert dieser lokale Host nicht. Was wir jetzt hier haben, ist eine CTP L Trello.com Slash-API und dasselbe hier, http L Trello.com. Und dann müssen wir hier keinen Port bereitstellen. Und jetzt müssen wir diese Änderungen erneut begehen. Deshalb fügt git git commit hinzu und dann git push. Jetzt wollen wir zu unserem Server springen, rausgehen und Trello-Ordner sagen und richtig, holen Sie sich ***. Aber danach müssen wir unseren Kunden wieder aufbauen, weil wir unseren Kunden geändert haben. Und um das zu tun, können wir c, d client schreiben. Und jetzt wieder, npm run build und es werden einfach schnelle statische Dateien für das Frontend generiert, unser Projekt ist erfolgreich gebaut. Ich lade die Seite hier neu und wir haben keinen Fehler. Wir haben hier für 01, für HTTP L Trailer com Slash APIs Slash-Benutzer. Das ist völlig in Ordnung. Wir sind nicht eingesperrt. Versuchen wir nun, den Benutzer zu registrieren. Also hier schreibe ich f2 auf gmail.com. Hier ist unser Benutzername und Passwort 123 hier versteckt registrieren. Und tatsächlich hat es funktioniert. Und das ist wichtig zu überprüfen da es bedeutet, dass wir MongoDB hier erfolgreich konfiguriert haben, da diese Post-Anfrage in die API geht und dies unsere Antwort ist. Und hier bekommen wir das A d des gespeicherten Benutzers zurück und hier das Token. Unser Backend und DPI funktionieren also auch. Jetzt haben wir hier ein Board und hier erstelle ich mein erstes Board. Drücken wir die Eingabetaste und wir holen unser Board, wir können es öffnen. Und hier sind wir im Vorstand. Lassen Sie uns nun überprüfen, ob unser Socket IO dafür funktioniert. Ich möchte das hier duplizieren und versuchen, eine Liste zu erstellen. Also hier zum Beispiel die erste Liste, ich treffe zumindest hier, und wir bekommen die Liste. Und auch im nächsten Schritt erhalten wir genau die gleiche Liste. Jetzt können wir hier in der zweiten Amtszeit eine neue Karte erstellen. Zum Beispiel die erste Karte, ich schlage hier, füge hinzu und wir bekommen diese Karte auf beiden Seiten. Jetzt können wir hier unser Modell öffnen und es funktioniert wie beabsichtigt, was bedeutet, dass wir unser Projekt erfolgreich in der Produktion eingesetzt haben. Es war nicht einfach, aber das ist ein Muss für jedes Projekt, das Sie bereitstellen können. Es spielt keine Rolle, welche eckige Ansicht reagiert. Jeder Client, den Sie wollen, einfaches JavaScript oder irgendein Backend, es wird immer sehr ähnlich sein. 48. Hausaufgaben: Herzlichen Glückwunsch, du hast diesen Kurs erfolgreich abgeschlossen und ich finde dich wirklich großartig und du hast ziemlich viel gelernt. Jetzt haben Sie sicher gelernt , wie Sie Ihr Full-Stack-Projekt mit Node.JS im Backend erstellen und als Service ausdrücken. Außerdem können Sie Socket IO auf jeden Fall problemlos verwenden , da wir es auf dem Client ziemlich häufig verwendet haben. Du hast wieder viel Erfahrung in Bezug auf n cooleres TypeScript, tolle und Schnittstellen und das Erstellen eines guten reaktiven Zustands. Aber offensichtlich ist es nicht das Ende. Als guter Lehrer muss ich dir Hausaufgaben machen, denn wenn du deine Fähigkeiten als Entwickler verbessern willst , musst du lernen und deine eigenen Projekte erstellen. Und hier haben Sie zwei Möglichkeiten. Sie können Ihr eigenes Projekt von Grund auf neu erstellen. Das empfehle ich wirklich, oder Sie können Funktionen in diesem Projekt implementieren. Und tatsächlich haben beide Möglichkeiten Vorteile . Wenn Sie dieses Projekt weiter umsetzen, haben Sie bereits eine wirklich gute Architektur und es wird für Sie viel einfacher. Und tatsächlich ist die Menge an Funktionen, die Sie in diesem Projekt implementieren können , wirklich enorm. Zunächst können Sie hier verschiedene Rollen implementieren. Zum Beispiel Admin-Benutzer , die beispielsweise Teams erstellen können, was eigentlich bedeutet, dass Sie anfangen, Personen innerhalb von Teams zu organisieren, genau wie im echten Trello auch zum Beispiel auf der Frontend können Sie Drag & Drop für Aufgaben innerhalb des Boards implementieren . Die einfachste Variante für Sie wäre, die offizielle Trailer-Anwendung zu öffnen und sich nur die Funktionen anzusehen und einfach etwas zu implementieren , das für Sie interessant ist. Und das ist wirklich sehr wichtig und hängt mit Ihrem eigenen Projekt zusammen. Wenn Sie Ihr eigenes Projekt planen, empfehle ich Ihnen dringend, etwas umzusetzen, an dem Sie wirklich interessiert sind. Denn wenn Ihr Projekt für Sie nicht interessant ist, werden Sie es nicht lange tun. Und wenn Sie nach Ideen für Ihre eigenen Projekte suchen, stören Sie viele davon. Sie können beispielsweise einen E-Commerce-Schock oder vielleicht eine Buchhandlung, einen Netflix-Klon oder eine Finanzanwendung zur Verwaltung Ihrer Ausgaben implementieren oder vielleicht eine Buchhandlung, einen Netflix-Klon . Ich hoffe wirklich, dass dir dieser Kurs gefallen hat und du viel gelernt hast und wir sehen uns in meinem nächsten Kurs.