react admin template pro

React-Admin-Template-Pro

• Pratinjau daring
• Silakan kirimkan pertanyaan dan saran di sini

Kata pengantar

Sebelum membangun sistem ini, saya melakukan riset dan menemukan bahwa proyek yang terkait dengan templat backend React memiliki karakteristik sebagai berikut: tumpukan teknologi lama, proyek yang tidak lengkap, dokumen hilang, dan komponen yang tidak fleksibel (kebanyakan dikodekan secara keras). Pada saat yang sama, sistem ini ditulis untuk memudahkan pemrogram junior menemukan proyek latihan yang sesuai, bagi insinyur full-stack untuk menggunakan sistem untuk membangun proyek dengan cepat, dan bagi staf front-end untuk langsung menulis kode bisnis untuk menghindarinya. pekerjaan berulang.

Perkenalan

Sistem ini adalah templat sistem manajemen backend yang dikembangkan berdasarkan React Hooks dan React-Router V6 . Tumpukan teknologi yang digunakan di seluruh sistem relatif baru dan dibangun dengan cara yang terkomponen, mencakup登录注销,主题切换, dan动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由dan fungsi lainnya. Silakan klik di sini untuk fungsi detailnya. Setiap komponen memiliki rata-rata 60 baris kode, yang nyaman untuk dikonsumsi.

Jika Anda menemukan fungsi yang tidak ingin Anda gunakan, Anda cukup menghapusnya. Tingkat kopling setiap modul sangat rendah dan dapat dicolokkan .

Pemeliharaan open source tidaklah mudah. ​​Jika itu benar-benar membantu Anda, saya akan sangat senang. Klik Bintang di pojok kanan atas untuk menyemangati penulis~

Fungsi

• Masuk/Keluar
• peralihan tema
• Bilah samping dinamis
  • Dihasilkan secara otomatis berdasarkan konfigurasi tabel perutean
  • Mendukung perutean bersarang multi-level
  • Sidebar penyusutan adaptif
  • Ditampilkan secara dinamis berdasarkan izin
• remah roti yang dinamis
• Pengemasan ulang Axios
  • Konfigurasi instans
  • Permintaan & respons intersepsi
  • Penanganan kode status jaringan global
• Komponen otentikasi: Pengguna yang belum login tidak dapat masuk ke komponen ini
• Komponen izin: Peran tanpa izin tidak dapat memasuki komponen ini
• Pemuatan komponen yang lambat
• adaptasi yang kurang baik
• 404 halaman
• Konfigurasi proxy proxy memecahkan masalah lintas domain
• Fitur yang akan ditambahkan di masa depan
  • menyeret
  • teks kaya
  • UI generasi berikutnya
  • pemuatan global
  • Impor dan ekspor Excel

tumpukan teknologi

• React@18 Hooks didasarkan pada versi terbaru React, yang sepenuhnya menggunakan Hooks
• [email protected] hanya perlu mengkonfigurasi tabel routing untuk menghasilkannya secara otomatis
• [email protected] Pustaka React-CSS paling populer di Tiongkok
• [email protected] manajemen status global, sintaksis sederhana, fungsi canggih, DVA lengkap, mudah dimulai dalam 5 menit
• Perpustakaan visualisasi data penting front-end [email protected]
• [email protected] adalah perpustakaan permintaan jaringan berdasarkan enkapsulasi Promise.
• Less&Sass menyediakan sintaksis yang lebih kuat

Struktur direktori

 ├─ public                     # 静态资源
│   ├─ favicon.ico            # favicon图标
│   └─ index.html             # html模板
├─ src                        # 项目源代码
│   ├─ assets                 # 图片 字体等静态资源
│   ├─ components             # 全局公用组件
│   ├─ pages                  # 路由组件
│   ├─ service                # 所有网络请求
│   ├─ store                  # 全局状态管理
│   ├─ utils                  # 全局公用方法
|   ├─ App.css                # 入口页面样式
│   ├─ App.jsx                # 入口页面
|   ├─ index.css              # 全局样式文件
|   ├─ index.js               # 源码入口
|   ├─ route.js               # 路由表配置文件
|   └─ setupProxy.js          # 代理配置
└── package.json              # package.json

Tampilan fungsi parsial

peralihan tema

Sidebar penyusutan adaptif

Menampilkan sidebar secara dinamis berdasarkan izin

Saat Anda masuk sebagai administrator, "Halaman Analisis" di bawah Dasbor akan ditampilkan, tetapi tidak akan ditampilkan saat Anda masuk sebagai pengguna biasa.

Sekalipun Anda mengetahui jalur rutenya, jika Anda ingin memaksa masuk dengan mengubah URL browser, Anda akan diblokir karena Anda tidak memiliki izin. Efeknya seperti terlihat pada gambar di bawah ini:

Instalasi & Pengaktifan

  克隆项目
  1. git clone https://github.com/MelodyFish/react-admin-template-pro.git
  进入目录
  2. cd react-admin-template-pro
  安装依赖
  3. npm install    ||   yarn install
  启动
  4. npm run start  ||   yarn start