dashmin

...แดชมิน...

_{สร้างด้วย ❤︎ โดย Romullo}

สวัสดี dev .. นี่คือ Dashmin! ไม่มีอะไรมากไปกว่าฐานที่เรียบง่ายและสง่างามที่จะช่วยคุณในการพัฒนาระบบการบริหารของคุณ มันยังไม่มีส่วนประกอบมากมาย แต่ก็มีไลบรารี่ที่มีชื่อเสียงอยู่แล้ว เช่น Material UI และ Reactstrap รวมอยู่ด้วย ดังนั้น หากคุณรู้จักส่วนประกอบเหล่านี้ มันจะเป็นเรื่องง่ายที่จะสร้างเพจของคุณ .. หากคุณไม่ต้องการใช้ส่วนประกอบใด ๆ ของ อย่าลังเลที่จะใช้ห้องสมุด ตามที่คุณต้องการ มาเริ่มกันเลย

หากคุณต้องการสร้างผู้ดูแลระบบของคุณโดยใช้ DASHmin โปรดทำตามบทช่วยสอนการติดตั้งด้านล่าง!

✓ โครงสร้าง

├── 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

✓ ดูตัวอย่าง

ผู้ใช้: บัตรผ่าน dashmin: 123

การสาธิตสด

เข้าสู่ระบบ

ผู้ดูแลระบบ

✓ ข้อกำหนด

หากต้องการรันโปรเจ็กต์นี้ คุณต้องติดตั้ง Node.js บนเครื่องของคุณ! หากคุณยังไม่มี ให้ไปที่เว็บไซต์ https://nodejs.org/en/ แล้วดาวน์โหลดและติดตั้งตามที่สอนในเอกสารประกอบ!

✓ การติดตั้ง

เพื่อเริ่มโคลนพื้นที่เก็บข้อมูลและติดตั้งการขึ้นต่อกันโดยใช้คำสั่งด้านล่าง

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

 cd nameOfYourProject

 yarn install

หรือ

 npm install

✓ วิธีการใช้งาน

ถูกต้อง .. หลังจากติดตั้งการอ้างอิงทั้งหมดแล้ว คุณสามารถเรียกใช้แอปพลิเคชันและตรวจสอบว่าทุกอย่างทำงานอย่างถูกต้องหรือไม่

 yarn run start

หรือ

 npm run start

พร้อม!! หากทุกอย่างเป็นไปด้วยดี เพียงตรวจสอบแอปพลิเคชันของคุณในเบราว์เซอร์ http://127.0.0.1:3000/

✓ สร้างมุมมองของคุณ

Dashmin ได้รับการตั้งค่าทั้งหมดแล้ว ดังนั้นสำหรับผู้เริ่มต้น คุณสามารถสร้างมุมมองของคุณใน src/views/YourView จากนั้นใช้ในไฟล์เส้นทางใน routes

มุมมอง / Example01.js

ภายในไดเร็กทอรี views ให้สร้างองค์ประกอบมุมมองของคุณที่จะแสดงผล

 // Imports
import React from 'react' ;

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

export default Example01 ; 

มุมมอง / Example02.js

 // Imports
import React from 'react' ;

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

export default Example02 ; 

✓ การกำหนดค่าเส้นทางและ Dashmin

เส้นทาง/index.js

หลังจากสร้างมุมมองของคุณแล้ว ให้ไปที่ routes/index.js และนำเข้ามุมมองที่สร้างขึ้น

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

กำหนดเส้นทางของคุณ

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

หลังจากกำหนดเส้นทางแล้ว ให้กำหนด const Dashmin โดยการส่งผ่านการกำหนดคุณสมบัติ Dashmin ต้องการข้อมูลสำหรับ navbar sidebar และ content ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องแจ้งให้พวกเขาทราบ

 const Dashmin = {
  // navbar
  navbar : {

  }

  // sidebar
  sidebar : {

  }

  // Content
  content : [

  ]
} 

แถบนำทาง: { }

ใน navbar คุณต้องป้อนวัตถุดรอปดาวน์ที่มีวัตถุ user และ buttons

 // 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 ( ) ;          
        }
      }
    }
  } ,
} 

แถบด้านข้าง: { }

สำหรับ sidebar คุณจะต้องผ่าน brand และ buttons สำหรับ brand คุณต้องส่งเฉพาะชื่อองค์กรของคุณโดยป้อนชื่อเต็ม max และตัวย่อ min สำหรับ buttons จำเป็นต้องมี name icon และ route

เกี่ยวกับระบบปฏิบัติการ .. o Dashmin usa o React icons , คำสั่งง่ายๆ , นำเข้าระบบปฏิบัติการ , ไอคอน , คำสั่ง , คำสั่ง , ส่วนประกอบ , ไอคอน

 // 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 ,
      } ,
    ]
  }
} 

เนื้อหา: [ ]

สุดท้ายก็ในส่วนของเนื้อหา เนื่องจากจำเป็นต้องส่งอาร์เรย์ของออบเจ็กต์ที่มี route และส่วนประกอบการแสดงภาพเพื่อที่จะ 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
    } ,
  ]
}

การกำหนดค่าแบบเต็ม

ไฟล์เส้นทางที่มีการตั้งค่าที่ทำไว้ข้างต้น

เส้นทาง/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 ;

จบ

เมื่อคุณทำตามขั้นตอนข้างต้นแล้ว ตอนนี้คุณสามารถทดสอบแอปของคุณโดยใช้คำสั่งใดคำสั่งหนึ่งด้านล่างนี้ หากคุณยังไม่เคยเรียกใช้มาก่อน

 yarn run start

หรือ

 npm run start

พร้อม!! หากทุกอย่างเป็นไปด้วยดี เพียงตรวจสอบแอปพลิเคชันของคุณในเบราว์เซอร์ http://127.0.0.1:3000/

✓ ห้องสมุด

- UI วัสดุ

- รีแอคสแตรป

- ไอคอนตอบสนอง

- ตอบสนองเราเตอร์ Dom

- รีดักซ์

- ส่วนประกอบที่มีสไตล์