react admin template pro

React-Admin-Template-Pro

• Онлайн-просмотр
• Пожалуйста, оставляйте вопросы и предложения здесь

Предисловие

Прежде чем создавать эту систему, я провел небольшое исследование и обнаружил, что проекты, связанные с шаблонами серверной части React, имеют следующие характеристики: старые стеки технологий, незавершенные проекты, отсутствующие документы и негибкие компоненты (большинство из них жестко запрограммированы). В то же время эта система была написана для того, чтобы младшим программистам было легче найти подходящий практический проект, чтобы инженеры полного стека могли использовать систему для быстрого создания проектов, а для фронтенд-персонала можно было напрямую писать бизнес-код, чтобы избежать повторяющаяся работа.

Введение

Эта система представляет собой шаблон системы управления серверной частью, разработанный на основе React Hooks и React-Router V6 . Стек технологий, используемый во всей системе, является относительно новым и построен по компонентному принципу, включая登录注销,主题切换,动态路由侧边栏. ,动态面包屑,响应式收缩侧边栏,鉴权路由,权限路由и другие функции. Нажмите здесь, чтобы просмотреть подробные функции. Каждый компонент имеет в среднем 60 строк кода, что удобно для использования.

Если вы обнаружите функцию, которую не хотите использовать, вы можете просто удалить ее. Степень связи каждого модуля очень низкая, и он подключаемый .

Поддержка открытого исходного кода — дело непростое. Если это действительно вам поможет, я буду очень рад. Нажмите на звездочку в правом верхнем углу, чтобы поощрить автора~

Функция

• Вход/Выход
• переключение темы
• Динамическая боковая панель
  • Создается автоматически на основе конфигурации таблицы маршрутизации.
  • Поддержка многоуровневой вложенной маршрутизации
  • Адаптивная сокращающаяся боковая панель
  • Динамически отображается в зависимости от разрешений
• динамические хлебные крошки
• Переупаковка Axios
  • Конфигурация экземпляра
  • Перехват запросов и ответов
  • Обработка кода состояния глобальной сети
• Компонент аутентификации: пользователи, не вошедшие в систему, не могут войти в этот компонент.
• Компонент разрешений: роли без разрешения не могут войти в этот компонент.
• Ленивая загрузка компонентов
• меньше и дерзкая адаптация
• 404 страница
• Конфигурация прокси-сервера решает междоменную проблему
• Функции, которые будут добавлены в будущем
  • тащить
  • форматированный текст
  • пользовательский интерфейс следующего поколения
  • глобальная загрузка
  • Импорт и экспорт Excel

стек технологий

• 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