React_Cherry_Demo

ตอบโต้การสาธิตเชอร์รี่

นี่คือโครงการเว็บที่ทำโดย React และ Material UI ในโครงการนี้เรามีระบบผู้ใช้ผลิตภัณฑ์และคำสั่งซื้อและรับ API แบบฟอร์มข้อมูล

ในระบบผู้ใช้เรามีหน้าลงทะเบียนและหน้าเข้าสู่ระบบซึ่งสามารถลงทะเบียนผู้ใช้ใหม่และเข้าสู่ระบบโดยผู้ใช้ หากเราไม่เข้าสู่ระบบในฐานะผู้ใช้เราสามารถเข้าถึงโฮมเพจได้เท่านั้นมิฉะนั้นเราสามารถป้อนหน้าผลิตภัณฑ์และคำสั่งซื้อเพื่อตรวจสอบผลิตภัณฑ์และคำสั่งซื้อข้อมูลจาก API

ในหน้าผลิตภัณฑ์เราได้รับข้อมูลผลิตภัณฑ์ทั้งหมดจาก API และแสดงในวัสดุ UI ที่ยุบด้วยวัสดุด้วยการปนเปื้อนการเรียงลำดับและการค้นหาแต่ละผลิตภัณฑ์สามารถแก้ไขและลบได้เรายังสามารถเพิ่มผลิตภัณฑ์ใหม่และอัปโหลดภาพลงในผลิตภัณฑ์

ในหน้าคำสั่งซื้อเช่นเดียวกับหน้าผลิตภัณฑ์เราได้รับข้อมูลคำสั่งซื้อทั้งหมดจาก API และแสดงในตาราง คำสั่งซื้อแถวสามารถกรองตามวันที่

ทั้งผลิตภัณฑ์และหน้าคำสั่งซื้อสามารถส่งออกข้อมูลไปยังไฟล์ CSV

การพึ่งพา

วัสดุ UI

npm install @material-ui/core

วัสดุ ui เริ่มต้น

ซอกซอก

npm install axios

Axios เริ่มต้น

ตอบสนองเราเตอร์ Dom

npm install react-router-dom

ตอบสนองเราเตอร์ Dom เริ่มต้นใช้งาน

ตอบสนอง CSV

npm i react-csv

ติดตั้ง CSV React

ภาพหน้าจอโครงการ

โฮมเพจ

หน้าเข้าสู่ระบบ

ลงทะเบียนเพจ

หน้าผลิตภัณฑ์

เพิ่มผลิตภัณฑ์

แก้ไขผลิตภัณฑ์

ลบผลิตภัณฑ์

การค้นหาผลิตภัณฑ์

เครื่องปั่นป่วน

คำสั่งซื้อที่มีการแบ่งหน้าแตกต่างกัน

ตัวกรองวันที่คำสั่งซื้อ