ดาวน์โหลด react rest admin panel - react rest admin panel ดาวน์โหลดซอร์สโค้ด

react-rest-admin-panel

แดชบอร์ดผู้ดูแลระบบที่ปรับขนาดได้และใช้งานง่ายซึ่งจะช่วยให้คุณจัดการข้อมูล REST API ที่สร้างด้วย React และ Mobx

สาธิต

https://rest-admin-panel.herokuapp.com/

คำอธิบาย

การสร้างส่วนหน้าสำหรับแผงผู้ดูแลระบบของเซิร์ฟเวอร์ REST API มักจะใช้เวลาในการออกแบบและพัฒนามากเสมอ และอาจซับซ้อนและท้าทาย โปรเจ็กต์นี้จะช่วยให้คุณเชื่อมต่อ API ของคุณกับแอปพลิเคชันฟรอนท์เอนด์ที่ปรับขนาดได้สำหรับการจัดการข้อมูลของคุณอย่างรวดเร็ว โปรเจ็กต์นี้ใช้ไฟล์การกำหนดค่า JSON ดังนั้นหากต้องการเพิ่มเอนทิตีใหม่เพื่อจัดการ คุณควรเพิ่มไฟล์กำหนดค่า [เอนทิตี].js เท่านั้น ตรรกะอื่นๆ ทั้งหมดจะเป็นแบบอัตโนมัติ นอกจากนี้ โปรเจ็กต์นี้ยังจัดเตรียมการบันทึก การรับรองความถูกต้อง และตรรกะพื้นฐานอื่นๆ ที่พร้อมใช้งานสำหรับแผงผู้ดูแลระบบอีกด้วย ตารางข้อมูลทั้งหมดมีคุณสมบัติการเรียงลำดับ การกรอง และการค้นหา นอกจากนี้ โปรเจ็กต์นี้ยังใช้เพจเพื่อสร้างและอัปเดตรายการเอนทิตีของคุณ

การติดตั้ง

ใช้ขั้นตอนเหล่านี้เพื่อติดตั้งโปรเจ็กต์

 1. yarn install
2. yarn start

สร้างโครงการ:

 yarn build

หน้าหลัก

รับรองหน้า
หน้าแรก
หน้ารายการเอนทิตี
อัปเดตหน้าเอนทิตี
เพิ่มหน้าเอนทิตีใหม่

หมายเหตุ: คุณยังสามารถเพิ่มหน้าที่กำหนดเองของคุณในโครงการได้ ซึ่งขึ้นอยู่กับคุณเสมอ! หากคุณคุ้นเคยกับไลบรารี React และ Mobx มันจะรวดเร็วและง่ายดาย

API ปลอม

โครงการมีเอนทิตีการทดสอบ (ผู้ใช้และเอนทิตีงาน) สำหรับการสาธิต ข้อมูลทั้งหมดที่สร้างขึ้นโดยใช้ไลบรารี faker.js นอกจากนี้โปรเจ็กต์นี้ยังมีเซิร์ฟเวอร์ API ปลอมพร้อมวิธีจำลองที่จะรับข้อมูลการทดสอบจากฟิกซ์เจอร์ คุณสามารถตรวจสอบวิธีการทำงานของโครงการได้ในแอปพลิเคชันสาธิต

ในการเข้าสู่แอปพลิเคชันสาธิต คุณควรระบุข้อมูลอีเมลและรหัสผ่าน แอปพลิเคชันจะไม่บันทึกข้อมูลของคุณและไม่ได้เชื่อมต่อกับเซิร์ฟเวอร์ส่วนหลังหรือฐานข้อมูลใดๆ

ไฟล์การกำหนดค่า

หากต้องการเพิ่มเอนทิตีใหม่ในโครงการ คุณควรสร้างไฟล์ [entity_name].js ใหม่ในโฟลเดอร์ /src/entities และเชื่อมต่อในไฟล์ /src/entities/index.js :

 // connect your entities here
import user from './user'
import task from './task'

// INFO: provide your entities here
const entities = [user, task]

export default entities

นี่คือไฟล์การกำหนดค่าเอนทิตีขั้นต่ำขั้นพื้นฐาน:

 import ExampleIcon from '@material-ui/icons/ExampleIcon'

export default {
  name: 'example',

  icon: ExampleIcon,

  url: 'https://url.to.entity.api',

  fields: [
    {
      name: 'name',
      type: 'string',
      rules: 'required'
    }
  ]
}

นี่คือ ตัวอย่างไฟล์การกำหนดค่า ที่มีฟิลด์ที่ซับซ้อนมากขึ้นสำหรับเอนทิตี Task :

 import React from 'react'
import Assignment from '@material-ui/icons/Assignment'
import apiUrls from '../utils/apiUrls'
import { UpdateEntityUrlMethod } from '../utils/constants'

