Vue. js 3 und Firebase für Anfänger

1. Willkommen beim Kurs!: [MUSIC] Vue.js ist ein erstaunliches und einfach zu bedienendes Frontend-Framework für die Erstellung von Webanwendungen. In diesem Kurs werden wir es verwenden, um eine Pizza-Restaurant-Anwendung mit zahlreichen Funktionen zu erstellen . Wir werden alle neuen Funktionen von Vue Version 3 entdecken , während wir dieses Projekt erstellen. Darüber hinaus werden wir unser Projekt mit Firebase verknüpfen, um ein Back-End für unsere App zu verwenden. Dadurch haben wir eine Echtzeit-Datenbank, in der wir unsere Benutzer, unsere Bestellungen und Pizzen aus der Speisekarte speichern können. Es wird auch für die Bereitstellung von Benutzerkonten und zur Authentifizierung verwendet , einschließlich Admin - und regulärer Benutzer. Das Projekt bietet viele Funktionen wie ein Menü und einen Korb, Hinzufügen von Artikeln und die Möglichkeit, Bestellungen aufzugeben. Wir haben einen Admin-Bereich , in dem autorisierte Benutzer Pizzen zum Menü hinzufügen und daraus entfernen können. Ihre Bestellungen können angezeigt und auch gelöscht werden, zusammen mit der Möglichkeit, andere Dinge wie Admins festzulegen. All diese Daten stammen aus unserer Datenbank. Hallo. Ich bin Chris und ich bin ein erfahrener Webentwickler. Ich habe auch über 100.000 Schüler unterrichtet, sowohl online als auch persönlich. Wenn Sie mit Vue Version 3 fantastische Frontend-Anwendungen erstellen mit Vue Version 3 fantastische Frontend-Anwendungen und auch die Firebase-Datenbank und Authentifizierung nutzen möchten, ist dies die richtige Klasse für Sie. Ich freue mich darauf, Sie in der ersten Lektion zu sehen. 2. Was du brauchst:: Für diesen Cluster müssen Sie keine zusätzlichen Käufe tätigen . All diese Software , die wir verwenden werden, wird kostenlos und Open Source sein. Dann gibt es eigentlich nur ein paar Dinge, die wir brauchen werden. Aber bevor wir das tun, schauen wir uns jetzt die Anforderungen an , damit wir nicht zu sehr überfordert werden. Da es sich um einen Webentwicklungskurs handelt, sollten Sie zumindest die Grundlagen kennen und es wird davon ausgegangen, dass Sie HTML und CSS ziemlich gut beherrschen und sich auch mit JavaScript auskennen und CSS ziemlich gut beherrschen und . Sie müssen kein Experte sein, aber Sie müssen zumindest die Grundlagen kennen. Ich habe zu jedem dieser Kurse Kurse verfügbar , falls Sie sich zuerst auffrischen müssen. Auch wenn Sie Erfahrung mit anderen JavaScript-Frameworks oder -Bibliotheken wie Angular oder React oder sogar Vue Version eins oder 2 haben anderen JavaScript-Frameworks oder -Bibliotheken wie Angular oder React , ist dies ein großer Vorteil, aber nicht unbedingt erforderlich. Außerdem werden wir das Terminal geringfügig nutzen, aber wenn Sie es in der Vergangenheit nicht benutzt haben, machen aber wenn Sie es in der Vergangenheit nicht benutzt haben Sie sich darüber keine Sorgen. Wir werden nur ein paar einfache Befehle verwenden. Visual Studio Code, es wird der Texteditor sein , den ich während dieses Kurses verwenden werde . Es ist derzeit in der Welt der Webentwicklung sehr beliebt, aber Sie können jeden anderen Editor verwenden, den Sie bevorzugen. Wenn Sie es benötigen, folgt der Download-Link hier, und es ist auch völlig kostenlos. Ein weiterer Vorteil ist, dass es über ein integriertes Terminal verfügt, mit dem wir unser Projekt einrichten und die Pakete installieren , die Sie möglicherweise benötigen. Aber auch wenn Sie mit dem Terminal vertraut sind und vielleicht Ihre eigenen externen Geräte wie Item haben, ist dies auch völlig in Ordnung. Vor diesem Hintergrund fahren wir mit dem nächsten Video fort, in dem wir uns ansehen, wie wir unser Projekt mit Vite einrichten können. 3. Erstelle Werkzeugaufbau mit Vite: Um unser Projekt zu beginnen, beginnen wir mit einem lokalen Setup. Wir können Vue.js auf unserem eigenen Computer ausführen. Dafür verwenden wir ein Build-Tool namens Vite. Vite wurde tatsächlich von Evan You erstellt , der auch Vue.js erstellt hat. Dieses Build-Tool ermöglicht es uns, View-Einzeldateikomponenten zu verwenden , View-Einzeldateikomponenten diesem Fall schreiben wir einen Teil unserer Website, die Komponenten, in eine einzelne Datei. So bleiben die Dinge für uns schön und organisiert , wenn wir unser Projekt erstellen. Das bedeutet aber auch, dass wir ein Build-Tool benötigen , um all diese einzelnen Komponenten bündeln, um unsere App zu erstellen. Vites bietet uns auch viele andere Vorteile, z. B. einen Entwicklungsserver Hot-Module-Replacement, mit dem das Projekt sofort im Browser aktualisiert wird dem das Projekt sofort im Browser , ohne dass die Seite aktualisiert werden muss Wir werden eine Änderung vornehmen. Es gibt auch viele andere Vorteile. Sie müssen Node.js installieren, sofern Sie dies nicht bereits getan haben. Sie können dies von nodejs.org aus tun. Laden Sie die neueste Version für Ihr Betriebssystem herunter. Ich verwende ein Mac-Buch, wenn Sie Windows verwenden, sollte es dies auch automatisch erkennen. Wenn nicht, klicken Sie einfach auf den anderen Download. Dieser Download wird auch npm enthalten, das wir verwenden werden, um unser Projekt einzurichten und Pakete hinzuzufügen, wenn wir sie benötigen. als Nächstes zum Terminal, das Sie auf Wunsch auch als eigenständiges Terminal verwenden können. Oder Sie können das in Visual Studio Code integrierte verwenden. Die Einfachheit, das ist die, die ich verwenden werde. Gehen Sie in den Visual Studio-Code, in die Optionen, Terminal und dann in das neue Terminal. Wir haben jetzt dieses Terminal unten, dem wir Befehle schreiben können. Wenn Sie das Terminal noch nicht kennen, sich keine Sorgen zu machen, wir benötigen nur ein paar einfache Befehle. Sie können ein Terminal verwenden, um in den Dateien und Ordnern Ihres Computers zu navigieren , genau wie Sie es mit der Maus tun können, indem in ein Fenster klicken. Hier verwenden wir zwar Befehle, müssen aber zu Stelle navigieren, an der wir unser Projekt hinzufügen möchten. Ich möchte es einfach halten und es dem Desktop hinzufügen, um es leicht zugänglich zu machen. Derzeit befinde ich mich im Home-Verzeichnis für meinen Benutzer. Wir können den Befehl LS verwenden, um alle Dateien und Ordner in diesem Verzeichnis aufzulisten . Dann können wir den Befehl cd verwenden, um in jedes dieser gewünschten Verzeichnisse zu wechseln. Für mich geht es auf den Desktop , den wir hier aufgelistet sehen können. CD, um darin auf den Desktop zu wechseln. Dabei wird auch zwischen Groß- und Kleinschreibung unterschieden. Drücken Sie auf „Enter“. Wir können jetzt sehen, dass wir uns im Desktop-Verzeichnis befinden. Aber wenn Sie möchten, können Sie in jedes andere Verzeichnis wechseln , das Sie möchten. Aber kurz bevor wir das Projekt erstellen, müssen wir noch einmal überprüfen , ob Knoten und npm korrekt installiert sind. Dazu geben wir den Knotenstrich v ein, der für Version steht. Wir werden sehen, dass die installierte Versionsnummer zurückgegeben wird. Meine aktuelle Version ist Nummer 18. Sie benötigen mindestens Node Version 15, um fortzufahren. Natürlich sind Sie mit jeder Versionsnummer über 15 startklar. Wenn Sie jedoch eine Fehlermeldung oder eine Warnung sehen, müssen Sie zurückkehren und sicherstellen, dass Knoten korrekt installiert ist. Als Nächstes können wir npm überprüfen, also npm dash v. Wir sehen hier keine Probleme. Um ein View-JS-Projekt mit Vite zu erstellen, müssen wir es mit diesem Befehl ausführen. Das ist npm drin. Ansicht. Spätestens. Es ist Enter. Es fordert uns auf, die folgenden Pakete zu installieren, nämlich Create View. Das ist in Ordnung. Drücken Sie „Y“ oder drücken Sie „Enter“. Dann haben wir eine Reihe von Fragen gestellt. Zuallererst der Projektname, meiner wird Pizza Planet sein. Du kannst das ändern , wenn wir wollen. Wir werden TypeScript nicht verwenden. Wir klicken auf Nein, wir benötigen keine JSX-Unterstützung, also entscheiden wir uns für Nein. Möchten Sie den View-Router hinzufügen? Ja, das tun wir. Wir werden uns das bald ansehen. Wenn Sie die Zustandsverwaltung wünschen, wählen wir Nein, da wir eine Zustandsverwaltung in zusammensetzbaren Dateien verwenden . Wir werden uns auch ansehen, wie das während des gesamten Unterrichts geht. Wir werden den Darm nicht abdecken, also klicken wir auf Nein und Nein. Ja. Länge. Das kann ja sein. Es liegt an dir. Hübscher? Ja. Gut, und jetzt sind wir alle fertig. Denken Sie daran, dass wir früher den Befehl cd verwendet haben, um in das Desktop-Verzeichnis zu wechseln . Nun haben wir ein neues Verzeichnis namens pizza planet erstellt, das sich jetzt in unserem Desktop befindet. Was wir tun müssen, wie es hier steht, müssen wir jetzt in das Pizza Planet-Verzeichnis wechseln, also cd, pizza dash planet oder den Projektnamen Ihrer Wahl. Dann müssen wir npm install ausführen, wodurch alle Pakete installiert werden, die wir für unsere Vue-Projekte benötigen. Gut, die Pakete sind jetzt alle installiert. Um unseren Entwicklungsserver zu starten, müssen wir npm und dev ausführen. Es ist Enter. Dadurch erhalten wir dann eine Webadresse, die im Browser öffnen können. Wir können dies kopieren oder auf die Befehlstaste oder die Strg-Taste klicken, wodurch es im Browser geöffnet wird. Dies ist unser Projektstarter, was bedeutet, dass alles richtig funktioniert. Da wir den View-Router eingerichtet haben , über den wir später noch etwas mehr sprechen werden. Wir werden auch einen Home - und einen About-Link sehen , zwischen denen du wechseln kannst. 4. Projektbilder: Während dieses Projekts werden wir einige Projektbilder verwenden. Sie können Ihre eigenen herunterladen, wenn Sie es vorziehen, oder Sie können genau die gleichen verwenden, die ich verwende. Wenn Sie mitmachen und dieselben verwenden möchten , habe ich dieses Repository innerhalb von GitHub, das unter github.com/ verfügbar ist . Mein Benutzername ist chrisdixon161/pizza-planet-v3-images mit einem Bindestrich zwischen jedem Wort. Dies ist ein einfaches Repository. Alles, was wir darin haben, ist dieser Bilderordner mit den sechs Bildern, die wir zu unserem Projekt hinzufügen werden. Wenn Sie diese verwenden möchten, klicken Sie einfach auf die Code-Schaltfläche. Laden Sie die Zip-Datei herunter. Sobald dies abgeschlossen ist, können Sie darauf klicken , um es zu öffnen. Dann müssen wir das zu unserem Projekt hinzufügen. Gehen Sie zunächst zu Visual Studio Code oder Ihrem Texteditor. Was wir tun müssen, ist unser Projekt hier zu öffnen . Ziehen Sie über den Projektordner , den wir im vorherigen Video erstellt haben. Meins ist auf dem Desktop gespeichert. Ziehen Sie dies in Visual Studio Code. Wir sehen jetzt alle Dateien und Ordner für unser V-Projekt in der Seitenleiste. Möglicherweise müssen wir das Terminal auch erneut öffnen. Das Terminal und dann gehe zu Neu. Wir befinden uns derzeit in einem Pizza-Planet-Projekt. Wir können npm und dev ausführen, wodurch dies mit diesem Link erneut geöffnet wird. Befehls-oder Ctrl-Klick. Gut. Alles ist in Ordnung. Wenn wir dann in unsere Bilder und dann in unseren Projektordner gehen , den wir gerade in Visual Studio geöffnet haben, gehen wir in den Quellordner, in die Assets, und dann können wir den Bilderordner hierher ziehen . Halte das runter. Wir können diese auch in einer Seitenleiste sehen, wenn wir die Quelle öffnen, in den Assets, und da unsere Bilder, die wir für dieses Projekt verwenden werden . Nochmals, wenn Sie Ihre eigenen Bilder verwenden möchten, können Sie diese zu einem Bilderordner hier hinzufügen und sie verwenden, während wir das Projekt bearbeiten. Da diese nun zur Verfügung stehen, gehen wir zum Abschnitt Routing über , in dem wir uns ansehen, wie wir zwischen den Seiten wechseln können. 5. Ansichten Oder Komponenten?: In diesem Abschnitt werden wir uns einige grundlegende Routings ansehen , mit denen wir innerhalb unserer Anwendung zwischen verschiedenen Seiten wechseln können. Aber kurz bevor wir das tun, möchte ich einen kurzen Blick auf zwei verschiedene Dateien werfen, die wir verwenden werden. Dies sind Ansichten und Komponenten. Mal sehen, was der Unterschied zwischen diesen beiden ist. Zuallererst haben wir die Idee der Ansichten. Dies sind Dateien, die den Inhalt jeder aufgerufenen Seite enthalten . Eine typische App oder Website verwendet Links wie Home, Über uns und Kontakt Jeder dieser Links führt zu einer neuen Seite. So werden wir Ansichten nutzen. Neben Komponenten sind Komponenten in der Regel kleinere Teile unserer Anwendung, die entweder ein eigenständiges Element sein oder auf mehreren Seiten mit Ansichten wiederverwendet werden können . Eine Komponente kann ein beliebiger Inhaltsblock sein , z. B. eine Lagekarte, ein Produkt in einem E-Commerce-Shop oder auch nur ein einfacher Textblock. Komponenten können auch wiederverwendet werden , indem entweder der Inhalt auf mehreren Seiten wiederholt wird oder indem dynamische Daten einer Komponente übergeben werden. Komponentendateien und View-Dateien sind identisch. Sie haben auch den gleichen Inhalt und Struktur, da sie beide Ansichtskomponenten sind. Aber sie in verschiedenen Ordnern zu haben sorgt für Ordnung. Um es noch einmal zusammenzufassen: Eine Ansicht ist eine Seite , auf der wir in unserer Anwendung wechseln können. Im Allgemeinen ist eine Komponente ein kleinerer, oft wiederverwendbarer Teil unserer Seite. Wir speichern diese in der Regel in eigenen Ordnern, die als Ansichten und Komponenten bezeichnet werden, um sie besser zu organisieren. Das werden wir uns als Nächstes ansehen. 6. Ansichten und Routen: Im Browser haben wir unser Projekt geöffnet. Wir haben uns kurz diese Startseite und die bereitgestellten About-Links angesehen . Wir wechseln zwischen diesen beiden Seiten oder diesen beiden Ansichten, von denen wir gerade erfahren haben. Wir können diese beiden Ansichtsdateien im Editor sehen. Springen Sie in den Visual Studio-Code, wobei das Projekt im Quellordner geöffnet ist, in den wir unseren gesamten Code schreiben. Wir haben diesen Ordner namens Views. Dies hat das About und das HomeView, zwischen denen wir innerhalb des Projekts einfach wechseln. Innere dieser Dateien wird Ihnen ziemlich bekannt vorkommen, wenn Sie Vue.js in der Vergangenheit verwendet haben. Es sind nur Komponentendateien in denen wir den Skriptbereich haben, in dem wir unseren gesamten JavaScript-Code schreiben und alle Dateien importieren , die Sie möglicherweise benötigen. Dann auch ein Template-Bereich eben hier. Dies ist der Bereich, in dem wir unser HTML schreiben. Wir können auch einen Stilbereich haben, den wir sehen können, wenn wir zur AboutView gehen. Darüber befindet sich innerhalb des Quellordners dieser Router-Ordner mit einer Seite index.js. Wir haben dies, da wir uns bei der ersten Einrichtung dieses Projekts für die Installation des Vue-Router-Pakets entschieden haben. Der Schlüssel befindet sich oben in der Datei, in wir eine unserer Ansichten importieren. Hier können wir sehen, dass wir den HomeView aus dem Views-Ordner importieren . Dann befindet sich unten in createRouter dieses Routen-Array. Jede dieser Routen ist ein Objekt, wie wir hier sehen. Wir sehen den Dateipfad, der ein Schrägstrich ist. Dies ist das Home-Verzeichnis. Wir können diesem Router einen Namen geben , auf den wir uns während unseres Projekts beziehen werden. Verknüpfen Sie dies dann mit einer bestimmten Ansichtskomponente , die wir gerade importiert haben. Danach haben wir auch den Abschnitt Über uns. Sie fragen sich vielleicht, warum wir das AboutView nicht oben neben dem HomeView importiert haben. Nun, oft haben wir das gemacht und auch das wichtige AboutView, genau wie wir es mit den Home-Komponenten gemacht haben. Stattdessen demonstriert dies einen etwas anderen Ansatz, bei dem wir etwas verwenden, das als Lazy Loading bezeichnet wird. Wir laden die Seite faul , um den Seiteninhalt nur dann herunterzuladen , wenn der Benutzer ihn tatsächlich benötigt. In dieser Router-Seitenübersicht erstellen wir nun die Ansichten , die wir für unser Projekt benötigen dann können wir zurückkommen und diese zu unserem Array hinzufügen. In die Quelle, in den Ordner Views, können wir immer noch HomeView und AboutView für unsere Projekte verwenden . Lassen Sie uns einfach den Inhalt löschen , damit wir die Willkommenskomponenten nicht benötigen. Da wir dies entfernt haben, können wir den Verweis darauf auch hier entfernen. Anstatt eine Level-3-Überschrift zu platzieren, schreiben Sie vielleicht eine Startseite. Wir kommen zurück und fügen Inhalte zu diesen Ansichten hinzu, aber vorerst können wir die Überschrift Level 3 verwenden um zu sehen, zwischen welcher Seite wir wechseln. Das AboutView, entferne den Stil. Wir haben keinen Skriptbereich. Wir haben den Wrapper, H3 und den Text von etwa. In den Ansichten benötigen wir zwei weitere Dateien. Klicken Sie oben auf das Symbol „Datei“. Wir benötigen auch den AdminView, der die Erweiterung.vue verwendet. Erstellen Sie eine Vorlage, eine Überschrift. Das ist für den Admin. Wir speichern die endgültige Ansicht , die wir verwenden werden , ist die MenuView. Dieser wird verwendet, um alle Pizzen anzuzeigen , die wir aus unserer Datenbank haben , sowie einen Warenkorb. Eine weitere Vorlage, die Überschrift des Menüs. Dann können wir diese schließen und sie in unseren Router importieren , also den Router-Index. Diese befinden sich alle im selben Verzeichnis wie ein HomeView. Lassen Sie uns das noch dreimal kopieren und einfügen. Das Menu und das MenuView. Der nächste ist der Admin aus der AdminView und der letzte ist der About. Da wir diese oben in unserer Datei importiert haben, können wir den Home-Bereich im Grunde duplizieren. Direkt darunter erstellen Sie ein neues Objekt, trennen Sie es durch ein Komma. Der Pfad, den wir verwenden möchten, ist eine Zeichenfolge und dies wird ein Schrägstrichmenü sein. Das heißt, wenn wir in unser Projekt gehen und ganz am Ende den Schrägstrich Menu eingeben, sehen wir die Menüansicht im Browser. Als nächstes der Name, der der Menülink ist. Wir werden das bald in unserem Projekt verwenden. Die Komponente, die wir anzeigen möchten, ist das Menü, das wir direkt oben importiert haben. Als nächstes haben wir den Admin, schreiben ein neues Objekt und trennen es durch ein Komma. Dieser möchte im Browser mit dem Schrägstrich admin, dem Namen des Admin-Links und den Admin-Komponenten zugreifen Browser mit dem Schrägstrich admin, . Gut. Das letzte, was wir brauchen, ist About. Der Weg des Forward Slash About und die Reihenfolge, in der wir dies festlegen, machen für unser Projekt keinen Unterschied. Der Name dieses Links, der About-Link und schließlich die Komponenten. Gut. Das ist alles erledigt. Stellen Sie sicher, dass zwischen jeder dieser Routen ein Komma steht. Speichern Sie das. Wenn wir jetzt zum Browser wechseln, aktualisieren Sie ihn. Im Menü mit Schrägstrich haben wir die Menütexte unserer Komponenten. Wir haben auch Admin. Sie sehen den Admin-Text About und dann den Schrägstrich für das Home-Verzeichnis. Derzeit sehen wir immer noch den Inhalt unserer vier Ansichten neben dem vorhandenen Inhalt auf der linken Seite. Woher weiß unsere App, wo diese Ansichten angezeigt werden sollen? Nun, die Antwort darauf liegt in der RouterView, die wir uns als Nächstes ansehen werden, zusammen mit dem Hinzufügen dieser neuen Ansichten zu unseren Navigationslinks. 7. RouterLink & RouterView: in unserem Quellordner im Projekt Öffnen Sie in unserem Quellordner im Projekt die App.vue. In dieser Datei gibt es zwei wichtige Dinge zu beachten. Einer davon ist, dass wir diesen Navigationsbereich haben, und dieser enthält zwei Router-Links. Hier steht der Text von home und auch about, und das sind die beiden Links, die wir in unserem Projekt sehen. Das Erste hier ist diese Links nicht die üblichen acht Elemente sind, die wir in normalem HTML sehen werden. Stattdessen sind sie innerhalb dieser Router-Verbindung umgeben. Auf diese Weise verarbeitet der View-Router Verknüpfen mit anderen Seiten oder Komponenten. Es verwendet diese anstelle der A-Elemente, sodass der Router die Seiten-URLs ändern kann , ohne die Seite neu zu laden. Wir können auch die URL steuern, auf die wir verlinken um dynamische Routen einzubeziehen, die Variablen enthalten können Anstatt nur die Klartexte zu haben, wie wir sie hier haben, können wir auch Variablen einfügen. Außerdem sehen Sie diese Router-View-Komponente unten. Dies ist das Outlet, in dem unsere Seiteninhalte angezeigt werden, die wir in den Ansichten haben. Hier wird unser Seiteninhalt angezeigt, sodass wir die volle Kontrolle haben, anstatt nur den gesamten Seiteninhalt zu ersetzen. Hier sehen wir, dass diese Router-View-Komponente neben dem Header platziert ist. diesem Grund sehen wir sie im Browser Seite an Seite. Sie stellen außerdem fest, dass sowohl der Router-Link als auch die Router-Ansicht aus dem View-Router-Paket importiert werden, wenn Sie zum Anfang der Datei gehen sowohl der Router-Link als auch die Router-Ansicht aus dem View-Router-Paket . Mit diesem Wissen können wir den Boilerplate-Code von hier aus entfernen den Boilerplate-Code von hier aus und unsere eigenen Links innerhalb der Header-Komponenten erstellen. Lassen Sie uns diese App.vue bereinigen. Wir nehmen unseren Router-Link heraus, den brauchen wir nicht mehr. Entfernen Sie auch diesen Header-Inhalt. Wir benötigen dieses HelloWorld-Beispiel nicht in unserem Projekt, aber wir können diese Datei wiederverwenden und sie als Header-Komponente konvertieren. Wir nennen das den App-Header und benennen die Datei AppHeader.vue um. Dann können wir diesen AppHeader in der Vorlage genau dort platzieren , wo wir ihn haben möchten. Da diese App.vue-Datei die Hauptkomponente für unser Projekt ist , können wir sie verwenden, um diesem eine gewisse Struktur zu geben . In unseren Projekten möchten wir immer, dass diese Router-Ansicht die Seite rendert. Aber direkt darüber können wir auch im AppHeader platzieren. Das bedeutet, dass auf jeder einzelnen Seite in unserem Projekt die Kopfzeile oben steht, gefolgt vom Seiteninhalt. Denken Sie als Nächstes daran, dass wir diesen Dateinamen in AppHeader.vue geändert haben . Dies befindet sich im Komponentenordner. Springt hier rein. Benennen Sie dann das HelloWorld-Beispiel in AppHeader um. Wir können diese Symbole auch entfernen. [unhörbar] hat das Projekt erstellt. Das brauchen wir für unser Projekt nicht. Lassen Sie uns in diese AppHeader.vue-Datei springen. Wir löschen den gesamten Inhalt. Wir benötigen derzeit kein Drehbuch. Wir werden das entfernen. Entfernen Sie das gesamte Standardstyling. Wir haben den gesamten Inhalt zwischen den Vorlagen. Ich werde das durch einen HTML-Header ersetzen. Zeilenüberschriften platzieren Sie dies innerhalb eines Level-1-Elements mit dem Titel der Klasse Quote Sight Unterstrich. Anstatt einfach den Text von Pizza Planet für unseren Seitentitel hinzuzufügen , können wir ihn auch in den Router-Link einfügen. Dies hat ein Öffnungs - und ein Schließschild. Dann in den Tilder-Symbolen der Text von Pizza Planet. Sie können sehen, dass uns das zugrunde liegt , welche Daten ein Fehler mit dieser Komponente sind. Das liegt daran, dass wir die beiden Requisiten als Attribut hinzufügen müssen . Da dies der Seitentitel ist, wird dies nur ein Link zurück zur Homepage sein, was ein Schrägstrich ist. Als nächstes ein Navigationsbereich mit unseren Navigationslinks. Diese Navigationslinks werden auf unsere Ansichten verweisen. Wir gehen an Orte, die direkt unter unserer Level-1-Überschrift liegen. Die Navigationselemente. Dies ist eine Reihe relativer Links. Die Linkklasse, die wir sehr bald mit unserem CSS verknüpfen werden. Die beiden Attribute. Dies wird der Home-Link sein, sodass wir auf den Schrägstrich und den Anzeigetext von Home verlinken können. Dupliziere das noch dreimal. Das nächste ist für das Menü, das auf /menu verweist. Die letzte Möglichkeit besteht darin, unter der Navigation auf den Adminbereich zu verlinken unter der Navigation auf den Adminbereich und die Level-2-Überschrift mit dem Text des Platzes Nummer 1 für Pizza zu platzieren . Speichern wir das und überprüfen Sie das. Alles funktioniert. Wir haben jetzt den App-Header oben und dann sollten wir den Inhalt der Router-Ansicht direkt darunter sehen . Auffrischen. Da ist unsere Überschrift für Stufe eins. Wir haben unsere Links, wir haben die Überschrift Level 2, aber wir haben immer noch diesen Seiteninhalt daneben. Der Inhalt, in dem er angezeigt werden soll, aber wir haben nicht die erforderlichen Funktionen für das Styling. Dies liegt an dem Styling, das standardmäßig in unserem VP-Projekt eingerichtet ist . Wir könnten das entfernen und unser eigenes benutzen.. In die Seitenleiste. Gehen Sie in den Assets-Ordner, verschiedene Stylesheets befinden. Lassen Sie uns die Datei base.css entfernen. Wir können das Logo auch entfernen, aber wir können diese Haupt-CSS-Datei nicht verwenden Stattdessen löschen wir den Inhalt und fügen unseren eigenen hinzu. Wählen Sie den gesamten Inhalt aus und löschen Sie diese Datei. Es ist im Browser gespeichert. Dies ist unser Header-Bereich. Jetzt an der Spitze. Jetzt habe ich den Seiteninhalt direkt darunter oder wir können auch zwischen diesen Seiteninhalten wechseln mit diesen Header-Links auch zwischen diesen Seiteninhalten wechseln. 8. Benannte Routen: Wie wir gerade innerhalb des Router-Links herausgefunden haben, wir mit diesen beiden Attributen auf verschiedene Seiten verlinkt. Dann darin, platziert in einer fest codierten URL, auf die verlinkt werden soll. Das funktioniert völlig gut, aber wir haben auch sogenannte Namensrouten zur Verfügung. Namensroute kann von Vorteil sein, wenn wir denselben Link mehrmals verwenden . Stellen Sie sich vor, in unserem Projekt hätten wir viele Links zu dieser Menüseite, aber wenn wir diese URL in Zukunft vielleicht von einem Menü mit Schrägstrich etwas Pizzen mit Schrägstrich ändern wollen, müssen wir all diese Links manuell ändern. Alternativ können wir auf den Namen verlinken , den wir ihm in der Router-Datei gegeben haben, sodass wir in der index.js zum Router springen. Denken Sie daran, dass jeder dieser Links einen bestimmten Namen hat. Wir können dies als Objekt anstelle des Schrägstrichs übergeben und die geschweiften Klammern platzieren, um ein Objekt zu erstellen. Der Name Eigentum , der Heimat entspricht. Wie bei allen anderen View-Js-Attributen müssen wir, wenn wir hier dynamische Daten wie unseren Namen einfügen , auch in den Doppelpunkt einfügen, der v bind ist , um dies dynamisch zu machen. Dies teilt einem View-Router mit, dass dies nicht als Textfolge gelesen werden soll, sondern stattdessen nach diesem Namen suchen soll, den wir in unserer Router-Datei haben. Wir können das auch mit den restlichen Links machen. Kopieren Sie das und wir können es oben in unserem Titel platzieren . Der zweite. Das war für unseren MenuLink, der dem Namen in unserer Router-Datei entspricht. Die Nummer drei. Das war der AboutLink. Dann endlich der AdminLink. Speichern Sie das und gehen Sie zu unserem Projekt. Es sollte automatisch aktualisiert werden, da wir Vite für unseren Entwicklungsserver verwenden . Klicken Sie auf alle Links und alles funktioniert jetzt immer noch genauso wie zuvor, aber jetzt verwenden wir diese Namensrouten. 9. Verschachtelte Routen: Unser aktuelles Setup ermöglicht eine solche Router-Struktur. Wir haben unsere RouterLinks in der Kopfzeile und haben dann den Inhalt dieser Ansichten dort ersetzt, wo wir ihn haben wollten, indem wir den RouterView verwenden. Dies führt zu einer ziemlich einfachen URL-Struktur. Wir hätten unsere Haupt-URL und jede Ansicht würde zum Beispiel den Namen admin, menu oder about am Ende hinzufügen . Aber manchmal muss unsere Struktur vielleicht noch tiefer gehen. Für eine dieser Ansichten sind möglicherweise auch Links und eine Stelle zur Anzeige des Inhalts erforderlich. Ein Beispiel dafür finden Sie auf unserer Projektseite Über uns. Auf der linken Seite befindet sich die Ansicht Über uns, und wir können in jeden gewünschten Inhalt einfügen. Darüber hinaus können wir, wie wir hier sehen, auch zusätzliche Links zu Verlauf, Lieferung und Standorten bereitstellen wie wir hier sehen, auch zusätzliche Links zu Verlauf, . Auf der rechten Seite haben wir die gewünschte Struktur, nämlich die Ansicht „Über uns“, dann folgen die verschachtelten Links mit Verlauf, Lieferung und Standorten. Um dies zu strukturieren, müssen wir erneut den View-Router verwenden , indem wir die RouterLinks und den RouterView verwenden, um den Inhalt genau dort zu platzieren , wo wir ihn haben möchten. Lassen Sie uns mit dem Projekt beginnen und wir können beginnen, die Dinge einzurichten. Diese Abschnitte über Geschichte, Standorte und Lieferungen, die wir gerade gesehen haben, werden alle Komponenten sein, zwischen denen wir wechseln können. Lassen Sie uns diese im Komponentenordner einrichten. Wir haben dieses Setup bereits, also erstellen Sie eine neue Datei, und diese wird Delivery.vue sein. Der nächste, das wird History.vue sein. Dann sind die nächsten Standorte, alle mit der Erweiterung.vue, und wir können auch die Komponenten entfernen , die Sie nicht benötigen, nämlich TheWelcome.vue, verschieben Sie diese und auch WelcomeItem. Gut. Gehen wir nun zu unseren drei neuen Komponenten und wir können einige grundlegende Strukturen hinzufügen. Wir benötigen die Vorlage und jede dieser drei Komponenten wird ziemlich einfach sein. Wir erstellen einfach einen Wrapper. Wir fügen oben einen Titel, ein Bild und auch ein bisschen zufälligen Text hinzu. Das Div, sieh dir die C-Klasse von info_block an. Dies wird zu allen drei neuen Komponenten hinzugefügt , h3. Ich werde die Tilde-Symbole verwenden und das sind Lieferinformationen. Danach eine Bildquelle. Gehen wir in den Assets-Ordner dem sich unser Bilderordner befindet, und dann zu dem gewünschten Bild die box.jpg. Auch hier können Sie Ihre eigenen Bilder verwenden, wenn Sie dies bevorzugen. Ersetzen Sie einfach eines davon, das Sie möchten. Der Alternativtext, Pizza im Karton. Dann auch eine Klasse von info_img. Direkt nach dem Bild fügen wir den p-Elementen etwas Text hinzu, und Sie können diesen durch einen beliebigen Text ersetzen. Aber der Einfachheit halber füge ich nur einen zufälligen Lorem-Ipsum-Text hinzu. Wenn Sie Visual Studio verwenden, können Sie einfach das Wort Lorem eingeben und dann die Eingabetaste drücken. Dadurch erhalten wir einen Blindtext , den wir in unser Projekt einfügen können. Um die Dinge konsistent zu halten, kopieren wir all diese Inhalte und gehen dann in die Historie über. Fügen Sie das ein und alles, was wir hier tun müssen, ist, den Titel von Lieferung in Geschichte zu ändern . Das Bild, dieses ist der Chef image.jpg. Der Alternativtext des Küchenchefs, der Pizza zubereitet. Speichern Sie das. Der nächste war Locations. Fügen Sie erneut den Inhalt ein und ändern Sie den Titel. Das Bild für dieses Bild sind Tabellen. Ändern Sie auch den Alt-Text. Das sind die Tische im Freien. Gut. Dies sind alles drei Komponenten , zwischen denen wir in der Info-Ansicht wechseln in der Info-Ansicht und das ist es, was wir uns als Nächstes ansehen werden. 10. Die About View & Child: Gehen wir nun zur About-Ansichtsseite, auf der wir jetzt einen Router verwenden können , um zwischen unseren drei neuen Komponenten zu wechseln. Wir benötigen auch einige Struktur und Inhalte auf dieser Seite sowie die Router-Links und die Router-Ansicht. Lassen Sie uns die Level-3-Überschrift entfernen und in ein Div mit der Klasse von about einfügen. Dies wird der Wrapper für diese Komponenten sein und dann werden wir ihn in verschiedene Abschnitte unterteilen. Der obere Abschnitt, wenn wir zum Kreisverkehr gehen, wird er in zwei Bereiche aufgeteilt. Wenn wir zur Info-Ansicht übergehen, wird diese in zwei Abschnitte unterteilt. Der obere Abschnitt wird eine Einführung zu dieser Seite sein , wo wir einige Texte über die Pizza und die Geschichte haben werden, die wir in einem Bild platzieren werden, und dann fügen wir darunter einen zweiten Abschnitt hinzu , der unsere Router-Links enthält , um zwischen unseren Freedom Komponenten zu wechseln . Den ersten Abschnitt mit der Klasse des Intros, und darin verschachtelt, werden wir zwei Dinge haben. Zuallererst ist es ein Div und zweitens ist das Bild. Das Div wird den Text enthalten und dann fügen wir das Bild direkt darunter hinzu, und dann fügen wir unten einen neuen Abschnitt hinzu, und dieser wird unsere Links enthalten. Beginnen wir mit diesem ersten Div, indem wir ihm eine Klasse von Info-Text-Wrapper-Unterstrichen zwischen jedem Wort geben. Überschrift der Stufe 3 mit dem Titel Qualitätspizza seit 30 Jahren. Schauen wir uns das an. Da ist unser Titel und dann unter unserer Level-3-Überschrift platzieren Sie in einem p Elemente mit dem Text, der ausschließlich Zutaten von bester Qualität enthält , und das in einer freundlichen Atmosphäre. Los geht's, in einer Klasse platziert, damit wir später etwas CSS zum Infotext hinzufügen können. Als nächstes das Bild. Zunächst nochmal eine Klasse für das Styling von info_image oder img. Der Quell-Sprung erfolgt in den Assets-Ordner, in dem sich unser Bilderordner befindet, und dieser wird in die Datei calzone.jpg verschoben. Das alte Text-Calzone-Nahaufnahmebild. Da haben wir es. Dies ist der obere Abschnitt, der jetzt abgeschlossen ist. Natürlich werden wir es bald mit etwas Styling ein bisschen besser aussehen lassen , aber lassen Sie uns vorerst zu unserem zweiten Abschnitt springen , der für unsere Links bestimmt sein wird. Dies erfordert eine Klasse von More-Info-Wrapper, einen Level-3-Titel, und das heißt, klicken Sie auf die Links unten, um weitere Informationen zu erhalten. Dann können wir damit beginnen, unsere Linkstellen in den HTML-Navigationselementen zu erstellen , eine ungeordnete Liste. Jeder dieser Links wird innerhalb der Router-Verbindung platziert . Jeder wird die Linkklasse haben, aber unser Styling. Wir verwenden den Doppelpunkt, weil wir die beiden Attribute dynamisch machen werden, indem wir sie in ein Objekt einfügen, und dieses Objekt zeigt auf den Namen, dem wir annehmen, dass jeder dieser Komponenten entspricht. Dieser erste Link wird der Verlaufslink und der Anzeigetext unserer Geschichte sein. Lassen Sie uns das noch zweimal duplizieren. Der zweite wird für den Lieferlink sein. Ein Liefertext. Nummer 3 wird der Link zu den Standorten sein. Beliebiger Text von Orten. Gut. Das ist alles, was wir brauchen, jetzt haben wir unsere kostenlosen Links unter all unseren Informationen oben. Schauen wir uns das an. die Über uns-Seite. Der Inhalt verschwindet, vielleicht liegt das daran dass wir keinen Treffer für unseren Namen haben, weil wir ihn noch nicht erstellt haben. Lass uns einfach in die Konsole springen und wir können das überprüfen. Wir haben keinen Treffer für unseren Namen, also gehen wir zum Router und machen das jetzt. Der Router index.js. Wir müssen zuerst unsere drei Komponenten importieren, nämlich Geschichte, Standorte und Lieferung. Die oberste, importierte Lieferung, diesmal im Komponentenordner ist die Komponente delivery.vue. Dupliziere das noch zweimal. Der nächste ist Geschichte. Der letzte ist für Standorte. Wie bei all unseren anderen Routen müssen wir diese drei Komponenten zu einem Pfad hinzufügen. Aber denken Sie daran, der Pfad für diese wird innerhalb des About-Links verschachtelt sein , also was wir wollen. Tatsächlich können wir einfach den zweiten Ungefähr entfernen. Wir haben den Komponentennamen, das ist ungefähr so, dass wir einfach den Namen entfernen können , der standardmäßig eingefügt wurde. Wir haben diesen Link Über uns und wir wollen, dass es um den Pfad geht, und dann einen Schrägstrich, wir wollen die Standorte, Lieferung und auch die Historie. Wie gehen wir das an? Nun, derzeit zeigt der Schrägstrich über den Link nur auf eine einzelne Komponente. Wir können auch mehrere Komponenten verschachteln , indem wir die Eigenschaft children hinzufügen. Da wir für die Eigenschaft children Verknüpfung zu mehreren Komponenten herstellen, muss diese innerhalb eines Arrays platziert werden. Jedes Array enthält ein Objekt, das genau wie jede dieser Routen strukturiert ist genau wie jede dieser , also fügen wir den Pfad, den Namen und auch die Komponenten ein. Für den ersten, der auf die Geschichte verweist , fügen wir den Komponentennamen in den Pfad der Geschichte ein. Dieser Komponentenname muss genau mit dem Namen übereinstimmen, den wir in unseren Router-Links platziert haben . Ich habe einen Verlaufslink, einen Lieferlink und einen Link zu den Standorten. Dieser ist für den Geschichtslink. Dann die historischen Komponenten. Trennen Sie diese durch ein Komma. Schließ das. Trennen Sie diese durch ein Komma und platzieren Sie sie in einer eigenen separaten Zeile. Lass uns das duplizieren, kopieren und noch zweimal einfügen. Die zweite ist für die Lieferung, Link zu Lieferlink auf der Lieferkomponente. Als nächstes Standorte. Lass uns das mal ausprobieren. Wir müssen auf die Seite Über uns springen und dann können wir genau überprüfen , wie das aussehen wird. Derzeit sind wir bei einem Schrägstrich, versuchen wir es mit unseren Links unten, wir haben Geschichte. Wir sind jetzt beim Forward Slash History, der Auslieferung, das wird am Ende hinzugefügt und das Gleiche gilt auch für Standorte. Eine Sache, die Sie vielleicht denken, ist wir derzeit einen Schrägstrich haben, den wir hier in diesen Pfad eingefügt haben, dann haben wir auch Stellen mit Schrägstrichen. Als erstes haben wir bei der Einrichtung der untergeordneten Routen keinen Schrägstrich vor jedem dieser Pfade hinzugefügt . Nun, wenn wir das gemacht haben, wird es als Root-Pfad behandelt. Schauen wir uns genau an, was wir damit meinen. Wenn wir zu jedem von diesen den Schrägstrich hinzufügen und dann in den About gehen. nun auf einen unserer Links klicken, wird anstelle eines Schrägstrichs Wenn wir nun auf einen unserer Links klicken, wird anstelle eines Schrägstrichs die vollständige URL durch diesen Link zur Historie, Lieferung oder Standort ersetzt . Aber da wir diese am Ende des About-Links hinzufügen wollen , können wir sie einfach ohne den Schrägstrich verwenden. Um die folgenden Inhalte von jeder dieser Komponenten tatsächlich zu sehen, müssen wir abschließend folgenden Inhalte von jeder dieser Komponenten tatsächlich zu sehen, eine Router-Ansicht hinzufügen. Gehen Sie zur Info-Ansicht und dann direkt unter der Navigation und platzieren Sie die Router-Ansicht. Das und lass uns das überprüfen. Wir haben den oberen Bereich und dann den Bereich Standorte unten, die Historie und auch die Lieferung. 11. Benannte Ansichten: Diese Seite „Über uns“ enthält drei Komponenten, zwischen denen wir wechseln können. Wie wir wissen, können wir auf die Historie, die Standorte und auch die Lieferkomponenten klicken . Wie wir uns auch bereits angesehen haben, können wir Komponenten verwenden und sie in jeder gewünschten Datei wiederverwenden. In der app.vue können wir beispielsweise den traditionellen Weg gehen, indem wir eine Komponente importieren und diese dann innerhalb der Vorlage rendern. Eine alternative Methode zum Rendern einer Komponente besteht darin, den Vue Router zu verwenden. Bisher haben wir die RouterViews verwendet, um eine Seite wie diese hier anzuzeigen. Das Gleiche gilt für die obige Ansicht, die wir gerade im vorherigen Video hinzugefügt haben. Wir haben den RouterView verwendet. Dies könnte entweder die oberste Seite oder alle untergeordneten Komponenten anzeigen , genau wie wir es hier mit der Über uns-Seite tun. Wir können auch so viele RouterViews einfügen, wie wir möchten, und jede zusätzliche RouterViews fungiert als Outlets mit verschiedenen Komponenten. Wenn Sie mehr RouterViews einfügen möchten, müssen wir ihnen auch Namen geben, damit der Router weiß, welche Komponenten in den einzelnen Komponenten angezeigt werden sollen. Nehmen wir an, wir möchten unten auf der Homepage einige zusätzliche Informationen anzeigen auf der Homepage einige zusätzliche Informationen , z. B. die Komponenten Lieferung und Verlauf. Hier haben wir einen Entwickler. Der Schlüssel hier ist, dass wir zwei zusätzliche RouterViews haben. Jedes von ihnen hat ein Namensattribut , das gleich wichtig sein wird. Beachten Sie, dass der RouterView oben keinen Namen hat. Dies ist ein Standardspeicherort. Diese Standardeinstellung wird zusammen mit den beiden Namen auf der Router-Indexseite festgelegt. Die linke Seite zeigt, was wir derzeit mit einer einzigen Komponente für die Homepage eingerichtet haben . Wenn wir jedoch mehrere RouterViews mit Namen haben, müssen wir dies ändern, um ein Komponentenobjekt zu verwenden, genau wie wir es rechts sehen . Der erste ist der Standardspeicherort , der RouterView ohne Namen. Dann entsprechen die nächsten beiden Namen den beiden Namen, die wir den RouterViews gegeben haben. Gehe zum Projekt und wir können das einrichten. Gehen Sie zur Hauptkomponente der obersten Ebene , der app.vue, und platzieren Sie sie dann direkt unter der RouterView in einem Div. Dieses Div, das Styling und das Layout werden die Klasse des Info-Block-Wrappers haben. Dann können wir hier zusätzliche RouterViews platzieren , um eine unserer Komponenten anzuzeigen. In diesem Beispiel werde ich die Liefer- und auch die Historienkomponenten auf dieser Hauptseite anzeigen . Platzieren Sie eine RouterView, die Namensattribute, die Lieferung entsprechen werden. Kopieren Sie das und fügen Sie es ein. Der zweite wird der Geschichte gewidmet sein. Wir möchten, dass nur diese beiden Komponenten auf der Homepage angezeigt werden. Gehen wir dazu zur Router-Indexseite und gehen Sie zum Home-Bereich. Derzeit zeigt der Heimrouter nur die einzelne Komponente der Home-Ansicht. Um jedoch mehrere Komponenten anzuzeigen, können wir die Komponente so ändern , dass sie am Ende ein s hat. Entferne das, gib ein Objekt ein. Wie wir bei den Folien gesehen haben, müssen wir die Standardansicht hinzufügen, die in der Router-Ansicht ohne Namen angezeigt wird . Dies ist die Startansicht, der Name der Lieferung. Hier werden die Lieferkomponenten angezeigt und die nächste ist für die Historie. Nur um es noch einmal zusammenzufassen, wir haben die Standardkomponente, nämlich die Startansicht in der App. Dies wird in der Router-Ansicht angezeigt, die keinen Namen hat. Als Nächstes haben wir die Komponenten „Lieferung“ und „Verlauf“, die mit dem Namen unserer beiden zusätzlichen Router-Ansichten übereinstimmen . Jetzt weiß der View-Router , welche Komponenten an jedem Standort angezeigt werden sollen. Wir haben diese beiden Lieferkomponenten in der Geschichte bereits Lieferkomponenten in der Geschichte oben importiert, sodass es jetzt losgehen sollte. Speichern Sie diese Datei auf der Homepage. Von ganz oben haben wir diese Level-3-Heimüberschrift, die wir aus unserer Sicht sehen können. Was wir hier haben, ist dieser Titel und dann unten haben wir unsere Lieferkomponenten und die Historie. Nur um zu bestätigen, dass diese nur auf der Homepage angezeigt werden, können wir die zusätzlichen Links aufrufen und diese Komponenten sollten nicht angezeigt werden. Um die Sache abzuschließen, kehren wir zu unserer app.vue zurück und fügen ein wenig Styling hinzu, damit diese in der größeren Ansicht nebeneinander und dann auf dem kleinsten Bildschirm vertikal gestapelt erscheinen . App.vue. Wir haben diese Klasse von Info-Block-Wrappern. Lassen Sie uns das in den Style-Bereich kopieren. Der Anzeigetyp von Flex. Wir beginnen mit der kleinen Bildschirmansicht, was bedeutet, dass wir die Biegerichtung ändern müssen , um eine Säule zu sein. Dadurch werden unsere Inhalte auf dem kleineren Bildschirm vertikal gestapelt . Um diese Änderung so vorzunehmen, dass sie nebeneinander angezeigt wird, müssen wir die Biegerichtung so ändern, dass sie auf dem größeren Bildschirm in Reihe angezeigt wird. Wir können dies tun, indem wir eine Medienabfrage hinzufügen. Tatsächlich können wir auch den gesamten Rest des Stylings entfernen . Ich brauche nichts davon. Richten Sie alle Medienabfragen mit unseren Medien ein. Wir möchten, dass dies auf Bildschirme mit einer Mindestbreite von 900 Pixeln abzielt. Schnappen wir uns unseren Info-Block-Wrapper. Wir werden die Biegerichtung so ändern, dass sie der Reihe entspricht. Auf den größeren Bildschirmen von 900, diese in einer Reihe und dann fällt das Ganze auf den kleinsten Bildschirm. Dies ist eine alternative Methode zur Verwendung von Komponenten anstelle der herkömmlichen Methode, eine Komponente zur Anzeige in eine andere Datei zu importieren . Wir können dem Vue-Router auch erlauben diese in einer Router-Ansicht zu platzieren. 12. Project Section Intro: In diesem neuen Abschnitt geht es darum Inhalte in unsere Anwendung zu integrieren. Wir erstellen die gesamte Struktur, die wir benötigen, indem verschiedene Seiten und Komponenten erstellen. Später, in den nächsten Abschnitten, werden wir diese dynamischer gestalten, indem wir verschiedene Informationen aus einer Datenbank einfügen , z. B. unsere Bestellungen, unsere Benutzer und unsere Pizzen. Als Nächstes erstellen wir jedoch zunächst die Menükomponenten. 13. Die Menu: Die Seite mit der Menüansicht, die wir jetzt erstellen werden, wird in zwei Abschnitte aufgeteilt. Auf der linken Seite fügen wir das Menü hinzu, das alle Pizzen in einer Liste enthält. Dann erstellen wir im nächsten Abschnitt den Korbbereich auf der rechten Seite, dem alle Inhalte aufgeführt sind , die der Benutzer dem Warenkorb hinzufügt. Lassen Sie uns zu unseren Komponenten der Menüansicht springen und damit beginnen, daran zu arbeiten die Ansichten in der Menüansicht. Wir verschieben vorerst die Überschrift Level 3 und erstellen dann ein Div, das als Wrapper für unsere beiden Abschnitte dienen wird . Dies ist die Klasse des Menü-Underscore-Wrappers. Dann noch zwei Tauchgänge, die darin verschachtelt werden. Der erste wird für den Inhalt auf der linken Seite sein , der unser Menü sein wird. gebe dem die Klasse des Menüs und erstelle dann ein zweites Div, Ich gebe dem die Klasse des Menüs und erstelle dann ein zweites Div, das für unseren Korb bestimmt ist. Gib uns die Korbklasse. Springe dann zum Menübereich und platziere dort eine Level-3-Überschrift. Verwenden Sie die Utilas aller Texte authentischer handgemachter Pizza. Für unseren zweiten Div , den Korb. Wieder ein Level 3, das die Utilas anführt. Dieser ist für den Korb. Wie bereits erwähnt, arbeiten wir vorerst nur in diesem Menüabschnitt , der eine HTML-Tabelle sein wird. Diese Tabelle wird vorerst nur eine einzige Pizza enthalten. Aber wir werden darauf zurückkommen, wenn wir anfangen, mit der Firebase-Datenbank zu arbeiten, damit wir alle gespeicherten Pizzen überprüfen und sie dann in dieser Tabelle anzeigen können . Vorerst richten wir unsere Vorlage wie das innerhalb des Tabellenkörpers aussehen wird . Dann beim TR-Element für unsere erste Tabellenzeile. Unser gesamter Pizzainhalt wird in diese eine einzige Tabellenzeile aufgenommen. Die Zellen geben einige Tabellendaten ein. Das wird für den Namen der Pizza sein. Der Pizzaname wird innerhalb der starken Etiketten platziert und in jedem Pizzanamen platziert, z. B. Margarita. Unter dieser ersten Tabellenzeile fügen wir eine zweite Zeile hinzu. Dieser wird die Beschreibung in den Tabellendaten enthalten . Die kleinen Etiketten und die Beschreibung einer köstlichen Pizza mit Tomatenpaste garniert mit Mozzarella. Scrollen Sie nach unten und klicken Sie einfach diese Tabellenzeile, um eine dritte Zeile hinzuzufügen. Dieser wird für die verfügbaren Optionen sein. Für jede Pizza werden wir zwei verschiedene Größen erstellen , nämlich eine 9-Zoll- und eine 12-Zoll-Größe. Später in diesem Kurs werden wir das wiederholen und das sowohl für die 12-Zoll-Pizza als auch für die 9-Zoll-Pizza tun , aber jetzt, da wir nur unsere Struktur erstellen und einige Beispieldaten hinzufügen, werde ich einfach in einer einzigen Größe platzieren, für die 9-Zoll-Pizza. Darauf folgt der Preis. Dann wird der dritte Abschnitt eine Schaltfläche sein , mit der die Pizza in den Korb gelegt wird . Platzieren Sie hier eine HTML-Schaltfläche . Die Art der Schaltfläche. Um das Plussymbol herauszubekommen, wird dann eine HTML-Entität verwendet, die der Code der Ampersands, des Hashs 43 und eines Semikolons ist . Der Browser lässt uns sehen, wie das aussieht. Wir haben unsere erste Zeile, die der Titel ist, die zweite Zeile, die eine Beschreibung ist, und der dritte Abschnitt wird unsere Option sein. Wie bereits erwähnt, werden wir diesen dritten Abschnitt durchgehen , der uns unsere verschiedenen Optionen aufzeigt . Dies ist unser Tisch für unsere Pizza, jetzt eingerichtet und dann im nächsten Video gehen wir zum nächsten Abschnitt über, dem Korb. 14. Die Basket: In Anlehnung an das vorherige Video, in dem wir den Menübereich auf der linken Seite hinzugefügt haben, gehen wir nun zum Bereich „Körbe“. Dieser Korb wird auch eine Tabelle mit den Pizzen sein, die der Benutzer auswählt, indem er hier auf die Schaltfläche Hinzufügen klickt. Gefolgt von einer Bestellung, einem Gesamtbereich und einer Schaltfläche , um die Bestellung aufzugeben. In Zukunft wird dieser Bestellbutton mit unserem JavaScript verknüpft, um diese Bestellung dann in unsere Datenbank zu übertragen. Für die Tabelle enthalten die Abschnitte eine einzelne Zeile. Diese Zeile enthält die Menge und auf beiden Seiten eine Schaltfläche , mit der Sie die Menge erhöhen oder verringern können. Sie erhalten den Namen der ausgewählten Pizza und auch den Preis. Erstellen Sie unter unserer Level-3-Überschrift für die Körbe ein Div. Dieses Div enthält die Struktur für alle Körbe , bei der es sich um eine Tabelle ganz oben handelt , dann den Text, der die Gesamtsumme der Bestellung darstellt. Aber jetzt geben Sie einfach einen beliebigen Wert ein. Dies wird mit JavaScript aktualisiert und berechnet. Als nächstes eine Schaltfläche, die später für die Bestellung verantwortlich ist. Ein Teil des Textes ist vorerst in Ordnung. Schauen wir uns an, wie das aussieht. Es gibt einen unserer Inhalte. Jetzt können wir in den Tabellenbereich übergehen. Die Tabelle wird eine einzelne Tabellenzeile enthalten. In der ersten Datenzelle der Tabelle werden zwei Schaltflächen und auch die Menge angezeigt. Wir haben die Menge in der Mitte und dann eine Schaltfläche zum Verringern auf der linken Seite und eine Schaltfläche zum Erhöhen auf der rechten Seite. Die erste Schaltfläche mit der Klasse quantity_button, der Typ, der auch Button ist, und dann die HTML-Entität, die das Ampersand ist, der Hash 8722 gefolgt vom Semikolon. Dadurch erhalten wir das negative Symbol und dann fügen wir die Menge hinzu und dann rechts eine Schaltfläche mit dem Plussymbol. Für die Menge, die in der Mitte liegen wird, geben Sie vorerst eine beliebige Menge ein. Kopieren Sie unseren Button und fügen Sie ihn unten ein und ändern Sie einfach die Codenummer in 43. Datumsangaben auf diesen Schaltflächen werden verwendet , um diesen Wert zu erhöhen oder zu verringern. Bevor wir dies in den Warenkorb legen, werden wir auch die Bestellsumme aktualisieren da wir die Dinge ebenfalls ändern. Das sind unsere ersten Tabellendaten. Die zweite wird für den Namen der Pizza und auch für die Optionsgröße sein Namen der Pizza und und die dritte. Das ist der Preis der Pizza. Speichern und in den Browser übertragen. Das sind alle Informationen, die wir jetzt für den Warenkorb benötigen , und da all diese Inhalte jetzt vorhanden sind, werden wir uns als Nächstes damit befassen, ein wenig Styling hinzuzufügen, um ihn ein bisschen besser aussehen zu lassen und auch das Layout zu verbessern. 15. Schriften und Base: In unserem Projekt haben wir diese Datei main.js. Dies ist die Datei , die für die Erstellung unserer App verantwortlich ist . Wir importieren das aus der Vue-Bibliothek. Wir importieren auch die wichtigsten App-Komponenten , und zwar diese hier. Dies ist die Haupteintragskomponente und alles andere wird darin verschachtelt. Wir übergeben diese Datei, um eine App zu erstellen, und dann mounten wir die Anwendung mit der ID der App im DOM. Darüber hinaus enthält es oben einen Import mit einer Datei main.css, die sich in diesem Assets-Ordner befindet. Die Art und Weise, wie wir unser Styling strukturieren, liegt ganz bei uns, wenn es um eine Vue-App geht. Aber ich werde dies als eine Art allgemeine Stildatei verwenden , die Basisstile wie Schriftarten und Resets enthält . Wir können einzelnen Komponenten von Vue-Dateien weiterhin bestimmte Komponenten oder Seitenstile hinzufügen . Zunächst müssen wir jedoch unsere Schriftarten auswählen, die wir für das Projekt verwenden werden. Dafür werde ich Google-Schriftarten verwenden. Gehen Sie also zu fonts.google.com. Ich werde zwei separate Schriftarten verwenden . Eine davon wird für unsere Überschriften und den Titel sein, und die andere für den allgemeinen Text. Klicken Sie also auf Suchen. Das erste heißt Marck-Skript und das ist M-A-R-C-K, und das ist das für unsere Überschriften und den Titel. Also wähle das aus. Scrollen Sie nach unten. Dieser hat nur die regulären Texte, was in Ordnung ist. Klicken Sie auf das Plus-Symbol, um es unseren ausgewählten Familien sowie diesen hinzuzufügen . Lass uns nach unserem zweiten suchen. Zurück zur Suche. Für den allgemeinen Text werde ich Roboto verwenden. Das ist der, den wir hier brauchen. Lassen Sie uns eine Auswahl an Schriftarten auswählen. Also 300, was ein leichter Text ist, 400, was ein reguläres Gewicht ist, und auch ein 500. Füge alle drei zur Familie hinzu. Klicken Sie auf diese ausgewählten Familien und wir haben die Informationen, die wir in unser Projekt importieren müssen. Wir haben also einen Link , den wir verwenden können oder wir können die Importsyntax verwenden. Um dies zu importieren, gehen wir zum Ordner Assets und zur Datei main.css. Dies ist derzeit leer. Wir können diese Importregel hinzufügen. Kopieren Sie also alles innerhalb der Style-Tags. Füge das ein. Wie wir bereits in der Hauptpunkt-JS-Datei gesehen haben, haben wir die ID der App, die wir als Haupt-Wrapper für unser Projekt auswählen können. Also wähle das mit dem Hash aus. Hier können wir die Schriftfamilie auf Roboto setzen , indem wir diese zweite Zeile einfach hier kopieren. Dies wäre unser allgemeiner Text und wir werden ihn bei Bedarf mit dem Marck-Skript überschreiben . Betritt den Körper. Wir fügen hier nur allgemeine Stile hinzu , erinnerst du dich? Also fügen wir etwas Spielraum hinzu, um unser Projekt zu zentrieren, indem wir diesen Wert oben und unten sowie links und rechts auf Null setzen. Der farbige Zeilentext von RGB , wobei für Rot, Grün und Blau der Wert 76 angegeben wird. Direkt nach dem Hauptteil zielen wir auf die Überschriften h1, h2, h3, h4, h5 und h6 ab. Denken Sie daran, dass die Schriftfamilie , die wir für diese verwenden werden , die andere ist, die wir von Google Fonts erhalten. Also kopiere diesen Abschnitt und füge ihn ein. Entfernen Sie mit dem Browser alle Standardränder , die auf eine unserer Überschriften angewendet werden. Ich platziere die Farbe, was einem RGB-Wert von 76,76,76 entspricht. Das gibt uns also unsere allgemeinen Überschriftenstilisierungen, aber wir werden die Überschrift der Stufe drei an mehreren Stellen verwenden . Wir werden es also mit Seiten- und Komponentenüberschriften verwenden. Also stellen wir die Schriftgröße auf eine größere Größe von 2,2 Rms ein. Platzieren Sie außerdem einen gewissen Rand an der Ober- und Unterseite eines Rems und Null an der linken und rechten Seite. Als nächstes die ungeordnete Liste, die ul-Elemente. Setzt jedes Leerzeichen zurück, das vom Browser verwendet wird, sodass der Standardrand auf Null entfernt werden kann und auch der Abstand wieder auf Null zurückgesetzt werden kann. Die Listenelemente und tatsächlich auch die Links mit den A-Elementen erben die Farbe. Dadurch wird die lila Linkfarbe entfernt, die wir standardmäßig im Browser haben. Setzen Sie außerdem die Textdekoration auf Keine und auch den Listenstil. Dadurch wird sichergestellt, dass keiner unserer Links oder unserer Listenelemente Unterstreichungen und auch keine Aufzählungszeichen an der Seite des Links. Also einige allgemeinere Stile, wir werden uns mit unseren Bildelementen befassen und sicherstellen, dass die maximale Breite eines Bildes 100% nicht überschreitet. Also als nächstes zu unseren Kursen für unsere Router-Links, falls Sie sich früh daran erinnern, haben wir diese Links ganz oben und Sie können bereits sehen, wie unser Styling stattfindet. Wir haben diese Menülinks oben, die Sie sehen können, wenn wir zu den Komponenten und dann zum App-Header gehen . Jeder dieser Router-Links hat diese Verbindungsklasse. Schnappen wir uns das, einen Punkt, da es sich um eine Klasse handelt, einen Rand von einem Rem, um dem etwas Abstand zu geben , los geht's, und wir werden auch sicherstellen dass jedes dieser Elemente seine Farbe ändert , wenn wir den Mauszeiger darüber bewegen. Um dies zu tun, zielen wir erneut auf unseren Link ab. Wir verwenden den Hover-Selektor und ändern die Textfarbe auf einen RGB-Wert von 161. Also das Rot, Grün von 132 und 132 auch für das Blau. Schließlich legen wir für alle Schaltflächen auf unserer Website auch das Standarddesign für jede dieser Schaltflächen fest. Die Schaltfläche entfernt also den Hintergrund, die Standardfarbe, indem sie diese auf Keine setzt. Ein sehr feiner Rand von 0,5 Pixeln, eine durchgezogene Linie, und die Farbe dieser Linie wird für jedes dieser Pixel einen RGB-Wert von 202 haben. Ein Randradius von 0,3 Rms, etwas Polsterung, um den Button etwas größer zu machen. Also ein halbes Rem oben und unten und ein Rem links und rechts. Ich muss den Benutzer auffordern , auf diese Schaltflächen zu klicken , um den Cursor in einen Zeiger zu verwandeln. Wenn wir also zu unserem Projekt übergehen, können wir sehen, dass einige davon wirksam geworden sind. Denken Sie jedoch daran, dass dies nur allgemeine Stile für unser Projekt sind Stile für unser Projekt und wir jeder unserer einzelnen Seiten und Komponenten spezifischere Stile hinzufügen werden . 16. Speise- und Basket: Als Nächstes gehen wir in das Menü „Datei anzeigen“ und fügen diesen Ansichtskomponenten ein bestimmtes Design hinzu . Mach das auf. Dann fügen wir direkt unter den Vorlagen den Stil hinzu und fügen diese bereichsbezogenen Attribute hinzu. Wenn Sie das scoped-Attribut noch nicht verwendet haben, bedeutet dies, dass alle Stile nur für diese Komponenten gelten, d. h. für die Vorlagen, die wir oben erstellt haben. Um diese in Aktion zu sehen, springen wir zum Menübereich. Mach das ein bisschen kleiner. Oben haben wir eine Level-3-Überschrift, das ist diese hier. Nehmen wir das und stellen wir die Textausrichtung so ein , dass sie in der Mitte liegt. Das gilt auch für unseren Korb. Sowohl dieser obere als auch dieser untere Abschnitt werden in der größeren Ansicht bald links und rechts angewendet. Aber zuerst beginnen wir mit dem mobilen Layout, dem kleinen Bildschirm. Lassen Sie uns direkt unter unserem h3 das mobile Layout sagen. Um zwischen unseren beiden Layouts zu wechseln, werden wir die Flexbox verwenden. Wenn wir ganz nach oben gehen, können Sie sehen, dass dieses Div die Klasse des Menü-Wrappers hat. Dies wird derjenige sein, der dafür verantwortlich ist, die Richtung unseres Menüs und auch unseres Korbs zu kontrollieren . Diese beiden Divs sind die untergeordneten Elemente des Menu Wrappers. Wenn wir runtergehen und dies auswählen, können wir die Flexbox verwenden. Menü-Wrapper. Das Display wird der Flex sein. Sie können die Standard-Flexrichtung sehen, wenn Sie die Flexboxen hintereinander verwenden. Diese werden auf der Seite nebeneinander platziert. Dies ist das Layout, das Sie in der breiteren Ansicht haben möchten. Für die kleinere Ansicht müssen wir dies jedoch überschreiben, um die Flexrichtung der Spalte zu verwenden. Auch die Farbe. Die Schriftfarbe wird ein RGB-Wert von 80, 96 und 112 sein. Als nächstes haben wir die beiden Abschnitte , die sich darin befanden und die wir uns gerade angesehen haben, nämlich den Menübereich oben und dann den Korbbereich. Jeder von ihnen hat seine eigene entsprechende Klasse. Wir haben.menu und.basket. Wir legen den Hintergrund für jeden dieser Abschnitte auf eine Hex-Farbe fest. Der, für den ich mich entscheiden werde, ist faf1e2. Der Randradius für jeden dieser Abschnitte, kleiner Wert von drei Pixeln. Die Höhe, nur für den Fall, dass wir nicht viel Inhalt haben, stellen wir sicher, dass jeder dieser Abschnitte mindestens 100 Prozent der Viewporthöhe ausmacht. Dann etwas Polsterung auf der Innenseite dieser Elemente, um einen gewissen Abstand zum Bildschirmrand zu haben. Dies ist die Richtung, die wir für die mobile Ansicht haben. Wenn wir das etwas breiter dehnen, wollen wir es umdrehen , sodass die Biegerichtung eine Reihe ist. Wir können dies innerhalb einer Medienabfrage tun, wobei ich möchte, dass der Bildschirm eine Mindestbreite von 900 Pixeln hat. Bitte wirksam werden. Jetzt schnappen wir uns den Menü-Wrapper-Abschnitt, kopieren ihn und fügen ihn ein. Wir haben den Display-Typ bereits auf Flex eingestellt. Wir werden das entfernen. Ich habe die Farbe schon eingestellt. Wir werden das entfernen. Alles, was wir hier tun müssen, ist die Biegerichtung so einzustellen , dass sie in einer Reihe liegt. Fügen Sie etwas Leerzeichen dazwischen ein, indem Sie den Inhalt rechtfertigen. Dann müssen wir entscheiden, wie viel Platz jeder dieser Abschnitte beanspruchen soll. Die Pizza-Abteilung wird wahrscheinlich etwas mehr Platz benötigen. Wir können die Biegerichtung nutzen , um mehr Platz als der Korb zu haben. Für die größere Ansicht nehmen wir den Menübereich setzen den Flex-Wert auf zwei. Dann legen wir für unseren Korb den Flex-Wert auf eins fest. Dies bedeutet, dass versucht wird, das Doppelte des verfügbaren Speicherplatzes wie der Korbbereich zu beanspruchen . Sie können sehen, dass sich dies im Browser widerspiegelt. Wir können den Unterschied zwischen diesen beiden Abschnitten erkennen. Wir fügen rechts neben diesem Menü einen Rahmen hinzu, um eine vertikale Linie in der Mitte hinzuzufügen. Stellen Sie im Menü den Rand rechts von einem Pixel, eine durchgezogene Linie und die RGB-Farbe 202 für jeden Wert ein. Da haben wir es. Wir sind jetzt fast fertig für diesen Abschnitt, aber was ich für diese beiden Schaltflächen hier tun werde , ist, den Rand zu entfernen sie ein bisschen kleiner zu machen. Wenn wir zum Abschnitt gehen, sehen wir, dass jede dieser Schaltflächen die Klasse quantity_button hat. Wir können dies im allgemeinen Abschnitt direkt über der Medienabfrage tun. Menge_ btn. Entferne den Rand. Stellen wir die Polsterung auf einen Wert von 0,4 Rems ein. Dadurch wird nun die Polsterung für diese beiden Mengenschaltflächen reduziert . Als nächstes fahren wir mit dem Thema Styling fort. Wir werden unserem Header-Bereich etwas Styling hinzufügen. 17. Header: Sicherlich werden wir einige neue Komponenten und auch einige neue Artikel hinzufügen unserer Website einige neue Komponenten und auch einige neue Artikel hinzufügen. Aber schnell, kurz bevor wir das tun, werden wir etwas Styling auf diesen Header-Abschnitt anwenden . Öffnen wir die Seitenleiste, springen wir zu unseren Komponenten und dann zum AppHeader. Der AppHeader benötigt den Style-Abschnitt unten, und der Style-Abschnitt wird auf diese speziellen Komponenten beschränkt. Schauen wir uns an, was wir haben. Wir haben die Titelklasse der Website ganz oben. Fangen wir damit an. Seitentitel. Beginnen Sie mit der Schriftgröße für unseren Seitentitel und wir entscheiden uns für 3,6 Zeilen. Mach es ziemlich groß. Die Farbe von Alice Blue. Wir können es im Moment nicht allzu oft sehen aber in Kürze werden wir diesem Header-Bereich eine Hintergrundfarbe hinzufügen diesem Header-Bereich eine Hintergrundfarbe um ihn noch besser hervorzuheben. Wir fügen eine Transformation hinzu , damit sich dieser Wert um einen bestimmten Wert dreht , indem wir die Rotationsfunktion hinzufügen. Geben Sie die Gradzahl um die Sie es drehen möchten, und dies kann eine positive oder eine negative Zahl sein. Acht Grad. Sie können sehen, dass dies jetzt eine Neigung hat und Sie können diesen Wert erhöhen oder verringern. Um etwas Abstand zum darunter liegenden Inhalt zu schaffen, fügen Sie am unteren Rand der Elemente einen Rand hinzu. Lass uns zwei Rems nehmen. Dann können wir uns unseren Header holen, der der Wrapper für diesen vollständigen Abschnitt ist . Der Header wird die CSS-Flexbox verwenden , um die Dinge zu ordnen. Sowohl bei der kleineren als auch bei der größeren Bildschirmansicht werden diese Inhalte vertikal in der Flexrichtung der Spalte platziert . Stellen Sie den Anzeigetyp ein. Denken Sie daran, dass die Standard-Flexrichtung eine Zeile ist, die von links nach rechts auf der Seite verläuft. Wir können das umstellen , um die Spalte zu verwenden. Sie die Flex-Eigenschaft von align-items, um den Inhalt in der Mitte zu platzieren Verwenden Sie die Flex-Eigenschaft von align-items, um den Inhalt in der Mitte zu platzieren. Wir können sehen, dass der Inhalt ziemlich genau am oberen und auch am unteren Rand der Kopfzeile steht. Wir fügen etwas Platz hinzu mit einem Füllwert von einem Rem oben und unten und Null links und rechts. Für die Menülinks passen wir die Farbe von Alice-Blau an und platzieren sie dann im Hintergrundbild. Denn das Hintergrundbild wird auf eine URL verweisen, die in unserem Projekt gespeichert ist. Gehen wir in den Assets-Ordner, in die Images, und dann haben wir hier ein Bild namens main-bg. Dies ist ein Punkt mit einem Schrägstrich, springen Sie in den Assets-Ordner, Bilder, Haupthintergrund. Wir wollen auch festlegen, dass sich das nicht wiederholt. Da wir einen Hintergrund hinzugefügt haben, möchten wir auch die Höheneigenschaft erweitern und diese auf einen festen Wert von 650 Pixeln festlegen . Die Hintergrundgröße stellen wir so ein, dass sie abdeckt. Wenn wir uns dann dieses Bild im Bilder-Ordner, dem main-bg, ansehen Bilder-Ordner, dem main-bg, , können wir sehen, dass dieses Bild nicht zentriert ist, sondern auf der rechten Seite abgeschnitten ist. Lassen Sie uns das beheben und zu unserem CSS zurückkehren. Verwenden Sie die Eigenschaft Background Position. Stellen Sie das in die Mitte. Dieses Bild wird jetzt auf verschiedenen Bildschirmgrößen immer zentriert sein . Als nächstes ein kleiner Tech-Schatten für jedes dieser Zeichen mit einem Pixel, einem Pixel, drei Pixeln, und die Farbe, die für diesen Tech-Schatten angewendet werden soll, wird ein RGB-Wert von 20, 20, 20 sein. Das nächste, was Sie tun müssen, ist diese Ebene zur Überschrift, die den Text des Platzes Nummer 1 für Pizza enthält. Wir können das mit dem H2-Selektor aufnehmen und etwas Abstand hinzufügen. Eine Randeigenschaft von zwei Rems oben und unten und Null links und rechts. Eine Textfarbe in antikem Weiß und die Schriftgröße von zwei Zeilen. Gut. Damit ist unser Styling für den Header abgeschlossen. Unsere Seite sieht ein bisschen schöner aus. Als Nächstes gehen wir zur Admin-Seite und erstellen ein neues Pizza-Formular. 18. Admin: Füge neues Pizza hinzu: In unserer Admin-Ansicht wird dies in Kürze in mehrere Bereiche aufgeteilt . Es ist sinnvoll, all diese Bereiche in verschiedene Komponenten zu organisieren und diese Komponenten auch in einem Admin-Ordner abzulegen. Lass uns in die Seitenleiste springen. In die Komponenten und hier drin. Erstellen Sie einen neuen Ordner mit diesem neuen Ordnersymbol namens admin, und wir gruppieren alle administrativen Komponenten. Erstellen Sie hier eine neue Datei. Dies wird die erste Komponente für unseren Admin sein, nämlich ein Formular zum Erstellen einer neuen Pizza. Wir nennen das NewPizza.vue. Erstellen Sie die Vorlage , die wir für diesen Abschnitt und den Abschnittswrapper benötigen . Dies wird die Klasse admin_section haben. Dies wird aufgeteilt, um einen Header-Bereich mit einem Titel und auch das Formular zum Hinzufügen unserer neuen Pizza zu haben. Der Header für diesen Abschnitt, die Klasse von admin_section_header, h3. Text von Füge neue Pizza hinzu. Bevor wir mit weiteren Inhalten fortfahren, schauen wir uns an, wie das im Browser aussieht, aber zuerst müssen wir es in unseren Adminbereich importieren . Gehe runter zu den Ansichten und der Admin-Ansicht. Platzieren Sie es ganz oben in unserem Skript, um unsere Datei zu importieren. Was wir hier tun werden, ist ein Attribut namens setup hinzuzufügen . Wir werden in diesem Kurs sehr bald auf dieses Setup zurückkommen, aber vorerst werden wir die Komponente importieren, die wir erstellt haben die New Pizza heißen wird. Ich importiere das aus dem Verzeichnis @, um uns zur Route, zum Komponentenordner, zum Administrator und zum Dateinamen der neuen Pizza zu bringen. Wir haben die Überschrift für Stufe drei, jetzt können wir unsere Komponenten importieren und diese unten platzieren. Sobald wir gespeichert haben, werden wir sofort sehen, dass dies zum Admin-Bereich hinzugefügt wurde Gehen Sie also zum Admin-Link und dies ist der Titel , den wir in den neuen Pizza-Komponenten hinzugefügt haben. mit und unter dem Titel fort und erstellen Sie unser Formular. Wir werden die Aktion entfernen, da sie durch die Bearbeitung aller notwendigen JavaScripts angetrieben wird. Jeder unserer Abschnitte, wie der Name der Pizza, die Beschreibung und die verschiedenen Optionen, war von einem Div-Design umgeben. Dieses Div wird die Klasse form_group haben. Dann wird das ein Label und eine Eingabe haben. Die Bezeichnung, der Namenstext, die Eingabe. Der erste für den Pizzanamen enthält die Art des Textes und die ID des Namens , die zu unserem Etikett passen. Lassen Sie uns diesen DIV-Abschnitt kopieren. Wir duplizieren das und fügen es unten ein. Der zweite wird für die Beschreibung sein. Für diesen benötigen wir keine Eingabe, wir verwenden einen Textbereich, sodass wir mehrere Textzeilen oder eine lange Beschreibung haben könnten . Wir werden den gesamten Inhalt hierher verschieben. Lassen Sie uns das bereinigen und wir fügen die Zeilen hinzu, die wir benötigen. Lassen Sie uns den Standardwert auf fünf setzen und auch eine Beschreibungs-ID, die der obigen Bezeichnung entspricht. Speichern Sie dies und wir können sehen, dass unsere Eingaben jetzt auf dem Bildschirm erscheinen. Als Nächstes werden wir zwei neue Abschnitte erstellen, die für unsere erste und unsere zweite Pizzaoption bestimmt sein werden . Dadurch erhalten wir zwei verschiedene Optionen für die Pizzagröße. Durch den Text innerhalb der P-Elemente werden diese als starke Elemente dargestellt, um sie fett zu machen. Option 1. Dann können wir mit unseren Formularelementen fortfahren. Wir kopieren die Schriftgruppe von vorhin, die oberste, schreiben hinein und diese wird für die Größe sein. Das wird in Zoll sein. Das Etikett der Größe eins. Die Art des Textes ist völlig in Ordnung, und wir werden auch seine ID mit dem Etikett abgleichen. Darunter müssen wir auch eine neue Formulargruppe erstellen, und diese bezieht sich immer noch auf Option 1, und dies ist der Preis für diese bestimmte Größe. Der Text des Preises, das Etikett für Preis 1, die passende ID. Dann werden wir diesen Abschnitt sorgfältig duplizieren, also den Preis, die Größe und auch den Text. Kopiere das. Fügen Sie es unten ein, um einen zweiten Abschnitt zu erstellen. Dieser ist für Option 2. Ändern wir die Eigenschaftsnamen jedes dieser Attribute auf Größe 2. Das Gleiche gilt für den Preis. Speichern Sie das und wechseln Sie zum Browser. Wir haben jetzt zwei Abschnitte zum Ausfüllen der Größen. Im letzten Abschnitt wird es um eine Schaltfläche zum Absenden dieses Formulars gehen. Platzieren Sie dies erneut in einem Div mit der Klasse der Formulargruppe. Dadurch bleibt das Styling konsistent. Fügen Sie eine Schaltfläche mit dem Text von Hinzufügen hinzu. Sie werden jetzt ein neues Pizza-Formular hinzufügen, das jetzt abgeschlossen ist. Wir werden später darauf zurückkommen und das Styling verbessern. Aber als Nächstes gehen wir zu einer anderen Admin-Komponente über, nämlich der Anzeige der Pizzen. 19. Admin: Pizzas Komponente: Wir haben also das Hinzufügen neuer Pizza-Komponenten im Admin. Die nächste Admin-Komponente, die wir erstellen werden , ist eine Pizza-Komponente, die alle verfügbaren Pizzen auf der Speisekarte anzeigt . Ich springe in die Seitenleiste und erstelle erneut eine neue Datei Vue.js im Admin, um das zu organisieren. Das wird einfach Pizzas.vue sein. Schließen Sie wie immer die Seitenleiste und erstellen Sie eine Vorlage zum Speichern unseres HTML-Codes. Ein Abschnitt, der die Klasse admin_section haben wird . Schauen Sie sich auch die neue Pizza-Komponente an , die wir zuvor erstellt haben. Dies entspricht auch demselben Abschnitt. Wir können also das gleiche CSS-Styling anwenden. Dies wird auch einen Header haben. Nochmals, gleiche in diesem Header genau hier mit dem gleichen Klassennamen ab. Die Klasse war also admin_section_header. Dies gibt uns einen einheitlichen Stil für alle unsere Admin-Blöcke, Überschrift Level 3 mit dem Text des Menüs. Das ist also alles, was wir für den Header-Bereich brauchen. Lassen Sie uns unter die Überschrift springen und unsere Tabelle erstellen , in der alle verfügbaren Pizzen aus der Speisekarte aufgeführt sind. Sie den Threadabschnitt oder die Tabellenüberschrift Platzieren Sie den Threadabschnitt oder die Tabellenüberschrift in einer Zeile und das dritte Element, um Ihre beiden Überschriften zu erstellen. Also werden wir das ziemlich einfach halten. Alles, was wir tun, ist, links einen Pizzanamen hinzuzufügen, und dann fügen wir auf der rechten Seite des Tisches eine Schaltfläche hinzu, um diese Pizza aus dem Menü zu entfernen. Die Überschrift von Pizza und die zweite wird also der Text von Aus dem Menü entfernen sein . Ich werde dafür später eine Funktion einrichten. Erstellen Sie unter dem Thread den Abschnitt tbody. Die erste Reihe, die unter unseren Überschriften stehen wird. Das erste, was hier drin ist, ist der Pizzaname in den Tabellendatenelementen, und wir fügen hier einfach einen Beispieltext für unseren Pizzanamen hinzu und verknüpfen ihn später mit unserer Datenbank. Als nächstes ist die nächste Zelle in den Tabellendaten eine Schaltfläche, mit der die Pizza aus dem Menü entfernt wird . Die Schaltfläche hat den Typ einer Schaltfläche und auch eine Klasse für unser Styling von btn_remove. Dann in einer HTML-Entität, die das Kreuz sein wird. Dies ist das Ampersand, das Wort der Zeit, gefolgt von einem Semikolon. Das ist der gesamte Inhalt, den wir für den Moment benötigen . Später erstellen wir eine For-Schleife , um alle verfügbaren Pizzen zu durchsuchen und jede dieser Zeilen zu duplizieren. Ebenso wie bei den neuen Pizza-Komponenten müssen wir diese in die Admin-Ansicht importieren, hier. Dupliziere das und das wird für alle Pizzen sein. Dies ist im selben Admin-Ordner. Also ändern wir den Namen und ich füge ihn am Ende der Datei in den Browser ein. Da ist unser Tisch mit unserer einzigen Reihe und unserer Einzelpizza. Als Nächstes erstellen wir die endgültigen Admin-Komponenten , um alle Kundenbestellungen aufzulisten. 20. Admin: Auflistung der Orders: Die letzten Admin-Komponenten, die wir benötigen, werden verwendet, um die aktuellen Bestellungen aufzulisten. Auch hier habe ich nur diese Komponenten im Admin-Ordner, um das zu organisieren. Erstellen Sie eine neue Datei und diese wird die orders.vue sein. Dies folgt ebenfalls einem ähnlichen Muster wie die vorherigen, bei denen wir eine Vorlage erstellen, einen Abschnitt mit der Klasse Admin-Bereich erstellen, eine Kopfzeile und dann eine Tabelle erstellen, um alle Bestellungen aufzulisten. Fangen wir mit der Vorlage und dem Abschnitt ganz oben an. Das ist unser Wrapper. Der Abschnitt muss auch eine Klasse von Admin-Abschnittsüberschriften haben . Auch dies entspricht den vorherigen Admin-Komponenten , die wir erstellt haben, ebenso wie der Header oben, die Klasse und ob ich einfach die falsche oben verwenden könnte. Lass uns das kopieren. Dieser sollte die Kopfzeile des Admin-Abschnitts sein und der Abschnitt sollte der Klasse des Admin-Abschnitts entsprechen. Gut. Wir sind jetzt wieder auf dem richtigen Weg und können innerhalb der Kopfzeile unsere Level-3-Überschrift mit dem Text der aktuellen Bestellungen erstellen . Genau wie bei den Komponenten der Pizza die wir gerade erstellt haben, später, wenn wir sie mit Firebase verknüpfen werden alle unsere Informationen später, wenn wir sie mit Firebase verknüpfen , aus unserer Datenbank abgerufen. Das heißt, es wird dynamisch sein. Im Moment geben wir nur einige Scheindaten ein und fügen fünf aktuelle Bestellungen Dies wird steigen und fallen, je nachdem wie viele Bestellungen wir tatsächlich in unserer Datenbank haben. Als nächstes der Tabellenabschnitt, die Tabellenzeile, die ten Tags für die Überschrift. In den Bestellungen wird der Artikel aufgeführt, der der Name der Pizza sein wird. Denken Sie daran, dass jede Pizza zwei verschiedene Größen hat, daher müssen wir dies auch auflisten. Wir müssen die Menge und auch den Preis kennen. Wir fügen innerhalb der Klammern das Wort Summe hinzu, da dies der Gesamtwert ist, der sich aus der Anzahl der Pizzen multipliziert mit dem Preis ergibt. Sie dann unter unserer ersten Tabellenzeile Fügen Sie dann unter unserer ersten Tabellenzeile die zweite Zeile hinzu, und vorerst geben wir eine Musterbestellung auf. Die erste Zelle innerhalb des Tabellendatenelements wird für die Auftragsnummer sein. Diese Zelle wird auch zwei Informationen enthalten. erster Stelle steht die tatsächliche Bestellnummer, je nachdem, wie viele Bestellungen wir haben, erhöht wird je nachdem, wie viele Bestellungen wir haben, Außerdem fügen wir eine Schaltfläche hinzu, um diese Bestellung aus der Datenbank zu entfernen, was nützlich sein wird, sobald die Bestellung abgeschlossen ist. Innerhalb der starken Tags fügen wir die Bestellnummer hinzu. Platzieren wir vorerst auf Platz 1. Die Schaltfläche, die HTML-Entität, die das Ampersand und die Zeiten sein wird , gefolgt von einem Semikolon, und das ist ein kleines Kreuz, um dies aus unserer Datenbank zu entfernen, die Klasse für unser Styling von btn_remove und auch der Typ der Schaltfläche. Diese Bestellnummer und diese Schaltfläche zum Entfernen befinden sich eigenen unabhängigen Zeile und dann enthält die dritte Zeile, die wir direkt darunter hinzufügen alle Werte unter unseren Überschriften. Daher sind die ersten Tabellendaten , die wir benötigen, das Element. Dies wird der Name der Pizza sein, gefolgt von der Größe und der Menge. Alle Werte hier sind vorerst in Ordnung. Das letzte, was wir brauchen, ist der Preis. Um dies zu sehen, springen Sie in unsere Admin-Ansicht. Jetzt können wir das oben in unserer Datei importieren. Das sind die Befehle. Ich platziere das unten in der Vorlage. Scrollen Sie nach unten. Gut. Wir haben einen Großteil der Benutzeroberfläche, also ist jetzt der Admin-Bereich eingerichtet und alles ist jetzt eingerichtet, um einige dynamische Daten aus unserer Datenbank hinzuzufügen . Aber als Nächstes springen wir zu einer anderen unserer Ansichten, der Startansicht, und beginnen, unsere Inhalte hinzuzufügen. 21. Startseite Ansicht: Als Nächstes arbeiten wir an dieser Home-Ansicht, bei der es sich um neue Komponenten handeln wird, und sie wird mit dem View-Router ausgetauscht. Denken Sie daran, dass wir diesen Header-Bereich oben haben. Dann haben wir unten bereits zwei separate Ausgänge über den RouterView platziert. Wir haben die Abschnitte „Lieferung“ und „Verlauf und sie werden immer am Ende unserer Vorlage enthalten sein . Denken Sie daran, dass wir direkt darüber unser RouterView haben, das alle Komponenten in unserem Views-Ordner anzeigt . Wir haben unsere Home-Ansicht bereits eingerichtet. Wir haben eine einfache Vorlage mit dem Text von home. Wir können das gerade hier sehen. Denken Sie daran, dass unsere beiden Komponenten unten , die in der RouterView platziert sind, nur auf dieser Homepage angezeigt werden, denn wenn wir den Router und die Indexseite aufrufen, haben wir diese beiden als Liefer- und Verlaufskomponenten und als Standard eingerichtet , was die Startansicht ist. Dies wird dieser Abschnitt oben sein. Lass uns jetzt in die Home-Ansicht springen. Dann können wir uns an die Arbeit machen, indem einige Inhalte für unser Styling hinzufügen. Wir können die Klasse hot einrichten und dann direkt darunter einen neuen div-Abschnitt erstellen, einen neuen div-Abschnitt erstellen, und dieser wird die Klasse hot_text haben. Gehen Sie nach oben, eine Überschrift der Stufe 3. Daraufhin wird der Text „Heiß aus dem Ofen“ angezeigt. Da haben wir es. Ein Abschnitt für diese Homepage wird auch etwas Text enthalten und auch eine vegetarische Hot_Pizza sowie ein Bild enthalten, das wir im Bilderordner haben, der sich in den Assets befindet. Wir brauchen diese fire.jpg. zuerst den Text unter der Überschrift Level 3 Fügen Sie zuerst den Text unter der Überschrift Level 3 ein p-Element für unseren Text hinzu. Dieser wird die Klasse hot_pizza_name haben. Der Name der Pizza ist scharf vegetarisch. Kleiner Text. Dieser wird die Klasse hot_pizza_description haben. Dann der Text unseres typischen Vegetariers, aber mit einem Kick. Dann können wir unter diesem Text einen Router-Link einfügen, der auf unser Menü verweist. Die RouterLink-Komponente, der Text von Let's Order. Dann müssen wir wie immer bei unserem RouterLink die beiden Attribute mit dem Doppelpunkt übergeben, da dies dynamische Daten enthalten wird. Übergeben Sie unsere dynamischen Objekte, wo wir auf den Namen von MenuLink verlinken. Dieser MenüLink ist derselbe , den wir in der Router-Datei, die wir im Router sehen können, und dann in der index.js eingerichtet die wir im Router sehen können, haben. Dies sind die eindeutigen Namen , die wir jedem dieser Pfade hinzugefügt haben . Fast da. Jetzt haben wir diesen DIV-Abschnitt und dann direkt darunter platzieren wir ihn in unserem Bild. Ich werde auf das Bild verweisen , das wir uns gerade angesehen haben und das sich im Assets-Ordner befand. Wir verwenden../, um in unserem Verzeichnis eine Ebene nach oben zu springen , in die Assets, Images und die Datei fire.jpg. Klassenstyling kann hot_img sein, und dann auch der Alt-Text. Unsere Inhalte sind vollständig vorhanden. Lassen Sie uns einfach überprüfen, ob dieser Link funktioniert. Das springt zu unserem Menübereich, was gut ist. Wir können unter unsere Vorlage springen und den Style-Bereich hinzufügen. Dies möchte an diese Komponente angepasst werden. Wir beginnen mit dem Hauptabschnitt mit der Klasse Hot, und dies ist der Wrapper für den gesamten Abschnitt. Dies wird für die Änderung des Layouts auf der kleinen und der großen Bildschirmansicht verantwortlich sein . Dazu verwenden wir den Display-Typ Flex. Da wir mit der mobilen First-Ansicht beginnen, können wir den Browser verkleinern und dann auf dem kleineren Bildschirm zu einer Spaltenrichtung wechseln . Flex-Direction entspricht Spalte. Dadurch werden unsere Inhalte vertikal platziert. Dann schalten wir innerhalb einer Medienabfrage auf dem größeren Bildschirm um, um Row zu verwenden. Wir machen das jetzt mit @media, wo wir die Mindestbildschirmbreite von 900 Pixeln anstreben. Auch hier nehmen wir die Klasse Hot und ändern die Flexrichtung so , dass sie der Reihe entspricht. Der kleine Bildschirm, vergrößern Sie ihn, und jetzt erscheinen zwei Elemente nebeneinander. Das erste Element war dieses Div und das zweite ist unser Bild. Platzieren wir das in der Mitte und richten Sie die Elemente aus. Eigentlich will das nur in den mobilen ersten Bereich gehen , also Nachschub für den kleinen Bildschirm. Außerhalb der Medienabfrage entscheiden wir uns für das Hot_Image und auch für den Hot_Text. Das ist eine Klasse, sie werden sie in die Punkte setzen. Wir haben die Klasse hot_text und auch unser Bild, das sind unsere beiden Hauptbereiche. Dies zielt auf unsere beiden Inhaltsbereiche ab, und wir werden sie auf die gleiche Größe bringen indem wir den Flex auf einen Wert von zwei Rems festlegen. Dann die Textausrichtung der Mitte. Als Nächstes haben wir die Überschrift, und diese hat keine Klasse, sodass wir auf eine Level-3-Überschrift abzielen können, die ein untergeordnetes Element des Hot_Texts ist. Der Wrapper von hot_text wählt das h3 aus, das darin verschachtelt ist, und legt die Farbe auf den Hexadezimalwert bb2118 fest. gibt uns diese schöne rote Farbe, die wir hier sehen können. Dann der hot_pizza_name, was die vegetarische Hot_Pizza ist. Machen Sie es ein bisschen größer, indem Sie die Schriftgröße einstellen. Versuchen wir es mit 2,2 Rems. ein bisschen kleiner. 1.8. Als Nächstes folgt der folgende Text der Klasse hot_pizza_description. Kopiere das. Leg das rein. Der Schriftstil soll kursiv sein, die Schriftstärke etwas leichter sein, nehmen wir 300. Lassen Sie uns das auch auf dem größeren Bildschirm überprüfen. Das ist in Ordnung. Vorerst können wir einige Anpassungen nach Ihrem Geschmack vornehmen , wenn Sie möchten. Aber als nächstes werde ich mit dem Styling für dieses Projekt fortfahren. Insbesondere werden wir unseren Tabellen und auch unseren Formulareingaben etwas Stil hinzufügen . 22. Form und Table: Um diesen Abschnitt abzurunden, schauen wir uns nun die Datei main.CSS an, in der wir beginnen können, einige gemeinsame Stile zwischen unseren Formularen und unseren Tabellen sowie einige allgemeine CSS-Styles anzuwenden zwischen unseren Formularen und unseren Tabellen . Von hier aus, insbesondere innerhalb des Adminbereichs, haben wir einige Bereiche, zu denen auch einige gemeinsam genutzte Klassen gehören. Wenn wir zum Beispiel in die Komponenten und in den Admin-Ordner gehen , haben wir diese neue Pizza. Dies hat den Abschnittswrapper des Admin-Bereichs, dann haben wir diesen konsistenten Header-Abschnitt mit derselben Klasse in allen drei Komponenten. Wir haben es hier ganz oben auf den Bestellungen und auch oben auf den Pizzen. Wir haben hier auch ein Formular, dem wir etwas Styling hinzufügen werden. Wir haben verschiedene Tabellen für das Menü und die aktuellen Bestellungen, und wir haben auch eine Tabelle in der Menüansicht. Wir haben verschiedene Stile, die von mehreren Komponenten gemeinsam genutzt werden . Anstatt einzelne Komponenten zu platzieren , gehen wir in die Datei main.CSS und fügen dort den gemeinsam genutzten Code hinzu. den wichtigsten Wrappern sowie den Formularen und Tabellen haben wir auch einige kleine Details wie die Schaltfläche zum Entfernen, die wir im Menü und auch in den aktuellen Bestellungen haben . Wir haben dem die Klasse btn_remove gegeben. All dies fügen wir jetzt in unser Stylesheet ein. Gehen Sie in die Quelle, in die Assets, und wir haben diese Haupt-CSS-Datei. Wir haben hier bereits einige Inhalte hinzugefügt, also gehen wir ganz unten unter der Schaltfläche, und wir werden von dieser Schaltfläche aus weitermachen und direkt darunter die Klasse btn_remove hinzufügen, die wir gerade zuvor gesucht haben. Da wir damit etwas entfernen werden, möchten wir wahrscheinlich eine rote Farbe hinzufügen. Der Farbton, für den ich mich entscheiden werde, ist ein RGB-Wert von 180 Zeile, 67 und 67. Sie können es sofort sehen, sobald Sie diese beiden Schaltflächen unten gespeichert diese beiden Schaltflächen unten haben und jetzt die Farbe ändern. Wir können diesen Rand auch entfernen , indem wir ihn auf keinen setzen und ihn ein wenig sichtbarer machen, indem wir die Schriftgröße auf 1,2 Zeilen erhöhen . Dieser Menüabschnitt und auch die aktuellen Bestellungen sind in einer HTML-Tabelle enthalten. wir für das Haupttabellenelement etwas Styling hinzu. Wir können in einem Randradius platzieren, nur einen subtilen Randradius von 0,3 Rems. Wir werden das deutlicher sehen, wenn wir verschiedene Farben hinzufügen. Wir können die Textausrichtung auch so einstellen, dass sie links liegt. Dadurch wird der gesamte Text links von jeder der einzelnen Zellen verschoben. Eine Breite von 100 Prozent zeigt die gesamte verfügbare Breite an. Dann gehen wir runter zu den einzelnen Zellen , die in der th enthalten sind, für unsere Tabellenüberschrift und auch td für unsere Tabellendaten. Den Abstand fügen wir etwas Polsterung oder etwas Abstand auf der Innenseite des Elements von 0,6 Rems hinzu. Als Nächstes arbeiten wir an diesem Formular für den Abschnitt „ Neue Pizza hinzufügen“. Schnapp dir das Hauptformular, etwas Abstand von Null oben und unten und 1 Rem links und rechts. Außerdem passen wir den Randradius der Tabelle an, indem wir diesen ebenfalls zum Formular hinzufügen. Auch das werden wir später noch deutlicher sehen. In der neuen Pizza werden wir sehen, dass jedes dieser Formularelemente wie der Name und die Beschreibung in diesem Div mit der Klasse der Formulargruppe enthalten ist . Dies ist für jeden dieser Abschnitte konsistent. Schnapp dir das. Das ist also form_group. Etwas Polsterung verteilt jede dieser Gruppen und wir fügen ein Rem vertikal oben und unten und Null links und rechts hinzu. Verwenden Sie die Flex-Box mit dem Flex-Display. Wir richten die Elemente in der Mitte aus. Wenn Sie Elemente mittig ausrichten, wie Sie sehen können, wird diese vertikale Ausrichtung erreicht , sodass der Text in der Mitte jedes dieser Abschnitte bleibt . Wenn wir das nicht haben, können Sie sehen, dass der Text ganz oben an diesem Element ausgerichtet ist . Wir fügen ganz unten einen Rand von 0,5 Rms für die Dicke hinzu, eine durchgezogene Linie und die Linienfarbe für jede der Farben einen RGB-Wert von 202. Hoppla, das ist ein bisschen zu dick da. Das wollen nur 0,5 Pixel sein. Dann entfernen wir die Unterstreichung ganz unten. Nochmals, schnappen Sie sich unsere form_group, wählen Sie den letzten Typ der das allerletzte Vorkommen ist, also unsere Schaltfläche, und dann entfernen wir den unteren Rand indem wir diesen Wert auf Keine setzen. Als Nächstes geben wir diesen Beschriftungen und auch unseren Eingaben mithilfe der Flex-Box eine einheitliche Größe. Das Etikett gibt ihnen einen konsistenten Flex-Wert von 1, sodass sie alle gleich bleiben. Da die Eingabe dann etwas größer sein soll, können wir auf alle Eingaben und auch auf den Textbereich abzielen und diesen einen Flexwert von 3 geben . Das bedeutet, dass alle unsere Eingaben im Textbereich versuchen, das Dreifache des verfügbaren Platzes als unsere Beschriftungen einzunehmen . Lassen Sie uns nun mit den Grenzen für jede unserer Eingaben arbeiten . Richten Sie den Rand knapp unter dem Flex-Wert von 3 ein. Dies wird den gleichen Wert annehmen wie unser Grenzboden. Wir können das kopieren und einfügen. Das gibt uns nur eine hellere, subtilere Grenze für jede unserer Eingaben. Ein Randradius von 0,3 Rems, etwas Polsterung, um diese etwas größer zu machen , von 0,6 Rems. Standardmäßig erbt es bei HTML-Formulareingaben und Textbereichen die Schriftart und die Farbe nicht Wir müssen diese also manuell festlegen, indem wir die Schriftfamilie so einstellen , dass sie von der übergeordneten Schrift erbt , und dasselbe gilt auch für die Farbe. Wie wir bereits gesehen haben, hat jede dieser Admin-Komponenten, wie die neue Pizza, diese Klasse von Admin-Abschnitten, und dann haben wir diese Admin-Abschnittsüberschrift. Lassen Sie uns auf unser Styling eingehen und wir können diese gezielt einsetzen. Zuerst der Haupt-Wrapper , der der Admin-Bereich ist. Marge von 1 Rem und dadurch werden alle unsere Komponenten voneinander getrennt. Die Hintergrundfarbe, die ein Hexadezimalwert von faf1e2 ist, und schließlich für diesen Abschnitt ein Randradius von 0,3 rems. Als nächstes der Header-Abschnitt für jede dieser Komponenten und denken Sie daran, dass diese die Klasse admin_section_header haben. Stellen Sie den Anzeigetyp auf Flex ein. Speichern Sie das. Dieser sieht gut aus und wie dieser werden wir ein kleines Problem haben, aber füge neue Pizza hinzu. Das sollte nicht Seite an Seite sein. Wir haben neue Pizza, wir haben die Verpackung, wir haben den Header, das Formular. Und tatsächlich müssen wir nur sicherstellen, dass dieser Header geschlossen ist , also schneide das abschließende Tag für den Header aus und füge es direkt nach unserem h3 ein . Das sieht jetzt besser aus und das hält uns jetzt konsistenter mit den übrigen Abschnitten. Zurück zum Styling. Und Sie fragen sich vielleicht, warum genau wir die Flex-Box gesetzt haben, wenn wir hier nur ein einziges Element haben. Nun, das liegt daran, dass wir später auch ein kleines Symbol auf der rechten Seite hinzufügen werden , um jeden dieser Abschnitte auszuklappen , falls wir ihn nicht benötigen. Da wir mehrere Abschnitte haben werden, können wir Rechtfertigungsinhalte hinzufügen, um zwischen den einzelnen Abschnitten Platz zu schaffen. diese vertikal ausgerichtet zu halten, richten Sie die Elemente außerdem in der Mitte aus. Dann zum Schluss noch etwas Polsterung von 1 rem, das auf allen Seiten dieses Titels abgespielt wird. Mit dem Styling kommen wir jetzt voran. Das sollte auch für unseren Menübereich gelten. Dann ist der letzte Abschnitt, in den wir in diesem Video im Home-Bereich etwas Stil hinzufügen werden in diesem Video im Home-Bereich etwas Stil , jeder dieser Infoblöcke bis zum Ende. Diese haben die Klasse info_block, was Sie sehen können, wenn wir uns die Hauptkomponenten ansehen, nämlich die App.vue. Dadurch werden unsere Liefer- und Historienkomponenten dargestellt, also springen Sie in die Lieferung. Dies hat die Klasse des Infoblocks ebenso wie die History-Komponente. Zurück zu unserem Styling-Info_Block. Der Anzeigetyp des Flex, die Flexrichtung der Spalte, Ausrichtung der Elemente in der Mitte, Hinzufügen einer gewissen Polsterung zu jedem einzelnen Rem sowie eine andere Hintergrundfarbe für jeden unserer Blöcke und der Hexadezimalwert von faf1e2. Speichern wir das und sehen wir, wie das aussieht. Im Browser können wir in der kleineren Ansicht sehen, diese vertikal übereinander gestapelt sind. Wir werden sie breiter ausdehnen. Die beiden Komponenten befinden sich nebeneinander und wir haben für jede Komponente diese Flexrichtung der Spalte. Wir haben den Inhalt in der Mitte ausgerichtet, ein wenig Polsterung und die Hintergrundfarbe. Es gibt noch einige andere Stilrichtungen, die auf einzelne Komponenten angewendet werden können, aber wir werden dies im Laufe des Kurses hinzufügen. Aber jetzt haben wir viele Inhalte. Im nächsten Abschnitt werden wir etwas JavaScript hinzufügen und uns die Verwendung der VueJS-Kompositions-API ansehen . 23. Optionen oder Zusammensetzung?: Die Options-API ist etwas, mit dem Sie vielleicht vertraut sind, wenn Sie in der Vergangenheit mit Vue.js in Vue Version 1 oder Vue Version 2 erstellt haben . Die gute Nachricht ist, dass die Options-API in Vue Version 3 immer noch da ist. Alternativ haben wir aber auch einen anderen Ansatz, den wir verwenden können der als Composition API bezeichnet wird. Die Options-API ist etwas, mit dem Sie vielleicht vertraut sind, wenn Sie in der Vergangenheit mit Vue Version 1 oder 2 gebaut haben. Dies ist eine traditionelle Methode zum Erstellen von Vue.js Anwendungen. Die gute Nachricht ist in Vue 3, es ist nirgendwohin gegangen. Die Options-API sieht so aus. In der Standardeinstellung für das Skript und den Export hatten wir verschiedene Abschnitte, z. B. einen Datenabschnitt. Dies enthielt alle Komponentendaten oder Zustände, die Sie sich als Variablen vorstellen können. Es gibt auch Methoden. Hier können wir unsere JavaScript-Funktionen hinzufügen und sie nach Bedarf aufrufen. den Abschnitten, die hier nicht aufgeführt gehören Haken, Uhren und Requisiten mit berechneter Lebensdauer . Auch hier gilt alles noch für die Verwendung in Vue 3. Für dieses Projekt werde ich jedoch die Vue 3 Composition API verwenden. Die Composition API ermöglicht es uns, Code zu schreiben , der eher wie normales JavaScript ist. Das ist wie eine normale JavaScript-Variable, ein Timeout und auch eine Funktion. Dies kann jetzt in die Apps von Vue.js geschrieben werden Ersetzen Sie dies genau wie die Options-API innerhalb einer Exportstandardeinstellung und dann in eine Setup-Funktion, die hier hervorgehoben wird. Dinge wie Variablen und Funktionen hier können der Vorlage zur Verfügung gestellt werden , indem Sie sie unten zurückgeben. Es ist auch erwähnenswert, dass wir die Setup-Funktion zusammen mit der vorhandenen Options-API verwenden können . Hier wird der Datenabschnitt übergeben, aber jeder andere Abschnitt der Options-API kann ebenfalls hinzugefügt werden. Das ist auch viel mehr, zum Beispiel können wir den Code in separaten Dateien organisieren und den Pfad bei Bedarf wiederverwenden und viele andere Dinge, die wir verwenden, wenn wir sie benötigen. Neben regulärem JavaScript können wir auch die Vue-Reaktivität verwenden. Hier importieren wir eine Referenz aus dem Vue-Paket und wickeln alle Variablenwerte damit ein. Eine Referenz wird verwendet, um den Inhalt in ein reaktives Objekt umzuwandeln . Das heißt, alle Teile unserer Anwendung, die darauf angewiesen sind, ändern sich, wenn sich die darin enthaltenen Daten ändern. Das bedeutet im Grunde, dass keine Komponenten bei Datenänderungen auf dem neuesten Stand gehalten werden. Wir werden auch sehr bald darauf zurückkommen. Zusammen mit ref können wir auch Dinge wie Computereigenschaften und Uhren aus dem Vue-Paket importieren Dinge wie Computereigenschaften und Uhren aus dem Vue-Paket , die mit der Options-API verfügbar sind. Schließlich haben wir auch eine kürzere Methode Schreiben von Kompositionscode, nämlich das Skript-Setup. Auf der linken Seite befindet sich ein ähnliches Beispiel wie zuvor, in dem wir einen Setup-Abschnitt haben und jedes Vue zurückgeben , das wir in der Vorlage oder im HTML verwenden möchten. Dann ist auf der rechten Seite genau dasselbe mit dem Skript-Setup. Es fügt unseren Skript-Tags ein Setup-Attribut hinzu, um den Code zu verkürzen. Beachten Sie auch, dass wir hier den Abschnitt für Rücksendungen nicht benötigen , da alle Daten, die wir in der Vorlage verwenden möchten , automatisch zur Verfügung gestellt werden. Das Skript-Setup wird der Ansatz sein, den wir in diesem Klassenprojekt verwenden, da es sauberer kürzer ist und auch intern eine bessere Leistung bietet. 24. Das NewPizza Objekt und die Datenbindung: Gehen wir jetzt in das NewPizza.ViewFile. Wir können damit beginnen, einige JavaScripts hinzuzufügen indem wir das Skript-Setup verwenden, das wir uns gerade angesehen haben. Wir können ein NewPizza-Objekt hinzufügen, das die Struktur für alle unsere Pizzen in unserer Anwendung sein wird . Direkt über der Vorlage fügen Sie die Script-Tags in den Setup-Attributen hinzu. Dann müssen wir, wie wir gerade gesehen haben, unsere Referenz importieren, und wir importieren sie aus dem View-Paket, das sich in den Knotenmodulen befindet. Dann können wir unsere NewPizza-Objekte erstellen, die in dieser Referenz enthalten sind. Diese Referenz erstellt ein reaktives Objekt, das wir in unserer gesamten Anwendung verwenden können in unserer gesamten Anwendung verwenden und der Status wird auf dem neuesten Stand gehalten. Lassen Sie uns das innerhalb einer Konstanten oder einer Variablen namens NewPizza beginnen einer Variablen namens NewPizza unsere Referenz als Wrapper einrichten. Dann können wir drinnen jede Art von Daten weitergeben, die wir wollen. Dies könnte eine Zeichenfolge sein, es könnte ein Array sein. Für unseren Anwendungsfall müssen wir jedoch ein Objekt erstellen , das alle Pizza-Eigenschaften hat. Diese Eigenschaften bestehen aus dem Namen Pizza, wir können sagen Margherita. Aber nur dafür setze ich Eg ein. Der Grund dafür ist, dass dies der Ausgangszustand unseres Formulars sein wird . Ich gehe in unseren Admin, schauen wir uns einfach um und wir sehen diesen Namen. Dies wird mit unserem Objekt verknüpft. Die Namenseigenschaft, die hier V-Modell verwendet , wird mit unserem Namen verknüpft. Wir werden die Beschreibung auch mit der nächsten Immobilie verknüpfen. Wenn wir dieses Formular zum ersten Mal protokollieren, der Text hier wider, was wir gerade hier sehen. Dies gibt dem Benutzer nur eine Aufforderung genau das zu schreiben, was er schreiben muss, um unsere NewPizza zu erstellen. Als nächstes eine Beschreibung. Auch hier geben wir ein Beispiel für eine köstliche Pizza auf Tomatenbasis, garniert mit Mozzarella. Durch ein Komma getrennt können wir dann unsere Optionen hinzufügen, was ein Array sein wird. diese in einem Array platzieren, können wir verschiedene Optionen erstellen , z. B. unsere Größe. Jeder wird ein Objekt sein. Wir werden zwei Objekte haben, genau wie dieses, Seite an Seite. Jedes von ihnen wird die Größeneigenschaft haben, sagen wir neun Zoll für das allererste, und auch einen Preis. Das Gleiche gilt für unser zweites Objekt, aber dieses wird für eine 12-Zoll-Pizza und auch einen Preis sein. Denken Sie daran, dass all diese Werte nur Startwerte sind. All diese Objektwerte können durch die Werte aus diesem neuen Pizzaboden ersetzt werden . Sie werden aktualisiert, bevor wir sie der Datenbank hinzufügen. Um unsere Formulareingaben mit unseren Objekteigenschaften zu verknüpfen, verwenden wir das Modell. Das Modell ermöglicht es uns, eine sogenannte bidirektionale Datenbindung zu erstellen , was, wie bereits erwähnt, bedeutet, dass die Werte aus unserem Objekt in den Formulareingaben angezeigt werden. In allen Formulareingaben, die wir eingeben, können wir sie dann aktualisieren, um diese Formulareingaben zu überschreiben. Dies wird sich in unserem Objekt widerspiegeln. Beginnen wir dazu mit dem Namen. Gehen Sie zu unseren Formulareingaben, wo wir den Namen eingeben. Wir können das v-model verwenden, um dies als Attribut zu übergeben. Wir möchten dies mit unserem Objekt verknüpfen, das NewPizza heißt, und wir können auf die Namenseigenschaft zugreifen, also NewPizza.Name. Lass uns das kopieren. Gehen Sie in den Textbereich und wir können dies mit der Beschreibung verknüpfen. Nach der Beschreibung haben wir dann Optionen, und wir müssen diese mit jedem dieser Array-Werte verknüpfen . Denken Sie daran, dass Arrays an der Indexnummernposition Null beginnen. Dieser wird Null sein, und dieser wird Index Nummer 1 sein. Gehen wir runter und wir können diese Optionen hinzufügen. Wir haben die Größe Nummer 1, füge das in NewPizza.Options ein. Wählen Sie den ersten Wert mit der Indexnummer Null für die Eigenschaft Größe aus. Kopieren wir das, fügen wir es in das Feld mit der ID von Preis Nummer 1 ein, ändert sich zu Preis. Dann runter zu unserer Option 2 in der Größe, das ist Index Nummer 1. Nochmals, indexieren Sie Nummer 1 für den Preis und ändern Sie auch die Objekteigenschaft in Preis 2. Wenn wir das nun in unserem Formular speichern, können wir alle Anfangsdaten in jedem dieser Felder sehen und Sie können sehen wir auch die Option richtig eingestellt haben. Wir haben die neun Zoll groß und auch die 12 Zoll. Sehen Sie sich auch die bidirektionale Datenbindung an und überprüfen Sie, ob das Objekt über dieses Formular aktualisiert wurde. Wir können jetzt in unsere Vorlagen gehen. Irgendwo hier können wir den Wert von NewPizza ausgeben. Wir können das oben sehen. Lassen Sie uns etwas aus diesen Eingaben entfernen. Dies ist jetzt aktualisiert. Gleiche gilt für die Beschreibung, das funktioniert. Versuchen wir, den Preis zu aktualisieren. Auch unsere zweite Option ist verlinkt mit. Wir können dies jetzt sicher entfernen und mit dem nächsten Video fortfahren. Wir werden uns die Referenzen genauer ansehen und uns ansehen, wie wir Artikel in den Warenkorb legen können . 25. Ref’s & In den Warenkorb legen: Bisher haben wir uns in dieser neuen Pizza-Komponente kurz mit etwas befasst, das als Schiedsrichter bezeichnet wird. Eine Referenz ist ein Wrapper für einen Wert. In unserem Fall ist der Wert die Pizza. Im kommenden Video werden wir auch eine Referenz als Verpackung oder Korb verwenden , ein Benutzer vor dem Kauf Pizzen legen kann. Dazu wird der Wert in ein reaktives Objekt umgewandelt . Der Vorteil ist, dass bei jeder Aktualisierung dieses reaktiven Objekts auch alle Komponenten, die auf diesen Daten basieren , ebenfalls aktualisiert werden. Gehen wir in die Menüansicht, um mit diesen zu arbeiten , und schauen wir uns die Referenzen genauer an. In der Menüansicht außerhalb der Vorlage erstellen Sie unser Skript mit dem Setup-Attribut. Erstellen Sie unseren Import, genau wie wir es zuvor betrachtet haben, wo wir die Referenz aus dem Paket Vue.js importieren. Wir müssen auch eine Konstante oder eine Variable für unseren Korb erstellen . Wickeln Sie dies in ein Floß, um den Inhalt reaktiv zu machen , und legen Sie den Anfangswert eines leeren Arrays fest. Wir müssen auch eine Funktion erstellen , die den Korb aktualisiert. Nennen wir das AddToBasket. Wie bereits erwähnt, können wir, wenn wir das Skript-Setup verwenden, das Skript-Setup verwenden, direkt auf jede dieser Variablen oder Funktionen in unserer Vorlage zugreifen . Gehen wir zu unserer Vorlage und suchen wir nach unserer Schaltfläche Hinzufügen. Stellen Sie sicher , dass wir uns in der Menüseite befinden. Wir können jetzt für den Klick mit @click auflisten und dies so einrichten, dass es unsere Funktion auslöst , die addToBasket genannt wurde . Überprüfe, ob das funktioniert. Wir werden es in ein Konsolenprotokoll aufnehmen. Jede Textzeichenfolge ist in Ordnung. Springt in die Konsole. Klicken Sie auf den Button und unser Text ist jetzt aktualisiert. Kurz bevor wir unserer Funktion etwas mehr Code hinzufügen, möchte ich schnell zu unserer Referenz zurückkehren und genauer sehen, wie das funktioniert. Dazu erstelle ich ein einfaches Objekt namens user mit der Name-Eigenschaft und auch einer Likes-Eigenschaft. Sie fragen sich vielleicht, warum ich hier gerade ein Benutzerobjekt eingegeben habe , das nichts damit zu tun hat. Nun, der Inhalt dieses Objekts ist nicht wichtig. Das Wichtigste, was hier zu beachten ist, ist JavaScript-Objekte Eigenschaften haben. In unserem Fall haben wir die Eigenschaft Name und die Eigenschaft Likes. Erinnern Sie sich noch, als ich vorhin sagte, wenn wir eine Referenz verwenden, verwandelt Vue.js hinter den Kulissen den Inhalt in ein reaktives Objekt. Wie wir gerade gesehen haben, hat jeder Objekttyp diese Eigenschaften. Da unser Korb hinter den Kulissen in ein Objekt verwandelt wird , wird ihm auch eine Werteigenschaft zugewiesen, und dieser Werteigenschaft können wir den Inhalt darin aktualisieren oder lesen. Lass uns das schnell abtippen und ich werde dir genau zeigen, was wir meinen. Vorerst kommentieren wir einfach unseren Korb. Wir erstellen einen bekannten Korb , bei dem kein Schiedsrichter zum Einsatz kommt. Das wird nur ein einfaches Objekt sein. noch einmal zu verstärken, wird unser Korb hinter den Kulissen in ein Objekt wie dieses umgewandelt in ein Objekt wie dieses und dann mit einer Werteigenschaft versehen Wenn es also darum geht, eine Referenz zu aktualisieren, genau wie unser Korb, aktualisieren wir ihn nicht nur mit dem Variablennamen wie basket, wir müssen auch den darin verschachtelten Wert aktualisieren. Wenn wir beispielsweise unsere Funktion addToBasket aufrufen, greifen wir zuerst auf unseren Variablen- oder Konstantennamen zu, dann auf den darin enthaltenen Wert. Oder wir könnten etwas wie die Push-Methode verwenden , um ein neues Objekt zu pushen. Der Name, jeder Inhalt ist in Ordnung, der Preis. Das ist alles nur Beispielcode, es spielt keine Rolle, ob es sich um eine Größe von 12 handelt. Da es sich um einen Korb handelt, müssen wir auch die Menge kennen. Um zu überprüfen, ob dies funktioniert, überprüfen Sie, ob wir den Wert darin aktualisieren Wir können zu unserer Vorlage gehen und den Wert unseres Warenkorbs ausgeben. Speichern wir das. Rüber zur Speisekarte. Wir können sehen, dass wir die Werteigenschaft haben, die leer ist. Klicken Sie auf „Plus“ und wir sehen nicht, dass dies aktualisiert wurde. Wenn wir dies jedoch aktualisieren, um einen Verweis zu verwenden , entfernen Sie den Kommentar. Klicken Sie auf die Schaltfläche. Wir können sehen, dass dieses Objekt jetzt reaktiv ist und jede Aktualisierung unseres Warenkorbs jetzt in unsere Vorlage übertragen wird. Ein wichtiger Punkt, den es hier zu beachten gilt, ist, dass wir, wenn den Korb innerhalb der Vorlage verwenden, wir den Korb innerhalb der Vorlage verwenden, genau wie hier, nicht auf basket.value zugreifen müssen. Das wird automatisch für uns erledigt. Wie wir jedoch in unserem Skript sehen können, müssen wir, wenn wir auf eine unserer Referenzen zugreifen oder diese aktualisieren , die Eigenschaft value verwenden , um die darin verschachtelten Daten zu aktualisieren oder zu lesen. Natürlich wollen wir den Korb nicht so ausgeben. Was wir tun wollen, ist in unseren Korbbereich zu gehen und den Inhalt in unserer Tabelle ohne unsere Tabellenzeile auszugeben . Wir können das Innere des Tabellenteils hinzufügen, es wieder hineinlegen und dann können wir unseren Korb mit einer Vue.js V4-Schleife überziehen. In den Klammern können wir auf den Variablennamen des Elements und auch auf die Indexnummer in jeder Schleife zugreifen . Dies ist im Korb und dann Vue.js, wenn Looping auch einen eindeutigen Schlüssel benötigt. Jetzt haben wir keinen großartigen eindeutigen Schlüssel, den wir verwenden können. Aber als vorübergehende Maßnahme können wir die Indexnummer weitergeben. Später, wenn wir die Pizza in der Datenbank gespeichert haben , aktualisieren wir diesen Schlüssel, um die eindeutige ID für jeden Wert zu verwenden . Jetzt wird jede Pizza im Korb in der Artikelvariablen gespeichert. Wir können die Menge aktualisieren, also item.quantity, der Pizzaname, das ist item.name, die Größe , item.size und auch den Preis unten. Wenn wir wollten , könnten wir einfach item.price hinzufügen. Da wir jedoch mehrere Pizzen bestellen können, multiplizieren wir diesen Preis mit der Artikelmenge, um für jede Zeile eine Gesamtsumme anzuzeigen. Speichern. Machen Sie ein bisschen mehr Platz. Jedes Mal, wenn wir eine neue Pizza hinzufügen, wird der Korb aktualisiert und in unserem Tisch angezeigt. Als Nächstes verbessern wir das, indem wir die Pizzen in einer Schleife durchgehen und dem Korb den exakten Pizzanamen hinzufügen, anstatt die Beispieldaten, die wir derzeit haben. 26. Über Pizzen schleifen: Wie wir wissen, haben wir derzeit noch keine Datenbank eingerichtet, um unsere Pizzen zu speichern. Vorerst erstellen wir als vorübergehende Maßnahme einen Schiedsrichter, zu dem wir unsere Pizzen schieben können. Auf diese Weise können wir diese Pizzen durchgehen und sie auf einem Tisch ausstellen. Gehen Sie dazu in die MenuView-Datei und dann oben erstellen wir eine neue Konstante namens AllPizzas. AllPizzas wird von einem Schiedsrichter umzingelt sein. Nun, der Anfangswert wird ein leeres Array sein. Dann zu den neuen pizza.view-Komponenten, die sich im Adminbereich befinden. Das spart ein bisschen Zeit. Was wir hier tun werden, ist das vollständige Pizza-Objekt auszuwählen. Dies ist das Demo-Objekt direkt hier in der Referenz. Kopiere alles, einschließlich der geschweiften Klammern. Wir kopieren das, weil uns das die konsistente Struktur gibt, die wir benötigen, um der Datenbank neue Pizzen hinzuzufügen. Zurück in die Menüansicht und in das alte Pizza-Array fügen Sie dies zweimal ein. Stellen Sie sicher, dass jedes durch ein Komma getrennt ist. Lass uns das einfach ein bisschen ändern. Wir entfernen das Eg. Margherita. Die zweite Pepperoni, entferne das Ei. Wir sagen, garniert mit Mozzarella und Peperoni. Erhöhen Sie einfach den Preis , um das ein bisschen anders zu machen. Dies kann nun in der Menütabelle wiederholt werden. Sie stellen jede der Pizzen aus. Nun zur Vorlage. Habe dieses Menü und dann die Tabelle im Tabellenkörper verschachtelt . Wir machen genau dasselbe wie für den Korb , indem wir eine V-FOR-Schleife erstellen und die Daten dort platzieren, wo wir sie benötigen. Gehen Sie zurück zum Tabellentext v-for im Menübereich. In den Klammern können wir die Pizza und auch die Indexnummer auswählen . Das ist in unserer alten Pizzaserie. Geben Sie dann einen Schlüssel ein , der vorerst die Indexnummer sein wird. Wie wir mit dem Korb gesagt haben, werden wir später auch darauf zurückkommen und den eindeutigen Schlüssel verwenden , den die Datenbank bereitstellt. Großartig. Jetzt haben wir Zugriff auf alle Pizzen und anstatt den fest codierten Pizzanamen anzuzeigen, öffnen wir die doppelten geschweiften Klammern und wir können auf unsere Objekte zugreifen, nämlich pizza.name. Die Beschreibung, Pizza. Beschreibung. Sagen wir das und weiter zum Menü. Da sind unsere beiden Pizzen. Wir haben unsere Margherita und die Peperoni, was zu unserem Schiedsrichter aus unserem Drehbuchbereich passt. Damit sind wir aber noch nicht ganz fertig, da wir auch die Pizza-Optionen hinzufügen müssen. Wir müssen die Pizzagröße und auch den Preis bei vielen Optionen, die es für jede dieser Pizzen geben wird, dynamischer bei vielen Optionen, die es für jede dieser Pizzen geben wird, dynamischer gestalten. Dafür müssen wir wieder an unseren Tisch gehen. Hier haben wir diese Tabellenzeile, die für jede unserer Optionen gilt. Wir müssen hier eine zusätzliche Schleife erstellen , um unsere beiden Optionen durchzugehen, also v-for. Der Variablenwert der Option und wir nehmen ihn auch in den Index auf. Wir müssen unser Pizza-Objekt in einer Schleife überspielen, das ist das Objekt aus der ersten Schleife. Wir müssen auf unsere Optionen zugreifen. Der Schlüssel für diese eine Übergabeoption. Dann können wir in den eckigen Klammern den ersten oder zweiten Wert mit der Indexnummer auswählen . Für die erste Schleife wird dadurch die erste Option ausgewählt, und für die zweite Schleife wird die zweite Option ausgewählt. Für die Optionsgröße, doppelte geschweifte Klammern, die Option und die Größeneigenschaft sogar im Währungssymbol die Option.price. Lassen Sie uns das im Browser testen. Wir haben jetzt unseren Loop, der unsere beiden Optionen erstellt, und jede hat die einzigartige Größe und auch den Preis. Gut. Wir machen hier gute Fortschritte, aber jetzt, wenn wir jede dieser Pizzen in den Korb legen wollen , müssen wir diese Pizzainformationen auch an die Funktion weitergeben . Diese Schaltfläche, die Sie hier haben, müssen wir nicht nur addToBasket aufrufen, wir müssen auch die Klammern hinzufügen und die Pizza und auch die Option bis zur Funktion übergeben , wo wir diese Werte empfangen können, also den Artikel und die Option. Anstatt den Namen als Zeichenfolge zu haben, können wir ihn jetzt im Variablennamen von item.name übergeben. Der Preis, der in der Option gespeichert ist , ist option.price. Die Größe, option.size. Lass uns das ausprobieren. Versuchen wir es mit der 9-Zoll-Margherita. Das sieht gut aus. Eine 12-Zoll-Pepperoni, das alles sieht so aus, als würde es einwandfrei funktionieren. Als Nächstes aktualisieren wir die Menge in diesem Korb, falls dieselbe Pizza mehrmals ausgewählt wird. 27. Überprüfen auf doppelte Basket: Im Moment legen wir eine neue Pizza in unseren Korb. Alles funktioniert gut , aber wir haben ein Problem, wenn wir denselben Wert mehrmals hinzufügen. Wenn wir zum Beispiel versuchen, die 9-Zoll-Pizza mehr als einmal hinzuzufügen , haben wir diese bereits ganz oben anstatt die Menge auf zwei zu erhöhen, erhalten wir unten einen neuen Einzelposten. Das Gleiche gilt für jede unserer Pizzen. Stattdessen wollen wir, anstatt einen neuen Einzelposten hinzuzufügen , die Menge jedes Mal erhöhen. Dazu müssen wir, bevor wir unsere neue Pizza in den Korb schieben, zunächst überprüfen, ob die neue Pizza bereits in diesem Korb vorhanden ist. Dazu können wir ganz oben in unserer Funktion auf unseren Korb zugreifen, den Wert, da es sich um eine Referenz handelt, und die JavaScript-Methode find verwenden. Die Methode find führt eine Funktion für jeden Wert in unserem Korb aus. Wenn im Korb noch Pizzen vorhanden sind, speichern wir diese in einer Variablen namens Pizza und können dann mit jeder Pizza einzeln arbeiten. Was wir hier tun wollen, ist zu überprüfen, ob sowohl der Pizzaname als auch die Pizzagröße übereinstimmen. Denken Sie daran, wenn wir in unser Menü wie das Margherita gehen, können wir zwei verschiedene Größen hinzufügen. Wir können zwei verschiedene Pizzanamen haben, aber diese passen nicht zusammen. Wir müssen auch den Namen der Pizza und auch den Optionswert überprüfen . Die JavaScript-Methode find gibt den allerersten Wert zurück, in unserem Fall die Pizza, einer bestimmten Bedingung entspricht. Wir wollen den Wert „wahr“ zurückgeben, wenn eine bestimmte Bedingung erfüllt ist. In unserem Fall wollen wir überprüfen, ob der pizza.name dem item.name entspricht. Dabei wird geprüft, ob die Pizza , die sich gerade im Korb befindet, einen Namen hat, der dem Namen der Pizza entspricht , die wir hinzufügen möchten. Es sollte ein Triple Equal sein und mit dem doppelten Ampersand müssen wir auch ein zweites Mal überprüfen. Die zweite Überprüfung besteht darin, herauszufinden, ob die Pizza.Größe, das ist wieder die Pizza, die im Korb aufbewahrt wird. Wir möchten wissen, ob dies der option.size entspricht. Auch dies ist die Optionsgröße der Pizza, die wir hinzufügen möchten. Wenn beide übereinstimmen, ist diese Aussage wahr und diese Suchmethode gibt ist diese Aussage wahr und diese Suchmethode dann die Pizza zurück, die wir im Korb finden. Wir können das in einer Konstante speichern oder es gibt Pizza und bevor wir weitermachen, überprüfen wir das, indem wir das in die Konsole einloggen. Loggen Sie den Wert unserer konstanten Pizza ein, speichern Sie sie und übertragen Sie sie in den Browser. Springt in die Konsole damit wir hier keinen Pizza-Kumpel haben, außerdem ist das undefiniert, verschiedene Werte sind auch undefiniert. Aber wenn wir versuchen, ein zweites Mal auf eine Pizza zu klicken, kommen wir zurück zu der Pizza, die dem Korb entspricht. Wir sehen, das ist eine 9-Zoll-Pizza, versuchen wir es mit der 12, diese funktioniert auch, probieren wir einfach die Peperoni. Das allererste Mal ist unbestimmt und wenn wir das schon im Korb haben, wird es die gefundene Pizza zurückgeben. Mit diesen Informationen können wir jetzt eine IF-Anweisung abgeben und überprüfen, ob unsere Pizza mit dieser Konstante gefunden wird. Wenn es auf die Pizza zugreifen möchte, wählen Sie die Mengeneigenschaft und erhöhen Sie diese um den Wert eins. Wenn dies zutrifft, möchten wir außerdem zurückkehren und diese Funktion ändern, da wir unserem Korb keine zusätzliche Pizza hinzufügen möchten . Lass uns das jetzt versuchen. Laden Sie das neu. Unsere erste Margherita unsere zweite Margherita erhöht jetzt die Menge. Lass uns Peperoni probieren. Zwei neue Zeilen und ein Duplikat und jedes Mal, wenn ich auf ein Duplikat klicke, wird die Menge um den Wert eins erhöht. Als Nächstes kehren wir auch zu unserem Korb zurück und bleiben bei der Mengenangabe , indem wir unsere Tasten zum Erhöhen und Verringern sowie eine Funktion zum Entfernen einer Pizza aus dem Korb verkabeln unsere Tasten zum Erhöhen und Verringern sowie eine Funktion zum Entfernen . 28. Korb entfernen und ändern Quantität: Wie wir im vorherigen Video festgestellt haben, werden jetzt alle unsere Pizzen auf der rechten Seite angezeigt, wenn wir eine unserer Pizzen in den Korb legen . Wir sehen auch die Menge , die die Standardmenge von Eins ist. Wir haben auch diese Tasten, um die Menge zu erhöhen und zu verringern. Damit werden wir jetzt arbeiten. Gehen Sie zur Menüansicht und springen Sie in den Vorlagenbereich und scrollen Sie nach unten zum Warenkorbbereich. In den Körben befindet sich unser Tischkörper , der unsere Schlaufe für alle Pizzen bildet. Hier, innerhalb der Schleife, haben wir Zugriff auf den Artikel, für den Sie die Menge ändern möchten. Dann haben wir hier unsere Knöpfe, um die Werte zu erhöhen und auch zu verringern. Für die erste, die Verringerung, können wir einen Click-Listener hinzufügen , der dann eine Funktion auslöst. Wir übergeben diesen Artikel an die Funktion und ändern dann die Menge. In der Schaltfläche zum Öffnen, @click, nennen wir diese Funktion verringerte Menge. Geben Sie den Gegenstand weiter, damit wir wissen, welcher Artikel reduziert werden muss , und gehen Sie dann zur zweiten Schaltfläche, die Erhöhung. Wir nennen das IncreaseQuantity. Auch dies erfordert Zugriff auf das Element, das wir ändern möchten. Wir beginnen mit dieser IncreaseQuantity-Funktion. Ich scrolle nach oben. Denken Sie daran, wenn wir uns diese Push-Methode hier ansehen , können wir die Struktur unserer Körbe sehen. Alles, was wir tun müssen, ist die Mengeneigenschaft des Objekts zu erhöhen . Erstellen Sie eine Funktion, increaseQuantity, nehmen Sie das Element auf, das an sie übergeben wird, und wählen Sie das Element aus. Wir wollen nur mit dem Mengenfeld arbeiten, und wir erhöhen es um den Wert eins. Als nächstes die Funktion zum Verringern der Menge. Nimmt auch den Artikel item.quantity auf. Ich werde das um den Wert von eins abziehen. Dies ist das erste, was wir für die Absenkfunktion tun müssen . Die zweite Sache ist zu überprüfen, ob die Menge Null ist. Wenn ja, möchten wir nicht im Warenkorb ein Einzelartikel mit der Menge Null angezeigt wird . Stattdessen wollen wir das aus dem Korb entfernen. Davon können wir in einen F-Abschnitt stellen, um zu überprüfen, ob item.quantity dem Wert Null entspricht. Wenn ja, möchten wir dies aus dem Warenkorb entfernen. Wenn wir wollten, könnten wir dazu den Code hier einfügen . Aber stattdessen werde ich das an eine eigenständige Funktion auslagern , die removeFromBasket heißt. Wir müssen auch den Artikel, den wir entfernen möchten, aufnehmen und dann unten die Funktion removeFromBasket erstellen und den Artikel, den Sie entfernen möchten, übergeben. Zuerst müssen wir auf unsere vollen Körbe zugreifen und da es sich um eine Referenz handelt, greifen wir auf die Werteigenschaft zu. Dann können wir die JavaScript-Spleißmethode verwenden. Splice wird ein Objekt aus unserem Array entfernen , indem es die erste Person in der Startposition ist. Also müssen wir die Indexnummer dieses Elements abrufen. Lassen Sie uns dies tun, indem wir auf basket.value zugreifen. Das ist der volle Korb. Dann können wir die Indexnummer mit indexof abrufen. Wir müssen die Indexnummer unseres Artikels kennen. Das ist nur normales JavaScript. Es hat nichts mit Vue js zu tun. Wir finden die Indexposition unseres bestimmten Elements innerhalb dieses Arrays, getrennt durch ein Komma. Wir möchten nur einen einzigen Artikel entfernen. Lassen Sie uns das jetzt speichern und überprüfen, ob es funktioniert. Klicken Sie auf eine beliebige Pizza. Wenn wir es weiter erhöhen, wird auch der Wert steigen. Versuchen wir es mit Plus. Es funktioniert gut. Negativ, das wird sinken. Sobald wir bei Null angelangt sind, sollte dieser Artikel entfernt werden. Dies ist eine gute Funktionalität, die mit ziemlich kleinen Funktionen erstellt wurde . Als Nächstes bleiben wir in diesem Korb und beginnen mit der Aktualisierung der Bestellsumme anhand berechneter Eigenschaften. 29. Berechnete Eigenschaften: Wenn Sie View Dress in der Vergangenheit verwendet und berechnete Eigenschaften verwendet haben , ist die gute Nachricht, dass diese Eigenschaften auch in Zukunft Bestand haben. Sie werden in view free weiterhin vollständig unterstützt, sowohl wenn Sie die Kompositions-API als auch die Options-API verwenden . Sie sind ein idealer Anwendungsfall für uns, um die Kosten für alle Pizzen in den Körben zu berechnen . Am unteren Rand des Warenkorbs haben wir derzeit diesen fest codierten Wert , der in der Menüansicht verfügbar ist. Lass uns nach unten scrollen und das finden. Dies ist am Ende unserer Vorlage. Wir könnten reguläre Funktionen verwenden, um die Kosten in diesem Korb zu berechnen, aber das Problem mit einer Funktion ist, dass sie bei jedem Aufruf nur einmal ausgeführt wird . Wenn wir diese Berechnung stattdessen in eine berechnete Eigenschaft schreiben , der Wert jedes Mal, wenn sich die darin enthaltenen Daten, in unserem Fall die Körbe, ändern die darin enthaltenen Daten, in unserem Fall die Körbe, wird der Wert jedes Mal, wenn sich die darin enthaltenen Daten, in unserem Fall die Körbe, ändern, für uns neu berechnet. Gehen Sie dazu zum Anfang der Datei. Wir müssen die Berechnungen aus dem View-Paket importieren. Computed fungiert als Wrapper. Wenn wir die Dinge aufschlüsseln, können wir zunächst eine anonyme Funktion erstellen um den Füllstand unserer Warenkörbe zu berechnen. Unten in unserem Drehbuch. Wir erstellen zunächst eine Funktion, die diesem Zeitpunkt keinen Namen benötigt. Was wir tun werden, ist eine Variable mit dem Namen Gesamtkosten zu erstellen , die zunächst auf Null steht, und dann können wir alle Körbe wiederholen und das Mengenfeld für jede unserer Pizzen verschieben. Das sind Gesamtkosten. Auch hier handelt es sich um ein Let, also verwenden wir für jeden Korb den Wert loop over with. Für jeden Wert in den Körben führen wir eine Funktion aus und speichern jeden Wert in einem Artikel. Dann können wir unsere leere Variable namens Gesamtkosten abrufen. Verwenden Sie den Operator „Plus ist gleich um unseren Gesamtkosten für jede Schleife einen neuen Wert hinzuzufügen. Wir wollen uns nicht einfach den item.price schnappen und das auf die Summe erhöhen, weil wir manchmal mehrere Pizzen haben können. Dazu müssen wir die Artikelmenge mit dem Preis multiplizieren . Wir können außerhalb der Funktion auf diese Gesamtkosten zugreifen. Wir müssen das zurückgeben. Und dann erstellt die Funktion außerhalb der Funktion eine Variable oder Konstante, um unseren berechneten Wert zu speichern. Wir nennen das die Summe. Wie bereits erwähnt, fungiert computed als Wrapper, also müssen wir es in unserer Funktion platzieren. Schneide das aus, füge es in berechnete ein. Da wir nun als Wrapper berechnet haben, jedes Mal, wenn der Korb oder andere darin enthaltene Daten aktualisiert werden, diese Funktion jedes Mal, wenn der Korb oder andere darin enthaltene Daten aktualisiert werden, erneut ausgeführt und die Gesamtvariable wird aktualisiert. Diese Summe kann jetzt in unserer Vorlage verwendet werden. Springt nach unten. Sie fügen die Gesamtkosten hinzu, fügen einen Artikel so hoch wie den Preis hinzu, da wir nur einen haben. Erhöhen Sie die Menge. Dies wird jetzt ebenfalls verdoppelt, da wir innerhalb unseres berechneten Werts die Artikelmenge mit dem Preis multiplizieren. Das alles scheint jetzt korrekt zu funktionieren. Später werden wir dies verbessern , indem wir einen wiederverwendbaren Währungsfilter erstellen , um sicherzustellen, dass die Zahlen korrekt gerundet werden. 30. Composable Dateien: im Skriptbereich unseres MenuViews, an dem wir in letzter Zeit gearbeitet haben Wenn wir im Skriptbereich unseres MenuViews, an dem wir in letzter Zeit gearbeitet haben, von oben nach unten schauen, wird dieser Abschnitt langsam ziemlich groß. Um dabei zu helfen, können wir den Inhalt in separate Dateien verschieben , wir können so viele dieser Dateien verwenden, wie wir möchten, wodurch die Dinge wirklich organisiert bleiben. Diese werden als zusammensetzbare Dateien bezeichnet. Um diese zu organisieren, werden wir einen neuen Ordner namens Composables erstellen , in dem sie aufbewahrt werden. Diese werden sich direkt in der Quelle befinden und mit Dingen wie unseren Vermögenswerten und unseren Komponenten einhergehen . Klicken Sie auf die Quelle, einen neuen Ordner, Namen der Composables, und wenn Sie möchten, können wir diesen Ordnernamen ändern Es muss sich nicht um Composables handeln, dies ist nur eine Namenskonvention. Eine weitere Namenskonvention sind die darin enthaltenen Dateien. Diese haben in der Regel das verwendete Präfix, aber auch dies ist völlig optional. Für diejenigen, die nichts mit unseren Inhalten zu tun haben, hätten wir Dateien wie useBasket, usePizza und useOrders, die alle normale JavaScript-Dateien sind. Beginnen wir mit einer Datei namens useBasket. Platzieren Sie dies in der Composables-Datei useBasket, und diese hat die JavaScript-Erweiterung. Diese Datei wird eine Funktion exportieren, also exportiere standardmäßig eine Funktion namens useBasket. Der Inhalt dieser Funktion wird alle korbbezogenen Funktionen in unserem MenuView oder anderen Dateien sein. Zurück zur MenuView, schauen wir uns alle Funktionen rund um den Korb an. Wir brauchen den Korb, schneiden wir ihn aus und fügen ihn in unsere neue Datei ein. Wir brauchen die Pizzen nicht, das wird in eine andere Datei gehen, addToBasket, wir können das nehmen. Wir benötigen auch IncreaseQuantity, decrease, removeFromBasket und auch die Warenkorbsumme, was der berechnete Wert ist Schneiden Sie das alles aus und wir sollten einfach mit unseren Pizzen gehen, dies in unsere zusammensetzbare Datei einfügen und sicherstellen, dass alles in dieser Funktion enthalten ist removeFromBasket und auch die Warenkorbsumme, was der berechnete Wert ist. Schneiden Sie das alles aus und wir sollten einfach mit unseren Pizzen gehen, dies in unsere zusammensetzbare Datei einfügen und sicherstellen, dass alles in dieser Funktion enthalten ist . Da wir unsere Referenz und unseren berechneten Abschnitt hier nicht verwenden , können wir auch die Importe übernehmen oder diesen kopieren. Wir können sehen, dass wir immer noch unsere Referenz in dieser Datei verwenden , aber wir konnten berechnete nicht entfernen. Importieren Sie diese dann oben in unserer Datei, direkt außerhalb der Funktion. Um nun irgendwelche Funktionen oder eine dieser Variablen in verschiedenen Dateien verwenden zu können, müssen wir diese zuerst von dieser Funktion nach unten zurückgeben . immer noch innerhalb des abschließenden Tags unserer Funktion Erstellen Sie immer noch innerhalb des abschließenden Tags unserer Funktion unseren Return-Abschnitt. Dieser muss jede unserer Funktionen oder Variablen zurückgeben unserer Funktionen oder Variablen , die wir in anderen Dateien verwenden möchten. Wir brauchen praktisch alles von hier aus, wir brauchen den Korb, brauchen die Funktion AddToBasket, wir brauchen die beiden Funktionen, um die Werte zu erhöhen und auch zu verringern, wir brauchen die Summe. Aber eine Sache, die wir derzeit nicht brauchen ist removeFromBasket. Dies liegt daran, dass dies nur in dieser Funktion decreaseQuantity aufgerufen wird, sodass wir sie von keiner der Dateien aus aufrufen müssen. Dies gruppiert nun alle zugehörigen Funktionen und Variablen. Denken Sie daran, wir haben hier eine Funktion namens useBasket exportiert. Um auf den Inhalt zuzugreifen, können wir zu unserem MenuView wechseln und diesen in unsere Datei importieren. Importieren, Korb verwenden. Mit dem Hinzufügen-Symbol können wir in die oberste Ebene unserer Quelle springen und dann in den Composable-Ordner und dann in den Dateinamen namens useBasket springen. Als Nächstes können wir mithilfe der JavaScript-Destrukturierung alle von diesen Funktionen zurückgegebenen Werte in Variablen speichern . Der Korb, die Funktionen von IncreaseQuantity, DecreasQuantity, wir müssen addToBasket und auch die Summe. Ich habe diese aus unserer useBasket-Funktion ausgewählt, die wir direkt oben importiert haben. All diese Konstanten können jetzt in unserer Vorlage verwendet werden. Jetzt müssen Sie das nur noch speichern, zu unserem Projekt zurückkehren und überprüfen, ob alles noch richtig funktioniert. Kurz bevor wir das tun, müssen wir diese Funktion tatsächlich aufrufen damit sie verfügbar sind. dem Projekt hinzu, fügen Sie diese zu unseren Körben hinzu, die Funktionen zum Erhöhen und Verkleinern funktionieren. Wir können diese entfernen, und auch unser Gesamtpaket funktioniert. 31. Was ist Firebase?: Was genau ist Firebase und wie können wir es verwenden? Nun, Firebase ist ein Dienst von Google für Websites, Anwendungen und auch Spiele. Viele von ihnen benötigen Dienste wie Authentifizierung, Speicher, Hosting und auch eine Datenbank. Firebase bietet all dies in einer einzigen Anwendung. Ich werde einige davon in unserem Projekt verwenden . Wir werden einige davon nutzen, darunter den Cloud Firestore, unsere Datenbank, in der unsere Pizzen und Bestellungen gespeichert werden . Der Cloud-Firestore ist eine Echtzeitdatenbank Wenn sich also unsere gespeicherten Daten ändern, wird die Anwendung benachrichtigt. Ein Anwendungsfall dafür könnte sein, wenn der Admin eine Pizza entfernt und dann auch das Menü aktualisiert würde. Wenn Sie mehrere Apps haben, z. B. Ihre Website und Ihre mobile App, kann die Datenbank außerdem Ihre Website und Ihre mobile App, gemeinsam genutzt und synchronisiert werden. Wir können auch Regeln und Rollen aus Sicherheitsgründen einrichten . Aber dazu später mehr. Es wird auch unser Authentifizierungssystem bereitstellen, das den Ablauf von Anmeldung, Anmeldung, Abmeldung und vergessenem Passwort sowie mehrere Möglichkeiten für Benutzer, sich anzumelden, ermöglicht. Wir werden eine E-Mail und ein Passwort verwenden. Denn es stehen auch andere Dienste wie Google-, Twitter- oder Facebook-Login zur Verfügung. Darüber hinaus werden noch viele weitere Firebase-Dienste weitere Firebase-Dienste wie Analysen, Cloud-Funktionen und Speicher hinzugefügt . Eröffnen Sie also ein Konto, falls Sie dies noch nicht getan haben. Das kostenlose Konto ist alles, was wir zum Testen und Erstellen unseres Projekts benötigen , und als Nächstes werden wir es einrichten und zu unserem Projekt verlinken. 32. Firebase Einrichtung: Sobald Sie ein Konto erstellt und sich bei Firebase angemeldet haben, gehen Sie in den Konsolenbereich und Sie werden etwas sehen, das genau so aussieht. Von hier aus können wir unser neues Projekt erstellen. Wir müssen diesem Projekt den Namen geben, naja, es wird Pizza Planets sein. Du kannst deinen einfach Pizza Planet nennen, wenn du willst, aber das ist die dritte Version dieser Klasse, also nenne ich meine V3. Klicken Sie auf das Kontrollkästchen und fahren Sie dann fort. Google Analytics, ich werde zu diesem Projekt nein sagen. Geben Sie sich dann einen Moment Zeit, um den Vorgang abzuschließen. Mein Projekt ist jetzt eingerichtet. Lass uns weitermachen und dann führt uns das in unser Projekt. Von hier aus erhalten wir die Anweisungen zum Hinzufügen von Firebase zu unserer App für iOS oder Android. In unserem Fall klicken wir jedoch auf den Weblink. Wenn die Dinge zu diesem Zeitpunkt etwas anders aussehen , machen Sie sich keine Sorgen, diese Websites haben die Angewohnheit, sich zu ändern, aber es sollte ein ähnlicher Einrichtungsprozess sein. Jetzt müssen wir unsere App registrieren indem wir ihr einen Spitznamen geben. Ich behalte es einfach genauso wie Pizza Planets Version 3. Ich werde vorerst kein Firebase-Hosting einrichten. Registrieren. Sobald dies abgeschlossen ist, erhalten wir einige Anweisungen zum Einrichten. Als erstes können wir npm verwenden, um dies als Knotenmodulpaket zu installieren. Lassen Sie uns diesen Link kopieren, der npm install Firebase ist. Lass uns den Server schließen. Füge das ein. Jetzt haben wir einige Gründe, warum es heute wirklich langsam war. Wir können das einfach schließen und den Server auch mit npm run dev neu starten. Wir können bestätigen, dass dies installiert wurde, indem in die Datei package.json springen. Sie werden Firebase als unsere Abhängigkeit haben. Zurück zur Firebase-Website. Der nächste Schritt nach der Installation besteht darin, einige Anweisungen zu kopieren. Ich werde das einfach kopieren und wir werden uns in einem Moment ansehen, was jede Phase bewirkt. Dadurch bleiben wir organisiert, indem wir dies in einen neuen JavaScript-Ordner legen , der sich direkt im Quellordner befindet , und eine neue Datei erstellen. Das Firebase.js. Füge das ein. Als erstes importieren und initialisieren wir die App-Funktionen, die von Firebase bereitgestellt werden. Wir haben dann das Firebase-Konfigurationsobjekt, das bequem mit allen Informationen für unsere App gefüllt ist. Ganz unten nutzen wir dann diese Funktionen zur Initialisierung der App genau hier. Geben Sie dann die Konfigurationsdetails weiter, wodurch wir einen Verweis auf unsere Anwendung erhalten. Jetzt haben wir die App-Referenz. Wir benötigen auch einen Verweis auf unsere Firestore-Datenbank, damit wir Datensätze hinzufügen und entfernen können. Daraus müssen wir auch etwas aus der Firebase-Bibliothek importieren . Ganz oben erstellen wir ein zweites wichtiges Element, erstellen wir ein zweites in dem wir etwas aus dem Paket importieren werden, nämlich Firebase. Aber dieses Mal müssen wir diese statt der Forward Slash-App aus dem Firestore-Bereich importieren. Die Funktion, die Sie aus diesem Abschnitt importieren möchten , heißt getFireStore. GetFireStore kann jetzt verwendet werden, um einen Verweis auf unsere Datenbank zu erhalten. Dazu übergeben wir unsere App-Variable. Nur dieser hier. Dies innerhalb einer Konstante namens Db, die Abkürzung für Datenbank, genannt getFireStore. Gib unsere App weiter. Bei der Arbeit mit Fire Store werden unsere Daten in Sammlungen zusammengefasst. In unserem Fall werden wir eine Sammlung für Pizzen haben, wir werden eine Sammlung für Bestellungen und wir können auch eine für Benutzer haben. Um mit Collections arbeiten zu können, müssen Sie sie auch aus dem Firestore-Paket importieren. Zurück zum Anfang, Firestore-Paket abrufen , Sammlung importieren. Wir können dies verwenden, um auf unsere Sammlungen zu verweisen , indem wir zwei Dinge angeben. Als erstes müssen wir die Datenbankreferenz übergeben , die Sie direkt oben in dieser Konstante gespeichert haben . Zweitens wird das der Name unserer Kollektion sein, die wir derzeit noch nicht erstellt haben. Dieser wird Pizzas heißen. Dies gibt uns nun einen Verweis auf eine einzigartige Sammlung, mit der wir Dokumente lesen und auch neue Wünsche hinzufügen können. Um dies in anderen Komponenten verfügbar zu machen, werden wir dies als Konstante exportieren. Der konstante Name lautet dppizzas&Ref. Lass uns das kopieren und einfügen. Diese zweite Referenz wird für unsere Bestellungen gelten. dBorder & Ref. Dabei wird dieselbe Datenbank verwendet, aber der Sammlungsname der Bestellungen. Dadurch können wir diese Verweise in alle anderen Komponenten oder Dateien importieren . Wir könnten Dinge wie den Inhalt lesen oder neue Daten hinzufügen. Das schauen wir uns als Nächstes an. Der letzte Schritt für dieses Video besteht darin, Firebase mitzuteilen, dass wir den Cloud-Firestore und auch die Authentifizierung verwenden möchten . Gehen wir in den Bereich Projektübersicht im Browser. Wir können mit der Konsole weitermachen. Aus dieser Ansicht benötigen wir keine weiteren Daten. Dies gibt uns die Möglichkeit, verschiedene Produkte zu Firestore hinzuzufügen . Wir können Dinge wie die Leistung im Auge behalten. Wir können Analysen für unseren Anwendungsfall hinzufügen . Im Moment benötigen wir lediglich die Authentifizierung und die Cloud-Firestore-Datenbank. Fangen wir mit der Authentifizierung an. Fangen Sie an. Dadurch können wir uns bei verschiedenen Anbietern wie Google und Facebook anmelden . Aber ich werde ein E-Mail- und Passwortsystem erstellen. Wenn Sie darauf klicken, werden E-Mail und Passwort aktiviert. Jetzt werde ich den E-Mail-Link nicht aktivieren, wir behalten ihn einfach als einfache E-Mail und Passwort. Das ist alles, was wir vorerst tun müssen. Dies ist derzeit aktiviert. Zurück zu unserer Projektübersicht. Sie können sehen, wir haben jetzt die Abkürzung zur Authentifizierung. Als Nächstes fügen wir den Cloud Firestore hinzu, der auch in der Seitenleiste angezeigt wird. Erstellen Sie unsere Datenbank. Wir beginnen im Testmodus und schauen uns später die Sicherheitsregeln an. Vorerst haben wir dadurch jedoch vollen Zugriff auf unsere Datenbank zum Lesen und Schreiben. Diese Funktion sollte nur zum Testen zugelassen sein, und wir werden uns später ansehen, wie wir sie verbessern können . Klicken Sie auf Weiter. Wählen Sie einen Speicherort, wenn Sie möchten, und aktivieren Sie die Datenbank. Später werden wir einige Sicherheitsregeln aktivieren , um unsere Datenbank sicherer zu machen. Gut. Wir haben jetzt einen Authentifizierungsmodus eingerichtet und wir haben auch eine leere Datenbank. Nachdem dies erledigt ist, schauen wir uns als Nächstes an, wie wir dieser leeren Datenbank einige neue Pizzen hinzufügen können . 33. Pizzen in die Datenbank hinzufügen: Jetzt haben wir das Setup geklärt, wir können die dbPizzasRef, die Sie zuvor eingerichtet haben, zusammen mit unserer Auftragsreferenz verwenden eingerichtet haben, zusammen mit unserer Auftragsreferenz mit unserer Datenbank zu arbeiten. Wir beginnen damit, die neuen Pizzen der Datenbank in den neuen Pizza-Komponenten hinzuzufügen . Dafür müssen wir zwei Dinge importieren. Schauen wir uns also die neue Pizza-Komponente an, die sich im Ordner Components und im Admin befindet. Erstellen Sie oben unsere Importanweisungen, in denen wir etwas namens AddDoc importieren, das aus dem Paketnamen Firebase/Firestore stammt, was Sinn macht, da es sich um eine datenbankbezogene Funktion handelt . Der zweite, den wir importieren müssen, ist unser dbPizzasRef. Der Dateipfad wurde bequem für uns gefüllt. Beides wird in einer neuen Funktion zum Hinzufügen unserer Pizza verwendet . Gehen wir zum Ende unserer Skripte. Dies wird asynchron sein, erstellen Sie eine Funktion namens Add. Da wir mit einer Datenbank arbeiten und Dinge schief gehen könnten, müssen wir dies in einen Abschnitt zum Ausprobieren und Ausprobieren aufnehmen. Catch nimmt den Fehler auf , den wir in der Variablen e speichern können. Vorerst arbeiten wir im Testbereich. Von hier aus können wir unsere Funktion, die wir gerade importiert haben, mit dem Namen addDoc aufrufen . Hier drinnen müssen wir zwei Dinge weitergeben. Die erste ist die Sammlung, zu der Sie hinzufügen möchten, die in unserer dbPizzasRef gespeichert ist. Denken Sie daran, dass dies auf eine Sammlung namens Pizzen verweisen wird. Der Artikel, den Sie der Datenbank hinzufügen möchten , wird unsere NewPizza sein, das ist dieses Objekt direkt oben. Da dies in einer Referenz gespeichert ist, müssen wir auf den Wert zugreifen. Wir können diese Funktion jetzt hinzufügen aufrufen , wenn wir auf die Schaltfläche Hinzufügen klicken. Denken Sie daran, dass wir in der Anwendung und im Admin-Bereich diese Schaltfläche Hinzufügen haben. Springt runter zur Vorlage. Da sind wir. Wir hören jetzt auf einen Klick zu. Der Funktionsname add verhindert das Standardverhalten, das verhindert, dass die Seite neu geladen wird und alle Daten oder Formulare verloren gehen. Da wir nicht wissen, wie lange das dauern wird, da wir einige Daten auf einen externen Server übertragen, fügen wir wait hinzu gehen. Da wir nicht wissen, wie lange das dauern wird, , da wir warten können, bis die Daten zurückkommen, bevor wir zur nächsten Phase übergehen die Daten zurückkommen . Und das können wir verwenden, da wir unsere Funktion als asynchron markiert haben . Kurz bevor wir das testen und sicherstellen, dass unsere NewPizza dadurch in die Datenbank verschoben wird, fügen wir eine Fehlerbehandlung und auch eine Meldung hinzu, die im Browser angezeigt wird. Diese Nachricht kann innerhalb einer Konstante gespeichert werden. Direkt über unserer Nachricht NewPizza, const, speichere das in einer Referenz, da wir das aktualisieren werden. Initialisieren Sie dies als leere Zeichenfolge und kehren Sie zu unserer Funktion Hinzufügen zurück, wo wir den Wert dieser Nachricht aktualisieren. Da wir Async verwenden, warte, wird jeder Code, der unten ausgeführt wird, erst ausgeführt, wenn wir die Informationen aus unserer Datenbank zurückerhalten haben. In der nächsten Zeile erfahren wir, ob dies ein Erfolg war oder ob ein Fehler aufgetreten ist . Da wir dies in einen Testabschnitt aufgenommen haben, wissen wir, dass dieser Code nur ausgeführt wird , wenn er erfolgreich ist. Wir fügen den Fehlercode in den Fangbereich ein. Greifen Sie unten auf unsere message.value zu, die ein Erfolg sein wird. Öffne die Backticks und wir sagen Pizza, gib einen Variablennamen ein. Wir platzieren eine Variable, damit wir auf unsere neue Pizza zugreifen können , und der Name NewPizza.Value.Name wurde hinzugefügt. Und wenn dann ein Fehler aufgetreten ist, springen Sie in den Fangbereich, wir greifen auf unsere message.value zu und setzen diese eine Zeichenfolge, in der ein Fehler aufgetreten ist, fügen Sie die Pizza hinzu. Als nächstes müssen wir diese Nachricht in unserer Vorlage ausgeben . Ich mache das ganz unten, direkt unter diesem Button, innerhalb einer Spanne. Ich werde unsere Nachricht eingeben und das Letzte, was wir tun müssen , ist, dies im Browser zu testen. Denken Sie daran, dass unsere Datenbank derzeit leer ist. In Admin fügen wir eine Margherita hinzu. Wir werden den Beispielcode verschieben. Klicken Sie auf die Schaltfläche Hinzufügen, um unsere Funktion auszulösen. Da sind wir, die Dinge fangen an, gut auszusehen. Wir haben Pizza Margherita zur Datenbank hinzugefügt und aktualisieren. Das sieht vielversprechend aus. Wir haben unsere Pizzasammlung, die wir in unserer Firebase-Konfiguration erstellt Dies ist diese hier. Wir haben dann in NewPizza eine Methode namens addDoc verwendet , und ihre addDoc-Methode hat dann auf unsere Sammlung, die Pizzas ist, und auf den Wert NewPizza.Value verwiesen . der Datenbank enthält diese Pizzasammlung eine eindeutige Dokument-ID und dann den gesamten Inhalt unserer neuen Pizza. Lass uns noch einen probieren, Pepperoni. Füge das hinzu. Da haben wir es. Wir wissen, wie man Referenzen dokumentiert und wenn wir auf diese klicken, ist diese jetzt die Pepperoni. Warum nicht? Wir fügen unserem neuen Pizza-Formular noch ein weiteres hinzu. Vegetarier. Sag Mozzarella, Paprika, Zwiebeln, Champignons. In diesem Stadium ist das nicht wirklich wichtig. Wir werden den Preis aktualisieren, sagen wir acht und 14. Füge das hinzu. Dann haben wir auch unser Ziel für dieses Video erreicht , nämlich eine neue Pizza in unsere Datenbank aufzunehmen. Aber wenn wir einen Blick darauf werfen, diesen Text nur hier, dann brauchen wir auch ein wenig Platz links neben der Nachricht. Gehen Sie in der NewPizza-Datei nach unten. Fügen Sie einen Stilbereich hinzu. Wir geben dem eine Klasse oder Span, eine Nachrichtenklasse, greifen darauf zu und legen links einen Rand fest, 1rem sollte in Ordnung sein. Wir müssen eine neue Pizza hinzufügen, damit wir das sehen können . Wir gehen zum Fleischessen. Ändern Sie die Beschreibung, Peperoni, Salami, Rindfleisch und Schinken. Ändere den Preis. Da haben wir es. Als Nächstes werden wir sehen, wie wir diese Pizzen aus der Datenbank abrufen und in unserer Speisekarte anzeigen können . 34. Pizzas bekommen: Um Pizzen aus unserer Firestore-Datenbank abzurufen, bietet Firebase eine Funktion namens getDocs. Da wir diese Pizzen sowohl im Menü als auch im Admin-Bereich verwenden möchten , können wir dafür eine gemeinsam genutzte zusammensetzbare Datei erstellen. Lassen Sie uns eine neue Datei in der Seitenleiste erstellen. In den Composables erstellen wir eine neue Datei namens usePizzas.js. Dies wird einem ähnlichen Muster folgen wie das andere Composable , das wir erstellt haben. Wir werden eine Funktion exportieren, die wir in jede andere Datei importieren können. Exportieren Sie die Standardfunktion usePizzas und erstellen Sie den Funktionstext , der den gesamten Code enthält , den Sie zur Verfügung stellen möchten. Draußen können wir unsere Importe oben in der Datei hinzufügen. Wir müssen die Referenz aus Vue importieren. Der Grund, warum wir das brauchen, ist, dass wir eine Konstante brauchen , die alle Pizzen vor Ort enthält. Const AllPizzas entspricht einem Schiedsrichter und dies wird eine Reihe aller Pizzen sein. die Pizzen tatsächlich zu bekommen, müssen wir nun einige Artikel von Firebase importieren. Das erste Paket, das wir benötigen, ist eines wir bereits erwähnt haben , nämlich GetDocs. Dieser ist von Firebase/Firestore. Dann müssen wir auch die Referenz importieren, die wir in der Firebase-Datei erstellt haben, um Zugriff auf diese Pizzasammlung zu haben, also müssen wir die DbPizzasRef aus dieser Firebase-Datei importieren . Importiert den DbPizzaRef aus diesem Dateipfad. Dann erstellen wir direkt darunter, wo alle Pizzen konstant sind, eine Funktion, die dafür verantwortlich ist unsere Pizzen aus der Datenbank abzurufen. Diese Funktion wird als asynchron markiert , da wir warten müssen, bis die Pizzadaten zurückkommen, bevor wir diese Funktion namens getPizzas tatsächlich verwenden können . Dann können wir unsere Methode von oben, die wir gerade importiert haben, namens getDocs aufrufen wir gerade importiert haben, namens getDocs sie an unsere Sammlungsreferenz übergeben, die dbPizzasRef ist. Wir speichern den Rückgabewert in einer Konstante namens docs und warten auch darauf, dass diese Daten zurückkommen. Führen Sie dann diese Funktion aus und holen Sie sich die Pizza tatsächlich aus der Datenbank. Wir haben ein paar verschiedene Optionen. Wir könnten dies manuell auslösen, indem getPizzas aufrufen, oder wir können dies auslösen, wenn eine Komponente mithilfe des OnMounted Lifecycle-Hooks gemountet wird. Aus dem Vue-Paket machen wir das mit onMounted. Sobald dieser Code oder diese Komponente in das DOM gemountet ist, wird onMounted aufgerufen, das dann unsere Funktion getPizzas aufruft. Dadurch muss diese Funktion nicht manuell aufgerufen werden, und das bedeutet, dass sie dies automatisch hinter den Kulissen tut, sobald die Komponente geladen wurde. Wenn wir zum Projekt gehen und in die Konsole springen, können wir dies testen, indem ein Konsolenprotokoll für den Rückgabewert in den Dokumenten erstellen. Beim Aktualisieren wird immer noch nichts in der Konsole angezeigt, da dieser Code derzeit nicht in Komponenten importiert wird. Der OnMounted Lifecycle-Hook wird nicht aufgerufen. Also lass uns das machen, aber zuerst geben wir die Werte zurück , die wir importieren müssen. Alles, was wir derzeit benötigen, ist dieser Verweis auf AllPizzaS. Wir beginnen damit, dies in unsere MenuView zu importieren , die sich im Bereich Ansicht befindet. Dann müssen wir, genau wie beim useBasket Composable, das zuerst importieren, also importieren wir usePizzas aus unserer Composable-Datei, und dann importieren wir mit dieser Strukturierung unsere AllPizzas-Referenz aus dieser Funktion. Const allPizzas entspricht dem Rückgabewert von usePizzas. Wir haben jetzt einen Fehler festgestellt, da wir diese AllPizzas-Referenz verdoppeln Wir importieren ihn aus unserem Composable. Wir haben auch diesen Beispielcode gerade hier. Wir brauchen das alles nicht mehr. Wir können diesen Abschnitt entfernen. Da dies der einzige Code ist, der ref verwendet, können wir ihn auch aus dem Skript entfernen . Wenn wir neu laden, sehen wir noch nichts, was auf der Konsole protokolliert ist. Das liegt daran, dass wir in die Menükomponente gehen müssen, damit dies tatsächlich gemountet und unsere Funktion aufgerufen werden kann. Wählen Sie dies aus, wir sehen dann ein Protokoll in der Konsole. dieses Objekt öffnen, werden viele Informationen aus der Datenbank zurückgegeben. Viele dieser Informationen benötigen wir derzeit nicht, aber eine Sache, an der wir interessiert sind, ist dieses Dokument. Öffnen Sie das, und darin befindet sich ein Array mit allen Pizza-Dokumenten , die wir erstellt haben . Werfen wir einen Blick hinein. Auch hier gibt es viele Informationen. Wir können die Dokument-ID sehen. Wir können Dokumente und Daten durchgehen und uns die Datenwerte genauer ansehen, einschließlich des Namens, der Optionen und der Beschreibung. Was wir jetzt tun können, ist, alle Werte in den Dokumenten zu wiederholen. Leider müssen wir nicht alle diese Ebenen unseres Objekts genauer untersuchen. Stattdessen können wir Dokumente als Funktion aufrufen. Dadurch werden alle Felder, die wir benötigen, extrahiert und in unserem Skript zugänglich gemacht. Springt zurück in unser Composable. Wir können das Protokoll verschieben, auf unsere zurückgegebenen Dokumente zugreifen und es für jede Schleife aufrufen. Für jeden unserer Werte führen wir eine Funktion aus. In meinem Fall habe ich derzeit vier Pizzen eingelagert. Um dann all diese unnötigen Daten herauszufiltern, erstelle ich ein neues Objekt mit einer einfacheren Struktur, also const pizza. Hier können wir dieses neue Objekt nur mit den Daten strukturieren , die wir benötigen. Wie wir gesehen haben, hat jeder von ihnen eine eindeutige ID. Wir können das sehen, wenn wir diese ID schließen , also legen wir die ID fest. Um auf die Pizzainformationen in jeder Schleife zuzugreifen, müssen wir auch eine Variable an unsere Funktion übergeben. In der ersten Runde entspricht Doc unserer ersten Pizza. der zweiten Runde wird dies unsere zweite Pizza sein und so weiter. Wir greifen darauf zu und wählen die ID-Eigenschaft aus. Dann müssen wir die Daten, die wir gesehen hätten, übergeben, die in den Dokumenten gespeichert sind, .data.value. Jetzt benötigen wir Zugriff auf all diese Felder. Wie bereits erwähnt, müssen wir uns nicht alle diese Felder genauer ansehen. Wir können stattdessen auf unsere Dokumente zugreifen und die Datenfunktion aufrufen. Mit dem JavaScript-Spread-Operator können wir die Werte , die wir benötigen, auch an Stellen direkt in unserem Pizza-Objekt neben unserer ID extrahieren . Schließlich möchten wir in jeder Runde den Wert dieser Pizza auf unsere AllPizzaS-Referenz verschieben . Einfach dieses Objekt löschen, auf AllPizzas.Value zugreifen und dann die JavaScript-Push-Methode verwenden, dann die JavaScript-Push-Methode verwenden um jede unserer Pizzen zu pushen. Das ist alles, was wir jetzt brauchen. Zurück zu unserer Menüdatei. Denken Sie daran, dass wir alle Pizzen aus unserem Composable importiert haben . Außerdem ist dieser Variablenname derselbe, den wir zuvor verwendet haben. Wenn wir das jetzt speichern und neu laden, ist die Tabelle jetzt mit den Pizzen aus unserer Datenbank gefüllt . Eine weitere Sache, die wir jetzt tun können, da wir Zugriff auf eine eindeutige ID für jede unserer Pizzen haben Zugriff auf eine eindeutige ID für jede unserer , ist, den eindeutigen Schlüssel für jeden Wert in dieser Schleife zu ändern . Anstatt den Index zu verwenden, können wir auf unsere pizza.id zugreifen. Wir benötigen diesen Index nicht mehr, sodass wir einfach auf unsere Pizza verweisen können. Das Gleiche gilt für die Optionen. Die Optionen müssen aus zwei Dingen bestehen. Die erste ist wiederum die pizza.id und da die Pizza zwei Optionen hat, fügen wir diese auch zu unserer option.size hinzu. Auch hier können wir den Index verschieben und los geht's, alles ist jetzt abgeschlossen. Als Nächstes fahren wir mit einem ähnlichen Thema fort, indem wir diese Pizzen auch im Admin-Bereich verwenden . Außerdem werden wir herausfinden wie wir diese Pizzen aus unserer Datenbank löschen können. 35. Pizzen in Admin auflisten und löschen: Wie wir im vorherigen Video festgestellt haben, haben wir, wenn wir auf diesen Admin-Link klicken, auch diese Menükomponenten, die wir zuvor erstellt haben . Wie wir es auch mit dem Menü im vorherigen Video getan haben, müssen wir jetzt unsere Pizza-Artikel aus der Datenbank abrufen und diese im Admin anzeigen. Außerdem werden wir sicherstellen, dass dieses rote Kreuz, das wir neben jeder unserer Pizzen aufgeführt haben, diesen Artikel auch aus der Datenbank entfernt. Gehen wir zu unserer Datei use pizzas.js über. Dies ist das Composable, das wir im vorherigen Video eingerichtet haben . Wir müssen zwei zusätzliche Dinge aus Firebase importieren, insbesondere das Firestore-Paket. Was wir brauchen, ist ein Dokument löschen, das, wie es sich anhört, ein Element aus einer Sammlung und auch das Dokument löscht und wir werden doc verwenden, um auf ein bestimmtes Dokument zu verweisen , das Sie auswählen möchten. Dann wird dies an delete doc übergeben, um es tatsächlich zu entfernen. Wir erstellen in diesem Objekt direkt unter onmountet eine neue Funktion , asynchron als delete pizza bezeichnet wird. Dieser Funktion zum Löschen von Pizza wird auch die ID übergeben, wenn sie aufgerufen wird. Denn natürlich müssen wir wissen, welche Pizza wir entfernen möchten, und dann können wir auf dieses Dokument zugreifen, das wir gerade aus Firestore importiert haben. Doc wird zwei Dinge aufnehmen. Die erste ist die Referenz zur Datenbanksammlung, die wir immer noch in DB Pizzas Ref gespeichert haben, und dann muss sie die Idee der tatsächlichen Pizza aufnehmen , die wir entfernen möchten. Dies ist nicht wirklich dafür verantwortlich Pizza zu löschen Wir erhalten hier lediglich einen Verweis auf ein bestimmtes Dokument. Wir grenzen in dieser Stadt nach Sammlungen ein und grenzen sie dann anhand der ID ein. Wir können diese Referenz dann verwenden, um das Dokument zu übergeben, zu löschen. Nun zu den Pässen, wir können das in einer Konstante speichern, sagen wir Pizza, und das dann an Delete Doc weitergeben. Das werden wir abwarten. Wir warten, bis diese Operation abgeschlossen ist. Dann nennen wir unsere obige Methode Get Pizzas. Der Grund, warum wir Get Pizzas anrufen wollen, sobald dies abgeschlossen ist , ist, dass wir unsere Anwendung aktualisieren müssen. Wir löschen einen Artikel und rufen dann Get Pizzas an, was nur hier ist. Dadurch werden dann alle Pizzen abgerufen, die Sie in der Datenbank gespeichert haben, abzüglich einer, die wir entfernt haben. Dadurch werden dann alle Pizzen aktualisiert, was unser Schiedsrichter hier oben ist. Alle Pizzen werden dann zurückgegeben, das Dokument ist zusammensetzbar, und dadurch wird unser Menü aktualisiert, das wir hier links erstellt haben, und es wird auch das Menü im Adminbereich aktualisieren. Um diese Funktion nutzen zu können, müssen wir sie auch aus unserem Composable Delete Pizza zurückgeben , dann öffnen wir die Seitenleiste, springen in die Komponenten, den Admin-Bereich, und darin haben wir diese pizzas.vue, die für diesen Abschnitt verantwortlich ist. Pizzas.vue muss die Abschnitte importieren , die wir benötigen. Platzieren Sie also ein Skript-Tag beim Setup und importieren Sie unser Composable, das Use Pizzen war. Use pizzas hat diese beiden Werte zurückgegeben, die wir destrukturieren und innerhalb von Konstanten speichern können , sodass wir alle Pizzen benötigen. Löschen Sie die Pizza, die wir abrufen können, indem wir die Funktion usePizzaS aufrufen. Zurück zu unserem Tabellenabschnitt , in dem wir einige Dummy-Daten haben. Wir haben unsere Margarita an Ort und Stelle und jetzt können wir den Korpus des Tisches verwenden , um all unsere Pizzen zu durchblättern. V für Pizza in allen Pizzen, geben Sie einen Schlüssel ein und jetzt haben wir die eindeutige Pizza-ID aus der Datenbank, damit wir darauf zugreifen können. Die Margarita kann durch den dynamischen Pizzanamen so pizza.name ersetzt werden . Da dies der Admin-Bereich ist, benötigen wir nicht alle zusätzlichen Informationen wie die Beschreibung und die Preise, wir müssen lediglich einen Verweis auf jede Pizza sehen. Wir können das jetzt auf der linken Seite sehen. Jedes dieser Kreuze zum Entfernen der Pizza aus der Datenbank wird in dieser Schaltfläche gespeichert , sodass wir einen Klick-Listener hinzufügen und dann auf unsere Funktion zum Löschen von Pizza verweisen können einen Klick-Listener hinzufügen und . Dazu muss auch die Pizza-ID übergeben werden, die wir entfernen möchten. Jetzt können wir mit pizza.id darauf zugreifen. Probieren wir es aus. Wir entfernen das Fleischfest. Sobald wir das tun, sehen wir ein kleines Problem. Wenn wir uns die ursprünglichen vier Pizzen ansehen , die wir hatten, ist das in Ordnung, das sind die ursprünglichen vier aus unserer Datenbank aber wenn wir dann zu unserem Composable gehen, haben wir das aus der Datenbank entfernt, aber dann haben wir Get Pizza erneut angerufen, das dann unsere kostenlosen vorhandenen Pizzen aus der Datenbank holt und diese auch zu allen Pizzen hinzufügt. Anstatt alle Pizzen zu ersetzen, behalten wir im Grunde die vorhandenen und fügen die drei zusätzlichen Artikel hinzu. ist das keine schlechte Sache , Im Moment ist das keine schlechte Sache , da wir sehen können, dass die drei zusätzlichen Gegenstände das Fleischfest nicht beinhalten, das wir entfernt haben. Das alles scheint gut zu funktionieren. Um das zu beheben, ist das ziemlich einfach. Alles, was wir tun müssen, kurz bevor wir unsere neuen Pizzen bekommen , ist, unsere Referenz aller Pizzen, ihren Wert, abzurufen und dies auf ein leeres Array zurückzusetzen , bevor wir unsere neuen Dokumente erhalten. Lass uns das versuchen. Aktualisiere die Seite. Hier sind unsere drei Pizzen, entferne eine davon, und das funktioniert jetzt alles richtig. letzte Verbesserung, die wir vornehmen können, besteht darin, eine Fehlermeldung hinzuzufügen , wenn ein Fehler oder ein Problem aufgetreten ist, die Pizza zu löschen oder die Pizzen sogar aus der Datenbank zu holen. Dazu können wir in der Datei „Alle Pizzen“ eine neue Nachrichtenreferenz erstellen . direkt unter allen Pizzen Erstellen Sie direkt unter allen Pizzen eine neue Konstante , um unsere Botschaft zu speichern. Dies ist eine Referenz und standardmäßig eine leere Zeichenfolge. Dann können wir im Bereich Get Pizzen eine gewisse Fehlerbehandlung mit einem Bereich zum Ausprobieren und Auffangen hinzufügen . Platzieren wir das ganz oben im Testbereich und fangen wir es an. Catch nimmt einen Fehler auf. Dann müssen wir unseren gesamten Code in den Abschnitt try verschieben . Wenn Sie das Ende dieser Funktion finden, nehmen Sie alles bis hin zu all pizzas.value. Schneiden Sie das aus und lassen Sie nur den Try and Catch-Bereich hier und dann im Abschnitt Try zurück, fügen Sie es wieder ein und das ist der Code, den Sie ausführen und versuchen möchten, erfolgreich zu sein. Aber wenn es einen Fehler gibt, können wir dann in den Fangbereich gehen und unsere Meldung aktualisieren. Die message.value entspricht einer Zeichenfolge und wir sagen, dass beim Abrufen von Pizzen ein Fehler aufgetreten ist. Bitte laden Sie die Seite neu. Genau wie bei den Pizzen können wir auch die Nachricht aktualisieren und sie bei jeder Ausführung auf eine leere Zeichenfolge zurücksetzen . Die Datei message.value ist wieder eine leere Zeichenfolge. Das Gleiche gilt für unsere zweite Funktion , die Pizza löschen ist. Der Try-Block, der Catch-Block , der den Fehler aufnimmt, den vorhandenen Code ab, schneidet diese ab und ersetzt ihn, platziert ihn in den try-Block. Setze die Nachricht zurück, es war eine leere Zeichenfolge, und aktualisiere dann die Nachricht im Catch-Block. Es ist eine B-Zeichenfolge, wenn Sie möchten, können Sie auch die Fehlermeldung angeben, die wir zurückbekommen. Aber der Einfachheit halber erstelle ich nur eine Zeichenfolge, die besagt, dass beim Löschen der Pizza ein Fehler aufgetreten ist. Dann versuchen Sie es bitte erneut. Damit wir diese Nachricht innerhalb unserer Komponenten verwenden können, können wir sie als Nächstes zurückgeben, zurück den pizzas.view-Komponenten springen, diese importieren und dann direkt unter dem Header-Abschnitt ein neues p-Element erstellen, um unsere Nachricht in den doppelten geschweiften Klammern anzuzeigen . Fügen Sie eine Klasse für das Styling des Fehlers hinzu. Als vorübergehende Maßnahme wird auch hier etwas Text hinzugefügt. Jeder Text ist in Ordnung, nur damit wir etwas Stil hinzufügen und sehen können , wie das aussieht, ohne eine tatsächliche Fehlermeldung zu erhalten. Runter zum Style-Bereich, in dem wir dieser Fehlerklasse etwas Styling hinzufügen können. Zuallererst eine Farbe, die den RGB-Wert eins bei Null für Rot, 67 und 67 hat, wodurch wir diese rote Farbe erhalten. Ein Rand von einem Pixel, eine durchgezogene Linie runden die Ecken mit einem gewissen Randradius und dann einige Abstände innen und außen mit Abstand und Rand. 1rem Rand und auch 1rem Rand auf der Außenseite auffüllen , speichern, testen. So wird unsere Fehlermeldung in den Komponenten angezeigt, aber wenn wir den Text entfernen und ihn dann als leeres p-Element belassen würden , kann ich das hier sehen. Sie diesen Fehlertext entfernen, wird immer noch der rote Rand angezeigt , da das p-Element immer da ist , unabhängig davon, ob es Nachrichten enthält oder nicht. Um dies zu entfernen, können wir eine v If-Anweisung hinzufügen, um diese Elemente nur anzuzeigen, wenn die Nachricht existiert. Wenn wir eine Nachricht haben und ihre Elemente angezeigt werden, wenn nicht, wird sie aus dem Dom entfernt und wir sehen diesen roten Rand nicht mehr. 36. Bestellungen erstellen: Erstellen einer Bestellung folgt einem ähnlichen Muster wie das Erstellen einer neuen Pizza. Gehen wir in den verwendeten Korb Composable, sich in einem Composable-Ordner befindet. Öffne das und wir müssen zuerst zwei Dinge importieren. Als erstes müssen wir AddDoc aus dem Firestore-Paket importieren , dieses stammt also aus Firebase/Firestore. Dann der Verweis auf die tatsächliche Auftragserfassung, die Sie dies übertragen möchten. Lassen Sie uns dies aus unserer Firebase-Datei importieren . Was wir tun müssen, ist diese DB-Auftragsreferenz zu importieren. Wir haben den Korbinhalt bereits in der Korbanordnung und dies wird verschoben, wenn wir etwas aus dem Menübereich hinzufügen. Rechts drüben ist der Korb. Jetzt müssen wir eine neue Funktion erstellen, um die älteste Sammlung in der Datenbank hinzuzufügen . Direkt unter dieser Funktion hier, zurück zu diesem Pfeil unten, das ist eigentlich egal. Dies wird asynchron sein, der Funktionsname von add new order und dann, was wir darin tun müssen, ist, dies in einen Try- und einen Catch-Block zu packen , damit er alle Fehler behandeln kann , den Fehler weiterzugeben. Das erste, was wir berücksichtigen müssen, ist , dass dieser Korb oben Korb oben derzeit als Array gespeichert ist. Firebase benötigt jedoch ein Objekt, sodass wir den Spread-Operator verwenden können, um die aktuellen Elemente zu einem Objekt zusammenzuführen. Gehen wir in den Testbereich und wir werden unsere Reihenfolge umstrukturieren, indem wir ein neues Objekt erstellen. Die erste Eigenschaft, die hinzugefügt werden muss, heißt createAt Dadurch wird die Reihenfolge verfolgt, in der unsere Bestellungen aufgegeben werden. Daher können wir sie bearbeiten oder sie im Adminbereich in der richtigen Reihenfolge anzeigen . Dadurch wird jedoch nur ein neues JavaScript-Datum erstellt Installieren Sie es in der Datenbank. dann, wie bereits erwähnt, Um dann, wie bereits erwähnt, die Inhalte aus unserem Array abzurufen, diese in unsere Bestellung ein, um die Eigenschaft einer Pizza zu erstellen wird wiederum ein Objekt sein , in das wir die Eigenschaften aus unserem Korb zusammenführen Diese Eigenschaft wird wiederum ein Objekt sein, in das wir die Eigenschaften aus unserem Korb zusammenführen werden. Da es sich um eine Referenz handelt, müssen wir direkt nach der Bestellung auf den Wert zugreifen. Hier werden wir jetzt die addDoc Methode von Firestore verwenden die addDoc Methode von , um zu einer bestimmten Sammlung zu wechseln. Eine Sammlung ist unsere DB-Auftragsreferenz , die wir gerade importiert haben. Rufen Sie die AddDoc Methode auf, die den ersten Parameter der DB-Audit-Referenz aufnimmt, die ein Verweis auf unsere älteste Sammlung ist , und dann übertragen wir diese bestimmte Reihenfolge an diese Sammlung. Sobald dies erfolgreich durchgeführt wurde, warten wir, bis dieser Vorgang abgeschlossen ist, und dann können wir den Wert unseres Korbs auf ein leeres Array zurücksetzen. Dadurch werden alle Pizzen aus dem Korb entfernt, sodass der Benutzer erneut beginnen kann. Das ist alles, was wir jetzt für den Testbereich brauchen und den Benutzer auf dem Laufenden halten Wir erstellen eine neue Variable für eine Nachricht. Die Standardnachricht wird etwa so lauten , dass Ihr Korb leer ist, sodass wir das sehen können oder wir haben keine Pizzen drüben auf der rechten Seite, also const korbtext, wickeln Sie das in ein Ref, wobei der Text Ihres Warenkorbs leer ist. Dies ist der Standardwert und wir können ihn aktualisieren je nachdem, ob die Bestellung erfolgreich hinzugefügt wurde oder nicht Gehen Sie zur Funktion. Gehen wir in den Testbereich und ganz unten greifen wir auf den Korb text.value zu und aktualisieren diesen, um neue Zeichenketten zu erhalten, etwas wie Danke, Ihre Bestellung wurde aufgegeben. den anderen Abschnitt können Sie, genau wie wir uns zuvor angesehen haben, auch die Fehlermeldung einfügen genau wie wir uns zuvor angesehen haben, , wenn Sie möchten. Der Einfachheit halber aktualisiere ich den Warenkorbtext so, dass er eine neue Zeichenfolge enthält , wenn Sie möchten. Der Einfachheit halber aktualisiere ich den Warenkorbtext so, dass , was dem entspricht, dass Bestellung ein Fehler aufgetreten ist. Ich sage, bitte versuche es noch einmal. Wir können das von unseren Komponenten aus aufrufen. Wir müssen unseren Funktionsaufruf zurückgeben und wir müssen auch den Korbtext zurückgeben damit wir ihn in den Komponenten anzeigen können. Wenn Sie bestellen, wird der Korbtext und der Korb in der Menüansicht angezeigt . Gehen Sie also hierher, und wir können diese jetzt aus unserem Composable importieren. Hier haben wir bereits einen Hinweis auf unseren Use basket composable, sodass wir in die Klammern springen und neben dem Hinzufügen einer neuen Bestellung auch den Korbtext importieren können. Beginnen wir mit dem Hinzufügen einer neuen Bestellung, die wir über unseren Button auslösen können. Gehen Sie runter zum Warenkorb-Div, und unten haben wir diese Schaltfläche „Bestellung aufgeben“, dies ist jetzt für einen Klick, der unsere Funktion auslöst. Der letzte Schritt besteht nun darin, den Korbtext hinzuzufügen und sich daran zu erinnern, dass standardmäßig Ihr Warenkorb leer ist Wir möchten dies also nicht anzeigen, wenn sich bereits unsere Artikel im Warenkorb befinden , und für dieses gleiche bedingte Rendern hilft das gleiche bedingte Rendern. Springen wir zum oberen Rand des Korbabschnitts, direkt unter der Überschrift. Lassen Sie uns div-Abschnitte erstellen, die dies enthalten und darin verwenden wir v-if, um unser bedingtes Rendern hinzuzufügen dem wir überprüfen möchten, ob der Korb, die Länge größer als Null ist, d. h. wir haben einige Elemente im Korb. Wenn das also wahr ist, schneiden wir den schließenden div-Abschnitt ab und gehen dann zum Ende, direkt unter unseren Schaltflächen Bestellung aufgeben, schließen. Sie können jetzt sehen, ob Sie in den Warenkorbbereich gehen Wir haben keine dieser Schaltflächen oder die Gesamtsumme der Bestellung. All dies erstellt jedoch ein neues Div, das der Abschnitt v-else ist. Dieser Abschnitt wird im Browser nur angezeigt, wenn sich keine Artikel im Warenkorb befinden, was der aktuelle Status ist. Aber das wird innerhalb der doppelten geschweiften Klammern platziert Tatsächlich fügen wir zunächst ein p-Element ein. Ich gebe den Korbtext ein und wir sehen Fehler. Schauen wir uns an, was das ist. Wir haben kein angrenzendes v-if, also ist das der v-l-Abschnitt und das sollte das v-if sein. Wir haben nur diesen zusätzlichen div-Abschnitt, den wir entfernen können . Stellen Sie sicher, dass dies korrekt ist. Wir haben dieses Div, das Eröffnungs-Tag, den gesamten Inhalt, den abschließenden Abschnitt, v-else. Wir müssen auch dieses schließende Div verschieben, bevor das alles gut aussieht. Stellen Sie jetzt nur sicher, dass wir nach dem V-L-Abschnitt zwei zusätzliche schließende Divs haben, also frei hintereinander. Dann oben in der H3, dem Div und dann der Tabelle. Wir sollten jetzt im Browser sehen, dass der Standardtext Ihres Warenkorbs leer ist Klicken Sie auf einen Artikel und jetzt ist die Korblänge größer als Null. Daher können wir unsere Tabelle anzeigen. Lassen Sie uns nun ein paar weitere Artikel in unsere Körbe legen und wir können testen, indem wir auf die Schaltfläche „Bestellung aufgeben“ Das sieht gut aus. Wir haben die funky Message, geh rüber zur Firebase-Konsole. Das ist Console.Firebase.Google.com. My Pizza Planet V3 in die Datenbank. Wir haben jetzt die älteste Sammlung, wir haben eine Bestellnummer, das sieht gut aus. Wir haben eine 9-Zoll-Margherita und zwei 12-Zoll-Margherita. Lassen Sie uns noch eine 12-Zoll-Pepperoni und Margherita probieren , bestellen Sie. Gut, alles funktioniert richtig und als Nächstes holen wir diese Bestellungen aus der Datenbank ab und zeigen sie im Admin an. 37. Fetching von Bestellungen: Jetzt können wir erfolgreich Bestellungen aufgeben und diese zu unserer Datenbank hinzufügen. Wir haben nun die Aufgabe, diese Bestellungen aus der Datenbank abzurufen , damit wir sie in unserem Projekt und insbesondere im Admin-Bereich verwenden können . Zuvor haben wir unten einen Abschnitt mit aktuellen Bestellungen erstellt . Wir werden diese aus der Datenbank abrufen, Schleife durchgehen und sie in dieser Tabelle platzieren. Um die Dinge zu organisieren, erstellen Sie ein neues Composable im Composables-Ordner. Dieser wird UseOrders heißen. Wie immer müssen wir eine Standardfunktion exportieren, useOrders verwenden und den Code dort platzieren. Zunächst benötigen wir eine Konstante, um all unsere Bestellungen darin zu speichern. Wir nennen das AllOrders. Wir werden auch ref verwenden , das unser Array umgeben wird . Wir initialisieren dies als leeres Array und dann müssen wir diese Referenz aus dem View-Paket importieren. Wir benötigen auch eine Funktion , die diese Elemente aus der Datenbank abruft und sie an unsere AllOrders-Referenz überträgt. Wir erstellen eine neue asynchrone Funktion, All getOrders. Wir könnten etwas Ähnliches tun , das wir in der Vergangenheit benutzt haben. Wenn wir einen Blick darauf werfen, unser Composable, das war UsePizzas. Hier haben wir in der Vergangenheit unsere Dokumente mit GetDocs abgerufen. Wir haben diese Funktion namens getPizzas. Dieser ist etwas einfacher, da wir nur unsere getDocs-Methode aufrufen und einen Verweis auf die gesamte Pizzasammlung übergeben müssen . Wenn wir wollten, könnten wir genau dasselbe tun, indem einen Verweis auf unsere Bestellungen weitergeben. jedoch für diesen Anwendungsfall daran, dass wir im vorherigen Video auch eine neue Bestellung an die Datenbank übertragen haben, die eine Eigenschaft namens createdAt enthielt. Als wir die Pizzen aus der AllPizza-Kollektion hineingezogen wurden , die in keiner bestimmten Reihenfolge waren . Hier funktioniert das ein bisschen anders als bei AllPizzen. Wir möchten sicherstellen , dass wir die Bestellungen in einer bestimmten Reihenfolge basierend auf den Daten, in denen sie erstellt wurden . Zurück zu UseOrders. Um dies zu tun, müssen wir eine sogenannte Abfrage verwenden . Das müssen wir importieren. Abfrage importieren. Dies ist aus dem Firebase Slash Firestore-Paket. Aus unserer Datei firebase.js muss dieser Verweis ebenfalls auf AllOrders importiert werden. Nun zurück zu unserer getOrders-Funktion, wir werden diese Abfrage verwenden , die wir gerade importiert haben. Anfrage. Was wir hier tun müssen, ist, dass wir es in drei Dingen weitergeben müssen. Der erste ist ein Verweis auf unsere Sammlung, die dbOrdersRef ist. Dann können wir auch zusätzliche Suchparameter übergeben. In unserem Fall wird es OrderBy sein. Bestellung von. Dies ist auch eine Firebase-Methode, mit der die Inhalte, die wir aus unserer Datenbank abrufen, nach einem bestimmten Feld sortiert werden. Wenn wir das alles verwenden können, müssen wir es auch importieren. Dann geben wir den Namen des Feldes ein, nach dem Sie dies bestellen möchten. In unserem Fall heißt diese Eigenschaft createdAt, wie wir sehen können, als wir eine neue Bestellung erstellt haben. Lassen Sie uns das nehmen, es einfügen und dann diese Referenz in einer Konstante namens QueryData speichern . Ab jetzt ist das, was wir tun, ziemlich ähnlich wie damals , als wir die Pizzen abgeholt haben. Wir müssen GetDocs nutzen. Wir müssen diese Dokumente dann in einer Schleife durchgehen und sie dann auf unsere Konstanten übertragen. Vor diesem Hintergrund werden wir diesen gesamten Abschnitt kopieren. Direkt über dem Catch-Block werden die Klammern kopiert. Dies sind die Klammern für jede Schleife bis hin zu unseren Dokumenten. Kopieren Sie das, fügen Sie es direkt unter unsere Abfragedaten ein. Auch hier können wir viele dieser Daten nutzen. Wir können diesen konstanten Namen beibehalten. Wir können nach unseren GetDocs suchen. Alles, was wir tun müssen, anstatt direkt nach allPizzas oder AllOrdersRef zu suchen , geben wir unsere gefilterten QueryData weiter, dann werden wir jedes dieser Dokumente wiederholen, anstatt eine Pizza zu erstellen, wir strukturieren eine neue Bestellung. Auf die ID kann genauso zugegriffen werden, da jedes dieser Dokumente mit derselben Struktur von Firebase stammt . Wir können auch die Dokumentdaten zusammenführen, bei denen es sich um alle Felder von AllOrder handelt, z. B. AllPizzaS, und unsere CreatedAt-Daten. Der letzte Unterschied ist diese Zeile hier Anstatt zu AllPizzaS zu wechseln, haben wir zu AllOrders gedrängt. Wir geben AllOrder statt Pizza. Wir werden das testen, bevor wir es in unseren Komponenten platzieren , direkt unter unseren schließenden Klammern für loop, place in a console log oder AllOrders, kein Wert. Aber um dieses Konsolenprotokoll tatsächlich auszuführen, müssen wir dieses Composable in die erforderlichen Komponenten importieren . Dies wird die AllOrders-Punktansicht sein, die sich innerhalb der Komponenten befindet. Öffnen Sie dann im Admin-Ordner AllOrders. Wir haben derzeit kein Drehbuch. Erstellen Sie ein Skript, richten Sie es ein und importieren Sie unser Composable, das UseOrders ist. Mithilfe der Strukturierung können wir dann unsere AllOrders importieren, denen ich nicht sicher bin, ob wir sie tatsächlich zurückgegeben haben, also schauen wir uns das in nur einer Sekunde an. Rufen Sie unsere UseOrders-Funktion auf. Geh einfach zurück. Wir müssen alle Bestellungen zurücksenden, um diese Schaltfläche in unserer Funktion verwenden zu können. Alle Bestellungen zurücksenden. Sie sollten jetzt unser Konsolenprotokoll ausführen. Gehen Sie in den Admin-Bereich. Öffne die Konsole. Derzeit sehen wir hier nichts , da wir unsere getOrders-Funktion nicht aufgerufen haben . Was wir tun werden, wir machen nur unsere Funktion kaputt, wir importieren oder mounten es auch. Wir werden unsere Funktion GetOrders ausführen sobald diese Komponente gemountet ist. Dies muss ebenfalls oben importiert werden. Wir müssen auch GetDocs aus Firestore importieren . Versuchen wir es noch einmal. Öffne das Konsolenlog im Target, wo wir sehen können, dass wir ein Array mit zwei separaten Bestellungen haben. Diese sind genau so strukturiert, wie wir sie erstellt haben. In dieser Bestellung haben wir hier die ID. Dann haben wir die restlichen Dokumentdaten, die das Pizza-Objekt und auch createdAt waren, zusammengeführt . Wir sind jetzt fast fertig mit diesem Video. Das nächste, was wir tun werden, um die Dinge abzurunden, ist, unseren Code in einen Try- und einen Catch-Block zu packen. Wechseln Sie in die Funktion getOrders. Rufen Sie den vollständigen Inhalt der gesamten Abfragedaten aus dem Konsolenprotokoll ab. Einsetzen, versuchen und auch fangen. Catch irrt sich. Fügen Sie dann den Inhalt in den Testbereich ein. Wir wissen, dass das funktioniert, also können wir dieses Konsolenprotokoll auch entfernen . Das lassen wir da. Im nächsten Video werden wir mit unseren Bestellungen fortfahren, diese durchgehen und sie in der Admin-Ansicht platzieren. 38. Überlauf von Bestellungen: Jetzt wissen wir, dass wir die Bestellungen erfolgreich von Firebase abrufen und in unserer AllOrders-Variablen speichern können. Wir haben diese in die Datei orders.view importiert und können sie verwenden , um sie zu wiederholen und in der Tabelle anzuzeigen. Dies ist die Tabelle , die Sie in der Admin-Ansicht unten sehen . Genau wie bei den obigen Pizzen können wir all diese Daten wiederholen und die richtigen Werte anzeigen. Als Erstes müssen wir in den aktuellen Bestellungen diesen fest codierten Wert von fünf ändern. Wir können den tatsächlichen Wert mit AllOrders.Length ermitteln. Wir wissen derzeit, dass wir zwei Bestellungen haben, also sieht das gut aus. Dann habe ich die Tabellenüberschriften. Wir müssen diesen Abschnitt nicht wiederholen, weil wir keine doppelten Überschriften wollen, aber was wir tun müssen, ist, für beide eine Schleife zu erstellen , die zwei zusätzlichen Zeilen folgt. Die erste Zeile mit der Bestellnummer und die zweite Zeile mit den Pizzadetails. Dazu erstellen wir einen zusätzlichen Wrapper namens Template. Schneide diese beiden Tabellenzeilen aus. Wir können ein Element namens Template übergeben, wieder einfügen und wir können diese Vorlage nun verwenden, um Schleife zwei hinzuzufügen. Die Vorlage fügt diesem Abschnitt einen Wrapper hinzu, jedoch keinen zusätzlichen HTML-Code hinzu, sodass es sich praktisch um einen unsichtbaren Wrapper handelt. In einer Schleife mit V-for platzieren, in AllOrders bestellen. Wir brauchen einen Schlüssel. Wir wissen, dass wir für jede Bestellung einen eindeutigen Schlüssel haben , der in der ID gespeichert ist. Dies ist order.id. Wir können diese order.id anstelle dieser Bestellnummer auch verwenden . Dann können wir zu unseren Pizzainformationen gehen , die in dieser Zeile gespeichert sind. Denken Sie jedoch daran, dass wir für jede Bestellung nicht nur eine einzige Pizza haben Deshalb müssen wir eine zusätzliche Schleife erstellen, um jede der Pizzen in unserer Bestellung zu überlisten. Zum Beispiel überprüfen wir gerade diese erste Bestellung hier. Wir müssen dann orders.pizzas in einer Schleife durchgehen, um auf alle darin enthaltenen Werte zuzugreifen und diese als Tabellendaten anzuzeigen. v-for, und wir sagen , Artikel der Reihe nach bestellen. Order ist das vollständige OrderItem, das Sie aus der ersten Schleife erhalten haben, aber wir möchten auf die Pizzen zugreifen. Wir können sehen, wenn wir zur Konsole gehen und zu den Pizzen springen, wir haben nicht für jede von ihnen die Pizza-ID gespeichert. Aber jeder Pizzaname und jede Größe ist auch einzigartig, sodass wir daraus einen Schlüssel erstellen können. Wir sagen den OrderItem.Name. Wir werden OderItem.size sehen. Wir können auf den OrderItem für die Pizza-Eigenschaften wie Name, Größe, Menge und Preis zugreifen die Pizza-Eigenschaften wie Name, . Der erste ist der Name, der zweite ist die Größe, also OrderItem.Size, Menge. Es liegt an Ihnen, wie Sie mit diesem Preis umgehen möchten der in der Admin-Tabelle angezeigt wird. Wenn Sie möchten, könnten Sie zunächst versuchen, den OrderItem.Price auszugeben. Wenn wir in den Adminbereich gehen und dann aktualisieren, können wir unsere Struktur sehen. Wir haben die Bestellnummer, den Pizzanamen, die Größe, die Menge und der Preis wird als Einzelpreis für eine Pizza angezeigt. Wenn du willst, so wie wir es hier beschrieben haben , wo wir gesagt haben, dass das die Summe ist. Ich werde den Preis mit der Menge multiplizieren. Multiplizieren wir mit dem Stern mit der OrderItem.Quantity. Dies ist jetzt die Summe für jede dieser Zeilen. Als Nächstes werden wir zu diesen Bestellungen zurückkehren und sehen, wie wir mithilfe dieses roten Kreuzes Artikel aus unserer Datenbank entfernen können . 39. Bestellungen löschen: Als Nächstes konzentrieren wir uns darauf, wie Sie die Bestellungen löschen. Wenn wir zur zusammensetzbaren Datei usePizzaS wechseln, wird dasselbe Verfahren verwendet wie zuvor, als wir die Pizzen gelöscht haben. Wir hatten diese Funktion namens DeletePizza, die eine ID benötigte, wir löschten DeletePizza, die eine ID benötigte, alle vorhandenen Fehlermeldungen, wir haben dann eine Dokumentreferenz gespeichert, indem auf unsere Sammlung zugegriffen haben, und auch die ID. Wir haben eine Methode namens deleteDoc aufgerufen, die die Pizza aufgenommen hat, auf die wir gerade verwiesen haben, und dann haben wir schließlich getPizzas aufgerufen, das alle restlichen Pizzen einzog . die noch verfügbar waren. Um die Dinge schön und einfach zu halten, kopieren wir diese gesamte Funktion und gehen dann in die älteste Datei und fügen sie ein. Natürlich müssen wir ein paar kleine Änderungen vornehmen, die wir als Löschreihenfolge bezeichnen. Auch hier muss immer noch eine Bestell-ID übergeben werden. Wir löschen auch jede bestehende Nachricht. Dies ist die konstante Reihenfolge, dies ist die dBordersRef, und wir löschen diese Reihenfolge. getOrders und im Funktionsaufruf sollte dieser mit dem übereinstimmen , den Sie hier oben haben. Wir können dann die Nachricht ändern, beim Löschen der Bestellung ist ein Fehler aufgetreten. Dann ist auch ein zusätzlicher Import erforderlich, wir müssen unser Dokument abrufen. Wir müssen DeleteDoc abrufen, und wir müssen auch diese Nachricht erstellen. Gehen wir also zu unseren Importen über, und vom Firestore müssen wir auf unser Dokument verweisen und auch das Dokument löschen. Da wir uns mit unseren Bestellungen befassen, haben wir hier bereits den Bestellungsimpuls , das ist also völlig in Ordnung. Wir haben also die Botschaft. Wir müssen dies dann als Ref erstellen, Const-Nachricht entspricht einer Referenz, die wir zunächst als leere Zeichenfolge festlegen . Wir haben das bereits importiert, also ist das in Ordnung. Wir müssen dann einige Werte aus diesem Composable zurück in den Rückgabebereich zurückgeben. Wir werden zurückkehren, ich würde die gesamte Methode und auch die Nachricht löschen die gesamte Methode und auch die , die in den Komponenten angezeigt werden soll. Wir gehen dann zu unseren Komponenten in den Admin-Ordner und in die Bestellungen, die orders.view, wo wir dann einige Importe erstellen können. Wir importieren bereits unsere Datei mit den Verwendungsaufträgen, sodass wir die Bestellung und auch unsere Nachricht dann destrukturieren, löschen können. Zunächst rufen wir delete order auf, wenn wir uns den Admin-Bereich ansehen und dann nach unten gehen. Wir erinnern uns also alle daran , dass jede dieser Auftragsnummern dieses kleine Kreuz hat, das eine Schaltfläche ist, und das wird unsere Methode aufrufen, an die wir die Order-ID übergeben können. Das ist der Button hier. Die Klasse von btn remove. Wir warten jetzt auf einen Klick, wir Bestellung löschen nennen, und Bestellung löschen nimmt die Bestellnummer auf, die wir an diese Funktion übergeben werden. Ich muss das aus unserem Loop holen, damit wir die ID bestellen können, die Sie bereits verwendet haben. Wir können das einfach in die Klammern setzen und das wird an unsere Funktion übergeben. Lass uns das mal ausprobieren. In das Projekt. Wir haben derzeit nur zwei Bestellungen hier. Wir werden versuchen, diesen zu entfernen. Wir sehen, dass dies jetzt auf drei Bestellungen ansteigt, aber wir müssen derzeit eine Aktualisierung durchführen , um dann Aktualisierungen zu sehen. Aber das ist vorerst in Ordnung, wir werden in Zukunft darauf zurückkommen und dies verbessern, indem wir unsere Echtzeitfunktionen aus unserer Datenbank hinzufügen . Das bedeutet, dass unsere Anwendung mit den neuen Werten aktualisiert wird, sobald Änderungen an der Datenbank vorgenommen werden . Denken Sie zum Schluss daran, dass wir diese Nachricht auch oben importiert haben. Was wir tun können, ist, dies direkt unter unserer Kopfzeile im P-Element anzuzeigen . Wir müssen nicht nur die Nachricht hier ausgeben, sondern auch ein gewisses bedingtes Rendern hinzufügen . Wir möchten nicht, dass diese Nachricht immer angezeigt wird oder Platz einnimmt, wie sie derzeit ist. Wenn wir einen Blick darauf werfen und das entfernen und speichern, können Sie sehen, ob wir das kommentieren und auf „Speichern“ klicken. Dieser Abschnitt nimmt etwas Platz ein, Dieser Abschnitt nimmt etwas Platz unabhängig davon, ob es eine Nachricht gibt oder nicht. Was wir also tun werden, um dies nur anzuzeigen, wenn eine Meldung vorliegt, indem wir den Abschnitt v if so platzieren, indem wir den Abschnitt v if so platzieren dass nur angezeigt wird, ob eine Nachricht vorhanden ist, und für das Styling fügen wir auch die Fehlerklasse hinzu. 40. Admin anzeigen und ausblenden: Die Admin-Ansicht sieht im Moment vielleicht okay aus , aber stell dir vor, unsere Anwendung wäre viel größer und wir hätten viel mehr Pizzen im Menü oder viele Bestellungen. Diese Seite könnte sehr lang werden. Um Ihnen dabei zu helfen, werden wir jetzt jeden dieser Abschnitte ein - und ausblenden. Dadurch wird die Seite viel kleiner und wir müssen nicht all diese Informationen lesen. Dazu erstellen wir in jeder dieser kostenlosen Admin-Komponenten eine lokale Variable, die dann mit dem Text von Ein dieser kostenlosen Admin-Komponenten eine lokale Variable, - und Ausblenden umgeschaltet wird . Um zu beginnen, springe in die Seitenleiste. Die Komponenten, der Admin und die neue Pizza. Nun, wir werden eine neue lokale Konstante namens show NewPizza erstellen . Setze diesen Wert auf ref und richte unseren Ref ein, der dem Wert von true entspricht. Wir zeigen das standardmäßig an. Dies wird im Adminbereich sichtbar sein und sobald ein Benutzer darauf klickt, wird dies auf Falsch umgestellt. Wir machen das in unseren Vorlagen und im Header-Bereich direkt unter unserem Titel, Stellen innerhalb der kleinen Elemente. Hier drinnen wollen wir Ihnen den Text von Ein- oder Ausblenden zeigen. Wir können diesen Abschnitt auch bedingt innerhalb der doppelten geschweiften Klammern rendern . Was wir tun können ist, dass wir sagen können, wenn show NewPizza gleich zwei ist, wir zeigen den Text von hide an. Wenn nicht, sagen wir Show. Derzeit ist dies auf true gesetzt, sodass wir den Text von hide up oben sehen. Wir können die Klasse von ToggleBTN hinzufügen. Achte auf einen Klick, wenn ich klicke. Alles, was wir hier tun wollen, ist, Ihre NewPizza so zu suchen , dass sie dem Gegenteil des aktuellen Werts entspricht , dass sie dem Gegenteil des aktuellen Werts . Lass uns das ausprobieren. Klicke auf Ausblenden. Dies wird jetzt umgeschaltet und dann können wir unsere Variable show NewPizza verwenden um diesen gesamten Abschnitt ein- und auszublenden. Der Bereich, den wir ein- und ausblenden möchten, ist das Formular. Wir können den Kopf, der den Button und auch den Titel enthält , immer noch an Ort und Stelle lassen. Fügen Sie in das Formular v-show ein, wodurch diese Inhalte nur angezeigt werden , wenn der Wert von show NewPizza gleich zwei ist. Es wird derzeit nicht zurückgeschaltet. Lass uns versuchen, uns zu erfrischen. Das scheint gut zu funktionieren. Ich bin mir nicht ganz sicher, was dort passiert ist. Wir können diesen Abschnitt jetzt in den Bestellungen und auch im Menü replizieren . Lass uns zu den Befehlen übergehen. Importiere unseren Ref Vue. Erstellen Sie eine lokale Variable. Dies können Showbefehle sein. Der Anfangswert von true. Tatsächlich kopieren wir hier einfach den NewPizza-Bereich, den wir erstellt haben, also den gesamten kleinen Abschnitt. Bring das rüber, damit es konsistent ist. Platzieren Sie dies direkt unter unseren aktuellen Bestellungen, Überschrift Level 3, dieselbe Klasse. Dieses Mal möchte ich das nur ändern, um Showbefehle zu machen. Ändern Sie dies in allen anderen Abschnitten. Wir wollen dann ein- und ausblenden. Unsere Tabelle würde anzeigen“ und „Bestellungen anzeigen“ lauten. Lass uns das ausprobieren. Es kann sich verstecken. Das ist weg. Dann zeigt Show diesen Abschnitt. Schließlich der Menübereich, sich in den Pizzas oder Vue befindet. Wir müssen auch Ref Vue importieren. Unsere lokale Variable namens showMenu, der Anfangswert von true, und dann müssen wir wie zuvor , unter unserer Level-3-Überschrift , unter unserer Level-3-Überschrift, diesen kleinen Abschnitt erneut kopieren, einfügen und dann alle unsere Variablen durch showMenu ersetzen. Fügen Sie abschließend v-show zu unserer Tabelle hinzu. Lass uns das ausprobieren. Das Menü, Ausblenden und Einblenden. Nur als schnellen letzten Schliff. Wenn wir den Mauszeiger über diese Schaltfläche bewegen, können wir daraus einen Zeiger machen. Wir haben für jeden dieser Abschnitte eine Klasse von ToggleBTN . Da wir dies in mehreren Komponenten verwenden, gehen wir zu unseren Assets und der Klasse main.css von ToggleBTN. Wir werden den Cursor als Zeiger festlegen. Da haben wir es. Das funktioniert jetzt für alle drei unserer Sektionen. 41. Die Registrierungsfunktion: Dieses Projekt wird die Firebase-Authentifizierung verwenden, um Benutzerkonten zu verwalten und ihnen die Anmeldung und Anmeldung zu ermöglichen. Wenn wir in die Firebase-Konsole und in den Abschnitt Projektübersicht gehen , sollten Sie direkt darunter sehen, dass wir unsere Authentifizierung und unsere Firestore-Datenbankverknüpfung eingerichtet haben . Dies liegt daran, dass wir diese in den frühen Videos bereits in unserem Projekt aktiviert haben. Wenn Sie jedoch derzeit keine Authentifizierung eingerichtet haben, müssen Sie nur zum Abschnitt Alle Produkte gehen und sie mit diesem Authentifizierungslink hinzufügen. Da meins bereits aktiviert ist, gehe ich zurück zum Projekt, um dies einzurichten. Lassen Sie uns die Dinge organisieren. Lassen Sie uns ein neues Composable innerhalb des Composables-Ordners erstellen , eine neue Datei. Dieser wird useAuth.js sein. Dann exportieren wir, wie bei allen anderen Composables, eine Standardfunktion. Dieser ist useAuth. Dann fügen wir unten eine Rückgabeerklärung hinzu, bevor wir es vergessen. Da wir derzeit keine Benutzer in unserem Projekt haben, wäre es sinnvoll, wäre es sinnvoll die erste Funktion, die wir hinzufügen, darin besteht, einen neuen Benutzer zu erstellen. Dazu müssen wir einige Funktionen aus dem Firestore Firebase-Authentifizierungspaket importieren . Oberhalb unserer Funktion werden wir diese Importe jetzt durchführen. Was wir importieren müssen, ist etwas namens GetAuth. Um einen neuen Benutzer zu erstellen, müssen wir außerdem eine Methode namens Benutzer mit E-Mail und Passwort erstellen importieren . Das ist alles Camel Case. nach dem ersten Wort sicher, dass jedes folgende Wort mit einem Großbuchstaben beginnt. Wir werden das aus Firebase/Auth importieren. Als Nächstes verwenden wir diesen GetAuth-Import, der die Firebase-Authentifizierung initialisiert. Dann beginnen wir, dies innerhalb einer Variablen zu referenzieren. Steigen Sie in unsere Funktion ein. Nennen Sie dies auth, was GetAuth entspricht. Da dies unsere Methode ist, müssen wir sie mit den Klammern aufrufen, die nächste Authentifizierungsfunktion, die einen neuen Benutzer erstellt. Dies wird asynchron als Anmeldung bezeichnet. Wenn wir uns anmelden, benötigen wir, da wir einen Benutzer mit E-Mail und Passwort erstellen , auch Pässe für diese Funktion, wenn wir sie aufrufen. Wir werden uns bald im Funktionstext oder in der Fehlerbehandlung ansehen, wie das geht . Erstellen Sie einen Try and Catch-Bereich und geben Sie den Fehler weiter. Im Testbereich rufen wir dann die rufen wir Funktion „Benutzer mit E-Mail und Passwort erstellen“ auf, die wir gerade importiert haben. Warten wir auf den Rückgabewert. Erstellen Sie einen Benutzer mit E-Mail und Passwort. Dies wird drei verschiedene Dinge beinhalten. Der erste bezieht sich auf den Current of Instance , den wir oben eingerichtet haben. Es muss auch die E-Mail und das Passwort enthalten. Da sind wir. Um auch alle Fehlermeldungen zu speichern, können wir eine neue reaktive Variable erstellen. Dazu müssen wir zuerst ref aus View importieren und unsere Konstante direkt darunter in der Funktion errorMessage erstellen Konstante direkt darunter in . Dann richte unseren Ref ein, der zunächst eine leere Zeichenfolge sein wird . Da sind wir. Wenn dieser Abschnitt jetzt erfolgreich ist der Testbereich einwandfrei funktioniert, können wir alle vorhandenen Nachrichten löschen. Wir setzen die ErrorMessage.Value auf eine leere Zeichenfolge zurück. Dann können wir im Fehlerbereich auch diese Fehlermeldung aktualisieren. Wenn wir beispielsweise einen Benutzer registrieren, möchten wir nicht einfach eine generische Fehlermeldung wie „Es ist ein Fehler aufgetreten, es ist ein Problem bei der Anmeldung aufgetreten “ oder etwas Ähnliches zurücksenden wie „Es ist ein Fehler aufgetreten, es ist ein Problem bei der Anmeldung aufgetreten . Es wäre sinnvoll, den Fehler etwas genauer zu beschreiben. Möglicherweise geben sie kein Passwort ein, das lang genug ist, es enthält möglicherweise nicht die richtigen Zeichen, die E-Mail wird möglicherweise bereits verwendet. Dazu müssen wir auf unseren Fehler zugreifen, der an den Fangbereich weitergegeben wird. Wir haben eine Eigenschaft namens Code. Dieser Code ist eine Textzeichenfolge , die einer Fehlermeldung entspricht. Zwei gängige Codes, die Firebase bereitstellt, sind eine Zeichenfolge namens auth/email, die bereits verwendet wird . Es sieht so aus. Es wird bereits mit Auth/E-Mail verwendet, mit Bindestrichen zwischen jedem dieser Wörter. Ein weiteres nützliches Passwort ist auth/weak-Passwort. Dies sind nützliche Nachrichten , die an den Benutzer weitergegeben werden können. Aber zuerst müssen wir sicherstellen, dass wir erkennen können , welche davon innerhalb unseres Fehlers generiert werden . Das können wir in eine If-Else-Anweisung einfügen, wir können in eine Switch-Anweisung einfügen, was auch immer Sie bevorzugen. Ich gehe zum Schalter. Wir können dies später hinzufügen, wenn wir auf den Fehler zugreifen möchten , der an unser Catch-Objekt übergeben wird, dann können wir auf den Code zugreifen. Dann können wir mit der Erstellung unserer Einzelfälle beginnen. der ersten werden wir genau hier nach dieser Zeichenfolge suchen . Füge das ein. Wenn das stimmt, wenn dies eine Übereinstimmung ist, wollen wir den ErrorMessage.Value setzen. Um etwas aussagekräftiger zu sein, sagen wir so etwas wie ein Benutzer mit dieser E-Mail, es existiert bereits, bitte melden Sie sich an. Wenn das stimmt, können wir dann aus diesen Switch-Statements ausbrechen. Wir müssen nicht weiter nach einem anderen Code gehen. Der zweite Fall entspricht unserer zweiten Zeichenfolge, die wir hier unten hatten. Lass uns das verschieben. Fügen Sie dies als unseren Fall ein. Wenn der Benutzer ein schwaches Passwort eingibt, ist dies ein ErrorMessage.Value. Wir werden diese Variable so aktualisieren, dass das Passwort mindestens sechs Zeichen lang sein sollte. Wir brechen dann damit aus, falls das stimmt. Schließlich sollten wir mit der Switch-Anweisung auch eine Standardnachricht unten hinzufügen. Dies ist der Fall, wenn einer der oben genannten Fälle nicht zutrifft, greifen Sie auf den Standardabschnitt zurück , der den ErrorMessage.Value erneut aktualisiert. Dieser kann etwas allgemeiner sein. Wir sagen, es tut uns leid, es ist ein unerwarteter Fehler aufgetreten. Das ist vorerst alles, was wir für unsere Anmeldefunktion benötigen. Als letztes müssen Sie unsere Anmeldefunktion und auch unsere Fehlermeldung zurückgeben . Beide werden jetzt von unseren Komponenten aus abrufbar sein . Das machen wir als Nächstes, wenn wir das Anmeldeformular erstellen. 42. Das Formular für das Anmelden erstellen: Toll, dass unsere Anmeldefunktion jetzt funktioniert. Wir benötigen auch ein Formular, um die Benutzerinformationen zu erfassen. Aus diesem Grund wird dieses Formular einem doppelten Zweck dienen. Dadurch kann sich der Benutzer sowohl anmelden als auch registrieren, um einen neuen Benutzer zu erstellen. Gehen wir dazu zu unserer Seitenleiste und wir können unsere neuen Komponenten erstellen. Gehen Sie zu den Komponenten, und diese ist Signin.vue. Zuerst erstellen wir den Skriptabschnitt , der das Setup verwendet. Oben importieren wir unsere Verwendung von Composable, die wir im vorherigen Video erstellt haben und setzen diese auf @, was die Wurzel unserer Quelle, composable useAuth, ist. Schnappen Sie sich unsere Variablen , die wir beim ersten Mal exportiert haben , wenn Sie sich anmelden. Wir benötigen auch unsere Fehlermeldung. Holen Sie sich diese von oben, useAuth-Funktion. Das muss nur von dort kommen, los geht's. Außerdem eine Formulardatenvariable zum Speichern der E-Mail-Adresse und des Passworts , die der Benutzer eingibt. Wir werden das mit V-Bind mit unserem Formular verknüpfen. Dieser wird als Benutzerdaten bezeichnet . Wir müssen auch die Referenz aus dem Vue-Paket importieren. Richten Sie dies als Objekt ein, das einfach die E-Mail und auch das Passwort enthält . Standardmäßig sind beide leer, da der Benutzer keine Werte eingegeben hat. Dann importiere unseren Ref aus Vue. Gehen Sie zum Vorlagenbereich, um das Formular zu erstellen. Da dieses ein Popup-Modal sein wird sodass wir es mit CSS ein- und ausblenden können, müssen wir ein paar Wrapper erstellen, um dies zu ermöglichen. Das erste wird ein Div mit der Klasse Modal sein, die der Haupt-Wrapper ist. Dann wird auch darin verschachtelt ein zweites Div mit der Klasse modal_content erstellt . Dieses Modal wird in der Kopfzeile umgeschaltet. Was wir bald tun werden, ist, in der Kopfzeile einen Link oben zu erstellen , der dann unser Modal für all diese Inhalte aufruft . Dann wollen wir innerhalb des Modals auch ein kleines Kreuz in der Ecke erstellen, wodurch dieses Modell geschlossen wird. Der Close wird ein Span und die Klasse für unser Styling von close_modal sein. Das Schließen wird eine HTML-Entität sein, das ist das Ampersand, der Hash. Dann 10060 und ein Semikolon. Ein p-Element unten, dieses wird für den Text sein, also melden Sie sich bitte an, um fortzufahren. Füge eine Klasse für unser Styling von modal_text hinzu. Darunter erstellen wir dann ein Formular das sich der Benutzer anmelden kann. Wir brauchen keine Maßnahmen, wir werden das in Zukunft ja regeln. Alles, was wir hier brauchen, ist eine Eingabe für unsere E-Mail, eine Eingabe für das Passwort. Außerdem werden wir zwei Schaltflächen erstellen. Beginnen wir mit unserem E-Mail-Bereich , der als Wrapper-Klasse von form_group ein Div sein wird. Die Formularbezeichnung der E-Mail-Adresse. Die Eingabe für diese E-Mail, da es sich um eine E-Mail handelt, geben wir dieser den E-Mail-Typ, die E-Mail-ID die E-Mail-ID den Platzhaltertext für Geben Sie E-Mail ein. Dann können wir auch das V-Modell verwenden, um den Wert dieser Eingabe an unsere Benutzerdaten oben zu binden . Wir müssen auf UserData.email zugreifen. Da sind wir. Diese Eingabe hat auch die ID der E-Mail. Wir können das mit unserem Label verknüpfen und dann unseren div-Abschnitt kopieren. Dieser ist für das Passwort. Fügen Sie es direkt darunter ein. Die Bezeichnung für das Passwort und für die Eingabe ist auch der Typ für dieses Passwort, die ID ist dieselbe. Der Platzhalter von Enter password. Dies muss es an UserData.Password binden. Dann unsere beiden Knöpfe unten, direkt unter unserem Div. Die erste ist die Anmeldung. Platzieren Sie in einer Schaltfläche mit dem Typ der Schaltfläche den Anmeldetext. Duplizieren Sie dies oder kopieren Sie es und fügen Sie es ein. Jetzt müssen wir diesen Text ändern, um uns anzumelden. Später hat der Benutzer dadurch die Möglichkeit, sich mit demselben Formularmodal anzumelden oder anzumelden. Da sind wir. Wir haben eine neue modale Komponente für die Anmeldung erstellt. Um das zu sehen, müssen wir es genau dort importieren , wo wir es in unserem Projekt haben wollen. Wie bereits erwähnt, befindet sich dies in der Kopfzeile, sodass wir den Text ganz oben sehen können. Gehen wir in die Kopfzeile bis zum Skriptbereich. Tatsächlich haben wir kein Skript, also lasst uns das jetzt erstellen. Skript-Setup. Wir importieren unsere Komponenten, was die Anmeldung ist. Der Dateipfad, da wir uns in den Komponenten befinden , ist einfach. /Anmelden.vue. Platzieren Sie dann die Komponenten oben im Header-Bereich. Sie fragen sich vielleicht, warum wir diesem Header-Bereich ein Anmeldeformular hinzufügen , aber das wird sehr bald klarer werden. Aber wenn wir das vorerst in der Kopfzeile platzieren, behalten wir diese Gruppe zusammen mit den Anmelde- und Anmeldeschaltflächen, die sehr bald oben in der Kopfzeile angezeigt werden. Wir klicken auf eine Schaltfläche, dadurch wird das Formular geöffnet und wir können es mit diesem Kreuz oben schließen . Außerdem sieht es im Moment ein bisschen chaotisch aus, aber das werden wir später mit unserem Styling beheben. Konzentrieren wir uns vorerst auf das Formular und die Registrierung eines Benutzers. Zurück zu den Anmeldekomponenten , die wir gerade erstellt haben. Da wir die Anmeldefunktion in unserem Composable erstellt haben , arbeiten wir mit dieser Anmeldeschaltfläche unten und verknüpfen sie mit einem Click-Listener mit der Funktion . Wir können das Standardverhalten verhindern, das darin besteht, die Seite zu aktualisieren unsere Anmeldefunktion aufzurufen, die die E-Mail und das Passwort akzeptiert, während wir es in unserem Composable einrichten . Beide sind innerhalb des Skripts verfügbar. Wir haben die UserData.email und das Passwort. Lassen Sie uns diese beiden Werte weitergeben. Zuerst ist das UserData.email, dann das UserData.Password. Das sollte alles sein, was wir für die Anmeldefunktion benötigen. Denken Sie daran, dass wir auch die Fehlermeldung importiert haben. Lassen Sie uns dies direkt unter unseren P-Elementen mit dem Text „Bitte melden Sie sich an, um fortzufahren“. Platzieren Sie es innerhalb einer Spanne mit der Klasse error_message. In den doppelten geschweiften Klammern finden Sie unsere Fehlermeldung. Wir haben dort ziemlich viel gemacht. Hoffentlich funktioniert das alles. Lass uns zum Projekt springen, das uns rettet. Wir erstellen einen neuen Benutzer, um fortzufahren. Es ist ein bisschen schwer zu erkennen, aber wir werden das sehr bald im CSS beheben. Geben Sie eine E-Mail-Adresse und ein Passwort ein. Schau dir das an, wenn ich den Mauszeiger darüber bewege, klicke auf die Schaltfläche „Anmelden“. Im Moment sehen wir kein Feedback, daher haben wir derzeit keine Fehlermeldung, was ein gutes Zeichen ist. Wir werden dieses Formular auch automatisch schließen , nachdem wir uns angemeldet und angemeldet haben. Aber vorerst zurück zur Konsole in den Authentifizierungsbereich, aber wir sollten den Benutzer sehen, sich gerade angemeldet hat. 43. Modales Styling: [HINTERGRUND] Wir haben derzeit dieses nicht so gut aussehende Modal, das die Login-Komponenten enthält. In der sign-in.view können wir damit beginnen, ein gewisses Styling hinzuzufügen indem wir auf all diese Klassen abzielen. Die Haupt-Div, die das gesamte Modal umgibt , hat diese Modalklasse. Wir haben dann den modalen Inhalt , der darin enthalten ist. Diese können jetzt verwendet werden , um unser Modal zu stylen und es auch im Rest des Inhalts erscheinen zu lassen. Wir springen ganz nach unten erstellen den Style-Bereich , der auf diese Komponente beschränkt werden soll. Wie wir gesehen haben, hat der Haupt-Wrapper, der all diese Divs umgibt , die Klasse Modal. Was wir hier tun werden, ist, dass wir auf dieses Modal abzielen, das ist der vollständige Wrapper. Wir dehnen diesen Wrapper auf die volle Breite und Höhe der Seite aus. Wir können dann eine dunklere Hintergrundfarbe einstellen damit wir den Inhalt dahinter nicht so gut sehen können. Dann beim nächsten Div, das darin verschachtelt ist, was der modale Inhalt ist. Das wird ein bisschen kleiner sein. Es wird auch eine weiße Hintergrundfarbe haben, damit sich vom gesamten Inhalt abhebt. Zuerst der modale Abschnitt. Das Modal wird eine feste Position haben und es wird sich durch den Index [nicht hörbar] von allen anderen Inhalten abheben [nicht hörbar] von allen anderen Inhalten , sodass es sich um eine hohe Zahl handelt, z. B. 999. Dadurch wird sichergestellt, dass dieser vollständige Hintergrund in allen vorhandenen Inhalten angezeigt wird . Um dieses Modal hervorzuheben, müssen wir auch die Breite auf 100vw festlegen. Die volle Breite des View-Ports. Die Höhe beträgt 100 vh, was 100 Prozent der Höhe des Sichtfensters entspricht. Der Hintergrund, das wäre eine RGBA-Farbe. Was wir für Rot, Grün und Blau tun, ist, dies auf Null zu setzen, was die dunkelschwarze Farbe ist. Wir setzen die Opazität auf 0,9. Es ist leicht durchsichtig. Das ist der Effekt, den wir anstreben. Es ist die dunklere Hintergrundfarbe , die leicht transparent ist. Wir können es auch so positionieren , dass es in der oberen linken Ecke liegt, sodass wir diese Lücke oben nicht haben. Wir können auch die Flexbox verwenden , um den gesamten Inhalt zu zentrieren. Zuallererst ist die Spitze Null. Wir werden dasselbe für die Linke tun. Achte darauf, dass wir keine Lücken am Rand haben. Der Anzeigetyp von Flex. Dann stellen wir sicher, dass der gesamte Inhalt vertikal und horizontal ausgerichtet ist , indem die Eigenschaft justify-content auf center setzen. Das Gleiche gilt für das Ausrichten von Elementen. Es sollte jetzt alles sein, was wir brauchen. Wir haben dieses Modal jetzt in der Mitte. gesamte Inhalt in der Mitte wird auf einem weißen Hintergrund platziert, damit er besser sichtbar ist. Dies hat eine Klasse, wenn wir den modalen Inhalt wiederherstellen. Wählen Sie diese Option, der Hintergrund kann jede gewünschte Farbe haben. Ich werde weißen Rauch verwenden. Es braucht auch ein bisschen Abstand, Polsterung. Wir legen die Breite fest, wir legen den Randradius und zentrieren den gesamten Inhalt mithilfe der Flexbox. Wir setzen die Eigenschaft width auf 80vw. Man erinnere sich an die Polsterung an allen Seiten, um dem Ganzen etwas Abstand zu geben , einen kleinen Randradius. Sagen wir drei Pixel. Außerdem stellen wir den Anzeigetyp auf Flex ein. Der Grund, warum wir das tun werden , ist, dass wir, wenn wir wieder nach oben gehen, diese Flexbox verwenden werden, insbesondere wegen dieser geschlossenen modalen Schaltfläche. Wir wollen, dass das rechts drüben ist und auch der Text, der sich direkt darunter befindet. Aber darauf kommen wir gleich zurück. Aber jetzt muss sich die Flexrichtung in einer Spalte befinden, wodurch der Inhalt auf vertikal zurückgesetzt wird. Die Farbe und der RGB-Wert von 76, 76, 76. Sie können in diesem Text auch sehen dass wir diesen Tech Shadow geerbt haben. Wir können auf diese Weise die Eigenschaft text-shadow überschreiben , indem wir sie auf non setzen. Gehen wir nun zu unseren Knöpfen über. Wir können den modalen Inhalt auswählen. Hier drinnen haben wir unsere beiden Knöpfe. Wir könnten einen einzelnen Cluster hinzufügen, jedes davon, wenn Sie möchten, oder stattdessen könnten wir CSS verwenden, um den modalen Inhalt und die folgende Schaltfläche auszuwählen , die die erste des Typs ist. Dadurch wird die allererste Schaltfläche in unserem modalen Inhalt ausgewählt , nämlich unsere Anmeldung. Wir können diese zwei Leerzeichen mit etwas Abstand auf der rechten Seite verwenden. Wir werden das auch ein bisschen anders aussehen lassen, indem wir die Hintergrundfarbe auf einen RGB-Wert von 163, 204, 163 einstellen. Wie Sie sehen, wurde damit das allererste Auftreten dieser Schaltfläche ausgewählt . Wir haben die Hintergrundfarbe festgelegt und auf der rechten Seite etwas Platz hinzugefügt. Als Nächstes wird für den Hover-Status eine kleine Transformation hinzugefügt . Auch hier schnappen wir uns den modalen Inhalt und wählen alle darin enthaltenen Schaltflächen aus. Wenden Sie dies nur an, wenn der Mauszeiger darüber liegt. Verwandeln. Mach das etwas größer. Wir können Skalierung nutzen. Der Skalenwert von Eins entspricht genau dem, was er derzeit ist. Um es etwas größer zu machen, können wir es auf 1,03 setzen, sodass wir eine schöne Transformation den Mauszeiger über jede dieser Schaltflächen bewegen. Gehen wir als Nächstes nach oben, wo wir diesen engen modalen Abschnitt haben. Das ist die Spanne, die wir gerade hier haben. Denken Sie daran, dass wir den modalen Inhalt so eingestellt haben dass er die Flexbox verwendet. Da das geschlossene Modal ein untergeordnetes Element davon ist, können wir daher ein untergeordnetes Element davon ist, bestimmte Flex-Eigenschaften verwenden. Springt dazu nach unten und schnappt euch das gesamte Modal. Die Flex-Eigenschaft von align-self und der Wert von flex-end. Was das bewirken wird, das gilt nur für dieses aktuelle Element. Auf der linken Seite wird dies der Flex-Start sein. Rechts drüben ist das flexible Ende. Wir waren nur ein Knopf und wir können den Cursor als Zeiger festlegen . Das ist jetzt erledigt. Was ist noch übrig? Wir haben den Text. Genau hier, wir können das in die Mitte stellen. Wenn wir einen Blick darauf werfen, hat dieser Text die Klasse des modalen Unterstrichs. Schnappen Sie sich diesen und setzen Sie align-self so, dass er der Mitte entspricht. Unsere Texte befinden sich jetzt in der Mitte der Seite. Lass uns das einfach verkleinern . Die Breite für diesen Abschnitt ist für die mobile Ansicht in Ordnung. Aber wenn wir das auf die größere Ansicht ausdehnen , die wir gesehen haben, möchten wir wahrscheinlich, dass dieses Modal etwas enger wird. Lassen Sie uns in eine Medienabfrage springen, und wir können das @media machen und werden dies nur anwenden, wenn die Bildschirmgröße 900 Pixel oder breiter ist. Wählen Sie den modalen Inhalt aus. Ich gehe weiter und stelle das auf 40vw ein. Lassen Sie uns das unter 900 Pixeln ausprobieren. Dann würden über 900 Pixel die Größe reduzieren. Jetzt ist es fast soweit, das Letzte, worum wir uns kümmern müssen ist diese Spanne mit der Klasse der Fehlermeldungen. Dafür füge ich einfach einen Beispieltext hinzu . Wir können das sehen. Stellen Sie die Farbe auf Rot und etwas Abstand außerhalb der Medienabfrage ein. Schnapp dir unsere error_message. Die Farbe von 255, 104, 104. Das ist die rote Farbe und es braucht auch nur ein bisschen Abstand auf der linken Seite. Fügen wir nur auf der linken Seite etwas Rand hinzu. Das sieht ziemlich gut aus. Jetzt können wir einfach zur Fehlermeldung zurückkehren. Ich entferne den Beispielinhalt von hier. Da sind wir. Damit ist unser Styling für den Modal nun abgeschlossen. Demnächst werden wir uns ansehen, wie wir dieses Modal schließen können , wenn wir auf dieses X klicken 44. Modal Umschalter: Dieses Modal sieht jetzt viel besser aus. Wir brauchen auch einen Weg, um es zu öffnen und zu schließen. Springen wir dazu zu unserem Composable, nämlich useAuth.js. Dann erstellen wir hier eine neue Variable, die den aktuellen geöffneten Status beibehält. Dies wird ein boolescher Wert sein , den wir als Anfangswert von false einrichten. Dies wird als signInModalOpen bezeichnet , in eine Referenz und den Anfangswert von false eingeschlossen und dann wird unten eine neue Funktion erstellt , die dies auf wahr oder falsch umschaltet. Funktion toggleModal. Alles, was wir hier tun müssen, ist, unseren Variablennamen zu nehmen, der , was wir hier tun müssen, ist, unseren Variablennamen zu nehmen, signInModalOpen ist, und den Wert so zu setzen, dass er dem Gegenteil mit dem Ausrufezeichen entspricht , also signInModalOpen.Value. Wenn dies falsch ist, wird dies als wahr zurückgegeben , und wenn dies wahr ist, wird dies auf das Gegenteil gesetzt , was falsch ist. beide aus dieser Datei zurück , also signInModalOpen, ToggleModal und springen Sie dann zu einer Komponente , die sich anmeldet. Ich muss beide von useAuth ToggleModal und signInModalOpen importieren . Die Konstante signInModalOpen steuert, ob der Benutzer dieses Formular sehen kann, also müssen wir es unserem Wrapper innerhalb dieses Div mit der Klasse der modalen at v if-Anweisungen hinzufügen , was diesem Wert entspricht. Wenn wir das nun speichern, weil der Anfangswert falsch ist, wird es jetzt entfernt. Dann zurück zu unserer Vorlage, wo wir diesen Span haben, der das Modal schließen soll. Wir können auf einen Klick achten, der unsere Funktion toggleModal auslöst. Da wir wissen, wie diese signInModalOpen-Konstante auf den Anfangswert false gesetzt ist auf den Anfangswert , müssen wir, um dieses Modal tatsächlich zu sehen, eine Schaltfläche erstellen, die dies so müssen wir, um dieses Modal tatsächlich zu sehen, eine Schaltfläche erstellen, ändert, dass sie wahr wird. Das Problem, das wir derzeit haben, ist jedoch, dass der gesamte Inhalt innerhalb des Modals standardmäßig ausgeblendet ist. Um diese Schaltfläche tatsächlich zu sehen, müssen wir daher außerhalb dieses Haupt-Divs eine Schaltfläche mit dem Anmeldetext erstellen . Dazu muss auch auf einen Klick geachtet werden , der zu ToggleModal führt. Das Styling für die Klasse von sign_in_btn. Speichern Sie das und wir können das jetzt im Browser ausprobieren. Da ist unsere Anmelde-Schaltfläche. Klicken Sie darauf. Dadurch wird dies nun auf wahr umgestellt und das Modal angezeigt. Klicken Sie auf das Kreuz, damit es nicht mehr angezeigt wird. Um die Sache abzuschließen, bewegen wir diese Schaltfläche in die obere rechte Ecke und wir können diesen Rand auch entfernen. Das ist der untere Teil unseres Style-Bereichs. Schnappen wir uns unsere Anmeldeschaltfläche, also sign_in_btn, alles durch Unterstriche getrennt. Entfernen Sie den Rand mit dem Wert „Keine“. Dann können wir mit der Flexbox ein Linien-Selbst verwenden. Wir haben das auf Flex-End eingestellt. Schieben Sie das jetzt auf die rechte Seite. Um dies besser sichtbar zu machen, können wir die Farbe überschreiben, indem diese hellere Farbe von unseren Eltern erben. Schließlich greifen wir auch auf unsere Anmeldeschaltfläche zu, indem wir den Mauszeiger bewegen, und ändern diese geringfügig in der Farbe. rgb 161.132, 132. Mal sehen, wie das aussieht. Da sind wir. Jetzt wechselt unser Modal zwischen Öffnen und Schließen, was wirklich gut funktioniert. Die nächsten Schritte bestehen darin, den Benutzer tatsächlich anzumelden und ihn auch abzumelden. 45. Anmelden und Out: Unser Anmeldeformular ist so konzipiert , dass es einen doppelten Zweck hat. Wir haben es bereits verwendet, um neue Benutzer anzumelden, aber als Nächstes werden wir es auch verwenden, um bestehende Benutzer anzumelden und die Dinge übersichtlich und übersichtlich zu halten. Wir werden diese Login-Funktion in unsere Verwendung von Composable integrieren. dann off verwenden, haben wir unsere Anmeldungsfunktion , also fügen wir dieser auch eine Anmeldefunktion hinzu. Bevor wir dies tun, können wir auch eine Methode aus Firebase importieren. Vorher mussten wir UserWithEmailandPassword erstellen, aber jetzt brauchen wir SigninWithEmailandPassword. Stellen Sie sicher, dass dies alles ein Koma ist, sodass jedes Wort nach dem ersten mit einem Großbuchstaben beginnt. Dieser ist für die Anmeldung vorhandener Benutzer verantwortlich . Lassen Sie uns eine Funktion erstellen, die wir innerhalb dieser Funktion aufrufen werden. Sobald der Benutzer in diesem Modell auf die Schaltfläche „Anmelden“ klickt . Ein Großteil des Codes wird der Anmeldefunktion ähneln , wir haben den Try-Catch-Block, wir rufen dann unsere spezielle Firebase-Methode und wir müssen auch alle Fehlermeldungen behandeln. Was wir tun werden, ist, den gesamten Anmeldebereich zu kopieren, ich werde ihn als Ausgangspunkt verwenden. Fügen Sie das direkt darunter ein. Die Funktion nennen wir Login. Anstatt Benutzer erstellen zu ändern, ändern wir dies in Anmelden. Melden Sie sich mit E-Mail und Passwort an, wir löschen dann alle Fehlermeldungen, was in Ordnung ist. Nachdem wir uns angemeldet haben, möchten wir auch dieses Modell schließen, also klicken wir auf „Öffnen“. Wir geben unsere Daten ein. Wenn der Anmeldevorgang in Ordnung ist, klicken wir darauf und dann wird er geschlossen. Wir können dies tun, indem wir das Anmeldemodal Open auf Falsch setzen. Das Login-Modal Open ist etwas, das wir bereits ganz oben eingerichtet haben und das steuert die Sichtbarkeit des Modals. Zurück zu unserer Funktion und runter in den Fangbereich. Wir benötigen nicht den ersten Fall einer bereits verwendeten E-Mail , denn wenn wir uns im Benutzer anmelden , sollte die E-Mail bereits registriert sein. Was wir tun werden, ist die Meldung eines falschen Passworts zu erhalten . Wie bei der Anmeldefunktion sind dies alles Nachrichten, sind dies alles Nachrichten die von Firebase zurückgegeben werden. In diesem Fall sagen wir ein falsches Passwort. Nummer 2 ist der Benutzer wurde nicht gefunden. Wir sagen, dass mit dieser E-Mail kein Benutzer gefunden wurde. Ich werde die Standardnachricht beibehalten, falls es sich um weitere Fehler handelt. Kurz bevor wir den Testbereich aufrufen, platzieren wir bedingte Aussagen. Tatsächlich werden wir in zwei Teile teilen und prüfen, ob es keine E-Mail oder kein Passwort gibt. Wenn eine dieser Funktionen fehlt, beenden wir diese Funktion und senden eine Nachricht an den Benutzer zurück. Wenn es keine E-Mail gibt, senden wir eine Erklärung mit der Fehlermeldung zurück . Dieser Wert. Entspricht es bitte einer gültigen E-Mail? Dupliziere das. Die zweite testet, ob das Passwort nicht vorhanden ist. Bitte geben Sie ein gültiges Passwort ein. Dadurch wird nur eine unnötige Methode namens Firebase gestoppt , wenn wir nicht über alle Informationen verfügen, die wir benötigen. Jetzt haben wir die Funktion, einen neuen Benutzer zu erstellen und auch einen bestehenden Benutzer anzumelden. Als Nächstes konzentrieren wir uns darauf, einen Benutzer abzumelden. Zu diesem Zweck bietet Firebase eine Methode namens Abmelden. Importiere das. Dann erstellen wir auch eine neue Funktion, die dies aufrufen wird. Nur eine Schaltfläche über unseren Rücksendeerklärungen. Erstellen Sie eine Funktion namens Logout. Wir rufen unsere Anmeldemethode auf, die auch das Off-Objekt berücksichtigt, damit wir wissen, welcher Benutzer sich abmelden muss. Tatsächlich werden wir das auch in einen Try-and-Catch-Bereich einbauen, damit wir einige Fehler behandeln können. Stellen im Abschnitt try fangen alle Fehler ab und senden dann eine Fehlermeldung an den Benutzer mit dem Wert error.message. Er greift auf das Fehlerobjekt zu , das an den Catch-Bereich übergeben wird, und greift dann auf die Nachrichteneigenschaft zu. Diese beiden neuen Funktionen müssen ebenfalls zurückgegeben werden. Zuerst einloggen, dann abmelden. beide muss innerhalb der Anmeldekomponenten zugegriffen werden . Fügen Sie dazu Komponenten, signin.vue hinzu. Importiere diese oben, also an- und abmelden. Die Login-Funktion, die wir in das Formular einfügen müssen , wir verknüpfen sie mit der Login-Schaltfläche. Wir haben die Anmeldung, die bereits angerufen wird. Wir haben die Anmeldung direkt oben. Mit diesem hören wir den Klick ab, verhindern jegliches Standardverhalten und rufen Login auf. Und dann müssen wir, genau wie bei der Anmeldefunktion, auch die E-Mail und das Passwort, die wir im Benutzerdatenobjekt gespeichert haben, ganz oben weitergeben das Passwort, die wir im Benutzerdatenobjekt gespeichert haben Benutzerdatenobjekt , das ist nur hier. Und das ist an unsere Formulareingaben gebunden. Also die E-Mail, das Passwort, wir klicken auf „Anmelden“. Unsere Funktion heißt dann, gib die E-Mail und auch das Passwort ein. Aber was ist mit der Abmeldefunktion? wo aus werden wir das anrufen? Nun, derzeit haben wir keine Abmelde-Schaltfläche im Modal oder auch im Header. Aber wir haben die Anmeldeschaltfläche in der Ecke. Es wäre nett, den Text hier umzuschalten und nur dann „Anmelden“ zu sagen, wenn der Benutzer tatsächlich abgemeldet ist. Und auch das Gegenteil, wenn wir es verwenden müssen, um uns abzumelden. Machen wir das also oben in der Vorlage, zurück zu den Anmeldekomponenten und oben in der Vorlage haben wir die Schaltfläche Anmelden. Lass uns das duplizieren. Ich klicke auf, sage Abmelden, ändere den Text, um abzumelden. Wir werden sehr bald auf diese Schaltflächen zurückkommen und jeweils nur einen von ihnen anzeigen. Aber jetzt können wir oben unsere Anmelde - und Abmeldeschaltflächen sehen . Aber kurz bevor wir das testen, wie können wir feststellen, ob wir uns überhaupt angemeldet haben? Nun, eine Möglichkeit besteht darin, das Benutzerobjekt an uns zurückzugeben , nachdem wir die Login-Funktion aufgerufen haben. Wenn wir wieder Composable verwenden, können wir innerhalb unserer Anmeldefunktion darauf zugreifen , indem den Rückgabewert der Anmeldemethode mit E-Mail und Passwort speichern . Wir haben gesehen, dass dies in einer Konstante namens user enthalten ist, und direkt darunter können wir dies mit einem Konsolenprotokoll testen. Platzieren Sie es im Benutzer, auf den Browser und öffnen Sie die Entwicklertools. Gehen Sie in die Konsole, melden Sie sich an und geben Sie die E-Mail-Adresse ein , mit der Sie sich angemeldet haben. Dieses Mal klicken wir auf Anmelden. Wir sehen einen Fehler. Entschuldigung, das war ein unerwarteter Fehler, aber wir scheinen die Benutzeranmeldeinformationen zurückzubekommen . Schauen wir uns das mal an. Wir haben den Benutzer, wir haben die E-Mail, das Zugriffstoken. Das scheint alles in Ordnung zu sein, aber wir erhalten hier immer noch eine Fehlermeldung. Also lasst uns einen Blick darauf werfen. Dies ist die Botschaft in den Switch-Anweisungen. Lassen Sie uns innerhalb des Standardabschnitts in einem Konsolenprotokoll ein wenig debuggen . Und hier geben wir das vollständige Fehlerobjekt aus und wir werden sehen, ob wir eine bessere Vorstellung davon bekommen, was vor sich geht. Melde dich erneut an. Loggen Sie sich ein. Also bekommen wir den Fehler, wir haben die Benutzeranmeldeinformationen und da ist unser Fehler. Zuweisungen sind innerhalb der Verwendung von so sign in modal open konstant . Das ist das Problem. Das muss.value sein. Lass uns das noch einmal versuchen. Wir führen die Aktualisierung durch, um sicherzustellen , dass alle Fehler behoben werden. Melden Sie sich an, großartig, die Nachricht ist vollständig gelöscht. Wir haben immer noch unser Benutzerobjekt und das Modal ist geschlossen, da wir es auf false gesetzt haben. Lassen Sie uns die Konsolenprotokolle entfernen. Wir brauchen keines von beiden. Das Zurückgeben dieses Benutzerobjekts funktioniert einwandfrei und dies ist eine Möglichkeit, festzustellen ob der Benutzer angemeldet ist oder nicht. Wir können auch auf Benutzereigenschaften wie E-Mail und ID zugreifen . Aber das ist nur eine Art, Dinge zu tun. Eine andere möglicherweise bessere Methode besteht darin, eine von Firebase bereitgestellte Methode zu verwenden, die wir uns im nächsten Video ansehen Dadurch wird auf Änderungen an unserem angemeldeten Benutzer geachtet. 46. Auth erkennen: Wie im vorherigen Video erwähnt, beim Aufrufen dieser Methode, bei der es sich Anmeldung mit E-Mail und Passwort handelt, ein Wert zurückgegeben. Bei Erfolg ist dieser Wert der Inhalt des Benutzerobjekts, das alle Informationen enthält, die wir benötigen, z. B. die Benutzer-ID und auch die Benutzer-E-Mail. Das ist in Ordnung, aber Firebase bietet auch einen Observer. Dies ist eine empfohlene Methode , um den Benutzer nicht nur zu erreichen, sondern uns auch zu benachrichtigen, wenn Änderungen vorgenommen werden, z. B. wenn sich ein Benutzer abmeldet. Dieser Observer wird in unsere Use-of-Datei importiert Springt also nach oben und innerhalb des Aus-Imports importieren wir auch den geänderten Ein/Aus-Status. Um dies aufzurufen, springen wir zum Ende unserer Datei, direkt über der Retourenerklärung und wir rufen das unten auf. Bei dieser Malmethode müssen wir auch in die Klammern setzen. Wir müssen auch zwei Parameter übergeben . erste ist das Auftreten von Instanzen, darauf haben wir Zugriff. Wir würden unsere Off-Konstanten durch ein Komma trennen. Der nächste Parameter wird eine Funktion sein, die aufgerufen wird, wenn eine Änderung der Benutzer von State festgestellt wurde, d. h. diese Funktion wird aufgerufen, wenn sich der Benutzer an- oder abmeldet. Wenn eine Funktion als zweiten Parameter und ihre Funktion übergeben wird wird auch der aktuelle Benutzer mit einbezogen. Mach das auf. Jetzt haben wir Zugriff auf den aktuell angemeldeten Benutzer. Wir wollen wissen, wo wir in einer bedingten Anweisung stehen. Wir können überprüfen, ob der Benutzer existiert. Wenn ja, stellen wir dann den Benutzer ein. Wenn es nicht existiert, setzen wir den Benutzer auf Null und wo wir das festlegen werden , nun, lassen Sie uns eine Referenz ganz oben in unserer Datei erstellen. Direkt unter dem Rest sagen wir const. Benutzerdaten entsprechen einer Referenz. Standardmäßig setzen wir dies auf Null. Zurück zu unserem Beobachter, wir können eine bedingte Anweisung einfügen und überprüfen, ob der Benutzer existiert. Dies ist ein Benutzer, der an unsere Funktion übergeben wird. Wenn sie angemeldet sind, legen wir den Benutzerdatenwert so fest, dass er diesem Benutzer entspricht. Andernfalls ist der Benutzer nicht angemeldet, sodass wir die Benutzerdaten auf Null zurücksetzen können. Lassen Sie uns dann diese Benutzerdaten aus unserem Composable zurückgeben . Dies wird in verschiedenen Komponenten verwendet. Eine davon können die Anmeldekomponenten sein, um sicherzustellen oben nur die entsprechende Schaltfläche angezeigt wird. Gehen Sie zur Anmeldung, importieren Sie dies oben und gehen Sie dann zu unseren ersten beiden Schaltflächen, die wir hier sehen. Wir möchten die Anmeldeschaltfläche nur anzeigen, wenn keine Benutzerdaten vorhanden sind. VF übergeben wird, wird angezeigt, ob keine Benutzerdaten vorhanden sind. Wenn wir keinen Benutzer haben, bieten wir die Möglichkeit, sich anzumelden, wenn nicht, indem wir VLs weitergeben, bei denen der Benutzer gerade angemeldet ist und er die Möglichkeit hat , sich abzumelden. Das gibt uns jetzt die Möglichkeit, dies richtig zu testen. Aber kurz bevor wir das tatsächlich testen, haben wir jetzt einen Konflikt ohne zwei Variablennamen. Ich werde dieses einfach so ändern, dass es Formulardaten sind. Lassen Sie uns das kopieren und wir verwenden es in unserem Formular. Formulardaten mit Punkt E-Mail, das Gleiche gilt für das Passwort und auch Änderungen in unseren Anmelde- und Anmeldefunktionen. Ich denke, das ist überall. Lassen Sie uns einfach solche Benutzerdaten überprüfen und wir haben diese nur an unseren beiden Standorten. Gut, wir können das jetzt testen indem wir den Benutzer an den Anfang der Vorlage in die geschweiften Klammern setzen, wir sagen Benutzerdaten, die E-Mail, aber denken Sie daran, dass wir manchmal keinen Zugriff auf diese E-Mail haben , da die Benutzerdaten gleich Null sind. Vor dem Fragezeichen stehen, um dies stillschweigend scheitern zu lassen, wenn wir irgendwelche Fehler haben. Falls Sie mit diesem Fragezeichen nicht vertraut sind, handelt es sich um optionale JavaScript-Verkettung. Dadurch wird verhindert, dass ein Fehler angezeigt wird , wenn keine E-Mail vorhanden ist . Dies ist der Fall, wenn der Benutzer abgemeldet ist. Nehmen wir an, das geht zum Browser. Wir sehen, dass wir gerade angemeldet sind, die E-Mail ist ungefähr ganz oben auf Abmelden klicken. Dieses n wurde entfernt, also versuchen wir noch einmal, uns anzumelden. Unsere E-Mail ist jetzt zurückgekommen. Also, um diese Ausgabe aus der Vorlage zu entfernen und alles scheint jetzt korrekt zu funktionieren. Dies ist jetzt das Ende des Authentifizierungsabschnitts. Herzlichen Glückwunsch, dass Sie dieses Stadium erreicht haben. Wir sind noch nicht fertig, obwohl wir unserem Projekt noch viele weitere Funktionen hinzufügen können, die in den kommenden Abschnitten hinzugefügt werden. 47. Die About Ansicht stylen: Demnächst werden wir unserem Projekt den letzten Schliff geben. Wir beginnen mit einigen CSS-Styles für diese About-Ansicht. Im Moment sieht es unter der Kopfzeile nicht besonders gut aus. Gehen wir zu diesem Abschnitt über die Ansicht, der sich in den Ansichten befindet , wählen Sie die obige Ansicht aus, und dann können wir unten einen Stilbereich erstellen. Schauen wir uns an, welche Klassen wir haben. Das ist alles, was wir mit diesem Wrapper haben, der all unsere Inhalte mit der Klasse von ungefähr umhüllt . Dann haben Sie den Intro-Bereich, und dieser Abschnitt enthält unseren Titel und unser Bild. Es ist im Grunde alles über diesem Linkbereich. Beginnen wir mit dieser Klasse von ungefähr. Wir beginnen mit der Einstellung des Displaytyps auf Flex und stellen sicher, dass dies in einer vertikalen Richtung erfolgt, indem wir die Biegerichtung so festlegen, dass sie sich in einer Spalte befindet. die Flexbox und diese vertikale Richtung verwenden, können wir die Elemente dann in der Mitte ausrichten. Richten Sie Elemente in der Mitte aus, wodurch der Inhalt dann in die Mitte der Seite verschoben wird. Dies ist der vollständige Seitenumschlag. Als nächstes haben wir den Intro-Bereich. Der Intro-Bereich enthält, wie wir gerade herausgefunden haben, alles bis auf dieses Bild, das Bild und die beiden obigen Textzeilen ist, also legen wir auch die Flexrichtung so fest dass sie in diesem Bild eine Spalte ist. Die Anzeige- oder Flexrichtung der Spalte. Derzeit werden Sie keinen Unterschied sehen, wenn wir zum Browser wechseln. Das liegt daran, dass wir sehr bald eine Medienabfrage verwenden sehr bald eine Medienabfrage und diese in einer Reihe auf dem größeren Bildschirm erscheinen lassen werden. Derzeit gilt dies für den kleinen Bildschirm, und dann für die größere Bildschirmansicht richten wir dies so ein, dass es sich um eine flexible Zeilenrichtung handelt. Platziert innerhalb der Art-Media-Regel, bei der wir die Mindestbreite auf 900 Pixel festlegen, und dann können wir unseren Intro-Bereich überschreiben , indem die Flexrichtung auf eine Zeile festlegen. Diese erscheinen in einer Reihe. Unterhalb von 900 Pixeln kehrt dies zur Spaltenrichtung zurück. Lass uns jetzt zurück zum Intro-Bereich springen. Wenn wir hier bis zum vollständigen Abschnitt scrollen, haben wir dieses Div mit der Klasse des Info-Text-Wrappers neben dem Bild. Tatsächlich haben wir nur zwei Abschnitte, mit denen wir arbeiten müssen. Wir können die Flexbox wieder verwenden, um sowohl die linke als auch die rechte rechte Seite auf die gleiche Größe einzustellen . Wir müssen auch einige Abstände und Ausrichtungen hinzufügen, und das tun wir direkt außerhalb unserer Medienabfrage. Erstens war das Bild ein Info-Unterstrich-Bild, das auch unseren Info-Text-Wrapper, Info-IMG und auch den Info-Text-Wrapper enthält. Da die Eltern von Intro den Anzeigetyp Flex haben, können die untergeordneten Elemente Flex verwenden, und wir werden beide so einstellen, dass sie versuchen , genau den gleichen Wert anzunehmen. Etwas Polsterung, um beides in einem gewissen Abstand von einem RAM zu haben. Richten Sie den Text mit der Textausrichtung in der Mitte und legen Sie dann die vertikale Ausrichtung fest. Wir können auch Align Self verwenden. Richte dich selbst in die Mitte aus. Auch dies funktioniert, weil die Eltern von Intro diesen Display-Typ Flex haben und Align Self funktioniert, da dies ein untergeordnetes Element der Flexbox ist. Damit ist dieser Abschnitt erledigt. Scrollen wir zurück nach oben. Der nächste ist der Wrapper für weitere Informationen. Dies ist der Abschnitt für all unsere Links und diesen Titel hier. Lassen Sie uns diesen Abschnitt erneut außerhalb der Medienabfrage ansprechen. Weitere Infoverpackung im Display. Auch hier werden wir die Flexbox verwenden. Wir legen die Flexrichtung so fest, dass sie sich in einer Spaltentextzeile in der Mitte befindet. Wir können dies hervorheben, indem wir eine Hintergrundfarbe hinzufügen. Mache das ein bisschen anders als die aktuelle weiße Farbe. Lass uns für Doppel F, Doppel E, D2 entscheiden. Derzeit umgibt dieser Hintergrund nur den Inhalt Um also die volle Breite der Seite zu erreichen, können wir die Breite auf 100 VW ändern. Da haben wir es. Um dem etwas Abstand zu geben, füge einfach ein wenig Polsterung von einem RAM hinzu. Wir können den Hintergrund dieses Abschnitts auch zu stark ändern , also lassen Sie uns das kopieren. Wenn wir zurück zur Quelle gehen, zu den Assets, zur main.css. Tatsächlich können wir einfach den Hintergrund für den Info-Block entfernen und dieser wird nun mit dem Rest des Inhalts übereinstimmen. Lassen Sie uns die Abschnitte und auch die Homepage ausprobieren und sicherstellen, dass Sie keine Probleme haben. Tatsächlich müssen wir hier den Hintergrund hinzufügen. Füge das ein. Da haben wir es. Das funktioniert jetzt für unsere beiden Ansichten. 48. Die Admin ausfüllen: Lassen Sie uns mit dem letzten Schliff im Admin-Bereich fortfahren . Hier drinnen werden wir die Flex-Box benutzen und in der größeren Ansicht neue Pizzen auf die Menükomponenten nebeneinander legen neue Pizzen auf die Menükomponenten . Gehen wir in die Admin-Ansicht, die sich im Ordner Views befindet. Im Moment haben wir nicht viel Inhalt, wir zeigen nur die Überschrift der dritten Ebene und alle drei Komponenten Das ist also der Abschnitt unserer neuen Pizza und auch die Pizza-Komponente. Schneide das aus, wickle sie in ein Div, füge es wieder ein und gib diesem Div die Klasse der Zeile. Erstellen Sie unten den Stilbereich. Wir werden dies auch auf unsere Komponenten übertragen. Wählen Sie die Zeile aus. Im ersten Abschnitt legen wir den Anzeigetyp auf Flex neue Flexrichtung auf Spalte fest. Dies funktioniert auf der kleinen Bildschirmansicht. Ich würde das verkleinern und wir können sie in der Richtung der Spalte sehen . Richten Sie dann eine Medienabfrage mit der Art Media-Regel ein, bei der wir alle hier enthaltenen Stile über 900 Pixel anwenden . Wählen Sie unsere Zeile aus, oder Sie können die Flexrichtung so überschreiben, dass sie eine Zeile ist. Die kleineren Bildschirme werden eine Spalte haben. Die Stretch soll über 900 Pixel betragen. Diese stehen jetzt Seite an Seite. Außerdem müssen diese beiden Komponenten etwas breiter sein, damit sie sich über die gesamte Größe der Seite erstrecken. Wir können uns die neue Pizza und auch die Pizzen in den Komponenten unter Admin ansehen. Dieser hat den Bereich Class of Admin. Wenn wir Pizzen essen gehen, können wir sehen, dass dieser das auch tut. Gehen wir in den Assets-Ordner, in main.css. Führen Sie eine Suche durch und wir haben bereits hier die Referenz zum Admin-Bereich. Stellen Sie den Flex-Wert auf eins ein. Alle diese Abschnitte werden versuchen, den gleichen verfügbaren Speicherplatz zu beanspruchen. Da es sich um einen Admin-Bereich handelt, möchten wir auch einige Maßnahmen einführen, um sicherzustellen , dass nur die richtigen Personen diese Seite sehen können. Vorerst stellen wir sicher, dass sie angemeldet sind indem wir den Benutzer zuerst importieren. Zurück zur Admin-Ansicht, ins Script. Wir müssen unsere Verwendung von Composable importieren , wo wir unsere Benutzerdaten extrahieren und innerhalb einer Konstante speichern können . Denken Sie daran, dass die Benutzerdaten entweder unserem Objekt entsprechen , das alle Benutzerinformationen enthält , oder sie entsprechen Null. Wir verwenden Auth, um unsere Funktion aufzurufen. Daher können Benutzerdaten mit bedingtem Rendern verwendet werden , um den Seiteninhalt ein- und auszublenden. Lassen Sie uns alles in unserer Vorlage aufnehmen, als Wrapper in ein Div einfügen, den Inhalt wieder hinzufügen als Wrapper in ein Div einfügen, den Inhalt wieder hinzufügen und dann das bedingte Rendern mit v-if verwenden, wo wir überprüfen können, ob die Benutzerdaten vorhanden sind. Wenn wir angemeldet sind, sollten wir den gesamten Admin-Bereich sehen können . Wenn nicht, erstelle ein p-Element, das für den Abschnitt v-else bestimmt ist, mit der Nachricht, dass du Administrator sein musst, um diesen Bereich sehen zu können. Da ist unsere Botschaft. Bevor wir uns anmelden, fügen wir diesem Abschnitt einfach etwas Stil hinzu , indem wir eine Klasse von warning_msg hinzufügen. Wir stylen das in nur einer Sekunde. Aber bevor wir das tun, können wir auch eine Willkommensnachricht hinzufügen wenn der Benutzer angemeldet ist. direkt über der Überschrift der Ebene 3 Fügen Sie direkt über der Überschrift der Ebene 3 etwas Text mit der Klasse user_email hinzu. Die Texte sind willkommen. Dann können wir in den doppelten geschweiften Klammern auf unsere Benutzerdaten.email zugreifen. Denken Sie daran, dass die Benutzerdaten nicht immer ein Objekt sein müssen, sie können manchmal Null sein. Daher können wir die optionale JavaScript-Verkettung mit einem Fragezeichen verwenden optionale JavaScript-Verkettung mit , um diese E-Mail nur anzuzeigen, wenn sie gesetzt ist. Schließlich gehen das Styling für unsere Benutzer-E-Mail und die Warnmeldung außerhalb der Medienabfrage, also user_email und auch die warning_msg. Rand von einer Mit einem Rand von einer Bremse wird das Ganze einfach aus der Ecke geschoben. Versuchen wir, uns anzumelden. Leute, der Inhalt ist jetzt sichtbar und wir können oben auch eine Willkommensnachricht sehen. Um auch nur die Überschrift der Ebene 3 zu verschieben, können wir auch den gleichen Betrag an Marge anwenden. Füge das H3 hinzu. Gut, das sieht jetzt viel besser aus. Gehen wir zu unserem Anmelde-Button und klicken Sie darauf. Dies wird jetzt wirksam und unser Admin-Bereich wird aus der Sicht entfernt . 49. Neue Pizzen einschränken: Eine weitere Überprüfung, die wir vornehmen können , besteht darin, festzustellen, ob unser Benutzer angemeldet ist , bevor er der Datenbank eine neue Pizza hinzufügen kann. Derzeit haben wir keine Möglichkeit zu überprüfen, ob der Benutzer ein regulärer Benutzer oder ein Administrator ist. Aber darauf kommen wir später zurück, und wir werden das noch einmal tun, um unsere Benutzerdaten in unsere neuen Pizza-Komponenten zu importieren . Komponenten, Admin, Neue Pizza. Platzieren Sie oben einen Import aus unserem Composable. Importiere, useAuth aus unserer Composable-Datei. Dann können wir die Benutzerdaten extrahieren. Wenn wir nach unten scrollen, können wir sehen, dass wir diese Funktionen bei unserer neuen Pizza zur Datenbank hinzufügen haben . Bevor wir dies hinzufügen, können wir überprüfen , ob der Benutzer angemeldet ist. Wir sagen, wenn es keine Benutzerdaten gibt, und da wir uns im Skript befinden, müssen wir auch auf den Wert zugreifen. Wenn dies falsch ist, d. h., entspricht dies Null, wenn der Benutzer nicht angemeldet ist. Wir können diese Funktion jetzt beenden bevor wir unsere Pizza zur Datenbank hinzufügen. Unter den gegenwärtigen Umständen wird es ziemlich schwierig sein, dies zu testen. Denn wenn wir abgemeldet wären, können wir die Komponente Neue Pizza hinzufügen derzeit nicht sehen , um sie überhaupt auszuprobieren. Als vorübergehende Maßnahme können wir das bedingte Rendern im Admin deaktivieren. Gehe zur Admin-Ansicht. Dann kommentieren wir in den Vorlagen die if-Anweisungen das abschließende Div und müssen auch den Bereich v-else erstellen. Dadurch haben wir jetzt Zugriff auf den Admin-Bereich, wenn wir gerade nicht angemeldet sind. Lassen Sie uns hinzufügen, und jetzt sehen wir jedes Mal, wenn wir versuchen, eine neue Pizza hinzuzufügen , nicht die Meldung , dass diese hinzugefügt wurde, und wir sehen auch nicht, dass dies im Menübereich hinzugefügt wurde. Gut. Nachdem das alles funktioniert, können wir jetzt das bedingte Rendern in der Admin-Ansicht wieder aktivieren. Wir sind nicht angemeldet, daher sollte der gesamte Inhalt verschwinden. Als Nächstes bleiben wir bei diesem Betreff des Benutzerobjekts, indem wir ihn zu unseren Bestellungen hinzufügen. 50. Den Benutzer zu Bestellungen hinzufügen: Die nächsten Schritte beziehen sich alle auf alle Bestellungen. Wir werden sicherstellen, dass das Benutzerobjekt in unserer Bestellung platziert ist , bevor wir es in die Datenbank übertragen. Wir stellen außerdem sicher , dass der Benutzer angemeldet ist , bevor wir eine neue Bestellung erstellen Dazu springen wir in den Warenkorb, zusammensetzbar und in einem Teil eines Benutzers. Composables, useBaskets, und diese Datei enthält die AddNewOrder-Funktion. Aber bevor wir tatsächlich testen können, ob der Benutzer angemeldet ist, müssen wir auch die Benutzerdaten aus unserem Off-Composable importieren . Jedes Composable kann also in ein anderes Composable importiert werden , und das macht diese Dateien wirklich flexibel. Genau wie bei jeder der Komponenten können wir unser Composable importieren. Das ist useAuth, und das ist. /, useAuthF, da sich dies im selben Verzeichnis und dann in unserer Funktion befindet, können wir unsere Benutzerdaten aus unserer useAuth-Funktion extrahieren. Die ID hier ist, wir werden prüfen, ob es einen angemeldeten Benutzer gibt. Wenn ja, fügen wir sie der Bestellung hinzu, wenn nicht, fügen wir etwas Geld für eine Benutzernachricht zum Einloggen hinzu. Und wir müssen diese Nachricht in einer Variablen oder einer Konstante speichern . Also const, signInMessage entspricht einer Referenz mit einer leeren Zeichenfolge als Anfangswert bis hin zur addNewOrder-Funktion und wir können zuerst überprüfen, ob der Benutzer angemeldet ist. Im Abschnitt try sagen wir, ob, userData.Value , öffne die geschweiften Klammern. Wenn das stimmt, wollen wir hier etwas Code ausführen, wenn nicht, erstellen wir einen L-Abschnitt. Der Abschnitt L aktualisiert die SignInMesage, sodass der Benutzer eine Nachricht erhält , in der er aufgefordert wird , sich anzumelden, um eine Bestellung aufzugeben. Dann können wir in unserem IF-Bereich den Bestellbereich bis hin zu unserem Warenkorbtext ohne den ursprünglichen Inhalt kopieren oder ausschneiden den Bestellbereich bis hin zu unserem Warenkorbtext ohne den . Platzieren Sie dies dann in den If-Bereich, damit es nur ausgeführt wird, wenn der Benutzer angemeldet ist. Das ist alles, was wir vorerst innerhalb der Funktion tun müssen Wir können dann unsere SignInMesage zurückgeben, die dann in unsere Menüansicht importiert werden kann. Oben, wir haben bereits Zugriff auf den Warenkorb, sodass wir einfach das Ende unserer Anmeldenachricht eingeben können . Rendern Sie dann diese Nachricht in unserer Vorlage Scrollen Sie also nach unten zur Bestellschaltfläche, die sich im Warenkorbbereich befindet, suchen Sie nach dieser Schaltfläche mit dem Text der Schaltfläche „Platzieren“ und fügen Sie dann direkt darüber ein neues P-Element hinzu, Outputs, unsere SignInMesage. Wir können dies jetzt testen, wenn wir angemeldet und ausgeloggt sind. Da wir gebeten wurden, uns anzumelden, sind wir derzeit nicht angemeldet. Wir können dies mit dem Admin bestätigen. Versuchen wir, eine Bestellung aufzugeben, klicken Sie auf einige Artikel. Da haben wir es. Bitte melden Sie sich an, um eine Bestellung aufzugeben, klicken Sie auf unser Modell und wir können uns anmelden. Melden Sie sich an, klicken Sie erneut auf „Bestellung aufgeben“ und das ist jetzt alles erledigt. Wenn es jedoch funktioniert hat, melden Sie sich ab und löschen die Seite und fügen Sie dann neue Pizzen zur Bestellung hinzu. Auch hier gilt: Wenn wir versuchen, eine Bestellung aufzugeben, wird unsere Nachricht immer noch genau hier angezeigt. Sie haben vielleicht schon früher bemerkt , dass , sobald wir uns über das Modal anmelden diese Nachricht immer noch intakt bleibt, sobald wir uns über das Modal anmelden. Lassen Sie uns das einfach demonstrieren. Wenn wir uns erneut anmelden, klicken Sie auf „Anmelden“ und lassen Sie diese Nachricht unverändert, kann dies beim Benutzer zu Verwirrung führen. Sie denken vielleicht, dass sie sich immer noch anmelden müssen. All dies bedeutet einen Fehler beim Anmeldevorgang. Um dies zu klären, können wir View eine Watch-Methode bereitstellen die eine Callback-Funktion auslöst wenn sich ein reaktiver Zustand wie unser Benutzer ändert . In der Praxis bedeutet dies, dass wir, wenn wir zu unserem oben zusammengestellten Benutzerkorb zurückkehren , unsere Benutzerdaten beobachten und sobald Änderungen vorgenommen werden, können wir eine Rückruffunktion ausführen. Der Watcher wurde automatisch aus dem View-Paket importiert. Wenn Ihre nicht automatisch passiert ist, fügen Sie dies unbedingt hinzu. Jedes Mal, wenn eine Änderung an anderen Benutzerdaten vorgenommen wird, wird die Funktion ausgeführt, sodass wir unseren SignInMessage.Value löschen können , indem wir diesen Wert auf eine leere Zeichenfolge setzen . Gehen wir zurück zu unserer Speisekarte und aktualisieren. Wir können sehen, dass dies alles bei jeder neuen Pizze wirksam wird. Geben Sie eine Bestellung auf. Das ist in Ordnung, denn wir sind angemeldet, melden uns ab, geben eine Bestellung auf, wenn wir abgemeldet sind, und wir sehen unsere Fehlermeldung. Wenn wir jetzt versuchen, uns erneut anzumelden , melden Sie sich an. Sobald dies der Fall ist, entfernen wir die Fehlermeldung, sodass entfernen wir die Fehlermeldung, sodass der Benutzer seine Bestellung aufgeben kann. Gut, jetzt haben wir die letzte Aufgabe, den Benutzer zur Bestellung hinzuzufügen. Gehen wir zurück zum use basket composable und dann zur Funktion addNewOrder. Sie direkt im if-Abschnitt Denken Sie direkt im if-Abschnitt daran, dass die Benutzerdaten, die wir von Firebase zurückerhalten, viele Informationen und viele Eigenschaften enthalten , die wir nicht benötigen. Der Einfachheit halber erstelle ich ein neues Benutzerobjekt und gebe nur die ID und E-Mail-Adresse des Benutzers ein, die ID-Eigenschaft, die wir von UserData.Value.UID und der Benutzer-E-Mail abrufen können. Dieser stammt aus der UserData.Value.Email. Im Folgenden, wenn wir unsere Bestellung erstellen, können wir auch den Benutzer angeben. Speichern wir das jetzt. Versuchen wir, eine neue Bestellung aufzugeben. unsere Bestellung auf, gehen Sie in die Konsole, in unsere Firestore-Datenbank und überprüfen Sie die Bestellungen. Wenn wir nach unten scrollen, können wir sehen, dass die letzte Bestellung, die wir gerade aufgegeben haben, auch unser Benutzerobjekt angehängt ist. 51. Filter und globale Immobilien: Sie bemerken, wenn wir in den Menübereich gehen, beginnen Sie, ein paar Pizzen in unseren Korb zu legen. Wenn wir anfangen, die Menge zu erhöhen, erhöhen wir sie auf sechs und sehen, dass wir eine inkonsistente Formatierung haben. Die erste ist auf eine Dezimalstelle reduziert, die zweite hat zwei Dezimalstellen und die Gesamtsumme der Bestellung ist durcheinander. Wenn Sie in der Vergangenheit Vue Version 2 verwendet haben , haben Sie möglicherweise einen sogenannten Filter verwendet. Ein Filter war verfügbar, um eine einfache Textformatierung zu ermöglichen , und war ideal für die Erstellung von Dingen wie Währungsfiltern. In Vue Version 3 sind Filter jedoch nicht mehr verfügbar. Sie können durch etwas wie eine Methode oder eine berechnete Eigenschaft innerhalb einer Komponente ersetzt werden. Wenn Sie jedoch möchten, dass dies global verfügbar ist, damit wir es wiederverwenden können, können wir auch einen Filter wie das Setup in Vue 3 verwenden , indem wir auf sogenannte globale Eigenschaften zugreifen. Global Properties ist ein Objekt, das wir hinzufügen können das in all unseren Komponenten zur Wiederverwendung verfügbar ist . Achten Sie jedoch darauf, die Dinge nicht zu übertreiben und alles global zugänglich zu machen. Ein Währungsfilter , für den wir mehrere Komponenten verwenden können, ist jedoch ein guter Anwendungsfall. Gehen wir zur main.js und richten das ein. Also direkt unter dem Ort, an dem wir unsere Anwendung erstellen, wir App.Config.Global.Properties aufrufen und dann können wir dieser Eigenschaft einen Namen geben , z. B. dark.Mode, und wir setzen dies auf true. Jetzt können wir in jeder unserer Vorlagen auf die DarkMode-Eigenschaft zugreifen , sodass sie sich wie eine Variable verhält. Gehen wir zur Menüansicht und überall in dieser Vorlage ist alles in Ordnung. Wir geben das innerhalb der doppelten geschweiften Klammern aus, jetzt sehen wir es oben. Dies ist ein wirklich guter Anwendungsfall für einfache Zeichenketten oder solche Booleschen Werte, auf die wir in allen Komponenten zugreifen können. Wir könnten auch so viele davon einrichten, wie wir wollten, wir könnten das einfach duplizieren und wir könnten verschiedene Variablen erstellen. Oder wir könnten auch mehrere Eigenschaften innerhalb eines Objekts hinzufügen . Lassen Sie uns also diesen Abschnitt behalten, aber die Variable entfernen, und wir erstellen ein Objekt namens Filter und dann können wir innerhalb der geschweiften Klammern so viele Filter hinzufügen , wie wir wollten. Für unseren Anwendungsfall erstellen wir eine Funktion namens FormatMoney. FormatMoney muss den Wert annehmen, den Sie formatieren möchten , und dann können wir den neuen Wert zurückgeben , der formatiert ist. Eine einfache Möglichkeit, dies zu tun, besteht darin, Value.toFixed aufzurufen . Dadurch wird dies auf zwei Dezimalstellen korrigiert. Wie bereits erwähnt, können wir hier auch mehrere Eigenschaften hinzufügen, da dies ein Objekt ist . Aber obwohl FormatMoney alles ist was wir brauchen, kehren wir zu unserer Menüansicht zurück und wir können die Preisgestaltung durch unseren Filter ersetzen. Wenn Sie möchten, können Sie dies zum Menübereich hinzufügen , aber derzeit sind unsere Zahlen bereits in die Datenbank aufgenommen , sodass dies immer in Ordnung sein sollte. Das Problem tritt auf, wenn wir mehrere Pizzen hinzufügen und beginnen , Zahlen zu multiplizieren. Was wir tun können, ist in den Warenkorbbereich zu gehen, wir haben die Gesamtsumme der Bestellung , wir haben diesen Preis genau hier, also wollen wir stattdessen diese Multiplikation ausschneiden auf unsere Filters.FormatMoney zugreifen. FormatMoney war eine Funktion, die einen Wert zum Formatieren aufnimmt , also müssen wir auch diesen übergeben, bei dem es sich um die Multiplikation handelt , die wir gerade ausgeschnitten haben. Dies sind die Zeilensummen und wir müssen auch die Gesamtsumme der Bestellung ermitteln. Also schneide das aus, dann greifen wir auf filters.ForfMatMoney zu, füge es wieder ein. Lass uns das ausprobieren. die Menge erhöhen, können Sie sehen, wenn wir über sechs sind, was vorher das Problem war . Diese sind alle korrekt auf zwei Dezimalstellen formatiert. Da es sich bei unserem Filter um ein globales Objekt handelt, können wir ihn auch in anderen Komponenten verwenden denen wir Geldwerte anzeigen. Lass uns in die Komponenten, in den Admin und in die orders.view springen . Spring runter zu unserer Tabelle, genau wie im Korb multiplizieren wir auch den Preis mit der Menge, also können wir hier dasselbe tun, wir können filters.FormatMoney sagen. Gib das zurück, lass uns das im Admin-Bereich ausprobieren. Das sieht auch gut aus, wenn wir uns alle Summen auf der rechten Seite ansehen . Dies ist eine wirklich einfache, aber nützliche Methode, um einfache Aufgaben in unserer App zu wiederholen. Die Währungsformatierung ist jedoch etwas einfach und wir können dies verbessern, indem wir das JavaScript Intl-Objekt verwenden. Dies ist die JavaScript-Internationalisierungs-API , die unter anderem sprachbasierte Zahlen-, Uhrzeit- und Datumsformatierungen bereitstellt . Lassen Sie uns das verbessern, indem wir zu unserer main.js zurückkehren. Wir können unser aktuelles Beispiel direkt nach der Return-Anweisung ersetzen und deklarieren, dass wir ein neues Intl.NumberFormat wollen. NumberFormat ist eine der vielen Methoden, die für die Intl-Objekte verfügbar sind , und dieses NumberFormat ermöglicht eine sprachsensitive Zahlenformatierung , die sich hervorragend für Währungen eignet. Als nächstes fügen Sie innerhalb der Kette bis zum Ende die Formatierungsmethode hinzu, die den Wert aufnimmt , den Sie formatieren möchten. In unserem Fall verwenden wir immer noch diesen Wert, der an die Funktion übergeben wird verwendet die Zahlenformatmethode , und außerdem einige Argumente, um anzugeben welches Gebietsschema wir verwenden, und auch einige Optionen. Zunächst das Gebietsschema des Endbenutzers, das den Formatierungsstil der Währung festlegt . Der Grund, warum wir dies tun wollen, ist, dass die Währung unterschiedlich angezeigt und formatiert in verschiedenen Teilen der Welt unterschiedlich angezeigt und formatiert wird. In einigen Ländern werden beispielsweise Dezimalzahlen oder Kommas als Trennzeichen verwendet . Nehmen wir an, 10.000 könnten so oder so aussehen und auch einige Länder verwenden spezielle Symbole. Wenn wir das gerade speichern und zum Browser wechseln , laden wir es erneut. Wir können sehen, ohne hier verschiedene Optionen hinzuzufügen , standardmäßig steht meine Währung auf zwei Dezimalstellen und verwendet das Dezimalzeichen dazwischen. Aber wenn wir zum Beispiel ein deutsches Gebietsschema hinzugefügt haben, das ein Zeichenkettenwert von de Bindestrich über Groß-/Kleinschreibung DE ist, wird dieses aktualisiert und stattdessen durch ein Komma getrennt, sobald Sie es speichern . Mein Anwendungsfall Ich werde das auf Englisch ändern, Bindestrich GB, wodurch das wieder auf die Dezimalstelle zurückgesetzt werden sollte . Dann durch ein Komma getrennt können wir auch ein Optionsobjekt hinzufügen. In diesem Objekt können wir verschiedene Dinge wie den Stil und die Währungsoptionen übergeben . Der Stil entspricht der Währungszeichenfolge und dann müssen wir auch die Währung übergeben , die Sie formatieren möchten. Das kann jede Währung sein, wie Euro, EUR, wir können das hier sehen, entfernen Sie auch dieses $-Symbol in einem Moment, es kann $ sein, ich denke USD. Wir sind hier, aber meins wird in Pfund angegeben sein. Neben der Währung kann diese auch für andere Dinge verwendet werden. Wir können Maßeinheiten und auch Prozentsätze angeben, aber diese Optionen eignen sich hervorragend für unseren Anwendungsfall . Sie können sie auch mit Ihrer bevorzugten Währung einrichten . Um die Sache abzuschließen, kehren wir zur Punktansicht der Bestellungen zurück. Wir werden das Währungssymbol, das wir fest codiert haben, in das Menü verschieben wir fest codiert haben, in das Menü Dasselbe müssen wir auch hier und auch hier tun. Die Menüansicht, entferne diese. Fast da, jetzt haben wir nur noch den Menübereich , der sich direkt oben befindet. Das ist die Option ohne Preis, wir können das Währungssymbol verschieben, das herausnehmen, auf unsere Filter zugreifen, wir haben FormatMoney , fügen Sie das wieder ein. Jetzt ist unsere Zahlenformatierung wirksam geworden. 52. Realtime: Wenn wir unsere Website aktualisieren, einige Dinge sofort aktualisiert und andere nicht. Wenn wir zum Beispiel zu unserem Admin gehen und versuchen, eine neue Pizza hinzuzufügen, nur die ganzen Dummy-Informationen für den Moment. Klicken Sie auf „Hinzufügen“. Dann wird diese neue Pizza nicht automatisch im Menü aktualisiert, bis wir auf „Aktualisieren“ klicken. Wenn wir jedoch eine Pizza löschen, indem wir auf dieses X klicken, wird der Artikel aus dem Admin entfernt. Warum glaubst du, passiert das? Nun, um das zu sehen, müssen wir uns einige Dateien genauer ansehen . Wenn wir zuerst in den Admin-Bereich der Komponenten springen und dann NewPizza.vue öffnen, haben wir hier diese Funktion, um unserer Datenbank eine neue Pizza hinzuzufügen. Alles, was wir hier tun, ist, einige Überprüfungen durchzuführen und dann unser Dokument zu unserer Datenbank hinzuzufügen, wir aktualisieren die Nachricht. Wenn das dann erfolgreich ist, ist alles gut. Die Pizza wird in der Datenbank gespeichert, aber unsere App wird von Firebase nicht über Ergänzungen informiert . Wenn wir jedoch zu dem übergehen, was wir verwenden, Pizzen zusammensetzbar und nach unserer getPizzas-Funktion suchen. Derzeit müssen wir, nachdem wir unsere Pizza hinzugefügt haben , die Seite aktualisieren , da dadurch erneut unsere GetPizzas-Funktion aufgerufen wird erneut unsere GetPizzas-Funktion aufgerufen somit das Menü auf der rechten Seite aktualisiert wird. Dieser scheint Sinn zu machen, aber denken Sie daran, als wir eine Pizza gelöscht haben, wurde die Anwendung mit den Änderungen aktualisiert. Der Unterschied zwischen diesen beiden Situationen besteht darin, dass wir in unser usePizzas-Composable gehen und nach DeletePizza suchen. Der entscheidende Unterschied besteht darin, dass wir, sobald wir die Pizza gelöscht haben, erneut unsere getPizzas-Funktion aufrufen, die dann die richtigen Informationen an unsere Menükomponenten übergibt . Wenn wir wollten, könnten wir beim Hinzufügen einer neuen Pizza auch wieder unsere Funktion getPizzas aufrufen. Es gibt aber auch eine bessere Methode, nämlich die Verwendung einer Echtzeitfunktion von Firebase. Das bedeutet, dass die App über diese Änderungen informiert wird, sobald wir Änderungen an unserer Datenbank vornehmen. Wenn wir zum Beispiel zum Admin gehen und eine neue Pizza hinzufügen, klicken wir auf die Schaltfläche Hinzufügen und diese wird dann in unsere Datenbank übertragen zum Admin gehen und eine neue Pizza hinzufügen, klicken wir auf die Schaltfläche Hinzufügen und diese wird . Sobald dies erfolgreich war, teilt Firebase unserer Anwendung die aktualisierten Informationen persönlich mit. Dann wird unser Menü automatisch aktualisiert. Wir tun dies mit einer Methode, die auf Snapshot aufgerufen wird. Gehen wir zu allen UsePizza Composable über. Wir können das aus unserem Firestore importieren, also onSnapShot mache ich das in GetPizzas. Was wir jetzt tun werden, ist den gesamten vorhandenen Code, den wir verwenden , um unsere Pizzen aus der Datenbank zu holen, auskommentieren vorhandenen Code, den wir verwenden , um unsere Pizzen aus der Datenbank zu holen und ihn durch die onSnapshot-Methode ersetzen. Bei der Weitergabe von Snapshots und onSnapshot wird auch die Referenz zur Pizzasammlung übernommen, die in dbPizzasRef gespeichert ist. Darauf folgt eine Funktion, die wir jedes Mal ausführen, wenn es eine Änderung in der Datenbank gibt. Die Funktion nimmt die Dokumente auf , die uns zurückgegeben werden. Da wir genau hier mit den Dokumenten, die wir uns zuvor angesehen haben, einen passenden Namen für Dokumente haben, können wir diesen Abschnitt jetzt auskommentieren, herausnehmen und ihn dann in unsere Funktion einfügen . Damit wird genau die gleiche Aktion wie zuvor ausgeführt. Wir bekommen die Dokumente zurück. Wir schauen uns jedes Mal an, wir kreieren ein neues Pizza-Objekt. Dann unten für AllPizzen ref. Sobald dies aktualisiert wird, werden alle Ansichten oder Komponenten aktualisiert , die auf diesen Daten basieren. Also probieren wir das mal im Admin aus. Also springen wir zu Neue Pizza hinzufügen, klicken auf „Hinzufügen“ und sobald wir das tun, wird unsere Anwendung aktualisiert, aber wir sehen ein kleines Problem. Wir erhalten nicht nur die kostenlosen Pizzen, die aus der Datenbank zurückgegeben werden, sondern diese werden auch zu den beiden vorhandenen Pizzen hinzugefügt , die wir bereits haben. Eine einfache Möglichkeit, dies zu tun, besteht darin, unser AllPizzas-Array zu löschen , bevor wir die Informationen zurückerhalten. Wenn wir in den Abschnitt try gehen, können wir sehen, dass wir den vorhandenen Wert bereits gelöscht haben und es sich sicherlich um ein leeres Array handelt. Alles, was wir tun müssen, ist, dies in unseren Snapshot zu verschieben. Speichern wir das und aktualisieren als unsere kostenlosen vorhandenen Pizzen. Fügen wir noch einen hinzu. Klicken Sie auf „Hinzufügen“ und jetzt wird unsere App über alle Änderungen informiert. Vor diesem Hintergrund können wir auch zu unserer DeletePizza-Funktion zurückkehren , wo wir den manuellen Aufruf GetPizzaS entfernen könnten. Ich werde nach unserer DeletePizza-Funktion suchen. Wir müssen GetPizzas nicht mehr manuell aufrufen, das wird für uns erledigt. Wenn wir jetzt auch Pizza löschen und unser Admin jetzt immer noch auf dem Laufenden ist wenn wir eine Pizza entfernen und als Nächstes diesen Vorgang auch für unsere aktuellen Bestellungen wiederholen. 53. Realtime: Um die Bestellungen in Echtzeit zu aktualisieren, folgen Sie dem gleichen Muster wie bei den Pizzen. Zunächst verwenden wir orders.js im Composable. Ganz oben müssen wir unsere eigene Snapshot-Methode importieren. Dann können wir die bestehende get-docs-Methode ersetzen , die wir auf dem Snapshot verwendet haben. Wir gehen runter, um Bestellungen zu holen, und das ist nur hier. Wir benötigen immer noch diese QueryData, die ganz oben stehen. Aber danach werden wir alles kommentieren, von den Dokumenten bis zum Ende unseres Testbereichs. Wir rufen onSnapShot auf, das unsere QueryData aufnimmt . Dann eine Funktion, die nach jeder Änderung ausgeführt wird. Um die Dinge konsistent zu halten und unsere Daten wiederzuverwenden, rufen wir die verfügbaren Daten in den Dokumenten auf. Dann können wir unseren vorhandenen Code auskommentieren, ihn fehl am Platz platzieren in unsere Funktion einfügen. Wir brauchen diese Dokumente nicht mehr. Wir können diese ausschneiden, da sie automatisch an unsere Funktion übergeben werden. Um das gleiche Problem zu vermeiden, das wir mit unseren Pizzen hatten, wenn Sie sich an die Datei „Pizzen verwenden“ erinnern, scrollen wir nach unten, um die Funktion Pizza zu überbeanspruchen. Hier mussten wir den Wert aller Pizzen auf ein leeres Array zurücksetzen , da wir die vorhandenen Pizzen hatten. Nach jedem Update wurde dann der komplette Pizzasatz zu unseren bestehenden Werten hinzugefügt , anstatt ihn zu ersetzen. Machen Sie dasselbe bei use orders und springen Sie in den onSnapShot, springen Sie in den onSnapShot wo wir auf allorders.value zugreifen können. Dies entspricht einem leeren Array. Um dies zu testen, müssen wir unser Projekt in zwei separaten Tabs öffnen . Wir werden diese nebeneinander platzieren. Der Grund, warum wir das tun, ist, dass unsere Bestellungen in den Menükomponenten aufgegeben werden, wir diese jedoch in den Admin-Komponenten betrachten. Wenn wir einfach eine neue Bestellung hinzufügen und dann auf den „Admin“ klicken würden , würden dann automatisch die aktuellen Bestellungen abgerufen. Wir würden die Echtzeitfunktion nicht sehen, aber wir können sie sehen , wenn wir in das Menü gehen und eine neue Bestellung erstellen. Wir haben fünf Bestellungen, klicken Sie auf „Platzieren“. Sie können sofort sehen, dass dadurch bis zu sechs neue Bestellungen hinzukommen. Versuchen wir es noch einmal. Dies steigt auf sieben, und unsere letzte Bestellung ist jetzt unten. 54. Von Updates abmelden: Wenn Sie onSnapShot verwenden, wird kontinuierlich auf unsere Updates gewartet. Möglicherweise benötigen wir jedoch keine Updates mehr. Wir brauchen eine Möglichkeit, diesen Listener zu trennen, um alle Ressourcen freizusetzen. Das zu tun ist relativ einfach. Wenn wir onSnapshot verwenden, wird eine Abmeldemethode rückgängig gemacht, die wir dann in unserer App aufrufen können. Ein Anwendungsfall dafür könnte der Adminbereich sein Wenn wir zum Beispiel nach unten gehen, achten wir gerade unsere aktuellen Bestellungen. Aber sobald wir diese Seite verlassen und eine neue besuchen, müssen wir nicht mehr nach neuen Bestellungen Ausschau halten. Wir können diesen Listener trennen und alle Browserressourcen freisetzen. Verwenden Sie dazu die Datei orders.js, in der wir die Abmeldefunktion in einer Variablen speichern können . Wie bereits erwähnt, gibt onsnapshot eine Abmeldefunktion zurück, die wir in einer Variablen oder Konstanten speichern können. Derzeit besteht das Problem darin, dass diese Konstante für das Abbestellen innerhalb dieser Funktion liegt. Wir brauchen eine Möglichkeit, draußen darauf zuzugreifen. Eine Möglichkeit, dies zu tun, besteht darin, direkt außerhalb von hier einen neuen Schiedsrichter zu erstellen . Wir sagen const, bestellen Sie sich ab. Standardmäßig ist dies eine leere Referenz. Wir können dies mit dem Wert von unsubscribe aktualisieren. Lass uns anfangen, Bestellungen einzuholen. Ganz unten im Tray-Bereich, direkt über dem Catch-Block, können wir uns unseren Ref holen , der von allen anderen abgemeldet wurde, und den Wert so setzen , dass er dem Wert unsubscribe entspricht. Jetzt haben wir eine Funktion zum Abbestellen von der ältesten Version, die wir aufrufen können, wenn wir keine Bestellungen mehr abhören müssen. Wir können dies innerhalb eines Lifecycle-Hooks tun der auf unmounted aufgerufen wird. Wir müssen das aus der Vue-Bibliothek importieren. Wir haben bereits onMounted, das ausgeführt wird, sobald die Komponente in das DOM gemountet ist , und dann onUnmounted, sobald wir es verlassen. Wir werden das in onUnmounted platzieren. Dadurch wird eine Funktion ausgeführt. Wir können das mit einem Konsolen-Log testen in dem nur das Wissen funktioniert und wir sagen unmountet. Greifen Sie dann auf unsere Referenz zu, die vom Punktwert der Bestellung abgemeldet ist. Wir nennen das als Funktion. Sparen Sie beim Admin und wir öffnen die Entwicklertools in der Konsole. Wenn wir diese Komponente dann entfernen indem wir auf eine andere Seite wechseln, sehen wir unser Konsolenprotokoll. Dies sollte auch unsere Abmeldefunktion aufrufen. 55. Neue Benutzer hinzufügen: Unsere Anwendung bietet derzeit die Möglichkeit, neue Benutzer zu registrieren. Aber jeder neue Benutzer, der sich anmeldet, kann auf unsere vollständige Website zugreifen. Dazu gehören alle unsere Seiten und, was noch wichtiger ist, der Admin-Bereich. Wir benötigen eine Möglichkeit, unsere Benutzer so einzurichten, dass nur autorisierte Admin-Benutzer in diesen Bereich gelangen. Firebase bietet eine Lösung, um den Zugriff von Benutzern mithilfe benutzerdefinierter Ansprüche zu kontrollieren . Wenn Sie eine Produktions-App verwenden, ist dies ein großartiger Weg. Weitere Informationen finden Sie mit diesem Link hier. Benutzerdefinierte Ansprüche müssen aus Sicherheitsgründen serverseitig eingerichtet werden. Wir können diese mithilfe von Firebase Cloud Functions einrichten. Leider ist für Cloud-Funktionen ein Upgrade auf einen kostenpflichtigen Tarif erforderlich. Aus diesem Grund werden wir einen anderen Ansatz verwenden. Dies beinhaltet das Einrichten einer Benutzersammlung in unserer Datenbank. Jedes dieser Dokumente wird in unserem Authentifizierungsbereich mit einem Benutzer verknüpft in unserem Authentifizierungsbereich mit einem Benutzer Wir verwenden diese Benutzer-ID als ID des Dokuments, genau wie hier bei unseren Bestellungen. Das bedeutet aber auch, dass wir einen neuen Benutzerdatensatz erstellen können , der einige zusätzliche Informationen enthält. Eine dieser Informationen wird die Rolle des Benutzers sein. In der letzten Version haben wir unsere Pizzen und Bestellungen in der Datei firebase.js erstellt . Wir haben Verweise auf jede dieser Sammlungen erstellt. Dann haben wir diese verwendet, um unsere neuen Dokumente zu erstellen. Verwenden Sie beispielsweise Körbe und wir haben mit der Funktion addNewOrder eine neue Bestellung erstellt. Wir haben die AddDoc Methode verwendet. Dies wird auf diese Referenz übertragen, eine neue Bestellung. Aber das Wichtigste, was Sie bei der Verwendung von AddDoc beachten sollten, ist, dass wir keine neue ID für die Dokumente angeben. Jedes dieser Dokumente hat eine eindeutig generierte ID. Stattdessen möchten wir, dass die Sammlung unseres Benutzers die Dokument-ID enthält, die unserem Benutzer im Authentifizierungsbereich entspricht Benutzer im Authentifizierungsbereich Dies ist dieser hier. Anstatt die AddDoc Methode zu verwenden, werden wir etwas namens SetDoc verwenden. Auf diese Weise können wir einige neue Daten in eine Sammlung übertragen und auch unsere eigene ID festlegen, die wir verwenden möchten. Um dies in unserer Datei firebase.js zu tun, exportieren wir unsere Datenbank, die wir jetzt in der Datei use of.js verwenden können. Spring in dieses Composable. Jetzt können wir die Artikel importieren, die wir benötigen. Als erstes müssen wir das Dokument aus Firebase importieren. Außerdem war die Methode, über die wir gerade gesprochen haben, setDoc. Dies ist bei Firebase/Firestore erhältlich. Wir müssen diese Referenz auch in unsere Datenbank importieren. Importieren Sie DB aus unserer benutzerdefinierten Firebase-Datei. Dies wird die Methode sein, mit der wir unsere neuen Dokumente erstellen. Wir benötigen aber auch eine Möglichkeit, auf die aktuelle ID des angemeldeten Benutzers zuzugreifen . Gehen wir zur Anmeldefunktion, die es nur hier gibt. Wenn wir hier mit dieser Methode einen neuen Benutzer erstellen, wird ein Objekt zurückgegeben. Wir können das Benutzereigentum destrukturieren , um auf die Daten zuzugreifen , die wir benötigen. Wir können diese Daten direkt unten verwenden, um ein neues Benutzerobjekt zu erstellen. Const, useObject. Wir können unserem Benutzer einige zusätzliche Informationen hinzufügen, die in der Datenbank gespeichert werden. Zuerst eine Eigenschaft namens createAt, die neuen JavaScript-Daten entspricht. Wir benötigen dieses Datum nicht wirklich für unser Projekt, aber es ist immer nützlich, es hinzuzufügen falls wir es in Zukunft benötigen. Wir können auch die E-Mail-Adresse des Benutzers speichern, die wir auf unsere userobject.email zugreifen können. Dann ist der wichtigste Teil eine neue Eigenschaft namens isAdmin. Zu Beginn setzen wir alle neuen Benutzer so, dass die Eigenschaft isAdmin den Wert false hat. Ebenfalls immer noch in diesem Testbereich, sobald der Benutzer angemeldet hat und dies erfolgreich war, schließen wir auch das Modal, indem den offenen Wert für die Anmeldung auf false setzen. Verarbeitung. Greifen Sie auf den Wert zu und setzen Sie ihn auf false. Direkt unter unserem Benutzerobjekt können wir dann eine neue Konstante namens NewDoc erstellen. Dies wird das neue Dokument sein, in dem wir die Firebase mithilfe der Doc-Methode pushen werden. Die Doc-Methode muss es in einen Verweis auf unsere Datenbank aufnehmen , die wir gerade importiert haben. Dann durch ein Komma getrennt, der Sammlungsname der Benutzer. Der dritte Wert ist die Benutzer-ID , die Sie beim Erstellen dieser Dokumente verwenden möchten. Dies ist von unserem Benutzer aus zugänglich. Greifen Sie auf die UID-Eigenschaft zu. Um dies dann auf Firebase zu übertragen, können wir auf SetDoc warten. Die Dokumente, das ist eine Referenz, die wir gerade hier erstellt haben. Übergeben Sie dies als ersten Wert. Dann sind der zweite Wert die Daten für unseren Datensatz, die innerhalb des Benutzerobjekts gespeichert sind. Nur um zu verdeutlichen, was wir hier tun: Wenn sich ein neuer Benutzer anmeldet, wird dieser neue Benutzer zuerst in diesem Authentifizierungsbereich erstellt. Dann erstellen wir ein neues Benutzerobjekt mit dieser ID. Installieren Sie diese zusätzlichen Informationen in der Datenbank. Aber kurz bevor wir das testen, müssen wir diese Benutzer zuerst löschen , da wir bereits einige Benutzer im Authentifizierungsbereich angemeldet haben, der nicht mit unserer Datenbank verknüpft ist . Lass uns dieses Konto verlassen. Auch dieser. Lösche alle vorhandenen Benutzer. Das sollte nicht alles sein, was wir brauchen. Wir haben das neue Benutzerobjekt. Wir haben, dass unsere Dokumente im Dokument enthalten waren. Wir sollten unsere gesamte Importdatenbank haben. Wir müssen nur sicherstellen, dass dies auch ausgenutzt wird. Gehen wir zurück zu unserem Projekt. Erstellen Sie einen neuen Benutzer und klicken Sie auf Anmelden. Zu Firebase und dem Authentifizierungsbereich haben wir unseren neuen Benutzer. Beachten Sie die Benutzer-ID, die mit 08 beginnt. Deine wird natürlich anders sein. Gehen Sie als Sammlung des Benutzers in die Datenbank, die mit derselben Dokumentreferenz beginnt. Das wird nützlich sein, denn wenn wir unseren Benutzer zum ersten Mal authentifizieren, können wir auf die Benutzer-ID zugreifen. Dann können wir auch auf die Eigenschaft isAdmin zugreifen. Um zu beginnen, klicken wir auf das Feld isAdmin. Änderungen entsprechen der Wahrheit. Wir haben mindestens einen Admin-Benutzer. Dann erstellen wir einen zweiten Benutzer dessen isAdmin-Wert auf false gesetzt ist. Melden Sie sich wieder an und erstellen Sie ein neues Konto. Melde dieses an, da ist unser zweites Konto, bei dem isAdmin auf false gesetzt ist. Jetzt haben wir zwei Benutzer mit unterschiedlichen Zugriffsebenen. Wir verwenden dies in unserer App, um nur Admin-Benutzern den Zugang zu unserem Admin-Bereich zu ermöglichen . 56. Abrufen von Admin: Der erste Schritt, um nur einem Administrator Zugriff auf unsere App zu gewähren , besteht darin, den aktuellen Benutzer aus unserer Datenbank abzurufen und überprüfen, ob die isAdmin-Eigenschaft auf true gesetzt ist. Da wir Benutzer abrufen werden, können wir in unserer Firebase-Datei einen Verweis auf die Datenbanksammlung erstellen . Genau wie bei Pizzen und Bestellungen erstellen wir dbusersRef, das auf unsere Benutzersammlung verweist. Sag das und dann in die Datei useAuth.js. Dieser Tipp ist unser Import, und wir werden ihn sehr bald nutzen. Dann erstellen wir innerhalb unserer Funktion eine neue Referenz namens userIsAdmin, die zunächst auf den Wert false gesetzt wird. Dieser Standardwert von false wird aktualisiert, nachdem wir unsere Funktion erstellt haben. Diese Funktion erfasst unsere Benutzerdaten, die ID des angemeldeten Benutzers, ruft den Datensatz aus unserer Datenbank ab und prüft, ob die IsAdmin-Eigenschaft auf true gesetzt ist. Lassen Sie uns eine asynchrone Funktion namens checkAdminRole erstellen . Erstellen Sie zuerst eine IS-Anweisung, in der wir überprüfen können , ob unsere Benutzerdaten, das sind diese hier, .value, wir können überprüfen, ob sie die UID haben. Wir fügen auch das Fragezeichen hinzu, da dieser Wert manchmal Null ist. Dann können wir drinnen die aktuellen Benutzerdetails aus der Datenbank abrufen . Wir können dies tun, indem wir ein Dokument mit der Doc-Funktion erstellen , auf die wir zugreifen möchten. Zuerst greifen wir auf die dbusersRef zu, die unsere Sammlung ist, dann können wir über die ID auf einen bestimmten Datensatz zugreifen. Diese ID ist von unserem UserData.Value.UID abrufbar. Kopieren Sie das, fügen Sie das ein. Es befindet sich innerhalb einer Konstante namens DocRef. Um diese Informationen dann tatsächlich abzurufen , können wir auf eine Funktion namens getDoc warten. Wir geben unsere Dokumentreferenz innerhalb einer Konstante namens user weiter. Dann müssen wir zwei Schecks innerhalb einer IS-Anweisung erstellen. Greifen Sie zunächst auf unsere Methode user.exists zu, diese Exists-Methode ist für den Benutzer verfügbar, und überprüfen Sie, ob ein Dokument gefunden wurde Dann führen wir mit dem doppelten Ampersand eine zweite Überprüfung durch, um zu überprüfen, ob das Feld isAdmin auf True gesetzt ist. Wir können dies auch für das Benutzerobjekt tun, das über eine Methode namens data verfügt , mit der wir auf jede dieser Eigenschaften zugreifen können, also data.isAdmin. Wenn diese beiden Bedingungen zutreffen, können wir dann unseren UserIsAdmin.Value so aktualisieren , dass er gleich wahr ist. Wenn nicht, setzen wir in einer Else-Anweisung userIsAdmin auf den gleichen Wert wie false, also fügen Sie dies ein. Setzen Sie dies auf Falsch. Wir müssen auch die getDoc Methode aus Firestore importieren . Unser UserIsAdmin-Wert wird in anderen Dateien und Komponenten verwendet , um zu überprüfen, ob der Zugriff zulässig ist. Wir müssen das nicht unten zurückgeben . Denken Sie jedoch daran, dass wir hier nur eine neue Funktion erstellt haben. Wir haben es noch nicht aufgerufen , um den Code darin auszuführen. Der Ort, an dem dieser Code ausgeführt werden soll, befindet sich im AuthObserver. Scrollen Sie nach unten zu onAuthStateChanged und der Code hier wird jedes Mal ausgeführt, wenn ein Benutzerwechsel festgestellt wurde. Wenn ich Zugriff auf einen Benutzer habe, wenn jemand angemeldet ist, überprüfen wir dann die Admin-Rolle. Wenn sich der Benutzer jedoch abmeldet, möchten wir userIsAdmin.value so aktualisieren , dass es gleich false ist. Nachdem das alles erledigt ist, gehen wir zu unserer Admin-Ansicht. Wir können auf UserIsAdmin zugreifen und denken Sie daran, dass dieser aktuelle Check für unseren Admin-Bereich nur überprüft, ob der Benutzer angemeldet ist. Es wird nicht wirklich überprüft, ob sie Zugriff auf diese Seite haben. Wir können dies verbessern, indem wir dies auf userIsAdmin umstellen. Lass uns das ausprobieren. Melden wir uns im Admin-Bereich an. Zuallererst ist dies die eingegebene E-Mail, bei der es sich nicht um einen Administrator handelt. Fügen Sie die E-Mail-Adresse und das Passwort hinzu und melden Sie sich an. Gut. Dadurch erhalten wir keinen Zugriff auf den Admin-Bereich. Melden Sie sich ab und melden Sie sich mit dem Admin-Benutzer an. Melde dich an und sobald das passiert, überprüfen wir die Admin-Rolle, was derzeit zutrifft. Dadurch wird dann unser Variablenwert von userIsAdmin aktualisiert, wodurch wir Zugriff haben. Wir können auf Abmelden klicken. Sobald dies geschieht, wird die AuthStateChanged-Funktion ausgeführt Stellen Sie unseren UserIsAdmin auf false ein verbergen Sie unseren Admin-Bereich vor dem Sichtfeld. 57. Aktualisierung regulärer Benutzer für Admin Teil 1: Wenn wir dieses Projekt abgeschlossen haben, übergeben wir es dem Kunden. Das Letzte, was wir tun wollen, ist, dass der Kunde in unsere Datenbank geht und diese Admin-Eigenschaft jedes Mal aktualisiert , wenn Sie einen neuen Benutzer hinzufügen oder den Administratorzugriff zu entfernen , falls ein Mitarbeiter das Unternehmen verlässt. Um dies zu verbessern, werden wir einen neuen Abschnitt im Adminbereich erstellen , der es einem bestehenden Admin-Benutzer ermöglicht, diesen zu aktualisieren. Dieser Prozess beinhaltet die Erstellung einer neuen Admin-Komponente, in der der Admin-Benutzer eine E-Mail-Adresse des Benutzers eingeben kann , den wir aktualisieren möchten. Da dies auch in diesem Admin-Bereich platziert wird, bedeutet dies auch, dass nur Admin-Benutzer dieses Update durchführen können. Sobald wir per E-Mail nach dem Benutzer gesucht haben, wird eine Meldung angezeigt, in der angegeben wird, ob der Benutzer derzeit ein Administrator ist oder nicht. Schließlich haben wir eine Schaltfläche, mit der diese Administratorrolle dann auf wahr oder falsch umgestellt wird. Lassen Sie uns zunächst unsere neue Komponente im Komponentenverzeichnis und in der neuen Admin-Datei erstellen. Wir nennen das ToggleAdmin.vue. Dann erstellen wir unsere Grundstruktur. Unsere Grundstruktur wird den anderen Admin-Komponenten ähneln. Wir können in jeden dieser anderen Admin-Bereiche gehen und bis zur Vorlage gehen. Lassen Sie uns diese Vorlagenabschnitte kopieren uns dieselbe Struktur geben. Füge das in unser Toggle.Admin ein. Lassen Sie uns das vereinfachen. Wir können das Formular verschieben, also schneiden Sie alles vom abschließenden Formular bis zum Tag des öffnenden Formulars zu. Wir behalten dieselben Klassen für das Styling bei, aber nur die Level-3-Überschrift lautet Administratorrechte einschalten“. Wir müssen auch diesen Variablennamen aktualisieren. Wir haben das noch nicht erstellt, aber dieses wird ShowToggleAdmin heißen. Mach diesen Kamelkoffer. Wir werden dies auch an den anderen Orten verwenden und es im Index des Skriptabschnitts erstellen . Dabei wird auch das Script-Setup verwendet. Sie müssen die Referenz aus der Ansicht importieren und unsere Konstante showToggleAdmin erstellen. Wickeln Sie dies in eine Referenz mit dem Standardwert true ein. Das bedeutet, dass wir standardmäßig den Abschnitt im Adminbereich sehen können und dann auf die Schaltfläche Ausblenden klicken können wenn wir diesen Abschnitt nicht sehen müssen. Gehen Sie zu den Ansichten und in die Admin-Ansicht, um dies zu importieren. Lassen Sie uns diesen duplizieren. Das ist ToggleAdmin. Das ist auch ToggleAdmin. Platzieren Sie dies direkt unter unseren Bestellungen. Gehen Sie zur Admin-Seite, ganz unten, wo wir andere Komponenten sehen können. Zurück zu diesem ToggleAdmin.vue. Was wir tun werden, ist zwei neue Abschnitte zu erstellen. Zuerst wird es ein Formular geben , in dem wir einen Benutzer finden können , indem wir die E-Mail-Adresse des Benutzers eingeben. Wir brauchen eine Konstante , um diese E-Mail zu speichern. Dies könnte ref sein, also const email, und der Anfangswert wird eine Zeichenfolge sein. Wir wollen nur diesen Inhalt zeigen , den wir jetzt platzieren werden, wenn showToggleAdmin gleich true ist. Erstellen Sie unter der Kopfzeile ein neues Div. Wir können bedingtes Rendern mit dem if verwenden. Wir zeigen diesen Abschnitt nur wenn showToggleAdmin gleich true ist. Jetzt Formular platzieren. Dieses Formular wird ziemlich einfach sein. Wir erstellen ein Div, die Klasse von form_group. Dann fügen wir hier ein Label und auch eine E-Mail-Eingabe hinzu, damit der Benutzer per E-Mail suchen kann. Zuerst das Etikett oder die E-Mail mit einem Text, um den Benutzer per E-Mail zu finden. Die Eingabe. Dies wird den Typ der E-Mail-ID haben. Senden Sie auch einen Platzhalter-Textwert per E-Mail oder geben Sie E-Mail ein. Dann können wir das V-Modell verwenden, das den Wert an unsere E-Mail oben bindet . Als Nächstes platzieren wir direkt unter diesem Div-Abschnitt auch eine Schaltfläche, platzieren wir direkt unter diesem Div-Abschnitt auch mit der Sie dieses Formular absenden können. Die Art der Schaltfläche, dadurch wird dann eine Funktion ausgelöst, um unseren Benutzer zu finden. Wir haben diese Funktion noch nicht erstellt, aber wir werden sie vorerst hinzufügen. [unhörbar] Ein Klick verhindert das Standardverhalten und löst die Funktion aus, die bald den Aufruf findUser erstellen wird. FindUser muss auch diese E-Mail-Adresse eingeben, die wir hier gespeichert haben. Geben Sie einen Text von find user ein. Dann ist die gesamte Funktionalität dafür vorbei und ich werde off composable verwenden. Oben erstellen wir als Erstes zwei weitere Konstanten. Die erste wird für eine Nachricht sein. Wir nennen das die ToggleAdminMessage, die zunächst ref und eine leere Zeichenfolge sowie eine zweite Konstante namens selectedUser verwendet zunächst ref und eine leere Zeichenfolge . Dies wird ein Container für einen Benutzer sein, nach dem wir suchen. Wir setzen dies auf ref und den Anfangswert auf Null. Diese ToggleAdminMessage enthält den Wert , den wir angeben, ob der Benutzer ein Administrator ist oder nicht, oder ob er mit der angegebenen E-Mail nicht gefunden werden kann. Lassen Sie uns unsere Funktion erstellen, also async mit dem Namen findUser. Verwenden wir die E-Mail-Adresse des Benutzers, nach dem wir suchen möchten. Platzieren eines Try-Abschnitts und eines Catches als Fehler. Dann können wir uns im Testbereich an die Arbeit machen. Das erste, was wir hier tun werden, ist, alle Nachrichten zu löschen, die wir möglicherweise zuvor erhalten haben. Dies wird in ToggleAdMinMessage.Value gespeichert. Setze dies auf eine leere Zeichenfolge. Dann erstellen wir auch eine bedingte Anweisung und diese überprüft, ob der Benutzer Administrator ist. Denken Sie daran, dass wir diese Eigenschaft derzeit hier festgelegt haben. Wenn dies gleich false ist, darf der Benutzer die Admin-Eigenschaft nicht aktualisieren, sodass wir diese Funktion beenden. Erinnern Sie sich an die Dinge, die wir dazu im Admin-Bereich aufrufen. Dieser Abschnitt sollte sowieso bereits geschützt sein, aber dies ist nur eine zusätzliche Überprüfung für alle Fälle. Als Nächstes verwenden wir die Firebase-Abfragemethode. Auf diese Weise können wir nach einem bestimmten Datensatz suchen, wenn eine einzelne Person die Sammlung des Benutzers ist , die in dbUsersRef gespeichert ist. Dann filtern wir das mit der Where-Methode heraus. Wir möchten die E-Mail-Eigenschaft überprüfen und prüfen, ob diese mit einer bestimmten E-Mail-Adresse übereinstimmt. Diese E-Mail-Adresse, die wir überprüfen möchten, ist die, die an alle Funktionen auf diesem Ende übergeben wird. Dadurch werden alle unsere Benutzer mit der E-Mail-Eigenschaft verglichen ist die, die an alle Funktionen auf diesem Ende übergeben , die an alle Funktionen auf diesem Ende wird. Dadurch werden alle unsere Benutzer mit der und geprüft, ob es die E-Mail-Adresse handelt, die von unserem Formular eingegeben wurde . Was ist in einer Konstante namens Abfragedaten enthalten. Dann können wir eine Anfrage von Firebase stellen , indem wir auf GetDocs warten. Analysiert die Abfragedaten und speichert diese dann in einer Konstante namens user. Dieser Benutzer wird der von Firebase zurückgegebene Wert sein. Mit diesem Benutzerobjekt können wir dann ein neues Benutzerobjekt erstellen, können wir dann ein neues Benutzerobjekt erstellen nur die Eigenschaften enthält, die wir benötigen. Denken Sie daran, wenn wir uns diese Objekte angesehen haben, die wir in der Vergangenheit von Firebase erhalten haben, erhalten wir viele Informationen, und die meisten davon benötigen wir nicht. Wir erstellen ein neues Benutzerobjekt, platzieren es in der ID, die wir von unserem Benutzer, den Dokumenten, abrufen können , und GetDocs wird mehrere Dokumente zurückgeben, aber wir sollten immer nur einen Benutzer mit einer eindeutigen E-Mail haben . Aus diesem Grund können wir das erste Dokument mit der Indexnummer 0 auswählen . Wählen Sie die ID aus und lassen Sie uns diese dann zweimal duplizieren. Die zweite Eigenschaft ist die E-Mail. Ändere beide. Die dritte Eigenschaft , die wir benötigen, ist isAdmin. Sogar als einfacheres Benutzerobjekt, das nur die Eigenschaften enthält, die wir benötigen. Wir können dann unseren ausgewählten Benutzer so einstellen , dass er diesem Objekt entspricht. Merken.value. Dies ist der Fall, wenn das alles erfolgreich ist. Wenn nicht, können wir den Wert selectedUser.value so aktualisieren , dass er gleich Null ist. Aktualisieren Sie dann auch unseren ToggleAdMinMessage-Wert so , dass er einer Zeichenfolge entspricht. Sie können hier jede Nachricht einfügen, die Sie möchten, aber ich werde sagen, dass mit dieser E-Mail kein Benutzer gefunden wurde. Wir müssen diese Methoden auch aus Firebase importieren , die wir einfach verwenden werden. Wir haben die Anfrage, wir haben wo, wir haben GetDocs. Tatsächlich müssen wir kurz bevor wir dies tun, auch die Datenmethode vor der E-Mail aufrufen. Das Gleiche vor isAdmin. Diese Funktion extrahiert die Eigenschaften wir benötigen, aus jedem Dokument . Auf diesen Importen aus unserem Firestore haben wir also ganz oben GetDocs, die Abfrage und auch wo. Dann können wir schließlich unten in der Return-Anweisung unsere Funktion, die findUser war, den Wert selectedUser und auch die Nachricht, die toggleAdminMessage war, zurückgeben den Wert selectedUser und auch die . Da sind wir. Speichern Sie diese Datei und wir sind gerade fertig. Als Nächstes importieren wir diese und verwenden in den ToggleAdminComponents. 58. Aktualisierung regulärer Benutzer für Admin Teil 2: Zuvor haben wir eine Funktion erstellt um einen Benutzer anhand seiner E-Mail-Adresse zu finden, und dann speichern wir diesen Wert in dieser ausgewählten Benutzerkonstante. Wir gehen jetzt zur Komponente ToggleAdmin.vue, um diese ganz oben zu importieren. Wir importieren UseAuth, und das ist aus dem Dateipfad von @/composable/useAuth. Dann extrahieren und speichern wir diese Rückgabewerte innerhalb einer Konstante. Wir brauchen also find, wir brauchen den selectedUser, und auch toggleAdminMessage entspricht useAuth, rufen Sie diese Funktion auf und scrollen Sie dann nach unten. Direkt unter diesem Formularbereich erstellen wir einen zweiten Abschnitt, in dem der Benutzer angezeigt wird , falls einer gefunden wurde. Es wird auch eine Meldung enthalten, die anzeigt, ob ein Benutzer derzeit ein Administrator ist oder nicht, und dann eine Schaltfläche, um eine Funktion auszulösen , mit der die Admin-Eigenschaft umgeschaltet werden kann. Erstellen Sie also div für diesen Abschnitt. Wir wollen das if verwenden, um diesen Abschnitt nur anzuzeigen, wenn der SelectedUser einer Klasse von selected_user entspricht. Zum P-Element, in dem ich die Admin-Nachricht ausgeben kann. Das war toggleAdminMessage und dann ein zweites p-Element direkt darunter. Dieser wird eine Textzeichenfolge enthalten, in der der Wert des Benutzers derzeit als Administrator oder nicht als Administrator festgelegt ist. Wir sagen user und geben es dann an, selectedUser.email derzeit als gesetzt ist, und dann wollen wir dynamisch festlegen, ob das ist oder falsch. Wir können dies tun indem wir unseren SelectedUser.isAdmin auswählen. Mit dem ternären JavaScript-Operator können wir den Text von admin anzeigen, falls dies zutrifft. Wenn nicht, ein Text von not admin. Das letzte Element in diesem Abschnitt ist eine Schaltfläche. Diese Schaltfläche ist jetzt für einen Klick, verhindern Sie die Standardeinstellung. Dadurch wird eine Funktion namens ToggleAdmin ausgelöst, die wir noch nicht erstellt haben . Wir werden gleich auf diese Funktion zurückkommen , aber vorerst ist der Text von Klicken Sie hier, um die Admin-Einstellungen umzuschalten. Speichern Sie das und dann können wir zu unserer Verwendung von Composable zurückkehren , wo wir diese ToggleAdmin-Funktion erstellen können. Async, toggleAdmin, erstelle den Try- und den Catch-Block. Wie wir es zuvor getan haben, beginnen wir mit einer if-Anweisung, um zu überprüfen, ob der Benutzer der Admin-Wert ist. Wenn nicht, werden wir diese Funktion beenden , da sie nicht autorisiert sind. Dies wird aus UserIsAdmin.Value gefunden. Das ist falsch, wir geben diese Funktion zurück , bevor wir Änderungen vornehmen. Jetzt müssen wir einen Verweis auf ein bestimmtes Dokument erstellen , das wir aktualisieren möchten, dies in einer Konstante namens DocRef speichern. Dann können wir das mit dieser Firebase-Doc-Methode konstruieren. Es beinhaltet einen Verweis auf unsere Datenbank, wir möchten auf die Sammlung des Benutzers verweisen. Dann wollen wir endlich ein Dokument anhand der ID finden. Wir können dies tun, indem wir unseren SelectedUser schnappen und auf die ID-Eigenschaft zugreifen. Also selectedUser.value.id. Denken Sie daran, dass wir mit diesem Dokument die IsAdmin-Eigenschaft aktualisieren möchten , sodass sie das Gegenteil von dem ist die IsAdmin-Eigenschaft , was sie derzeit ist. Dafür können wir eine Firebase-Methode namens UpdateDoc schreiben. Wir werden die obige Dokumentreferenz weitergeben. Dann können wir als Objekt genau festlegen , welche Eigenschaften wir aktualisieren möchten. Wir möchten nur die Eigenschaft isAdmin aktualisieren das Gegenteil von dem ist, was sie derzeit ist. Wir könnten dies tun, indem wir auf unsere Eigenschaft selectedUser.value.isAdmin zugreifen und diese auf das Gegenteil von dem setzen, was sie derzeit ist. Sobald wir unser Firebase-Dokument aktualisiert haben, rufen wir FindUser erneut auf, wodurch dann unsere Benutzerdaten abgerufen und festgelegt und alle Komponenten aktualisiert werden. Wir müssen auch diese E-Mail-Adresse des Benutzers übergeben, die in selectedUser.value.email enthalten sein wird. Wir platzieren es einfach in einem einfachen Konsolenprotokoll im Fehlerbereich. Da wir die UpdateDoc Methode von Firebase verwendet haben, müssen wir diese außerdem oben importieren und dann die Funktion toggleAdmin unten zurückgeben . Zurück zur ToggleAdmin.view, wo wir diese Funktion tatsächlich von unserer Schaltfläche aus aufrufen, die sich gerade hier befindet, aber wir müssen sie noch aus unserem Composable importieren. Das sollte jetzt alles sein. Gehen wir zum Admin. Seine E-Mail-Adresse ist derzeit der Administrator, aber die andere ist auf falsch gesetzt . Lass uns das jetzt umschalten. Klicken Sie auf „Benutzer suchen“. Dieser Benutzer wurde nicht abgerufen. Wir können sehen, dass die Eigenschaft von isAdmin auf false gesetzt ist. Klicken Sie auf „Umschalten“. Dieser wird dann zu einem Admin-Benutzer aktualisiert , den Sie auch in der Konsole sehen können. Das ist nicht wahr. Wir setzen das dann wieder auf false zurück, was wir auch in der Datenbank aktualisiert sehen können. 59. Firebase-Regeln: Dies wird jetzt der Teil sein, in dem wir die Sicherheit für unsere Anwendung auf der Datenbankseite erhöhen . Was wir in der Firebase-Konsole tun , wenn Sie in die Firestore-Datenbank gehen in die Firestore-Datenbank und dann haben wir diese Option namens Regeln. Auf diese Weise können wir unserer Datenbank einige Sicherheitsregeln hinzufügen, um zu bestimmen , wer was tun kann. Wir können festlegen, wer Daten in unserer Datenbank erstellen, lesen, aktualisieren und löschen möchte , und wir können genauer festlegen, für welche Dokumente oder Sammlungen diese Regeln gelten. Im Moment sind unsere Datenbankregeln nicht sicher. Wenn wir einen Blick darauf werfen, haben wir hier so viel, was zu einer bestimmten Sammlung von Dokumenten in unserer Datenbank passt . Im Moment zeigt dies auf den äußeren Einstiegspunkt unserer Datenbank. Dann können wir darin verschachtelt weitere Treffer hinzufügen , um genauer zu welche Dokumente oder Sammlungen die darin enthaltenen Regeln gelten. Diese aktuelle Einstellung von Dokument entspricht Stern entspricht allen Dokumenten in unserer gesamten Datenbank. Unsere Datenbank ist nicht sicher, da sie vollen Lese- und Schreibzugriff ermöglicht , solange wir uns innerhalb eines Monats nach der Erstellung der Datenbank befinden . Diese einmonatige Regel ist eine Sicherheitsfunktion. Vergessen Sie also nicht, den vollen Zugriff auszuschalten. Dadurch wird unsere Datenbank erneut geschützt, falls wir vergessen, erneut reinzugehen und diese Regeln anzupassen. Um unsere eigenen Regeln hinzuzufügen , entfernen wir diese innere Übereinstimmung und beginnen, unsere eigenen Regeln zu schreiben. Ich entferne das und belasse das äußere Match, das wiederum auf unsere vollständige Datenbank verweist. Dann können wir ein verschachteltes Match erstellen. Wir beginnen mit unserer Pizzasammlung, also /slash pizzas, und dann haben wir auch die Bestellungen und auch die Benutzer. Wir können diese Regeln auch hinzufügen. Denken Sie dann daran, dass jedes dieser Pizzapapiere in einer eindeutigen Dokument-ID gespeichert ist. Wir können eine Variable einfügen und ihr den Namen der Dokument-ID geben. Dadurch können wir auf die Dokument-ID in diesem Abschnitt zugreifen . Bei Pizzen sagen wir zunächst „Lesen zulassen“. Wir erlauben das Lesen, weil es für uns in Ordnung jeder die Elemente aus der Speisekarte liest. Wenn es jedoch darum geht, Pizzen zu erstellen, zu aktualisieren oder zu löschen, müssen diese kontrolliert werden. Wir können diese Operationen auch gruppieren. Wir können zulassen, erstellen, aktualisieren und auch löschen sagen . Solange einige bestimmte Bedingungen erfüllt sind, wollen wir diese drei Operationen nur zulassen wenn eine bestimmte Bedingung erfüllt ist. Diese Bedingung ist, dass sie ein Admin-Benutzer sind. Als Erstes müssen Sie überprüfen, ob der Benutzer tatsächlich authentifiziert ist. Wir können eine if-Anweisung übergeben der wir auf das Request-Objekt zugreifen können , über das wir auf die Off-Eigenschaft zugreifen können, und wir können überprüfen, ob diese nicht gleich Null ist. Das bedeutet, dass der Benutzer, der die Anfrage nach diesen bestimmten Dokumenten in unseren Pizzen stellt diesen bestimmten Dokumenten in , derzeit authentifiziert ist. Das ist der erste Schritt. Wir haben einen authentifizierten Benutzer, oder wir müssen auch auf das Eigentum eines Benutzers seines Administrators innerhalb der Datenbank zugreifen . Wir können dies tun, indem wir ein doppeltes Ampersand verwenden, die Kette auf einen zusätzlichen Scheck. Wir können auf eine von Firebase bereitgestellte Get-Funktion zugreifen , mit der wir einem bestimmten Dokument einen Dateipfad hinzufügen können . Hier drinnen müssen wir vom Root-Pfad aus beginnen. Das äußerste Match, das auf unsere Datenbank verweist. Wir können diesen Abschnitt kopieren und einfügen. Dann können wir, wie wir es hier getan haben, unseren Sammlungsnamen hinzufügen. Wir möchten auf /users und dann auf eine bestimmte Benutzer-ID zeigen . Wir können von diesem request.auth-Objekt aus auf die aktuelle Benutzer-ID zugreifen . Direkt nach /users können wir eine Variable mit dem Dollarsymbol einfügen, die Klammern öffnen, persönlich anfordern.auth und dann können wir auf die UID zugreifen. Dadurch gelangen wir zu dem jeweiligen Dokument , auf das Sie zugreifen möchten. Dann, direkt nach diesen Klammern, greifen wir auf die Daten zu und dann auf die Eigenschaft , die isAdmin ist, groß A. Sobald wir auf diese IsAdmin-Eigenschaft zugegriffen haben, Sobald wir auf diese IsAdmin-Eigenschaft zugegriffen haben, wollen wir auch überprüfen, ob dies wahr ist. Nur zur Klarstellung, wir haben hier zwei Schecks gemacht. Wir überprüfen zunächst, ob der Benutzer tatsächlich authentifiziert ist, was bedeutet, dass er sich erfolgreich angemeldet hat. Die zweite Überprüfung besteht darin, in die Sammlung des Benutzers zu springen und dann zu überprüfen, ob die IsAdmin-Eigenschaft ebenfalls auf true gesetzt ist. Bevor wir weitermachen, testen wir diese Regeln im Regelspielfeld. Wir können dies erweitern und verschiedene Simulationstypen erstellen , um unsere Daten abzurufen, neue Daten zu erstellen, zu aktualisieren und auch zu löschen. Der Standort. Dies ist der Pfad, den wir gerade überprüfen. Es ist /pizzas /DocId. Wir möchten dies mit einem authentifizierten Benutzer testen. Unser Authentifizierungsanbieter ist das Passwort, dann die Firebase-UID. Dies ist die Benutzer-ID, die die Anfrage stellt. Ich werde mir das schnappen. Ohne mit dieser Seite fortzufahren, klicke ich mit der rechten Maustaste und öffne die Authentifizierung in einem neuen Tab. Lass uns kopieren. gehen wir in die Datenbank, in die Benutzer. Diese ist eine eindeutige ID. Lass uns das kopieren und dieser Benutzer ist der Admin. Ich füge das ein. Klicken Sie auf Ausführen und wir stellen eine Get-Anfrage. Hier können wir sehen, dass dies in der Pizzasammlung hervorgehoben ist . Jeder kann diese Daten lesen. Wir würden erwarten, dass das in Ordnung ist. Die Einschränkungen liegen jedoch beim Erstellen, Aktualisieren und Löschen von Daten. Um Daten zu erstellen, hat uns Optimist einen Fehler gegeben. Lass uns das überprüfen. Dies deutet auf unseren Datenbankmatch hin. Die Datenbank ist, eine Datenbank, Dokumente und ich denke, das braucht nur ein Dollarsymbol, da es sich um eine Variable handelt. Abweisen. Wir benötigen auch nur die regulären Klammern , die zu dieser passen, um die Variable einzufügen. Wir werden das noch einmal versuchen. Führen Sie diese Breite beim Erstellen aus. Das ist in Ordnung. Aktualisieren. Das ist in Ordnung. Denken Sie daran, dass wir ein ISAdmin-Benutzer sind. Auch das Löschen funktioniert einwandfrei. Lassen Sie uns dies so ändern, dass es der Benutzer ist, der nicht authentifiziert ist, also ist isAdmin gleich false. Kopiere das, füge das ein. Wir führen eine Löschanfrage durch. Dies wird verweigert, da wir kein Administrator sind, aber wir sollten trotzdem in der Lage sein, an unsere Daten zu kommen, da jeder unsere Pizzen lesen darf . Erstellen, es sollte ein Fehler vorliegen. Endlich das Update 2. Gut, jetzt wissen wir, dass das funktioniert. Wir können es für andere Sammlungen wiederholen. Aber unsere Bestellungen, wir wollen, dass jeder eine Bestellung erstellen kann . Aber alle anderen drei Operationen sollten nur von einem Admin-Benutzer ausgeführt werden. Lass uns dieses Spiel kopieren. Dann füge das direkt darunter ein. Dieser ist für unsere Bestellungen. Sie können diese Variable auch umbenennen, wenn Sie möchten. Denn hier erlauben wir jedem, eine Bestellung zu erstellen. Wir möchten beim Lesen, Aktualisieren oder Löschen einige Einschränkungen hinzufügen . Es gelten dieselben Regeln. Wir möchten überprüfen, ob der Benutzer angemeldet und authentifiziert ist. Wir werden auch die Eigenschaft isAdmin aus der Sammlung des Benutzers abrufen . Das kann alles gleich bleiben. Teste das aus. Das sind Befehle. Das ist gut. Wir gehen zu Create. Denken Sie daran, dass jeder eine neue Bestellung erstellen kann und wir immer noch beim Benutzer sind , der kein Administrator ist. Es sollte in Ordnung sein. Jetzt können wir die anderen drei Operationen testen. Verstanden, das ist wie erwartet ein Fehlschlag. Aktualisieren. Löschen. Zur Bestätigung springen wir dann in die Sammlung unseres Benutzers und holen uns die ID für den Benutzer , der ein Administrator ist. Wir wählen einen aus. Ich gehe zu dem Benutzer ein Administrator ist, der etwas löschen, aktualisieren, erstellen und auch lesen kann aktualisieren, erstellen . Das letzte, was wir tun müssen, ist die Sammlung unseres Benutzers anzupassen. Sie sollten es jedem ermöglichen, zunächst ein Konto zu erstellen. Wir erstellen ein Match oder /users, übergeben die Variable von docID. Dann möchten wir es jedem ermöglichen, ein neues Konto zu erstellen, und wir möchten auch, dass die Benutzer ihre eigenen Daten lesen können. Wir erlauben das Lesen. Aber wir werden das auch einschränken. Wir überprüfen auch, ob der Benutzer authentifiziert ist . Füge das ein. Damit der Benutzer nur auf seine eigenen Daten zugreifen kann , überprüfen wir, ob der Benutzer, der auf dem Anforderungsobjekt verfügbar ist , derselben Benutzer-ID entspricht, die an diese Variable übergeben wird. Das doppelte Ampersand bildet einen zweiten Scheck. Zugriffsanfrage zur Authentifizierung der UID. Dies ist die ID der Person , die die Anfrage tatsächlich stellt. Wir möchten überprüfen, ob dies der ID des Dokuments entspricht. Wenn also beide übereinstimmen, liest der Benutzer seine eigenen Daten, aber nicht nur Benutzer, die ihre eigenen Daten lesen, möchten wir einem Benutzer auch die Möglichkeit geben, zusätzlich die Daten eines beliebigen Benutzers zu lesen. Darüber hinaus möchten wir dies auch in Klammern einwickeln und dann eine zweite Überprüfung durchführen. Dann lass das auch zutreffen, wenn der Benutzer ein Administrator ist. Wir wissen bereits, wie man an diese Informationen kommt, und das mit dieser Abruffunktion oben. Kopiere alles von get right bis ganz zum Ende, wo wir überprüfen, ob der Admin gleich wahr ist, und achte dann darauf, dass du das in die Klammern einfügst. Dadurch wird jetzt immer überprüft, ob der Benutzer authentifiziert ist, und dann wird entweder überprüft, ob der Benutzer ein Administrator ist oder ob er auf seine eigenen Daten zugreift. Tatsächlich muss dies der JavaScript-OR-Operator und nicht das AND sein , was bedeutet, dass jede dieser Seiten wahr sein kann. Als letztes müssen Sie überprüfen , ob Sie das Update zulassen und Funktionen löschen möchten, wenn sie Admin-Benutzer sind . Wir werden es zulassen. Kombinieren Sie diese zu Abschnitten „Aktualisieren“ und „Löschen“. Wir fügen die gleichen Bedingungen wie die oben genannten hinzu. Wir überprüfen, ob der Benutzer angemeldet ist und ob er auch ein Administrator ist. Kopieren Sie diese Zeile, fügen Sie sie ein, und das sind jetzt alle Regeln. Dies könnte auch erweitert werden , damit Benutzer auch ihre eigenen Informationen aktualisieren können, aber das ist vorerst in Ordnung. Es enthält aber auch jede Menge doppelten Code in dem wir mit der Funktion get überprüfen, ob der Benutzer ein Administrator ist . Wir können dies verbessern, indem wir wiederverwendbare Funktionen erstellen. Wir erstellen zwei Funktionen. Eine wäre, zu überprüfen, ob der Benutzer ein Administrator ist, und dann zu überprüfen, ob der Benutzer auf seine eigenen Informationen zugreift. Wir legen alles in das äußere Streichholz. Leg etwas Platz. Dann erstellen wir eine Funktion wie in JavaScript, also isAdmin, und dann eine zweite Funktion namens isAccountOwner. isAdmin, das ist der, den wir jetzt ziemlich oft verwenden. Wir möchten die Anfrage kopieren. Die Authentifizierung ist nicht gleich Null. Sie dies bis zum Ende der Kopieren Sie dies bis zum Ende der get-Funktion. Gehen Sie in die Funktion isAdmin, und dann wollen wir diesen Wert zurückgeben, also fügen Sie ihn ein. Das bedeutet, dass unsere Funktion entweder einen wahren oder einen falschen Wert zurückgibt . Also isAccountoWner, dies muss auch überprüfen, ob der Benutzer authentifiziert ist, also geben wir Anfragen zurück, die authentifiziert sind nicht gleich Null. Dann wollen wir, genau wie unten bei Benutzern, auch überprüfen, ob die ID der Person, die die Anfrage stellt , mit der ID des Dokuments übereinstimmt. Kopieren Sie diese also. Verketten Sie das mit den doppelten Ampersanden und fügen Sie es ein. Aber denken Sie daran, dass wir hier auf die ID des Dokuments zugreifen. Die ID dieses Dokuments ist nur in diesem Abschnitt verfügbar . Wir müssen also die Funktion, die ID, übergeben und dann ersetzen wir diese. Wir fügen die ID dieses Dokuments hinzu, wenn wir diese Funktion aufrufen . Wir sind jetzt fast da. Was wir tun müssen, ist den ganzen Cubicle-Code zu entfernen ganzen Cubicle-Code und ihn durch unsere beiden Funktionen zu ersetzen. Der erste ist isAdmin. Dadurch wird überprüft, ob der Benutzer authentifiziert ist und ob er ein Administrator ist, damit wir den gesamten Code aus dem Match unserer Pizzen entfernen können. unmittelbar nach diesen Anweisungen Entferne unmittelbar nach diesen Anweisungen die gesamte Zeile und ersetze sie durch unsere Funktion, ersetze sie durch unsere Funktion die für unsere Bestellungen genau dieselbe ist. Wir überprüfen dasselbe. Schneide das alles fehl am Platz. Funktion einbauen. Die letzte Phase sind unsere Benutzer, und hier werden diese beiden Funktionen verwendet. Zum Lesen schneiden wir alles nach der IF-Anweisung aus. Dadurch werden beide Funktionen genutzt. Bei isAccountOwner die ID die ID des Dokuments von oben. Alles ist Admin. Dadurch werden dieselben beiden Prüfungen wie zuvor durchgeführt, und für die Löschanfrage verschieben wir alles nach den if-Anweisungen und übergeben einfach die isAdmin-Funktion. Das sieht jetzt viel sauberer und ist viel einfacher zu lesen. Als letztes müssen wir unsere Benutzerbedingungen auf dem Spielplatz testen . Zuallererst der Ort, wir den Pfad des Benutzers testen. Wir beginnen mit dem Kopieren der Benutzer-ID des Admin-Benutzers. isAdmin ist gleich true, fügen Sie es ein. Dieser sollte erlaubt sein, da wir der Admin-Benutzer sind. Wir werden auch die zweite Überprüfung durchführen, um festzustellen, ob der Kontoinhaber diese Anfrage stellt. Auch wenn wir nicht der Administrator sind, kopieren wir den Nicht-Admin-Benutzer. Fügen Sie es in den Code ein. Diese Simulation wird jetzt geleugnet. Der Grund, warum dies verweigert wird , ist , dass wir zwar Kontoinhaber sind, aber nicht auf unsere eigenen Dokumente zugreifen. Wir greifen nur auf alle generischen Dokumente in der Sammlung des Benutzers zu. Um den Zugriff auf unsere eigenen Dokumente zu testen, verschieben wir die Variable und fügen dieselbe Benutzer-ID ein, die wir unten haben. Führe das aus. Dies funktioniert jetzt, da wir der Kontoinhaber der Dokumente sind, die wir überprüfen. Erstellen. Lass uns das ausprobieren. Das funktioniert. Wir können die Variable auch ersetzen. Es sollte für alle Dokumente funktionieren. Wir versuchen es noch einmal. Wir versuchen es mit einem Löschen. Führen Sie dies als Nicht-Admin-Benutzer aus, und dies sollte ein Fehler sein. Schaltet aus. Kopieren Sie den Admin-Benutzer. Fügen Sie das ein, und dieser ist erlaubt da wir ein Admin-Benutzer sind. Da haben wir es. Es sieht so aus, als ob mit unseren Sicherheitsregeln alles einwandfrei funktioniert, und Sie können diese Regeln auch aktualisieren oder mit ihnen herumspielen, wenn Sie möchten. Aber im Moment ist unsere App viel sicherer und wir werden diese Änderungen veröffentlichen.