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 SignInMesa