Cadmin: клиентская часть на React и Ant.Design

Проект: — GitHub: https://github.com/baiy/Cadmin-client-react; — Gitee: https://gitee.com/baiy/Cadmin-client-react.

Онлайн-документация: https://baiy.github.io/Cadmin/.

Зависимости: — React; — localStorage; — Redux; — Axios; — Ant.Design; — Lodash.

Среда разработки создана с помощью Create React App.

Установка:

// Установка
npm install
// Разработка
npm start
// Компиляция
npm run build

Дополнительные вопросы по разработке и компиляции см. в документации Create React App.

Конфигурация:

Файл конфигурации: ./env.

Используются переменные окружения Create React App:

Пример получения значения конфигурационной переменной:

import {config} from "src/utils/helper";
let name = config('SITE_NAME');

При получении значения переменной REACT__ имя переменной указывать не нужно.

Маршрутизация и меню:

В системе реализована динамическая загрузка страниц по определённым правилам:

1. Загружаются файлы из каталога /src/pages.
2. Загружается файл index.tsx.
3. Файлы из папки components игнорируются.

Например:

Меню делится на три типа:

1. Каталоги — при выборе открывается подменю.
2. Страницы — выбор ведёт на соответствующую страницу.
3. Ссылки — обычные ссылки HTTP или HTTPS.

Для меню, соответствующего странице, маршрут задаётся в конфигурации на сервере.

Redux:

Файлы в папке /reducers/:

Запросы к серверу:

Методы запроса:

import request from "src/utils/request";
// GET запрос
request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).get();
// POST запрос
request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).post();

Метод request() принимает в качестве аргумента действие (action), которое отправляется на сервер.

Возвращаемое значение метода request() — объект request из файла src/utils/request.

Токен автоматически добавляется к запросу, поэтому его не нужно передавать явно.

Объект request имеет следующие методы:

Запрос отправляется только при вызове методов get() или post().

Также можно использовать axios и самостоятельно отправлять запросы, используя метод actionUrl() для генерации URL и добавления токена:

import {actionUrl} from 'src/utils/helper'
let url = actionUrl('action')

Встроенные компоненты:

Помимо компонентов Ant.Design, в системе есть несколько встроенных компонентов, которые часто используются при разработке:

• Username — отображает имя пользователя, указанного по ID. Можно задать значение по умолчанию, если пользователь не найден.
• AuthCheck — проверяет права пользователя на выполнение действия и отображает соответствующий контент.
• FieldMap — сопоставляет значения полям и выводит их в виде текста.