// NOTICE: we should use .jsx extention for this file to support custom actions
export default {
  name: 'task',

  icon: Assignment,

  url: apiUrls.fake.task,

  updateUrlMethod: UpdateEntityUrlMethod.PATCH,

  filtersUrl: apiUrls.fake.taskFilters,

  pagination: { pageSize: 20, pageNumber: 1 },

  filters: [
    {
      name: 'status',
      value: ''
    },
    {
      name: 'importance',
      value: ''
    }
  ],

  fields: [
    {
      name: 'name',
      type: 'string',
      rules: 'required'
    },
    {
      name: 'desc',
      type: 'string',
      rules: 'email|required'
    },
    {
      name: 'status',
      type: 'dropdown',
      rules: 'required',
      options: ['Created', 'In progress', 'Closed'],
      // example of custom body action
      actions: {
        body: {
          custom: ({ value }) => (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  borderRadius: '50%',
                  width: 8,
                  height: 8,
                  marginRight: 8,
                  backgroundColor:
                    value === 'Created'
                      ? '#bbb'
                      : value === 'In progress'
                      ? '#3d2'
                      : '#222'
                }}
              />
              {value}
            </div>
          )
        }
      }
    },
    {
      name: 'importance',
      type: 'dropdown',
      rules: 'required',
      options: ['Low', 'Medium', 'High'],
      // example of custom body action
      actions: {
        body: {
          custom: ({ value }) => (
            <span
              style={{
                color: value === 'Low' ? '#3d2' : value === 'Medium' ? '#c37800' : '#e23'
              }}
            >
              {value}
            </span>
          )
        }
      }
    }
  ]
}

API ไฟล์การกำหนดค่า

ชื่อ

ชื่อเอนทิตี

ไอคอน

ไอคอนเอนทิตี จะแสดงบนเมนูแถบด้านข้าง คุณสามารถใช้ไอคอน MaterialUI หรือจัดเตรียมองค์ประกอบไอคอนที่กำหนดเอง หรือใช้ไฟล์ SVG แบบธรรมดา

URL

URL ฐานเอนทิตี URL นี้จะถูกใช้เพื่อดำเนินการ CRUD บนเอนทิตี

updateUrlMethod (ทางเลือก)

วิธี HTTP ที่จะใช้ในการอัปเดตเอนทิตีการอัพเดต โดยค่าเริ่มต้นโครงการจะใช้วิธีการ PATCH วิธีการที่ใช้ได้คือ PUT และ PATCH คุณสามารถกำหนดค่าตามตัวอักษร [ PATCH , POST ] ที่นี่ หรือใช้ UpdateEntityUrlMethod enum จาก src/utils/constants

filterUrl (ไม่บังคับ)

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

 NOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.

การแบ่งหน้า (ไม่จำเป็น)

ฟิลด์การแบ่งหน้าจะเปลี่ยนกฎการแบ่งหน้าเริ่มต้น เนื่องจากโครงการเริ่มต้นจะใช้ค่า pageSize = 20 และ pageNumber = 1

ตัวอย่าง:

 pagination: { pageSize: 20, pageNumber: 1 }

ฟิตเลอร์ (ไม่จำเป็น)

อาร์เรย์ที่มีตัวกรองเอนทิตี

ฟิลด์ตัวกรอง:

 {
  name: 'status',   // name, should be one of the entity fields names
  value: ''         // default filter value
  options: []       // array of options, you can provide them here or fecth async using `filtersUrl`
}

สาขา

อาร์เรย์นี้ควรมีการกำหนดค่าฟิลด์เอนทิตีทั้งหมด

ฟิลด์:

 name: 'name',                                     // field name
type: 'dropdown',                                 // field type
rules: 'required',                                // field validation rules
options: ['Created', 'In progress', 'Closed'],    // array of options, only for dropdown type
actions: {                                        // field custom actions
  head: {                                         // field head custom axtions
    custom: <ReactElement>,                       // custom action React element
    className                                     // head custom className
  }
  body: {                                         // body custom actions
    custom:  <ReactElement>,                      // custom action React element
    className                                     // body custom className
  }
}

ฟิลด์ฟิลด์เอนทิตี

ชื่อ

ชื่อฟิลด์เอนทิตี

พิมพ์

ประเภทฟิลด์เอนทิตี ประเภทที่ใช้ได้: ตัวเลข, บูลีน, สตริง, ดรอปดาวน์

หากประเภทฟิลด์เป็นแบบบูเลนใน Entity edit page จะถูกแสดงผลเป็นองค์ประกอบช่องทำเครื่องหมาย หากประเภทฟิลด์เป็นแบบเลื่อนลง ก็จะถูกแสดงผลเป็นองค์ประกอบ <select> พร้อมตัวเลือกจากฟิลด์ <options>

กฎ

กฎการตรวจสอบฟิลด์เอนทิตี คุณสามารถตรวจสอบกฎที่มีอยู่ทั้งหมดได้ในหน้า validator.js API

ตัวเลือก

อาร์เรย์ของตัวเลือกแบบเลื่อนลงสำหรับประเภทช่องแบบ dropdown เท่านั้น

การกระทำ

การดำเนินการเป็นองค์ประกอบ React ที่กำหนดเอง คุณสามารถใช้การดำเนินการได้หากคุณต้องการปรับแต่งตารางเอนทิตีของคุณด้วยฟิลด์พิเศษในเนื้อหาหรือส่วนหัวของตาราง เพียงส่งฟังก์ชันการเรนเดอร์แบบกำหนดเองในฟิลด์ custom ด้วยฟังก์ชันนี้คุณสามารถทำได้

ตัวอย่าง:

 actions: {
        body: {
          custom: ({ value, name, history }) => (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  borderRadius: '50%',
                  backgroundColor:
                    value === 'Created'
                      ? '#bbb'
                      : value === 'In progress'
                      ? '#3d2'
                      : '#222'
                }}
              />
              {value} {name}
              <button onClick={() => history.push('home')}>Go to home</button>
            </div>
          )
        }
      }

ฟังก์ชัน Render จะได้รับ value , className , name และอ็อบเจ็กต์ history ของไลบรารี react-router-dom คุณสามารถเพิ่มการดำเนินการลงในองค์ประกอบส่วนหัวและเนื้อหาได้ ซึ่งจะปรับแต่งรายการส่วนหัวและเนื้อหาตารางตามนั้น