react admin template pro

رد فعل المشرف قالب برو

• المعاينة عبر الإنترنت
• يرجى طرح الأسئلة والاقتراحات هنا

مقدمة

قبل بناء هذا النظام، قمت ببعض الأبحاث ووجدت أن المشاريع المتعلقة بقوالب React الخلفية لها الخصائص التالية: مجموعات التكنولوجيا القديمة، والمشاريع غير المكتملة، والمستندات المفقودة، والمكونات غير المرنة (معظمها مبرمجة بشكل ثابت). في الوقت نفسه، تمت كتابة هذا النظام ليسهل على المبرمجين المبتدئين العثور على مشروع تدريب مناسب، وللمهندسين المتكاملين استخدام النظام لبناء المشاريع بسرعة، ولفريق العمل الأمامي لكتابة كود العمل مباشرة لتجنب العمل المتكرر.

مقدمة

هذا النظام عبارة عن قالب نظام إدارة خلفي تم تطويره استنادًا إلى React Hooks و React-Router V6 . إن حزمة التكنولوجيا المستخدمة في النظام بأكمله جديدة نسبيًا ومبنية بطريقة مكونة، وتغطي登录注销،主题切换،动态路由侧边栏动态面包屑响应式收缩侧边栏鉴权路由权限路由ووظائف أخرى. يرجى النقر هنا للحصول على وظائف مفصلة. يحتوي كل مكون على 60 سطرًا من التعليمات البرمجية في المتوسط، وهو مناسب للاستهلاك.

إذا واجهت وظيفة لا تريد استخدامها، يمكنك فقط إزالتها. درجة اقتران كل وحدة منخفضة جدًا وقابلة للتوصيل .

الصيانة مفتوحة المصدر ليست سهلة إذا كانت تساعدك حقًا، سأكون سعيدًا حقًا. انقر فوق النجمة في الزاوية اليمنى العليا لتشجيع المؤلف ~

وظيفة

• تسجيل الدخول / الخروج
• تبديل الموضوع
• الشريط الجانبي الديناميكي
  • يتم إنشاؤه تلقائيًا بناءً على تكوين جدول التوجيه
  • دعم التوجيه المتداخل متعدد المستويات
  • الشريط الجانبي المتقلص التكيفي
  • يتم عرضها ديناميكيًا بناءً على الأذونات
• فتات الخبز الديناميكية
• إعادة تعبئة أكسيوس
  • تكوين المثيل
  • اعتراض الطلب والاستجابة
  • التعامل مع رمز حالة الشبكة العالمية
• مكون المصادقة: لا يمكن للمستخدمين الذين لم يقوموا بتسجيل الدخول الدخول إلى هذا المكون
• مكون الإذن: لا يمكن للأدوار بدون إذن الدخول إلى هذا المكون
• تحميل كسول للمكونات
• أقل وساس التكيف
• 404 صفحة
• تكوين الوكيل الوكيل يحل مشكلة عبر المجال
• الميزات التي سيتم إضافتها في المستقبل
  • يجر
  • نص غني
  • واجهة المستخدم الجيل القادم
  • التحميل العالمي
  • استيراد وتصدير اكسل

كومة التكنولوجيا

• يعتمد React@18 Hooks على أحدث إصدار من React، ويحتضن الخطافات بالكامل
• يحتاج [email protected] فقط إلى تكوين جدول التوجيه لإنشائه تلقائيًا
• [email protected] مكتبة React-CSS الأكثر شهرة في الصين
• [email protected] إدارة الحالة العالمية، بناء جملة بسيط، وظائف قوية، DVA كامل، من السهل البدء في 5 دقائق
• [email protected] مكتبة تصور البيانات الأساسية للواجهة الأمامية
• [email protected] عبارة عن مكتبة طلبات شبكة تعتمد على تغليف Promise. وقد وافقت 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