dashmin

... Dashmin ...

_{Gebaut mit ❤︎ von Romullo}

Hallo Entwickler. Das ist Dashmin! Es ist nichts weiter als eine einfache und elegante Basis, die Sie bei der Entwicklung Ihres Verwaltungssystems unterstützt. Es verfügt noch nicht über viele Komponenten, aber es sind bereits einige berühmte Bibliotheken wie Material UI und Reactstrap integriert. Wenn Sie also eine davon kennen, wird es einfach sein, Ihre Seiten zu erstellen ... wenn Sie keine davon verwenden möchten Sie können gerne die Bibliothek nutzen. nach Ihrem Geschmack. Also fangen wir an.

Wenn Sie Ihren Admin mit DASHmin erstellen möchten, befolgen Sie das Installations-Tutorial unten!

✓ Struktur

├── assets
│   ├── logo.png
│   ├── login.png
│   ├── dashmin.png
├── node_modules
├── public
├── src
│   ├── components
│   ├── helpers
│   ├── routes
│   ├── services
│   ├── store
│   ├── views
│   ├── App.js
│   ├── index.js
├── .editorconfig
├── .env
├── .gitignore
├── .travis.yml
├── package.json
├── README.md
└── LICENSE.md

✓ Vorschau

Benutzer: dashmin pass: 123

Live-Demo

Login

Admin

✓ Anforderungen

Um dieses Projekt auszuführen, muss Node.js auf Ihrem Computer installiert sein! Wenn Sie es nicht haben, gehen Sie auf die Website https://nodejs.org/en/ und laden Sie es herunter und installieren Sie es, wie es in der Dokumentation beschrieben wird!

✓ Installation

Um mit dem Klonen des Repositorys zu beginnen und die Abhängigkeiten zu installieren, verwenden Sie die folgenden Befehle.

 git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject

 cd nameOfYourProject

 yarn install

oder

 npm install

✓ Wie man es benutzt

Richtig ... nach der Installation aller Abhängigkeiten können Sie die Anwendung ausführen und prüfen, ob alles ordnungsgemäß funktioniert.

 yarn run start

oder

 npm run start

Bereit!! Wenn alles gut gelaufen ist, überprüfen Sie einfach Ihre Bewerbung im Browser http://127.0.0.1:3000/.

✓ Erstellen Sie Ihre Ansichten

Dashmin ist bereits vollständig eingerichtet. Sie können also zunächst Ihre Ansichten in src/views/YourView erstellen und sie dann in der Routendatei in routes verwenden.

Ansichten / Beispiel01.js

Erstellen Sie im Verzeichnis views Ihre zu rendernde Ansichtskomponente.

 // Imports
import React from 'react' ;

// Products
const Example01 = ( ) => (
  < div >
    < h1 > Example01 </ h1 >
  </ div >
) ;

export default Example01 ; 

Ansichten / Beispiel02.js

 // Imports
import React from 'react' ;

// Products
const Example02 = ( ) => (
  < div >
    < h1 > Example02 </ h1 >
  </ div >
) ;

export default Example02 ; 

✓ Konfigurieren von Routen und Dashmin

Routen / index.js

Nachdem Sie Ihre Ansicht erstellt haben, gehen Sie zu routes/index.js und importieren Sie die erstellten Ansichten.

 // Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;

Definieren Sie Ihre Routen.

 // Routes
const Routes = {
  example01 : '/example01' ,
  example02 : '/example02' ,
} ;

Nachdem Sie die Routen definiert haben, definieren Sie einen const Dashmin indem Sie definierende Eigenschaften übergeben. Dashmin benötigt Informationen für navbar , sidebar und content . Daher ist es wichtig, sie zu informieren.

 const Dashmin = {
  // navbar
  navbar : {

  }

  // sidebar
  sidebar : {

  }

  // Content
  content : [

  ]
} 

Navigationsleiste: { }

In navbar müssen Sie ein Dropdown-Objekt eingeben, das die user und buttons enthält.

 // Serices
import { logout }  from 'services/auth' ;

