So erstellst du eine Full-Stack-Website mit MERN Stack für Einsteiger:innen im Web-Entwickler:innen 2025

1. Einführung: In diesem Kurs lernen Sie MRN Stack kennen und wir werden es in die Praxis umsetzen, indem wir mithilfe des MRN Stacks selbst eine Full-Stack-Website für die Lieferung von Lebensmitteln erstellen Willkommen. Dieser Kurs richtet sich an alle, die lernen möchten, wie man Full-Stack-Anwendungen mit Mongo DB, Express, React und Note JS erstellt Full-Stack-Anwendungen mit Mongo DB, Express, React und Note JS Am Ende dieses Kurses werden Sie ein solides Verständnis der Full-Stack-Entwicklung und der Art und Weise haben ein solides Verständnis der Full-Stack-Entwicklung und der Art und , wie verschiedene Technologien zusammenarbeiten , um reale Webanwendungen zu erstellen Am Ende dieses Kurses werden Sie in der Lage sein, neue Lebensmittel von Ihrer Website direkt zur Datenbank hinzuzufügen neue Lebensmittel von Ihrer Website , sie direkt von Ihrer Website aus zu aktualisieren, zu bearbeiten oder bei Bedarf einfach 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. Wir werden auch behandeln, wie man mit Daten und HTTP-Methoden wie Erstellen, Lesen, Aktualisieren oder Löschen arbeitet Daten und HTTP-Methoden wie Erstellen, . Außerdem werden wir eine Benutzeroberfläche für unsere Plattform für die Lieferung von Lebensmitteln erstellen. Lassen Sie uns aufschlüsseln, was diese Technologien bedeuten. M für Mongo Di Eine Datenbank vom Typ B, in der Sie wichtige Informationen für Ihre Anwendung wie Menüelemente, Benutzerbestellungen, Lieferdetails usw. speichern können wichtige Informationen für Ihre Anwendung wie Menüelemente, Benutzerbestellungen, Lieferdetails usw. E für Express JS, ein Tool, das uns hilft, das Frontend mit dem Backend zu verbinden Es wird das Routing einfach machen. Wenn ein Benutzer also Lebensmittelkategorien durchsucht, Artikel zu seiner Karte hinzufügt oder Bestellungen aufgibt, funktioniert alles reibungslos R für React, das zum Aufbau eines interaktiven und dynamischen Frontends verwendet wird , ermöglicht es Benutzern, Speisekarten zu durchsuchen, Artikel zu ihrer Karte hinzuzufügen, Bestellungen aufzugeben und Lieferungen in Echtzeit zu verfolgen, ohne dass Seiten neu Und für Node JS, das es uns ermöglicht , JavaScript auf der Serverseite zu verwenden, und es hilft, die Datenbank zu verbinden, die Benutzerauthentifizierung durchzuführen, Bestellungen zu bearbeiten und Zahlungen zu verwalten Wir werden auch wichtige Dienste von Drittanbietern integrieren , um unsere Website für Lebensmittellieferungen zu verbessern, darunter Stripe für die sichere Zahlungsabwicklung, Cloudinary für die Speicherung und Verwaltung von Lebensmittelbildern, JWT, auch bekannt als JSON Web Tokens für die Benutzerauthentifizierung, und dann werden wir eine voll funktionsfähige Merde-basierte Website für Lebensmittellieferungen haben Merde-basierte Website für Lebensmittellieferungen , die Sie anpassen können Verwenden Sie es für Ihr Portfolio oder verwandeln Sie es sogar 2. Backend-Setup: Zuerst erstellen wir in unserem Projektordner einen neuen Ordner, und es wird einen Bend-Ordner geben Jetzt öffnen wir ein Terminal. Dort müssen wir CD Bend, NPM ini Y ausführen. Das erzeugt dort im Paket unter der Beschreibung ein Paket, wir schreiben type und dort schreiben wir ein Modul, dem wir importieren und exportieren können Wir werden mit der Installation des Express fortfahren. dann den Nodeman Wenn wir dann den Nodeman in unsere Skripte aufnehmen, werden wir zu Beginn den Befehl node index dot JS verwenden wollen, und darunter fügen wir def nodemon Und das bedeutet, dass jedes Mal, wenn wir NPM run death ausführen, auch dieser Nodemon Index Js und das, wofür Nodemon gedacht ist, für uns ausgeführt wird jedes Mal, wenn wir NPM run death ausführen, auch dieser Nodemon Index Js und das, wofür Nodemon gedacht ist, für uns ausgeführt wird. Und Nodemon ist ein Hilfsprogramm , das weitere Änderungen in unserem Quellcode überwacht und auch unseren Server automatisch neu startet unserem Quellcode überwacht und auch unseren , das weitere Änderungen in unserem Quellcode überwacht und auch unseren Server automatisch neu startet. Jetzt erstellen wir im Ordner Been eine neue Datei mit Punkt N und in dieser Datei speichern wir Umgebungsvariablen Der erste wird Port sein, und es werden 3.000 sein. Wenn wir jetzt zu IndexDGS gehen, müssen wir zuerst Express importieren Außerdem müssen wir die Konfiguration von Do tenf importieren , dann dieses D als Zehntel nehmen und dort NVM I do Geben Sie ein und das Terminal installiert es jetzt, um die DTanF-Konfiguration zu initialisieren und die Umgebungsvariablen zu laden, die Als nächstes werden wir die Konfiguration durchführen und Erstellung einer Express-Anwendung mit Const App Express fortfahren einer Express-Anwendung mit Const App Express Und jetzt starten wir den Server. Also machen wir App Punkt Punkt und hören auf unseren Prozess Punkt Punkt Port. Und nachdem das passiert ist, werden wir das Konsolenprotokoll schreiben, sodass wir tatsächlich wissen, dass es unseren Port abhört. Server, der auf dem Prozesspunkt des Port-Ports läuft. Wir werden das jetzt speichern und testen. Also werden wir dort in unserem Terminal NPM Run Dev schreiben Und mit Hilfe der Skripte, die wir dorthin gebracht haben, nodemon index JS, werden der Server und der erste Knoten gestartet Das heißt, wir werden diese Konsole gesperrt haben. Selbst wenn wir dort ein Update machen und es speichern, startet der Node Mo den Server neu und unsere Änderung wird dort angezeigt. Und das funktioniert natürlich auch bei anderen Serveränderungen, nicht bei dieser Konsolensperre, sondern bei denen, die wir später implementieren werden. 3. MongoDB-Einrichtung: Gehen wir jetzt zu mongtb.com. Klicken Sie auf Kostenlos starten und wir erstellen dort ein Konto Jetzt wollen wir eine neue Datenbank erstellen. Wir werden den freien Namen wählen, unter dem wir Essen machen können. Lieferung, dann erstellen wir den Einsatz. Dann wählen wir Benutzername und Passwort. Erstellen Sie einen Datenbankbenutzer. Jetzt, Verbindungsmethode. Ich werde ihre Treiber einstellen. Dort habe ich geschrieben, was ich verwenden sollte , um das in meiner Bewerbung zu haben. Also lass es uns tatsächlich benutzen. Wir werden ihren Knoten auswählen. Dort können wir einfach ein anderes Terminal öffnen und wir machen das CD-Backend und NPM I MongoDB Jetzt installieren wir die Mongo-Datenbank und gehen jetzt zurück und kopieren auch diese Zeichenfolge Und wir werden die Zeichenfolge dort in unsere Umgebungsvariablen einfügen dort in unsere Umgebungsvariablen Und wir werden es so haben. Wenn Sie dieses Passwort noch nicht haben, aber dort nur dieses Passwort haben, müssen Sie W durch Ihr aktuelles Passwort ersetzen. Ich verwende das Passwort 123. Dann können wir mit der Überprüfung der Einrichtungsschritte fortfahren. Sie können sehen, dass wir erfolgreich sind. Wenn wir jetzt Sammlungen durchsuchen, werden wir dort später die Sammlungen sehen, die wir dort hochladen werden. nun die Mangaib-Interaktionen angeht, können wir NPMI Mongoose machen Dort werden wir es importieren. Und dort können wir es verwenden und wir werden in etwas nachschauen wollen , als ob wir tatsächlich mit der Datenbank verbunden sind. Was wir jetzt tun werden, ist, diesen Monge zu benutzen und dort werden wir Punkt Connect machen Und wir werden dort diesen Prozess Punkt MongoDB nennen. Und es wird versuchen, eine Verbindung zu der Zeichenfolge herzustellen, die wir dort in unserer Punkt N-Datei haben Jetzt werden wir es tun und wir werden es auf der Konsole protokollieren wollen. Wenn dies also erfolgreich sein wird, werden wir sagen, dass die Datenbank verbunden ist. Wenn das nicht erfolgreich sein sollte, wollen wir einen Fehler abfangen. Also werden wir es dort sperren. Ich verstehe, wir machen einen Fehler und wir werden ihn trösten, und wir werden diesen Fehler bereinigen. Jetzt werden wir es speichern. Und falls das nicht erfolgreich sein sollte, werden wir dort, statt dass die Datenbank verbunden ist, die Fehlermeldung sehen . 4. Lebensmittelmodell und -routen: In unserem Bend-Ordner werden wir einen neuen Ordner erstellen und ihn Models nennen. Wir können auch einen anderen erstellen und wir werden ihn Rods nennen. Und in unserem Models-Ordner erstellen wir eine neue Datei und nennen sie Food Model Dot JS. Und in Routes können wir eine neue Datei erstellen und wir werden sie Food Route Dot Chs nennen. Fangen wir mit dem Lebensmittelmodell an. Und dort werden wir das Schema für die Lebensmittelsammlung definieren. Wir werden in unserer Datenbank speichern. Was auch immer wir also den Preis, den Namen des Lebensmittels usw. definieren , wir werden dieses Modell oder diese Felder, die unser Lebensmittelmodellobjekt haben sollte, an unsere Datenbank übergeben . Zuerst importieren wir Unguse aus Mungus und beginnen dort mit dem C-Lebensmittelschema Mongos Und es wird das Feld für den Lebensmitteltitel geben. Und vorerst werden wir den Namen des Essens verwenden. Es wird vom Typ Zeichenfolge sein und ist erforderlich. Stimmt. Der nächste wird Price in Sense sein. Und ich verwende ihren Preis sinnvoll, weil wir auch Stripe und Stripe als Feld verwenden werden . Das ist sinnvoll, weil es den Preis gewissermaßen zählt. Das war ziemlich offensichtlich, aber ja, benutzen wir es einfach wegen des Streifens. Und da verwenden wir die Art der Nummer. Es muss auch wahr sein. Und nicht zuletzt wird es das Bild sein. Das wird vom Typ Stärke sein und durchgängig erforderlich sein. Natürlich ist das Bild nicht vom Typ Zeichenfolge, aber wir schicken dort tatsächlich eine URL des Bildes runter . Wir werden es auf Cloudinary hochladen, da wir kein Bild mit etwa 2 Megabyte in MongoDB hochladen können etwa 2 Megabyte in MongoDB hochladen Wir werden es auf Cloudinary hochladen und Cloudinary generiert die URL mit dem Bild für uns, und das ist die URL, mit der wir die MongoDB hochladen werden und das ist die URL, mit der die Wenn wir dann die Daten von Mongo abrufen, wird es für uns tatsächlich die URL des Bildes abrufen, das wir hochladen das Jetzt, am Ende, werden wir nach dem Vorbild von Food Mungo exportieren . Speichern Sie Und jetzt haben wir das Modell. Wir können zur Essensroute gehen. Wir werden den eigentlichen Lebensmittelweg für den Versand der Lebensmittel an unsere Mongoib festlegen und dann werden wir es mit Postman testen Auf dem Lebensmittelweg werden wir Express von Express importieren. Dort werden wir Lebensmittel importieren, echtes Essen von Modellen, Lebensmittelmodell. Du kannst DGS hier machen, speichern. Dann machen wir dort einen Router Express Dot Router. Dies ist eine Router-Instanz von Express , mit der wir einen Router oder die Routen verwalten werden. Und jetzt können wir mit Post Route beginnen , um ein neues Lebensmittel in unserer Mongoli B zu erstellen. Also werden wir dort Router Dot Post verwenden Wir werden dort die erste URL angeben , die nur ein asynchroner Schrägstrich sein wird. Wir werden eine Anfrage und eine Antwort senden Als Parameter, und da werden wir etwas ausprobieren. Also machen wir hier die Bedingung und innerhalb der Bedingung machen wir eine Anfrage mit dem Namen oder die Anfrage nach dem Preis in Sense oder Requestbdy Dot Image Wenn die Bedingung erfolgreich ist, geben wir den Antwortstatus 400 zurück Und wir werden dort auch eine Nachricht senden. Da wir dort das Ausrufezeichen haben und das bedeutet, dass das nicht stimmt, ist das eine Fehleraussage Also schicken wir dorthin, dass Pflichtfelder fehlen. Kann so sein? Aber falls diese Aussage falsch sein sollte, werden wir dort tatsächlich in einem Triblog weitermachen und weiterhin neue Lebensmittel kreieren Und wir werden den Namen festlegen, der als Name des Textpunkts angefordert werden soll auch den Preis in Cent an, fordern Sie den Body-Punkt-Preis in Cent an, und auch mit dem Bild fordern Sie das Body-Punkt-Bild an. Und wir werden mit Essen weitermachen, warten, also asynchron auf Nahrung warten , neues Essen kreieren Dadurch wird das neue Lebensmittel in der Datenbank gespeichert Antwortstatus zwei gegen eins zurückgesendetes Essen. Und das bedeutet, dass wir ihm eine Datenbank senden und mit dem benoteten Status „ Zwei-eins-Antwort“ antworten werden Wir müssen uns auch an etwas halten , um unsere Fehler aufzudecken, also werden wir den Triblock schließen , der eigentlich dort endet Und nach dem Handelsblock werden wir Fehler abfangen und alle Fehler beim Senden des Servers protokollieren In der Konsole wird also eine Fehlermeldung angezeigt, und wir setzen das Antwortdatum auf 500 Punkte beim Senden einer Nachricht mit einem Punkt. Jetzt können wir das auch dort schließen. Jetzt haben wir die erste Route. Lass mich das tatsächlich machen. Lass uns zu Index Dot JS gehen und dort werden wir die Route importieren. Also importiere die Lebensmittelroute von, mal sehen, wo sie ist. Da draußen Food Route Punkt JS, speichere es. Und dort werden wir EpidotUePress dot JSON machen, und das liegt daran, dass wir eine Middleware zum Pressen der JSON-Texte verwenden wollen , wie wir zum Beispiel mit Postman testen werden Jetzt machen wir EpiDTU und wir machen ihr Dot Food oder Slash Food und Foodout ihr Dot Mal sehen, warum Nodemon versagt. Lebensmittelroute von Routen. Bietet natürlich keinen Export, also müssen wir dorthin gehen. Bei unserer Essensroute haben wir vergessen, den Standard-Router zu exportieren. So wie das hier. Das sollte jetzt in Ordnung sein. Und jetzt zum Postboten. Melden Sie sich an oder registrieren Sie sich in der Postman-Anwendung oder auf der Postman-Seite. Sie finden web.postman.co Nachdem Sie sich angemeldet oder registriert haben, klicken Sie dort auf Rest API Basics . Sie können dort schließen, hier auf die Plus-Schaltfläche klicken und dort platzieren wir die URL, die Sie verwenden möchten. Also machen wir das HTP-Mesh Localhost 3.000 Slash FOOT. Wir werden auf Post umstellen, weil wir noch nicht definiert haben, dass nur Post abgerufen Und für das Posten, da es sich um ein Update handelt, müssen wir auch etwas Input liefern Also, was wir tun werden , ist, in diesen Körper zu gehen. Wir klicken dort auf Raw und stellen sicher , dass Jason angekreuzt ist. Dort werden wir jetzt die Felder eingeben. Der Name wird angegeben, ein Preis in Cent wird 20.000 sein, das Bild wird eine Bild-URL sein. Jetzt klicken wir auf Senden und können dort sehen, dass es in der Datenbank veröffentlicht wurde. Lassen Sie uns nun gewissermaßen den Preis löschen und versuchen , ihn erneut zu senden. Erforderliche Felder fehlen. Jetzt können Sie sehen, dass das, was wir in dieser Lebensmittelroute definiert haben, tatsächlich passiert. Falls uns zum Beispiel dieses fehlt, also Ausrufezeichen und/oder Bedingung, erhalten wir, dass Pflichtfelder fehlen Und falls wir jedes Feld haben, überspringt es diese I-Bedingung und fährt dort fort, und es speichert die neuen Felder in der Datenbank Gehen wir jetzt zu unserer MongoDB und überprüfen die Daten, die wir dort haben Und wenn du darauf klickst, haben wir dort das Essen. Natürlich senden wir es jetzt über Postman, aber später im nächsten Teil dieses Videos werden wir es vom Frontend aus versenden Also im Frontend werden wir dort eine Karte mit Schwanz und CSS haben, weißt du, gestylte Karte, wo wir diese Eingaben machen und dann mit einer Schaltfläche diesen Beitrag aufrufen und er wird ein Objekt in unsere Datenbank einfügen Und ich denke, wir können damit fortfahren, dort noch mehr Routen für unsere Lebensmittel zu schreiben , um Lebensmittel zu bekommen, bestimmte Lebensmittel zu bekommen und Lebensmittel zu löschen Ich denke, zuerst wäre es ratsam, Get Food so zu definieren , dass alle Lebensmittel, die wir dort haben, abgeholt Also wieder Router-Punkt G, nur das ist eine synchrone und angeforderte Antwort Und auch dort werden wir zunächst versuchen, alle Lebensmittel aus der Datenbank abzurufen Und falls es ein Problem geben sollte, werden wir es dort finden, den Fehler erkennen. Und wir können auch das Consolog mit der Fehlermeldung starten. Und senden Sie auch die Antwort an 500 und senden Sie die Nachricht mit der Fehlermeldung Im Triblog können wir jetzt weitermachen. Dort werden wir also ständig essen, und wir werden auf den Futterpunkt warten Dieser wird also versuchen, alle Lebensmittel aus der Datenbank abzurufen , und wir werden sie auch dort zurückgeben also den Antwortstatus mit 200 Punkten JSON zurück und wir werden die Daten Food zurückgeben. Wenn du jetzt zu Postman gehst, und wir werden dort tatsächlich einen Preis mehr machen da irgendwas ist. Fuß zwei Lass uns jetzt einfach ein bisschen mehr Daten dorthin schicken, also mache ich Fuß zwei und Fuß Drei. Fantastisch. Ich habe gerade zwei weitere Lebensmittelobjekte in unserer Datenbank erstellt. Wir können diese Post-Methode jetzt in die Get-Methode ändern. Klicken Sie auf Gesendet. Und jetzt können wir dort sehen, dass wir die Daten dort bekommen werden. Also haben wir das erste Lebensmittel bekommen, zweite und auch ein drittes. Und jetzt werden wir auch mehr definieren. Also werden wir jetzt definieren. Das heißt eigentlich aktualisieren. Wenn Sie also die Fußnummer aktualisieren möchten, müssen wir ihre ID abrufen und im URL-Pfad, sobald wir die ID haben, können wir zum Beispiel ihren Namen oder die Preise aktualisieren , und wir werden auch die Löschung veranlassen. Natürlich können wir nicht löschen. Wir wollen nicht alle Lebensmittel löschen , die wir in der Datenbank haben. Also verwenden wir wieder ihre NID und setzen den Löschvorgang für die spezifische ID Dann können wir zum Beispiel dieses Wandelement aus der Datenbank löschen zum Beispiel dieses Wandelement aus der Datenbank Gehen wir zu eSCDE und codieren es. Zuerst können wir das Löschen durchführen. Dort werden wir also Router ausführen, die mit einem Schrägstrich löschen, und es wird die ID des Elements als synchrone Anforderungsantwort Auch hier werden wir zuerst versuchen, es zu tun. Falls es dann scheitern sollte, werden wir es dort abfangen. Wir verwenden also Tricatchbloxs, und das können wir wieder tun, und das können wir wieder tun, Wir können es von dort aus wiederverwenden, also Und in Tribloc werden wir zuerst die Konstante der ID laden. Also fordere Parameter an. Jetzt werden wir die ID aus dem URL-Parameter extrahieren und dann das Ergebnis konstant halten und das Lebensmittel dort löschen Vermeiden Sie es, Lebensmittel anhand der ID zu finden und zu löschen. Und der Eingabeparameter für diese Methode, find by ID und delete, ist die ID, die wir aus den Parametern erhalten Wenn nun ein Ergebnis oder kein Lebensmittel gefunden wurde, geben wir die Antwort vier oder vier, nicht gefunden zurück. Geben Sie also den Antwortstatus vier von vier zurück. Baue Jason, und dort werden wir die Nachricht einfügen , dass das Objekt nicht gefunden wurde. Lass es uns jetzt tatsächlich versuchen. Gehen wir also zu Postman. Lassen Sie uns dort den Ausweis des ersten Essens verwenden . Lass es uns da hinstellen. Schicken Sie es. Und wir können sehen, dass es für eine längere Zeit geladen wird. Lass uns jetzt einfach das Essen da hinbringen. Und wir können sehen, dass es tatsächlich gelöscht wurde. Lassen Sie uns später darauf zurückkommen , falls es Probleme geben sollte, aber im Moment funktioniert es. Lassen Sie uns dort auch einige Kommentare verwenden, also ein neues Lebensmittel erstellen, bei dem alle Lebensmittel abgerufen werden , wobei bestimmte Lebensmittel gelöscht werden. Und jetzt werden wir das Lebensmittel erstellen, aktualisieren und ein bestimmtes Lebensmittel erhalten. Lassen Sie uns mit der Aktualisierung eines Lebensmittels fortfahren, damit das eingefügt wird. Und bei diesem Punkt mit dem Rotor beginnen wir mit dem Außentopf und geben dort die ID ein. Auch hier erhalten wir einen Parameter wie in delete, und auch hier wird es ein synchroner sein Die Eingabeparameter sind Anfrage und Antwort. Dort werden wir Trcetchblock machen. Also nochmal, wie ihr wisst, können wir für diesen Sketch einfach diesen kopieren, was wir können, dort hingehen und kopieren, was Also da oben werde ich es einfügen. Natürlich müssen wir die schließende lockige Klammer machen . Und wir können dort anfangen Wenn also ein Feld fehlt, werden wir zunächst eine fehlerhafte Anfrage zurücksenden. Und das wird wieder dasselbe sein, was wir dort haben. Also ich denke, wir können es wieder so kopieren. Und weiter unten, wenn es diese Bedingung erfüllt, können wir tatsächlich beginnen. Also werden wir zuerst die ID aus dem URL-Parameter extrahieren. Und ja, etwas Ähnliches haben wir da. Und weißt du eigentlich was? Lasst uns wieder antreten, weil wir faule Programmierer sind. ID werden also Anforderungsparameter sein. Im Ergebnis warten wir auf Essen, und wir werden es nicht löschen, sondern wir werden es nur anhand der ID und des Updates finden. Die Parameter werden ID und Request Dot Body sein, und dort werden wir newto haben , was bedeutet, dass das Lebensmittel in der Datenbank aktualisiert wird Okay. Dann werden wir dort einen Scheck machen. Wenn also das Ergebnis oder wenn der Artikel ohne Lebensmittel nicht aktualisiert werden kann, wir den Fehler vier von vier nicht gefunden zurück. also den Antwortstatus, vier von vier, und die Jason-Meldung „Essen nicht gefunden“ zurück. Und falls es erfolgreich ist, geben wir den Antwortstatus 200 zurück senden die Nachricht auf dem neuesten Stand. Okay, jetzt können wir es speichern. Wir können es natürlich versuchen. Aber lassen Sie uns zuerst dieses spezielle Lebensmittel herstellen und dann werden wir es auch mit dem Update versuchen. Dort erhält dein Router ID synchron und Anfrage als Eingabeparameter, dort machen wir einen Tricatchblock Auch hier können wir es im Grunde einfach dorthin kopieren. Für den Tri-Block werden wir einfach wieder kopieren und einfügen. Von dort aus werden wir es so platzieren oder stylen. ID als Parameter aus der Anfrage und dann kein konstantes Ergebnis, sondern konstantes Essen. Und wir warten auf Geld per Ausweis. Also wird es es einfach finden. Führe keine weiteren Aktionen aus. Und ich glaube auch, dass nur ID als Eingabeparameter genug ist . Ja. Und wenn das Essen zurückgegeben wurde, werden wir auch die Antwort von 2000 zurücksenden. Rückantwort, Punktstatus 200 hat kein Essen. Speichern Sie es. Und jetzt gehen wir zu Postman und testen es Zuerst besorgen wir uns alle Lebensmittel, die wir haben. Wir können dort auch die Summe einfügen. Lassen Sie uns dort also zuerst einen weiteren Artikel posten. Wir haben dort also immer noch drei Lebensmittel. Jetzt holen wir sie uns. Nehmen wir nun eine ID, zum Beispiel für den Artikel Food Tree. Lassen Sie uns diese ID für Lebensmittel verwenden. Jetzt hast du nur noch einen Gegenstand. Jetzt ändern wir das in „setzen“. Und was wir jetzt tun müssen, ist Food Tree New, wir werden auf Senden klicken. Wir sehen, dass das Essen aktualisiert wurde. Wenn wir jetzt essen gehen, können wir uns Essen in Trenu ansehen Wenn wir jetzt die ID löschen, können wir sehen, dass wir auch ihr Essen haben, Essen Trenu und Essen eins Und das wird es für unser Lebensmittelmodell und unsere Lebensmittelroute sein. Jetzt können wir alle Artikel abrufen, aktualisieren, löschen, einen bestimmten Artikel auswählen, und ich denke, das war's. 5. Benutzermodell und Routen: Fahren Sie in unserem VS-Code fort. In Modellen erstellen wir jetzt eine neue Datei mit dem Namen user dot JS. Und in diesem Benutzer-Punkt-JS werden wir das Modell unseres Benutzers erstellen, was mehr unseres Admins bedeutet , weil wir auch Admin-Konten erstellen, in unser Admin-Backend einloggen und dort werden wir Einstellungen vornehmen oder das Backoffice wird die Daten der Elemente festlegen und so weiter Also werde ich Mungus aus dem tatsächlichen Mungus importieren . Dort werde ich das Benutzerschema Mangus-Schema erstellen Zuerst wird es eine E-Mail geben, deren Typ Zeichenfolge erforderlich ist und die auch eindeutig ist. Dann wird es auch ein Passwort geben. Es wird eine Zeichenfolge geben, die auch so benötigt wird. Und wir werden das Benutzerschema des Fort Mongoose-Modells exportieren. Hab keine Angst. Sie werden ihnen nicht einfach nur eine Passwort-E-Mail schicken. Es wird einige Logins geben und es wird auch ein Backend geben, das dieses Passwort tatsächlich verschlüsselt Wir haben dort also ein gewisses Maß an Sicherheit. Also, lass es uns jetzt machen. Fügen Sie dort einen neuen Ordner hinzu, und dieser Ordner wird Controller genannt. In diesem Controller befindet sich die neue Datei von Controller Dot JS. Und in diesem Octrollert Gs werden wir tatsächlich die Post-Route für die Benutzerregistrierung und für die Benutzeranmeldung Fangen wir mit der Post-Route für die Benutzeranmeldung an. Zuerst müssen wir natürlich einige Module importieren und installieren. Also importieren wir zuerst Express, das wir bereits von Express haben . Jetzt importieren wir B-Krypt für das Passwort-Hashing Also B-Krypt aus B-Krypt JS. Wir werden JWT aus JSON Leptoken importieren und wir werden auch den Benutzer aus den jetzt erstellten Modellen importieren (user dot JS Zunächst werden wir ein Terminal öffnen. Dort werden wir CD, Becond und wir werden NPM, I B Crypt, JS, JCN Webtoken machen I B Crypt, JS, JCN Also im Grunde diese beiden Bibliotheken. Drücken Sie die Eingabetaste. Wenn Sie die Befehlszeile löschen möchten, können Sie CLS ausführen, aber jetzt können wir sie schließen und speichern Zuerst machen wir das oder wir erstellen ein neues Router-Objekt , das die Route verwaltet Äußerer Express-Router. Und dort erstellen wir zuerst die Route für die Benutzerregistrierung und später unten die Route für die Benutzeranmeldung. Fangen wir mit der Benutzerregistrierung an, also wird es eine Robber Dot Post Registrieren, asynchrone Anfrageantwort. Und da fangen wir wieder mit dem TryCatch-Block an. Und im Tri-Block werden wir zuerst E-Mail und Passwort aus dem Anfragetext extrahieren Das konstante E-Mail-Passwort entspricht also dem Anfragetext. Dann werden wir prüfen, ob der Benutzer bereits existiert oder nicht, also verwenden wir Const Warten Sie, bis der Benutzer eine E-Mail gefunden hat. Per E-Mail. Also werden wir einen finden. Natürlich werden wir aufgrund des Passworts nicht herausfinden, ob es existiert. Das wäre zumindest komisch. Jetzt können wir das tun, wenn der Benutzer existiert. Wir werden eine Antwort mit Status zurücksenden. Ich kann Status 400 nicht schreiben und wir werden Jason eine Nachricht schicken. Der Benutzer ist bereits vorhanden. Aber wenn es nicht existiert, werden wir das Hash-Passwort verwenden und das Passwort entschlüsseln Diese Zahl 12 ist ein Kostenfaktor, der bestimmt, oft es dauert, ein einzelnes BCRPth zu berechnen . Nachfolgend werden wir mit einem neuen Benutzer fortfahren und einen Benutzer mit E-Mail und Passwort erstellen, was das Hash-Passwort was das Jetzt machen wir C saved user await new user dot save Das ist die Zeile, in der wir die neue Benutzerdatenbank speichern werden Außerdem werden Sie jetzt ein JW-Token für den neuen Benutzer erstellen Lassen Sie uns diese Zeile tatsächlich beenden, und ich werde Ihnen erklären, warum Sie JWT verwenden Also JWT, unterschreibe mit der ID, der gespeicherten Benutzerpunkt-ID Dort müssen wir unser JWT-Geheimnis einfügen, und dort werden wir auch ein Ablaufdatum festlegen, also in 1 Stunde abläuft Außerdem werden wir dann dieses JCN-Webtoken senden, wofür dieses JWT steht, um eine tatsächliche Antwort zu Also Risikostatus zwei gegen eins, JSON, Token und auch eine Nachricht Der Benutzer hat sich erfolgreich registriert. Lassen Sie uns nun diese JW-Token erklären. wirklich einfache Weise Stellen wir uns sie auf wirklich einfache Weise als Code vor, den die Websites verwenden, um Informationen sicher zu senden Stellen Sie sich diese als digitale IDs , die belegen, wer Sie sind, wenn Sie die Website nutzen, und dass Sie die Website tatsächlich nutzen sollten. Da ist noch eine Sache. Wir können das nicht einfach JWT-Geheimnis machen, als ob es nicht einmal existiert Wir werden JW in unseren Umgebungsvariablen dort tatsächlich geheim halten JW in unseren Umgebungsvariablen dort tatsächlich geheim Aber natürlich können wir so etwas wie mein JWT-Geheimnis angeben, und es wird funktionieren, aber das ist nicht die beste Idee Wir müssen tatsächlich ein langes JWT-Geheimnis generieren , das wir verwenden werden Gehen wir jetzt zurück zu unserem OF-Controller. Dort werden wir ihren Prozesspunkt JWT Secret verwenden. Speichern Sie es Wir können dieses JWT-Geheimnis tatsächlich ganz einfach generieren, öffnen Sie einfach ein Terminal, gehen Sie in meine Beschreibung und dort diesen Node E-Befehl ein Dann können wir das einfach kopieren und einfügen und wir können es als unser JWT-Geheimnis verwenden Jetzt können wir zurück zum H Controller gehen und dort werden wir mit dem Schreiben des Catch-Blocks fertig sein Also Konsolenpunkt R und Antwortstatus auf 500 Punkte Serverfehler. Nun, das sollte in Ordnung sein. Und wir können mit dem Schreiben von Road für die Benutzeranmeldung fortfahren. Wir beginnen mit der asynchronen Anforderungsantwort des Routers nach der Anmeldung, wie in den Parametern angegeben Und dort werden wir wieder versuchen, Block zu fangen. Wir können den Catch-Block zum Ausprobieren kopieren und einfügen Wir werden wieder diese E-Mail und dieses Passwort verwenden wollen. Lass uns das kopieren und einfügen. Wir sind ein bisschen lasernd und vielleicht auch ein bisschen schneller. Zuerst werden wir E-Mail und Passwort verwenden, dann werden wir einen Benutzer erstellen, also muss der Benutzer einen per E-Mail finden , weil wir auch einen Mechanismus haben wollen , mit dem wir, wenn wir tatsächlich versuchen, uns anzumelden , überprüfen müssen, ob der Benutzer existiert oder gefunden wurde oder nicht. Wenn der Benutzer also nicht gefunden wird, werden wir dort sagen, dass die Anmeldeinformationen ungültig sind. Jetzt müssen wir das eingegebene Passwort mit dem Hash-Passwort vergleichen das eingegebene Passwort mit dem , das wir in unserer Datenbank haben So können wir den Benutzer dann anmelden lassen. erste Konstante ist also Match, Await B Crypt Dot Vergleichen Sie das Passwort mit dem Benutzerpasswort. Wenn nun „Bedingung“ und „ Wenn ich übereinstimme“ wahr sind, erstellen wir eine Nutzlast für das JWT-Token Also konstante Nutzlast, ID. Benutzer-ID und E-Mail-Benutzer-E-Mail. Dann werden wir das Token signieren, sodass JWT die Nutzdaten signiert Dann das JWT-Secret, also der Prozesspunkt und das JWT-Secret. Dann werden wir ein Ablaufdatum erstellen . Dieses Token läuft also in 1 Stunde ab, was 3.600 Sekunden entspricht. Außerdem werden wir eine gewisse Fehlerbehandlung hinzufügen. Wenn also ein Fehler auftritt, geben wir einen Fehler und geben das Token und die Benutzerinformationen zurück. Also antworte Punkt JSON-Token und Benutzer mit ID, Benutzer-ID. Wir bringen Punkt da durcheinander und senden Benutzern Punkt-E-Mail per E-Mail. Fantastisch. Jetzt zum S-Block. Also haben wir ihre, falls das hier endet, und wir werden mit s weitermachen. Und sonst ist das Match falsch. Also versucht tatsächlich jemand, sich mit einem falschen Passwort in dieses Konto einzuloggen. Wir werden eine Antwort mit dem Status 400 und der Meldung ungültige Anmeldeinformationen zurückgeben . Großartig. Dann gibt es einen Try-Catch-Block, und im Catch haben wir den Code kopiert. Und als letztes, was wir dort tun müssen, ist das als Router als Router zu exportieren. 6. JWT: Es wird ein neuer Ordner erstellt , der Middleware genannt wird Und in dieser Middleware werden wir eine neue Datei erstellen, und das wird der Code von Middleware Dot JS sein Jetzt werden wir das aus Middleware erstellen und warum machen wir das? Wir brauchen das, weil es sich mit der Authentifizierung mithilfe der JSON-WebTokens oder JWTs befasst und sicherstellt, dass nur die authentifizierten Benutzer Zugriff auf Teile oder bestimmte Teile unserer Anwendung haben Zugriff auf Zuerst importieren wir JWT aus JSON-Webtken und definieren nun eine Middleware-Funktion für zwei der Anfragen . Also wenn eine Anfrage als nächstes beantwortet wird. Und diese nächste Funktion weist den Express an, mit der nächsten modularen Funktion oder dem nächsten Route-Handler in der Zeile fortzufahren Funktion oder dem nächsten Route-Handler in der Sie ist also dazu da, den Ablauf zu kontrollieren Fahren Sie mit der Ausführung und der Fehlerbehandlung Jetzt werden wir den Autorisierungsheader aus der Anfrage extrahieren . also den Autorisierungsheader oder die OhadErquest-Punkt-Header ein, und dort Jetzt werden wir prüfen, ob der Autorisierungsheader vorhanden und auch korrekt formatiert ist vorhanden Wenn also ein Header oder der Header mit besser beginnt, weil er das Token trägt, dann geben wir eine Antwort mit der JSON-Nachricht des Status 41 zurück, kein Token Aorization verweigert Ja falls es durchgeht, oder falls es unter dieser If-Bedingung nicht fehlschlägt, ich meine, falls es nicht verweigert wird Wir werden dann die Token-Autorisierung durchführen , den Header punktweise aufteilen und eins Das heißt, ich werde das Token dort aus dem Autorisierungsheader extrahieren . Jetzt werde ich den TryCatch-Block öffnen , um die Ausnahmen zu behandeln. Und wie Sie sehen können, verwende ich manchmal E, manchmal Fehler, aber Sie können die ganze Zeit E oder Fehler verwenden Dort werden wir nun das Token mit der JWT-Verify-Methode verifizieren Also konstant dekodiert, JWT verifiziert das Token, und wir werden es dort verifizieren Und der zweite Parameter wird unser JWT-Geheimnis sein , das wir dort in unseren Umgebungsvariablen haben Wir haben dort die Überprüfung des JWT. Jetzt werden wir die Punktbenutzerdekodierung anfordern. Das heißt, wir werden den dekodierten Benutzer an das Anforderungsobjekt anhängen an das Anforderungsobjekt und dort die Steuerung nun an die nächste Middleware-Funktion übergeben Steuerung nun an die nächste Middleware-Funktion Bei dieser nächsten haben wir sie in den Eingabeparametern verwendet. Jetzt können wir zum Catch-Block gehen. Dort werden wir den Fehler sperren, also Konsolenfehler, falls ein Fehler bei der Token-Verifizierung E-Punkt-Nachricht, und wir werden auch mit einem JSON-Status mit einem 41-Punkt-Status antworten, und die Meldung lautet Token ist nicht gültig Jetzt werden wir es schließen und können Export v ausführen. Und mit diesem Export können wir ihn in anderen Teilen unserer Anwendung verwenden. das jetzt speichern, gehen wir zu den Indexpunkten und machen dort so etwas wie App.us-Kurs und warum müssen wir das tun? Wie in unserer Anwendung haben wir natürlich ein gewisses Backend und ein Frontend Es gibt einige ursprungsübergreifende Anfragen, und natürlich blockiert unser Browser unsere Anfragen aus Sicherheitsgründen. Damit teilen wir dem Server mit, dass wir die entsprechenden Header an die Antworten anhängen möchten , und wir teilen dem Browser auch mit , dass es in Ordnung ist, Webanwendungen verschiedener Herkunft die Kommunikation mit unseren Servern zu ermöglichen Webanwendungen verschiedener Herkunft Kommunikation mit unseren Servern zu Dann würden wir auch gerne die Authentifizierungsroute verwenden , also ab Punkt U oder besser. , also ab Punkt U oder besser. Wir müssen es übrigens auch importieren und Epi Dot Und das dient dazu, die Identifizierungs-Middleware weltweit anzuwenden die Identifizierungs-Middleware weltweit Wenn wir nun nach oben scrollen, fehlen uns einige Importe, also beginnen wir dort mit dem Import von OOTerroor und es wird Controller für den Controller JS geben Der nächste wird von selbst sein. Und das wird aus der Middleware von Middleware JS stammen. Und dann wird der nächste Kurs sein. Importieren Sie also den Kurs aus dem Kurs und importieren Sie auch Benutzer aus dem Models-Benutzer Js. Und das wird es vorerst sein, was wir tun können: Terminal öffnen, neues Terminal, CD, Bend und natürlich NPM Jetzt können wir zum Frontend-Teil des Projekts übergehen, und wir werden später oder wenn wir etwas brauchen, zum Backend kommen später oder wenn wir etwas brauchen 7. Frontend-Start: Für den Front-End-Teil stellen wir nun sicher, dass wir uns nicht in einem Backend oder einem anderen Ordner befinden Wir sind einfach in unserem Projektordner und dort machen wir NPM, um T latest zu erstellen. Jetzt geben wir den Projektnamen Frontend ein. Wir werden ihre Reaktion auswählen und wir werden ihr JavaScript auswählen. Wenn wir uns nicht sicher sind, können wir auf tailndcss.com gehen , dort zu den Framework-Anleitungen, IT und da haben wir es Das ist also im Grunde das, was wir getan haben. Jetzt werden wir diesen ersten Befehl verwenden. Also lass uns CD machen. Frontend, was wir gerade mit diesem NPM erstellt haben, erstellt WD latest Geben Sie dort den Befehl Install Tailwind with Post CSS Auto Prefixor Post CSS Auto Prefixor Now next ein, um den Rückenwind zu initialisieren Diese Tail-End-Konfiguration JS. Also lasst uns die Wall-Datei tatsächlich kopieren, zum Frontend gehen, Tailwind Config DJs, sie dort einfügen, die Rückenwind-Direktiven in das Indexpunkt-CSS kopieren Also in einer Quelldatei , Indexpunkt-CSS, Rückenwind-Direktiven, und da gehen wir zu Wir können diesen kopieren, Abid J sechs. Wir werden es einfach dort einfügen und speichern. Wenn wir nun NPM ausführen , läuft unsere Anwendung auf diesem Server, dem lokalen Host 5173, und wir haben immer noch dieses Tatsächlich gibt es ein Problem mit unserem Backend, also müssen wir es zuerst Und Sie können sehen, dass es ein ziemlich einfaches Problem ist. Wir haben die doppelte Anfrage statt der Antwort. Lassen Sie uns einfach auf unseren Bend stoßen und das Problem liegt in der Middleware, also die Middleware aus und wir werden eine Anfrage und natürlich eine Antwort stellen Speichern Sie es. Jetzt ist alles in Ordnung. Und ja, was ich sagen möchte, ist, dass unser NPM Run Dev immer noch an der Backend-Version arbeitet, sodass unser Server und unsere Datenbank miteinander verbunden sind Wenn wir jetzt mit NPM Run Dev dorthin zurückkehren, betreiben wir auch das Frontend Wir haben also ein funktionierendes Backend und jetzt auch ein Frontend. Damit wir die Anrufe tätigen können. Und so werden wir die Artikel tatsächlich von unserem Backend zu unserem Frontend empfangen , sie zeigen und mit ihnen arbeiten Wir können die Seite jetzt öffnen. Wir werden das also schließen. Wir werden jetzt zu Abdo J sechs gehen. Wir werden dort Text Punkt sieben Excel einfügen, speichern. Wir können auch Text T ausprobieren. 300 Rückenwind funktioniert. Also initialisieren wir den Rückenwind erfolgreich. Wir haben das Ding eingerichtet und jetzt können wir tatsächlich anfangen, daran zu arbeiten Was wir auch tun werden, bevor wir weitermachen, ist, dass wir dort auf EBLJsix in Exo CSS und Mind JA six abreisen werden auf EBLJsix in Exo CSS und Mind Und für Ebo CSS können wir das löschen, und ja, das Fangen wir damit an, dort einige Ordner zu erstellen. Also werden wir zuerst einen neuen Ordner mit Seiten erstellen, und dann werden wir einen weiteren Ordner erstellen, und zwar mit Komponenten. Zuerst lade ich diese Assets in den Assets-Ordner, den du auf Git findest, und beginne mit der Admin-Seite. Also werden wir zu den Seiten gehen. Dort werden wir eine neue Datei erstellen, admin.j6. Dort werden wir damit beginnen, und jetzt können wir es einfach dort zeigen Admin importiert es so. Und wenn wir jetzt da hingehen, etwas hineinlegen, die Größe erhöhen. Ja, das können wir 8. Geschützte Routen: Admin-Seite und alle zugehörigen Seiten. Einige Dashboards, großartige Produkte müssen sich also unter einem geschützten Pfad befinden. Also werden wir dort auf dieser Seite diesen Administrator haben. Aber tatsächlich wird es sich um sogenannte geschützte Routen handeln. Das ist eine Komponente, die wir hier erstellen werden. Und es wird eine zusätzliche Sicherheitsebene geben. Wir werden dort hinzufügen. Es wird also die untergeordneten Komponenten nur rendern , wenn es authentifiziert ist Wir müssen also einen geschützten Router nach GS Six importieren. Wir werden React importieren und wir werden auch Navigate vom React-Router Dom importieren . Stellen wir nun sicher, dass wir es installiert haben. Also Terminal, neues Terminal, CD, Frontend und PM Ich reagiere Router Dom, installiere es. Fantastisch. Was wir nun auf dieser geschützten Route tun werden , genau genommen oben, wir werden eine neue Funktion oder eine Hilfsfunktion erstellen , um zu überprüfen, ob der Benutzer authentifiziert ist Die Konstante ist also authentifiziert. Okay, wir werden ebenbürtig sein. Hier und da werden wir den lokalen Speicher zurückgeben , den Artikel holen und nach einem Token suchen Und jetzt ist es authentifiziert gibt wahr oder falsch zurück können Sie mit unserer geschützten Routenkomponente fortfahren unserer geschützten Routenkomponente Dort können Sie mit unserer geschützten Routenkomponente fortfahren, die die untergeordneten Komponenten umschließt Dort werden wir also den Input, die Kinder und die Einsicht machen. Sie können das tatsächlich löschen und überprüfen, ob es authentifiziert ist Dann werden wir zur Anmeldeseite weiterleiten. also zurück, navigieren Sie wie folgt zu login replace und geben Sie children zurück. Wenn es also draußen und navigiert ist, werden wir die untergeordneten Komponenten tatsächlich rendern Jetzt haben wir die ExportVDPTected-Route, das ist also auch großartig. Fein. Das ist für die geschützte Route. Wenn wir dann zu Abdul J 6 zurückkehren, können wir die Routen berechnen Eigentlich sollten wir es vorher auch importieren Also werden wir dort nicht nur die Admin-Seite importieren, sondern auch reagieren, und das war's vorerst. Also reagiere von reagiere. Außerdem müssen wir die geschützte Route importieren. Also eigentlich reicht es, wenn wir sie einfach eingeben , also geschützte Route Mm hmm. Also das wurde importiert Und wir müssen auch die Routenroute importieren und den Standort aus dem React-Router-Dom verwenden. Was wir gerade vor einer Weile installiert haben. Wir haben die Route und innerhalb der Route werden wir eine oder mehrere Routen haben, aber für eine der Routen, die wir tatsächlich dort haben werden, geben wir diesen Pfad dem Admin und wir machen unseren Stern. Also alles mit Admin und auch mit anderen Dingen , die das hinter uns haben werden. Dann mit dem Element, und da werden wir dort die geschützte Route mit noch nicht admin einfügen. Aber mit etwas, das wir jetzt erstellen werden , und das werden Admin-Routen sein. Also werden wir da unten hinuntergehen und C-Admin-Routen erstellen. Und dort werden wir neue Routen zurückgeben. Und innerhalb dieser Routen wird es wie bei einer individuellen Route sein. Eigentlich wird es so sein. Und der erste wird tatsächlich einen Pfad wie diesen haben und das Element, das er rendern wird, wird von dort aus der Admin sein. Also werden wir es jetzt speichern. Auch am Ende werden wir das nehmen. Wir haben es nicht, also können wir am Ende die Standard-App exportieren. Und natürlich haben wir dort die Standardfunktion Exportieren, also müssen wir sie aktualisieren. Die Const-App ist so. Da endet es, endet dort und am Ende ist Export Default App Dann haben wir die Admin-Routen und ja, also verwenden wir diese, um eine separate Komponente für die Admin-Dashboards oder den Admin-Teil unserer Seite zu definieren die Admin-Dashboards oder den Admin-Teil unserer Seite Jetzt, wo wir das haben, können wir Admin-Routen erstellen, das nehmen und es tatsächlich so platzieren Und wieder, das wird jetzt die Admin-Routen verwenden, und dort wird die Admin-Seite in Haar sechs angezeigt, und dort werden wir unsere Anwendung in den Browser-Router packen und sie einfach dort ablegen. Ich werde diesen löschen, also wird es so sein. Übrigens, da werden wir dann auch ein bisschen mehr Wrapping in unsere Anwendung einbauen, aber vorerst nur den Browser-Router. Und wie Sie sehen können, wurde es nicht importiert. Also jetzt, ja. Aber jetzt können Sie sehen, dass es nicht auf unserer Seite ist. Und warum ist das so? Also lass uns unsere Seite öffnen und wir werden in der URL, die du jetzt nicht sehen kannst, Admin machen und Enter drücken. Jetzt können Sie sehen, dass wir auf unserer Seite sind. Und wenn du die Seite nicht sehen kannst, meine ich diesen Admin JSix, wo du etwas hast Das wird daran liegen, dass ein Grund dafür sein kann, dass Sie diesen Browser-Router nicht in Mind J six eingebunden oder importiert diesen Browser-Router nicht in Mind J six eingebunden Der nächste ist, dass Sie dort einen falschen Import gemacht haben. Lassen Sie uns jetzt also überprüfen, wo wir sind. Wir haben dort diese Routen importiert, und innerhalb dieser Routen haben wir diese Route. Dieser ist zum Löschen. Speichere es. Eine Route, die uns tatsächlich zum Admin-Pfad führt. Also alles, was sich auf Admin und dann auf Forward befindet, wird auf eine geschützte Route gebracht und dann wird es in den Admin-Routen angezeigt. Und in den Admin-Routen haben wir diesen Admin. Wir müssen das tun, weil wir sonst eine Sicherheitsebene für unser Admin-Dashboard hinzufügen müssen , um sicherzustellen, dass niemand einfach unseren Seiten-Slash Admin macht und wir in der Lage sind, unsere Elemente zu aktualisieren, zu löschen, neue zu erstellen, und Sie verstehen wahrscheinlich, worum es geht, oder? 9. Administrator: Fangen Sie abschließend mit dem Admin-Dashboard an, und zuerst müssen wir dort einige Importe durchführen. Als Nächstes müssen wir also auch den Nutzungseffekt importieren, müssen wir also auch den Nutzungseffekt importieren den wir verwenden werden, und den Status verwenden . Dann werden wir mit Exiles weitermachen und das, was ist das und warum werden wir es verwenden Das ist also für die HDDP-Anfragen vom Browser oder Node-JS, und es wird uns eine API zur Verfügung stellen, die diese Anfragen bearbeitet und auch die Antworten verwaltet Also lasst es uns jetzt hier aus Exiles importieren. Wir müssen es auch installieren. Dort werden wir also das Frontend sehen und NPMI Exiles machen Nett. Jetzt ist es installiert. Wir können weitermachen, was wir sonst noch importieren werden. Also werden wir auch einen Link von React Router Dom importieren. Wir werden dort zunächst den Bundesstaat hinzufügen, der die Liste der Lebensmittel enthält, die wir vom Server holen werden Also konstantes Essen, festes Essen. Und wir werden den Zustand wieder aufnehmen. Dort werden wir ein leeres Array erstellen und es speichern. Jetzt werden wir mit dem Nutzungseffekt fortfahren. Und dieser Nutzungseffekt wird das Abrufen von Lebensmitteldaten verarbeiten , wenn wir diese Komponente starten Also da werden wir so etwas machen, es öffnen. Und dort werden wir die Exiles Punkt oder so nennen , tut mir leid Punkt, G, und wir werden dort die URL eingeben. Also HTTP, lokaler Host, 3.000 und Essen. Wenn du dich erinnerst, wenn wir das einem Postboten geben , bekommen wir alle Lebensmittel, die wir haben Also das ist eine ähnliche Sache. Es wird uns die Lebensmittel besorgen und wir werden weiter mit ihnen arbeiten. Jetzt werden wir dann dort sitzen. Wenn es sich also um eine erfolgreiche Antwort handelt, werden wir mit den Antwortpunktdaten beginnen. Punktdaten. Sobald die Daten eingegangen sind, werden wir den Lebensmittelstatus mit den neuen Daten aktualisieren. Und dann müssen wir dort auch etwas für den Fehler finden. Wenn es sich also um einen Fehler handelt, protokollieren wir den Fehler einfach in der Konsole. Jetzt ist es ratsam, auch einige Ladevorgänge zu erledigen, da wir die Daten laden werden. Lassen Sie uns also tatsächlich ihre Konstante beim Laden machen , das Laden einstellen. Diesen Zustand setzen wir zunächst auf false, und wenn diese Komponente dann startet, setzen wir das Laden auf zwei. Wenn wir dann die Antwort haben und die Daten gesetzt sind, setzen wir das Laden auf False. Und auch wenn dies aufgrund eines Fehlers fehlschlägt, setzen wir das Laden wieder auf False. Es beginnt also mit dem Laden, und wenn es dann zu einer Reaktion oder einem Fehler kommt, wird das Laden wieder auf „Abstürzen“ gesetzt. Fahren wir nun mit der Benutzeroberfläche fort. Wir beginnen also mit der Tabelle, in der wir unsere Daten abrufen, die wir vorerst verwenden werden, graue Farbe, zum Beispiel etwas Dunkleres, wir werden sie später ändern, aber jetzt sehen, wo wir uns tatsächlich befinden Fangen wir also an. Dort werden wir ein Div machen, das den Tisch drinnen hält. Wir werden den Tisch selbst machen. Am Tisch werden wir den Thad machen. Als Tabellenkopf und dort machen wir die Tabellenzeilen und innerhalb der Tabellenüberschriften Unter dem Tabellenkopf werden wir einen Tabellenkörper haben. Und in diesem Tabellenkörper werden wir eine Zeile haben, und darin werden wir Tabellendaten haben. Und diese Zeile, lassen Sie uns einen gewissen Abstand einbauen, wird sich wiederholen weil es jede Tabellenzeile mit Tabellendaten für all unsere Lebensmittel geben wird . Also müssen wir hier tatsächlich eine Food Dot Map erstellen. Dort werden wir das Essen und den Index bekommen. Und dort drinnen werden wir die Kartierung anhand von Lebensmitteln verwenden. Also werden wir das tatsächlich dort platzieren. Und was wir jetzt in unserer Tabelle tun können , ist, dass wir einfach Lebensmittelpunktname, Lebensmittelpunkt, Preis in gewissem Sinne und so weiter eingeben können. Und es wird auch in diese Tabellenzeile in diese Tabellendaten eingefügt , und es wird so oft wiederholt , wie wir die Lebensmittel in unserer Karte haben Versuchen wir nun, der ersten Tabellenüberschrift etwas hinzuzufügen, zum Beispiel ein Hashtag, und Sie können sehen, dass dort etwas erscheint Aber natürlich haben wir jetzt Text neun Excel, was nicht der intelligenteste Schritt ist, weil wir dort natürlich einen kleineren Text haben werden , sodass wir ihn löschen können Wir können den Hintergrund vorerst dort belassen , damit wir ihn besser sehen können Vielleicht werden wir es auf 400 reduzieren. Also jetzt, die Tabellenüberschriften, es kann ein Hashtag als Zahl für die erste Tabellenüberschrift Dann können wir mit einer anderen weitermachen, die benannt werden kann, dann mit einer anderen, deren Preis in Cent angegeben werden kann Und dann haben wir noch eine, und die ist vorerst leer , weil wir ihre Schaltflächen zum Löschen, Aktualisieren usw. haben werden . Jetzt werden wir OT gedrückt halten und all diese Tabellenüberschriften ändern, und wir werden etwas verwenden, das als Scope cool like column bezeichnet Das bedeutet, dass die Kopfzeile eine Kopfzeile für alle Zellen ist , die wir in den Spalten darunter haben werden Wenn wir nun mit dem Styling für diese Tabellenüberschriften fortfahren , werden wir dort nur einige vertikale Einbettungen vornehmen und dort auch einige anfängliche horizontale Polsterungen vornehmen Jetzt kannst du auf unserer Seite sehen, ich werde es vorerst so dort platzieren Lass uns die Daten dort ablegen, denn dann können wir sie noch besser gestalten. Und dort, wo die Daten in Tabellendaten sind, werden wir zuerst mit einem Klassennamen beginnen. Es wird wieder so sein, wie wir es bei Tabellenüberschriften haben, also vertikale Polsterung drei und horizontale Polsterung fünf. Und dort beginnen wir mit dem Zugriff auf das Feld, den Namen des Lebensmittelpunkts, und dann werden wir das kopieren Es wird einen sinnvollen Preis geben und es wird ihn tatsächlich geben, es wird einen vernünftigen Preis geben. Es wird den Index geben. Also Index plus eins, weil es bei Null beginnt. Also haben wir die Nummer des Lebensmittels eins, zwei, drei, vier, fünf und so weiter und so weiter. Und dann die letzten Tabellendaten, wir bei dieser Hochzeit tatsächlich wieder verwenden werden. Wir werden dort die Operationen durchführen, die wir mit den Daten durchführen können, die wir haben. Also aktualisiere, lösche und stell dir das so vor, wie wir es bei Postman, Put, Delete und Abrufen des Artikels oder so gemacht , Put, Delete und Abrufen des Artikels oder so Innerhalb dieser Tabellendaten werden wir ein Div haben, das ein anderes Div aufnehmen wird, weil dieses andere Div die Tasten für die Operationen enthalten wird die Tasten für die Operationen enthalten Die erste Schaltfläche dient also zum Bearbeiten und die zweite zum Löschen, oder es wird eher eine Umleitung zum Bearbeiten und Löschen einer Seite sein eher eine Umleitung zum , die wir später codieren werden Wir können sie dort ablegen, bearbeiten und löschen. Jetzt muss ich natürlich auch die beiden Attribute angeben, zu denen uns das weiterleiten soll. Ich lasse sie zum Beispiel leer und wir werden dort natürlich auch etwas Styling vornehmen. Aber lassen Sie uns jetzt zuerst überprüfen, ob wir alle Daten laden und falls wir nicht wissen, wie wir das Problem beheben können. Nehmen wir nun an, wir sehen nichts auf unserer Seite Gehen wir zur Inspektion. Dort wählen wir Konsole aus und dort können wir sehen, ob wir die Seite aktualisieren oder einfach etwas tun Wir erhalten eine Endlosschleife von Fehlern. Also, was passiert dort? Ich denke wir sind vielleicht oder genauer gesagt, vielleicht habe ich einfach etwas vergessen, und das ist, einen NPMI-Kurs in meinem Backend-Ordner zu machen Wenn Sie also das Backend sehen und den NPMI-Kurs machen, um DGS zu indizieren, und dort natürlich der Kurs dort, aber wir sollten ihn sofort nach der Initialisierung der Express-App dort platzieren Initialisierung Und wenn wir jetzt zu Admin JS 6 und zu unserer Seite gehen, können Sie sehen, dass wir die Daten dort haben, und es sind alle Daten, die wir in unserer MongoLib haben Und wenn wir dort mehr Daten über den Postman eingeben, löschen oder aktualisieren, werden sie dort in der Tabelle angezeigt Aber wir wollen das in unserem Admin-Dashboard im Frontend machen und natürlich nicht über Postman Jetzt werden wir Funktionen erstellen , die es uns ermöglichen, neue Artikel hinzuzufügen, Artikel zu löschen und Artikel über das Admin-Frontend zu bearbeiten Aber zuerst werden wir diese Admin-Homepage gestalten, sagen wir, und das bedeutet, dass wir dort im VS-Code die Tabelle haben. Ich werde das Panel auf der linken Seite schließen und wir werden mit dem Styling beginnen. Was wird über dieser Tabelle stehen? Also zuerst werden wir über dieser Tabelle auch den nächsten Link haben, über den wir einen neuen Artikel in unserer Datenbank erstellen können. Im Moment wird es leer sein, aber später wird es so etwas wie admin food Create geben. Das wird uns helfen, das neue Lebensmittel zu kreieren. Im Moment erstellen wir einfach eine Schaltfläche und das Styling. Also, ich werde es innerhalb des Links machen , wir werden eine Klasse anbieten. Für diese Schaltfläche stellen wir jetzt eine grüne Farbe von 600 ein. Dann werden wir es speichern. Dann werden wir weitermachen. Wenn wir also mit der Maus über die Schaltfläche fahren, wird der Hintergrund grün 900 sein Dann werden wir auch den Text auf Weiß setzen. Wir haben etwas Polsterung. Jetzt können wir den Text auch klein machen oder ihn vielleicht so lassen, wie er ist Die mittlere Schrift klingt gut, abgerundet, groß. Und füge dort auch etwas Schatten hinzu. Okay, das ist in Ordnung. Und ich sehe dort einen kleinen Tippfehler, abgerundet. Okay, jetzt haben wir den abgerundeten Boden. Jetzt können wir weiter zum Tisch gehen. Also was wir dort machen werden, wir werden dort zuerst etwas Überlauf hinzufügen, so dass ein Überlauf zur Horizontalen kein Problem mehr ist Dann werden wir dort etwas Schatten setzen, und wir machen es auch ein bisschen Jetzt werden wir mit dem Styling für den Tisch fortfahren. Dort werden wir also die Breite zur vollen Breite und den Text zur linken Seite hinzufügen. Dann schreiben wir für die Tabellenüberschrift Großbuchstaben. Okay. Und vielleicht auch ein anderer Hintergrund. Nun werden wir Tabellenzeilen als R belassen, und für Tabellenüberschriften werden wir es auch so belassen, und das bringt uns zu einem Tabellenkörper. Dort beginnen wir mit der Tabellenzeile. Also müssen wir zuerst ihren Schlüssel eingeben, und das wird Food Dot ID sein. Und auch ihr Klassenname wird einen weißen Hintergrund haben. Und wenn wir mit der Maus drüber fahren, setzen wir den Hintergrund auf Grau, ich weiß nicht, machen wir 400 Also jetzt wird es so sein. Vielleicht können wir sogar 300 auf Nummer sicher gehen. Das bewegt uns dazu, zwei verschiedene Aktionen miteinander zu verknüpfen. Also, was wir tun werden, ist, dass wir für diese beiden DIFs zunächst bei Flex Justify Center und Some Gap vorgehen werden Beim nächsten werden wir dasselbe tun, aber die Lücke wird kleiner sein Lücke und wenn wir dort zum Klassennamen gehen, werden wir für die Bearbeitung etwas tun, ich weiß nicht, orange 500. Jetzt kannst du es tatsächlich dort auf der rechten Seite sehen. Und zum Löschen werden wir den Hintergrund bei 500 machen. Jetzt können wir es wieder sehen. Fahren wir mit der Schaltfläche Bearbeiten fort. Wenn wir also den Mauszeiger über die Schaltfläche bewegen, setzen wir das Orange auf ein dunkleres Orange Dann wird auch der Text weiß sein, etwas Bettwäsche. Und was kommt als nächstes, vielleicht Font Medium. Okay. Und für die Löschtaste wollen wir das gleiche Styling, aber nicht Orange 900, sondern Rot 100. Wir werden es so haben. Was wir dort auch noch hinzufügen werden, ist rund um links groß. Und für den zweiten Knopf runden Sie ihn nach rechts ab, groß. Und jetzt zeige ich dir das Styling. Aber jetzt sehe ich, dass wir einen Text klein machen müssen , bevor wir ihn genauer prüfen , weil das dann nicht schön wäre. Gehen wir auf die Seite, und sie sieht so aus. Natürlich haben wir die Links nicht codiert, weil wir dafür eine weitere JSX-Komponente benötigen, und zwar die Komponente „Bearbeiten“, die Komponente „ Löschen“ und die Komponente „Neues Element erstellen Und auf unseren Seiten werde ich eine neue Datei erstellen, und die erste wird create foot Ja six sein Als nächstes wird Delete Food Jasix erscheinen. Und der dritte wird Edit Food Dot Jasix sein. Fangen wir mit dem Einfachsten an und das wird Essen löschen sein Dort werden wir also diese Vorlage vorbereiten, und wir werden einige Importe durchführen müssen. Wir wollen, dass der nächste reagiert, auch der Staat, der reagiert. Wir werden die Excels von Excels importieren. Bevor wir fortfahren, fügen wir diese Seite tatsächlich zu abdljSIX hinzu diese Seite tatsächlich zu Wir können das auch für die anderen Seiten machen. Also für das Create Food und für das Edit Food. Gehen wir jetzt zu app.j6 und dort in unserem EpidlJSIx gehen wir zur Admin-Route, weil wir noch nicht an der Client-Benutzeroberfläche arbeiten, sagen wir, sondern auf der Admin-UI, dann dort in den Admin-Routen, und übrigens, diese Admin-Routen werden in der Haupt-App verwendet, aber sie sind es und dort werden wir die Route hinzufügen oder wir können die Route zum Erstellen, Bearbeiten und Löschen einfach kopieren und einfügen. Also lass uns anfangen. Dieser wird Essen erstellen, Enter drücken, und wenn Sie Enter drücken, Sie sicher, dass es dorthin importiert wird. Die zweite Option wird Essen bearbeiten sein. erneut die Eingabetaste, wir haben es da, und das dritte ist Essen löschen, drücken Sie die Eingabetaste und wir haben es da. Jetzt müssen wir den Pfad aktualisieren. Der Pfad zum Erstellen von Lebensmitteln ist also Essen erstellen Pfad zum Bearbeiten von Lebensmitteln Essen Bearbeiten der ID, weil wir in diesem Pfad eine bestimmte ID haben müssen , da wir nur einen Artikel und nicht alle Artikel unserer Lebensmittel erhalten . Und für das Löschen von Lebensmitteln, wenn du versuchst es zu erraten, ja, es wird Essen sein. Lösche auch die spezifische ID, weil wir eine Funktion haben wollen , mit der wir alle unsere Artikel löschen können. Jetzt können wir es speichern und zum Löschen von Lebensmitteln gehen und in unserem Menü Essen löschen, wie wir eigentlich auf diese Seite kommen, lassen Sie uns dort einfach zuerst etwas Klassentext machen. Lassen Sie uns Text 7 Excel und Text Red 500 schreiben und speichern Sie ihn. Gehen Sie jetzt zu unserem Admin-Panel auf Admin Ja six. Wir werden zu Link zwei gehen, und dort werden wir diese Zahnspange für Mädchen machen Drinnen werden wir einen Schrägstrich und auch den zweiten Platz an das Ende setzen, und dort wird Admin stehen, also Schrägstrich Dollarzeichen bearbeiten, Fußpunkt-ID Sie können diese Anführungszeichen dort löschen. Gleiche gilt für hier. Das gefällt uns. Darin schreiben wir Admin-Slasla Delete Slash-Dollarzeichen, Food Dot ID. Geh da rauf Der Patient braucht keine ID, also machen wir Adminootlas Gehen wir jetzt zu unserer Seite. Wir werden auf Bearbeiten klicken und Sie können dort das Bearbeiten von Lebensmitteln sehen. Wir kommen also zur richtigen Seite. Sie können auf Löschen klicken. Wir haben das Essen löschen , das wir gerade gestylt haben, versuchen Sie es einfach und wir sind dabei, und wir können auf einen Artikel klicken, und wir gelangen auf die Seite Lebensmittel erstellen Es funktioniert also einwandfrei. Jetzt werden wir diese drei Seiten codieren. Wenn etwas fehlschlägt oder bei Ihnen nicht funktioniert, überprüfen Sie, ob Sie die richtige Like-URL erhalten. Wenn du auf die Buttons klickst, überprüfe, ob dein Abdo-Gix richtig eingestellt ist Und im schlimmsten Fall inspizieren Sie einfach die Seite, gehen Sie dort in die Konsole und überprüfen Sie, ob sie bei keinem, ich weiß nicht, Excios- oder Netzwerkfehler usw. fehlschlägt ich weiß nicht, Excios- oder Netzwerkfehler Falls es fehlschlägt, überprüfen Sie das erste Terminal in dem Sie das Ich zeige Ihnen Wo der Server läuft, können Sie dort sehen. Falls dies fehlschlägt, stürzt diese Node Moon-App und es wird auch ein DRDO-Fehler Dann müssen Sie es reparieren, und im Idealfall oder in dem Szenario, in dem das für Sie funktionieren sollte, müssen Sie diese beiden grünen Linien haben und der Server läuft, die Datenbank ist verbunden Wenn Sie diese Konsolenprotokolle natürlich in Index Dot JS eingefügt oder dort abgelegt haben, können Sie sehen, dass ihre Datenbank verbunden ist und der Server läuft. 10. Lebensmittel löschen: Gehen wir zurück zum Löschen der Lebensmittelkomponente. Zuerst werden wir wieder etwas verwenden, das wir schon vor einiger Zeit benutzt haben, und zwar beim Laden, Laden, Laden von Sets. Wenn der Nutzungsstatus damit sinkt, werden wir den Ladestatus verfolgen. Jetzt werden wir die Navigation verwenden , um programmgesteuert durch unsere Seite zu navigieren Verwenden Sie also Navigate und dann verwenden wir PRMs. Wir nehmen also die ID aus der URL, Wir nehmen also die ID aus der damit wir weiter damit arbeiten können Die ID wird also als RAMs verwendet. Außerdem werden wir eine sogenannte Notice-Technologie verwenden um zu erfahren, ob unser Produkt gelöscht, aktualisiert usw. wurde. Dazu werden wir den Hook von Notice Tech verwenden , um die Snackbar anzuzeigen. Das heißt, wir importieren die Snackbar und Ihre Snackbar von uns, die Snackbar. Für diesen müssen wir den Use-Snackbar importieren. Mal sehen, ob wir das so machen können. Wir können. Also lass es uns dort machen. Importiere und verwende die Snackbar aus Notice Deck. Natürlich müssen wir jetzt den Noiceck installieren. Also lass uns dorthin gehen Wir sind im Frontend, also NPMI Notice Tech. Jetzt werden wir es installieren. Wir haben nicht einmal diese Verwendung von Navigate implementiert, diese verwenden PAMs und verwenden die Snack Bar, die wir dort haben Was wir eigentlich tun müssen , um diese Snackbars oder das Hinweisschild zu haben , ist, wir zu Mind JSix gehen und dort unsere Anwendung in den Snack Bar-Anbieter packen müssen unsere Anwendung in den Snack Bar-Anbieter Dort geben wir einfach den Snackbar-Anbieter ein, der importiert wird, öffnen und unsere App einfügen Wir können diesen It-Tab löschen , damit er schön gestaltet ist. Lassen Sie es so, und das war's für den Haupt-Do GS six. Jetzt können wir es schließen und zu unserem gelöschten Essen zurückkehren. Dort werden wir mit einer Funktion weitermachen , die das Löschen von Lebensmitteln tatsächlich übernimmt. Lassen Sie uns also das Löschen von Lebensmitteln erledigen. Dort werden wir zuerst mit dem Laden beginnen, also stellen wir das Laden auf zwei ein. Dort werden wir das Axios benutzen und löschen. Jetzt rufen wir die URL vom Postman auf. Das löscht tatsächlich unseren Artikel. Wir werden HTTP, Localhost 3.000 OTS ID machen Localhost 3.000 OTS ID danach werden wir es Dann werden wir dann rein und dann werden wir den Ladevorgang auf „Falls “ setzen Wir werden die Snackbar verlassen und das Essen wird gelöscht. Außerdem werden wir dort eine Variante auf Erfolg setzen, wir werden sie schließen und nach dem erfolgreichen Löschen werden wir zu einem Admin-Dashboard navigieren. Deshalb haben wir dort Navigate implementiert. Und falls es einen Fehler gibt, werden wir ihn abfangen, den Fehler abfangen und dort das Laden auf Force setzen. Außerdem werden wir wieder SnagbareError und Variante wird ein Fehler So wie das. Und wir werden den Fehler in der Konsole protokollieren und speichern. Jetzt können wir dorthin zurückkehren und eine tatsächliche Benutzeroberfläche programmieren. Fangen wir also mit diesem Div an. Wir werden es öffnen und drinnen werden wir ein weiteres Div machen wollen. Da sollten wir auch etwas Spinner machen. Für den Fall, dass das geladen wird, würden wir gerne den Spinner zeigen, aber wir haben noch keine Komponente dafür Lassen wir es vorerst und fahren mit dem anderen Styling Darauf kommen wir etwas später zurück Zuerst werden wir dort das löschen und stattdessen werden wir dort etwas Bettwäsche und etwas Hintergrund machen. Dann wollen wir das auch in der Mitte behalten, damit wir das Flexbox-Layout verwenden können Und jetzt machen wir die eigentliche Karte für das Löschen. Möglicherweise befindet sich das TIFF, wir werden den Link mit einer Zurück-Schaltfläche einfügen. Bringen Sie uns also tatsächlich zum Adminbereich, falls wir den Artikel am Ende nicht löschen möchten. Bringen wir sie zurück zur Seite oder zurück zum Dashboard oder Beck. Im Folgenden möchten wir eine Überschrift hinzufügen. Vielleicht, wenn Sie sicher sind, dass Sie dieses Lebensmittel löschen möchten , speichern Sie es. Importiere den Link natürlich auch. Jetzt haben wir es dort in der Mitte der Seite, was Sie wahrscheinlich nicht sehen können. Vielleicht wird das besser, oder ich lasse es so. Okay. Dann fahren wir mit einer zusätzlichen Schaltfläche fort. Ich werde ja sagen, löschen. , die wir gerade codiert haben Klick auf diese Schaltfläche wird dieses Handle zum Löschen von Lebensmitteln aufgerufen , und wir werden dort natürlich auch etwas Styling hinzufügen. Zum Beispiel können wir jetzt der roten 600 einen Hintergrund hinzufügen. Auf Hober können wir Rot 800 einen Hintergrund hinzufügen und wir haben die Schaltfläche, mit der wir das tun Jetzt sollte es im Grunde funktionieren, aber lassen Sie uns mit dem Styling weitermachen Lassen Sie uns für den Link eigentlich diesen Klassennamen fertigstellen. Für den Link werden wir Flex-Elemente so codieren, dass sie zentriert werden. Text bis Grau 800, dann etwas Rand. Dann würde ich einen Hintergrund einstellen. Lass uns kein Grün verwenden. Verwenden wir vielleicht sogar, lassen Sie uns diesen Hintergrund einfach in Grau 400 ändern. Gibt es etwas Bettwäsche. Text klein und abgerundet Excel, wie es aussehen wird. Das ist ein bisschen besser. Vielleicht machen wir Bedding Two Epson so und Bedding to like vier. Und wir werden auch Flex Justify Center machen. Das ist besser. Gehen wir jetzt zu H Two. Dort werden wir also Text für Excel schreiben. Wir werden den unteren Rand vier, Schrift halbbolzen und den Text grau machen, vielleicht 800 Okay. Dann haben wir da den Knopf. Natürlich werden wir ein bisschen mehr Styling machen. wir also mit Text zwei fort: weiße, vertikale und horizontale Bettwäsche, abgerundete, große W sehen aus wie, okay? Dann mit dem vollen Und wie das jetzt aussehen wird. Okay, lass es uns versuchen. Wenn wir drüber stolpern, sieht es so aus, und das ist in Ordnung. Was ich nun tun würde , ist, dass wir in diesem Div das als eine Karte festlegen müssen. Also machen wir ihren Container. Wir werden dort etwas mischen mit. Also lass uns zum Beispiel Arch machen, super. Wir werden auch Shadow to Arch machen. Wir werden es auch etwas aufpolstern. Schau mal, wie es jetzt aussieht Und ich denke, das ist in Ordnung. sind wir sogar bereit, die Funktionalität zu testen. Wählen wir also diesen letzten Artikel aus, Lebensmittel eins, und klicken wir auf Löschen. Lassen Sie uns es jetzt bestätigen. Ja, löschen. Und wir können den Hinweisschild sehen. Es liegt ein Fehler vor. Also lass es uns einfach untersuchen. Lass uns zur Konsole gehen. Wir haben vier oder vier. Aber wenn wir tatsächlich zu unserem Admin-Dashboard zurückkehren, können wir sehen, dass der Artikel gelöscht wurde. Es gibt also kein Problem mit unserer Löschkomponente, aber es wird ein Problem mit der Route selbst geben. Gehen wir also zum VS-Code. Dann gehen wir zu Foods Route und müssen dort überprüfen, was daran falsch ist, ein bestimmtes Lebensmittel zu löschen. Und ich kann dort sehen, dass wir eine Antwort verpasst haben. Wir werden also einfach dort den Antwortstatus, die 200-Punkt-JSON-Nachricht „Artikel wurde erfolgreich gelöscht“ und „Ergebnis des gelöschten Elements“ schreiben 200-Punkt-JSON-Nachricht „Artikel . Jetzt speichern Sie es und wir werden es testen. Gehen wir also noch einmal auf unsere Seite. Da, lass es uns lieber auffrischen. Klicken wir zum Beispiel auf Löschen, bei diesem Element, ja, löschen, und es funktioniert. 11. Lebensmittel bearbeiten: Gehen wir zum VS-Code. Gehen wir zu Essen bearbeiten. Dort können Sie sehen, wie wir es ändern werden, wir werden es auf unserer Seite sehen, also funktioniert es und wir können dort beginnen. Also müssen wir reagieren und auch Use-Status und Use-Effekt importieren. Und andere Dinge werden wir unterwegs importieren. Dort werden wir mit einigen Konstanten beginnen. Also zuerst die Zustandsvariable für den den Konstantennamen, der Satzname entspricht dem Verwendungsstatus, und das sind leere einfache Dann werden wir das Gleiche in Bezug auf den Preis tun, den Preis gewissermaßen festlegen Sie geben einfache Anführungszeichen an. Was als Nächstes? Auch hier können wir etwas Abstand halten. Auch hier werden wir das Laden machen, etwas Laden. Sie geben an, dort Kraft als Anfangswert festzulegen. Dann müssen wir die ID extrahieren. Also weißt du eigentlich was? Lass uns Essen löschen. Gehen wir das sogar mit der Navigation an. Wir nehmen es grundsätzlich auch mit dem Laden des Sets hin. Kopieren wir es einfach dort hin. Also haben wir dort die Navigation, die Nutzung von PRMs und die Snackbar Wir haben da das Laden. Wir haben da den Namen für das Essen und gewissermaßen den Preis. Was wir tun müssen, ist es zu importieren. Also Snackbar-Parameter, navigiere jetzt, wir brauchen natürlich auch EL, also gib Exhils Jetzt werden wir die Daten abrufen. Also werden wir den Use-Effekt erstellen , um ihn abzurufen, den Use-Effekt Und dort werden wir das Laden zuerst auf True setzen. Dann werden wir mit Axos weitermachen. Ich schätze, da bekommen wir Baqute HTTP, Localhost 3.000 Und dort werden wir die ID, die mit Bquote endet, wieder eintragen. Dann werden wir antworten und dort den Namen festlegen Also Antwortdaten, Name, festgelegter Preis im Sinne, Antwortdaten, Preis im Sinne. Außerdem werden wir das Laden auf False setzen , falls es nicht wie geplant läuft, wir werden dort einen Fehler feststellen. Und da werden wir das Laden wieder auf „Falls“ setzen. Wir werden den Fehler auch in der Konsole protokollieren und können dort auch eine Warnung einrichten. ein Fehler aufgetreten. Überprüfen Sie die Konsole. Jetzt werden wir auch vor dem Ende oder vor diesem letzten Breaket ein Abhängigkeits-Array einrichten, das erneut abgerufen wird , wenn sich die ID ändert Dort werden wir also die ID eingeben. Jetzt werden wir mit der Einstellung einer Funktion für den Umgang mit dem Diätfutter fortfahren . Also fangen wir an, mit getrocknetem Essen umzugehen. Da machen wir oder wir stellen die Daten ein, also nicht die Daten. Wir werden ihren Namen und Preis sinnvoll verwenden. Wir werden das Laden wieder auf Durchstellen stellen, wir werden mit Axios beginnen Dort werden wir Punkt Put machen , weil wir die Daten bearbeiten werden Dort müssen wir also die URL so platzieren, dass HTTP, lokale Host 3.000 Foots ID und COM-Daten hat. Und danach, wenn wir erfolgreich sind, werden wir das Laden wieder auf „Falls“ setzen Dann werden wir die Snackbar benutzen. Das Essen wurde also erfolgreich bearbeitet, und wir werden die Variante dort auf Erfolg setzen. Und wenn wir mit der Bearbeitung erfolgreich sind, können wir den Administrator zu einem Admin-Dashboard oder zurück zu einem Admin-Dashboard navigieren . Falls es einen Fehler gibt, werden wir ihn abfangen und Ladevorgang ebenfalls wieder so einstellen, dass er herunterfällt. Wir werden in Q Snagbar oder in der Benachrichtigung sagen , dass ein Fehler vorliegt, und wir müssen auch eine Variante eines Fehlers ausführen Und wir werden es auch in der Konsole protokollieren , damit wir es überprüfen können. dann, wenn wir die Seite überprüfen Was passiert dann, wenn wir die Seite überprüfen, falls etwas fehlschlägt? Also werden wir den Fehler beheben. Das ist es für die Funktion der behandelten Lebensmittel und wir haben auch den Nutzungseffekt, das ist in Ordnung. Wir können also zur Benutzeroberfläche gehen und dann die Funktionen tatsächlich testen , ob sie funktionieren und ob wir etwas mit dem Man Div reparieren müssen . Da hätten wir gerne etwas Abstand, einen hellen Hintergrund und das Flexbox-Layout für die Zentrierung der Elemente verwenden Begründen Sie auch die Mitte der Objekte in der Mitte. Da drinnen, da werden wir Spinner zum Laden haben Ich werde es in einer Weile bearbeiten, gleich danach werden wir den Spinner erstellen und ihn auf unsere Seiten stellen Ich werde dann ein weiteres Div erstellen, und das wird die Karte sein, auf der sich das Formular für die Bearbeitung unseres Artikels befindet Also fügen wir den Klassennamen und in diesen Klassennamen werden wir sagen, dass es ein Container mit einer gewissen gemischten Breite sein wird , auch mit etwas Schatten, mit einigen abgerundeten Ecken, mit etwas Tinte und mit etwas Hintergrund zu Weiß. Okay, lassen Sie uns den weißen Hintergrund verwenden. Was ich dann tun würde , ist, dass wir mit einer B-Taste beginnen könnten. Eigentlich können wir zu Essen löschen gehen, diesen Link nehmen, ihn kopieren und dort platzieren und dort können wir ihn verschieben, und es wird eine Überschrift mit Bearbeiten geben. Essen. Wir können es jetzt sogar stylen. Lassen Sie uns also den Text vergrößern. Außerdem sollten wir nicht vergessen, den Link zu importieren. Stellen Sie also sicher, dass Sie die Eingabetaste drücken, Sie ihn dort über den Link Rag droterdm sehen können Jetzt sieht unsere Seite so aus, die B-Taste, die Karte und die Überschrift Essen bearbeiten. Also lass uns weitermachen. Für das Editieren von Essen auch das, was wir neben Text Excel machen werden, für Semibolt dann Text to Center Oder auf der linken Seite lassen wir es vielleicht vorerst auf der linken Seite Dann würde ich einen Rand oder einen vertikalen Rand machen. Und ich würde vielleicht auch Text Gray 800 machen . Mal sehen, wie es aussieht. Jetzt fahren wir mit dem DIV fort , das das Formular für die Aktualisierung tatsächlich enthalten wird. Also div da und wieder ein Klassenname, vielleicht so etwas wie Vertical Margin Four. Drinnen werden wir ein Etikett anbringen. Hier steht ein Name, und es wird eine Eingabe dazu geben. Du kannst es auch so machen. Und in dieser Eingabe werden wir tatsächlich da sein und die ID abrufen, also Name, Typ, was Text sein wird, Wert, der bei Änderung Name sein wird sein . Dadurch wird der Name mit dem Zielwert festgelegt. Und am Ende ein Klassenname , der einen gewissen Rahmen haben wird. Wir können etwas Rahmenfarbe, etwas Polsterung, etwas Gewicht, etwas Abgerundetes hinzufügen etwas Gewicht, etwas Abgerundetes und fertig Schauen wir uns an, wie es aussieht. Wir haben also ihren Namen. Lassen Sie uns jetzt HTML vier machen. Das bedeutet, dass dies für den ID-Namen gedacht sein wird, und jetzt werden wir auch etwas Styling hinzufügen. Also Block, Textmedium. Was ist mit dem Text Grey 600, ein bisschen heller als der 800 und einer silbernen Unterseite Speichern wir es jetzt so, wie es aussieht. Es ist in Ordnung. Was wir tun werden, wir werden es kopieren, und jetzt werden wir es für den vernünftigen Preis tun. Und da werden wir es gewissermaßen auf Preis umstellen. Diese Idee wird sich gewissermaßen in den Preis umwandeln. Wir werden das mit HTML 4 verbinden. Dieser Typ wird kein Text sein, sondern eine Zahl. Dieser Wert wird gewissermaßen der Preis sein. Der Wert wird bleiben, und das war's. Auf der Seite wird es so aussehen. Und eine weitere Sache, die wir tun werden , ist die Schaltfläche zum Speichern der Änderungen. Also werden wir auch ein Bild für unser Essen eingeben. Aber um das ein bisschen einfacher zu machen und nicht darüber nachzudenken, wie wir genau überprüfen können, ob die URL für das Bild für unseren Artikel korrekt eingegeben wurde usw., werden wir es einfach nicht dort platzieren Wir werden den Preis bearbeiten können, wir werden den Namen bearbeiten können, aber wenn wir das eigentliche Bild bearbeiten wollen oder wollen, werden wir einfach einen neuen Artikel erstellen und den alten löschen. Jetzt werden wir ihre Schaltfläche hinzufügen Diese Schaltfläche sollte für sichere Änderungen verwendet werden. Nun, um dort etwas Styling hinzuzufügen, also verwenden wir mit zwei vollen, Hintergrund auf Grün 500, ich glaube, O mit Hintergrund auf Grün 800, Text auf Weiß, wieder etwas Polsterung Dann fügen wir etwas Abgerundetes und einen Rand von oben hinzu. Außerdem müssen Sie dort den Klassennamen hinzufügen, bevor wir ihn bearbeiten. Mit einem Klick wird also das Essen bearbeitet. Wenn wir also auf diese Schaltfläche klicken, wird das Essen bearbeitet, und jetzt ist es an der Zeit, es tatsächlich zu testen. Öffnen wir also die Pinnwandseite. Lassen Sie uns Essen zu Essen bearbeiten, um es zu bearbeiten. Vielleicht auch im Preis, wir können sagen, klicken Sie auf Änderungen speichern und wir haben einen Fehler. Lassen Sie uns nun überprüfen, was passiert. Also lass es uns untersuchen. Wenn wir es dort überprüfen, können wir feststellen, dass es sich um Pflichtfelder handelt, etwa dass Pflichtfelder fehlen. Und das liegt an dem Bild, über das ich gerade gesprochen habe. Was wir also tun werden, ist, dass wir in unserem Ras-Code zu den Routen gehen, den Put finden und das Bild von dort löschen, das Bild von dort löschen weil wir das Bild nicht bearbeiten werden. Wenn du es jetzt speicherst und zu einer Seite zurückkehrst und wir werden es löschen oder es tut mir leid, bearbeite es, irgendeinen neuen Wert, kleines Problem. Wenn wir also Essen bearbeiten gehen, können wir dort sehen, dass wir vergessen haben, den Namen des Sets zu ändern. Und das müssen wir natürlich ändern , um den Preis vernünftig festzulegen. Jetzt sehen wir zumindest, wie es funktioniert hat, und das ist auch ein Teil des Kopierens des Codes Aber jetzt haben wir es gespeichert und können endlich auf unsere Seite gehen. Endlich können wir das Essen machen, um es zu bearbeiten. Wir können den Weihrauch zu einem bestimmten Preis hinzufügen und die Änderungen speichern Und schließlich wird unser Essen bearbeitet. Jetzt können wir es auch löschen. 12. Spinner: Lassen Sie uns den Spinner machen, , uns auch jetzt in unseren Komponenten eine neue Datei erstellen Dort müssen wir eigentlich nichts importieren. Es wird keine Funktionen geben. Es wird tatsächlich keinen Text geben. Es wird nur ein Div geben und darin wird es ein zweites Div geben. Und diese Divs werden ein gewisses Styling haben. Also beim ersten werden wir einfach etwas Flex hinzufügen und auch die Mitte ausrichten, du wirst es so in der Mitte platzieren und wir werden eine gewisse Mindesthöhe festlegen Lassen Sie uns also den Bildschirm mit Mindesthöhe verwenden. Und dann der zweite Unterschied, der tatsächlich der Spinner selbst sein wird tatsächlich der Spinner selbst sein Wir werden Breite und Höhe auf 16 setzen. Wir werden Rahmen vier verwenden, wir werden Rahmen gestrichelt verwenden, und wir müssen auch etwas in Index-CSS codieren, und wir werden es gleich danach tun Verwenden wir also Rounded Full. Es ist also ein Kreis, eine animierte Drehung, das werden wir in einer Minute programmieren. Jetzt wird die obere Rahmenfarbe auf durchgehend und auf primär eingestellt Nun haben wir diese Wörter verwendet, die von Tel Wind nicht erkannt werden können , weil wir jetzt einige unserer eigenen CSS-Klassen programmieren werden Gehen wir also zum Index von CSS. Und gemäß unseren Rückenwind-Direktiven machen wir ihre technischen T-Frames, drehen, und dort nutzen Sie, um zu transformieren und um 360 Grad zu drehen, also in einem sich drehenden Kreis Jetzt fügen wir auch ihren animierten Spin hinzu , den wir dort geschrieben haben Wir, ihre Animation, drehen sich 1 Sekunde linear unendlich. Als Nächstes werden wir Rahmen, Oberseite, Farbe, mit Transparent angeben. Dort fügen wir die obere Rahmenfarbe zu transparent und Rand primär hinzu. Wir können eine blaue Farbe einstellen. Also die Randfarbe wird sein, ich weiß es nicht. Lass uns welche machen. Lass uns einfach Blau benutzen. Speichern Sie es jetzt am Punkt, also ist es ein Kurs. Jetzt können wir zuerst Lebensmittel löschen. Dort werden wir ihre Ladung verwenden und für den Fall, dass diese Ladung zutrifft. Also dieses Laden , das wir haben, beginnt mit handle delete food und wird beendet, wenn es erfolgreich ist oder fehlschlägt. In der Zwischenzeit wird es also wahr sein, also wird etwas geladen. Wir werden diesen Spinner zeigen. Klicken Sie auf Enter, es wird importiert und es wird auch von dort übernommen Kopieren Sie es und stellen Sie sicher, dass es da ist Spinner-Spinner für Komponenten. Jetzt gehen wir zu Essen bearbeiten und werden es auch dort platzieren Auch hier löschen wir einfach R, Enter, damit es importiert wird. Und wie wir das in Edit Pot testen werden, wollen wir einfach das Laden immer noch auf true setzen, speichern. Jetzt auf unserer Seite gehen wir so zurück. Wir werden auf Bearbeiten klicken. Und Sie konnten sehen, ob Sie jetzt auf Änderungen speichern klicken , den Spinner. Ich 13. Lebensmittel erstellen: Wenn wir nun eine Komponente erstellen, verwenden wir dort den Spinner Lassen Sie uns die Kodierung also wieder auf Force umstellen. Speichern Sie es. Gehen Sie jetzt zu Food J Six. Das ist unsere Komponente. Stellen Sie sicher, dass Sie auf der Seite sind. Sie können sehen, dass ich es bin, da ist der kleine Text abgebildet. Und ja, fangen wir mit der Kodierung der Create Food-Komponente an. Also lasst uns dort einige Dinge importieren. Zuerst der Nutzungsstatus, dann die Exces und dann werden andere Dinge importiert, wenn wir sie verwenden werden Was wir dort also tatsächlich tun werden , ist, dass wir mit der Konstante beginnen werden Also zuerst geht es um den Namen, Namen des Sets, den Status wie diesen. Nun zum Preis in gewissem Sinne, Festpreis in gewissem Sinne. Nun wieder das Laden. Ich denke, wir können einfach da hingehen und einige der Konstanten reduzieren Also müssen wir dort auch laden. Die Navigation durch die Snackbar, ID brauchen wir nicht, weil wir sie erstellen werden und wir wollen nicht , wir haben keine ID, die wir aus der URL extrahieren könnten. Also haben wir da das Laden. Navigiere jetzt lass uns es importieren. Snackbar. Das ist es. Und jetzt verwenden wir neuerdings auch das Bild. Also konstantes Bild, festes Bild. Datum Null und konstante Bildvorschau mit festgelegter Bildvorschau, Status jetzt verwenden. Lassen Sie uns zuerst die Benutzeroberfläche erstellen, und tatsächlich werden wir nur einen Entwurf der Funktionen erstellen, die wir verwenden werden Also zuerst werden wir uns um die Dateiänderung kümmern. Dadurch wird die Dateiauswahl übernommen und auch die Vorschau des Bildes angezeigt , das wir hochladen möchten. Dort machen wir also die Konstante ausgewählte Datei, E Zieldateien Null. Das bedeutet, dass wir die erste Datei aus dem Dateieingabeereignis extrahieren . Dort verwenden wir die ausgewählte Datei setimage, und wenn diese ausgewählte Datei vorhanden ist, verwenden wir den Constant Reader, den neuen Reader Enter Dort werden wir ein neues Datei-Leader-Objekt erstellen, um unsere Datei zu lesen Dort werden wir die Funktion Reader verwenden, also Reader Dot leihweise entladen, wir werden nach dem Laden die Bildüberprüfung mit dem Reader-Punkt-Ergebnis einstellen Dadurch wird die Vorschau-RL in den Zustand versetzt, in dem der Lesevorgang abgeschlossen ist Natürlich werden wir diese ausgewählte Datei auch am Reader als Daten-URL lesen, sodass anfängt, die Dateidaten als URL zu lesen. Und sonst ist das nicht wahr, wir werden die Bildvorschau auf jetzt einstellen. Wir werden also die Bildvorschau zurücksetzen, wenn keine Dateifunktion zum Hochladen der Datei ausgewählt ist keine Dateifunktion zum Hochladen der Datei ausgewählt Es handelt sich um eine asynchrone Funktion, aber vorerst lassen wir sie leer Dann werden wir die Funktion haben, mit sicheren Lebensmitteln umzugehen. Das wird auch synchron sein und diese Funktion speichert das Lebensmittel, nachdem wir alle Felder eingegeben haben, und jetzt werden wir die Benutzeroberfläche erstellen Dann werden wir diese Funktionen codieren. Aber schon vorher müssen wir die Cloudnary-Integration einstellen und zu unserem Index auf JS gehen zu unserem Index auf JS und dort etwas für das Upload-Bild einstellen Wir brauchen dafür auch eine Route. Aber zuerst machen wir die Benutzeroberfläche, damit wir sie dann sogar testen können. Zuerst im Haupt-Div werden wir den Spinner wieder verwenden Lassen Sie uns also das Laden überprüfen. Und falls es wahr ist, rufen wir den Spinner Wir haben da den Hauptunterschied darunter. Wir werden einen zweiten Dif machen, der die eigentliche Karte oder das Formular enthält Für den Hauptunterschied können wir dort einen Hintergrund einstellen, der zum Beispiel sehr hell ist Dann meinst du Bildschirmhöhe, dann biege und richte die Mitte des Objekts in der Mitte aus. Für das zweite Div können wir das so machen, als ob ein Auto zum Container fährt, gewisses Maximalgewicht von groß, ein bisschen Schatten groß, dann etwas abgerundet, dann etwas Polsterung und dann weißer Hintergrund Sie werden so etwas auf Ihrer Seite sehen. Lass uns weitermachen. Und was wir dort mitnehmen werden, ist wieder die Zurück-Taste. Also lass uns diesen Link kopieren. Leg es in unser Div. Jetzt importieren wir den Link, damit er tatsächlich angezeigt wird. Und wir können dort mit der Überschrift beginnen. Verwenden wir also die erste Überschrift von „Essen bearbeiten“. Entschuldigung, von Create Food. Jetzt haben wir es auf der Seite. Gehen wir tatsächlich zum VS-Code und Sie können ihn dort belassen, aber ich werde Elemente in der Mitte löschen und am Ende bearbeiten, weil ich möchte, dass Sie das Formular jetzt dort sehen, und es wäre schwierig für mich es sonst anzuzeigen, weil ich mit diesem Fenster, das Sie dort mit meiner Seite sehen können, nicht zu viel Platz beanspruchen möchte mit diesem Fenster, das Sie dort mit meiner Seite sehen können, nicht zu viel Platz beanspruchen . Also für den Create-Fuß werde ich wieder etwas Styling hinzufügen, also Text drei XL auf Semiboltx können wir links lassen, tatsächlich Text grau, 800, und etwas Rand oder vertikaler Rand. Speichern Sie es. Unter dem Create-Foot werden wir einen Entwickler haben und es wird das Formular mit den Eingaben geben. Formular für unsere Eingaben wird im Grunde das Leerzeichen Y vier haben, also etwas Platz in der Vertikalen, dann haben wir das Label, und zu jedem Label wird es eine Eingabe geben. Eine Eingabe, wir werden eine ID haben, wir werden einen Typ haben, wir werden einen Wert haben. Wir werden Veränderung haben. Sagen wir es eigentlich etwas später. Jetzt der Klassenname selbst und auch erforderlich , weil er benötigt wird. Und jetzt werden wir die Werte dafür ausfüllen. Wir können das also tatsächlich als Vorlage verwenden und für unsere Eingaben verwenden. Wir werden das also für den Namen, Preis im Sinne und das Bild haben. Jetzt fangen wir an, es zu füllen. Also zuerst suchen wir nach einem Namen. Also Name, wir werden eine HTML-Vier haben. Das wird für den Namen sein. Der Klassenname wird Block sein, Text groß, ID, es wird ein Name sein, Typ wird Text sein, Wert wird bei Änderung der Name sein, wir werden den Namen E mit dem Zielwert E setzen , um ihn für den nächsten zu speichern. Wir werden ihren Preis in Cent haben. ID wird der Preis in Cent sein, Typ wird die Zahl sein, Wert wird der Preis in Cent bei Änderung sein. Es wird ähnlich sein wie hier, aber kein festgelegter Name, sondern ein fester Preis im Sinne. Und das letzte Bild wird warten. Auch hier HTML vier, Preis in Cent, das letzte Etikett wird das Upload-Bild sein. Bei HDML mit vier Bildern und ID wird es ein Bild geben, der Typ ist Datei, Wert ist tatsächlich, Sie werden dort keinen Wert haben Anstelle eines Werts werden wir eine gewisse Akzeptanz haben und die Änderung erneut vornehmen, die Dateiänderung wird übernommen Diesmal ist nicht das, was wir da haben, sondern die Funktion „Dateiänderung handhaben “, die wir dort definiert haben Und das wird auch tun, wenn wir eine Datei hochladen, es wird eine Vorschau der Datei erstellt , und das wird alles sein. Für die Bildvorschau müssen wir dort noch eine Sache machen. Also unten müssen wir dort die Bildvorschau hinzufügen, und ob das wahr sein wird. Dann werden wir dieses Div zeigen. Wir müssen es manuell codieren, dif in diesem Div haben wir ein Bild und dieses Bild wird die Quelle der Bildbewertung haben, und dieses Bild wird die Quelle der Bildbewertung haben alles mit Vorschau und einem Klassennamen, sodass wir ihre maximale Größe auf voll und die Höhe auf Oto setzen können Zum Div selbst können wir einen Rand Y vier, einen vertikalen Rand hinzufügen , und das war's dann Jetzt können wir überprüfen, ob wir die Schaltfläche tatsächlich hinzufügen möchten. Unter dieser Bildvorschau werden wir also eine Schaltfläche hinzufügen, die Schaltfläche Speichern. Und das wird auch mit funktionstüchtigem Umgang mit sicheren Lebensmitteln möglich sein. Also auf Klick handhaben sichere Lebensmittel und irgendeinen Klassennamen drauf, also Witz zu voll. Der Hintergrund wird zum Beispiel grün 500 sein. Nachdem wir darüber geschoben haben, setzen wir den Hintergrund auf 800, Text auf Weiß, etwas Bettwäsche Manche sind abgerundet. Die Seite sieht jetzt furchtbar aus, also müssen wir das Styling auch für alle Eingaben für den Namen fertigstellen , also fügen wir eine Klasse mit Block, zu großem Text und auch grauem Text , sagen wir 600, und etwas Rand nach unten Jetzt denke ich, wir können das kopieren und diesen Klassennamen auch für den Preis angeben und diesen Klassennamen auch für dieses Label des Upload-Bildes verwenden Jetzt müssen wir die Eingaben stylen. Da haben wir also den leeren Klassennamen und wir werden mit dem Styling beginnen. Wenn also zwei voll sind, fügen wir dort den Rand hinzu. Also Rand Grad 300, etwas Polsterung. Ein abgerundetes Attribut, und jetzt speichern wir es so, wie es aussieht Ich denke, es ist in Ordnung. Kopieren wir nun diese Klasse, die wir bearbeiten, fügen sie dort ein und fügen sie dort ein, speichern sie. Jetzt wird das Formular so aussehen. Und ich denke, wir müssen uns jetzt mit der Funktionalität befassen. 14. Cloudinary-Setup: Bevor wir mit dem Hochladen des Images fortfahren können, müssen wir nun ein Konto bei Cloudinary erstellen Dort auf cloudinary.com melden wir uns an oder registrieren uns. Nachdem Sie angemeldet sind und etwas Ähnliches sehen, werden wir uns mit programmierbaren Medien wir uns Wir benötigen diesen Cloud-Namen, diesen API-Schlüssel und dieses API-Geheimnis Wir werden zu den Umgebungsvariablen gehen. Dort werden wir in unseren Umgebungsvariablen neue Variablen erstellen, und das wird Cloudinary Cloud sein Nennen Sie Cloudinary Secret, API, Secret und Jetzt werden wir die Geheimnisse, APIs usw. von unserer Cloudinary-Seite abrufen . Und das sind meine Kopieren Sie natürlich keine davon, da sie ungültig sind, da sie mir gehören und ich werde diese Verbindung nach diesem Tutorial löschen. Selbst wenn du sie kopierst, wirst du nicht auf meine Cloudinary Mongo DB oder so zugreifen Wir werden jetzt zu Index DGS gehen Dort müssen wir auch Cloud-Binärdateien installieren, also werden wir tatsächlich Mach CD. Bend, mach NPM I, Cloudinary installiert Dort werden wir nach oben scrollen und dort importieren Cloudinary, also importiere Cloudinary aus Cloudinary. Dort scrollen wir zurück nach unten und dann machen wir Cloudinary Dot Config , und wir werden es dort konfigurieren. Cloud-Name wird Prozess Punkt NF sein, Cloudinary Cloud Name, API-Schlüssel wird Prozess Punkt NF sein, Cloudinary API-Schlüssel und API-Geheimnis werden natürlich Prozess f Cloudinary API Secret sein API-Schlüssel wird Prozess Punkt NF sein, Cloudinary API-Schlüssel und API-Geheimnis werden natürlich Prozess f Cloudinary API Secret sein. Jetzt haben wir diese Cloudinary-Konfiguration und werden auch die Middleware schreiben, um die Cloudinary-Konfiguration in die Anfrage einzufügen . Als Nächstes verwenden wir die Antwort auf die Anfrage und dann werden wir die Anfrage ausführen. Cloudinary entspricht Cloudinary und als Nächstes. und dann werden wir die Anfrage ausführen. Cloudinary entspricht Cloudinary und als Nächstes. Fahren Sie mit der nächsten Middleware fort. Im Folgenden müssen wir das Setup für den Cloudinary-Speicher vornehmen , also werden wir den C-Speicher also werden wir Cloudinary-Speicher, und dort setzen wir cloudnary auf die Cloudinary-Instanz Dann werden wir einige Parameter einstellen. Also werden wir dort einen Ordner, einen Ordner in Cloudinary, einrichten , in dem wir die Bilder speichern werden Also können wir vorerst einige Tests wie Bilder machen oder ja, wir können Bilder machen Dann machen wir erlaubte Formate, also erlaubte Formate. Und wir hätten gerne JPEC, vielleicht PNG, und lassen wir auch JPG zu Und das wird für die Parameter sein. Was wir jetzt auch implementieren, ist ein Parser. Also müssen wir eine motorische Instanz erstellen. Wir müssen einen Motor installieren. Lassen Sie uns also Parser, Motor und Speicher in den Speicher überführen. Jetzt müssen wir den Motor installieren Schauen wir uns also den Bond- und den PMI-Motor an, mit denen er installiert wird. Wenn wir dort einfach das R löschen, wird es importiert. Wir können es noch einmal überprüfen. Ja, es ist da. Lassen Sie uns nun die Route zum Hochladen des Bildes erstellen. Also lass es uns tun, um D ChasFle zu indizieren. Fangen wir mit App Post , weil wir die Datei veröffentlichen werden Die Route wird als Bild hochgeladen. Dort werden wir den Parser Dot Single File verwenden. Anfrage und Antwort wie in den Parametern, und dort werden wir zuerst überprüfen, ob die erforderliche Datei nicht verfügbar ist Dann werden wir die Antwort mit dem Status 400 zurückgeben und eine Nachricht senden, dass keine Datei hochgeladen wurde Dann werden wir weiter gegen die Fangsperre vorgehen. Und im Strike-Cache-Block werden wir das tun, wenn der erforderliche Dateipfad falsch ist, dann geben wir einen neuen Fehler aus, besagt, dass die Datei sie hochlädt, aber kein Pfad verfügbar ist. Und falls es dort nicht abgefangen wird, bedeutet das, dass wir als Antwort den JSON mit dem Pfad, also der sicheren URL, dem erforderlichen Dateipunktpfad angeben können also der sicheren URL, erforderlichen Dateipunktpfad und wir werden die URL des Bildes senden Und falls wir wieder einmal im Strikgblock einen Fehler abfangen, werden wir den Fehler beim Datei-Upload einfach eindämmen Fehler, und dort werden wir auch den Antwortstatus auf 500 setzen auch den Antwortstatus auf 500 Und wir können die Reifen legen. Keine Reifen, sondern interner Server. Speichern Sie es jetzt Jetzt glaube ich, dass es eine zusätzliche lockige Zahnspange gibt. Das sollte in Ordnung sein. Wie es unserem Server geht. Also neuer Cloudinary-Speicher. Cloudinary-Speicher ist nicht definiert, also importieren wir ihn Wir machen N PMI. Es ist für Multor Storage Cloudinary. Lass uns sehen. Ja. Jetzt versuchen wir es. Versuchen wir es, ich habe gesucht. Es scheitert. Wenn wir also Cloudinärspeicher aus Mor-Speicher Cloudinary importieren aus Mor-Speicher Cloudinary Ja, es wird funktionieren. Ja, jetzt können wir wieder dorthin gehen. Jetzt sollte diese Route in Ordnung sein. Also ich denke, wir können versuchen, es zu testen. Was dort wichtig ist, ist, dass diese Cloudinary-Konfiguration Gehen wir nun zu createfood.j6 zu unserer Komponente. Dort werden wir die Methoden codieren. Wir haben das Frontend mit den On-Click-Funktionen. Also müssen wir nur die Funktionen programmieren und dann werden wir sie testen und mögliche Box reparieren und schauen, wie sie funktionieren wird. Also fangen wir natürlich mit dem Hochladen der Datei an. Dort werden wir einfach prüfen , ob das Bild nicht leer ist. Wir senden eine Benachrichtigung und eine Snackbar. Kein Bild ausgewählt. Mit Variantenwarnung und Rückgabe. Falls es in Ordnung ist, werden wir dort weitermachen und das erste Token machen. Also werden wir nach der JWT-Identifikation, also dem Token, suchen. Und wenn das Token nicht da ist, sagen wir, dass kein Token gefunden wurde Außerdem werden wir die Snackbar erneut aufrufen, um Benachrichtigungen über erforderliche Fehler und Variantenfehler zu erhalten. Dort werden wir es zurückgeben und wir können weitermachen. Wenn es auch dort durchgeht, beginnen wir mit der neuen Datenkonstante, den neuen Formulardaten. Wir werden dort das Dateibild anhängen. Sie werden also die Datei an das Formulardatenobjekt anhängen, und dann fahren wir mit einem Trcechblock fort Schreiben wir also, um dort etwas zu fangen. Und für den Trcchblock werden wir zuerst die Upload-URL verwenden, also die Upload-URL, das wird das HTTP mit dem lokalen Host 3.000 sein und die Route war das Upload-Bild, das wir gerade im Index für JS erstellt Dann werden wir eine Antwort formulieren. Wir müssen also auf den Punktbeitrag von Exxils warten, URL mit den Daten hochladen und die Header mit dem Dort werden wir also die Autorisierung festlegen und dort das Barriere-Token setzen, was in unserem Fall das Token ist, das wir dort gesetzt haben und vergessen den Backslash nicht da wir Also nur ein Token da. Jetzt können wir es sogar hier schließen. Dort fahren wir mit der sicheren URL fort, also den sicheren URL-Antwort-Punktdaten, sodass wir die URL des hochgeladenen Bildes aus der Antwort extrahieren . Wir können es auch konsologgen, also diese Bild-URL hochladen, sichere URL Dann beenden wir die Snackbar wieder und können eine Benachrichtigung mit Bild senden, sie erfolgreich hochladen und eine Variante in die Carly Bases Variante Success setzen eine Variante in die Carly Bases Variante Und am Ende des Triblocks geben wir eine sichere URL zurück. Falls es jetzt fehlschlägt, fangen wir dort ab und machen einfach einen Konsolenfehler, fügen einen Fehler mit dem Fehler hinzu, und dort werden wir wieder die Snackbar löschen, kein Bild mit der fehlerhaften Variante hochladen konnten Speichere es. Okay. haben wir dort die Funktion zum Hochladen von Dateien. Und wir haben keine separate Schaltfläche zum Hochladen der Datei, denn wenn wir auf unsere Seite klicken, die Safe-Taste, wird sie diese Methode als sichere Lebensmittelmethode aufrufen Und bei dieser Methode mit sicheren Lebensmitteln werden wir eine Methode zum Hochladen von Dateien aufrufen , die wir gerade codiert Beginnen wir mit der Überprüfung aller Felder. Der Name ist falsch oder der Preis ist sinngemäß falsch. Wir werden uns bei Ihnen bei der Snackbar mit einer Benachrichtigung bedanken Bitte füllen Sie alle erforderlichen Felder aus. Dort stellen wir bei der Benachrichtigung an die Snackbar die Variante vom Typ Warnung ein und kehren zurück, dann übernehmen wir auch den Preis. Also konstante Preisbalken. Und so werden wir den Preis von einer Zeichenfolge in eine Ganzzahl und einen Preis im Sinne des Wortes umwandeln eine Ganzzahl und einen Preis im Sinne Dann verwenden wir diese Funktion, um zu überprüfen, ob wir den Preis haben und ob er auch über Null liegt. Und falls dies falsch ist, senden wir erneut eine Benachrichtigung. Der Preis muss eine positive Zahl sein. Und wir werden dort noch einmal sagen, eine Variante vom Typ Warnung, also Variantenwarnung. Und kehre zurück. Lass uns das einfach kopieren und dort ablegen. Nennen Sie die Punktlänge, oben zwei und auch darunter. Sie kann nicht unter zwei liegen, und sie kann auch nicht über, ich weiß nicht, 30 liegen. Stellen wir dort 30 ein. Und falls ja, werden wir dort hingehen. Der Lebensmittelname muss 2-30 Zeichen lang sein. Variantenwarnung, dann Rückgabe. Und dann fangen wir dort mit dem Laden an. Stellen Sie also das Laden von zwei ein, falls es alle Prüfungen besteht, dort machen wir einen Srikachblock Im Strikag-Block werden wir versuchen, werden wir hochgeladenen Bild-URL warten wir also auf die Upload-Datei Also rufen wir diese Funktion zum Hochladen von Dateien auf, warten, bis das Bild an den Server gesendet wird, und dann wollen wir die URL abrufen. Wenn diese hochgeladene Bild-URL also falsch ist, geben wir einen neuen Fehler aus. Das Hochladen des Bilds ist fehlgeschlagen. Jetzt werden wir nach dieser Prüfung weitermachen. Wir werden neue konstante Formulardaten erstellen, und es werden Name, Preis in Cent und auch das Bild und die URL des hochgeladenen Bildes angezeigt. Wir werden das Identifikationstoken erneut aus dem lokalen Speicher abrufen und es noch einmal überprüfen. Also beim Token erhält der lokale Speicher das Artikel-Token. Und da werden wir wieder den Scheck machen. Also, wenn das Token falsch ist, danke Snakbar, die Authentifizierung Und die Variante wird vom Typ Fehler sein. Dort werden wir das Laden auf Stürze einstellen und wir werden zurückkehren. Falls es auch diese Prüfung besteht, werden wir eine Konfiguration vornehmen, also konfigurieren. Dort werden wir die Header wie zuvor machen und dort die Autorisierung festlegen Also besseres Token. Lass uns jetzt eins tun. Öffnen Sie dort vorne den Datei-Explorer und klicken Sie auf Neue Datei erstellen. Und wir werden auch einen Punkt und eine Datei erstellen , in denen wir eine Umgebungsvariable speichern werden. Und was wir dort speichern werden, ist VT React-App und die Bond-Basis-URL. Was in unserem Fall HTTP sein wird, lokaler Host 3.000. Seien Sie vorsichtig und fügen Sie am Ende keinen zusätzlichen Schrägstrich Andernfalls funktioniert das nicht, weil es das dann in die URL einfügt, und in der URL wäre es wie diese Upload-Datei Also nicht dort haben , weil wir diese Slash-Upload-Datei in die URL einfügen werden diese Slash-Upload-Datei in die URL Fügen Sie dort also keinen zusätzlichen Schrägstrich ein. Lass es so. Jetzt befinden wir uns also nicht in den Back-End-Umgebungsvariablen, sondern in den Front-End-Umgebungsvariablen. Wir haben dort also zwei Umgebungsvariablen für alle Ordner. Nachdem wir es nun da haben, stellen wir einfach sicher, dass wir es korrekt importieren oder richtig verwenden. Unter dieser Konfiguration erstellen wir also ein Konsolenprotokoll mit Import Neta und et et React App Vacant Phase URL Wir werden also prüfen, ob dies die erwartete URL ausgibt , die wir in den Umgebungsvariablen festgelegt haben in den Umgebungsvariablen festgelegt Jetzt werden wir versuchen, die Lebensmitteldaten zu speichern, um dem Axios-Punktpost auszuweichen Wir werden dort die Import Dot Meta N T React App und die Do Food Form Beta und Jetzt, nach diesem, werden wir die Snackbar beenden. Wir werden die Nachricht platzieren, dass Lebensmittel, die erfolgreich gerettet wurden, ihre Erfolgsvariante haben. Und wenn wir das Essen erfolgreich gespeichert haben, können wir auch die Navigation zum Admin-Dashboard verwenden. Und falls wir einen Fehler bekommen, werden wir ihn dort abfangen. Also Console Dot Error Error. Danke, Snack Bar mit dem Tool zum Speichern von Fehlern. Und wir werden dort die Fehlermeldung platzieren. Also geben wir zuerst die Antwortdatennachricht oder die Fehlermeldung ein. Mit einer Fehlervariante. Jetzt können wir das auch endlich tun, und in diesen letzten Block werden wir das Laden von zwei Stürzen setzen. Lassen Sie uns das überprüfen, öffnen Sie die Konsole. Lass uns versuchen, es zu speichern. Jetzt können wir sehen, dass der lokale Speicherpunkt Get keine Funktion ist. Es sollte Gegenstand abrufen sein. Also ein Tippfehler da. Speichern wir es, gehen wir zurück zu unserer Seite. Versuchen wir es noch einmal und wir können sehen, dass es nicht autorisiert ist. Wenn wir das öffnen, können wir sehen , dass das Token nicht gültig ist. Außerdem haben wir da ein Problem, also Console Dot Log. Kein Token gefunden. Lassen Sie uns zuerst eine Registrierungs- und Anmeldeseite erstellen, dann melden wir uns an und registrieren uns als Administrator, und es wird funktionieren. Natürlich können wir das Token auch kken, aber lassen Sie uns das einfach schnell machen, und dann haben wir auch einen anderen Teil der Anwendung implementiert. 15. Registrierungs- und Anmeldefunktionalität: Jetzt werden wir zu Seiten gehen und dort eine neue Datei erstellen, und das wird Login Dot Hair Six sein, und die zweite wird Logout with Hair Six sein Wir werden dort einige grundlegende Vorlagen erstellen und wir werden zu Abid J 6 gehen, und jetzt wollen wir die Admin-Route bearbeiten, aber wir werden sie zur normalen App-Route hinzufügen Dort erstellen wir eine neue Route mit Path Login und Element Login, drücken Enter, die dann importiert wird Jetzt kopieren wir einfach diese Zeile. Und der zweite wird Logo sein. Natürlich müssen wir auch die Route schließen. Speichern Sie es. Und natürlich sollten wir jetzt auch nicht vergessen, uns zu registrieren. Also lasst uns auch registrieren. Kopiere dort einfach diese Route. Das wird Slash Register sein. Und importiere es. Natürlich, weil wir die Vorlage dort nicht haben, registrieren Sie sich. Jetzt ist es in Ordnung. Jetzt können wir all diese drei Komponenten codieren. Gehen wir zuerst zu Index Dot JS und erstellen dort eine neue Route für das Benutzerprofil. Also erstellen wir App Dot Get Benutzerprofil für asynchrone Anfrage und Antwort Und dort werden wir versuchen zu fangen. Im Fehlerfall werden wir es einfach protokollieren. Also Fehler da und Antwortdatum an den Server mit 500 Punkten gesendet. Fehler im trockenen Block. Wir werden versuchen, einen geschlossenen Benutzer auf die Punktsuche nach der ID zu warten , Benutzer-ID anzufordern und das Passwort auszuwählen. Das heißt, wir werden versuchen, den Benutzer ohne das Passwort abzurufen den Benutzer ohne das Passwort Und wenn der Benutzer falsch ist, geben wir eine Antwort mit dem Status vier oder vier zurück Die JSON-Nachricht wird angezeigt, dass der Benutzer nicht gefunden wurde. In anderen Fällen, wenn dies zutrifft, wir einfach user und Jason zurück. Also werden wir die Benutzerdaten senden. Wir werden es für die geschützte Route verwenden. Jetzt können wir uns registrieren. Wir werden dort anfangen, navigieren, Navigate benutzen. Wir müssen es natürlich importieren. Fangen wir mit dem Import an. Lassen Sie uns als Nächstes etwas Platz schaffen. Wir werden eine Konstante mit Benutzerdaten erstellen, Benutzerdaten festlegen. In diesem Zustand haben wir also die Benutzereingaben für unsere Registrierung gespeichert . Wir geben den Namen, auch die E-Mail, auch das Passwort und das zweite Passwort ein, das für das Bestätigungspasswort da ist. Dann werden wir auch den Status erstellen , um eine Fehlermeldung anzuzeigen. Also Fehlermeldung, Fehlermeldung einstellen. Sie bleiben dort und folgen dem nächsten Status, um auf eine erfolgreiche Registrierung hinzuweisen. Also ist Erfolg gesetzt auf Erfolg gesetzt und der Status Falsch als Standardwert. Also dieser ist leer, dieser ist defaultlyFalse. Jetzt werden wir uns um die Änderungen in der Formulareingabe kümmern. Also ändern wir den Eingabe-Handler und dort werden wir die eingestellten Benutzerdaten eingeben. Dort werden wir Benutzerdaten auf einen Zielnamen und einen Zielwert setzen . Jetzt werden wir alle vorhandenen Fehlermeldungen löschen, also setzen wir die Fehlermeldung auf leer und wir werden auch den Erfolgsstatus zurücksetzen wenn wir die Eingabe ändern. Setzen Sie also den Erfolg auf False. Ich denke, wir vergessen auch, den Nutzungsstatus zu importieren. Lassen Sie uns also State verwenden. Dort, speichere es. Wir sollten auch die Verbannten importieren. Also von Verbannten, jetzt werden wir mit der Bearbeitung des Formulars für die Einreichung weitermachen Dort kann der Handler asynchron E eingereicht und dort geöffnet Dann machen wir das E Dot Prevent als Standard. Das bedeutet, dass wir das Standardverhalten beim Absenden von Formularen verhindern und die Formularübermittlung asynchron abwickeln möchten Also werden wir diesen Standard E Prevent verwenden. Wir übernehmen also im Grunde die volle Kontrolle über das Einreichen dieses Formulars, das wir in unserer Registrierung haben werden . Wir werden dort nun mit der Überprüfung der Übereinstimmung des Passworts fortfahren . Wenn also Benutzerdaten Passwort annehmen nicht gleich Benutzerdaten Punkt Passwort zwei sind. Mit dem Bestätigungskennwort setzen wir also den Erfolg auf Falsch und geben auch eine Fehlermeldung ein. Passwörter stimmen nicht überein, und wir werden zurückkehren , falls es diese Prüfung durchläuft und die Passwörter übereinstimmen. Wir werden versuchen, den Block zu fangen. Und in diesem Try-Block werden wir die Konfiguration vornehmen. Wir werden die Header dort setzen, also den Inhaltstyp auf Anwendungs-JSON Und dort werden wir die Anfrage an den Registerendpunkt Also werden wir Gewicht nehmen. Entferne den Beitrag mit dem HTTP, lokalen Host 3.000, wie registriere ich mich Dort werden wir den Namen userdtatname, email userdata dot, email und Passwort userdata dot password eingeben Und danach machen wir das Confit und dann Lassen Sie uns es natürlich auch ein bisschen verschieben. Dann setzen wir den Erfolg auf zwei und setzen die Fehlermeldung auf Registrierung erfolgreich. Jetzt ist es also nicht einmal eine Fehlermeldung. Es löst eher als Summenmeldung, aber wir können es als Namen der Fehlermeldung belassen. Stellen Sie das Timeout für den registrierten Benutzer ein, der sich anmeldet. 4001st, wir werden ihn zum Login navigieren. Und dort werden wir 4.000 machen. Falls das fehlschlägt, fangen wir einen Fehler und setzen dort den Erfolg natürlich auf Stürze. Außerdem setzen wir die Fehlermeldung auf Error Dot Response Dot Data Dot Message oder es ist ein Fehler aufgetreten. Wenn wir nun auf unserer Seite den Schrägstrich registrieren, gelangen wir zu der Seite und können dort mit der Codierung der Benutzeroberfläche fortfahren Dort werden wir im Haupt-Div beginnen und es gibt einige Stylings Also wir Flexbox-Layout, flexible Volumenrichtung, so dass es so sein wird, dass die Elemente untereinander liegen werden Dann werden wir es vertikal und horizontal zentrieren. Minhight-Bildschirm und etwas Hintergrund. Lass uns Gray 100 verwenden. Dort werden wir einige Überschriften mit dem Register machen Wir werden auch einige Klassen hinzufügen einen etwas größeren Text vom Bolzen aus und einige werden nach unten verschmelzen. Jetzt speichern wir es. Wir werden den Text in der Mitte haben. Es wird also das Anmeldeformular geben. Wir können weitermachen. Und was wir jetzt tun werden , ist , dass wir die Fehlermeldung anzeigen. Wenn es also eine Fehlermeldung gibt, zeigen wir einfach einen Absatz-Tack an und in diesem Absatz steht dann die technische Fehlermeldung Wir werden der Fehlermeldung selbst etwas Styling hinzufügen, sodass wir dort die geschweiften Klammern machen können, und dann werden wir innerhalb dieser geschweiften Klammern Dort werden wir das tun, und im Erfolgsfall werden wir den Text Green 500 wir Falls nicht, verwenden wir den Text Red 500. Und dann fahren wir mit Text Large fort , vielleicht kursiv und mit Rand nach unten. Bei diesem Turn-in-Operator gilt also, wenn dies erfolgreich ist, der Textbildschirm, falls er falsch ist, roter Text, und das gilt für beide Szenarien. wir nun unter dieser Fehlermeldung fort, stellen Sie also sicher, dass wir draußen sind und wir beginnen mit dem Formular. Dieses Formular wird wieder einige Klassen haben, also Breite bis volle Breite und maximale Breite. Ich weiß es nicht. Lassen Sie uns den Erfolg vorerst nutzen. Und beim Absenden des Formulars verwenden wir den Submit-Handler, verwenden wir den Submit-Handler in dem wir die erste Eingabe haben werden. Lassen Sie uns diese Eingaben tatsächlich kopieren, sodass es eine Eingabe ist, zweite für das E-Mail-Passwort das Bestätigungskennwort, und dann wird es eine Schaltfläche mit Registrierung geben. Was nun die Eingabe angeht, haben wir dort Typ, der vom Typ Text sein wird, dann wird es einen Platzhalter geben, also gibt es den Benutzernamen, dann wird der Name Name sein und der Wert wird userdatadt Name sein Und bei Änderung werden wir den Change Input Handler haben. Außerdem werden wir etwas Styling hinzufügen. Der Klassenname wird also etwas Schatten sein, etwas Rand, vielleicht abgerundet, mittelgroß, voll, etwas Bettzeug, vielleicht Textgrau 700, und das war's. Mal sehen, wie es aussieht. Okay. Nun, was wir tun können, ist , dass wir es tatsächlich kopieren und einfügen können. Stattdessen haben wir es dort vorbereitet, aber lassen Sie uns es einfach viermal kopieren und einfügen, wenn wir wollen. Also haben wir den Benutzernamen dort. Die zweite wird E-Mail sein, das wird vom Typ sein. Auch Text, dritter Typ ist Passwort, das vom Typ, Passwort und Bestätigungspasswort , das wiederum vom Typ Passwort sein wird. Mit den Namen dort wird es eine E-Mail geben. Es wird ein Passwort geben und es wird Passwort zwei geben. Vergiss nicht, den Wert zu ändern. Also der erste ist der Name, der zweite ist E-Mail, und das ist auch das Passwort und das zweite Passwort. Jetzt haben wir da die Schaltfläche, also sollte die Schaltfläche vom Typ Submit sein und natürlich auch einen Klassennamen haben. Also können wir den blauen Hintergrund zu 500 hinzufügen. Wenn wir mit der Maus darüber fahren, wird der Hintergrund blau sein, 800, der Text weiß, die Schrift fett, etwas Rosa, vielleicht wieder in der Nähe dieses Mediums Das kann es sein. Und am Ende dieses Formulars werden wir tatsächlich eine Frage haben, ob das Konto existiert oder schon erstellt wurde. Lassen Sie uns also ihr Absatz-Tag verwenden und ihr bereits erstelltes Konto erstellen. Lassen Sie uns auch ein bisschen stylen, also gehen Sie nach oben und wir werden dort einen Link hinzufügen, falls er wahr ist Dadurch gelangen Sie zur Anmeldeseite, die wir jetzt codieren werden. Lass es uns schließen. Melde dich an. Falls also jemand auf diese Registrierungsseite gelangt, wir aber bereits ein Konto haben, lassen wir ihn auf diesen Link klicken und die Login-Komponente verwenden, lassen wir ihn auf diesen Link klicken die wir jetzt codieren , und lassen ihn sich mit den Zugangsdaten anmelden, die er bereits kennt und der bereits ein registriertes Konto hat. Lassen Sie uns etwas stylen, aber schreiben Sie einfach blau 500, da es dem Button ähnlich sein sollte, vielleicht können wir auch Her so text blau, 800 hinzufügen und vielleicht können wir die Textgröße auf Excel erhöhen. Schauen wir uns jetzt an, wie es aussieht. Vielleicht werden wir das für die Schaltfläche tun , hier werden wir die Breite auf die volle Breite erhöhen. Dann werden wir so aussehen. Und wenn wir den Benutzer des Benutzerdatensatzes überprüfen, gibt es auch das Problem mit den Benutzerdaten. Jetzt werden wir es speichern. Wir werden auf unsere Seite gehen. Ich werde überall auf Ws setzen, klicken Sie auf Registrieren. Und die Registrierung war erfolgreich. Und es brachte uns auch auf die Anmeldeseite. Das heißt, wir sind jetzt registriert, also melden wir uns einfach an und müssen natürlich die Login-Komponente codieren . Also lass uns gehen und es machen. Gehen wir zur Login-Komponente und dort können wir beginnen. Dort beginnen wir über der Rückkehr und beginnen mit der Navigation, die wir wieder verwenden. Also verwenden wir Navigate. Es wird importiert. Das wird also ein Hook sein nach erfolgreicher Anmeldung programmgesteuert zu einer anderen Seite zu navigieren nach erfolgreicher Anmeldung programmgesteuert zu einer anderen Seite Dann werden wir einen konstanten Login-Datensatz mit Login-Daten erstellen. Wir werden dort State verwenden und eine leere E-Mail-Adresse und ein leeres Passwort festlegen. Natürlich müssen wir es auch dort importieren, also den Status aus React importieren, ihn dort unten speichern, wir werden den Status wieder voll machen und die Fehlermeldung enthalten. Fehlermeldung, Fehlermeldung einstellen und Status leer. Dann erstellen wir einen Handler für die Eingabeänderungen , um den Status zu aktualisieren und die Fehlermeldung zurückzusetzen. C ändert den Eingabe-Handler und dort setzen wir die Anmeldedaten auf Anmeldedaten, E-Zielname und Etarget-Wert Und wenn die Fehlermeldung wahr ist, setzen Sie die zweite Fehlermeldung Dann werden wir dort die Funktion für den Submit-Handler haben. also für das Absenden des Formulars den Lassen Sie uns also für das Absenden des Formulars den Submit-Handler asynchron E ausführen. Auch hier werden wir den E-Punkt-Prevent-Standard verwenden, wie ich in der vorherigen Registerkomponente erklärt habe, und wir werden versuchen, dort catch zu finden Und beim Versuch werden wir damit beginnen, die Post-Anfrage an den Login-Endpunkt zu stellen Wenn Sie sich also dort im Explorer und in Bend nicht erinnern, haben wir dort auch den Login-Endpunkt mit dem Register-Endpunkt. Also nennen wir es einfach. Bei der Anmeldung werden wir versuchen, konstante Antwort unter Punkt Post, HDDP Local Host, 3.000 Login-Daten abzuwarten und die Login-Daten zu senden Dann werden wir die Antwort protokollieren. Also antworte Punktdaten, und wir werden auch das empfangene Token im lokalen Speicher speichern und wir werden auch das empfangene Token im lokalen Speicher speichern. Wenn wir es dann haben wollen , zum Beispiel wenn wir Lebensmittel herstellen wollen und so weiter, können wir dieses Token abrufen , wir werden es dort speichern. Also lokaler Speicher, Punkt setzt das Element des Tokens auf die Antwort Punkt Punkt Punkt Token. Und nach einer erfolgreichen Anmeldung können wir zum Admin-Dashboard navigieren. Falls dies fehlschlägt, werden wir es dort abfangen, und wir werden es dort tun, falls die Bedingungen erfüllt sind. Wenn also die fehlerhafte Antwort da ist, setzen wir erron message auf Erroded Response but data dot message Erroded Response Wenn es eine Fehleranfrage gibt, speichern wir, dass wir die Fehleranfrage in der Konsole protokollieren, und jeder andere Fehler wird nur als Konsolenprotokoll-Fehlermeldung angezeigt nur Der übliche Catch-Block wird also das letzte ls sein. Dann war's das für das Submit-Handle und für die anderen Funktionen können wir zur Benutzeroberfläche wechseln. Dort im Haupt-Div werden wir also etwas Styling vornehmen. Also nochmal, Flexbox-Layout, Flex-Richtung, Volumen, zentrieren die Elemente Horizontal und vertikal oder vertikal und Dann etwas Mindesthöhe bis zum Bildschirm und dann etwas Hintergrund bis Grau. Dann werden wir beim Einloggen eine Überschrift erstellen und den Text in Excel einfügen. Welche andere Schriftart hat einen Rand nach unten geschraubt. Falls wir dann eine Fehlermeldung haben , werden wir sie dort anzeigen. Also Fehlermeldung. Falls es wahr ist, werden wir diesen Absatz zeigen, in dem die Fehlermeldung steht, und der Stil dafür ist Text rot, 500, Text ich weiß nicht, XS vielleicht kursiv und ein Rand unten. Der Grund, warum wir ihren Return-Operator nicht verwenden, ist, dass wir den erfolgreichen Loginer nicht anzeigen werden Wenn die Anmeldung also erfolgreich ist, melden wir uns einfach wieder auf der Admin-Seite an Jetzt können wir mit dem Formular beginnen. Innerhalb des Formulars werden wir die Eingaben haben und so weiter, aber lassen Sie uns das Formular zunächst ein wenig stylen. Also werden wir die Breite bis zur maximalen Breite wieder auf etwas wie XS verwenden und beim Absenden rufen wir submit handler auf. Jetzt können wir zum Formular gehen. Es wird eine Eingabe geben. Also zuerst eingeben, dann werden wir es ein paar Mal kopieren. Natürlich wird es auch einen Button geben. Aber fangen wir mit den Eingaben an. Wir werden ihre Eingabe für die E-Mail und auch die Eingabe für das Passwort verwenden , da es reicht, wenn sich der Benutzer nur mit der E-Mail anmeldet , die er bei seiner Registrierung angegeben hat. Der Typ ist also Text, Platzhalter ist E-Mail, Name ist E-Mail, Wert ist Login-Daten Punkt E-Mail und bei Änderung wird es Change Input Handler sein Dann werden wir die Klasse erstellen und etwas Schatten, etwas Rahmen, etwas abgerundet, mittelgroß, manche mit zu viel Inhalt, etwas Polsterung, etwas Text zu Grau hinzufügen abgerundet, mittelgroß, manche mit zu viel Inhalt, etwas Polsterung, etwas Text zu Vielleicht ist es das. Jetzt werden wir es noch einmal kopieren. Das zweite wird ein Passwort sein. Also ändern wir den Typ in Passwort. Platzhalter da wird ein Passwort sein, Name wird auch ein Passwort sein, Tippfehler da, Login-Daten werden Passwort sein, Login-Daten werden Passwort sein Change Input Handler bleibt Und jetzt glaube ich, dass ich den Knopf bewegen kann. Also da, ich werde mich einloggen. Ich gebe Submit ein. Ich werde einige Klassennamen hinzufügen. Also nochmal, Hintergrund blau bis 500. Nachdem ich mit dem Mauszeiger über den blauen Hintergrund gefahren bin, weiß ich nicht, 800. Was sonst? Manche sind rund bis mittelgroß, manche gepolstert So wie das hier. Und welche voll. Ich werde es speichern. Und unter unserem Formular werde ich auch einen Absatz schreiben, noch kein Konto. Und wir werden einen Link hinzufügen. Vergiss nicht, es zu importieren, also drücke ich Tentro Lass uns noch einmal überprüfen, ob es importiert wurde. Ja, ist es Und es wird „Registrieren“ heißen. Falls unsere Admins also noch kein Konto haben, klicken sie, um sich zu registrieren, und sie werden zurück zur Registrierungsseite weitergeleitet Also da ist das Slash Register. Fangen wir mit den Klassennamen an, Text Blue, 500 auf Her, er wird in Text Blue, 800 geändert Außerdem erhöhen wir den Text ein wenig und wir haben noch keinen Unterricht, nur etwas Spielraum bis oben. Schauen wir uns jetzt das Formular an. Und versuchen wir auch, uns anzumelden. Vorher haben wir TWS als unsere Anmeldeinformationen verwendet. Jetzt, wo sie sind, werde ich auf Anmelden klicken. Und ich werde eine Fehlermeldung bekommen. S-Benutzerdaten sind nicht definiert, da wir dort einige Eingaben verpasst haben Importieren wir also Exiles aus Exiles und speichern Bevor wir die Benutzerdaten überprüfen, versuchen wir es. Und es funktioniert. Also das ist in Ordnung. Ich habe nur einige Eingaben verpasst. 16. Essen und Wolkeneffekt erstellen: Das bedeutet nun, dass wir uns als Benutzer angemeldet haben. Wir können also zum Objekt zurückkehren, einige Daten eingeben und versuchen, es zu speichern. Und es dreht sich immer noch, aber wenn wir im Cloudinary nachschauen, haben wir das Bild tatsächlich Also haben wir wahrscheinlich in irgendeiner Antwort etwas zurück. Lass uns das überprüfen und reparieren. Eines der Probleme, die ich dort sehen kann, ist, dass wir mit einem Cloudinary die Version zwei verwenden müssen Also haben wir uns da tatsächlich geirrt. Natürlich müssen wir dort auch Version zwei als Cloudinary eingeben Version zwei als Cloudinary Jetzt speichern wir es, es sollte funktionieren, also sollten wir auf unsere Seite gehen Auf unserer Seite werden wir auf Speichern klicken. Der Spinner dreht sich für eine Weile und jetzt können Sie sehen, dass Sie erfolgreich sind Jetzt haben wir dort unseren neuen Artikel, und wenn wir zu Mongoi B gehen, klicken wir dort auf Essen und dort haben wir das Bild Jetzt können wir einfach die URL kopieren, einfügen und wir können die URL testen und wir können sehen, dass wir dort das Bild haben werden Außerdem können wir auf unserer Seite sehen , dass wir dort auf viele Fehler stoßen. Also lass uns gehen und es reparieren. Es ist auf unserer Admin-Seite, es gibt einen sehr neuartigen Effekt, und wir müssen dort ein leeres Array hinzufügen. Und wenn wir dort das leere Array haben, bedeutet das, dass der Effekt erst nach dem ersten Rendern ausgeführt wird . Wenn wir jetzt zu unserer Seite zurückkehren, können wir sehen, dass wir sie einfach aktualisieren können. Und wir bekommen keine neuen Fehler mehr. Lassen Sie uns jetzt zum Beispiel das erste Lebensmittel löschen. Okay. Und ja, wir haben jetzt einen Artikel mit einem Bild. Wir können es auf Mongo DB sehen, dann werden wir es im Frontend für einen Kunden mit einem bestimmten Preis sehen , und wir können weitermachen Eigentlich werden wir keine Komponente zum Abmelden haben. Wir werden es einfach über einen Button erledigen. Wenn wir dann darauf klicken, wird unser Token zurückgesetzt und wir werden auf die Kundenseite gebracht. Lassen Sie uns es also tatsächlich sogar von dort löschen. Jetzt müssen wir uns nur noch anmelden und registrieren. 17. Admin-Navigationsleiste: Ich denke, es ist Zeit, die Admin-Navigationsleiste hinzuzufügen. In Seiten erstellen wir also eine neue Datei, Admin Now bar.j6. Jetzt gehen wir in app.j6, the, und wir haben Also, was wir in der App tun werden, werden wir tun. Wir verwenden einen konstanten Standort, verwenden den Standort und die Konstante ist, und die Konstante ist Pfadname für den Standort der Admin-Route mit Admin beginnt. Jetzt werden wir zusätzlich zu unserem Epi Punkt JA 6 den ternären Operator Admin Route Und falls ja, rendern wir die Admin-Navigationsleiste Falls wir es nicht sind, befinden wir uns auf der Kundenseite. Wir werden eine normale Navbar rendern. Lass uns jetzt dort bearbeiten Also auf der Seite ist die neue Datei Navbar Punkt Ja sechs. Und rendere es dort. Stellen wir sicher, dass es importiert ist. Admin-Navigationsleiste wird also importiert, Navigationsleiste wird importiert. Wenn wir jetzt auf unserer Seite nachschauen, können wir oben sehen, dass wir für Admin genug Balkentext haben . Das heißt, wir stehen dem Admin der Bar jetzt zur Verfügung. Zuerst gehen wir zum Frontend-Ordner und dort machen wir NPM Ich reagiere auf Symbole, weil wir das Symbol Schließen und das Menü für die Navigation verwenden werden Lassen Sie uns das jetzt regeln, also werde ich es dort schließen. Und was wir tun werden, wir werden damit beginnen , den Status so einzustellen, dass die Navigation umgeschaltet wird Genug, genug einstellen, Status verwenden und wir werden die Standardeinstellung auf „Falls“ setzen Dann werden wir eine Funktion erstellen, mit der wir die Sichtbarkeit der Navigation umschalten können, wenn wir auf dem Handy Schalten Sie also die Navigation um und setzen Sie NAF , also diesen Status, auf einen anderen Wert Dann müssen wir dort auch die Abmeldefunktion haben. Ich habe darüber gesprochen , dass wir nicht die Abmeldekomponente haben werden, sondern nur die Schaltfläche, wenn wir darauf klicken, werden wir oder der Administrator Also weiter, logge dich ab. Und da entfernen wir den Artikel aus dem lokalen Speicher. Außerdem werden wir, wie ich bereits erklärt habe, das Token entfernen und den Admin auf den Client oder das Frontend verlagern auf den Client oder das Frontend Im Grunde sind wir im Frontend, aber wir werden sie auf die Kundenseite verschieben Der Kunde wird eine Homepage mit unseren Produkten sehen und wir werden etwas später programmieren Jetzt überprüfen wir auch, ob wir angemeldet sind. Der lokale Speicher erhält also ein Item-Token, und dort werden wir überprüfen, ob der Benutzer gesperrt ist und damit das lokale Speichertoken überprüfen. Jetzt können wir in dieser Navigationsleiste feststellen, ob der Benutzer angemeldet ist oder nicht und wie Sie sich später abmelden können. Dadurch werden Ihnen natürlich einige Routen angezeigt . Also dort im Haupt-Div werden wir anfangen. Wir können sagen, dass dies ein gewisser Hintergrundverlauf nach rechts sein wird . Ich weiß nicht, grün 500 bis grün 600, denke natürlich daran, dass das eine Admin-Oberfläche ist , also ist es egal, wie sie gestaltet ist, aber ich denke, wir können einfach eine nette Navigation machen , die wir auch im Frontend verwenden Vielleicht werden wir das später vorerst ein bisschen ändern , lassen wir es so Dann werden wir ein weiteres Div erstellen. In diesem Div werden wir das Flexbook-Layout verwenden. Wir werden zwischen den Elementen eine Rechtfertigung vornehmen, sodass der Abstand zwischen den Elementen gleichmäßig verteilt ist Abstand zwischen den Elementen gleichmäßig verteilt Zentrieren Sie dies auch vertikal und fügen Sie eine Überschrift hinzu. Lass uns Überschrift zwei machen. Text Excel, Text Y und gedrückt halten. Beide Admin-Panel. Jetzt fahren wir fort und fügen die Schaltfläche für die mobile Ansicht hinzu. Fügen Sie die Schaltfläche mit der Navigation hinzu und drehen Sie einen Bediener dorthin. Wenn die Navigation stimmt, zeigen wir die AI-Kontur in der Nähe an, die wir im Hafen benötigen. Und als Nächstes kommt das AI Outline-Menü, das wir ebenfalls importieren müssen. Lass uns das tatsächlich machen. Also dort Outline importieren und Outline-Menü aus React Icons AI schließen . Stellen Sie einfach sicher, dass der Abstand stimmt. Okay. Gehen wir jetzt zurück. Importiere dort den Nutzungsstatus. Also benutze State. Ja, jetzt funktioniert es. Jetzt können wir dort die Navigationsleiste sehen. Ich kann es ein bisschen erhöhen. Und wir können dort weitermachen. Die Schaltfläche benötigt also natürlich die OnClick-Funktion, mit der die Navigation und auch einige Klassennamen umgeschaltet werden die Navigation und auch einige Klassennamen umgeschaltet Also weißer Text und auf einem großen Bildschirm und darüber wird das ausgeblendet Dann haben wir den Button, das ist in Ordnung. Und jetzt werden wir die Links hinzufügen. Lassen Sie uns also die Navigationstechnologie verwenden. In der Navigation wird sie gesperrt. Und falls ja, darin befinden sich die Links für das Tabellen-Dashboard und einige Links zum Abmelden oder für den Hauptbereich Also machen wir dort ein paar leere Fragmente. Darin platzieren wir den Link, klicken darauf, damit er importiert wird. Das erste führt uns zum Admin-Dashboard mit dem weißen Klassennamentext und es wird Panel heißen. Lassen Sie uns die Namen für das Dashboard später herausfinden. Der zweite Link führt zum Admin-Dashboard, wir noch nicht erstellt haben, aber wir werden es tun, und wir werden die Bestellungen von unserem Frontend oder von unserer Kundenseite erhalten . Wenn also jemand ein Essen bestellt, werden wir es dort auf ein Dashboard übertragen, aber es ist noch nicht erstellt, aber wir können es dort tun. Und der Klassenname wird wieder sein, weißer Text und Dashboard. Dann wird es eine Schaltfläche ohne Funktionalität geben. Ihr könnt euch also vorstellen, was wir dort auf einen Klick verwenden werden , es wird der Logout sein Also logge dich beim Klick aus. Klassenname kann auch weißer Text sein, speichern Sie ihn. Jetzt haben wir da ein Problem. Also warum ist das so? Lass uns ein bisschen besser lesen. Ich denke, wegen des Drehers müssen wir das natürlich beenden. Also werden wir dort weitermachen falls wir die richtige Position haben, und falls wir eine falsche haben, werden wir den Link zum Einloggen einfügen. Plex weiß. Loggen Sie sich ein. Speichern Sie es. Jetzt funktioniert es. Also müssen wir unserer Navigation natürlich ein bisschen Styling hinzufügen . Da fangen wir also eigentlich in lockigen Klammern an. Wir werden ihren Backslash und ihre Navigation hinzufügen und dort Flex platzieren, wenn es wahr ist, und verstecken, wenn Und dort können wir weitere Klassen hinzufügen , die in beiden Szenarien vorhanden sein werden Selbst wenn diese Variable wahr oder falsch ist, also wenn es sich um ein Handy oder einen Desktop handelt, wird dies auf unsere Navigation angewendet. wird es also absolut sein Auf einem größeren Bildschirm wird es also absolut sein und über statisch, gewisser Hintergrund für jetzt grün, 600, Breite bis zur vollen Breite auf größerem Bildschirm und höher, Breite auf Auto, auf einem größeren Bildschirm oben können wir Flexbox-Layout, Flex-Richtung, Lautstärke bei größerer Flexrichtung, Zeile, Elemente zur Mitte verwenden Lautstärke bei größerer Flexrichtung, . Was sonst? Lass uns mit einer anderen Zeile weitermachen. Vertikaler Raum, wir können fünf machen. Auf einem größeren können wir zurücksetzen. In einem horizontalen Raum können wir sechs machen. Außerdem können wir die oberen 14 und links auf Null, rechts auf Null, etwas vertikales Pedding und einen höheren Z-Index vornehmen Und ich würde auch eine große Bildschirmleiste verwenden, um das vertikale Pedding zurückzusetzen Speichern wir es jetzt und überprüfen wir unsere Navigationsleiste. Sieht derzeit also so aus. Wir haben dort das Panel, das Dashboard, das noch nicht codiert ist, und die Abmeldefunktion Jetzt lass es uns verkleinern. Und es sieht so aus, als ob es gut funktioniert. Lassen Sie uns jetzt das Login-Logout testen . Also lass uns ein Logo erstellen. Wir sind auf eine normale Seite gekommen, aber was wir auch tun können, ist, dass wir es einfach dort auf unserer Seite machen. Ich werde es dir so zeigen. Loggen Sie sich ein. Jetzt gehen wir dorthin. Dort werden wir die Informationen einfügen. In meinem Fall heißt WW, einloggen und schon sind wir wieder in unserem Admin-Panel. Gehen wir jetzt zurück zum VS-Code. Gehen wir zu admin.j6. Dort. Fügen wir dem Ganzen etwas mehr Stil hinzu, also etwas PeddingHizontal, vertikale Polsterung, maximale Breite Lassen Sie uns Seven Excel verwenden. Dann speichern wir es. Lassen Sie uns außerdem MMX Auto verwenden, was als Nächstes? Wir können dort einen zusätzlichen Rand von oben hinzufügen und es so belassen Und jetzt ist es an der Zeit, zu unserer Kundenseite zu wechseln. Also da werden wir einfach aufpassen. Es wird uns zu unserem lokalen Host 5173 schicken, und dort werden wir die Client-Benutzeroberfläche codieren Wir haben dort also die Navigationsleiste, die eines der ersten Dinge sein wird, die wir codieren werden Und dann können wir dort auch einen Home Dot JS Six erstellen. Lassen Sie uns nun diese beiden Dinge in Abdo Js importieren. X, meine ich Dort erstellen wir eine neue Route mit Pfad zwei, Schrägstrich und dem Element, das sie rendern wird, wird Home sein Drücken Sie die Eingabetaste. Deshalb ist es wichtig, das Tag dort zu schließen. Und Navbar haben wir schon da. Also wenn du jetzt unsere Seite sehen kannst, sie dort angezeigt, Navbar und 18. Navigationsleiste: Fangen wir mit der Navbar an. Also genug Leiste, sie wird unserer Admin-Navbar tatsächlich ziemlich ähnlich Wir können es einfach kopieren und einfügen und wir werden es tun, lassen Sie uns einfach sichergehen Und ich werde es dort wieder schließen. wir also zunächst sicher, dass wir in der Navbar standardmäßig exportieren Und wir haben dort genug Balken. Und jetzt speichern wir es. Wir haben das Admin-Panel , aber das ist natürlich nicht korrekt. Wir werden es aktualisieren. Erstens brauchen wir die Abmeldung dort nicht Zweitens müssen wir nicht überprüfen, ob der Administrator gesperrt ist. Bevor wir es speichern, sollten wir sicherstellen, dass wir es entfernen, also löschen wir es, sodass das Fragment dort, dort und im Grunde dort gesperrt ist. Wir haben also nur noch diese Navigation übrig. Jetzt speichern wir es. Und es gibt auch den Button zum Abmelden, lösche auch diesen Zunächst werden wir dort auch ein Bild importieren Dort importieren wir also Logo Naftn-Assets und ich muss das Logo einfügen, aber es wird so benannt , weil ich mir nur die Datei ansehe Jetzt gehe ich zu Assets und ich habe es dort. Dieses Logo wird also in unserer Navigationsleiste angezeigt. Anstatt dieses Admin-Panels werde ich es jetzt dort platzieren. Also werde ich stattdessen Anchor Tech machen. Dann werde ich es schließen. In das Anker-Tag werde ich das Bild mit der Quelle einfügen. Also Logo Math O Logo. Jetzt werde ich es schließen. Du kannst es dort sehen. Natürlich werden wir auch ihre maximale Breite von, ich weiß nicht, 100 Pixeln festlegen. Das ist in Ordnung. Dann werden wir dort mit der Einrichtung weiterer Klassen weitermachen. Dort werden wir also die Flagge und die Gegenstände in die Mitte stellen. Also zentrieren wir es und machen auch HRF auf einer Homepage, also Schrägstrich ON Also werden wir jetzt die Farben aktualisieren. Lass es uns zuerst bis unten machen. Jetzt nehmen wir etwas 400-500, vielleicht 600. Es sieht ein bisschen besser aus. Dann behalten wir etwas Schatten bei zwei Dateien, das ist in Ordnung. Wir werden ihn als festen Wert verwenden, bei Null stehen, den Z-Index erhöhen und eine gewisse Deckkraft einstellen Also lass uns 95 machen. Lassen Sie uns dort natürlich auch die Breite so auf voll setzen . Lassen Sie uns nun festlegen, dass es eine maximale Breite gibt. Ich verwende 1.400 Pixel. Lass es uns zentrieren. Das ist großartig. Und warte. Ich werde einfach überprüfen, wie es aussieht. Okay. Ja, da müssen wir den Hintergrund auf Grün löschen. Perfekt. Und wir können weitermachen. Wir haben also das Logo. Wir haben die Knöpfe, und wir werden sie auf Home und Kontakt umstellen. Dadurch erhalten wir natürlich nur den leeren Schrägstrich, und das bringt uns zu einer Kontaktseite, die wir direkt nach der Startseite erstellen Im Moment sollte es okay sein. Gehen wir zur Homepage. 19. Zuhause: Homepage, wir werden wieder nicht nur React importieren, sondern auch Effect und Use State verwenden, dann Excils, dann importieren wir das Logo, Set und Qt-PNG Dann importieren wir wieder das Restaurantbild, assets restaurant one dot BNG, dann erstellen wir zwei Statusvariablen Also zuerst wird es Essen sein, Essen im Set. Also werden die Elemente aus unserer Datenbank in den Status gesetzt und der Standardwert ist ein leeres Array. Dann stellen wir das Laden ein, legen das Laden fest, der Status ist standardmäßig falsch. Jetzt wird es den Nutzungseffekt geben. Dort werden wir das Laden auf True setzen. Wir werden Exiles machen, da holen wir uns eine URL, also HTTP, Local Host 3.000 Food Und wenn du dich erinnerst, wenn wir das hier eingestellt oder dem Postboten geschickt haben, haben wir alle Lebensmittel erhalten, und genau das passiert dort Wir werden alle Lebensmittel erhalten und sie unseren Kunden auf unserer Homepage zeigen Dann würde die Antwort also „Essen“, Antwort Punktdaten und „Ladeverluste einstellen“ lauten. Im Falle eines Problems werden wir einen solchen Fehler abfangen und den Fehler eindämmen und den Ladevorgang ebenfalls auf False setzen. Und wieder werden wir es einmal rendern. Das sollte in Ordnung sein. Nun zum Styling der Homepage, lassen Sie mich es dort platzieren. der Haupt-Div werden wir zunächst sagen, In der Haupt-Div werden wir zunächst sagen, dass es sich um eine Einbettung handeln sollte , die wir mit einer maximalen Breite von 1.400 Pixeln, der Mitte und einem gewissen Rand von oben haben wollen , die wir mit einer maximalen Breite von 1.400 Pixeln, der Mitte und einem gewissen Rand von oben Fügen wir ein weiteres Div hinzu, das zwei Bilder aufnehmen wird. Und der erste wird mit dem Logo und der zweite mit dem Restaurantbild sein. Also wird es zuerst eine mit der Quelle des Logos geben, dann die zweite mit der Quelle des Restaurants. Nett. Lassen Sie uns jetzt etwas Styling hinzufügen. Also füge ich für den ersten Teil etwas Abgerundetes hinzu, ich füge die Höhe zur vollen Höhe und das Objekt zur Deckung hinzu. Für den zweiten werde ich dasselbe hinzufügen. Und damit es schön dargestellt wird, werden wir dieses Rasterlayout erstellen. Standardmäßig nimmt es auf Mobiltelefonen die volle Breite ein, was ein Raster ist Es wird also nur eine Spalte haben, was völlig in Ordnung ist Auf einem kleineren Bildschirm und höher können wir auch die Rasterspalten und einen gewissen Abstand dazwischen festlegen. Wenn wir es jetzt speichern, haben wir es so schön nebeneinander. Und das ist etwas, was wir wollen, und das ist auch in Ordnung für dieses Div. Also können wir weitermachen. Im nächsten Div werden wir es als eine Art Styling-Element haben. Also werden wir in H one Mittagsspezialitäten anbieten, weil unser Restaurant jeden Tag neue Mittagsspezialitäten verkaufen oder anbieten wird jeden Tag neue Mittagsspezialitäten verkaufen oder anbieten Und natürlich können Sie diese Mittagsspezialitäten auch über einen Stripe-Checkout kaufen. Anschließend erhalten Sie eine Lieferung an Ihre Adresse, Anschließend erhalten Sie eine Lieferung an die Sie in Ihrem Stripe ausfüllen Aber auch, wenn sich die Speisekarte täglich ändert, ist es gut, dieses Admin-Panel zu haben, in dem die Mitarbeiter die Lebensmittel hinzufügen, bearbeiten oder entfernen, und dann klickt jeder, der das Restaurant besuchen möchte , einfach auf Kontakt und er hat dort die Adresse des Restaurants. Lassen Sie uns das Styling hinzufügen. Also das wird oben rechts abgerundet, groß, unten links abgerundet, groß. Hintergrund wird von Grün 400 zu Grün 600 nach links geneigt. Lass es uns versuchen. Und da wird es einen gewissen Spielraum geben. Jetzt werde ich eine gewisse Höhe festlegen und du wirst sehen, was passieren wird. Also dort auf unserer Seite, wenn ich das richtig codiere, wirst du das Styling-Element sehen, das ich gerade bearbeite. Dies wird ein gewisser Unterschied zwischen den Bildern und zwischen unseren tatsächlichen Lebensmitteln Und lassen Sie uns mit dem Styling weitermachen. Jetzt werden wir auch das Flexbox-Layout hinzufügen. Wir werden die Elemente vertikal zentrieren und auch den Start begründen Also lassen wir die Elemente am Anfang und dann einen senkrechten Rand, für die Trennlinie und für die Überschrift im Inneren reicht, wir werden etwas mehr Text hinzufügen Auch hier ein gewisser vertikaler Rand. P für beide, Abstand nach links, und wir setzen den Text auf Weiß Jetzt der interessante Teil, wo ist unser Essen? Also unser Essen wird irgendwo da drüben sein , wie du auf der Seite sehen kannst. Aber zuerst werden wir eine Komponente mit einer Lebensmittelkarte erstellen , auf der unsere Lebensmittel tatsächlich aufbewahrt werden , und wir werden ein Layout erstellen , das wir dann auf unserer Homepage wiederverwenden werden. 20. Lebensmittelkartenkomponente: in unserem Komponentenordner Lassen Sie uns in unserem Komponentenordner eine neue Datei erstellen, und das wird food card.j6 sein, und eine weitere wird food single card.j6 sein Die Foodcard wird ziemlich einfach sein. Fangen wir also dort an. Wir werden einfach das Essen importieren oder, weißt du, es reicht sogar, es einfach dort abzulegen. Essen auf einer Karte, aber wir brauchen eine Vorlage, speichern Sie sie. Dort werden wir einfach Food Single Card machen. Es wird importiert. Sie können die Reaktion löschen. Und was dort passieren wird, ist, dass wir das Essen als Parameter einfügen werden . Und dann werden wir in diesem Div dieses Essen kartografieren. Also machen wir eine Food Gut Map Item und legen dort die Lebensmittel-Einzelkarte ein. Jetzt speichern wir es als Fuß-Einzelkarte, wir werden auch einen Schlüssel mit M-Punkt-ID und Food Item hinzufügen. Speichern Sie es. Jetzt werden wir dort etwas Styling hinzufügen, sodass es ein Rasterlayout sein wird. Im Grunde das, was wir dort an den Rasterspalten machen wollen. Auf dem mobilen Bildschirm wird es eine Spalte geben. Auf einem kleineren Bildschirm werden es zwei Spalten sein, auf einem größeren Bildschirm werden es drei Spalten sein. Auf dem Excel-Bildschirm werden es vier Spalten sein. Und das ist es. Vielleicht müssen wir auch die maximale Breite von 1.400 Pixeln angeben, weil wir das für unsere Seite verwenden Also muss ich es nicht einmal sehen. Ich weiß es, weil ich meiner Seite eine maximale Breite von 1.400 Pixeln geben möchte meiner Seite eine maximale Breite von 1.400 Pixeln Also mische ich dann auch O, um es zu zentrieren. Aber ich muss es natürlich nicht einmal sehen, um diese Farbklassen zu definieren Dann gehen wir zu Food Single Card. Sie können Sural gedrückt halten und darauf klicken, und wir müssen dort etwas programmieren Um die Ausgabe vorher zu sehen, gehen wir zur Homepage, und dort werden wir die Lebensmittelkarte importieren Und dort wird es importiert und der Eingabeparameter ist foot. Auf unserer Seite können Sie auch sehen, dass wir dort den Fuß als einzelnes Auto angezeigt haben , also ist es in Ordnung. Fangen wir mit den Importen an. Also müssen wir zuerst den Nutzungsstatus importieren. Dann werden wir die Icons importieren. Wir benötigen also ein Kartensymbol, Minussymbol und ein Plussymbol von React Icons BI. Wir können dort anfangen. Also fügen wir zuerst einen Rand hinzu. Wir machen es abgerundet. Wir machen Overflow Iden, damit nichts aus unserer Karte rauskommt Lass uns etwas Shadow machen. Wenn wir den Mauszeiger drüber bewegen, werden wir den Schatten vergrößern. Was sonst? Mm, vielleicht etwas Spielraum und auch etwas Hintergrund. Also lass uns für unsere Karte den Hintergrund mit Farbverlauf nach unten rechts verwenden und etwas wirklich Anständiges. Also von Grün 50 auf Grün 100. Jetzt werden wir es speichern und anfangen den Inhalt hinzuzufügen, damit wir das Styling besser sehen können. Lass uns das Bild hinzufügen. Dort müssen wir die Quelle des Bildes angeben, und es wird ein Food-Dot-Bild angezeigt. Dann werden wir auch alles haben, damit das ganz einfach Food Dot NAM wird. Und das war's für das Bild, würde ich sagen. Wenn wir es jetzt speichern, schlägt es fehl weil wir dort den Input des Essens benötigen. Also leg es jetzt hin und speichere es. Und Sie können sehen, dass wir dort das Essen haben. Das Bild ist geladen. Also lass uns weitermachen. Und ich denke, ich werde es so bewegen. Lassen Sie uns nun etwas Styling hinzufügen. Also füge ich das Objekt zum Abdecken hinzu, Gewicht auf volle Höhe, und auf einem größeren Bildschirm werde ich die Höhe erhöhen. Okay. Okay, dann füge ich dort ein Tauchbecken mit etwas Bettwäsche hinzu. Innerhalb des Diffs werde ich ein weiteres Div hinzufügen. Und in diesen weiteren Diff werden wir eine Überschrift mit einem Namen einfügen. Also guter Punktname. Speichern Sie es. Dort werden wir natürlich zusätzliches Styling hinzufügen, und das ist für die Karte. Also werden wir das Flexbox-Layout hinzufügen und dazwischen rechtfertigen. Wir haben also einen Abstand zwischen den Elementen, Elementen, der Grundlinie und einen gewissen Rand nach unten Neben dem Namen des Essens werden wir auch den Preis haben. Innerhalb des Ausgaben-Tags werden wir das machen. Und es gibt ein 1-Dollar-Zeichen, weil es in Dollar sein wird, Preis für Lebensmittel in Cent, und als sinngemäß, nehmen wir diese 2$ Also werde ich 102 machen und zwei reparieren. Und natürlich werde ich ein Styling für den Namen des Essens hinzufügen. Das wird nur Text Excel auf einem größeren Text zu Excel, Schrift Bolt und Text Grau 800 sein. Großartig. Für den Spen-Text etwas Ähnliches, Text groß auf einem größeren Text Excel, Schriftart Semibot und wir können Text in grün 600 ändern Jetzt haben wir dort den Preis des Artikels Namen des Artikels, und wir werden weitermachen Also werden wir dort ein weiteres Div mit einem Klassennamen, einem Flexbox-Layout und einer Rechtfertigung zwischen den Elementen zur Mitte hinzufügen Flexbox-Layout und einer Rechtfertigung zwischen den Elementen zur Mitte Und in diesem Div werden wir die Funktionen zum Hinzufügen zur Karte haben Lassen Sie uns eigentlich nicht justify between verwenden, sondern justify end, denn das sollte am Ende stehen. Vielleicht ändern wir es. Lassen Sie uns zunächst sehen, was wir tun müssen, ist, die Schaltfläche zum Hinzufügen des Artikels zu einer Karte hinzuzufügen, auf der der Kunde das Produkt kaufen kann. Fangen wir also zuerst mit dem Button an. Bevor wir die Funktionen zu einem Kartenmechanismus hinzufügen, setzen wir dort eine konstante Anzahl auf eins. Oder setzen wir es vorerst auf Null und wir werden es verwenden. Es wird dann einen Mechanismus geben, Gegenstände zu einer Karte hinzufügt und die Menge ändert, aber diesen Mechanismus haben wir noch nicht. Also werden wir beim Einstellen der Benutzeroberfläche die Menge auf Null setzen und sie dann manuell auf eins ändern, sodass wir sehen können, dass die Benutzeroberfläche das Plus- und Minuszeichen auslöst. Dann werden wir die Funktionalität für die Karte einstellen . Lass uns das auch ändern. Es wird eine Lücke X zwei geben, Position absolut, von unten auf Null und von rechts auf Null. Stellen wir sicher, dass wir ihre Position relativ haben, ich sehe sie nicht, also setzen wir sie dort ein. Relativ. Jetzt können wir mit dieser Taste da runter gehen. Wir werden das Symbol hinzufügen, also ich füge den Klassennamen-Text Excel hinzu und wir werden es dort schließen. Jetzt können wir das Styling für die Schaltfläche hinzufügen. Für diese Schaltfläche fügen wir also Carl Bass und starten dort den Hintergrundverlauf nach rechts von Grün 500 bis Grün 700. Lass es uns speichern. Eigentlich können wir den Button dort sehen. Wenn wir mit der Maus darüber fahren, wird es von Grün 702 Grün 900 sein Grün 702 Grün 900 Der Text wird weiß sein und die Schrift wird beides sein Dann wird es vertikale Polsterung geben, eine horizontale Polsterung, oben rechts auf groß abgerundet Wir erstellen also ein interessantes Styling und runden es nach hinten oder unten links, Und das wird es vorerst für den Button sein. Wir werden uns dorthin bewegen und oberhalb der Schaltfläche einer Menge suchen, und wenn sie größer als Null ist, falls ja, werden wir ihre leeren Fragmente machen und wenn sie größer als Null ist, falls ja, werden wir ihre leeren Fragmente und diesen Code rendern. Ändern wir die Menge auf eins. Lass es uns speichern. Jetzt ist die Menge größer als Null und wir können sie codieren. Also haben wir dort eine Schaltfläche und dort auch ein Ausgaben-Tag mit der angezeigten Menge. Für den Spentag machen wir einfach ein bisschen Streicheln, etwas Hintergrund und Text auf Black 12 Bolt, Lass uns jetzt die Menge überprüfen. Es ist Nummer eins. Sie können jetzt auf der Seite sehen, wie es gerendert wird. Und lass uns mit dem Button weitermachen. Auf der Schaltfläche steht also tatsächlich Minus mit Klassenname, Text Excel. Lassen Sie uns den Text schließen und für die Schaltfläche selbst. Im Moment gibt es keine Klickfunktion, wir fügen nur das Styling hinzu und das Styling wird bei 500 im Hintergrund angezeigt. Wenn wir den Mauszeiger darüber bewegen, wird Hintergrund 700 Text zu Weiß angezeigt, für fett gedruckte Bettwäsche Was sonst? Oben links abgerundet, groß. Gehen wir dort in dieses Div und erhöhen den Rand für die unteren vier auf, sagen wir, 12. Schauen Sie sich jetzt die Seite an und so sieht unsere Lebensmittelkarte aus. Gehen wir zum VS-Code und ändern Sie die Menge auf Null. Und so würde es aussehen, wenn wir keinen Artikel auf unserer Karte hätten. 21. Warenkorb-Kontext: Datei-Explorer, und dort werden wir einen neuen Ordner in unserem Frontend erstellen. Klicken Sie mit der rechten Maustaste darauf, Neuer Ordner, nennen Sie ihn Context. Dort im Kontext erstellen wir den Kartenkontext, machen Jasix und dann gehen wir zu den Funktionen für unsere Dort im Kartenkontext werden wir mit dem Import beginnen Also importiere, reagiere, erstelle Kontext und verwende dann Kontext. Lassen Sie uns das eigentlich von React aus tun dann geben Sie den Effekt an und verwenden ihn. Dann erstellen wir einen neuen Kontext für die Karte, also einen konstanten Kartenkontext. Das wird Kontext schaffen. Dann werden wir einen Hook erstellen , um den Kartenkontext zu verwenden Exportieren Sie also die Karte für den konstanten Gebrauch. Verwenden Sie auf diese Weise den Kontext von Kontext zu Kartenkontext. Dann werden wir eine Provider-Komponente erstellen, die den Status und die Funktionalität der Karte kapselt und die Funktionalität der Karte So können wir ihren Kartenanbieter exportieren. Input werden die Kinder sein. Und dort werden wir damit beginnen den Status für die Kartenelemente festzulegen, und wir werden ihn aus dem lokalen Speicher initialisieren Konstante Kartenelemente setzen also Kartenelemente. Sie geben an und es wird konstante lokale Daten geben und wir werden den lokalen Speicher für die Kartenelemente überprüfen , falls es welche gibt. Dann geben wir lokale Daten mit JSON-Pars zurück, also übergeben wir das gespeicherte JSON an die lokalen Daten oder wir geben ein leeres Array zurück Lassen Sie uns die lokalen Daten oder das leere Array analysieren. Was jetzt noch? Wir werden einen Nutzungseffekt erzeugen. Effekt ist also so, dass der lokale Speicher aktualisiert wird, wenn sich die Kartenelemente ändern. Falls wir also bei unseren Artikeln auf Plus klicken, wird dies zu einer Karte hinzugefügt. Effekt verwenden. Dort werde ich Artikel aus dem lokalen Speicher von Objekt zu Kartenobjekt zusammenstellen. Jason stringifiziert Kartenartikel. Und dort werden wir das Array mit Kartenelementen platzieren. Als Nächstes erstellen wir die Funktionen zum Hinzufügen des Artikels zur Karte. Das ständige Hinzufügen zur Karteneingabe wird also Objekt sein, und wir müssen dort Kartenelemente einstellen Elemente in der Vorschau anzeigen, konstantes Objekt auf der Karte. Jetzt werden wir die Artikel auf einer Karte finden, also Artikel überprüfen, nicht finden. Ihre ID entspricht der Artikel-ID. Und wenn der Artikel in der Karte ist, wird es wahr sein. Wir werden die Menge erhöhen. Senden Sie also die Bewertungsartikel mit der Punktkarte zurück. Und da wollen wir es ein bisschen verschieben, e Punkt-ID, m Punkt-ID. Ich quantifiziere, und jetzt addieren wir also Menge plus ein Inkrement nach dem anderen Wir können es dort schließen, und wir werden auch noch etwas anderes hinzufügen. Wenn der Artikel also nicht existiert, werden wir das tun. Andernfalls, wenn der Artikel nicht existiert, werden wir die Artikel mit der ersten Menge zurücksenden . Jetzt benötigen wir eine weitere Funktion, und es wird eine Entfernungsfunktion sein. Also ständig von der Karte entfernen. Dort geben wir die ID ein. Und drinnen werden wir die Kartengegenstände so platzieren, dass sie Gegenstände mitnehmen. Dann geben wir es zurück und ordnen den Artikel zu. Und wir müssen dort Punkt ID, ID eingeben. Artikelmenge bedeutet Artikelmenge minus eins. Wenn dies aufgerufen wird, wird der Artikel also von der Karte entfernt. Dort werden wir auch den Filter hinzufügen. Dadurch werden also die Artikel mit null oder negativer Menge herausgefiltert . Filtern Sie also die Artikelmenge über Null. Dann fügen wir die nächste Funktion hinzu, die Anzahl der Kartenartikel verringert werden kann. Es wird also ständig die Anzahl der Kartenartikel verringern. Wir werden den Ausweis dorthin schicken. Dort werden wir wieder die Setkartenartikel verwenden . Wir werden die Vorschauartikel erneut zurücksenden und dort den Artikel zuordnen, die ID überprüfen und feststellen, dass die Artikelmenge über eins liegt. Und dort werden wir die Menge verringern, falls ja, also Artikel die Menge minus eins, und da sagen wir, dass wir den Artikel unverändert zurücksenden werden , falls es sich nicht um den Artikel handelt, den wir anpassen. Also machen wir dort mit auch filtern weiter. Wir werden den Artikel filtern und die Artikel mit der Menge Null herausfiltern. Also wenn die Artikelmenge über Null liegt. Richtig, das ist richtig. Wir können mit der Clean Card-Funktion weitermachen. Also lösche die Karte und dort werden wir die Kartenelemente auf ein leeres Array setzen. LocalStorage entfernt keine Kartenelemente. Auf diese Weise entfernen wir die Kartenelemente aus dem lokalen Speicher und die Funktion zum Löschen der Karten ist abgeschlossen Als letztes werden wir den Anbieter mit dem Kartenkontextwert allen unseren Kindern zur Verfügung stellen . Geben Sie also den Kartenkontext-Anbieter und den Wert wie folgt zurück . Kartenelemente, zur Karte hinzufügen, von der Karte entfernen, Artikelmenge verringern und Karte löschen. Lass es uns schließen. Und da machen wir die Kinder. Jetzt speichern wir es. Was wir jetzt tun müssen, ist zu main.j6 zu gehen Dort werden wir unseren Antrag in diesen Kartenanbieter einbinden Dort werden wir Kartenanbieter machen. Es wird dorthin importiert. Nimm jetzt die App. Eigentlich gefällt uns das, es sollte jetzt so aussehen, wir haben die App im Kartenanbieter verpackt und dann im Snackbar-Anbieter und im Browser-Router. Jetzt speichern wir es. Wir kehren zu Food Single Card zurück. Jetzt können wir endlich den Kartenkontext importieren. Was wir tun werden, ist, dass wir Use card from actual context, card context importieren from actual context . Speichern Sie es und wir können beginnen. Also, zuerst machen wir, dass wir ein konstantes Element auf der Karte machen. Wir werden die Kartenelemente so verwenden, wie wir jetzt auf Suchen klicken können und wir werden die Punkt-ID des Artikels finden. Mit Lebensmittelpunkt-ID. Dann haben wir da die Menge. Also ändern wir einfach die Null in den Artikel auf der Karte. Fragezeichen, Artikel auf der Karte, Menge. Andernfalls Null. Was dort passiert , ist, dass wir die Menge des aktuellen Artikels auf der Karte bestimmen . Und natürlich müssen wir die Kartenoperationen aus dem Kartenkontext laden , also const, zur Karte hinzufügen, auch aus Karte entfernen und Kartenelemente sind gleich Benutzerkarte Jetzt sollte es in Ordnung sein, es zu speichern. Wir haben also die aktuellen Lebensmittel der Karte, die wir überprüfen. Auch die Menge des aktuellen Artikels auf der Karte, und wir können zu neuen Funktionen übergehen, werden wir in unserer Lebensmittel-Singlecard.j6 definieren Lassen Sie uns also mit dieser Funktion die konstante Bearbeitung von zwei Karten beginnen , wir werden uns um das Hinzufügen Dort werden wir einfach zur Karte hinzufügen und unser Essen dorthin schicken. Ähnlich wie beim Entfernen von Lebensmitteln von der Karte werden wir es handhaben, von der Karte nehmen und von der Karte entfernen. Dort fügen wir einfach die Lebensmittel-ID ein und das sollte es sein. Jetzt sollte es für uns funktionieren, wird es aber nicht. Und das wird nicht funktionieren, weil wir die Karte nicht haben 22. Warenkorb-Symbol: Wir werden es jetzt bearbeiten. Was wir tun müssen, ist, dass wir uns mit unseren Komponenten befassen. Wir werden eine neue Datei erstellen, Karte Pon J sechs. Dort werden wir nun die Implementierung durchführen und zuerst die Benutzerkarte aus dem Kontext verwenden , dann das Symbol der B-Karte aus dem Reaktionssymbol. Erstellen Sie eine Konstante für die Kartenelemente , die wir von useCard laden , dann werden wir die Gesamtqualität bestimmen, da wir sie als kleine Zahl auf unserem Symbol anzeigen werden als kleine Zahl auf unserem Symbol Also Gesamtmenge. Es werden Kartenartikel sein, um den Gesamtbetrag des Artikels zu reduzieren, Summe plus Artikelmenge, Null. Dadurch wird die Anzahl der Artikel auf unserer Karte berechnet die Anzahl der Artikel auf unserer Karte und die Anzahl wird angezeigt. Im Gegenzug können wir DIFF verwenden, wir machen das Relative. Dann werden wir vorerst das Bicard-Symbol mit einem Klassennamen für textfreies Excel und weißen Texten verwenden vorerst das Bicard-Symbol mit einem Klassennamen für textfreies Excel und weißen Texten Wir werden es unten schließen, wir werden die Gesamtmenge schulden Und falls es wahr ist, wird es über Null liegen. Falls es also wahr sein sollte , dass die Menge über Null liegt, zeigen wir die Zahl an. Also werden wir die Spenta verwenden , wir werden die Gesamtmenge anzeigen und wir werden ein Styling hinzufügen Das wird also absolut sein. Das wird oben minus zwei sein. Der rote Hintergrund wird 500 sein. Der Text ist vorerst weiß und rundum abgerundet, da es sich um einen Kreis mit kleinerem Text und etwas Abstand handeln wird . Wir haben dieses Kartensymbol nicht hinzugefügt, sondern tatsächlich zur Navigationsleiste. Gehen wir also zur Navbar Dort fügen wir einen Link zur Karte hinzu und es wird das Kartensymbol angezeigt Klicken Sie auf Enter oder drücken Sie die Eingabetaste und es wird dort importiert Jetzt kannst du es auf unserer Seite sehen, ich werde die Seite öffnen. Während ich auf Pluspunkte klicke, passiert nichts. Mal sehen, was falsch ist. Und natürlich ist vielleicht sogar nichts falsch, weil zum Testen die onClick-Funktionen vorerst nicht hinzugefügt Also, natürlich wird es OnClick geben. Für das Minus wird der Griff Karte auf Plus entfernt, es wird auf den Klickgriff geklickt und zur Karte hinzugefügt. Lass es uns speichern. Jetzt können wir es testen. Kurzform ist nicht definiert. Das Problem ist also in Zeile 19 zu finden. Vielleicht liegt es an diesem Punkt. Lass es uns speichern. Jetzt werden wir einfach die Seite aktualisieren. Und es sieht so aus, als ob es funktioniert. einzige Sache ist, dass wir schon etwas in unserer Karte haben und es so aussieht, als ob es keine Rückseite gibt, die genau den Code enthält, sondern wir haben gerade ein genau den Code enthält, Objekt im Kartenkontext gespeichert, und da wir diese Funktion zum Löschen von Karten derzeit nicht direkt verwenden , können wir sie nicht löschen. Wenn wir es nur für den Moment löschen wollen, also haben wir es gelöscht, können wir einfach Karte löschen, die Schnell-Konstante machen, die Karte löschen. Leeren Sie Ihren Einkaufswagen. Benutze es jetzt, du brauchst mir nicht einmal zu folgen. Ich werde es einfach löschen. Wenn du jetzt darauf klickst, wird es gelöscht. Jetzt werden wir es einfach wieder ändern. Also handhaben Sie es bis zur Karte. Wir löschen das auf der Karte, löschen es von dort und speichern es. Wenn wir jetzt zu unserer Seite zurückkehren, werden wir sie so sauber haben und versuchen, Artikel hinzuzufügen, also zählt es, und wir können sie auch von der Karte entfernen. Bevor wir nun zur Codierung einer Kartenkomponente übergehen, gehen wir seitenweise darauf ein. Wir werden eine neue Datei erstellen und contact.j6 ausführen. Dann machen wir Futer JSix, lass uns den Export dorthin machen. Fußzeile und Kontakt. Fügen wir sie nun zu unserer App hinzu. Also, in Abid J 6 unten in dieser ersten wiederkehrenden App, werden wir unter den Routen, Fußzeile machen, die Eingabetaste drücken, damit sie importiert wird, und dann werden wir eine Route dorthin kopieren und den Kontakt hinzufügen Außerdem wird die URL „Kontakt“ lauten. Wir werden es speichern. 23. Fußzeile: Jetzt codieren wir zuerst die Fußzeile und dann eine Kontaktkomponente Da gehen wir also zur Fußzeile. Wir werden dort einige Icons verwenden. Von React Icons AI. Und wir hätten gerne Instagram, vielleicht auch Facebook. Dann können wir anfangen. Es wird also keine Funktionen geben wie die Fußzeile, es wird nur ein paar Divs Also werden wir einige Haupt-Div hinzufügen. Dort werden wir ein PdingPdding von oben hinzufügen. Dort werden wir ein weiteres Div hinzufügen. Dann fügen wir wieder etwas Pedding hinzu, zentrieren es auf einem kleineren Bildschirm und oben ändern wir dort das Padding oder das horizontale Padding, größeren Bildschirm machen wir es wieder, damit es besser reagiert Wir werden dort etwas mit mischen. Und bei diesem Mix mit, deshalb zentrieren wir ihn auch dort mit Mix Auto Dann würde ich dort unser Logo hinzufügen. Mein Logo für mein Unternehmen ist also Quick Deli. Ich würde dort etwas Styling hinzufügen, also Text zu Schwarz, Schrift zu Fett und Text zu Excel. Und dann würde ich die Divs machen. Und bei diesen Tauchgängen bleibe ich, helfe, Colum dann als Partner, dann begleite ich uns für etwas Personalmanagement und Und dann füge ich auch die Icons hinzu und so weiter. Ich werde die Seite tatsächlich ein wenig verschieben , damit Sie sie besser sehen können, und ich werde sie dorthin verschieben. Ich werde nach unten scrollen, du kannst dort schon das Logo sehen. Lass uns jetzt weitermachen. Im ersten Abschnitt fügen wir einen Absatz mit Hilfe und eine geänderte Liste mit einem Listenelement zur Unterstützung oder einem Listenelement mit Fragen und Antworten Als Hilfe werden wir den Text halbbolzen und schwarz schreiben. Zur Unterstützung machen wir für die ungeordnete Liste den Rand nach oben, Rand nach oben, gewissen vertikalen Abstand zwischen den Elementen oder Listenelementen Und lassen Sie uns nicht Schwarz, sondern Text in Grau umwandeln. Nun zu den Listenelementen Wir werden sie tatsächlich in die Anchor-Technologie übernehmen, und das kann uns dann und das kann uns dann zu einer anderen Seite führen , die Sie dort einrichten werden. Lassen Sie mich diesen Anker sogar dort kopieren. Und jetzt nehmen wir diesen Voltif. Wir werden es auch für die Partner und auch für die Personalabteilung kopieren die Partner und auch für die Personalabteilung Schließ dich uns an und das wird es sein. Da werden wir also Partner finden und wir können unsere Silberpartner und unsere Platin-Partner uns anschließen. Es wird also einen Link zur Personalabteilung und zu Stellenangeboten geben. Und das wird tatsächlich dort zusätzliche Div geben. Und in diesem Div werden wir dieses Logo mit den Links haben . Jetzt muss ich es ein bisschen stylen. Also lass es mich jetzt machen , es wird so sein. Ja, das ist richtig Okay. Und dieses DIF wird den Klassennamen eines Grids haben, weil wir ein Grid-Layout verwenden werden, und Grid funktioniert auch auf mittleren Bildschirmen und mehr, es wird Grid-ChromSF haben, einen und Grid funktioniert auch auf mittleren Bildschirmen und mehr, es wird Grid-ChromSF haben vertikalen Abstand, den wir 12 setzen können, und einen horizontalen Abstand , den wir auch auf 12 setzen können Jetzt lass uns speichern Sieht so aus, als ob es in Ordnung ist. Jetzt unten können wir mit den Symbolen beginnen. Also da werde ich etwas Spielraum nach oben legen. Also lass uns 20 nehmen. Ich werde dort eine ungeordnete Liste erstellen , die Listenelemente mit Ankertext Und in diesen Anker-Tags werde ich die KI füllen. Zuerst Instagram. Der zweite wird für Facebook sein. KI scheitert also bei Facebook. Dann wird Anchor Tech einige HRF haben, die Sie einstellen können, aber ich werde dort vorerst nichts einstellen Außerdem werde ich der ungeordneten Liste eine Klasse hinzufügen. Also Flexbox-Layout, Gap auf fünf, Text auf Weiß. Was sonst? Schreiben Sie drei, Excel, Rand nach unten und setzen Sie ihn auf dem mittleren Bildschirm und darüber zurück. Text kann nicht weiß sein. Sie benötigen dann Text, was wir auch tun würden, um einen weiteren hinzuzufügen oder eine Liste hinzuzufügen, wo wir diese Listenelemente einfach kopieren können, aber wir werden diese Symbole löschen und dort einige Datenschutzbestimmungen und Nutzungsbedingungen hinzufügen. Etwas Styling, Flachs, Gap Six, Text grau. Nun, lassen wir es schwarz wie bei den Icons. Und all das werden wir auch auf kleinerem Bildschirm und höher, Flachsbuch-Layout, Objekte in der Mitte und kleinerem Bildschirm und höher betrachten Also vertikal oder sorry, horizontaler Abstand bis sechs Speichern Sie es jetzt. Schau mal, wie es aussieht. Ich finde, es sieht okay aus. Was wir vielleicht tun können , ist , dass wir es bei der Rechtfertigung dazwischen tun. Das wird also für die Fußzeile sein. 24. Kontakt: Die Kontaktkomponente, wir werden das Restaurantbild erneut importieren. Also werde ich das Asset Restaurant One Dot PNG verwenden . Ich habe es da. Also bei der Hauptklasse werden wir das maximale Gewicht von 1.400 Pixeln beibehalten maximale Gewicht von 1.400 Pixeln Außerdem werden wir es zentrieren. Wir werden oben etwas Rand hinzufügen und wir werden etwas Bettwäsche hinzufügen. Dann werden wir drinnen ein Div haben, das Klassennamen mit einem Rasterlayout haben wird. Auf dem mittleren Bildschirm und höher werden wir die Spalten zwei, zwei und etwas Abstand einstellen . Im Inneren werden wir ein erstes Div haben , das die Kontaktinformationen enthält, Telefon, Name und E-Mail, und dann wird die Adresse daneben stehen . Lassen Sie uns das also auch zentrieren. Dort werden wir die Überschrift haben. Kontaktiere uns. Mehr Stil dazu. Also Text nach Excel, Schrift fett und Rand unten nach vier. Jetzt kannst du es nicht sehen. Was wir tun müssen, ist auf unserer Seite auf Kontakt zu klicken. Dadurch gelangen wir auf die Seite. Jetzt kannst du es wieder sehen. Und unten, kontaktieren Sie uns, wir werden ein Absatz-Tag haben. In diesem Absatz-Tag werden wir den Kontakt bei Quigdali haben Komm. Und wir werden dort ein Spen-Etikett haben, dem E-Mail steht. Fügen wir zuerst dem Absatz-Tag einen Stil hinzu. Also verwenden wir den Text Groß, etwas Rand unten. Für den Spenteg werden wir auch etwas Styling hinzufügen, also Telefon Semibolt und ich denke, das wird es sein Jetzt können wir es kopieren, weil wir die E-Mail zeigen werden. Dann zeigen wir das Telefon und den Namen des Restaurants. Also zuerst E-Mail, dann gibt es ein Telefon und dann gibt es einen Namen. Also der Name wird Quick Deli sein. Stro, dann haben wir ihre Telefonnummer. So wie das hier. Was sonst? Andernfalls fügen wir unter diesem Div mit diesen ersten Informationen ein weiteres Div hinzu, keine leeren Fragmente, ein weiteres Div. Und dieses Div wird die Adresse enthalten. Also werden wir das mit Überschrift zwei machen. Warte. Adresse und darunter, wir werden Paragraphen haben, und es wird Absatz oder Straße, Stadt und Land sein. Lassen Sie uns dort also eine Adresse verwenden. Ich mache 123, Berliner Straße, dann PLZ, Berlin und Deutschland. Dann würde ich diesen Mix Auto zentrieren. Für die zweite Überschrift lasse ich etwas größeren Text übrig, lasse ich etwas größeren Text übrig fett zu machen und mit dem Ende zusammenzufügen. Für die Straße werde ich den Text zu groß und den Rand zum unteren Rand hinzufügen . Dort ist es genauso. Aber ohne Land, ohne Spielraum. Also einfach so einen großen Text. Und das letzte Wort, das wir hinzufügen werden, wird das Bild sein. Aber für ein besseres Styling fügen wir das alles tatsächlich zu einem anderen Div hinzu. Wir werden es dort in das Div einfügen. Etwas Schatten rundet es ab und etwas Tätscheln. Und dort in diesem Graben, aber außerhalb dieses, werden wir das Bild hinzufügen Lass es mich ein bisschen besser stylen. Und dieses Bild wird die Quelle des Resta-Laufs haben, oder es wird Esta-Run sein und wir werden einige Klassen hinzufügen, also runden Sie es auf Excel ab, mit dem gesamten Objekt, das Sie abdecken müssen, Rand nach oben, speichern Und jetzt schauen wir auf unserer Seite oder im Kontaktbereich nach. Und ich denke, das ist völlig in Ordnung. Wir haben also die Fußzeile, die wir gerade gemacht haben, den Kontaktbereich. Jetzt gehen wir zurück nach Hause 25. Warenkorb: Und ich denke, wir können gehen und die Karte codieren. Lassen Sie uns sie jetzt erstellen. Also neue Datei card.j6. Lassen Sie uns dort die Vorlage mit dem Export verwenden. Gehe zu Epid J sechs. Dort werden wir die Karte hinzufügen. Also da Karte, Enter, und Pfad ist Karte, speichere es. Gehen Sie zurück zur Kartenkomponente. Also werden wir zuerst einige Dinge importieren. Wir importieren die Benutzerkarte aus dem Kartenkontext. Also noch einmal, Kontext, Kartenkontext. Dann werden wir die Exiles importieren dann wollen wir auch die Symbole importieren Also wieder, wie auf der Homepage oder der Einzelkomponente für Lebensmittel, importieren wir das B-Plus-Symbol und das B-Minus-Symbol Weil wir auch die Möglichkeit haben werden etwas von einer Karte zu entfernen. Dann werden wir dort mit einer Konstante beginnen und dort aus dem Kartenkontext auf die Kartenelemente zugreifen, auch wenn wir die Anzahl der Kartenelemente verringern und der Karte eine Karte hinzufügen. Nett. Dann werden wir eine Display-Meldung in dem Fall anzeigen, dass die Karte leer ist. Wenn die Länge des Kartenelements also Null ist, geben wir ein Div zurück , das besagt, dass Ihre Karte leer ist. Und lassen Sie uns etwas Styling für dieses Div oder für diesen Text hinzufügen , Ihre Karte ist leer. Wir werden Text zu Schwarz, Text drei zu Excel, Text zur Mitte und einen vertikalen Rand hinzufügen . Jetzt kannst du es dort sehen. Deine Karte ist leer. Wir haben es auf der Seite, weil die Karte leer ist. Und wenn du etwas mit einer Plus-Schaltfläche auf der Startseite bearbeiten würdest , wäre es natürlich nicht leer, aber es würde jetzt auch nicht angezeigt werden aber es würde jetzt auch nicht angezeigt , weil wir immer noch nicht über die Funktionalität verfügen. Fangen wir jetzt tatsächlich mit der Benutzeroberfläche an. Da fangen wir also mit dem Mandi an, das etwas Einstreuung, Rand von oben und etwas Mischgewicht haben wird , da wir es gewohnt sind 1.400 Pixel zu pixeln und es mit AMC Auto zu zentrieren Dann haben wir ihre Überschrift, den Einkaufswagen. Wir werden etwas Styling hinzufügen, also Text zu Excel, von Semibolt Text bis Mitte und senkrechtem Rand Im Folgenden werden wir ein Div hinzufügen. Dieses Div wird ein Rasterlayout sein, oder wir verwenden ein Rasterlayout mit zwei Rasterspalten, aber bei mittleren Bildschirmen und höher müssen wir nicht die erste Rasterspalte definieren, müssen wir nicht die erste Rasterspalte definieren da dies auf dem mobilen Bildschirm standardmäßig ist. Und auf einem größeren Bildschirm verwenden wir die dritten Rasterspalten und fügen eine Lücke hinzu. Dort werden wir mit dem Besorgen der Kartenelemente beginnen. Kartenelemente zeichnen sich also durch Karte, Objekt und Index aus. Wir erhalten die Kartenelemente, und für jedes Kartenelement werden wir eine Karte erstellen, auf der wir die zugehörigen Informationen zeigen werden. Fangen wir also mit dem Unterschied an. Lassen Sie uns das auch in diesem Div schließen , wir werden den Schlüsselindex und auch den Klassennamen, den weißen, abgerundeten Grund, groß, etwas Schatten um das Objekt herum, etwas Abstand und die Spalte mit Flexrichtung angeben Lassen Sie uns also das Flexbox-Layout verwenden. Im Div werden wir das Bild des Produkts an die erste Stelle setzen Die Quelle wird also das Item Dot Image sein. Dann wird alles ein M-Punktname sein, und der Klassenname wird auf mittel abgerundet, Rand nach unten, Breite auf volle Höhe auf 64, groß etwas Größeres und Objekt, das abgedeckt werden Rand nach unten, Breite auf volle Höhe auf 64, soll. Jetzt können wir weitermachen, also unter dem Bild. Wir werden seinen Namen haben. Verwenden wir also den Punktnamen. Wir werden etwas Styling hinzufügen. Also Text zu groß, Schrift zum Bolzen und Rand nach unten. Jetzt werden wir es speichern. Wir werden auf unsere Seite gehen. Wir werden nach Hause gehen. Wir werden dort auf klicken. Wir gehen zu Card und können den Artikel dort sehen. Jetzt können wir ihn also tatsächlich richtig stylen. Und jetzt können wir weitermachen. Unter dem Artikelnamen werden wir also Paragraph Tech machen und dort den Preis in Cent angeben. Also machen wir ihren Preis. Wir machen Dollarzeichen, weil mein Preis in Dollar angegeben wird. Dann öffne ich ihre lockigen Zahnspangen. Darin werde ich den Punkt Preis in Cent geteilt durch 100 angeben, weil ich es in Dollar anzeigen möchte und Punkt, um zwei zu korrigieren Also zwei Werte weicher. Und ich werde etwas Styling hinzufügen, also Textmedium und etwas Rand nach unten Jetzt können Sie auf der Seite sehen, dass es den Preis gibt. Jetzt unter dem Preis. Ich werde DIV hinzufügen. Auch hier wurde DIV nicht geöffnet. Ich werde etwas Styling hinzufügen. Ich möchte das Flexbox-Layout verwenden, Elemente zu zentrieren und dazwischen zu positionieren Es gibt also den Abstand zwischen den Elementen, Text zur Mitte und Rand zum Boden. Speichere es. Dort werde ich den ersten Absatz hinzufügen. Im Inneren werde ich Menge und Artikelmenge hinzufügen. Und dann haben wir die Schaltfläche zum Verringern oder Erhöhen der Artikelmenge. Unterhalb der Menge werden wir also eine neue ID erstellen. In diesem Dip werden wir zwei Schaltflächen haben. Es gibt einen, es gibt einen zweiten. Dann wird das Design dieses Unterschieds flexibel sein. Also Flexbox-Layout und Elemente in der Mitte. Auf der ersten Schaltfläche steht das Symbol „Minus kaufen“. Und die zweite Taste wird das Symbol B plus sein. Für das erste Symbol wird es eine N-Click-Funktion geben, die besagt, dass die Anzahl der Kartenelemente, die M-Punkt-ID, verringert wird. Und dann können wir es in der zweiten Zeile oder sogar dort machen. Klassenname dort wird Hintergrund sein, rot, 500 auf Hering, es wird Hintergrund, rot, 700 Text wird weiß sein, Schrift wird fett sein Die abgerundete Polsterung wird also groß sein. Und ich denke, das wird es sein. Für den zweiten Knopf können wir einfach dieses Glas kopieren. Es wird also ein Klick angezeigt, und das bedeutet, dass wir das Objekt unten zur Karte hinzufügen wollen . Wir werden den Klassennamen hinzufügen, den ich gerade kopiert habe, aber wir werden dort die Farbe Rot in Grün ändern. Jetzt können wir es dort sehen. Was wir auch tun werden , ist, dass wir es jetzt, wenn wir es speichern , auf der Seite testen können damit Sie sehen können, dass die Menge steigt oder sinkt. Und da ist es auch auf der Karte. Fahren wir damit fort, dort den Gesamtpreis der Karte hinzuzufügen . Unter diesem Div werden wir also ein neues Div machen. Und dort fügen wir den Klassennamen des Textes in die Mitte und etwas Abstand von oben weil es die Absatztechnik mit dem Gesamtpreis in Dollar enthalten wird . Dort werden wir den Gesamtpreis durch 100 teilen. Also bekommen wir die Dollar statt einem Cent und zwei feste Zwei. Wir erhalten also zwei Werte. Danach, falls es nicht gerundet ist, fügen wir dort Text zu Excel hinzu, und wir müssen einen Gesamtpreis definieren, und zwar oberhalb der Rendite und darunter. konstante Gesamtpreis ist also Kartenartikel punktreduziert werden, ich zähle Artikel, dass wir ihn zählen, also der Preis in Cent multipliziert mit der Artikelmenge und Null. Dadurch wird also der Preis der Artikel auf der Karte berechnet . So wie das. Jetzt können Sie auf unserer Seite sehen, dass der Preis 66€ beträgt. Wenn wir jedoch einen Artikel von einer Karte entfernen, sind es 44 oder 22. Fügen wir eine Schaltfläche hinzu, über die der Checkout abgewickelt werden kann. Dann werden wir mit der Codierung der Handle-Checkout-Funktion fortfahren der Codierung der Handle-Checkout-Funktion und müssen den Stripe implementieren. Zuerst machen wir die Schaltfläche, sodass sie eigentlich immer noch in diesem Div sind, aber unter diesem Absatz werden wir eine Schaltfläche haben, auf der steht , zur Kasse gehen. Es wird eine On-Click-Funktion geben, Checkout abwickelt, die wir noch nicht haben Wir werden es sofort codieren. Klassennamen werden an Bord etwas weißer Text sein, und für mehr Stil müssen wir ihn sehen. Lassen Sie uns jetzt dort eine Funktion ausführen. Tong Handle, schau dir die asynchrone Funktion an. Speichere es. Lassen wir es jetzt leer. Wir werden es in einer Minute codieren. Lassen Sie uns das Button-Styling beenden. Also fügen wir etwas Bettwäsche hinzu, vertikal und horizontal, einige abgerundete Ecken, etwas Hintergrundverlauf nach rechts. Und es wird von grün auf 600 gehen. Lass uns mit der nächsten Zeile weitermachen. Wie dieses Grün, ich weiß nicht, 700. Und wenn wir schweben, wird es von Grün 800 auf Grün 900 sein Lass es uns speichern. Und lass uns den Knopf überprüfen. Und was den Absatz angeht, können wir vielleicht etwas Marsch in die unteren vier setzen. Wir können den Text auf Excel erweitern. Wir können Font Semi Boot machen. Und für den Checkout können wir vielleicht die Schlagzahl Y auf vier und die Wette X auf acht erhöhen die Schlagzahl Y auf vier und die Wette X auf acht Und wir können die Textgröße erhöhen, Text. Vielleicht auch nach Excel. Excel wird ausreichen. Das ist es. Ja, das ist besser. Auf unserer Seite können wir den Artikel jedoch nicht entfernen, indem wir die Qualität verringern. Gehen wir also zurück zum Code. Und da müssen wir zum Kartenkontext gehen , weil dort Verringerung der Anzahl der Kartenelemente Funktion zur Verringerung der Anzahl der Kartenelemente definiert ist. Und ich denke, wir werden einfach versuchen, Gleichwertige hinzuzufügen. Wenn es also größer oder gleich eins ist, können wir es verringern Gehen wir jetzt zur Seite. Wir können also immer noch hinzufügen, dass die Zahlen steigen. Und wenn wir es dort verringern, wird es aus dem gelöscht 26. Stripe: Wir werden uns dort mit der Handle-Checkout-Funktion befassen. Und dafür müssen wir uns zuerst anmelden und die Geheimnisse und ABI-Schlüssel von Stripe abrufen. Wir werden stripe.com öffnen und dort auf Start klicken. Sobald Sie auf der Seite sind, klicken Sie dort auf API-Schlüssel für Entwickler Also geh nach Hause. Oder dort ist es meiner Meinung nach bei einigen Einstellungsentwicklern erhältlich API-Schlüssel für Entwickler. Klicken wir darauf und dort können Sie sehen, dass wir den veröffentlichbaren Schlüssel und den geheimen Schlüssel haben den veröffentlichbaren Schlüssel und den geheimen Schlüssel Und wir kümmern uns vorerst um diese beiden. Lass uns mir jetzt folgen. Klicken Sie hier, um diesen veröffentlichbaren Schlüssel zu kopieren, und kehren Sie zum VS-Code zurück Dann auf der Karte eine Sechs oben in der Datei, da machen wir Const Stripe Promise, Load Stripe Dort fügen wir den veröffentlichbaren Schlüssel ein. Und dann werden wir den Testschlüssel anzeigen und zum Kopieren klicken, um VS-Code zurückzukehren Jetzt gehen wir zu den Umgebungsvariablen, aber nicht im Front-End-Ordner, sondern im Back-End-Ordner. Dort werden wir Stripe Secret P machen , das diesem Schlüssel entspricht. Speichere es Nun zum Zugriff auf D, jetzt werden wir über Webhooks dorthin gehen. Wir werden auf In lokaler Umgebung testen klicken und dort die Anleitung erhalten, was wir tun müssen, um den Stripe für Webhooks einzurichten Also müssen wir zuerst den Client herunterladen . Dort wählst du dein System aus, für das Windows geeignet ist Dort werde ich diese Zip-Datei von Github herunterladen. Sie werden es entpacken, dann öffnen Sie den Ordner, dann öffnen Sie Umgebungsvariablen auf Ihrem Computer und fügen dort einen Pfad zu dieser Punkt X-Datei Sie werden Ihr Terminal öffnen. Sie werden dort Stripe schreiben und diese Informationen erhalten. So wissen wir, dass Sie den Client erfolgreich installiert haben. Dort werden wir zu dieser Seite zurückkehren. Dann geben wir dort diesen ersten Befehl ein, Stripe Login. Wir werden die URL kopieren, sie dort öffnen, dort werden wir das Wort sehen. Wir werden auf Lo Access klicken und der Zugriff wird gewährt. Wenn wir jetzt zu dieser Seite zurückkehren, werden wir sehen, dass sie abgeschlossen ist. Was wir jetzt tun werden, ist diesen Befehl zu kopieren, und es ist der nächste, den wir einfügen werden. Denken Sie jedoch daran, dass wir diesen lokalen Host auf 3.000, die wir verwenden, oder auf einen beliebigen lokalen Host ändern müssen 3.000, die wir , auf dem Sie sich befinden, also auf Ihr Backend. Es ist also nicht Ihr Frontend, sondern Ihre Backend-URLs, und dann läuft unser Server auf 3.000. Kopieren wir das also und ändern wir es auf den Wert 3.000. Es sieht also so aus. Stripe Listen leitet den Webhook Local Host 3.000 weiter. Geben Sie jetzt ein. Und wir werden dieses Webbook-Signaturgeheimnis bekommen, damit wir es kopieren können und dann zu unserem VS-Code übergehen Und in unserem VS-Code werden wir wieder eine neue Umgebungsvariable im Ordner Bed erstellen wieder eine neue Umgebungsvariable im Ordner Bed Stripe Web Book, geheim ist gleich dem, was wir vom Terminal bekommen haben Jetzt gibt es sogar den ausgefüllten Scheck, was in Ordnung ist. Jetzt sollte es funktionieren. Wir können das auch zum Testen kopieren. Wir rufen es vom Terminal aus an und es ist uns gelungen. Das heißt, wir können jetzt in unserem VS-Code weitermachen. Also gehen wir zurück zu CART und müssen den Strip installieren. Dort in einem Terminal in unserem VS-Code öffnen wir ein neues, ein CD-Frontend, und dort machen wir NPM bei Stripe StripJZ Wir werden es installieren. Jetzt haben wir es. Wir können das Terminal dort auf der Karte schließen. Wir werden Load Stripe aus dem Stripe Jz Stripe Stripe importieren. Jetzt sollte das in Ordnung sein. Und das ist wichtig, weil wir dieses Stripe-Versprechen nutzen werden. Jetzt kümmern wir uns um den Checkout. Also machen wir zuerst Stripe und warten, bis Stripe initialisiert Also müssen wir ausweichen, bis es ausgefallen ist, und wir werden das Stripe-Versprechen nutzen Wir haben es gerade erklärt. Dann werden wir die ständige Transformation fortsetzen. Lass es mich auch so schließen. Umgewandelte Artikel in Kartenelemente ordnen Element zwei zu, und dort setzen wir den Namen auf den Punktnamen, den Preis gewissermaßen auf den Artikelpreis, wir wandeln ihn von unserer Karte in den tatsächlichen Streifen um und auch die Menge in eine Artikelmenge. Fantastisch. Jetzt machen wir mit einem Test-Catch-Block weiter. Dort in einem Drei-Block werden wir zunächst mit der Überprüfung beginnen. Also müssen wir das Token aus dem lokalen Speicher abrufen. Dann werden wir eine Antwort erstellen. Also werden wir in Axios eindringen und einen Pfad verwenden, den wir jetzt definieren müssen, und das wird eine Create-Checkout-Sitzung sein Gehen wir jetzt zum Backend. Wir werden Index Dot JS öffnen. Zuerst werden wir in Index DJs ein Terminal öffnen Wir machen CD Bend, wir machen NPM, ich Alles, was wir öffnen können, ist auch ein Fingertipp mit dem Terminal, auf dem unser Server läuft, sodass wir sicher sein können, dass es keine Fehler gibt Dort werden wir Stripe zunächst mit unserem geheimen Schlüssel initialisieren C-Streifen entspricht also einem neuen Streifen Klicken Sie darauf oder drücken Sie ihn Lassen Sie uns nun überprüfen, ob es importiert wurde. Ist es. Und dort werden wir den geheimen Punkt-N-Stripe-Schlüssel verarbeiten geheimen Punkt-N-Stripe-Schlüssel , den wir dort in unseren Bend-Umgebungsvariablen haben. Auch mit dem Webookygrade , das wir etwas später verwenden werden. Und wir beginnen mit der Route. Dies wird also eine Route sein , um eine Stripe-Checkout-Sitzung zu erstellen. Und auf dieser Route beginnen wir mit Epi Dot Post. Dort verwenden wir Create Checkout Session, eine synchrone Variante mit der Antwort auf Anfragen Und zuerst erhalten wir das Produkt und einen Kunden, also eine ständige Produkt- und Kunden-E-Mail-Anfrage an Bladdy dann ordnen wir das Produkt den Artikeln für Stripe zu Also reiht die Artikel, Punktkarte mit dem Produkt hin und schon sehen wir das Feld Also Preisdaten, Währung, ich werde dort USD-Produktdaten angeben. Ich werde den Namen festlegen , der der Produktpunktname sein wird. Der Preis pro Einheit entspricht dem Produktpreis in Cent. Und es wird die Menge geben, und es wird die Anzahl der Produktpunkte geben Unter den Einzelposten werden wir die Produktdetails für die Aufnahme in die Metadaten serialisieren für die Aufnahme in die Metadaten Also werden wir unsere ständigen Produktdetails serialisieren. Wir müssen es stringifizieren, also die Produkte punktförmig zuordnen, das Produkt dort öffnen, und wir werden den Namen, den Produktnamen, die Menge, die Produktmenge und den Preis des Produkts mit dem Punktpreis in einem Sinn machen Sinn Mal 100. Jetzt versuchen wir es mit Catch Block. In einem Testblock erstellen wir eine Checkout-Sitzung mit den angegebenen Parametern. Also konstante Sitzung und warte auf Stripe Dot Checkout Dot Session Dot Create. Dort müssen wir die Informationen eingeben. Zunächst werden also die Arten der Zahlungsmethoden per Karte behandelt. Einzelposten werden die Einzelposten sein, die wir gerade gemacht haben. Methodendaten handelt es sich den Methodendaten handelt es sich um Produktdetails, serialisierte Produktdetails, Zahlungsmodus, Kunden-E-Mail, Kunden-E-Mail, Erfassung der Rechnungsadresse ist erforderlich Dort legen wir fest, was wir von einem Kunden erwarten, um den Stripe auszufüllen Außerdem werden Sie jetzt eine Erfolgs- und eine Kündigungs-URL festlegen. Und diese beiden URLs müssen wir codieren, da die Erfolg-URL die Seite ist , auf die wir umgeleitet werden , nachdem wir die Produkte erfolgreich bezahlt haben, oder die Seite zur Stornierung, falls sie nicht erfolgreich sein sollte. Jetzt können wir dort die URLs für diese Seiten einfügen und die Seiten selbst codieren. Verwenden wir Backslashes. Und da beginnen wir zuerst mit der Vorderseite und der URL Wir müssen die Umgebungsvariablen überprüfen. Wir haben es nicht dort, also werden wir die Vorderseite und die URL starten . In unserem Fall hostet HDDPh Loco 5173 . Jetzt werden wir es dort benutzen. Also Dollarzeichen, die geschweiften Klammern öffnen, Umgebungsvariablen mit Punkt verarbeiten, Frontend, URL, Schrägstrich , SCS Die Sitzungs-ID des Fragezeichens entspricht der ID der Checkout-Sitzung. Und für die URL zum Stornieren verwenden wir wieder dasselbe, Prozess-Umgebungsvariablen, Frontend-URL, aber den Schrägstrich Und das war's auch schon, denn auf der Seite „Stornieren“ benötigen wir keine ID für die Checkout-Sitzung, weil wir dort keine entsprechenden Informationen schreiben werden Es wird nur angezeigt, dass Ihre Zahlung fehlgeschlagen ist oder Sie storniert haben, auf eine Homepage wechseln und so weiter. Und wir müssen die Slash-Erfolgsseite und die Seite mit dem Schrägstrich Stornieren löschen Bevor wir das tun, werden wir mit der Sitzungs-ID antworten, also werden wir die Antwort mit der JSON-D-Sitzungspunkt-ID festlegen Und im Handumdrehen machen wir einen Console Dot Error. Checkout-Sitzung konnte nicht erstellt werden. Fehlermeldung und Antwortstatus 400 mit JSON-Nachricht. Fehlergitter. Eine Checkout-Sitzung. Speichern Sie es jetzt dort in Seiten. Wir werden eine neue Datei erstellen, und das wird eine Erfolg.j6 und auch kanso.j6 sein Lass uns dort Export machen. Lass uns sie zu Abito J sechs hinzufügen. Also Erfolg und Abbruch Jetzt können wir zu CAD gehen und die Implementierung von Handle Checkout abschließen Also dort im Exile-Beitrag werden wir HTTP, Localhost, 3.000 Schrägstrich, CRE Checkout Session durchführen Localhost, 3.000 Schrägstrich, CRE Checkout Session und den Produkten die umgewandelten Artikel schicken Dann die Kopfzeilen, die Autorisierung als Token und die Weiterleitung zum Stripe-Checkout Wenn also die Antwortdaten-ID wahr ist, umgehen wir Stripe Dot und leiten zur Kasse leiten zur Dort geben wir die Sitzungs-ID mit der Punkt-ID der Antwortpunktdaten ein, und das war's Außerdem werden wir dort etwas anderes tun. Falls es also fehlschlägt, werden wir einen neuen Fehler zeichnen. Die Sitzungs-ID fehlt als Antwort. Und da ist der Haken, wir werden es protokollieren, falls etwas passiert. Also Konsolenfehler, bei der Verarbeitung des Checkout-Fehlers ist ein Fehler aufgetreten. Das sollte es sein. Jetzt können wir es testen. Also auf unserer Seite haben wir den einen Artikel für 22$. Wir klicken auf Weiter zur Kasse und scheitern an den JWT-Token Und wir wollen das JW-Token eigentlich nicht für unseren Kunden verwenden das JW-Token eigentlich nicht für , weil er dadurch sowieso nicht eingesperrt ist Und wir werden diesen JWT-Token aus D. Checkout löschen , weil tatsächlich jeder unser Essen bestellen kann Also werde ich es von dort löschen. Und wie wir diesen Create-Checkout aus dem AV ausschließen können. Wenn du nachschaust, verwenden wir dort das AV. Also werden wir die Lebensmittel auch unter das AV bringen . Wir werden es so machen. Und wir gehen zu Routes, erstellen eine neue Datei, wir machen Stripe Route Dot JS. Jetzt kehren wir zu Index Dot JS zurück. Wir werden diese Wand durchtrennen eine Checkout-Sitzung auch mit diesem Streifen erstellen. Speichern Sie es und bringen Sie es zur Stripe-Route. Bei einer Stripe-Route legen wir dort zusätzlich den Express an. Dann machen wir Stripe, ich werde importiert. Wir werden auch Express von Express importieren. Speichern Sie es. Das sollte in Ordnung sein. Wir werden den Standard-Router exportieren. Jetzt kehren wir zum Index DGS zurück. Dort machen wir es oder wir kopieren es einfach und platzieren es über dem Rand Wir machen dort Stripe und machen eine Stripe-Route. Außerdem müssen wir das natürlich importieren. Also da unten die Essensroute, lass es uns einfach kopieren. Streifenroute. Und die Route ist Stripe Route Dot js. Und jetzt speichere es. Gehe zurück zu Stripe Route JS. Es gibt keine App Dot Post mehr, aber es ist Router-Punktpost. Die Essensroute werden wir tatsächlich auch über dem O platzieren , also haben wir jetzt diese Authentifizierung für den Cloudinary, der das Bild hochlädt Und jetzt bearbeiten wir dort mit Stripe. Also kehren wir dort zu unserer Karte zurück und es wird nach dem Stripe-Slash die Checkout-Sitzung erstellen Und wir haben ihren Tippfehler. Ich glaube, ein weiteres Problem ist, dass wir ihre Umgebungsvariable und ihre Konfiguration nicht verwenden, sodass wir sie nicht richtig lesen Also lass uns dorthin gehen. Benutze das. Importiere es, speichere es. Also müssen wir die Dotan-Konfiguration importiert haben, und dann werden wir sie dort aufrufen Das wird es also tatsächlich die Umgebungsvariablen nennen. Versuchen wir es jetzt noch einmal. Und wir gehen erfolgreich zur Kaufabwicklung über. Lassen Sie uns abschließend kurz zusammenfassen, was wir getan haben, um das Problem zu beheben. Zunächst haben wir die Route von Index Dot JS in einen neuen Ordner, Stripe Route Dogs oder eine neue Datei verschoben . Dort mussten wir diese Importkonfiguration vornehmen, damit wir diesen geheimen Stripe-Schlüssel abrufen und dann die Route selbst definieren können . In Karte J sechs oder zuerst beginnen wir mit dem Indexpunkt js in Indexpunkt Js. Wir haben diesen EnddodusTip mit der Stripe-Route über dem Abuse O platziert, weil wir ihn nicht durch JWTs authentifizieren lassen über dem Abuse O platziert, weil wir ihn nicht müssen Wir werden diese Authentifizierung für JWTs für die anderen Dinge verwenden , wir haben ihr Upload-Bild und so weiter . Dann müssen wir, wie wir es mit dem Schrägstrich Stripe gemacht haben, diese URL so aktualisieren, dass sie nicht nur die GET-Checkout-Sitzung, sondern auch den Schrägstrich SipElagedCheckout-Sitzung enthält . Wir haben auch die Header mit der Autorisierungsbarriere von dort entfernt und wir versenden nur Produkte, die und Jetzt können wir auf unserer Seite die Daten eingeben und dann auf Bezahlen klicken. Der Vorgang ist erfolgreich und wir werden zur Slash-Erfolgsseite weitergeleitet Bevor wir zur Erfolgsseite gehen, ändern wir das in Schrägstrich Stornieren Sie, und wir werden zuerst diesen Code codieren, weil es einfacher sein wird 27. Abbrechen: Und da fangen wir einfach mit dem ersten Unterschied an. Das wird einen Klassennamen mit einer maximalen Breite von vier Excel haben. Wir zentrieren es mit Moldo, etwas Polsterung, etwas Hintergrund, etwas abgerundet, groß, etwas Schatten, und verschieben es mit senkrechtem Rand Jetzt erstellen wir den H-Wert, bei dem die Zahlung versalzen oder fehlschlagen kann Erhöhen wir diesen Text auch auf Bolt und Text d 800. Jetzt können wir das auf unserer Seite sehen. Im Folgenden werden wir einen Absatz hinzufügen. Ihr Zahlungsvorgang wurde nicht abgeschlossen. Wenn das ein Fehler war, können Sie es erneut versuchen. Und zu diesem Absatz werden wir einen Rand nach oben hinzufügen. Im Folgenden werden wir wieder ein Div mit einem gewissen Rand oben hinzufügen. Im Inneren werden wir einen Link erstellen. Lassen Sie uns also Tinte aus dem React-Router-Dom importieren. Dort können wir einen Link machen. Dies führt uns zur Homepage. Dort heißt es „Zurück zur Homepage“. Wir werden etwas Styling hinzufügen. Also Hintergrund 600, Text auf Weiß, etwas Bettwäsche, abgerundetes Medium und beim Schweben die Hintergründe rot bis 900 Und wir werden dort noch etwas mehr Styling hinzufügen. Lassen Sie uns also die Marge nach oben erhöhen. Wenn wir dann auf unserer Seite sind, klicken wir auf „Zurück zur Startseite“, um dorthin zu gelangen. 28. Modell und Route bestellen: Um nun eine Erfolgsseite zu erstellen, müssen wir zunächst eine Bestellung erstellen. Gehen wir in unseren Bend-Ordner. Und dort in Models werden wir eine neue Datei erstellen und sie Order Model Dot JS nennen . Zuerst importieren wir dort Mongoose. Und wir werden anfangen, das Schema für die Auftragserfassung neu zu definieren Schema für die Auftragserfassung Das C-Bestellschema ist also neu. Mungo-Schema. Zuerst erhalten wir das Feld für die Kunden-E-Mail. Kunden-E-Mail wird also vom Typ Zeichenfolge sein und ist natürlich erforderlich, da wir diesen Teil auf jeden Fall benötigen. Dann werden wir die Bestell-ID haben. Bestell-ID wird also vom Typ „Zeichenfolge“ sein, die ebenfalls erforderlich ist und eindeutig ist. Als Nächstes werden wir dort die Artikel haben. Also die Artikel sind angeordnet, da haben wir den Namen und auch die Menge. Wir wissen also, wie viele Produkte wir an unseren Kunden schicken müssen. Nach diesem Array speichern wir die Adresse. Also müssen wir jetzt wissen, was von Stripe kommt. Und ich weiß bereits, dass ich von Stripe dort die Zeile eins, Zeile zwei, Stadt, Bundesland, Postleitzahl und Land eingerichtet Zeile zwei, Stadt, Bundesland, habe. Also werde ich es auch für mein Modell einstellen. Zeile zwei Zeichenfolge, dann haben wir die Stadt , die auch Zeichenfolge ist. Wir haben das Bundesland, das ist auch eine Zeichenfolge, die Postleitzahl. Auch Zeichenfolge und Land. Das ist auch Zeichenfolge. Dann können wir auch ihre Zeitstempel hinzufügen Tu und das wird dazu führen, dass automatisch Zeitstempel hinzugefügt werden , die zu den Zeitstempeln erstellt und aktualisiert Und am Ende dieser Datei werden wir den Export durchführen Exportieren Sie also das Punktmodell von Deford Mangos, das Bestellschema. Jetzt speichern wir es, damit wir sehen können, dass wir keine Probleme haben. Und wenn Sie sich erinnern, haben wir das Modell gemacht und dann die Routen. Also werden wir auch einige Routen für unser Auftragsmodell erstellen. In Routes werden wir eine neue Datei erstellen, Route Dot JS bestellen und dort können wir beginnen. Zuerst werden wir Express importieren. Dann werden wir die Bestellung importieren. Anhand des Modal-Auftragsmodells erstellen wir dann einen Express-Router für die Verwaltung der Routen Also C Router, Express Dot Router. Und da fangen wir mit den tatsächlichen Routen an. Also werden wir zuerst alle Bestellungen abrufen, und das wird Punkt G sein. Es wird asynchron mit Anfrage und Antwort sein, und dort werden wir zuerst alle Bestellungen aus der Datenbank abrufen Bestellungen von Cs warten also auf die Bestellung „Punkt finden“, und wir werden mit der Liste aller Bestellungen antworten Antwort: Punkt JS aktiviert und Bestellungen. Dann können wir eine Route zum Abrufen einer einzelnen Bestellung haben. Also eine einzelne Bestellung nach ID abrufen. Nochmals Router-Punkt G. Dort in der URL benötigen wir einen ID-Parameter Die Antwort auf die Anfrage ist natürlich asynchron, und dort werden wir zuerst die ID aus dem Anforderungsparameter extrahieren Wir führen also eine konstante Reihenfolge durch, umgehen die Reihenfolge der Suche nach der ID und geben dann die ID der Anforderungsparameter Und jetzt, wenn die Bestellung gefunden wird, werden wir damit antworten Also antworte, Jason, befiehl. Wir können auch eine Route für die Aktualisierung einer bestehenden Bestellung bereitstellen . Also Router dotput Wir müssen eine ID angeben. Also konstant, aktualisiere. Bestellen, warten, bestellen, anhand der ID finden und aktualisieren. Anforderungsparameter, Parameter, ID, Anfragetext, und wir werden dort auch das neue True hinzufügen . Das bedeutet , dass die Antwort auch das aktualisierte Dokument enthalten wird . Also neu, wahr, und da werden wir wieder antworten, also aktualisierte Reihenfolge. Und jetzt haben wir auch die Route zu. Bestellung löschen, natürlich, wenn wir sie nicht mehr benötigen, also weiterleiten oder einfach eine Bestellung löschen. Und wir werden Router Dot Delete durchführen. ID, asynchrone Anfrage und Antwort. Und dort erstellen wir eine gelöschte Bestellung und warten darauf, dass die Bestellung nach der ID gefunden wird und diese gelöscht Eingabeparameter sind die ID aus der Anfrage. Und wir werden es zurückschicken. Antwort Jason, lösche es. Bestellung. Und am Ende werden wir den Router exportieren und können ihn im Index für GS verwenden. Exportieren Sie also den Standard-Router. Und wenn wir jetzt zu Index Dogs gehen, haben wir dort die Autorisierung für die JSN WebTokens Darunter können wir also app.us den Schrägstrich Order Wi Order Route eingeben und die Bestellung natürlich herausimportieren natürlich herausimportieren Also da kopiere das. Route bestellen. Das Gleiche ist hier, speichern Sie es. Und es gibt ein Problem mit der Route oder dem Modellpunkt JS, und wir sind fertig. Um nun auch diese abgeschlossene Sitzung und die Daten zu erfassen, die beim Stripe-Checkout eingegeben wurden , müssen wir einen Webhook-Handler erstellen 29. Webhook-Handler und Stripe-Routen: In unserem Becond-Ordner klicken wir auf einen neuen Ordner. Wir werden ihn Webhooks nennen. Im Inneren erstellen wir eine neue Datei, die Webhook-Handler Dot JS heißt, und dann können wir mit der Codierung des Webook-Handlers beginnen Also werden wir zuerst einige Module importieren . Das wird Express sein. Dann auch die Bestellung bei den Models. Modell bestellen, wir erstellen eine Router-Instanz. Jetzt machen wir auch Constant Stripe New Stripe. Dadurch wird der geheime Prozessschlüssel mit Punkt, Punkt und Streifen importiert . Dort können wir auch eine Konfiguration vornehmen und mit der Route beginnen, die die Webhook-Ereignisse verarbeitet Behandeln Sie also Stripe-Webhook-Ereignisse und Router-Dotpost. Slash Webhooks, und da machen wir Express Dot. Rohtyp Anwendungs-JSON und asynchrone Und wir werden diese Express Dot-Zeile erstellen , weil diese Route die JSON-Rohdaten verarbeitet Außerdem werden wir jetzt die Stripe-Signatur abrufen. Die Signatur besteht also aus Anforderungsheadern. Streifen, Signatur. Wir werden eine Veranstaltung erstellen und wir werden einen Trocatchblog erstellen Und wir werden versuchen, das Event mithilfe der Stripe-Bibliothek zu konstruieren Event mithilfe der Stripe-Bibliothek Event ist also Stripe, Webhooks Dot Construct Event Dort machen wir die Buddy-Signatur und das Stripe-Webbok-Secret Und wir suchen nach einem Fehler, falls es fehlschlägt. Also Konsolenpunktprotokoll, Webbook-Fehler und Rückantwortstatus 400 Punkt gesendetes Webbook Und wir machen die Fehlermeldung, ändern diese vier Speichern Sie es. Unterhalb dieses Strikage-Blocks behandeln wir nun einen bestimmten Ereignistyp, dem es sich um den Abschluss der Checkout-Sitzung handelt Wenn der Ereignistyp also Checkout-Sitzung abgeschlossen ist, haben wir ihn dort Dann extrahieren wir die Sitzungsdaten aus dem Ereignis. Also konstante Sitzung, sogar das Datenobjekt. Und wir werden auch die Elemente aus den Sitzungsmetadaten analysieren aus den Sitzungsmetadaten Es kommen also Artikel. Und da sie sich in einem JsonTrn befinden werden, werden wir dies anhand von JSON-Punktbalken, Sitzungspunktmetadaten und Produktdetails tun . Jetzt werden wir eine neue Ordnung mit konstanter Ordnung schaffen, eine neue Ordnung Da kennen wir schon die Felder aus dem Modell, die Kunden-E-Mail wird da sein. Und jetzt werden alle Felder in der Sitzung den entsprechenden Wert haben. Also Kundendaten, E-Mail, dann Artikel, dann die Adresse. Wir haben die Zeile eins, Zeile zwei. Ich denke, wir können das im Grunde machen, es kopieren. Leg es da hin. Und jetzt werden wir die Werte ändern. Also Session Dot Kundendaten. Ich denke, jetzt komme ich mit dieser Adresse Punkt Zeile eins, Adresse Punkt Zeile zwei, Adresse Punkt Stadt Adresse Punkt klar. Jetzt die Postleitzahl. Und der letzte ist das Land. Jetzt werden wir zusätzlich Try Catch Block ausführen und versuchen, ausführen und versuchen die Bestellung in der Datenbank zu speichern. Also versuche es dort mit Catch Block. Ich versuche es, wir warten auf das Speichern der Order Dot, und wir werden den Catch Block protokollieren, wir werden beim Speichern von Bestellungen auf der Konsole einen Punktfehler ausführen. Wenn wir danach auf Stripe antworten, so hat Jason die Antwort True erhalten. Und am Ende werden wir diesen Export-Router als WebrookRouter exportieren. Jetzt können wir ihn speichern Wir werden dort unten in der Datei zu den Index-DGs zurückkehren dort unten in der Datei zu den Wir werden App Dot Slash Web Books vom Webhook Router aus erstellen. Die nächste Route, die wir jetzt machen werden, ist Strprout Punkt chs. Dort werden wir eine Route erstellen, um eine Sitzung anhand ihrer ID abzurufen Wir machen Router Dot Get Slash API Session Slash Session ID Asynchrone Antwort auf die Anfrage, und dort versuchen wir es mit Catch. Und in Try Block werden wir jetzt eine Sitzung mithilfe einer Stripe-API abrufen, also konstante Sitzungswartezeit, Stripe-Punkt-Checkout-Punktsitzungen also konstante Sitzungswartezeit , Punkt Abruf-Anforderungsparameter, Sitzungs-ID Dort werden wir ein Antwortobjekt mit den Sitzungsdetails erstellen , also konstante Antwort, Kunden-E-Mail, Sitzungspunkt-Kundendetails Punkt-E-Mail-Elemente, JSON-Pars, Sitzungsmetadaten, Produktdetails, dann Adresssitzung, Kundendetails Punktadresse Und jetzt werden wir mit den Details antworten. Also werden wir die Antwort, die wir dort gespeichert haben, in die Antwort senden . Und im Catch-Block werden wir den Csoldt-Fehler Fehler beim Abrufen der Sitzung und Fehlermeldung ausführen und mit dem JSON-Fehler stat tus 400 beim Abrufen der Sitzungsdetails antworten JSON-Fehler stat tus 400 beim Abrufen Speichern Sie es jetzt. Bevor wir es testen, gehen wir zur Erfolgsseite. Dort werden wir einige zusätzliche Dinge importieren. Verwenden Sie also Datum und Effekt. Dann werde ich auch die Navigation verwenden und den Standort verwenden. Zuerst werden wir die Hooks starten, um mit dem Router zu interagieren Gehen wir also zurück zum Index Js Wir müssen ihn nach oben scrollen und diese Reihenfolge annehmen und platzieren sie unter dem gestreiften Feld und über der JWT-Autorisierung Und wenn wir zur Bestellung gehen, lassen Sie mich dort noch einmal nachsehen. Wir haben die Abrufroute, Single Fetch, Update und Und natürlich müssen wir auch eine neue Bestellung in der Datenbank erstellen , und zwar mit Punktpost also eine neue Bestellung erstellen, werden wir dort eine asynchrone Anfrage und Antwort auf Router-Punkt-Post-Slash-Reihenfolge asynchrone Anfrage und Antwort auf Router-Punkt-Post-Slash-Reihenfolge Wir werden die Bestelldaten aus dem Anfragetext abrufen. Also geben wir Bestelldaten an und fordern den Punkttext an. Dann generieren wir eine eindeutige ID für die Bestellung. Also machen wir eine konstante Bestell-ID. Jetzt werden wir Crypto Dot Create Hash verwenden und müssen ihn importieren. werden wir 256 Has verwenden, und nachdem wir Punkt aktualisiert haben, Jason, Stringify, die Bestelldaten und den Digest h. Damit erstellen wir also eine eindeutige Bestell-ID und machen dort einen Test-Catch-Block . Im Falle eines Fehlers können wir die Fehlermeldung Console Dot Error Error Finding Order“ ausgeben und auch den Antwortstatus zurückgeben oder den Antwortstatus gesendet haben 500 und dann eine Nachricht mit einem Fehler bei der Suche nach der Bestellung und einer Fehlermeldung senden. Nun zum Trblog, dort müssen wir nach einer bestehenden Bestellung mit derselben ID suchen Wir müssen also sicherstellen, dass diese Bestellung nicht in der Datenbank vorhanden ist Das Gleiche gilt für die bestehende Bestellung, und wir werden eine Bestellung anhand der Bestellnummer finden. Falls das zutrifft, also etwas gefunden wurde, werden wir die Antwort mit dem Status 409 zurücksenden und Jason mit der Nachricht, Bestellung ist bereits vorhanden, antworten. Wenn es keine Bestellung gibt, erstellen wir eine neue. Also konstante Bestellung, neue Bestell-ID, Bestelldaten. Und wir werden dort zusätzliche Trackage-Blocks einrichten. Dort werden wir auf die Bestellung warten, bis die Bestellung gespeichert ist. Also speichern wir die Bestellung in der Datenbank, und falls sie fehlschlägt, werden wir dort den Konsolenfehler, den Fehler beim Speichern der Bestellung und die Bestellnachricht eingeben . Außerdem geben Sie den Antwortstatus 500 zurück. Senden Sie dort eine Nachricht mit dem Fehler beim Speichern der Bestellung und der Fehlermeldung mit Punkt. Und am Ende werden wir mit den erstellten Bestelldaten antworten , falls sie nicht erfasst werden. wir also zurück und stellen wir sicher , dass wir die Krypto dorthin importiert haben Öffne das Terminal. Wir werden das Backend N PNI Crypto sehen. Dann liegt ein Tippfehler vor. Jetzt sollte es in Ordnung sein Derzeit sieht unsere Erfolgsseite so aus und wir müssen einen erfolgreichen Checkout erstellen. Also werden wir einen Artikel in unsere Karte legen. Wir kümmern uns um die Kaufabwicklung. Wir werden die Stripe-Informationen ausfüllen. Wir werden es bezahlen. Da es sich um eine Testumgebung handelt, wird es natürlich nicht bezahlt. Und jetzt können wir zur Erfolgsseite gehen und dort werden wir die Ausgabe der Benutzeroberfläche sehen. 30. Erfolgsseite: Diese beiden wurden bereits importiert und jetzt haben wir bei der Navigation dort angehalten , mit der wir später zurück zur Startseite navigieren werden , und wir werden auch den Use-Location-Hook verwenden, um auf den URL-Status zuzugreifen. Konstanter Standort, Standort verwenden. Dann fahren wir mit dem Bundesstaat fort , in dem die Bestelldetails gespeichert werden. Konstante Bestelldetails, Bestelldetails festlegen. Und der Fehler wird Null sein. Dann werden wir die Sitzungs-ID aus den URL-Abfrageparametern abrufen . Also konstante Sitzungs-ID, neue URL-Suchparameter, Standortpunktsuche und wir erhalten die Sitzungs-ID. Jetzt werden wir eine Funktion erstellen, um die Bestelldaten in unsere MongoDB zu posten konstante Post-Order an die Datenbank wird also asynchrone Post-Daten sein, und dort werden wir einen Tricagblock innerhalb des Tkacheblocks erstellen, wir versuchen, eine Post-Anfrage mit den Bestelldaten zu senden, also konstante Antwort, warten, also konstante Antwort, warten, Die konstante Post-Order an die Datenbank wird also asynchrone Post-Daten sein, und dort werden wir einen Tricagblock innerhalb des Tkacheblocks erstellen, wir versuchen, eine Post-Anfrage mit den Bestelldaten zu senden, also konstante Antwort, warten, und wir werden das HTTP abrufen. Jetzt ist unsere Route localhost 3.000 Schrägstrich ORDER. Die Methode wird Post sein, Header werden vom Inhaltstyp für die Anwendung Jason sein ORDER. Die Methode wird Post sein, Header werden vom Inhaltstyp für die Anwendung Jason sein. Das bedeutet, dass wir den Inhaltstyp auf Jason setzen werden und nun das Post-Datenobjekt in jsnStringby Jason stringify, die Post-Daten, konvertieren jsnStringby Jason stringify Wenn die Antwort nicht in Ordnung war, geben wir einen neuen Fehler mit der Meldung, dass die Bestellung nicht in der Datenbank gespeichert werden konnte, Wenn sie durchgeht, analysieren wir JSON-Antwort in ein JavaScript-Objekt, sodass wir Antwortdaten verarbeiten Das Gewicht reagiert mit JSON. Und wir werden es auch protokollieren, damit wir Bestellungen ausführen und die Antwortdaten in der Datenbank speichern können . Und wir werden es über die Konsole protokollieren, damit wir sehen können , was in einer Datenbank gespeichert wurde. Jetzt machen wir den Catch-Block, damit wir den Fehler und den Fehler beim Veröffentlichen der Bestellung die Datenbank mit dem Fehler eindämmen, was so aussehen kann. Jetzt werden wir Effect verwenden, um die Nebenwirkungen zu behandeln, also verwenden wir Effect Constant, also verwenden wir Effect Constant Sitzungsdetails asynchron abzurufen Im Inneren werden wir Tricachblo ausführen. Im Tri-Blog speichern wir die Antwort, warten also auf den Abruf und jetzt auf HTTP, lokaler Host mit 3.000 lokaler Sitzungs-ID. Jetzt rufen wir die Stripe-API-Sitzung auf, um die Informationen von dort abzurufen, sodass wir die Sitzungsdetails abrufen können , also warten wir darauf Wenn die Antwort nicht in Ordnung ist, werden wir einen neuen Fehler ausgeben Die Antwort war nicht okay. Wenn es okay ist, werden wir die JSON-Antwort analysieren , um die Sitzungsdaten zu erhalten, also konstante Daten, warten auf die Antwort JSON Wir werden die Bestelldetails für diese Daten festlegen und die Bestellung mit diesen Daten auch in der Datenbank veröffentlichen Falls es fehlschlägt, haben wir den Gadget-Block, also geben wir einen Console Dot Error aus. Sitzungsdetails konnten nicht abgerufen werden. Der Fehler ist aufgetreten. Und jetzt werden wir auch überprüfen, ob die Sitzungs-ID tatsächlich existiert, und dort werden wir die Sitzungsdetails abrufen, falls Am Ende werden wir auch die Sitzungs-ID hinzufügen. Und das bedeutet, dass dies erneut ausgeführt wird, wenn es sich ändert. Wann immer sich die Sitzungs-ID ändert, wird dies erneut ausgeführt Und wir können mit DUI beginnen, also haben wir ihr Haupt-Div Wir werden ihre maximale Breite von vier Excel hinzufügen, wir können an einem vertikalen Rand zentrieren, vielleicht 40, etwas Abstand, einen ordentlichen Hintergrund Also können wir Green 100 machen. Wir können etwas davon und etwas Schatten gebrauchen. In diesem Hauptbereich machen wir die erste Überschrift , Zahlung erfolgreich war. Wir können die Textgröße erhöhen, Spaß machen und den Text grün 800 machen. Darin werden wir eine Information schreiben, aber falls die Bestelldetails wahr sind, werden wir sie rendern, falls sie falsch sind. Wir werden nur die Details der Ladebestellung rendern . Ich schätze, es mag dieses Absatz-Tag nicht , weil wir es zuerst dort codieren müssen. Also da drinnen werden wir das machen. So wie das hier. Jetzt ist es besser. Es wird nur ein gewisser Spielraum von oben übrig sein und jetzt, um zu tauchen, der generiert wird, wenn wir die Bestelldetails haben. Im Inneren fügen wir also einen Absatz mit Bestelldetails und der Kunden-E-Mail für Ihren Kauf ein. Hier sind Ihre Bestelldaten. Etwas Styling. Also Abstand von oben. Im Folgenden werden wir eine ungeordnete Liste erstellen. Wir können gegen einen Vorsprung von oben vorgehen. In dieser ungeordneten Liste werden wir die Bestelldetails eingeben: Domstt Map, Artikelindex, und es wird ein Listenelement mit Schlüsselindex geben, Artikelname Schlüsselindex Artikelmenge , Menge, Artikelmenge Und das war's für den Listeneintrag. Im Folgenden werden wir ein Absatz-Tag mit einem Abstand zwischen den vier oben genannten Lieferadressen für den Klassennamen erstellen. Und darin fügen wir einen weiteren Absatztext mit den Informationen in der ersten Adresszeile oder den Details in der Punktzeile eins ein. Und jetzt können wir das einfach für Adresszeile zwei für Stadt, Bundesland und Postleitzahl sowie für das Land kopieren Adresszeile zwei für Stadt, Bundesland und Postleitzahl . Also Adresszeile eins, es wird Adresszeile zwei geben. Es wird Stadt, Bundesland und Postleitzahl geben. Dort für Stadt, Bundesland und Postleitzahl machen wir diese geschweiften Klammern innen, wir machen einen Backslash und beginnen mit den Bestelldetails Punkt Adresse Punkt Cit wir machen einen Backslash und beginnen mit Bestelldetails Punkt Adresse Punkt Dann machen wir dort ein Komma und fahren fort, damit wir das mit Bundesland und Postleitzahl kopieren können mit Dort werden wir also Bundesland und Postleitzahl eingeben. Speichern Sie es. Für Land ändern wir das einfach in Land. Und was wir auch weiter unten tun werden, wir werden zur Startseite zurückkehren. Gehen Sie also mit der Schaltfläche zurück zur Startseite. Es kann tatsächlich sogar Link sein. Also lass es uns importieren. Link zwei Homepage, das ist ein Schrägstrich, Klassennamen werden grün sein, 600 auf Howe wird es Hintergrund grün sein , 900 Text zu weiß, etwas Abstand, Semibt. Das heißt, wir brauchen das nicht einmal mit Navigate, wenn wir den Link verwenden , jetzt speichern wir ihn Wir können einen gewissen Rand hinzufügen, also verwenden wir den Rand von oben bis vier Und wir haben dieses Problem, weil die Details der Abrufsitzung dort enden und sie dort enden sollten Und nach diesem Abrufen der Sitzungsdetails sollte die Überprüfung erfolgen und der Nutzungseffekt wird beendet Jetzt speichern wir es. Und wenn wir auf unserer Erfolgsseite nachschauen, können wir die Informationen dort sehen. Dies sind die Informationen , die wir in den Streifen eingegeben haben. Dann haben wir auf Checkout geklickt und jetzt sind wir auf dieser erfolgreichen Seite. Warum verwenden wir die eindeutige ID Denn als diese Seite geladen wurde, wurde sie auch in einer Datenbank gespeichert Aber jetzt werde ich die Inspektion öffnen, und Sie können sehen, dass nach dem Aktualisieren der Seite ein Fehler mit Konflikt aufgetreten ist. Und das bedeutet, dass dies nicht erneut in der Datenbank gespeichert werden kann, da es bereits eine Bestellung mit dieser eindeutigen ID gibt, die wir erstellt haben. Es wird also nicht erneut dort gespeichert, dieselbe Bestell-ID. Nachdem wir einen neuen Checkout erstellt, ihn erneut bezahlt haben und auf diese Seite gelangen, wird er erneut gespeichert, aber nur einmal, dort verwenden wir Slash Admin Wir sind bereits angemeldet. Dort klicken wir auf das Dashboard und dort gehen wir zur Seite, auf der die Bestellungen angezeigt werden. 31. Dashboard: Dort im VS-Code erstellen wir die neue Seite, das Dashboard, JS Six, und wir werden auch eine weitere Seite erstellen, und das wird die Reihenfolge löschen. Wir werden den Export dort durchführen. Jetzt gehen wir zu Epi J six, und dort müssen wir unter unserer Admin-Route bearbeiten Wir können diese also zweimal kopieren. Zuerst fügen wir das Dashboard mit Path und Dashboard und danach bestellen wir Delete mit ID, das heißt Delete Not Food. Bestellung löschen. Speichern Sie es. Und jetzt können wir die Dashboard-Komponente codieren. Fangen wir mit Importen an, also reagieren Sie. Verwenden Sie den Effekt und dann den Status und dann Exiles. Jetzt werden wir einen Status für Bestellungen einstufen, also konstante Befehle legen die Reihenfolge fest und standardmäßig ein leeres Array Dann holen wir die Bestellungen ab, also verwenden wir den Effekt Verbannte bekommen nichts. Dort werden wir die Bestellung erhalten, also werden wir die Route verwenden, die wir gemacht haben Und das ist HDTP Localhost 3.000 Slash ODR. Wenn Sie sich nicht sicher sind, können wir zur Indexierung von Hunden gehen und wir verwenden DrSlaShoder, wodurch Deshalb verwenden wir beim Abrufen der Artikel nur den Schrägstrich wir Also zurück zum Dashboard, und dann brauchen wir nur die Schrägstrichreihenfolge wie es bei Index DJs der Fall ist Dann werden wir antworten. Wir werden die Bestellungen mit den Daten, die wir erhalten, einrichten. Also Antwort auf Daten. Dann fangen wir draußen, falls es fehlschlägt. Also eigentlich Fehler und Konsolensperre. Fehler, vielleicht sollten wir auch das Laden hinzufügen. Stellen wir also das Laden auf Stürze ein. Dort werden wir auch das Laden auf Stürze einstellen. Zu Beginn werden wir es auf true setzen. Also da Und wir erstellen natürlich auch einen Status für die Verwaltung, also dort wird der Ladesatz geladen, wie wir es natürlich auch einen Status für die Verwaltung, also dort wird der Ladesatz geladen, bei anderen Komponenten getan haben. Und Diebstahl ist falsch. Um sicherzustellen, dass dies nur einmal ausgeführt wird, wir das Abhängigkeits-Array und können mit der Benutzeroberfläche beginnen. Wenn wir zu einer anderen Komponente übergehen, zum Beispiel Lebensmittel herstellen, können wir beim Laden dorthin gelangen. In unserem Dashboard öffnen wir das Hauptgericht. Zuerst können wir die Ladung dort ablegen. Da wir den Spinner importieren werden, können wir mit der Definition der Benutzeroberfläche beginnen Also werden wir zuerst eine maximale Breite festlegen, sie zentrieren und einige Hintergründe auf Grau 50 setzen , zum Beispiel Jetzt machen wir einen weiteren Diff , der die Tabelle zusammenfassen wird. Innerhalb des Tisches machen wir den Tischkopf. Und innerhalb des Tabellenkopfs wird es die Tabellenzeile geben, und sie wird die Tabellenüberschrift haben. Es wird also mehrere davon geben, und wir verwenden sie zuerst für die Bestellnummer, dann für das Essen, das bestellt wurde, dann für die Menge, dann für die E-Mail und dann für die Straße. Wir können es auch dort schreiben und dann werden wir es sofort stylen. Also Hashtag, Menge der Lebensmittel bestellen , E-Mail und Straße Dann fangen wir mit dem Styling an. Dann machen wir dort etwas Schatten. Für das Dunkel, das das aushält, und für den Tisch machen wir die Breite auf voll. Wir machen Text zu klein, Text auch Text nach links und Text zu Grau. Lassen Sie uns vorerst 500 verwenden. Für den Kopf werden wir noch kleineren Text machen, Text bis Grau 700. Wir können Großbuchstaben schreiben und wir können den Hintergrund bis Grau 50 schreiben Tabellenzeile, die wir verlassen werden. Für Tabellenkopf machen wir Scope. Spalte, damit es weiß, dass es sich um die Überschrift der Spalte und ihren Klassennamen handelt, wobei die Einbettung Y auf drei und vor x26 steht Jetzt können Sie auf unserer Seite die Änderungen sehen und wir können weitermachen, und wir werden mit dem Tabellenkörper fortfahren Im Inneren müssen wir zuerst die Bestellungen abbilden. Ordnen Sie also die Reihenfolge und den Index zu, jetzt machen wir die Tabellenzeile. Dort geben wir einen Schlüssel ein, nämlich die Ordnungspunkt-ID, und ein Klassenname hat einen weißen Hintergrund mit unterem Rand und einen grauen Hintergrund 50. In dieser Tabellenzeile werden wir Tabellendaten haben, und zwar für die Bestellnummer, die Lebensmittelmenge, die E-Mail-Adresse und die Straße Im Punktnamen des Arrays stehen also zuerst die Bestellartikel. Dann wird es auch PY 24 und Px 26 geben. Dann können wir dies für die Menge kopieren, dann für die E-Mail-Adresse und Adresse des Kunden und auch das erste für den Index. Also machen wir Index plus eins, weil es von Null an zählt , dann Menge da, da ist die Kunden-E-Mail und als letzte Adresse Punkt Zeile eins. Ebenfalls unten wird es den Löschvorgang geben. Wir werden dort codieren, Bestellung J sechs löschen. Also werden wir die Tabellendaten hinzufügen. Der Klassenname wird mit PY und PX bis 6 identisch sein. In den stabilen Daten werden wir das tun. Wir werden einen Link setzen. Lass es uns importieren. Dort in diesem Link werden wir eine Löschfunktion haben. Es wird einen roten Hintergrund haben (500 ), der Hintergrund wird auf 900, Text auf Weiß, PI zwei, Px vier, und es wird groß gerundet sein. Speichern Sie es. Außerdem führt uns dieser Ping zu Backslash, und die Route lautet Admin Order Delete und Slader Wenn wir jetzt die Seite überprüfen, können wir sehen, dass wir sie dort haben, wie wir sie haben wollen Dort klicken wir auf Löschen. Wir wurden zu einer Löschkomponente weitergeleitet und können sie jetzt codieren. Gehen wir zur Komponente „ Bestellung löschen“. Lassen Sie uns zuerst die Importe durchführen, also importieren wir React und Use State und dann auch die Exhils. Außerdem importieren Sie Use Navigate und Use Perms aus React Router Dome und wir importieren Use Snack Bar aus der Dann werden wir in gelöschter Reihenfolge die Ladevorgänge durchführen. Also laden , fertig laden Set Force ist Standard, dann wird die Navigation, die wir nach dem Löschen verwenden werden , erfolgreich sein. Verwenden Sie Navigate. Dann speichern wir die ID aus der URL. Verwenden Sie also PAMs. Und dann machen wir auch den Snackbar-Hook. Nein, Snackbar, benutze Snack Bar. Jetzt werden wir eine neue Funktion zum Löschen der Bestellung ausführen, also konstant, die Reihenfolge löschen. Dort setzen wir loading auf true, sodass der Spinner später anfängt, sich zu drehen Dann fügen wir den Spinner in UI Exis Dot, Delete, HCTP Localhost Dann setzen Sie Loading auf Falls. Danke. Snakbr mit gelöschter Bestellung. Erfolgreich. Erfolgreich und navigieren Sie zum Admin-Dashboard. Danach werden wir in jedem Fall erneut einen Fehler wie diesen feststellen. Wir werden den Ladevorgang wieder auf Herbst einstellen. In der Snack Bar werden wir einen Fehler beim Löschen der Bestellvariante senden der Bestellvariante und den Fehler sperren. Jetzt können wir zur Benutzeroberfläche wechseln. zuerst in der Mindy, werden wir etwas Pedding und etwas Hintergrund machen, und wir werden das Flexbox-Layout verwenden, um die Mitte zu rechtfertigen und die Elemente auch zentriert zu platzieren Dort werden wir den Spinner benutzen , wir werden das Laden überprüfen, und falls es wahr ist, rufen wir den Spinner auf. Dann werden wir in diesem Div einen Klassennamen Container, ein gewisses Maximalgewicht, Mittelpunkt, etwas Schatten Wir können es abrunden und den Hintergrund zu weißem Text in der Mitte machen, weil dieses Div die eigentlichen Informationen enthält Also können wir zuerst die B-Taste dort platzieren. Lassen Sie uns also einfach Essen herstellen. Dann haben wir den B-Knopf in dieser Leitung, also lasst uns das klären. Stell es da hin. Es bringt uns zurück zum Armaturenbrett. Ich kann das machen, damit du die Klasse vollständig sehen kannst. Importiere den Link. Das ist besser. Für das Styling werde ich es so machen. Dort werden wir mit der zweiten Überschrift fortfahren, in der es heißt: Möchten Sie diese Bestellung wirklich löschen? Wir fügen einen Klassennamen hinzu. Also die Textgröße erhöhen, nach unten marschieren, Semi-Boot-Formular, Textgrad, ich weiß nicht, 800. Und da machen wir die Schaltfläche zum Löschen. Mit der Klickfunktion zur Steuerung der Löschreihenfolge und mit Klasse rund rot auf 600 auf ihrem Hintergrund rot auf 800, Text auf weiß, etwas Bettwäsche weiß auf zwei, da x24, abgerundet mittel mit 24, speichern Und jetzt versuchen wir es. Lassen Sie uns dort tatsächlich eine mittlere Höhe hinzufügen. Also machen wir im Haupt-Div den Bildschirm Mindesthöhe. Nun, was machen Minnehit von 60 Viewpodeit vielleicht. Ich habe das auf 60 Viewpodeit geändert. Jetzt sollte es besser sein, und ich mag es immer noch nicht. Lass uns etwas Polsterung hinzufügen. Lass uns zehn machen. In unseren Bestellungen werden wir versuchen, diese Bestellung, die wir dort haben, löschen, zu löschen und sie wurde gelöscht. Das Einzige, was ich gesehen habe, ist ein Tippfehler. Noch nicht, aber ja, lösche es. Außerdem werden wir die Erfolgs-Komponente dort verwenden, die sich unterhalb dieser Bestellung in der Datenbank befindet. Wir werden einen lokalen Speicherpunkt zum Entfernen des Artikels ausführen und dort die Kartenartikel entfernen, und dort die Kartenartikel entfernen da wir nach einem erfolgreichen Checkout nicht möchten, dass sich weitere Artikel in unserem Kartenartikel befinden. 32. JWT Auth-Finish: In Index JS werden wir diese globale Autorisierung jetzt mit unserem JWT-Token löschen mit unserem JWT-Token Für das Upload-Bild werden wir das Komma abschalten, damit es die Autorisierung verwendet Da haben wir es schon. Jetzt werden wir zur Lebensmittelroute gehen und dort auch diese Genehmigung hinzufügen. Lassen Sie uns diesen Import auch in die Lebensmittelroute kopieren und einfügen. Lassen Sie uns diese Autorisierung nun auch dort für das Löschen verwenden . Und da zum Update. Gehen Sie zur Bestellung, fügen Sie sie dort ein und verwenden Sie die Autorisierung auch dort, und verwenden Sie die Autorisierung auch um eine bestehende Bestellung zu aktualisieren. Nehmen wir das auch zum Löschen. Dann müssen wir in Dit Food, Essen löschen und Bestellkomponenten löschen. Wir müssen die Konfiguration vornehmen. Da machen wir also eine Konstante mit dem Token. Wir werden es aus dem lokalen Speicher holen und wir werden auch eine Konstante mit der Konfiguration erstellen , bei der wir das Token im Header senden werden. Wir werden die Coma-Konfiguration ausführen nachdem Exiles die URL eingegeben und aufgerufen Das Gleiche werden wir für das Löschen von Lebensmitteln tun. Also geben wir das Token mit der Konfiguration ein, fügen es dort in den Call ein und dasselbe gilt für die Löschreihenfolge. Token-Konfiguration und in den Exis ablegen. Jetzt können wir versuchen zu löschen. Es war nicht autorisiert, und jetzt ist es autorisiert. 33. Korrekturen und Tests: Du hast auch ein kleines Problem in einer Navigationsleiste behoben, da fehlt uns der Hintergrund, also setzen wir den Hintergrund grün auf 600 und lassen ihn tatsächlich an der richtigen Position in den Turner-Operator einfügen an der richtigen Position in den Turner-Operator Jetzt wird es so aussehen. Und für das Dashboard werden wir Overflow X Auto hinzufügen, damit wir auf diese Weise horizontal scrollen können Lassen Sie uns nun auf unserem lokalen Host 5173 den Schrägstrich Admin eingeben, und das bringt uns zu dieser Wir können auch ein Logo erstellen und das bringt uns auf diese Homepage. Wir werden auf unserer Seite den Slash Admin angeben. Wir werden das Register testen. Also lasst uns auf Registrieren klicken. Dort werden wir einige Daten ausfüllen. Ich fülle das aus, ich werde auf Registrieren klicken. Jetzt wird es mich automatisch zum Login weiterleiten. Ich werde die Daten hier eingeben. Jetzt werde ich auf Login klicken. Lösche das aktuelle Produkt, das ich dort habe, und ich werde neue Artikel für meine Seite erstellen. Speichere es. Und einen Hamburger. Jetzt haben wir da, das Produkt Wir können auf Abmelden klicken. Jetzt können wir als Kunde auf unserer Seite die Produkte sehen Ich kann sehen, dass ich dort einen Tippfehler gemacht habe. Wir können ganz einfach zur Admin-Seite zurückkehren. Wir haben DO eingelogt. Damit wir uns einfach wieder bei Hamburger anmelden können, klicken wir auf Bearbeiten Dort werden wir 10 löschen. Wir werden die Änderungen speichern. Wir können wieder raus. Wir müssen es nicht einmal. Wir können den Schrägstrich Admin löschen Dann können wir als Kunde sofort den Hamburger kaufen und zu unserer Karte gehen, wo er gezeigt wurde Dort können wir die Menge erhöhen, sodass ich am Ende zwei Hamburger kaufen möchte Ich kann zur Kasse gehen. Dort gebe ich die Daten ein und klicke auf Bezahlen. Sie werden mich auf die Seite mit erfolgreicher Zahlung weiterleiten , auf der diese Bestellung im Backend gespeichert wurde. Also werde ich jetzt wieder zu Slash Admin gehen. Dort gehe ich zum Dashboard und sehe dort die Bestellung, die ich gerade gemacht