หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

MERN-ผู้ดูแลระบบ-แผง

คุณสมบัติ

  • การออกแบบหน้าเข้าสู่ระบบและเค้าโครงพื้นฐานทำได้โดยใช้ Bootstrap

  • JWT และหนังสือเดินทางสำหรับการตรวจสอบสิทธิ์

  • DataTable พร้อมการแบ่งหน้าฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์

  • หลายประเภท

  • ตัวกรอง

  • การออกแบบขั้นต่ำ

  • สามารถควบคุมได้อย่างเต็มที่ผ่านอุปกรณ์ประกอบฉากเสริมและการโทรกลับ

สาธิต

คลิกที่นี่

สคริปต์ที่มีอยู่

เพื่อเริ่มเซิร์ฟเวอร์และไคลเอนต์พร้อมกัน

npm run dev

เพื่อสร้างแอปพลิเคชันแบบโต้ตอบ

ไคลเอนต์ซีดีและเรียกใช้

npm run build

การใช้งานตัวอย่าง DataTable พร้อมข้อมูลคงที่

 นำเข้า React, { ส่วนประกอบ, ชิ้นส่วน } จาก 'react'; นำเข้า { render} จาก 'react-dom'; นำเข้า ReactDatatable จาก '@ashvin27/react-datatable'; แอปคลาสขยายส่วนประกอบ {constructor (อุปกรณ์ประกอบฉาก) {super (อุปกรณ์ประกอบฉาก) ;this.columns = [{key: "name",ข้อความ: "Name",className: "name",align: "left",จัดเรียงได้: จริง, }, {คีย์: "ที่อยู่", ข้อความ: "ที่อยู่", className: "ที่อยู่", จัดเรียง: "ซ้าย", เรียงลำดับได้: จริง}, {คีย์: "รหัสไปรษณีย์", ข้อความ: "รหัสไปรษณีย์", ชื่อคลาส: " รหัสไปรษณีย์", เรียงลำดับได้: จริง}, {คีย์: "การให้คะแนน", ข้อความ: "การให้คะแนน", ชื่อคลาส: "การให้คะแนน", จัดเรียง: "ซ้าย", จัดเรียงได้: จริง}, {คีย์: "type_of_food", ข้อความ: "ประเภทของอาหาร", className: "type_of_food", จัดเรียงได้: true, align: "left"}, {key: "action", text: "Action", className: "action", ความกว้าง: 100, align: "left ", เรียงลำดับได้: false, cell: record => { return (<Fragment><buttonclassName="btn btn-primary btn-sm"onClick={() => this.editRecord(บันทึก)}style={{marginRight: '5px'}}><i className="fa fa-edit"></i></button><button className="btn btn-danger btn-sm " onClick={() => this.deleteRecord(record)}><i className="fa fa-trash"></i></button></Fragment>);}}];this.config = { ขนาดหน้า: 10,length_menu: [ 10, 20, 50 ],ปุ่ม: {excel: true,print: true}}this.state = {บันทึก: [ {"id": "55f14312c7447c3da7051b26","address": "228 City Road" ,"ชื่อ": ".CN จีน", "รหัสไปรษณีย์": "3JH", "คะแนน": 5, "type_of_food": "จีน" }, {"id": "55f14312c7447c3da7051b27", "ที่อยู่": "376 Rayleigh Road","ชื่อ": "@ Thai", "รหัสไปรษณีย์": "5PT", "เรตติ้ง": 5.5,"type_of_food" : "ไทย" }, {"id": "55f14312c7447c3da7051b28","ที่อยู่": "30 ถนนเกรย์ฮาวด์ แฮมเมอร์สมิธ", "ชื่อ": "@ ร้านอาหารไทย", "รหัสไปรษณีย์": "8NX", "คะแนน": 4.5,"type_of_food": "ไทย" }, {"id": "55f14312c7447c3da7051b29"," ที่อยู่": "30 ถนนเกรฮาวด์ แฮมเมอร์สมิธ", "ชื่อ": "@ ร้านอาหารไทย", "รหัสไปรษณีย์": "8NX", "คะแนน": 4.5,"type_of_food": "Thai" }]}}editRecord(บันทึก) {console.log("Edit Record", record);}deleteRecord(บันทึก) {console.log("Delete Record", record);}render () {กลับ (<div><ReactDatatableconfig={this.config}records={this.state.records}columns={this.columns}/></div>)}}render(<แอป />, document.getElementById("app "));
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด