react rest admin panel herunterladen – react rest admin panel Quellcode herunterladen

React-Rest-Admin-Panel

Skalierbares und benutzerfreundliches Admin-Dashboard, das Ihnen bei der Verwaltung Ihrer mit React und Mobx erstellten REST-API-Daten hilft.

DEMO

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

Beschreibung

Das Erstellen eines Frontend-Teils für das Admin-Panel des REST-API-Servers nimmt beim Entwerfen und Entwickeln immer viel Zeit in Anspruch und kann kompliziert und herausfordernd sein. Dieses Projekt hilft Ihnen, Ihre API schnell mit einer skalierbaren Frontend-Anwendung zur Verwaltung Ihrer Daten zu verbinden. Dieses Projekt basiert auf JSON-Konfigurationsdateien. Um also eine neue Entität zur Verwaltung hinzuzufügen, sollten Sie nur die Konfigurationsdatei [entity].js dafür hinzufügen, die gesamte andere Logik ist automatisiert. Außerdem bietet dieses Projekt gebrauchsfertige Protokollierung, Authentifizierung und andere Basislogik für das Admin-Panel. Alle Datentabellen enthalten Sortier-, Filter- und Suchfunktionen. Außerdem implementiert dieses Projekt Seiten zum Erstellen und Aktualisieren Ihrer Entitätselemente.

Installation

Führen Sie diese Schritte aus, um das Projekt zu installieren

 1. yarn install
2. yarn start

Bauprojekt:

 yarn build

Hauptseiten

Auth-Seite
Startseite
Entitätslistenseite
Entitätsseite aktualisieren
Neue Entitätsseite hinzufügen

HINWEIS: Sie können dem Projekt auch Ihre benutzerdefinierte Seite hinzufügen, es liegt immer bei Ihnen! Wenn Sie mit React- und Mobx-Bibliotheken vertraut sind, wird es schnell und einfach gehen.

Gefälschte API

Das Projekt enthält bereits Testentitäten (Benutzer- und Aufgabenentität) zur Demonstration. Alle Daten werden mit der Bibliothek faker.js generiert. Außerdem enthält dieses Projekt einen gefälschten API-Server mit simulierten Methoden, die Testdaten von Vorrichtungen übernehmen. Sie können die Funktionsweise des Projekts in der Demoanwendung überprüfen.

Um an der Demo-Anwendung teilzunehmen, müssen Sie Ihre E-Mail- und Passwortdaten angeben. Die Anwendung speichert Ihre Daten nicht und ist nicht mit einem Back-End-Server oder einer Datenbank verbunden.

Konfigurationsdatei

Um dem Projekt eine neue Entität hinzuzufügen, sollten Sie eine neue Datei [entity_name].js im Ordner /src/entities erstellen und diese in der Datei /src/entities/index.js verbinden:

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

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

export default entities

Hier ist die grundlegende Konfigurationsdatei für die minimale Entität:

 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'
    }
  ]
}

Hier ist eine Beispielkonfigurationsdatei , die komplexere Felder für die Task Entität enthält:

 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>
          )
        }
      }
    }
  ]
}

Konfigurationsdatei-API

Name

Entitätsname.

Symbol

Das Entitätssymbol wird im Seitenleistenmenü angezeigt. Sie können MaterialUI-Symbole verwenden, benutzerdefinierte Symbolkomponenten bereitstellen oder eine einfache SVG-Datei verwenden.

URL

Basis-URL der Entität. Diese URL wird verwendet, um CRUD-Vorgänge für die Entität durchzuführen.

updateUrlMethod (optional)

HTTP-Methode, die zum Aktualisieren der Update-Entität verwendet wird. Standardmäßig verwendet das Projekt die PATCH-Methode. Verfügbare Methoden sind PUT und PATCH. Sie können hier Literalwerte [ PATCH , POST ] zuweisen oder UpdateEntityUrlMethod Enumeration aus src/utils/constants verwenden.

filterUrl (optional)

updateUrlMethod wird zum Abrufen von Entitätsfiltern verwendet, die zum Filtern von Entitätselementen in der Entitätstabelle verwendet werden können. Der Filtername sollte eines der Entitätsfelder sein. Dieser Parameter ist optional und Sie können alle Optionen für Filter innerhalb filters Filterelementobjekts bereitstellen, indem Sie sie einfach fest codieren. Wenn Sie jedoch über eine große Anzahl einzigartiger Optionen für den Filter verfügen, möchten Sie diese wahrscheinlich asynchron von einem API-Endpunkt abrufen.

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

Paginierung (optional)

Das Paginierungsfeld ändert die Standard-Paginierungsregeln. Als Standardprojekt werden die Werte pageSize = 20 und pageNumber = 1 verwendet.

Beispiel:

 pagination: { pageSize: 20, pageNumber: 1 }

Monteure (optional)

Array, das Entitätsfilter enthält.

Filterfelder:

 {
  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`
}

Felder

Dieses Array sollte die Konfiguration aller Entitätsfelder enthalten.

Feldfelder:

 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
  }
}

Entitätsfeldfelder

Name

Name des Entitätsfelds

Typ

Entitätsfeldtyp. Verfügbare Typen: Zahl, Boolescher Wert, Zeichenfolge, Dropdown.

Wenn der Feldtyp auf der Entity edit page boolen ist, wird er als Checkbox-Element gerendert. Wenn der Feldtyp Dropdown ist, wird er als <select> -Element mit Optionen aus dem Feld <options> gerendert.

Regeln

Validierungsregeln für Entitätsfelder: Sie können alle verfügbaren Regeln auf der API-Seite validator.js überprüfen.

Optionen

Array von Dropdown-Auswahloptionen, nur für dropdown Feldtyp.

Aktionen

Actions ist ein benutzerdefiniertes React-Element. Sie können Aktionen verwenden, wenn Sie Ihre Entitätstabelle mit speziellen Feldern im Tabellenhauptteil oder in der Kopfzeile anpassen möchten. Übergeben Sie einfach die benutzerdefinierte Renderfunktion im custom Feld. Mit dieser Funktion können Sie

Beispiel:

 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>
          )
        }
      }

Die Render-Funktion empfängt value , className , name und das history der React-Router-Dom-Bibliothek. Sie können den Kopf- und Körperelementen Aktionen hinzufügen, wodurch die Kopf- und Körperelemente der Tabelle entsprechend angepasst werden.