react admin template pro

React-Admin-Template-Pro

• ดูตัวอย่างออนไลน์
• กรุณาส่งคำถามและข้อเสนอแนะที่นี่

คำนำ

ก่อนที่จะสร้างระบบนี้ ฉันได้ค้นคว้าและพบว่าโปรเจ็กต์ที่เกี่ยวข้องกับเทมเพลตแบ็กเอนด์ React มีลักษณะดังต่อไปนี้: กลุ่มเทคโนโลยีเก่า โปรเจ็กต์ที่ไม่สมบูรณ์ เอกสารที่ขาดหายไป และส่วนประกอบที่ไม่ยืดหยุ่น (ส่วนใหญ่เป็นฮาร์ดโค้ด) ในเวลาเดียวกัน ระบบนี้ถูกเขียนขึ้นเพื่อให้โปรแกรมเมอร์รุ่นเยาว์สามารถค้นหาโครงการฝึกหัดที่เหมาะสมได้ง่ายขึ้น สำหรับวิศวกรฟูลสแต็คเพื่อใช้ระบบเพื่อสร้างโครงการอย่างรวดเร็ว และสำหรับพนักงานส่วนหน้าในการเขียนรหัสธุรกิจโดยตรงเพื่อหลีกเลี่ยง การทำงานซ้ำ ๆ

การแนะนำ

ระบบนี้เป็นเทมเพลตระบบการจัดการแบ็กเอนด์ที่พัฒนาขึ้นโดยใช้ React Hooks และ React-Router V6 เทคโนโลยีสแต็กที่ใช้ในทั้งระบบค่อนข้างใหม่และสร้างขึ้นในลักษณะที่เป็นส่วนประกอบ ครอบคลุม登录注销主题切换动态路由侧边栏,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由และฟังก์ชันอื่น ๆ โปรดคลิกที่นี่เพื่อดูฟังก์ชันโดยละเอียด แต่ละส่วนประกอบมีโค้ดเฉลี่ย 60 บรรทัด ซึ่งสะดวกต่อการใช้งาน

หากคุณพบฟังก์ชันที่คุณไม่ต้องการใช้ คุณก็สามารถลบมันออกได้ ระดับการมีเพศสัมพันธ์ของแต่ละโมดูลนั้นต่ำมากและสามารถ เสียบปลั๊ก ได้

การบำรุงรักษาโอเพ่นซอร์สไม่ใช่เรื่องง่าย ถ้ามันช่วยคุณได้จริง ๆ ฉันจะมีความสุขมาก คลิก ดาว ที่มุมขวาบนเพื่อให้กำลังใจผู้เขียน~

การทำงาน

• เข้าสู่ระบบ/ออกจากระบบ
• การสลับธีม
• แถบด้านข้างแบบไดนามิก
  • สร้างขึ้นโดยอัตโนมัติตามการกำหนดค่าตารางเส้นทาง
  • รองรับการกำหนดเส้นทางแบบซ้อนหลายระดับ
  • แถบด้านข้างแบบปรับขนาดได้แบบปรับได้
  • แสดงแบบไดนามิกตามการอนุญาต
• เบรดครัมบ์แบบไดนามิก
• การบรรจุซ้ำของ Axios
  • การกำหนดค่าอินสแตนซ์
  • การสกัดกั้นคำขอและการตอบกลับ
  • การจัดการรหัสสถานะเครือข่ายทั่วโลก
• องค์ประกอบการตรวจสอบสิทธิ์: ผู้ใช้ที่ไม่ได้เข้าสู่ระบบไม่สามารถเข้าสู่องค์ประกอบนี้ได้
• องค์ประกอบการอนุญาต: บทบาทที่ไม่ได้รับอนุญาตไม่สามารถเข้าสู่องค์ประกอบนี้ได้
• การโหลดส่วนประกอบแบบ Lazy
• การปรับตัวน้อยลง
• 404 หน้า
• การกำหนดค่าพร็อกซีพร็อกซีช่วยแก้ปัญหาข้ามโดเมน
• คุณสมบัติที่จะเพิ่มในอนาคต
  • ลาก
  • ข้อความที่หลากหลาย
  • UI รุ่นต่อไป
  • โหลดทั่วโลก
  • นำเข้าและส่งออก Excel

กองเทคโนโลยี

• React@18 Hooks มีพื้นฐานมาจาก React เวอร์ชันล่าสุด ซึ่งรองรับ Hooks อย่างเต็มรูปแบบ
• [email protected] เพียงกำหนดค่าตารางเส้นทางให้สร้างโดยอัตโนมัติ
• [email protected] ไลบรารี React-CSS ที่ได้รับความนิยมมากที่สุดในประเทศจีน
• การจัดการสถานะทั่วโลก [email protected] รูปแบบที่เรียบง่าย ฟังก์ชันอันทรงพลัง DVA ที่สมบูรณ์แบบ เริ่มต้นได้ง่ายใน 5 นาที
• [email protected] ไลบรารีการแสดงภาพข้อมูลที่จำเป็นส่วนหน้า
• [email protected] เป็นไลบรารีคำขอเครือข่ายที่อิงตาม Promise encapsulation 99% ของฟรอนต์เอนด์ตกลงที่จะใช้
• Less&Sass ให้ไวยากรณ์ที่ทรงพลังยิ่งขึ้น

โครงสร้างไดเร็กทอรี

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

การแสดงฟังก์ชันบางส่วน

การสลับธีม

แถบด้านข้างแบบปรับขนาดได้แบบปรับได้

แสดงแถบด้านข้างแบบไดนามิกตามการอนุญาต

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

แม้ว่าคุณจะทราบเส้นทางของเส้นทาง แต่ถ้าคุณต้องการบังคับให้เข้าโดยการเปลี่ยน URL ของเบราว์เซอร์คุณจะถูกบล็อกเนื่องจากคุณไม่ได้รับอนุญาตให้มีผลดังแสดงในรูปด้านล่าง:

การติดตั้งและการเริ่มต้น

  克隆项目
  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