React_Cherry_Demo

Reagieren Sie Cherry Demo

Dies ist ein Webprojekt von React und Material UI. In diesem Projekt verfügen wir über ein Benutzersystem, Produkte und Bestellungen sowie eine API des Datenformulars.

Im Benutzersystem verfügen wir über ein Register und eine Anmeldeseite, mit der neue Benutzer registriert und sich vom Benutzer anmelden können. Wenn wir uns nicht als Benutzer anmelden, können wir nur auf eine Homepage zugreifen. Andernfalls können wir Produkte und Bestellungen eingeben, um Produkte und Bestellungen von API zu überprüfen.

Auf der Produktseite von Produkten erhalten wir alle Produktdaten von API und zeigen sie in der materiellen UI -Kollabierungstabelle mit Pagination, Sortierung und Suche. Jedes Produkt kann bearbeitet und gelöscht werden. Wir können auch neue Produkte hinzufügen und Bild in Produkte hochladen.

Auf der Seite "Bestellungen" erhalten wir alle Bestelldaten von API und zeigen in der Tabelle. Bestellungen Zeile können nach Datum gefiltert werden.

Sowohl Produkte als auch Auftragsseite können Daten in die CSV -Datei exportieren.

Abhängigkeiten verwendet

Material UI

npm install @material-ui/core

Material UI Start

Axios

npm install axios

Axios fangen an

React Router Dom

npm install react-router-dom

React Router Dom Starten Sie los

Reagieren csv

npm i react-csv

React CSV installiert

Projekt Screenshot

Startseite

Anmeldeseite

Seite registrieren

Produkte Seite

Produkt hinzufügen

Produkt bearbeiten

Produkt löschen

Produkte suchen

Spinner

Bestellungen mit unterschiedlicher Pagination

Bestellungen Datum des Filters