const Dashmin = {
  // navbar
  navbar : {
    // Dropdown
    dropdown : {
      // User Profile
      user : {
        avatar : 'https://i.imgur.com/NpICPSl.jpg' ,
        name : 'R o m u l l o' ,
        jobRole : 'Administrator' ,
      } ,

      // Buttons events
      buttons : {
        settings : ( ) => { } ,
        profile : ( ) => { } ,
        logout : ( ) => {
          logout ( ) ;
          document . location . reload ( ) ;          
        }
      }
    }
  } ,
} 

Seitenleiste: { }

Für die sidebar müssen Sie brand und buttons übergeben. Für brand müssen Sie nur den Namen Ihrer Organisation angeben, indem Sie den vollständigen Namen max und den abgekürzten min eingeben. Für buttons sind ein name , icon und route erforderlich.

Wenn Sie die Symbole verwenden oder Dashmin die React icons verwenden möchten, müssen Sie einfach die Symbole importieren, die Sie verwenden möchten, und die Komponente für das Symbol verwenden.

 // Icons
import {
  IoMdOptions ,
  IoMdPeople ,
} from 'react-icons/io' ;

const Dashmin = {
  // sidebar
  sidebar : {
    // brand
    brand : {
      max : 'D A S H M I N' ,
      min : 'dmin'
    } ,

    // buttons
    buttons : [
      {
        name : 'Example01' ,
        icon : < IoMdOptions /> ,
        route : Routes . example01 ,
      } ,
      {
        name : 'Example02' ,
        icon : < IoMdOptions />
        route : Routes . example02 ,
      } ,
    ]
  }
} 

Inhalt: [ ]

Endlich der Teil des Inhalts. Denn es ist notwendig, ein Array von Objekten zu übergeben, die die route und die Visualisierungskomponente enthalten, um sie einlösend view .

 // Views
import Example01 from 'pages/example01' ;
import Example02 from 'pages/example02' ;

const Dashmin = {
  // content
  content : [
    {
      route : Routes . example01 ,
      view : Example01
    } ,
    {
      route : Routes . example02 ,
      view : Example02
    } ,
  ]
}

Vollständige Konfiguration

Die Routendatei mit den oben vorgenommenen Einstellungen.

Routen / index.js

 // React
import React from 'react' ;

// Views
import Example01 from 'views/example01' ;
import Example02 from 'views/example02' ;

// Icons
import {
  IoMdOptions ,
  IoMdPeople ,
} from 'react-icons/io' ;

// Routes
const Routes = {
  example01 : '/example01' ,
  example02 : '/example02' ,
} ;

// Dashmin
const Dashmin = {
  // Navbar
  navbar : {
    // Dropdown
    dropdown : {
      // User Profile
      user : {
        avatar : 'https://i.imgur.com/NpICPSl.jpg' ,
        name : 'R o m u l l o' ,
        jobRole : 'Administrator' ,
      } ,

      // Buttons events
      buttons : {
        settings : ( ) => { } ,
        profile : ( ) => { } ,
        logout : ( ) => {
          logout ( ) ;
          document . location . reload ( ) ;          
        }
      }
    }
  } ,

  // Sidebar
  sidebar : {
    // brand
    brand : {
      max : 'D A S H M I N' ,
      min : 'dmin'
    } ,

    // buttons
    buttons : [
      {
        name : 'Example01' ,
        icon : < IoMdOptions /> ,
        route : Routes . example01 ,
      } ,
      {
        name : 'Example02' ,
        icon : < IoMdOptions />
        route : Routes . example02 ,
      } ,
    ]
  } ,

  // Content
  content : [
    {
      route : Routes . example01 ,
      view : Example01
    } ,
    {
      route : Routes . example02 ,
      view : Example02
    } ,
  ]
} ;

export default Dashmin ;

Abschluss

Nachdem Sie die oben genannten Schritte ausgeführt haben, können Sie Ihre App nun mit einem der folgenden Befehle testen, sofern Sie sie noch nicht ausgeführt haben.

 yarn run start

oder

 npm run start

Bereit!! Wenn alles gut gelaufen ist, überprüfen Sie einfach Ihre Bewerbung im Browser http://127.0.0.1:3000/.

✓ Bibliotheken

? Material-Benutzeroberfläche

? Reactstrap

? Reaktionssymbole

? Reagieren Sie auf den Router-Dom

? Redux

? Gestylte Komponenten