الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

MERN-لوحة الإدارة

سمات

  • تم تصميم صفحة تسجيل الدخول والتخطيط الأساسي باستخدام Bootstrap

  • JWT وجواز السفر للمصادقة

  • Datatable مع ترقيم الصفحات من جانب العميل والخادم

  • متعدد النوع

  • المرشحات

  • الحد الأدنى من التصميم

  • يمكن التحكم بها بالكامل عبر الدعائم الاختيارية وعمليات الاسترجاعات

تجريبي

انقر هنا

البرنامج النصي المتاح

لبدء الخادم والعميل في وقت واحد

npm run dev

لبناء تطبيق رد الفعل

عميل القرص المضغوط وتشغيله

npm run build

استخدام عينة Datatable مع البيانات الثابتة

 استيراد React، { Component، Fragment } من 'react'؛ استيراد { render} من 'react-dom'؛ استيراد ReactDatatable من '@ashvin27/react-datatable'؛ يقوم تطبيق الطبقة بتوسيع المكون {constructor(props) {super(props) ;this.columns = [{مفتاح: "اسم"، نص: "اسم"، اسم الفئة: "اسم"، محاذاة: "يسار"، قابل للفرز: صحيح،}، {المفتاح: "العنوان"، النص: "العنوان"، اسم الفئة: "العنوان"، محاذاة: "يسار"، قابل للفرز: صحيح}، {المفتاح: "الرمز البريدي"، النص: "الرمز البريدي"، اسم الفئة: " الرمز البريدي"، قابل للفرز: صحيح}، {مفتاح: "تصنيف"، نص: "تقييم"، اسم الفئة: "تقييم"، محاذاة: "يسار"، قابل للفرز: صحيح}، {مفتاح: "type_of_food"، نص: "نوع طعام"، اسم الفئة: "type_of_food"، قابل للفرز: صحيح، محاذاة: "يسار"}، {مفتاح: "إجراء"، نص: "إجراء"، اسم الفئة: "إجراء"، العرض: 100، محاذاة: "يسار"، قابل للفرز : خطأ، الخلية: سجل => { العودة (<Fragment><buttonclassName = "btn btn-primary btn-sm"onClick={() => this.editRecord(record)}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 = {page_size: 10, length_menu: [ 10, 20, 50 ],button: {excel: true,print : true}}this.state = {records: [ {"id": "55f14312c7447c3da7051b26"، "address": "228 مدينة Road"، "name": ".CN Chinese"، "postcode": "3JH"، " rating": 5، "type_of_food": "Chinese" }، {"id": "55f14312c7447c3da7051b27"، "address": " 376 طريق رايلي"، "اسم": "@ Thai"، "الرمز البريدي": "5PT"، "تصنيف": 5.5،"type_of_food": "Thai" }، {"id": "55f14312c7447c3da7051b28"، "address": "30 Greyhound Road Hammersmith"، "name": "@ Thai Restaurant"، "postcode": "8NX"، " rating": 4.5، "type_of_food": "Thai" }, {" id": "55f14312c7447c3da7051b29"، "address": "30 طريق جريهاوند هامرسميث"، "اسم": "@ مطعم تايلندي"، "الرمز البريدي": "8NX"، "تصنيف": 4.5،"type_of_food": "Thai" }]}}editRecord(record) {console.log("تحرير السجل" "، سجل)؛}deleteRecord(record) {console.log("حذف السجل"، سجل)؛}render() {return (<div><ReactDatatableconfig={this.config}records={this.state.records}columns={this.columns}/></div>)}}render(<App />, document.getElementById("app "));
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل