React Full-Stack-Webentwicklung für Anfänger:innen: Erstellen und starten Sie eine digitale E-Commerce-Website mit MERN

1. IntroKurs: In diesem Kurs lernen Sie mRNSTec in der Praxis bei der Erstellung einer digitalen E-Commerce-Website von FLSTec Praxis bei der Erstellung einer digitalen E-Commerce-Website von FLSTec Willkommen. Dies ist ein Kurs für alle, die lernen möchten, wie man FlusTec-Anwendungen mit MarnsTec erstellt Er vermittelt Ihnen wichtige Grundlagen und vermittelt Ihnen ein Verständnis dafür, wie Verständnis dafür MrNSTec ist eine Gruppe von Technologien, die zusammenarbeiten, um Websites und Web-Apps zu erstellen Am Ende dieses Kurses werden Sie in der Lage sein, neue Daten von Ihrer Website direkt zur Datenbank hinzuzufügen, sie direkt von Ihrer Website aus zu aktualisieren und auch zu löschen Machen Sie sich keine Sorgen, wenn Sie neu in diesem Bereich sind Ich werde alles in einfachen Worten erklären, damit es leicht zu verstehen ist. Nehmen wir an, dass die ersten 70% des Kurses darin bestehen, mNTC zu erlernen, also zu lernen, wie man mit Daten und HDDP-Methoden arbeitet, um mit Ihrer Datenbank zu arbeiten In unserem Fall wird es bei MongoDB und den anderen darum gehen, dies für eine digitale E-Commerce-Website zu nutzen Am Ende haben Sie also ein gut funktionierendes Projekt. Mal sehen, wofür diese Buchstaben stehen M für MongoDB MongoDB ist eine Art Datenbank, in der Sie Informationen für Ihre App speichern können, wie Benutzerdaten oder Beiträge Es sorgt dafür, dass die Dinge organisiert und leicht zu finden sind, genau wie zum Beispiel ein digitaler Füllschrank E in Express, ein Tool, das hilft, die Vorderseite der Website oder Benutzer C mit der Rückseite zu verbinden der Website oder Benutzer C mit der Rückseite zu , wo sich die Daten und die Logik befinden. Es erleichtert die Handhabung von Dingen wie Routen, die wie Pfade sind, die zu verschiedenen Teilen unserer Anwendung führen , R in React, einem Framework, das verwendet wird , um einen Teil der Website zu erstellen , mit dem Benutzer interagieren. Es macht die Seiten interaktiver und dynamischer. Wenn der Benutzer also auf Dinge klickt oder Formulare eingibt, kann die Seite problemlos aktualisiert werden, ohne dass sie neu geladen werden muss Dann noch ein Hinweis, wodurch wir JavaScript auf dem Server verwenden können. Dies ist der Teil der App , der hinter den Kulissen arbeitet, und es hilft unserer App, beispielsweise eine Verbindung zur Datenbank herzustellen, Benutzeranmeldungen zu verarbeiten und Wir werden auch verschiedene Lösungen für unsere Bedürfnisse integrieren verschiedene Lösungen für unsere Bedürfnisse Zum Beispiel Stripe für Zahlungen und Loadinary für die Bildspeicherung Wir stellen unsere Website auch bereit, um sie gemeinsam durchzugehen und lernen, wie man eine solche Flustg-Anwendung im Internet einsetzt solche Flustg-Anwendung Da uns Sicherheit wichtig ist, werden wir auch sogenannte JWT- oder JSON-Webtoken verwenden , um unsere Pfade zu sichern , die wir zum Aufrufen dieser Datenbank und zum Ausführen dieser HDP-Methoden wie Post, Get oder Delete verwenden werden dieser HDP-Methoden wie Post, Ich freue mich darauf, den Kurs zu sehen. 2. A1: Zuerst werden wir den Band-Ordner auf CD veröffentlichen. Wir werden den Befehl NPM Y ausführen. Wir werden in das Paket Dot JSON gehen und dort unten die Beschreibung Wir werden einen Typ mit Modul erstellen, es uns ermöglicht , zu importieren und zu exportieren Und wir werden den Befehl ausführen, den Sie in der Beschreibung finden , um alle Bibliotheken zu installieren , die wir benötigen. Im Backend-Ordner werden wir erneut eine neue Datei mit Punkt N zum Speichern der Umgebungsvariablen erstellen N zum Speichern der Umgebungsvariablen Wir werden dort mit dem Port beginnen und 3.000 verwenden. Jetzt werden wir eine weitere neue Datei erstellen, und die wird Index Dogs heißen. In indexed Dogs beginnen wir mit dem Import der Module, die wir für die Anwendung benötigen Express-Bibliothek für den Aufbau des Servers, Konfigurationsfunktion ab der zehnten Version zum Laden der Umgebungsvariablen, Mangus für die Mongo-DB-Objektmodellierung, Kurs-Middleware zur Aktivierung von Cross-Origin Sharing, Kurs-Middleware zur Aktivierung Cloudinary für die Handhabung, Cloud-Image-Speicher, Mlter für die Handhabung, Datei-Uploads und Cloudinary-Speicheradapter für Mlter Datei-Uploads Mit dieser Funktion laden wir Umgebungsvariablen aus der Dot N-Datei, die wir dort erstellt haben . Dann werden wir eine Instanz von Express erstellen und dann auf dieser Instanz von Express Course verwenden. Das bedeutet, dass wir ursprungsübergreifende Anfragen zulassen werden. Sie können sich das so vorstellen, als würden Sie unserer Anfrage einen Ausweis ausstellen. Wenn wir ihn nicht verwenden, schlägt unsere Anfrage fehl. Jetzt startest du den Server und teilst unserer App mit, dass sie sich unseren Bericht anhören soll , den wir dort eingestellt haben. Es wird Port 3.000 sein. Und um zu wissen, ob es erfolgreich ist oder nicht, fügen wir ein Konsolenprotokoll hinzu, und das wird dann den Server auf- und auswärts laufen lassen. Bevor wir schreiben, müssen wir die Dinge überprüfen. Gehen wir zum Paket JSON. Dort unter dem Skript. Dort können wir den Test löschen. Und stattdessen schreiben wir den Start, den Node-Index in Js und auch den Def-Nodemon, der in JS indexiert Wir werden jetzt eine CD erstellen, jetzt machen wir NPM Run. Taub und Sie können sehen, dass unser Server gestartet wurde, und auch der Server, der auf 3.000 Ports läuft , wurde in einer Konsole angezeigt Und jetzt zeige ich dir, was Nodemon für uns tut. Also lass uns diesen Server auf Server AA ändern, speichern. Und jetzt können Sie sehen, dass der Server automatisch neu gestartet wurde Und so wird es auch mit anderen Änderungen funktionieren. Natürlich werden wir die Konsolenprotokolle nicht ändern, aber wenn Sie etwas auf unserer Seite ändern, wird der Server automatisch neu gestartet und wir werden die Änderung in Echtzeit sehen 3. MongoDB: Jetzt werden wir MongoIB einrichten. Also klicken wir dort auf deren Seite mongoib.com auf Dann füllen wir die Daten und erstellen das Konto Dann verifizieren Sie Ihre E-Mail-Adresse, dann gehen wir in das Panel und klicken auf Datenbank. Dann klicken wir auf Erstellen und wählen kostenlos aus. Dort können Sie den Namen für Ihren Cluster ändern, und was ist ein Cluster? Ein Cluster ist eine Sammlung von mehreren Servern. Stellen Sie sich vor, wir haben ein Buch in einer Bibliothek gespeichert, und statt in einer Bibliothek haben wir es in mehreren kleineren Bibliotheken. Falls eine geschlossen ist, können wir auf andere Bibliotheken zugreifen. In unserer Terminologie bedeutet das, dass wir den Serverausfall vermeiden werden. Jetzt klicken Sie auf Create Deployment. Wir wählen ihren Benutzernamen und ihr Passwort Bevor wir fortfahren, müssen wir auf Datenbankbenutzer erstellen klicken. Dann klicken wir auf Verbindungsmethode auswählen. Dann klicken wir auf Treiber. Dann haben wir kein JS ausgewählt, was richtig ist. Wir müssen NPM install Mon Goody B in unserem Projekt verwenden. Dann nehmen wir diese Zeichenfolge und fügen sie in Umgebungsvariablen Kopieren wir das, klicken wir auf D. Wir gehen zum VS-Code wo wir einen Ordner mit unserem Projekt haben. Dort werden wir das CD-Backend machen. Wir werden NPM I Mongo DB machen. Dann werden wir in unserem Bond-Projekt auf Umgebungsvariablen eingehen Dort erstellen wir MongoDB, equals, und platzieren dort die Zeichenfolge, die wir gerade Jetzt müssen Sie dies für Ihr Passwort ändern , das Sie in der Mongo-DB festgelegt haben Jetzt stellen wir mit Mongoose eine Verbindung zu MongoDB her und sperren Nach Mongos Tastatur werden wir es tun. Verbinde dich. Dann und fang. Wir werden versuchen, eine Verbindung herzustellen. Wenn wir dann erfolgreich sind, wollen wir auch neben dem Server protokollieren, der läuft. Die Datenbank ist verbunden, wir wissen es also. Und falls es Probleme gibt, können wir sehen, dass die Datenbank nicht verbunden war und dass wir das erreichen werden, wenn wir diesen Fehler dort abfangen. Aber wenn du die erste Zeile siehst, wo wir uns verbinden sollten. Jetzt ist es leer. Wir können also nicht einfach MongoDB machen Wir müssen auch die Prozess-Punkt-Umgebung machen oder NEIN, Sie können bereits sehen, dass wir dort einen Fehler In diesem Fall müssen Sie jedoch nur den Server neu starten. Wenn Sie nicht wissen wie, machen Sie Sutter plus C, Y, Enter Und dann wieder NPM Run Gap. Wenn Sie jetzt erneut ausführen, wird Ihre Datenbank verbunden. 4. Produktmodell: Jetzt weisen wir unsere Anwendung an, ein Tool zu verwenden, das automatisch JSON-Daten liest und versteht, die auf Anfrage an unseren Server gesendet werden Wenn wir zum Beispiel JSON auf diese Weise erhalten, können wir damit arbeiten. Lassen Sie uns nun Module und Routen erstellen und dies in der Praxis sehen. Also erstellen wir zuerst in unserem Ben-Ordner einen neuen , der Models heißen wird. Dann noch eins, und das wird Routes heißen. In Modulen beginnen wir mit der Datei namens Product Dot JS oder Product Model Dot JS, und in Routes beginnen wir mit Product Route Dot JS. Beginnen wir zunächst mit dem Produktmodell Dot JS. Wir werden den Mongoose importieren , um mit dem Mongo D B zu arbeiten. Wir werden das Produktschema erstellen und dort beginnen wir, die Felder einzugeben , die wir für unser Produkt benötigen Zuerst wird es ein Name sein, es wird vom Typ Zeichenfolge sein und es wird Als nächstes wird es um den Preis gehen, und ein Stripe akzeptiert den Preis gewissermaßen, wir werden es auch direkt tun, damit es einfacher wird. Es wird eine Typnummer sein und es wird auch erforderlich sein. Für jedes Produkt benötigen wir ein Bild, und dieses Bild ist eine Art Zeichenfolge da es sich tatsächlich um eine URL des Bildes handelt. Und wie wir diese URL bekommen, werden wir über das Cloudinary bekommen , das wir später konfigurieren werden Dieses Feld wird ebenfalls benötigt . Als Nächstes erstellen wir eine Auswahlliste mit dem Namen Kategorie. Sie wird vom Typ Zeichenfolge sein, und sie wird auch erforderlich sein, aber wir werden ihre Namen für Kurs und Vorlage haben, und das wird eine Auswahlliste erstellen Und dann werden wir dieses Produktschema exportieren. Jetzt fangen wir an, die Routen zu schreiben. Zuerst importieren wir den Express, um einen Router zu erstellen, und dann importieren wir auch unser Produkt, das wir gerade erstellt haben. Jetzt werden wir eine neue Router-Instanz erstellen. Dies wird uns helfen, verschiedene URLs oder Routen in unserer Anwendung zu organisieren und zu verwalten . Damit Sie sofort über den Kontext verfügen, wir Export Default Router und gehen zu Index Dot JS Dort importieren wir zuerst die Produktroute, an der wir gerade arbeiten, und dann verwenden wir das Produkt aus der Produktdürre als App . Wenn wir nun eine neue Route für die Erstellung eines neuen Produktartikels mit der Dot-Post-Methode erstellen, werden wir dort diesen Schrägstrich online haben Aber wir definieren dort diese Produktroute. Wenn wir also im Frontend tatsächlich einen neuen Artikel erstellen wollen oder im Postman, müssen wir anrufen, dann würde die URL ungefähr so aussehen Es wird Local Host 3.000 sein. Dann, wie wir es dort gemacht haben, wird das Produkt in der Produktroute ein Slash-Produkt sein Und da es nichts gibt, wird es leer sein. Aber wir werden vorher für Excios oder in Postman spezifizieren, dass es sich um eine Post-Methode handelt Es wird also automatisch wissen, dass es sich um diese Route handelt, und um noch ein anderes Beispiel zu haben Wenn wir das Produkt erstellen, dann sieht die Route so aus Wir werden dort empfehlen , dass diese Route für die Erstellung eines neuen Produkts vorgesehen ist , und wir können weitermachen. Zuerst machen wir Tricatchblock drinnen. Wenn also unser Block von Tri fehlschlägt, werden wir den Fehler in Catch sperren Wir werden den Fehler im Konsolenprotokoll sperren, dann den Antwortstatus auf 500 setzen den Antwortstatus auf und die Fehlermeldung senden. nun zu überprüfen, ob die erforderlichen Felder vorhanden sind, werden wir die Bedingung erfüllen. Falls eines dieser Felder fehlt, wird der Wert true zurückgegeben, was bedeutet, dass der Vorgang fehlschlägt. Im Block true setzen wir dann den Antwortstatus auf 400 und die Meldung, setzen wir dann den Antwortstatus auf dass Pflichtfelder fehlen. Falls es falsch ist und wir alle Felder haben, wird es bis zur Erstellung eines neuen konstanten, neuen Produkts fortgesetzt, bei dem wir alle Felder festlegen werden. Jetzt mit product dot create speichern wir dieses neue Produkt in einer Datenbank, und dann werden wir eine Antwort mit zwei gegen eins zurücksenden und den erstellten Status mit dem neuen Produkt senden. 5. PostmanProductRoutes: Wir gehen auf postman.com und melden uns kostenlos an. Wir werden dort alle Informationen eingeben, dort weitere Informationen eingeben Dann klicken Sie unten auf der Seite auf Desktop-Anwendung herunterladen, laden sie herunter und installieren sie. Jetzt auf der Seite klicken wir auf Neue Anfrage und bearbeiten dort unsere Anfragen. Dort geben wir die Endpunkt-URL und ändern dort die Methoden. Also hol den Beitrag und lösche ihn. Wir werden diese vier verwenden. Dann klicken wir auf Senden und wir werden die Ausgaben dort sehen. Wenn wir einige Daten senden, werden wir sie in diesen Hauptteil einfügen, wo wir Raw auswählen und sicherstellen, dass auch JSON ausgewählt ist. Format, wie Sie Daten einfügen , sieht aus wie geschweifte Klammern, dann Feld und dann Wert Und dieser Feldname hängt davon ab was wir in unserem Modell definieren werden Für den Namen wird es zum Beispiel Name und Wert John sein. Und die URL hängt von der Route ab, die Sie festgelegt haben. Wir verwenden also ihre Produktroute, die mit dem Schrägstrich Product beginnt, und dann, zum Beispiel, um ein neues Produkt zu erstellen, sehen wir ihre Post-Methode, und das war's Wir rufen den lokalen Anbieter 3.000 Produkt an. Und wenn wir jetzt senden, haben wir eine Route für GET. Das heißt, es bekommt alle unsere Daten von Mongo Di B. Um unsere neue Route sofort zu testen, gehen wir zu Postman, dort ändern wir sie auf Wir beginnen mit dem lokalen Host, dann machen wir das Produkt und dann können wir das leer lassen Wir wählen ihren Körper roh aus, stellen sicher, dass es Jason ist. Zuerst fügen wir Ihren Namen dann den Preis in Bild mit Test-URL senden ein, funktioniert natürlich nicht und die Kategorie, in der Sie eine Vorlage haben. Da es sich um Zeichenketten handelt, brauchen wir die Anführungszeichen, aber für Zahlen brauchen wir sie nicht. Versuchen wir nun, auf Senden zu klicken und wir waren erfolgreich. Jetzt können wir unsere MongoDB überprüfen, und in unsere MongoDB wurde dieser Datensatz eingefügt Später im Frontend werden wir ein Eingabeformular erstellen, in dem wir all diese Felder ausfüllen werden Dann klicken wir auf eine Schaltfläche , die diese Route aufruft und sie wird in MongoDB eingefügt Um nun unsere Produkte, die wir in Mongol B einfügen werden, auf unserer Seite anzuzeigen , müssen wir auch eine Route angeben, wie wir sie erhalten können Und jetzt werden wir eins nach dem anderen vorgehen und sie erstellen. Um alle Artikel abzurufen, versuchen wir es zunächst erneut mit Catch Block Inside. Wir haben es gefunden, wir werden alle Artikel aus unserer Datenbank abrufen alle Artikel aus unserer Datenbank und den Status auf 200 setzen, was dem O-Status entspricht. Falls ein Fehler auftritt, sperren wir die Fehlermeldung, beantworten den Antwortstatus auf 500, dann gehen wir zu Postman, um es zu testen, ändern den Beitrag, um es zu erhalten , es gesendet zu bekommen, und wir erhalten Daten aus unserer Datenbank Wie zuvor machen wir Router dot get, aber jetzt geben wir in einem Pfad auch die ID Das heißt, wir müssen im Pfad auch diese ID angeben, die wir dort haben. Und das werden wir einfach so aus den Anforderungsparametern extrahieren . Jetzt finden wir es anhand der ID mit dieser Funktion nach ID suchen, und dann senden wir eine Antwort an 100 mit dem abgerufenen Produkt. Falls dies wie zuvor fehlschlägt, protokollieren wir die Fehlermeldung, setzen den Status auf 500 und senden sie. Lass es uns jetzt testen. Also nehmen wir die ID, legen sie da hin und schicken sie jetzt. Und wir haben den Gegenstand. wir nun mit der Route zum Löschen fort, und sie wird der Route zum Abrufen des Produkts ziemlich ähnlich sein. Anstelle von G werden wir diese Löschmethode verwenden. Dann werden wir auch den ID-Parameter einfügen und Trakageblock In Wreckage Block ist der Fang derselbe, und in Tribloc extrahieren wir den Produktartikel auch zuerst anhand des Dann finden wir es mit der ID und löschen es. Wir führen dort eine If-Bedingung falls das Ergebnis falsch ist und der Artikel nicht gefunden wurde, und wir werden eine Antwort mit Status vier oder vier zurücksenden, und dann senden wir auch eine Nachricht mit dem Hinweis, dass das Produkt nicht gefunden wurde Falls das Ergebnis wahr ist, also das Produkt gefunden wurde, überspringen wir diese Angabe, falls der Zustand vorliegt, und fahren fort. Wir setzen den Antwortstatus auf 200 und senden eine Nachricht, dass das Produkt erfolgreich gelöscht wurde Jetzt können wir es testen, also ändern wir einfach diese beiden, löschen. Jetzt werden wir es versenden und das Produkt wurde erfolgreich gelöscht. Jetzt wählen wir wieder die G-Methode aus, löschen die ID und belassen Produkt und klicken auf Senden. Sie werden sehen, dass wir dort nichts haben. Aber wenn wir das jetzt auf posten ändern, können wir den Test AA machen und ihn versenden. Jetzt können wir es wieder holen, senden. Sie werden sehen, dass wir dort wieder einige Daten eingeben. Wir werden mit der Produktupdate fortfahren. Im Update werden wir die Methode Dt Put verwenden und dort auch das D angeben , für welches Produkt wir aktualisieren möchten. Auch hier machen wir einen TryCatch-Block. Und diese Bedingung, um zu überprüfen, ob wir dort alle Felder haben und wir das Produktbild nicht aktualisieren werden Falls ein Feld fehlt, senden wir eine Nachricht mit dem Antwortstatus 400 Pflichtfelder fehlen. Dann extrahieren wir die ID aus den Anforderungsparametern. Wir werden den Produktartikel finden und ihn mit neuen Daten aus dem Anfragetext aktualisieren. Dann führen wir eine I-Bedingung durch, und falls dieses Ergebnis falsch ist, geben wir den Status vier oder vier mit dem Hinweis „ Produkt nicht gefunden“ zurück . In einem anderen Szenario setzen wir einfach weiter den Status auf 200 und senden die Nachricht, Produkt aktualisiert wird, falls der Handelsblock ausfällt und wir blockieren, der Handelsblock ausfällt und wir blockieren, die Nachricht erneut protokollieren, den Status auf 500 setzen und die Fehlermeldung senden. Jetzt haben wir in Postman die URL mit dem lokalen Host-Produkt und der ID Wir werden es so ändern, dass wir dort den Test AA auf Test BB ändern Jetzt löschen wir das Bild , weil wir es nicht aktualisieren werden. Wir werden es versenden und das Produkt wurde nicht gefunden. Das liegt also daran, dass ich dort eine falsche ID eingegeben habe. Wir werden das ändern, um zu bekommen. Wir werden das löschen. Wir werden auf Senden klicken. Jetzt kopieren wir diese ID von dem Produkt, das wir dort haben. Wir werden es dort ablegen. Jetzt werden wir das ändern, um es zu platzieren. Jetzt werden wir es so haben. Wir werden auf Senden klicken und das aktualisierte Produkt erhalten. Wenn Sie nun zurückgehen, um diese ID abzurufen und zu löschen, und auf Senden klicken können Sie sehen, dass wir in unserer Datenbank jetzt A B statt Test AA haben, und wir können auch posten und es dann so lassen. Dort können wir Test AA machen. Wir werden ihr Bild-URL-Testbild verwenden. Jetzt werden wir auf Senden klicken. Jetzt werden wir auch CC testen. Wir werden auf Senden und DD testen klicken, auf Senden klicken. Jetzt ändern wir die Methode auf Abrufen, klicken auf Senden und Sie werden sehen, dass wir dort alle unsere Testdatensätze haben , die wir dort abgelegt haben. Jetzt können Sie all diese Routen ausprobieren, die wir gepostet, eingefügt und gelöscht haben. 6. FrontendSetup: Und jetzt wechseln wir zum Frontend-Ordner und beginnen dort mit der Codierung des Frontends Wir können diese schließen, ein Terminal öffnen, dann Terminal, wir machen CD. Frontend, wir werden die Tailwind-Befehle ausführen, die Sie auf telencss.com finden . Der erste ist dieser Ich setze dort den Punkt ein, damit das Projekt in diesem Frontend-Ordner erstellt wird . Jetzt werde ich das für die Installation ausführen. Dann das für die Initialisierung. Nun, dieser für die Installation der Bibliotheken, Sie finden diesen Befehl in der Beschreibung Jetzt gehen wir zur JS-Datei Tailwind Conflict über. Wir müssen dort diese Einstellung einfügen, wir für die Daisy-Benutzeroberfläche und natürlich auch für Rückenwind benötigen und natürlich auch für Um die richtige Typografie zu haben, werden wir außerdem als erste Option die CSS-Typografie benötigen und als nächstes die Option require Daisy UI angeben Andernfalls wird es nicht funktionieren. Du kannst dein eigenes Team zusammenstellen. Also habe ich dort den Platzhalter für mein Team eingefügt, in dem ich Primär-, Sekundärakzent und Neutrlor auswähle Sekundärakzent und Neutrlor Und wir verwenden dort auch einige DaisyUI-Teams, die hell, dunkel, Cupcake, Forest oder Business sind Cupcake Dann wählen wir aus, welche beiden für den Hell- und Dunkelmodus verwendet werden sollen für den Hell- und Dunkelmodus verwendet Jetzt fangen wir an, Ordner und Dateien zu erstellen. Zuerst erstellen wir im Frontend-Ordner eine DDentFle, in die wir auch Umgebungsvariablen einfügen Dort werden wir Wheat, React App, Backend, Basis-URL eingeben, und wir werden dort die Basis-URL unseres Backends eingeben, nämlich den lokalen HTDP-Host 3.000 Dann erstellen wir in der Quelldatei einen neuen Ordner mit Seiten Dann noch eins, das wird mit Kontext sein, dann noch eins, und das wird mit Komponenten sein. In Index-CSS werden wir die drei Till-End-Direktiven einfügen. Dann können wir Abdo CSS löschen. Und in ABD Jasix können wir alles löschen und es dort lassen, können wir alles löschen und es dort lassen nur um mit dem leeren Fragment zurückzukehren 7. Geschützte Routen: Bevor wir etwas erstellen, gehen wir zunächst auf Komponenten ein und erstellen eine neue Die Datei wird Protected Routes heißen. Mach JS sechs. Zunächst importieren wir zur Navigation die Kuppel des Reaktorrouters. Dann haben wir eine Funktion, um zu überprüfen, ob der Benutzer authentifiziert ist Im Inneren geben wir true zurück, wenn das Token im lokalen Speicher vorhanden ist Andernfalls geben wir false zurück. Dann definieren wir die geschützte Routenkomponente selbst. Und wir beginnen mit der If-Bedingung. Bei dieser If-Bedingung überprüfen wir, ob die erwähnte authentifiziert ist Falls der Benutzer nicht authentifiziert ist, wird er zur Anmeldeseite weitergeleitet, auf der er es erneut versuchen und sich anmelden oder registrieren kann es erneut versuchen und sich anmelden oder Falls dies der Fall ist und dies erfolgreich ist, rendern wir die untergeordneten Komponenten und am Ende exportieren wir die Komponente für die geschützte Route, sodass wir sie in Abdo J six reduzieren können Lassen Sie uns in Abdo J six diese beiden Importe durchführen. Dann importieren wir auch die erstellte geschützte Route und erstellen unsere erste Route innerhalb der leeren Fragmente Alles auf dieser geschützten Route beginnt mit Admin und innerhalb haben wir die anderen Routen. Um das etwas übersichtlicher werden wir eine neue Konstante mit Admin-Routen erstellen. Jetzt können wir es nehmen und in die geschützte Route einfügen. Also, jetzt werden wir alle Routen für unsere Admin-Oberfläche in diese Admin-Routen einfügen. Fangen wir mit dem ersten an. Gehen wir also zu Seiten und erstellen dort eine neue Datei. Es wird admin.j6 heißen. Dort werden wir das Snippet verwenden. Wir müssen es exportieren, also können wir zu Abdo J 6 gehen, und dort können wir den Admin-Import starten, ihn dann speichern und überprüfen , ob Außerdem werden wir es dort weiterleiten. Also Route-Path-Slash-Element wie dieses, und jetzt werden wir die Technologie einfach schließen Nun, wenn wir den Schrägstrich Admin machen, und das war's, weil es sonst nichts gibt Wenn es XIX geben wird, dann wir zu dieser Admin-Komponente, wenn wir den Admin-Schrägstrich XIX kommen wir zu dieser Admin-Komponente, wenn wir den Admin-Schrägstrich XIX verwenden Wir haben immer noch keine Anmelde - und Registrierungsfunktionen, aber wir werden sie etwas später tun Jetzt gehen wir einfach zu geschützten Routen, wir können uns einfach darüber lustig machen, indem wir das kommentieren und dort die Rückkehr eingeben Auf diese Weise kehrt es immer zurück, sodass wir immer authentifiziert werden Aber natürlich sollten wir es einrichten, um die Anmelde- und Registrierungsfunktionen zu implementieren Lassen Sie uns das Terminal und das CD-Frontend öffnen , NPM Run Dev ausführen und dort können Sie unsere Seite sehen 8. AdminDashboard: Jetzt können wir dort einen Klassennamen hinzufügen damit wir überprüfen können, ob alles funktioniert Jetzt um ein paar Probleme zu beheben. Wir müssen zu Abdo GS 6 gehen und unsere Route in Outtak einpacken. Wir werden das hinzufügen, dann werden wir zur Hauptroute von GS 6 übergehen Dort werden wir den Browser Router aus dem React Router Dome importieren und direkten Strict-Modus ändern und unsere App in den Browser Router-Text einbinden unsere App in den Browser Router-Text Wenn wir nun auf die URL mit dem lokalen Host gehen, den wir verwenden, und den Schrägstrich Admin eingeben, werden Sie sehen, dass unser Rückenwind funktioniert und wir den Dio-Text haben, den wir in unserem DIF haben Wir können also zur Admin-Seite zurückkehren. Zuerst importieren wir, verwenden Effect und Us State, ebenfalls aus React, dann Exios und dann Link von React Router Dome Wir werden den US-State-Hook verwenden, um den Produktstatus zu verwalten. Wir werden es als leeres Array initialisieren. Dann verwenden wir State Hook, um den Ladestatus zu verwalten, und dieser wird uns helfen weil wir dann das Laden verwenden werden, und falls es wahr sein sollte, werden wir den Spinner anzeigen Jetzt werden wir useEffectHok verwenden, um Nebenwirkungen in der Funktionskomponente auf unserer Admin-Seite auszuführen Nebenwirkungen in der Funktionskomponente auf unserer Admin-Seite Zuerst werden wir loading auf true setzen . Wir werden eine Gad-Anforderung stellen, um die Produktdaten von der API abzurufen Sie können sich Exiles als ein Tool vorstellen, das es unserer Anwendung ermöglicht, mit Servern zu kommunizieren und Daten abzurufen oder Unsere Verbannten bekommen also etwas und dann werden sie etwas tun, oder falls sie scheitern sollte, wird sie den Fehler auffangen Das ist also die URL , die wir im Postman verwendet haben , jetzt werden wir sie dort in Exis verwenden Also werden wir versuchen, diesen URL-API-Endpunkt zu bekommen. Falls wir eine erfolgreiche Antwort erhalten, werden wir den Produktstatus mit den Daten aktualisieren , die wir erhalten haben. Und dann setzen wir auch den Ladestatus auf „Fällt“. Falls wir scheitern, werden wir es abfangen, jeden Fehler protokollieren und dann auch den Ladestatus auf „Fällt“ setzen. Dann befindet sich in dieser letzten Zeile tatsächlich ein leeres Abhängigkeitsarray, und das bedeutet, dass dieser Effekt einmal ausgeführt wird , wenn die Komponente geladen wird. Gehen wir nun zur Benutzeroberfläche über, dort können wir beginnen. Wir werden den Klassennamen von dort löschen. Wir werden etwas Polsterung und maximale Breite hinzufügen. Ich kann dort auch etwas Hintergrundgrau 500 hinzufügen , damit wir sehen können, wo wir uns auf der Seite befinden Wir können also sehen, dass wir das auch mit Mx Auto zentrieren müssen. Jetzt fügen wir ein weiteres Div hinzu, weil wir über diesem Div immer noch eine Statistikkomponente haben werden , die wir noch nicht codiert haben. Und für dieses Div setzen wir die Auto-Klasse Overflow X weil wir das seitliche Scrollen aktivieren wollen Dann fügen wir die Tabelle selbst hinzu und fügen die Klassennamentabelle hinzu, weil wir Daisy UI verwenden und DUI eine Klasse für die Tabelle hat In der Tabelle werden wir einen Thad platzieren , der für den Tabellenkopf bleibt, TR , der für Tabellenzeilen bleibt, und jetzt sind wir die Tabellenüberschriften von neun Preis, Beschreibung und Kategorie, wir haben die erste Tabellenüberschrift leer, weil wir eine Schaltfläche beenden , die uns zu einer Seite führt , auf der wir ein neues Produktelement erstellen können. Darin können wir also einen Link mit dem Namen des Artikels platzieren. Derzeit haben wir immer noch keine Seite für die Erstellung eines neuen Artikels, also lassen wir sie leer und reparieren sie dann. Ich werde den grünen Hintergrund einstellen und danach den Hintergrund auf dunkleres Grün ändern Dann schicke ich Textgröße und -farbe, etwas Abstand und Randradius mit Jetzt müssen wir den Tabellenkörper bearbeiten, damit wir dort etwas Platz schaffen Im Inneren werden wir einen Tabellenkörper erstellen, und im Tabellenkörper müssen wir über das Produkt iterieren Und jetzt codieren wir eine Tabellenzeile und sie wird jedes Mal wiederholt, wenn sie über das Produkt-Array iteriert In unserer Tabellenzeile geben wir den Schlüssel als Produkt-ID und beginnen dann mit dem Klassennamen für den weißen Hintergrund Wenn wir den Mauszeiger über unseren Artikel bewegen, ändern wir ihn in eine etwas dunklere Farbe, was in unserem Fall Hintergrundgrau auf 300 ist Und jetzt fügen wir einfach die Tabellendaten in diese Tabellenzeile ein, die den Tabellenüberschriften An erster Stelle werden wir also ein Produktbild haben. Sie können also sehen, dass wir DIV mit dem Klassennamen Avatar verwenden, was von DSUI ist, und dann ein anderes Div mit Maske, ebenfalls von DSUI mit einer gewissen Breite Dann legen wir im Bild selbst die Quelle aus dem Produktpunktbild und, falls es nicht geladen werden kann, für den Produktpunkttitel fest Wir erhalten all diese Daten von Mongo DV, wo wir sie geladen In der nächsten Ausgabe werden wir den Punktnamen des Produkts anzeigen . Sie können es auch dort sehen Dann möchten wir die Preisbeschreibung und die Kategorie anzeigen , machen wir das. Als Preis zeigen wir gewissermaßen den Preis an, dann die Beschreibung, dann eine Kategorie, und das ist es vorerst. Sie können sehen, dass ich die Beschreibung hinterlassen habe, ohne das Produkt zuzuordnen . Das liegt daran , dass wir unserem Modell noch keine Beschreibung hinzugefügt haben. Ich wollte dort ein Feld belassen, falls Sie auch ein Feld für sich selbst hinzufügen möchten. Ich zeige dir jetzt, wie du zusätzliche Felder hinzufügen kannst, wir öffnen den Explorer. Im Backend gehen wir zu den Modellen. Im Barack-Modell werden wir dort eine Beschreibung hinzufügen. Es wird vom Typ Zeichenfolge sein, und das Erforderliche ist falsch, da dieses Feld nicht ausgefüllt werden muss Dann gehen wir zur Route der Produktroute über. Jetzt scrollen wir nach oben, um eine neue Produktroute zu erstellen. Dort bei einem neuen Produkt werden wir eine Beschreibung hinzufügen, also eine Beschreibung anfordern, aber die Beschreibung. Und jetzt können wir es testen, also werden wir Postman öffnen und übrigens, falls etwas bei Ihnen nicht funktioniert, stellen Sie sicher, dass Sie sich immer in einem CD-Backend-Ordner befinden, so wie ich es jetzt bin Und Sie haben den Server mit NPM-Lauftiefe laufen lassen, weil die Datenbank ständig verbunden sein muss Schauen Sie sich also einfach diese offenen Terminals an, die Sie dort haben Sie können sehen, dass ich das Frontend und auch das Backend laufen Manchmal kann es passieren, dass ein Fehler auftritt und der Backend-Server ausgefallen ist Sie müssen es also irgendwann überprüfen , da es sonst bei Ihnen nicht funktioniert Jetzt werde ich dort einige Testdaten auch mit dem Beschreibungsfeld eingeben auch mit dem Beschreibungsfeld Jetzt werde ich auf Senden klicken und Sie können sehen, dass es so eingefügt wurde. Wenn ich das jetzt so ändere, dass ich auf Senden klicke , kann ich sehen , dass ich ihre Artikel ohne die Beschreibungen habe, aber mein neuestes enthält das Beschreibungsfeld, das wir gerade bearbeiten. Also, was ich jetzt auch tun werde , ist , dass ich das einfach kopiere und einfüge, die Beschreibung nehme, sie speichere und jetzt wird es funktionieren. Und jetzt können Sie auf unserer Seite sehen, alle Artikel geladen sind. 9. DeleteAndEditProdukt: Seiten, wir werden eine neue Datei erstellen. Produkt G sechs bearbeiten, auch Produkt G sechs löschen. Dann werden wir AFC verwenden, also wird es das Snippet aus der Erweiterung ES seven plus verwenden der Erweiterung ES Dort kannst du es auch herunterladen. Jetzt gehen wir zu AG Six, wo wir diese beiden neuen Seiten importieren werden. Und wir werden sie auch weiterleiten. Wir werden ihre Route zur Route der Admin-Routen hinzufügen. Geben Sie zusammen mit der ID den Pfad ein, in dem das Produkt, die Bearbeitung oder das Löschen erfolgen soll. Unter Produkt bearbeiten beginnen wir mit den Importen. Zunächst importieren wir Notice Tech für die Snackbar, die wir für Benachrichtigungen verwenden werden. Dann importieren wir mit React auch den Use-Status und verwenden Effect-Hooks, React Roterdm und auch Wir werden den State-Hook für Formularfelder und den Ladestatus festlegen Formularfelder und den Ladestatus Wir werden den Namen, die Preisgestaltung und die Kategorie aktualisieren . Und wenn Sie ein Feld bearbeiten, wie zum Beispiel die Beschreibung, werden Sie dort auch so bearbeiten. Beschreibung, Satzbeschreibung und der Standardwert werden leer sein. Dann machen wir einen Hook zur Navigation. Das heißt, nachdem wir unser Produkt erfolgreich bearbeitet haben , werden wir zum Admin-Dashboard weitergeleitet. Ich meine noch nicht, aber dafür werden wir diese Navigationsfunktion verwenden. Als Nächstes werden wir einen Hook ausführen, um den ID-Parameter aus der URL abzurufen, und dann die Snackbar. Das bedeutet, dass wir die Benachrichtigung für den Fall anzeigen, dass wir unser Produkt erfolgreich oder nicht bearbeiten können. Wir erstellen einen Effekt-Hook, um die Produktdetails abzurufen , wenn unsere Seite geladen wird Wir beginnen damit, das Laden in den Raum einzustellen. Dann wie zuvor verwenden wir zuerst Exiles. Wir werden versuchen, die Antwort von diesem Endpunkt zu erhalten , wo wir auch diese ID einfügen Falls Sie sich nicht erinnern, haben wir in unserer Produktroute die ID als erforderlichen Parameter für die Produktaktualisierung festgelegt , da wir wissen müssen, welches Produkt wir aktualisieren möchten Falls wir dann erfolgreich sind, setzen wir den Feldwert auf die Antwort. Geben Sie also Name, Preis, Weihrauch, Beschreibung und Kategorie an. Dann werden wir auch den Ladevorgang auf „Stürze“ einstellen. Also, nachdem wir dort eine Runde gedreht haben , wird es aufhören sich zu drehen. Falls das fehlschlägt, fangen wir den Fehler dort ab, setzen den Ladevorgang auf „Falls“, protokollieren ihn und senden dann eine Warnung, dass etwas passiert ist. Und was ist mit dem Dependency Array? Jetzt wird es nicht leer sein, aber wir haben ihre NID Und das bedeutet, dass dieser Effekt ausgelöst wird, wenn die ID geändert wird Jetzt erstellen wir einen Handle für die Bearbeitung des Produktartikels. Zuerst müssen ihre Daten in der Put-Anfrage gesendet werden, dann setzen wir Loading auf true und wir haben ihre Excise Zunächst stellen wir eine Anfrage zur Aktualisierung des Produktartikels. Und wenn wir dann erfolgreich sind, setzen wir den Ladevorgang auf Null. Wir zeigen dann die Erfolgsmeldung oder die Erfolgsmeldung an, wie Sie dort QsncBR sehen können, und dann navigieren wir zum Wann immer dies von dieser Seite aus erfolgreich war, werden wir automatisch zum Admin-Dashboard weitergeleitet Falls es fehlschlägt, wird der Fehler dort angezeigt. Wir werden das Laden auf Stürze einstellen. Wir werden die Fehlerbenachrichtigung senden und den Pfeil auch in der Konsole protokollieren. Und um auf unsere Seite zu gelangen, auf der wir DUI tatsächlich programmieren werden, gehen wir zu Admin J six Dort mussten unten, unter der letzten Tabelle Daten, eine neue Tabelle erstellt, vorher der Klassenname für die Tabellendaten eingetragen werden Erstellen Sie jetzt Ihr Fernsehgerät mit Klassen des Flexbox-Layouts, sodass wir Justify Center verwenden können, um es horizontal zu zentrieren und dann X eins zu drücken, um eine Lücke zwischen diesen beiden Links zu haben Wir haben den Link für die Bearbeitung. Wenn wir es jetzt durchgehen, können Sie es anhand des Pfads Admin product slash Edit sehen und dann sendet es auch die ID des Produkts Denken Sie daran, dass wir die Produkte dort immer noch überarbeiten. Wir haben also die ID des Produkts und können sie dort verwenden, und wir senden sie an Path, dann haben wir einige Klassennamen, also werden wir den Hintergrund auf Orange setzen und bei Her werden wir es etwas dunkler machen Dann werden wir den Text weiß und die Schriftstärke einstellen. Außerdem legen wir dort den Rahmenradius und die Textgröße fest und verwenden ein gewisses Maß an Polsterung Sie können es im Grunde einfach kopieren und einfügen , weil es fast identisch sein wird Nur im Pfad wird gelöscht statt bearbeitet. Außerdem ändern Sie die Hintergrundfarbe und wir ändern den Text. Es wird nicht bearbeitet, aber es wird gelöscht. Jetzt wählen wir auf unserer Seite ein Produkt aus und klicken auf Bearbeiten. Dadurch gelangen wir zu der Seite, Dadurch gelangen wir zu der Seite auf der wir gerade programmieren. Gehen wir also auf die Seite und dort können wir anfangen. Zuerst verwenden wir im Hauptbereich etwas Bettwäsche, Hintergrund grau bis 50, Flexbook-Layout, damit wir die Artikel zentrieren können Dann machen wir ein weiteres Div mit der Containerklasse , die aus dem AZUI stammt Wir werden etwas mit dem Schatten mischen, dann Randradius, Bettung und Hintergrund auf Weiß setzen Bettung und Hintergrund auf Weiß Und falls wir zurückgehen möchten, verwenden wir diesen Link zu B. Also geben wir dort Admin ein, dann zentrieren wir im Klassennamen den B-Text. Stellen Sie den Hintergrund für diese Schaltfläche ein, etwas Abstand, sodass sie tatsächlich wie Schaltfläche, Rand mit Textgröße und I-Randradius aussieht Rand mit Textgröße und I-Randradius Dann fahren wir mit dem Titel für diesen Abschnitt fort. Wir werden es Produkt bearbeiten nennen. Wir legen eine bestimmte Textgröße fest, angefangen bei halbfett bis senkrechtem Rand, und wir stellen die Textfarbe auf Textgrau 800 ein. Jetzt bereiten wir das DI für die Eingabefelder vor. Also machen wir ein DIF mit einem vertikalen Rand von vier. erste Eingabe erfolgt für den Namen, also haben wir das Label mit dem Namen und seiner Eingabe In Label machen wir HTML vier, wo wir einen Namen eingeben. Für Klassennamen setzen wir Block, Textmedium und Textgrad auf 600 mit einem unteren Rand, und für die Eingabe setzen wir ID auf den Namen des Texts. Der Wert wird ebenfalls auf den Namen gesetzt, und bei Änderung setzen wir den Namen für den Zielwert, den wir dort haben. Für den Klassennamen dieser Eingabe legen wir einen bestimmten Rahmen fest, und wir werden auch die Rahmenfarbe, etwas Abstand, mit dem vollen Rand festlegen , und wir werden dort auch einen gewissen Randradius verwenden Und jetzt wird es für alle anderen Eingaben im Grunde dasselbe Aber einige Werte werden sich ändern: Dieser HTML-Code, diese ID, der Typ, natürlich der Wert und der Use-State-Hook. Aus Gründen der Preisgestaltung werden wir es auf diese Werte ändern, aber ansonsten werden dieselben Werte wie zuvor verwendet. Gleiche gilt für die Beschreibung mit festgelegter Beschreibung, Das Gleiche gilt für die Beschreibung mit festgelegter Beschreibung, ID und HTML vier, natürlich auch mit dem Labeltext. Für die Kategorie werden wir auch ihre Optionen hinzufügen, da es sich um eine Auswahlliste handelt. Sie haben also die Möglichkeit , eine Kategorie und dann Fluch und Vorlage auszuwählen . Wir werden die Werte , die dann gesetzt werden, dort haben und anhand dieses Nutzungsstatus gelesen werden. Ansonsten ist wieder alles beim Alten. HTML vier wurde in Kategorie geändert, ID ist Kategorie, Wertkategorie, Klassen sind identisch, und wir haben dort eine Anforderung eingegeben weil wir den Auswahllistenwert auswählen müssen Außerdem handelt es sich hier nicht um eine Eingabe, sondern um eine Auswahl Achten Sie also auf diesen Text Um diese Bearbeitung zu bestätigen, haben wir dort eine Schaltfläche mit sicheren Änderungen. einem Klick wird dieses Handle „Produkt bearbeiten“ aufgerufen , das wir dort codieren. Dann setzen wir unseren Klassennamen auf „Voll“. Wir setzen den Hintergrund auf Grün und verwenden ein dunkleres Grün, dann Text auf Weiß, etwas Abstand und einen Randradius mit einem Rand nach oben Jetzt können wir die Funktionalität testen, und dann verspreche ich, dass wir die Benutzeroberfläche besser aussehen lassen werden Also lasst uns TBB auf Test BB ändern und es bearbeiten. Dann können wir den Preis auch in Bezug auf Sinn, Beschreibung und Kategorie ändern Sinn, Beschreibung und Kategorie Änderungen speichern. Jetzt können Sie sehen, dass es bearbeitet wurde. Und wenn wir in MongoDB gehen, können Sie sehen, dass es auch dort bearbeitet wurde Gehen wir nun zu den Dateien dort in Min J six, und dort werden wir unsere Anwendung in den Text des Snack Bar-Anbieters einbinden Lassen Sie uns also unsere Anwendung hineinlegen. Lassen Sie uns es auch importieren. Wenn wir also genau das tun, wird es automatisch importiert. Wenn wir jetzt zu unserer Seite zurückkehren, können wir erneut versuchen, etwas zu bearbeiten. Jetzt lassen wir dieses Feld leer. Wir werden die Änderungen speichern und Sie können sehen, dass wir einen Fehler erhalten haben , falls wir ihn ausfüllen und speichern. Sie können die erfolgreiche Benachrichtigung sehen. Also noch einmal, machen Sie die JA 6, packen Sie unsere Anwendung beim Snack Bar-Anbieter ein, importieren Sie sie und sie wird funktionieren. Um nun endlich ein Team zusammenzustellen, gehen wir zu Indexpunkt-HTML und dort in der HTML-Technologie werden wir Datenteam zu Light machen. Jetzt sieht es endlich besser aus, und wenn wir zur Bearbeitung gehen, können Sie auch sehen, dass es dort gut aussieht. Und jetzt zum Löschteil. Lass uns dort auf einen Artikel klicken. Klicken wir auf Löschen. Also kommen wir zur Seite VS Code, wir werden product.j6 löschen Lassen Sie uns zuerst die Importe wie zuvor durchführen, dann die Hooks. Zuerst eine für den Ladestatus, Navigation, Abrufen der ID aus der URL. Und die Snackbar für die Benachrichtigungen. Jetzt erstellen wir einen Handler zum Löschen des Produktelements. Wir setzen Loading auf true und dann entfernen wir mit der Löschfunktion. Wir rufen den Endpunkt auf, um das Produkt zu löschen Falls wir erfolgreich sind, setzen wir das Laden auf die Fehlmeldung, wenn das Produkt gelöscht wurde , und navigieren dann zum Admin-Dashboard Falls es fehlschlägt, setzen wir das Laden auf „Falsch“, senden auch eine Fehlerbenachrichtigung und protokollieren den Fehler Im Haupt-Div verwenden wir einen grauen Hintergrund und dann ein Flexbox-Layout, sodass wir die Elemente mit justify und items center zentrieren können die Elemente mit justify und items Im Inneren werden wir ein weiteres Div mit dem Klassencontainer erstellen, das von der DaisUI stammt Wir werden eine maximale Breite für Schatten und Pedding festlegen. Wie zuvor werden wir in Edit product GS six dort eine Zurück-Schaltfläche erstellen Und da es absolut dasselbe ist, möchte ich es erklären, und ich werde zur zweiten Überschrift übergehen, wo wir fragen werden: Möchten Sie dieses Produkt wirklich löschen? Zu diesem Zweck werden wir einige Klassen mit Textgröße, Textstärke, Abstand zum unteren Rand und Textfarbe festlegen . Und dann kann die Antwort darin bestehen auf eine Schaltfläche mit Ja, löschen zu klicken. Andernfalls klickt der Benutzer einfach auf eine B-Schaltfläche. Falls der Benutzer auf die Schaltfläche Löschen klickt, wird das Handle Produkt löschen aufgerufen, was wir dort getan haben. Und die Klasse für diese Schaltfläche zum Löschen wird ein roter Button mit dunklerem Rot auf Her , weißer Text, etwas Abstand, Radios am Rand und mit zu voll Jetzt können wir es auf der Seite überprüfen und versuchen, das Produkt zu löschen Klicken wir auf Löschen. Sie können sehen, dass das Produkt gelöscht wurde und es auch aus unserer Artikelliste verschwunden ist. 10. Spinner: Bevor wir nun mit der Entwicklung des Produkts GS six fortfahren, werden wir einen Spinner erstellen Lassen Sie uns die Dateien dort öffnen, und diese wird in Components enthalten sein Erstellen Sie also in Komponenten eine neue Datei dem Drehpunkt JS 6. Benutze das Snippet dort Für dieses Div verwenden wir nun ein Flexbox-Layout, richten die Elemente so aus, dass sie zentriert sind, und die Seite bestimmt die Höhe zum und die Seite bestimmt die Höhe Für das nächste Div setzen wir für anhight den Wert auf 16, Rand auf vier Pixel, den Rahmenstil auf gestrichelt, runden das Ganze ab, sodass es Animieren Sie den Spin, mit dem wir in einer Minute Index-Punkt-CSS erstellen werden Index-Punkt-CSS erstellen Dann primärer Rand, also verwenden wir die Primärfarbe, die obere Randfarbe transparent Für den animierten Spin gehen wir dort zuerst zu Index-Punkt-CSS mit Keyframes, Spin, wobei wir die Drehung um 360 Grad verwenden, und dann für den animierten Spin, wo wir die Animation auf Spinning, 1-Sekunde, Linear und Endlosschleife einstellen 1-Sekunde, Linear und Endlosschleife Gehen wir nun zu Edit Product GS six und dort in der Rückseite unter dem Anfang des Haupt-Edits fügen wir den Spinner Es wird eingegeben, also wird es importiert und gespeichert. Wenn wir jetzt auf unsere Seite gehen, werden Sie sehen, dass der Spinner da ist Sie beenden es dort erst, wenn die Seite geladen wird. Was wir also tun werden , ist, dass wir beim Laden geschweifte Klammern dort setzen beim Laden geschweifte Klammern dort Und falls das stimmt, wird der Spinner generiert. Jetzt werde ich es speichern Wenn Sie die Änderungen speichern, können Sie sehen, dass der Spinner für eine sehr kurze Zeit da war , weil das Speichern eigentlich ziemlich schnell war Jetzt können wir den Spinner auch hinzufügen, um die Seite zu löschen. Also lass uns das einfach kopieren. Gehe zum Produkt löschen. Lass uns dort bearbeiten. Löschen Sie nun das letzte Leder und drücken Sie die Eingabetaste. Auf diese Weise wird es importiert. Und von nun an können wir den Spinner überall dort verwenden, wo wir den Ladestatus haben 11. Cloudinary: Bevor wir eine Benutzeroberfläche zum Hinzufügen eines Elements erstellen können, müssen wir ein Cloudinary einrichten Es wird nicht effizient sein, so große Bilder in MongoDB hochzuladen , also laden wir sie in einen separaten Speicher Wir werden die URL abrufen und in einer Zeichenfolge die URL in MongoDB speichern Dann greifen wir auf die URL und zeigen die Bilder auf unserer Seite Gehen wir zu cloudinary.com. Klicken Sie auf Get Started. Dort wirst du dich anmelden. Dann kannst du dort etwas auswählen. Lass uns anfangen. Dort scrollen Sie nach unten, klicken auf Anmeldeinformationen anzeigen und verwenden dann diese Anmeldeinformationen. Wir nehmen diesen Cloud-Namen, den API-Schlüssel und das API-Geheimnis. Gehen Sie in die Umgebungsvariablen und dort erstellen wir den Cloud-Namen, API-Geheimnis und den Schlüssel. Sie fügen dort alle Werte ein, die Sie in Ihrer Cloud-Binärdatei haben, und dann wechseln wir zur Medienbibliothek, wo wir alle unsere Bilder finden, die wir hochladen werden. Wenn wir jetzt zu Index Dogs gehen, können wir damit beginnen, die Route zu programmieren , auf der unsere Bilder tatsächlich laut werden Jetzt konfigurieren wir Cloudinary-Anmeldeinformationen anhand von Umgebungsvariablen. Also zuerst der Cloud-Name, der API-Schlüssel und dann das API-Geheimnis Jetzt fügen wir mit dieser Upload-Nutzung eine Cloudinary-Instanz hinzu. Wir stellen also sicher, dass Cloudinary vor der nächsten Route , die folgt, zugänglich Also das Speichern und Hochladen des Bildes. Jetzt konfigurieren wir Multi Storage so, ein Cloudinary zum Speichern unserer Bilder verwendet Wir werden die Cloudinary-Instanz ausführen und dann die Parameter festlegen erste Parameter ist der Ordner für unsere Bilder, also Bilder Und dann legen wir die erlaubten Bildformate fest , nämlich JPEG und PNG. Was wir dort tun, ist, dass wir einen Parser erstellen , der Moltorlibrary verwendet, wir für die Bearbeitung der Datei-Uploads verwenden , und die Speicherkonfiguration ist das Objekt, das wir dort festlegen, um festzulegen, wie und wo die hochgeladenen Dateien gespeichert werden sollen Jetzt erstellen wir eine Route für Hochladen des Bildes in die Wir machen das mit der Post-Methode und die Route wird Upload Image heißen Wir werden einen Parser verwenden, um eine einzelne Datei hochzuladen, und dann mit der If-Bedingung prüfen wir, ob die Datei da ist Falls dies nicht der Fall ist, wird der Status 400 zurückgegeben , ohne dass eine Datei hochgeladen wurde Dann erstellen wir einen TryCatch-Block. Und wir erstellen eine If-Bedingung wenn wir den Pfad für die Datei haben Falls nicht, geben wir einen Fehler zurück Datei hochgeladen wurde, aber kein Pfad verfügbar ist. Falls es den Pfad gibt, geben wir die Datei-URL zurück. Und falls dieser weltweite Block fehlschlägt, werden wir dort einen Fehler finden und einen Status 500 mit dem internen Serverfehler zurückgeben . 12. CreateProduct: Jetzt gehen wir zu Seiten und erstellen die neue Datei. Erstellen Sie product.j6. Da schneiden wir es ab. Dann gehen wir zu einem Hund JSix. Dort können wir das kopieren, dort einfügen, dort eingeben, Produkt erstellen Drücken Sie die Eingabetaste, auf diese Weise wird es importiert, und dort ändern wir den Pfad in den Schrägstrich „Produkt erstellen Jetzt gehen wir zu admin.j6 und dort unter item fügen wir einen Link hinzu, und das führt uns zu Admin-Slash Create . Zuerst führen wir die Importe durch und dann erstellen wir Statusvariablen für alle Felder, dann erstellen wir Statusvariablen die wir für unser Produkt haben Und jetzt auch bei der Bildvorschau. Das heißt, wenn wir das Bild laden, sehen wir die Vorschau auf unserer Seite, bevor wir es bestätigen und hochladen, und dann auch die Statusvariable für das Laden, um den Spinner anzuzeigen Dann haken Sie für die Navigation ein. Wenn wir erfolgreich sind, werden wir Advantage-Board und zur Snackbar weitergeleitet, in der die Benachrichtigungen angezeigt werden. Wir werden ihren Handler für die Änderung von Dateieingaben erstellen. Wir erstellen eine Konstante für die ausgewählte Datei, die wir aus dem Eingabeereignis erhalten. Wir werden den Bildstatus mit der ausgewählten Datei aktualisieren und dann für die ausgewählte Datei eine Ils-Bedingung ausführen. Falls wir Dateien ausgewählt haben, und das ist wahr, erstellen wir eine neue Dateireader-Instanz und stellen die Bildvorschau auf die Datei ein, wir laden sie hoch. Und diese Methode , die als Daten-URL lesbar ist, ist, dass sie den Inhalt der ausgewählten Datei liest und ihn in eine kodierte Zeichenfolge konvertiert Außerdem fügen wir den Wert für die Bildvorschau auf Null setzen , falls die ausgewählte Datei falsch ist, also nicht da ist Wir werden eine Funktion zum Hochladen einer Datei in die Cloud-Binärdatei erstellen. Zuerst müssen wir überprüfen, ob wir ein Bild zum Hochladen haben Falls nicht, senden wir die Warnmeldung , ohne dass ein Bild ausgewählt Falls wir das Bild haben, fahren wir fort und erstellen sofort neue Formulardaten an die wir unser Bild anhängen Dann erstellen wir einen Tricatblock. In Trblock erstellen wir eine Upload-URL, und Sie können dort die Route zum Hochladen von Bildern sehen, die wir in Index Dogs für das Hochladen der Dateien in Cloudinary verwendet haben Index Dogs für das Hochladen der Und wir werden die Post-Anfrage senden, um die URL mit den Bilddaten hochzuladen Aus der Cloud-Binärantwort erhalten wir nun die URL, die die URL für unser hochgeladenes Bild ist die URL für unser hochgeladenes Bild Dann werden wir die URL des hochgeladenen Bildes überladen , damit wir sie noch einmal überprüfen können, und wir werden eine Benachrichtigung senden , dass das Bild erfolgreich hochgeladen wurde Am Ende geben wir die SecURL zurück. Wenn wir also diese Funktion zum Hochladen von Dateien aufrufen und sie erfolgreich sein wird, werden wir die URL daraus abrufen Falls dies fehlschlägt, werden wir dort den Fehler mit der Benachrichtigung angeben, dass ein Bild nicht hochgeladen werden kann. Und jetzt machen wir die große Funktion selbst, um alle Felder hochzuladen, sogar mit dem Bild für unser Produkt, und wir nennen es handlesafe-Produkt Wir überprüfen, ob die erforderlichen Felder ausgefüllt sind, und falls wir eine Benachrichtigung senden, füllen Sie bitte alle Wir haben den Operator oder Falls also einer dieser Werte falsch ist, also leer ist, wird diese Benachrichtigung gesendet. Dann überprüfen wir , ob der Preis eine positive Zahl ist, und falls nicht, senden wir die Benachrichtigung erneut. Außerdem legen wir die neue Preiskonstante fest, weil wir den Preis von Weihrauch in eine Ganzzahl umwandeln Dann setzen wir loading auf true und verwenden es für den Spinner-Eter, und wir werden dort einen TryCatch-Block erstellen Zuerst werden wir versuchen, das Bild hochzuladen. Sie können sehen, dass wir auf die Upload-Datei warten werden , die wir dort haben. Falls wir nicht erfolgreich sind und diese Funktion fehlschlägt, erhalten wir eine Fehlermeldung, dass das Hochladen des Bilds fehlgeschlagen ist. In anderen Fällen, wenn wir erfolgreich sind, fahren wir dort fort und bereiten die Formulardaten für das Speichern des Produkts vor. Dann senden wir eine Postanfrage , um das Produkt mit den Formulardaten zu speichern Falls wir erfolgreich sind, senden wir eine Benachrichtigung darüber und den Benutzer dann zu einem Admin-Dashboard weiter. Falls dieser Dryblock fehlschlägt, senden wir eine Benachrichtigung über den Fehler und protokollieren ihn. Außerdem fügen wir einen abschließenden Block hinzu, in dem wir den Ladestatus auf „Falsch“ setzen den Ladestatus auf „Falsch“ um anzuzeigen, dass der Vorgang abgeschlossen ist Jetzt werden wir JS Six programmieren, damit wir unsere neuen Funktionen testen können. Wir werden jetzt ein bisschen schummeln. Oder vielleicht ist es besser, es so zu nennen , dass wir kluge Entwickler sein werden Was wir tun werden, ist, dass wir zu Produkt J sechs bearbeiten gehen und dort tatsächlich die Wand J sechs nehmen werden. Kopieren Sie es und fügen Sie es in unser Create-Produkt ein. Jetzt haben wir es also. Und anstatt zu bearbeiten, werden wir dort Create platzieren. Als Nächstes scrollen wir nach unten und diese Schaltfläche speichert keine Änderungen, sondern nur. Auch beim Klicken wird Handle Edit product nicht aufgerufen , weil wir diese Funktion dort nicht einmal haben. Es ist nur da, aber es wird die Funktion handleSAFPDuct aufrufen. Wir können also einfach dieses eine Wort löschen, handleSAFPduct, und wenn Sie dort doppelklicken und Satterf ausführen, können Sie sehen, dass wir diese Funktion zum Speichern des und wenn Sie dort doppelklicken und Satterf ausführen, können Sie sehen, dass wir diese Funktion zum Speichern des Produkts verwendet haben. Jetzt müssen wir drei weitere Dinge hinzufügen, drei weitere Dinge So ähnlich wie dieses Label und Input, werden wir eines für das Bild wie dieses erstellen, und es wird tatsächlich dasselbe sein. Auf dem Label steht Bild hochladen, HTML 4 ist Bild, ID-Bild, Typ ist Datei, außer dass es ein Schrägstrich ist und bei der Änderung wird es diese Handle-Dateiänderung aufrufen, die wir gemacht haben Dann wird es auch benötigt, und eine weitere Sache, die wir dort hinzufügen müssen, ist die Bildvorschau Dafür verwenden wir einen ähnlichen Render, wie wir ihn für Spinner verwenden Wir werden überprüfen, ob die Bildvorschau wahr ist, und falls ja, werden wir diesen HTML-Code generieren Dabei werden wir einen Diff haben, der das Bild umhüllt, und die Quelle des Bildes wird die Bildvorschau sein. Sie können dort wieder sehen, dass die Bildvorschau unsere Statusvariable ist, und wir setzen sie in dieser Handle-Dateiänderung. Wir stellen dort ein und mischen mit auf voll und Height auf automatisch, das ist so ziemlich alles. Wenn Sie das noch einmal überprüfen möchten, werde ich es langsam durchgehen. Aber es ist im Grunde dasselbe wie bei „Produkt bearbeiten“, aber wir fügen eine andere On-Click-Funktion für die Schaltfläche, Bildvorschau und die Eingabe für das Bild hinzu. Wir müssen da eine Kleinigkeit reparieren. Es ist eigentlich nicht Admin Create. Es ist Admins Product Slash Create. Wenn du es jetzt speicherst, befinden wir uns jetzt auf unserem Lok-Host mit dem Slash Admin, also sind wir Wir klicken auf Adm und gelangen zu einem Formular zum Erstellen eines Produkts. Und jetzt testen wir es Füllen wir also die Daten aus und laden wir ein Bild hoch. Wir klicken auf Speichern. Endprodukt mit Bild, das wir erfolgreich gespeichert und hochgeladen haben. Jetzt können Sie unseren neuen Artikel sehen. Sie können dort die Bildvorschau sehen. Jetzt können wir die alten Daten löschen. Ich habe zwei Kurse und eine Vorlage erstellt, und inzwischen haben wir alle Aktionen zum Erstellen, Lesen, Aktualisieren und Löschen, auch bekannt als Rat, behandelt . Und es ist an der Zeit, sie unseren Kunden auf der Benutzeroberfläche zu zeigen. 13. Zuhause: Wir werden jetzt diesen Admin löschen, wir werden den Kundenkontakt programmieren. Jetzt gehen wir zu Seiten, erstellen eine neue Datei, Home Dot JS Six. Wir werden das Snippet dort verwenden. Jetzt gehen wir in Abdo GSSIX und dort in Routen, aber nicht in der Admin-Route, wir werden eine neue Route für die Homepage erstellen Wir werden dort diesen Pfad und auch Element Home angeben. Dann importieren wir das von uns erstellte Zuhause. Dort importieren wir Effect und State Hook und Eos State in alle Produktartikel, und wir werden Effect Dook weiterhin verwenden um die Daten abzurufen, wenn diese Seite geladen wird Wir werden eine HTTP-Anfrage stellen, um die Produktdaten abzurufen Das heißt, wir rufen diesen Endpunkt zusammen mit dem Produkt auf. Und wenn Sie sich erinnern, haben wir in Postman genau das getan , um all die Produkte, die wir haben, in unsere MongoIB Dann setzen wir die Abrufdaten auf den Produktstatus. Und falls wir nicht erfolgreich sind, werden wir alle Fehler auf der Konsole sperren Außerdem bedeutet dieses leere Abhängigkeitsarray , dass dieser Effekt einmal ausgeführt wird , wenn die Seite geladen wird. Für den Hauptunterschied legen wir maximale Gewichtung auf 1.300 Pixel fest und zentrieren ihn mit Mix Außerdem werden wir einige Zusammenführungen in Top und Padding hinzufügen. Im Inneren werden wir ein weiteres Div mit Klassenheldeninhalten machen, und dieser Inhalt ohne Inhalt ist eine Klasse von DZI Innerhalb dieses Null-Inhalts erstellen wir ein weiteres Div mit einer gewissen Maximalgewichtung, und dort fügen wir eine Textbeschreibung und einen Shop-Button hinzu Zunächst werden wir die Benutzer auf unserer Seite begrüßen. Wir werden den Namen der Seite in den Spentex dort eine andere Textfarbe hinzufügen , um sie hervorzuheben Dann fügen wir dort etwas Text und die Schaltfläche hinzu, die unseren Benutzer später zu einem Shop selbst weiterleitet unseren Benutzer später zu einem Shop selbst 14. ProductCard: Jetzt werden wir alle Produkte laden, aber dafür werden wir zwei separate Komponenten erstellen , die unseren Code sauber halten Gehen wir zu den Komponenten und erstellen wir eine neue Datei. Produkteinzelkarte J sechs und Produktkarte.g6. In der Produktkarte importieren wir zunächst eine einzelne Produktkarte, da diese JS 6 als Layout für all diese Einzelkarten verwendet wird als Layout für all diese Dann erhält diese Komponente ein Produktobjekt als Requisite und zeigt die zugehörigen Informationen Für das Haupt-Div verwenden wir ein Rasterlayout, und wir werden auf einem großen Bildschirm einen Rasterspaltenbaum verwenden Dann verwenden wir auf einem kleineren Bildschirm zwei Rasterspalten, und auf dem mobilen Bildschirm verwenden wir eine Rasterspalte , die wir nicht definieren müssen , da es sich um einen Standardwert handelt. Dann legen wir die maximale Breite von 1.200 Pixeln fest, sodass zwischen den Elementen ein gewisser Abstand Wir werden dies mit Mix Auto zentrieren, und wir zentrieren auch die Elemente mit der Option Objekte in der Mitte platzieren Dann werden wir die Produkte überarbeiten. Und für jedes Produkt nennen wir das Komponentenprodukt Einzelkarte , das Komponentenprodukt Einzelkarte wir direkt danach codieren, und wir geben den Schlüssel mit der Artikel-ID und das und wir geben den Schlüssel mit Produkt zusammen mit dem Artikel ein Jetzt gehen wir auf dc.com auf die Karte im Panel und wählen dort eine Karte aus, die uns gefällt Dann wählst du die J Six aus und kannst den Code kopieren. Geben Sie dann den Code in diese Rücksendung auf unserer Produkteinzelkarte eine Sechs ein. Vergessen Sie auch nicht, dort eine Produktrequisite anzubringen. Damit alle unsere Produktbilder gut ausgerichtet sind, stellen wir dort die volle stellen dort eine feste Höhe ein Stellen Sie ihr Objekt auch auf Titelseite und Objekt auf Oberseite ein. Außerdem werden wir die Quelle als Produktpunktbild festlegen. Alt als Produktname und dann auf den Kartentext und die Beschreibung setzen wir den Kartentitel als Produktnamen, dann die Beschreibung, und falls die Beschreibung nicht verfügbar ist, zeigen wir keine verfügbare Beschreibung an, und dann teilen wir den Preis auf und zeigen ihn in Dollar an. Derzeit ist es also in Cent, und wir können es so umrechnen. Es ist auch möglich, ein Zahlenformat zu haben und es zu verwenden. Jetzt machen wir es auf einfachere Weise. Dann fahren wir nach Hause, Jasix, und dort fangen wir an, die Produktkarte zu schreiben Drücken Sie auf diese Weise die Eingabetaste, es wird importiert. Dann müssen wir dort eine Requisite einrichten, die Produkt als Produkt lautet, speichern Und wenn wir dann auf unsere Seite gehen, werden wir dort alle Artikel sehen, die wir in unserer Mongo-DB bearbeiten Jetzt sehen Sie alles, was wir dort im Admin-Dashboard bearbeiten , löschen oder hinzufügen, auch auf dem Kunden, der dort zu sehen ist Gehen wir also zu diesem Artikel. Lass es uns bearbeiten. Speichern Sie die Änderungen, kehren Sie zur Kundenseite zurück, aktualisieren Sie die Seite und wir können die Änderung dort sehen. Versuchen wir nun, einen Artikel hinzuzufügen. Und jetzt können wir es an unserem Kunden sehen. Und jetzt erstellen wir eine Karte. So können wir dort die Produkte hinzufügen , die wir kaufen möchten, und dann auschecken. Für eine Karte müssen wir eine Navigationsleiste hinzufügen . Also lass uns eins nach dem anderen gehen. 15. NavbarAndThemeToggle: Zwei Komponenten. Dann erstellen Sie eine neue Datei, nowbar.j6, und dort verwenden Sie das Snippet, gehen zu AP J 6 und bearbeiten die obigen Also, jetzt Bar, importiere es. Du kannst zu daisy.com gehen und dort in der Navbar auswählen, was Ich gehe zu J Six, kopiere es und füge es auf meiner Seite ein. Sie werden es dort einfügen, aber ich habe eine modifizierte Version, und ich werde sie durchgehen. Aber bevor ich es durchgehe, zeige ich Ihnen, was ich tatsächlich importiert habe, und wir müssen nur den Link importieren , damit das Scrollen reibungslos funktioniert. Wir werden diese Link-Technologie verwenden. Statt des Anchor-Tags gehen wir dorthin. Um diese Navigationsleiste zu vervollständigen, müssen wir nun zwei weitere Komponenten erstellen. erste ist die Team-Tabellen-Schaltfläche, Chassis und die zweite, die das Kartensymbol sechs sein wird Was wir in Dem Toggle tun werden, ist use state und usefect zu importieren Dann definieren wir eine Statusvariable für den Dunkelmodus und fahren mit usefecdok fort , um das anfängliche Team auf der Grundlage des aktuellen Teamattributs festzulegen auf der Grundlage Wir werden das aktuelle Team aus dem dokumentarischen Element ermitteln Sie können dort das Datenteam sehen, und wenn Sie sich jetzt erinnern und zu Index gehen, ist HML das , was wir dort eingestellt haben Wir setzen den Dunkelmodus auf der Grundlage der aktuellen Werte ein. Dann müssen wir die Funktion zum Taglen des Teams ausführen. Also nennen wir es TagleTM und wir erstellen das neue Team auf der Grundlage des aktuellen Dunkelmodus Falls der Dunkelmodus also wahr ist, wird es Cupcake Team sein, und falls er falsch ist, wird es Dann holen wir uns das Datenteam und stellen dort das neue Außerdem schalten wir den Modus Ist dunkel um. Jetzt verwenden wir diese Umschaltfläche, die Sie auf der DCUIPage finden. Wir werden den Modus Ist dunkel für aktiviert und Team bei Änderung umschalten verwenden aktiviert und Wenn wir nun zu unserer Navbar zurückkehren, können wir die Schaltfläche Toggle Team hinzufügen und sie dann dort in das Div-Navbar-Ende einfügen, das ebenfalls von DZUI stammt , und dort müssen wir es ebenfalls von DZUI stammt , Also lass es uns so machen. Speichern Sie es. Und jetzt werden wir unsere Seite überprüfen. Es ist da, also versuchen wir es anzuklicken. Und du kannst sehen, dass es das Team verändert. Und wenn Sie jetzt in der Team-Umschaltfläche zum VS-Code zurückkehren, können Sie die Teams, die Sie möchten, für den Hell- und Dunkelmodus festlegen möchten, für den Hell- und Dunkelmodus 16. Einkaufswagen: Nennen wir jetzt das Kartensymbol J sechs. Wenn Sie auf dem DCU-Symbol in den Bereich NaF Bar gehen, können Sie sehen, dass es genug Balken mit einer Karte gibt , und wenn Sie in Ja Six gehen, können wir die Karte tatsächlich von dort nehmen Wir können es in unser Kartensymbol einfügen, müssen aber ein paar Dinge hinzufügen Bevor wir den Wandkartenkontext und diese Funktionalität kodieren, können wir ihn zunächst Wandkartenkontext und diese Funktionalität kodieren, einfach markieren, indem wir dort eine Konstante der Gesamtmenge auf Null setzen. Dann schließen wir diesen Vorgang in eine Gesamtmengenprüfung ein, mit der Bedingung, dass diese nur ausgeführt wird , wenn die Gesamtmenge über Null liegt. Außerdem fügen wir dort und da eine Gesamtmenge hinzu. Wenn wir zu unserer Navigationsleiste zurückkehren, können wir den Link zu einem Kartensymbol hinzufügen. Vergiss nicht, es zu importieren. Für den Pfad verwenden wir den Schrägstrich Card. Lassen Sie uns in Seiten eine neue Datei erstellen, Karte J sechs. Da können wir es ausschneiden. Jetzt können wir zu Abdo J sechs gehen. Dort werden wir zwei Routen bearbeiten. Vergiss nicht, wir müssen es auch importieren und der Pfad wird kartiert sein. Wenn wir jetzt auf unsere Seite gehen, können Sie dort die Karte sehen und wenn wir darauf klicken, werden wir zur Kartenseite weitergeleitet. Lassen Sie uns jetzt für eine Weile zur Gesamtmenge springen. Wenn wir zum Kartensymbol zurückkehren und diese Gesamtmenge auf fünf ändern und sie jetzt speichern, werden Sie auf unserer Seite nachsehen, dass die Zahl dort angezeigt wurde. Gehen wir zu Context und dort erstellen wir eine neue Datei. Diese Datei wird Card Context heißen. Logistik. Im Kartenkontext importieren wir zuerst auch die Hooks und beginnen dann mit der Erstellung des Kontextes für die Karte. Wir werden einen benutzerdefinierten Hook verwenden , um den Kartenkontext zu verwenden. Wir werden Kinder als Requisite verwenden und das Ganze mit dem Kartenkontext umschließen Darin erstellen wir einen Status die Kartenelemente, die aus dem lokalen Speicher initialisiert werden aus dem lokalen Speicher initialisiert Lokaler Speicher ist eine Funktion , die von Webbrowsern bereitgestellt wird Und es ermöglicht uns, die Daten lokal auf dem Gerät des Benutzers zu speichern . Das heißt, wir senden das Produkt, das der Benutzer kaufen möchte, an den lokalen Speicher und laden es dann beim Kartenanbieter aus dem lokalen Speicher. Wir erstellen den Nutzungseffekt, um den lokalen Speicher zu aktualisieren , sobald sich der Status der Kartenelemente ändert. Dort werden wir ihn einstellen und in der Dependency Array werden wir die Kartenelemente ablegen. Wann immer es geändert wird, werden wir den lokalen Speicher aktualisieren. Wir werden eine Funktion erstellen, um der Karte einen Artikel hinzuzufügen. Für die Karten-Set-Objekte erstellen wir ein konstantes Objekt auf der Karte und versuchen, es zu finden. Dann erstellen wir eine IF-Bedingung , um zu überprüfen, ob der Artikel bereits auf der Karte ist. Falls es da ist, erhöhen wir die Menge um eins, und falls nicht, werden wir es nur mit einer Menge von eins hinzufügen. Dann brauchen wir auch eine Funktion zum Entfernen von der Karte. Dann legen wir wieder Kartenartikel fest, was dem dort definierten Status entspricht, und wir reduzieren einfach die Menge oder entfernen den Artikel, wenn die Menge Null ist. Außerdem werden wir eine Funktion haben, mit der sich die Menge eines Artikels auf einer Karte verringern lässt. Auch hier verwenden wir den Staat. Und wenn wir die Vorbereitungselemente durcharbeiten, werden wir die Menge verringern, und falls wir auf Null kommen, werden wir sie wieder entfernen Wir werden auch dafür sorgen, dass die Karte gelöscht wird, und dort setzen wir die Kartenelemente einfach auf ein leeres Array und entfernen sie auch aus dem lokalen Speicher Im Gegenzug werden wir den Status und die Funktionen der Karten für untergeordnete Komponenten bereitstellen . In die Werte fügen wir alle Funktionen ein, die wir ausgeführt haben, und es wird die untergeordnete Requisite umschließen Jetzt müssen wir zu Mindjsix gehen. Dort werden wir einen Kartenanbieter hinzufügen und unseren Antrag einfügen Jetzt verpackt der Kartenanbieter unseren Antrag. Es ist dort importiert und wir werden die Funktionalität haben. Wir können zu Cardicon J Six gehen. Im Kartensymbol geben wir den Kartenkontext ein und importieren die Benutzerkarte. Wir werden den verwendeten Kartenhaken verwenden, um aus dem Kartenkontext auf die Kartenelemente zuzugreifen . Und statt dieser fest codierten Fünf, die wir dort haben, werden wir die Gesamtmenge der Artikel auf der Karte berechnen der Artikel auf der Karte Um nun die Funktion „Werbeanzeige zum Kartenartikel“ hinzuzufügen, gehen wir zum Produkt „Einzelkarte Wir importieren den Hook für gebrauchte Karten aus dem Kartenkontext, um mit dem Kartenstatus zu interagieren. Wir werden Ergänzungen zur Karte extrahieren, aus der Karte entfernen und Kartenelemente aus unserem Verwendungskarten-Hook entfernen, den wir im Kartenkontext erstellt haben. Wir suchen den Artikel auf einer Karte, der dem aktuellen Produktartikel entspricht , und speichern ihn unter Artikel auf Karte. Dann erhalten wir eine Menge des Artikels auf einer Karte, und bevor sie Null ist, von der Karte, wenn der Artikel nicht da erstellen wir eine Funktion für das Hinzufügen von Artikeln zur Karte und auch für das Entfernen des Artikels von der Karte ist. Das sind die Funktionen , die wir dort ausgeführt haben. Produkt Single Card fügen wir die Festplatte mit Kartenaktionen aus dem ZI hinzu. Wir überprüfen die Menge. Wenn der Wert über Null liegt, falls dies der Fall ist und wir das Produkt auf einer Karte haben, haben wir den Button von der Karte entfernt. Mit einem Klick wird das Produkt von der Karte entfernt. Falls die Stückzahl Null ist, wird der Artikel zur Karte hinzugefügt, und mit einem Klick wird der Artikel zur Karte hinzugefügt. Und jetzt können wir es testen. Sie können sehen, dass es bearbeitet oder von der Karte entfernt wird. Also werde ich jetzt auf „Zur Karte hinzufügen“ klicken . Wir haben da einen, ich werde auch diesen Artikel und diesen Artikel hinzufügen, und unsere Anzahl mit der Menge auf einer Karte nimmt zu oder ab, je nachdem wie viele Artikel wir auf einer Karte haben. Und jetzt, wenn wir auf die Karte klicken, werden wir den JS Six codieren. Fahren wir mit der sechsten Seite der erstellten Karte J fort. Zuerst werden wir die Importe durchführen. Dann extrahieren wir die verringerte Anzahl der Kartenelemente verringerte Anzahl der Kartenelemente und bearbeiten die Karte aus unserem Verwendungskarten-Hook. Falls unsere Karte leer sein sollte, möchten wir eine Nachricht anzeigen. Deine Karte ist leer. Also werden wir eine traurige Bedingung Und falls die Länge unserer Kartenartikel Null ist, zeigen wir diese Meldung an Bevor wir für den Streifen auf Zur Kasse klicken, möchten wir außerdem wissen, wie hoch der Gesamtpreis des Produkts ist , das sich auf unserer Karte befindet. Zu diesem Zweck erstellen wir einen neuen konstanten Gesamtpreis und zählen dort den Gesamtpreis der Artikel auf unserer Karte. Und bevor wir dann eine Handle-Checkout-Funktion erstellen, erstellen wir J six. Für den Haupttag legen wir maximale Breite von 1.400 Pixeln fest, zentrieren sie mit MMX Auto, dort etwas Pedding hinzu und setzen einen Abstand Wir legen dort die Überschrift mit dem Einkaufswagen ab, stellen dort Schriftstärke, Schriftgröße, Rand und Text Dann erstellen wir das DIF mit einem Rasterlayout und legen dort ähnliche Rasterspalten wie wir es auf einer Homepage haben, und wir werden die Kartenelemente iterieren Jedes Kartenelement werden wir in diesem Div zeigen, wo wir diesen Schlüsselindex haben werden und wir werden das Artikelbild zeigen Dann zeigen wir auch den Artikelnamen und seinen Preis an, den wir in US-Dollar umrechnen werden. Dann erstellen wir ein DIF, das die Menge des Artikels anzeigt , den wir derzeit auf unserer Karte haben , und unten in einem anderen DIF haben wir die Schaltfläche zum Entfernen falls wir den Artikel von der Karte entfernen möchten Das Letzte, was wir hinzufügen werden, ist ein Div, das wieder Paragraph Tech mit dem Gesamtpreis enthält, und eine Schaltfläche, mit der Sie zur Kasse gehen können Nachdem wir eine Funktion für den Checkout erstellt haben, werden wir sie zu dieser Schaltfläche hinzufügen, aber dafür müssen wir zuerst den Stripe implementieren. So wird die Seite aussehen, wenn sie leer ist. Und wenn wir jetzt zurück zur Startseite gehen, dort einige Produkte hinzufügen und zur Karte gehen, seht ihr dort, wir haben den Gesamtpreis und auch beide Produkte. Wenn Sie jetzt auf Entfernen klicken, können wir sie von der Karte entfernen Wenn nichts angezeigt wird, wird erneut angezeigt, dass Ihre Karte leer ist. 17. Stripe: Gehen Sie zur Seite stripe.com und wir klicken dort auf Jetzt starten Sie geben dort Ihre Daten und klicken auf Konto erstellen Nachdem Sie Ihre E-Mail-Adresse bestätigt haben, können Sie dort auf Explore-Funktionen klicken. Wenn Sie das jetzt nicht sehen möchten, können Sie dort klicken und dort auf dieser Seite verlassen Wir klicken dann auf Entwickler. Dort werden wir auf API-Schlüssel klicken. Dort klicken Sie auf den Testschlüssel anzeigen, dann klicken Sie darauf und er wird automatisch in die Zwischenablage kopiert Wir gehen in den Bend-Ordner und speichern ihn dort in unseren Umgebungsvariablen Erstellen Sie einen neuen unter Stripe Secret Key und fügen Sie ihn dort ein. Jetzt öffnen wir ein Terminal. Wir werden das Frontend sehen. Und dort machen wir NPM Stripe Slash Stripe Js. Wir werden diese Bibliothek installieren. Wir werden sie in unseren Kartenpunkt JS Six importieren, und dort erstellen wir das Constant Stripe Promise mit dieser Load-Stripe-Funktion, und darin fügen wir den schwarzen Publisher-Schlüssel ein, wir dort in unserem Stripe-Konto haben. Zuerst müssen wir die Route für die Checkout-Sitzung erstellen. Wir werden in unseren Ben-Ordner gehen. In Routes erstellen wir eine neue Datei, StripRut Punkt JS, und dann Index DJs Wir werden diese Stripe-Route B mit dem Schrägstrich Stripe und StriperOut verwenden . Wir werden diese Stripe-Route B mit dem Schrägstrich Stripe und StriperOut verwenden. Und wir haben diesen Strip noch nicht importiert. Gehen wir also zum Anfang dieser Datei über. Machen Sie dort einen neuen Import von der Route , die wir gerade erstellt haben, und nennen Sie sie eine Stripe-Route. Dann haben wir alles in der Zahl IndexoJS und wir können in Stripe Route gehen und es dort codieren Wir importieren Stripe, Express, um den Router zu erstellen, und eine Konfiguration aus dem zehnten, um die Umgebungsvariablen zu laden Jetzt werden wir sie mit dieser Methode laden. Dann erstellen wir eine neue Router-Instanz und initialisieren Stripe mit einem geheimen Schlüssel , den wir in Umgebungsvariablen gespeichert haben Und am Ende dieser Route exportieren wir den Router, um ihn in anderen Teilen der Anwendung zu verwenden Und jetzt erstellen wir die Route für eine Checkout-Sitzung. Wir werden die Produkte aus dem Anfragetext extrahieren. Dann erstellen wir Einzelposten für jedes Produkt. Wir werden die Preisdaten und die Produktmenge festlegen. Für Preisdaten legen wir die Währung und dann den Namen des Produkts fest und wir können auch eine Vorschau des Bildes anzeigen. Dann legen wir für die Stückzahl den Produktpreis in Cent und für die Menge die Produktmenge fest. Dann serialisieren wir die Produktdetails für Metadaten. Wir werden dort erneut den Produktnamen, die Anzahl der Produktpunkte und den Produktpunktpreis in Sens multipliziert mit 100 angeben, und den Produktpunktpreis in Sens um den Dollarwert zu Dann erstellen wir einen TIG-Block und im Tide-Block versuchen wir, eine Checkout-Sitzung mit Stripe zu erstellen Für die Sitzung müssen wir mehrere Parameter festlegen. Zuerst stellen wir die Zahlungsart Karte auf Zahlungsmethoden dann legen wir die Positionen fest, die wir dort festlegen. Dann fügen wir Produktdetails zu den Metadaten hinzu , die wir dort seralisiert Wir legen einen Zahlungsmodus fest. Machen Sie die Rechnungsadresse erforderlich Anschließend legen wir eine Erfolgs- und Stornierungs-URL Derzeit werde ich dort den lokalen Host 5173 einstellen. Wo läuft mein Frontend. Dafür müssen wir jedoch eine Komponente für Erfolgs - und Stornierungsoptionen erstellen . Und dann legen Sie dort seinen Pfad fest. Nach dieser Checkout-Sitzung senden wir die Sitzungs-ID, sobald ein JSON antwortet. Und wenn in einem Catchblog ein Fehler auftritt, protokollieren wir ihn und senden den Bd-Anforderungsstatus mit einer Fehlermeldung nun zu zeigen, wie du die Erfolgs- und Kündigungsseite erstellst , gehen wir Dort erstellen wir eine neue Datei, success.j6. Die zweite wird cancel.j6 sein. Wir werden dort nur eine Vorlage platzieren. Jetzt gehen wir zu eb.j6 und fügen diese beiden neuen Seiten zu den Routen hinzu und fügen dort einen Pfad für Erfolg und Abbruch ein Vergessen Sie auch nicht, diese beiden neuen Seiten zu importieren. Und jetzt gehen wir in den Ordner B End, gehen dort in die Umgebungsvariablen und dort erstellen wir die neue. Und wir nennen es Frontend-URL und titern unseren lokalen Host 5173, dem unser Frontend läuft Und dann setzen wir für die Erfolg-URL erfolgreich diese Umgebungsvariable, die der Pfad zu dieser Seite ist Es kann auch so gemacht werden, aber es ist besser, die Umgebungsvariable zusammen mit der Frontend-URL zu platzieren , da sie sich ändern kann, und dann müssen wir nicht alle Pfade in unserem Code ändern . Lassen Sie uns den Stripe noch einmal überprüfen. 18. CartCheckout: Und jetzt werden wir in unserer Karte J six die Handle-Checkout-Funktion codieren Zuerst initialisieren wir den Stripe und warten auf das Versprechen von Stripe , dass wir es dort getan haben Dann werden wir Kartenartikel in die Checkout-Sitzung umwandeln in die Checkout-Sitzung und dort die erforderlichen Felder laden Dann machen wir einen Trikagblock. Im Tri-Block Wir stellen eine nachträgliche Anfrage, um die Checkout-Sitzung mit den transformierten Artikeln zu erstellen . Anschließend leiten wir die Stripe-Checkout-Seite mit der Sitzungs-ID aus der Antwort weiter. Jetzt überprüfen wir, ob der Fehler zutrifft. Falls dies der Fall ist, protokollieren wir ihn und senden eine Nachricht an die Konsole. Wenn dieser Wall-Try Block dann fehlschlägt, protokollieren wir alle Fehler , die während des Checkout-Vorgangs auftreten. Und vergessen Sie jetzt nicht, OnClick um unsere Schaltfläche mit der Handle-Checkout-Funktion zu erweitern , über die der Benutzer zur Kasse weitergeleitet wird Ich werde dort auf meiner Karte auf Pros Checkout klicken. Und es wird mich zur Seite weiterleiten. Jetzt können wir das Cencl testen. Wenn ich zurückgehe, werde ich zu CenclPage weitergeleitet , wo es Jetzt füllen wir die Daten aus und klicken auf Bezahlen werden wir auf eine Erfolgsseite weitergeleitet 19. CancelSuccessPage: Auf unserer Erfolgsseite zeigen wir neben der Meldung, dass die Zahlung erfolgreich war, auch unseren Kartenartikel an, da es keinen Grund gibt, die Produkte auf einer Karte zu speichern, nachdem der Benutzer die Produkte gekauft hat keinen Grund gibt, die Produkte auf einer Karte zu speichern Deshalb verwenden wir auch SeffactHOK und verwenden einen benutzerdefinierten Karten-Hook, den wir im Kartenkontext erstellt Zuerst destrukturieren wir die Funktion zum Löschen von Karten aus useCardHok und dann Wir können in der Konsole protokollieren, dass die Zahlung erfolgreich war, und dann rufen wir die Clear-Card-Funktion auf, um unsere Karte zu leeren . Jetzt können wir es testen. Lass uns etwas zur Karte hinzufügen, zur Kasse gehen, es mit Link bezahlen und dort kannst du sehen, wie die Karte zurückgesetzt wird. Und wir können dieses Abhängigkeits-Array auch leer lassen. Dieser Nutzungseffekt wird also nur ausgeführt , wenn diese Seite geladen wird. Lassen Sie uns nun etwas Styling hinzufügen. Geben wir also zuerst die Artikel ein. Lassen Sie uns dem Bildschirm etwas mehr Höhe hinzufügen. Wir können Background Base 100 Text verwenden, der auf dem Inhalt basiert, dann einige Schatten, Textgrößen und Hintergründe hinzufügen, und die Seite wird so aussehen. Jetzt können wir auch die Seite „Stornieren“ codieren. Also lass uns jetzt auf die Seite gehen. wir zur Kasse und stornieren den Vorgang, indem wir einfach zurückgehen, wodurch wir auf die Seite Stornieren weitergeleitet werden. Was wir nun tun werden, wir nehmen einfach die JS Six von der Success-Seite. Wir werden es dort einfügen. Wir werden dort die Zahlung storniert angeben, und wir werden dort angeben, dass Ihre Zahlung storniert wurde. Bitte versuchen Sie es erneut oder wenden Support, wenn Sie Fragen haben. Wenn Sie es jetzt speichern und auf die Seite gehen, können Sie dort die Ausgabe sehen. 20. Shop: Lass uns dafür sorgen, dass dieser Shop-Button funktioniert. Also werden wir eine neue Seite erstellen. Wir nennen es Shop Dot JSix. Wir werden dort hinschnappen und wir gehen zu Eb do JSix. Dort nehmen wir es in die Routen auf und importieren es auch Wenn wir auf unsere Homepage gehen, machen wir uns das Leben leichter, indem wir diese Schaltfläche ein Anker-Tag umwandeln, auf dem wir HRF zum Einkaufen hinzufügen Jetzt klicken wir auf unserer Seite auf die Schaltfläche, sie leitet uns zu Slash Und dort werden wir die Seite codieren. Wir werden den Status verbessern und Effekt-Hook, Exiles und die Produktkarte verwenden , die wir auf der Homepage verwendet haben Wir werden Statusvariablen für die gefilterten Produkte, die Kategorie und das Produkt selbst erstellen gefilterten Produkte, die Kategorie und das Produkt selbst Verwenden Sie dann Effect, um die Produktartikel vom Server abzurufen die Produktartikel vom Server abzurufen Wir stellen eine HTP-Anfrage, geben dort die Route zum Abrufen der Produkte an und als Antwort legen wir und den gefilterten Produktstatus Falls dies fehlschlägt, protokollieren wir die Fehler. Dann erstellen wir eine Funktion zum Filtern der Produkte. es sich bei dem Produkt nicht um ein Array handelt, führen wir von der Bedingung F bis zum Fehler durch. Dann erstellen wir eine Kopie des Produkt-Arrays, und falls die Kategorie nicht leer ist, filtern wir unsere Produkte nach einer gesalzenen Kategorie. Dann aktualisieren wir den gefilterten Produktstatus mit einem gefilterten Produkt und erzeugen einen Nutzungseffekt, der diese Filterfunktion aufruft diese Filterfunktion wenn das Produkt oder die Kategorie geändert wird. Für J six erstellen wir das Haupt-Div einer maximalen Breite von 1.300 Pixeln und zentrieren es mit einer Mix-Automatik Darin erstellen wir ein Div, das die der Auswahllistenwerte für Wir fügen dort ein Label mit Kategorie und der Auswahlliste selbst ein, wo wir die Kategorie festlegen werden In unserem Fall werden die Optionen alle Curse-Vorlagen sein. dort ändern, werden wir dann Wert der Statusvariablen festlegen Und zu guter Letzt legen wir dort die Produktkarte ab und schicken die gefilterten Produkte dorthin. Und jetzt gehen wir auf unsere Seite und wählen Kurse aus. Dort haben wir nur zwei Kurse, die wir erstellt haben, und dort werden wir eine Vorlage haben, und das war's für unsere Shop-Seite. 21. FooterAbonnements: Um eine Fußzeile für unsere Seite hinzuzufügen, können wir auf DZUI die Fußzeile auswählen, die Dann erstellen wir in Components eine neue und nennen sie FuterGSix Da haben wir das Snippet. In Abdo J six importieren wir es unten, also unter den Routen, weil es nicht Importiere es Klicke auf JS six und kopiere es. Ich werde es in meine Fußzeile auf J Six einfügen. Dann gehe ich zurück und nehme auch diese Fußzeile. Ich werde es mit dem mischen, das ich gerade bearbeitet habe. Für den, den ich bearbeite, brauche ich also nicht die rechtlichen und ich brauche auch nicht die Dienste. Stattdessen werde ich dort die Fußzeile einfügen, die ich genommen habe. Speichern Sie es. Jetzt werden wir überprüfen, wie es aussieht. Da dies nicht unser Logo ist, werden wir das H zwei mit dem Namen unserer Seite versehen. Also Textgröße. Dann können wir das löschen und dort ein anderes Ohr hinstellen. Wir können das so belassen. Auch das und jetzt zum Newsletter Wir gehen in den Ordner Bend in Models, wir erstellen eine Datei, Abonnentenmodell mit Punkt s. Wir können das Produktmodell kopieren, einfügen und dort ablegen Jetzt werden wir die Felder aktualisieren, und es wird nur eine E-Mail vom Typ Zeichenfolge erforderlich True angezeigt, und wir werden dort auch den eindeutigen Wert True eingeben. Dann müssen wir das umbenennen. Das wird also das Abonnentenschema sein. Nimm das, leg es da hin, Abonnent, jetzt gehen wir zu Index Dogs über. Dann können wir bei Stripe kopieren, dort platzieren. Abonnent, ändere es auf Abonnentenroute. In Route klicken wir auf neue Datei subscriber route dot js. Wir können überprüfen, wie es im Produkt Route Dogs gemacht wird, wenn wir uns nicht erinnern, und wir werden es auch für Abonnenten wiederholen Dort werden wir also Importe mit dem Abonnentenmodell haben , das wir mit Express erstellt haben, um dort den Router zu erstellen, und wir werden es exportieren Dann beenden wir jetzt den Import in Index Dogs. Wir können die Stripe-Route kopieren und stattdessen den Namen für die Abonnentenroute eingeben und sie auch von der Abonnentenroute importieren, die wir dort Abonnentenroute eingeben und sie auch von der Abonnentenroute haben Wir werden eine neue Route erstellen um Abonnenten auf unsere MongoIB zu Wir werden die E-Mail aus dem Anfragetext extrahieren Dann erstellen wir RchBok und wir erstellen einen neuen Abonnenten und rufen das Modell Create on Subscriber mit der Eingabe der extrahierten E-Mail aus dem Falls wir erfolgreich sein sollten, setzen wir den Status auf zwei gegen eins und schicken einen neuen Abonnenten dorthin Falls nicht, setzen wir den Status auf 400 und senden eine Fehlermeldung. Lassen Sie uns in Index DJs noch einmal überprüfen und sicherstellen, dass wir die Abonnentenroute verwenden Jetzt können wir es in Postman testen. Also werden wir dort eine Postroute auswählen. Wir werden dort unseren lokalen Gastgeber eingeben. Wir verwenden einen SAS-Abonnenten, wir wählen ihren Hauptteil, rohe JSON, wir geben ihre Test-E-Mail ein und klicken auf Senden. Und jetzt haben wir es da. Wir können es auch überprüfen und in unserer Datenbank sehen . Und jetzt können wir zu Footer zurückkehren und ihre Funktion erstellen, die diesen Endpunkt aufruft Wir werden auch use state importieren und eine State-Variable für E-Mails erstellen Ich kümmere mich um das Abonnieren, wir werden dies verwenden, um das Standardverhalten beim Absenden von Formularen zu verhindern In einem normalen Szenario, wenn Sie ein Formular abschicken, wird die Seite neu geladen . Wenn Sie Standardeinstellung verhindern, wird dies nicht passieren Dann machen wir einen Trackage-Block. Wir senden eine Postanfrage mit der E-Mail als Payload. Bevor wir das beenden, müssen wir noch eine Benachrichtigung senden Lassen Sie uns dort U Snack Bar aus dem Notiz-Tag importieren, dort den Snack Bar-Hook verwenden, und wir können eine Erfolgsmeldung anzeigen, indem wir die E-Mail aus dem Eingabefeld löschen, das der Benutzer dort eingegeben hat. Falls dieser Ride Block fehlschlägt, protokollieren wir den Fehler und senden eine Benachrichtigung darüber. Gehen wir nun zum Ende der Seite. Und da haben wir den Abonnement-Button. Für die Eingabe-Technologie ändern wir den Typ auf E-Mail und setzen auch den Wert auf E-Mail, und wir machen es erforderlich, damit der Benutzer nicht einfach abonnieren kann ohne eine E-Mail mit unveränderter E-Mail-Adresse auszufüllen , die unseren E-Mail-Status festlegt. Wir werden den Typ unserer Schaltfläche zum Senden festlegen, und das Wichtigste zu unserem Formular, wir fügen das Feld Senden hinzu und nennen dieses Handle-Abonnement-Funktion , wie wir es getan haben. Und ich habe den Typ dort gemacht. Ich bin nicht auf dem lokalen Host 5.000, aber es sind 3.000 und wir haben Exiles nicht importiert Lassen Sie uns das Problem beheben, indem wir es jetzt importieren. Und IndexoJS, wir verwenden nicht Subscriber, sondern Subscriber. Jetzt können wir das Problem beheben, indem wir dem Wert von email einfach R hinzufügen , wir können abonnieren Und jetzt abonnieren wir erfolgreich. E-Mail wurde zurückgesetzt und in unserem Mongo Dib können wir die neue E-Mail sehen Ich würde noch eine Sache machen. Anstatt Gesellschaft zu nehmen, würde ich ihre Unterstützung anbieten. Ich würde ihre E-Mail-Adresse angeben. In einigen Fällen können wir dort auch eine Telefonnummer angeben und diese beiden Ankertexte löschen. 22. Statistiken: Jetzt erstellen wir eine Statistikkomponente. In Components erstellen wir eine neue, stats.j6, gehen zu admin.j6 und fügen deren Intermeddv hinzu und Wir werden es importieren. Wir werden Use Effect importieren und State Hooks verwenden. Dann definieren wir die Statusvariablen für Statistiken und Ladestatus und erstellen einen Use-Effect-Hook, um die Statistiken abzurufen, wenn diese Komponente geladen wird Wir werden eine asynchrone Funktion zum Abrufen von Statistiken erstellen , einen Tricagblock ausführen, eine gute Anfrage zum Abrufen der Statistiken stellen und dort einen Endpunkt setzen, aber wir werden es nach dieser Komponente tun eine gute Anfrage zum Abrufen der Statistiken stellen und dort einen Endpunkt setzen, aber wir werden aber wir Wir werden prüfen, ob die Antwort in Ordnung ist, und falls nicht, senden wir Analysieren Sie dann die JSN-Antwort und aktualisieren Sie den Statistikstatus mit den Abrufdaten Am Ende setzen wir das Laden auf Stürze. Sollte es zu einem Fehler kommen, werden wir ihn protokollieren und den Ladevorgang ebenfalls auf „Fällt“ einstellen. Um dann mit dem Abrufen der Daten zu beginnen, müssen wir diese Funktion aufrufen Abhängigkeitsarray wird leer sein, sodass dieser Nutzungseffekt nach dem Laden der Komponente ausgeführt wird Damit unsere Daten dann in einem korrekten Format angezeigt werden, verwenden wir ein Währungsformat, in das wir den Wert senden und die Ziffern entfernen. Für JA six erstellen wir ein Rasterlayout, das drei Spalten verwendet. Auf dem mobilen Bildschirm wird nur eine verwendet. Und drinnen werden wir diese Textfelder von DZI platzieren. Wir geben dort den verfügbaren Saldo, ausstehenden Saldo und die Gesamtzahl der Einkäufe Wir überprüfen den Ladestatus und falls es geladen wird, geben wir dort eine Lademeldung an, und falls nicht, geben wir dort den verfügbaren Saldo oder die Gesamtkosten an. Jetzt kannst du es schon auf unserer Seite sehen, wenn du den Slash Admin benutzt, aber wir haben nichts weil wir die Route noch nicht codiert Und jetzt werden wir es codieren. Wir müssen kein neues erstellen. Wir gehen einfach in den Backend-Ordner und dann Stripe JS. Es wird die Get-Methode verwenden. Wir geben den Pfad der Slash-API den Schrägstrich Stat ein. Wir werden Trcchblog machen wir werden den Kontostand von Stripe abrufen Für das Bugging können wir uns zwischen der Konsole einloggen. Dann extrahieren wir die verfügbaren und ausstehenden Saldobeträge in USD und müssen sie von Cent in Dollar umrechnen Dann listen wir die Gebühren von Stripe auf und erhalten die Gesamtzahl der Gebühren. Wir senden Ihnen den Kontostand und Gebührenstatistiken, sobald JSON antwortet. Und falls es fehlschlägt, werden wir Fehler im Catch-Block sperren. Da wir nun die Route haben und den Endpunkt verwenden können, gehen wir zu den Statistiken und fügen sie dort ein. Es wird so aussehen, und wenn wir jetzt auf die Seite im Admin-Dashboard gehen, können Sie sehen, dass die Werte geändert wurden. Aber was das Gleichgewicht angeht, ist es ein bisschen anders, weil die Werte tatsächlich korrekt sind. Da wir jedoch Testdaten in Stripe verwenden, werden viele nicht in unsere Bänder geladen. Und jetzt können wir die Fußzeile in unserem Admin-Dashboard verstecken , damit sie besser aussieht Wir haben ihren Verwendungsort bereits importiert. Jetzt werden wir es dort verwenden und auch die Admin-Route als Konstante verwenden und den Pfadnamen überprüfen, der mit dem Schrägstrich Admin beginnt Dann werden wir es unten auf der Seite platzieren und den Operator dort zurückgeben Falls diese Admin-Route wahr ist, zeigen wir nichts an, und falls sie falsch ist, zeigen wir die Fußzeile Wenn Sie jetzt auf die Seite gehen, können Sie sehen, dass die Fußzeile aus unserem Admin-Dashboard verschwunden Wenn Sie zur Kundenseite gehen , ist die Fußzeile immer 23. Jwt: Und jetzt ist es an der Zeit, die Endpunkte zu sichern. JWT wird häufig zur Authentifizierung verwendet . Wie das funktionieren wird Wenn sich der Benutzer anmeldet, was wir auch erstellen werden, erstellt der Server ein JWT - oder JCN-WebToken und sendet es an Dann nimmt der Benutzer oder Admin dieses JWT in die Header Auf diese Weise kann der Server den Benutzer verifizieren , ohne jedes Mal die Datenbank abfragen zu müssen jedes Mal die Datenbank abfragen zu In unserem Bend-Ordner erstellen wir einen neuen Ordner. Und wir nennen es Middleware. In diesem Ordner werden wir eine neue Datei erstellen. Oder Middleware Js. Jetzt gehen wir zu den Umgebungsvariablen und erstellen eine neue, die als JWT Secret bezeichnet wird, und dort generieren wir unseren eigenen geheimen Schlüssel und dort generieren wir unseren eigenen Wie wir das machen können, ist, dass wir ein Terminal öffnen. Wir werden dort diesen Befehl eingeben. Und es wird die Zeichenfolge für uns generieren. Jetzt nehmen wir es, legen es in JWT Secret und wir können in unserer Middleware weitermachen Zuerst importieren wir Config von den Zehn und auch JWT von JSN Dann rufen wir die Confit-Methode auf, um die Umgebungsvariablen zu laden, und wir erstellen eine Middleware-Funktion auf, um die Umgebungsvariablen zu laden, und wir erstellen eine Middleware-Funktion zur Authentifizierung von Benutzern, die JWT verwenden. Wir rufen den Autorisierungsheader aus der Anfrage ab und überprüfen dann, ob der Header fehlt oder nicht Und falls nicht, senden wir eine Nachricht, ohne dass die Token-Autorisierung verweigert wird. Dann extrahieren wir das Token aus dem Autorisierungsheader und führen die Überprüfung in einem Tricachblock Dort werden wir es verifizieren und in einer dekodierten Konstante speichern Wir werden die dekodierten Benutzerinformationen an das Anforderungsobjekt anhängen und die Kontrolle an die nächste Funktion übergeben Falls das fehlschlägt, protokollieren wir die Fehler in catch und am Ende der Datei exportieren wir sie als off Jetzt gehen wir zur Produktroute Punkt gs über. Dort importieren wir diese Authentifizierung und geben dort in der Post-Route off als zweites Argument an. Wir werden es jetzt auch in die Delete-Route einfügen . Und Route aktualisieren. Wenn Sie jetzt versuchen, das Produkt zu aktualisieren, wird es fehlschlagen. Lassen Sie uns jetzt ein Login erstellen und uns registrieren damit wir das tatsächlich an die Middleware weitergeben können Zunächst werden wir in Modellen das Benutzermodell dot js erstellen. Wir werden Mongoose importieren und ein Benutzerschema erstellen. Für den Benutzer benötigen wir eine E-Mail-Adresse, die vom Typ Zeichenfolge, erforderlich und eindeutig ist, sowie ein Passwort, das vom Typ Zeichenfolge ist und ebenfalls erforderlich Dann exportieren wir dieses Modell als Benutzer. Jetzt erstellen wir einen neuen Ordner und nennen ihn Controller. Darin werden wir eine neue Datei von Controller Dot JS erstellen. Wir werden die notwendigen Module und Bibliotheken importieren. Wir werden eine neue Router-Instanz erstellen und können mit der Route für die Benutzerregistrierung beginnen. In Tricagblock extrahieren wir E-Mail und Passwort aus dem Dann prüfen wir, ob der Benutzer mit der angegebenen E-Mail-Adresse existiert. Und falls ja, setzen wir den Status auf 400 und senden eine Nachricht , dass der Benutzer bereits existiert. Dann haben wir das Passwort mit B crit und wir werden eine neue Benutzerinstanz mit der E-Mail und dem dhHedPassword erstellen mit der E-Mail und dem dhHedPassword Wir speichern den Benutzer in der Datenbank, generieren ein JWT-Token und setzen das Ablaufdatum Dann senden wir einen erstellten Status mit einem Token und einer Erfolgsmeldung Falls dies fehlschlägt, werden wir den Fehler abfangen und protokollieren. Wir werden mit der Route für die Anmeldung in Tricagblock fortfahren. Wir werden E-Mail und Passwort aus dem Anfragetext extrahieren. Wir werden versuchen, den Benutzer mit einer bestimmten E-Mail-Adresse zu finden Falls diese nicht existiert, legen wir den Antwortstatus fest und senden eine Nachricht mit ungültigen Anmeldeinformationen. Dann vergleichen wir das angegebene Passwort mit dem Hash-Passwort, das wir in unserer Datenbank speichern, und verwenden Bedingung. Falls es wahr ist und das Passwort übereinstimmt, erstellen wir die Payload mit der Benutzer-ID und der Dann signieren wir ein JWT-Token mit Nutzdaten, geheimem Schlüssel und Ablaufzeit Andernfalls geben wir den Status 400 mit der Meldung Ungültige Anmeldeinformationen zurück 400 mit der Meldung Ungültige Anmeldeinformationen Falls dieser Laufwerksblock fehlschlägt, sperren wir den Außerdem werden wir es als Aouter exportieren. 24. LoginRegistrieren: Jetzt müssen wir ein Anmelde- und Registrierungsformular erstellen. Gehen wir zu den Frontend-Ordnerseiten und erstellen dort eine neue Datei, melden Sie sich an D J sechs an und registrieren Sie DJ sechs. Wir werden dort dieses Nippes verwenden. Dann Abdo J sechs, wir werden es so routen. Wir geben dort einen Anmelde - und Registrierungspfad ein und importieren ihn auch In Register JA six importieren wir die notwendigen Module und Hooks. Wir werden Use State Hook verwenden und auch Navigate für die Navigation verlinken und verwenden. Um HTD P-Anfragen zu stellen, importieren wir Exis Wir deklarieren Hook für die Navigation und dann initialisieren wir Variablen für Benutzerdaten, und wir legen ihren Namen, ihre E-Mail-Adresse und zwei Passwörter zur Bestätigung fest, und der Standardwert Wir fahren mit der Statusvariablen für die Statusmeldung fort, in die wir eine Fehler- oder Erfolgsmeldung laden , falls wir scheitern oder erfolgreich sein sollten Die Statusvariable für Erfolg ist eine Markierung, die wir für die Anzeige der Meldung auf Y für den Fehler oder Erfolg verwenden werden für die Anzeige der Meldung auf Y für den Fehler oder Erfolg verwenden . Standardmäßig legen wir ihre Stürze fest. Dann machen wir einen Handler für Eingabeänderungen. Und dort aktualisieren wir Status der Benutzerdaten mit einem neuen Eingabewert. Außerdem werden wir die Statusmeldung löschen und unsere Flagge auf Falls setzen. Dann ist es Zeit für den Handler für das Senden von Formularen, und um das Standardverhalten von Formularen zu verhindern, werden wir die Methode prevent default verwenden. Das bedeutet, dass beim Absenden des Formulars die Seite nicht neu geladen wird. Dann prüfen wir, ob das Bestätigungskennwort mit dem ersten Passwort übereinstimmt Dadurch wird das Fehlerszenario da wir das Ungleiche haben, und wir werden die Zustandsvariable, die wir als Flagge verwenden, auf „fällt“ setzen wir als Flagge verwenden, auf „fällt Dann setzen wir die Statusmeldung Passwörter stimmen nicht überein, die wir auch auf der Benutzeroberfläche von JA Six anzeigen werden , und wir werden zurückkehren Den Rest der Funktionalität werden wir in Tricag zusammenfassen, wir werden Konfiguration für die Es-Anfrage vornehmen und für die Header werden wir den Inhaltstyp auf JSON setzen Danach senden wir die Post-Anfrage mit den Benutzerdaten an den Registerendpunkt. Dies ist der Endpunkt, den wir in unserem Controller codiert haben Wir werden auch die Konfiguration mit den Headern anhängen, um den Server darüber zu informieren, dass der rücksichtslose Körper JSON-Daten enthält Und nachdem wir es geschafft haben, alles zu posten, setzen wir einen Erfolg auf true, zeigen dann die Statusmeldung mit der erfolgreichen Registrierung an und navigieren den Benutzer dann zur Anmeldeseite Falls der Describe-Block fehlschlägt, setzen wir einen Erfolg auf False und senden eine Fehlermeldung. Nun zu JS Six selbst Wir werden das Flexbox-Layout mit der Spalte „Flex-Richtung“ verwenden , sodass die Eingaben untereinander liegen Dann zentrieren wir die Artikel mit der Artikelmitte und der Justified-Mitte Wir setzen Mnheiight auf Bildschirm und stellen einen hellen Hintergrund ein Wir werden eine Überschrift für unser Formular erstellen, das heißt „Registrieren“ und nun wird die Statusmeldung angezeigt Wir werden prüfen, ob die Statusmeldung wahr oder falsch ist. Falls es wahr ist und eine Statusmeldung tatsächlich gesetzt ist, werden wir sie rendern, und wir werden sie in Paragraph Tech rendern, und dann spielen wir einfach mit der Farbe. Wir müssen die Erfolgsvariable überprüfen dann den ternären Operator verwenden und dann den ternären Operator verwenden. Falls sie wahr ist, setzen wir sie auf grüne Farbe, und falls sie falsch ist, setzen wir sie auf rote Farbe Weise, wie wir die Registrierung erfolgreich durchführen werden , ist grün, Fehler rot Nun zum Formular selbst werden wir dort beim Absenden hinzufügen, was wir dort gemacht haben. Und jetzt fügen wir alle Eingaben für Benutzername, E-Mail und beide Passwörter ein. Bei der ersten Eingabe handelt es sich um einen Text mit einem Platzhalter-Benutzernamen und einem als Namen festgelegten Namen Wert, wir werden den Punktnamen für die Benutzerdaten festlegen. Dies stammt aus der Statusvariablen , die wir dort definiert haben, also der Punktname der Benutzerdaten Und bei einer Änderung rufen wir den Change Input Handler Das ist der erste Handler, den wir gemacht haben. Dann werden wir für den Unterricht einige Schatten- und Randradios mit Hintergrundbeleuchtung, Bettzeug und grauer Schriftfarbe einstellen Randradios mit Hintergrundbeleuchtung, Bettzeug und grauer Schriftfarbe Jetzt können wir es kopieren und einfügen, und wir setzen diese Art von E-Mail, Platzhalter auf E-Mail, Name auf E-Mail und Benutzerdaten auch auf E-Mail Andernfalls gilt das Gleiche auch für das Passwort. Aber auch hier werden Typ, Platzhalter und Name unterschiedlich sein Als Wert möchten wir erneut die Variable stay für ein Passwort festlegen Dann fügen wir für die Eingabe des Bestätigungskennworts einfach das zweite Bestätigungskennwort für den Namen hinzu, und in den Benutzerdaten wird es auch als Passwort zwei bezeichnet. Dann eine Schaltfläche zum Absenden des Formulars, also werden wir eine Art Senden eingeben. Dann können wir die Farbe für die Schaltfläche auswählen, aber lassen Sie uns eine dunklere Farbe verwenden, den Text weiß. Wir können die Schriftstärke, die Bettung und den Randradius erhöhen , und zwar bei zwei vollen. Das war's für das Formular. Fügen wir unter dem Formular einen zusätzlichen Text hinzu, um den Benutzer zu fragen, ob er bereits ein Konto hat. Und falls ja, kann er auf den Anmeldelink klicken , der ihn zu einer Anmeldeseite weiterleitet. Wir werden in den Index DGS gehen. Dort werden wir Abdo für den Off-Router verwenden. Jetzt gehst du zum Anfang der Datei. Und wir importieren den Router als Router. So wird die Seite aussehen. Lassen Sie uns einige Testdaten eingeben und auf Registrieren klicken. Also wurden wir auf eine Anmeldeseite weitergeleitet. Und in der Datenbank können wir unter den Benutzern unseren neu erstellten Benutzer mit E-Mail und Passwort sehen. Für die Anmeldeseite wird es fast dasselbe sein wie auf der Registrierungsseite. Wir werden dort die Importe durchführen, einen Hook für die Navigation deklarieren, State-Variable für Login-Daten mit leeren Standardwerten setzen, die State-Variable für die Statusmeldung setzen und dann mit dem Handler für Eingabeänderungen beginnen, dann mit dem Handler für Eingabeänderungen beginnen wo wir damit beginnen, den Status der Login-Daten mit einem neuen Eingabewert zu aktualisieren , weil dieser bei unseren Eingaben aufgerufen wird , was wir im Fall Status tun Die Nachricht ist da, wir setzen sie zurück, indem wir dort einen leeren Wert setzen, und dann machen wir den Submit-Handler. Wir wollen kein Formular erstellen, um unsere Seite neu zu laden, daher werden wir Standardwerte verhindern Dann machen wir einen Wrackblock. Und wir senden die Post-Anfrage mit den Login-Daten an den Login-Endpunkt und protokollieren sie auch Dann speichern wir das empfangene Token im lokalen Speicher. Dies ist das JWT-Token. Nachdem wir uns angemeldet haben, haben wir es in unserem lokalen Speicher und können die Seite als gesperrte Benutzer verwenden Nachdem das Token aus unserem lokalen Speicher gelöscht wurde, werden wir auf der Seite als die entsperrten Benutzer angezeigt, sodass die Funktionen für gesperrte Benutzer für uns nicht verfügbar sind oder Funktionen, die hinter der Autorisierung für JWT stehen oder Funktionen, die hinter , für uns nicht zugänglich sind Nachdem alles erfolgreich war, werden wir zur Admin-Seite weitergeleitet In einem Catch-Block erstellen wir eine IF-Bedingung, um zu sehen , welchen Fehlertyp wir erhalten haben Falls es sich um eine Antwort handelt, wir eine Statusmeldung mit dem Antwortfehler. Falls es sich um eine Anfrage handelt, protokollieren wir die Fehleranfrage in der Konsole. Und andernfalls protokollieren wir einfach den Fehler. Für J six können wir die Benutzeroberfläche, die wir in Register verwendet haben, wiederverwenden, aber wir werden dort weniger Eingaben haben. Überschrift statt Registrierung wird Login sein. Auch hier rendern wir eine Statusmeldung für den Fall, dass die Statusmeldungsvariable wahr ist, und dann rendern wir sie und dann rendern wir sie als Absatz-Tag nur mit roter Farbe, da wir bei der Anmeldung auf eine Adventsseite weitergeleitet werden, sodass wir keine Zeit die Erfolgsmeldung zu sehen. Dann erstellen wir Tech for Reform und rufen beim Absenden den Submit-Handler auf. Jetzt können wir PACD-Eingaben aus Register JO six kopieren. Wir beginnen mit der E-Mail-Adresse, ändern aber den Wert in den Punkt E-Mail mit den Anmeldedaten , den wir dort definiert haben Bei Änderung rufen wir den Change Input Handler auf. Bei der anderen Eingabe wird es dann Passwort für die Anmeldedaten sein. Dann erstellen wir als Absenden-Button ihre Anmeldeschaltfläche blauem Hintergrund und darauf, wie wir dunkleres Blau verwenden werden. Und auch unten unter dem Formular selbst werden wir einen Text hinzufügen. Noch kein Konto, und falls der Benutzer kein Konto hat, kann er mit diesem Link auf die Registrierungsseite gehen. Jetzt ist es Zeit, es zu testen, also klicken wir dort auf Anmelden. Jetzt verwende ich das Passwort, das ich festgelegt habe. Ich werde auf Login klicken und es logge mich ein. 25. AdminNavbar: Ich zeige Ihnen, wie Sie eine Admin-Navigationsleiste erstellen können , die erst nach der Anmeldung im Admin-Dashboard angezeigt wird In dieser Navigationsleiste platzieren wir dann eine Abmeldeschaltfläche für den Fall, dass unser Administrator ein Logo erstellen möchte Zunächst erstellen wir in Components eine neue Datei und nennen sie adminnavbr Wir können unsere aktuelle NAV-Leiste nehmen und sie dort einfügen. Dann löschen wir das Autosymbol und die mobile Navigation fügen eine Funktion zum Abmelden hinzu, die das Token aus dem lokalen Speicher entfernt und uns auch zum Kunden weiterleitet. Dann können wir anstelle dieser ungeordneten Liste diese Schaltfläche dort platzieren und wir werden unsere Abmeldefunktion zu onClick hinzufügen Jetzt kehren wir zu apt JSix zurück bereits definiert Dislokation und ihre Admin-Route Und Sie können sehen, dass wir das für eine Fußzeile verwenden. Wenn wir uns in der Admin-Route befinden, ist die Fußzeile ausgeblendet. Und wir können das einfach kopieren, dort oben platzieren, diese Navigationsleiste nehmen und sie anstelle der Fußzeile platzieren Falls wir uns jedoch in der Admin-Route befinden , verwenden wir die Admin-Navigationsleiste Also interner Operator auf der richtigen Position, wir werden diese Snapbar platzieren, aber wir werden sie im Adminovbr platzieren und wir werden sie importieren Und wenn wir es kopieren und einfügen, vergessen Sie nicht, diesen Namen in Admin-Navigationsleiste zu ändern Und dann werden wir den Export dort verwenden. Und importiere es in unser Ab Doja Six. Wenn Sie jetzt auf die Seite gehen, haben wir die Abmeldung, und wenn wir darauf klicken, gelangen wir zur Kundenseite Und jetzt für das Admin-Dashboard verwenden wir diese Admin-Routen Und diese Admin-Routen sind in eine geschützte Route eingebettet, die eine unserer Komponenten ist. In dieser geschützten Route verwenden wir diese authentifizierte Methode, die auf true gesetzt wurde, weil wir sie bei der Entwicklung des Projekts nicht verwendet haben Aber jetzt haben wir die JSON-WebToken-Funktionalität, sodass wir diese Funktion löschen und zu True zurückkehren können Und wenn Sie diese Rückgabe auskommentieren, wird überprüft , ob sich das Token im lokalen Speicher befindet Falls dies der Fall ist, werden Kinder zurückgegeben und das Advantage-Board gerendert dies nicht der Fall, werden wir zur Anmeldeseite weitergeleitet. Wir haben Admin gekürzt Wir melden uns an und gehen zu JSN WebToken in unseren Jetzt kehren wir zum Kundenkontakt zurück und dann zurück zum Advantage Board. Wir müssen uns nicht erneut anmelden, Wir müssen uns nicht erneut anmelden da wir es immer noch gespeichert haben 26. JwtAuthForRequests: Wir sind gesperrt und werden versuchen, den Endpunkt aufzurufen, der diese Klicken wir also auf „So Datei bearbeiten“ und dann versuchen wir es und es wird eine Fehlermeldung angezeigt. Wenn Sie es sich also wie einen Reisepass vorstellen, haben wir das Passwort, aber wir zeigen es nicht an. Wir müssen jetzt zu Seiten gehen, auf denen wir das Produkt bearbeiten, erstellen oder löschen , oder einfach zu Seiten, auf denen wir die Anfrage autorisieren möchten Da wir diesen Teil des Codes nun verwenden werden, werde ich ihn dort auf einer neuen Seite erklären, und dort werden wir ihn zu unserer Anfrage hinzufügen Zuerst müssen wir ein Token aus dem lokalen Speicher abrufen und es in einem Token speichern. Und jetzt werden wir einen Konflikt festlegen, den wir als Argument für unsere Anfrage übergeben werden . erste Header ist die Autorisierung, und wir werden unseren gespeicherten Wert aus dem lokalen Speicher wiederverwenden. Dann setzen wir den Inhaltstyp auf Jason. Die Einstellung macht Exos für uns, also müssen wir sie nicht einmal einstellen Es kann uns nur helfen, einige Probleme in Zukunft zu vermeiden. Jetzt werden wir das kopieren und zu der Seite weitergehen, auf der wir die Autorisierung bearbeiten möchten. Ich werde es dort einfügen und jetzt kann ich die Konfiguration wiederverwenden. Also gehe ich in meine Funktion und füge dort neben den Daten als drittes Argument die Konfiguration hinzu. Jetzt werde ich es speichern und auf meiner Seite versuchen, das Produkt zu bearbeiten . Und es funktioniert. Jetzt bearbeiten Sie dort auch die Optionen Löschen und Erstellen als zweites Argument Erstellen als zweites Argument und als drittes Argument dort löschen wir das Produkt, und wir können es auch erstellen. Und das war's für die Autorisierung mit JCN-Lab-Tokens 27. UiFixes: Lassen Sie uns jetzt die Teams reparieren und mit dem UI-Bit spielen. Wir werden auf die Schaltfläche Tem Tagle gehen und dort das helle und dunkle Team anstelle des Business-Teams verwenden diesen Dunkelmodus einzustellen, werden wir Dunkel einstellen. Vergessen Sie auch nicht Um diesen Dunkelmodus einzustellen, werden wir Dunkel einstellen. Vergessen Sie auch nicht, dass wir das Datenteam dort im Index-HTML einstellen müssen, und ich werde das Standardlicht verwenden Wir werden die Benutzeroberfläche des Admin-Dashboards aktualisieren. Gehen wir zu Admin J sechs. Zuerst entfernen wir ihren grauen Hintergrund auf 500. Dann löschen wir die Textfarben und können diesen Hintergrund auf Hintergrundbasis 100 und auf Her Background Base 300 ändern . Und dann sehen wir so aus. Jetzt gehen wir zu den Statistiken und dort die Textbasis 100 fest, legen dort die Textbasis 100 fest, und wir werden sie auch für die anderen Statistiken angeben. Und für einen dritten werden wir auch einen anderen Hintergrund hinzufügen. Wir können den Akzent hinzufügen und auch sekundären Inhalt texten. Auf diese Weise wird es so aussehen. Jetzt müssen wir es auch dort auf unserer At-Item-Schaltfläche auf der Admin-Seite aktualisieren . Wir werden dort auch die Textbasis 100 einfügen. Jetzt fehlt nur noch die Abmeldung, wir gehen in die Admin-Navbar und dort entfernen wir diesen Textbeutel und setzen dort eine DCI-Klassenschaltfläche Außerdem entfernen wir dort eine Hintergrundbasis auf 100, und wenn wir zu einer zweiten Navbar wechseln, entfernen wir auch die Hintergrundbasis 100 Jetzt wird unser Admin-Dashboard so aussehen, wir können also ein Logo erstellen und dort können wir einfach einige Farben der Schaltflächen aktualisieren, die wir dort haben Außerdem würde ich den Abschnitten auf der Homepage für dieses Div, das den Willkommenstext enthält, einen vertikalen Rand auf der Homepage für dieses Div hinzufügen, und ich werde den Rand zu den unteren 24 hinzufügen. Dann ändern wir die Farbe für diese Show-Schaltfläche und wir können sie für den Schaltflächenakzent ändern und wir werden in den Dunkelmodus wechseln. Wir werden die Karten ein wenig hervorheben wollen. Gehen wir zur Produktkarte einzeln und setzen dort die Hintergrundbasis 200 ein. Jetzt werden wir es auch für die Anmeldung und Registrierung reparieren. Gehen wir also zur Anmeldeseite ändern Sie dies für die Hintergrundbasis. Gehen Sie weiter zur Registrierung und machen Sie dasselbe Anschließend können Sie das Produkt bearbeiten, löschen oder erstellen. Lass es uns auch tun. Also, basierend auf 100, können wir das kopieren. Lege es auch dort auf Produkt löschen. Und dort unter Produkt bearbeiten werden wir von dort aus die Textfarben löschen. Ändere diese beiden Schaltflächen. Für die Zurück-Schaltfläche setzen wir dort anstelle des weißen Hintergrunds die Basis 200 und den Rand auf die Basis 300. Also können wir diese Basis wieder kopieren und sie auf alle Ränder ändern . Jetzt wird es so aussehen. Für Create Product werden wir dasselbe tun, also werden wir die Grenzen ändern. Lösche die Textfarbe. Stellen Sie ihre Hintergrundbasis auf 100 ein. Für den Zurück-Button werde ich die Button-Klasse einstellen und da fehlt mir noch ein Rand, also da. Auch mit der Textfarbe, und jetzt zum Löschen werden wir sie auf Background Base 300 ändern. Von dort aus werden wir die Textfarbe löschen. Von dort aus werden wir auch die Textfarbe löschen und für den Link die unterste Klasse hinzufügen. So können wir die Hintergrundbasis, die wir bearbeiten, tatsächlich löschen . Es wird so aussehen. Und das war's für das Admin-Dashboard. Lassen Sie uns nun überprüfen, wie es auf einem Handy aussieht. Und wir müssen den Logout-Button reparieren. Gehen wir also schnell zur Admin-Navigationsleiste. Und wir werden das Verborgene entfernen und einfach ihre Display-Flaggen belassen. Und das sollte es jetzt sein. Schauen wir uns also das Dashboard an. Lassen Sie uns versuchen, einen Artikel hinzuzufügen. Lassen Sie uns versuchen, den Artikel zu bearbeiten. Und alles funktioniert. Übrigens, wenn Sie zum Beispiel nur die ersten drei Artikel auf Ihrer Homepage anzeigen möchten , gehen Sie zu Home J sechs, gehen Sie zu Home J sechs, und dort unterhalb des Use-Effekts erstellen Sie das stets neueste Produkt, und Sie teilen das Produkt, das Sie in die Statusvariable bekommen haben , nach der Anzahl der Produkte, die Sie zeigen möchten. Also werde ich ihren Baum verwenden dort werde ich mir dieses neueste Produkt besorgen. Ich werde es dort eingeben, speichern. Und jetzt werden auf meiner Homepage nur drei Artikel angezeigt. Und vielleicht schaffe ich dort etwas mehr Spielraum. Lassen Sie uns also diesen Rand von oben nach oben in einen tatsächlich vertikalen Rand ändern . Jetzt gehen wir zur Karte und ändern auch den Hintergrund auf den Hintergrund Basis 200. Eine weitere Sache müssen wir in der Rückenwind-Konfiguration JS tun in der Rückenwind-Konfiguration JS Wir werden zum Beispiel oben unter den Plugins hingehen und dort auch den Dunkelmodus einstellen Dann werden wir sicherstellen, dass unser Dunkelmodus auch dann erhalten bleibt, wenn wir verschiedene Seiten durchgehen. 28. DeployVercelAktualisiert: Wird Versal verwenden und unsere Website bereitstellen. Was wir tun müssen, noch bevor wir dieses Projekt auf Git übertragen, sollten wir Git Ignore hinzufügen, da wir die Umgebungsvariablen hauptsächlich aus dem Backend ignorieren müssen die Umgebungsvariablen hauptsächlich aus dem Backend ignorieren Wir speichern unsere Geheimnisse und Passwörter und Git Ignore befindet sich dort neben dem Frontend- und Backend-Ordner Sie werden es als Punkt Gidgno erstellen und dort diese Werte eingeben Aber der wichtigste ist Bendslash Dot NF. Jetzt müssen wir überprüfen, ob wir diese Umgebungsvariable für die Bend-Basis-URL haben diese Umgebungsvariable für Diesen müssen wir jetzt anstelle aller lokalen Hosts 3.000 verwenden . Auf der Startseite haben wir zum Beispiel dieses Produkt Punkt get HDP Local Host 3.000, und jetzt müssen wir es durch den Wert ändern, den wir dort in unserer Umgebungsvariablen haben, nämlich der Vet React-App Nehmen wir diesen Namen auf Home J sechs, ändern wir ihn. Und sei auch vorsichtig. Dies sind umgekehrte Schrägstriche, keine normalen einfachen Anführungszeichen. Nun, wie wir es dort getan haben, werden wir es für alle lokalen Hosts tun, die wir in unserem Projekt finden können Das heißt, Sie klicken auf diese Suche oder drücken Sutter o Shift F und geben dort Local Host 3.000 ein, und geben dort Local Host um für Sie alle Dateien zu finden , bei denen Sie das noch nicht geändert Sie werden alle lokalen Hosts 3.000 auf diese Umgebungsvariable ändern 3.000 auf diese Umgebungsvariable Sie können die Änderungen sehen, die ich dort vorgenommen habe. Nachdem wir das getan haben, gehen wir in den Bend-Ordner und erstellen eine neue Datei. Sie werden diese Datei Versal Dot JSON nennen. Nachdem Sie diese Datei erstellt haben, fügen Sie sie ein, da sie für Versal spezifiziert , wo sich unsere Indexhunde in dem Dann gehen wir in den Frontend-Ordner und erstellen dort auch den VersL-Punkt-JSON Aber dort fügen wir einfach die Rewrite-Quelle und das Ziel in den Indexpunkt HTMO ein, und das Ziel in den Indexpunkt HTMO ein, genau Falls Sie dann bei der Bereitstellung scheitern, gehen Sie zum JSON-Paket und ändern Sie Cloudinary wie ich auf diese Version ändern Vorher war es eine Version 2.2, und als ich es bereitstellte, schlug es fehl Dann habe ich die Version heruntergesetzt und sie war erfolgreich. Aber jetzt werde ich Ihnen zeigen, wie ich den Einsatz in Versal mache Versal wird unser Projekt aus dem Git-Repository übernehmen. Was wir also tun müssen, ist, dass wir einfach den Befehl SotorShift B drücken. Dort klicken wir auf Publish to Git, dort geben Sie den Namen für Ihr Repository ein Dort klicken wir auf Publish to Git, dort geben Sie den Namen für Ich kann dort zum Beispiel Produkte zwei eingeben und die Eingabetaste drücken , dann wird es auf Git veröffentlicht Falls du irgendwelche Änderungen vornimmst. Lass es uns versuchen. Lassen Sie uns den Index CML, so etwas, dort ablegen und speichern Sie werden dann Ihre Änderungen dort in der Quellcodeverwaltung haben. Und falls du das Repository aktualisieren und pushen möchtest , klickst du dort auf Plus. Sie werden dort eine Commit-Nachricht eingeben, aktualisieren und auf Commit klicken. Dadurch werden diese Änderungen auch in Git übernommen, Dadurch werden diese Änderungen auch in Git übernommen wo Sie dann Ihr aktualisiertes Projekt haben. Jetzt gehst du zu Versal und dort werden wir uns einloggen. Ich werde dort auf ein neues Projekt klicken . Ich werde das Projekt haben, das ich gerade geschoben Also Marin Digital Products, ich werde auf Import klicken. Dort lasse ich Or für Verzeichnis stehen, Sie klicken auf Bearbeiten und fahren im Backend fort und dann müssen Sie in den Umgebungsvariablen alle Umgebungsvariablen festlegen, die Sie haben Also werden wir zum VS-Code zurückkehren. Wenn wir zu unserem Bend-Ordner und zu den Umgebungsvariablen wechseln, müssen wir all diese Umgebungsvariablen, die wir dort haben, dort kopieren und einfügen . Fangen wir also an. Zuerst gebe ich dort das JWT-Geheimnis ein und klicke auf AD Dann füge ich die nächste Umgebungsvariable hinzu, Front-End-URL, und diese ist Local Host Dies wird die tatsächliche URL des Frontends sein , das wir nach diesem Backend bereitstellen werden Also können wir das vorerst leer lassen, es so machen und wir werden es aktualisieren Aber jetzt füge die restlichen Variablen hinzu , die wir dort haben. Jetzt können Sie sehen, dass ich sie dort bearbeitet habe und wir werden auf Bereitstellen klicken. Jetzt ist unsere Seite bereitgestellt. Sie klicken dort auf Ihr Projekt und wir übernehmen die Bereitstellung des Frontends. Wir klicken auf Neues Projekt hinzufügen. Dort verwenden wir dasselbe Repository wie zuvor. Wir werden das Preset auf nass einstellen. Dort werden wir klicken und bis zum Frontend bearbeiten. Das Stammverzeichnis wird also Frontend sein. Und dann zu den Umgebungsvariablen, wir werden überprüfen, welche wir im Frontend-Ordner haben und es ist diese, also werden wir sie kopieren. Fügen Sie es dort ein und in den Wert geben wir die URL unseres Backends Gehen wir also zu unserer Bend-Bereitstellung und kopieren dann diese URL Wir werden es dort einfügen. Aber vor der URL setzen wir HDDPS-SLASAs Andernfalls können wir die Anfrage nicht bearbeiten. Jetzt klicken wir auf AD und dann auf Deploy. Jetzt wurde unsere Seite bereitgestellt, und jetzt müssen wir diese URL des Frontends verwenden. Gehen Sie in die Bereitstellung unserer Bend-Anwendung, klicken Sie auf das Projekt, klicken Sie auf Einstellungen und gehen Sie zu den Umgebungsvariablen. Und dort müssen wir die Front-End-URL eingeben , die wir durch diese Frontend-Bereitstellung erhalten haben. Also werden wir auf Bearbeiten klicken. Wir werden dort die URL eingeben und wir werden dort HTPS einfügen Jetzt klicken wir auf Speichern. Und nachdem wir das geändert haben, gehen wir zu Deployment und dort erneut bereitstellen und erneut bereitstellen Denn wenn wir die Umgebungsvariable ändern, müssen wir das Backend erneut bereitstellen Und jetzt können wir auf unserer Seite versuchen, ein Produkt zu kaufen Bearbeiten Sie es dort, gehen Sie zur Kasse und der Stripe funktioniert Wir können das einfach bezahlen, das war's.