Antd Pro: лучшие практики

Зависимости

Ant Design Pro
https://github.com/ant-design/ant-design-pro

API-интерфейс сервиса
SpringBoot Antd Pro
https://gitee.com/xiaolongzaixian/springboot-antd-pro.git

Демонстрация функций

• Демо-страница:

  • базовая форма;
  • сложная форма (компонент BackTop);
  • таблица запросов.

• Тестирование функций:

  • базовая форма;
  • таблица запросов (кросс-домен).

• Демонстрация функций (CRUD доступ к RESTful интерфейсу):

  • новая форма;
  • таблица запросов;
  • просмотр деталей.

Пользовательская главная страница:

Изображение: http://xiaolongzaixian.gitee.io/imagedb/img/antd-pro-helper/2020013101.png, ширина = 1024, высота = 512.

Таблица списков:

Изображение: http://xiaolongzaixian.gitee.io/imagedb/img/antd-pro-helper/2020013103.png, ширина = 1024, высота = 512.

Разработка

Функциональные особенности:

— поддержка многопользовательской среды: dev — среда разработки, pro — производственная среда;
— поддержка кросс-доменного доступа к API-интерфейсу: config.xxx.js настройка прокси;
— поддержка RESTful интерфейса: демонстрация функций (CRUD);
— зарезервированный параметр расширения токена Auth-Token.

Оптимизация:

— настройка макета главной страницы и меню после входа в систему;
— отображение номера строки в табличном компоненте;
— отображение общего количества данных, начального и конечного номеров данных на странице в компоненте разбивки на страницы;
— изменение доступных параметров разбивки на страницы [10, 20, 50, 100].

Устранение уязвимостей:

На данный момент нет.

Быстрая разработка

$ git clone https://gitee.com/xiaolongzaixian/antd-pro-helper.git --depth=1
$ cd antd-pro-helper
$ npm install

Рекомендуется использовать IDE: WebStorm.

Компиляция и запуск

Использование команды npm для компиляции и развёртывания Node.js

$ npm start

По умолчанию адрес доступа: http://localhost:8000.

Развёртывание статических файлов HTML и других с помощью Nginx

Команда npm используется для компиляции, а затем файлы HTML и другие статические файлы размещаются в каталоге dist.

$ npm run build

Файлы HTML и другие статические файлы помещаются в каталог dist, включая index.html и т. д.
Скопируйте файлы HTML и другие статические файлы в каталог Nginx.

Развёртывание статических файлов HTML и других с использованием Spring Boot

В качестве статического ресурса Spring Boot можно выбрать один из следующих каталогов:
— src/main/resources/static;
— src/main/webapp.

Скопируйте файлы HTML и другие статические файлы в выбранный каталог статических ресурсов Spring Boot.

Часто задаваемые вопросы

Как получить доступ ко всем /api/xxx интерфейсам бэкэнда при запуске Node.js?

Antd Pro запрашивает данные через интерфейс /api/xxx по умолчанию, используя интерфейс фиктивных данных. Необходимо отключить фиктивные данные.

$ npm run start:no-mock

После развёртывания Nginx невозможно получить доступ к /api/xxx интерфейсу.

Помимо установки статических файлов в соответствии с официальным руководством, необходимо настроить прокси-сервер для внутренних API-интерфейсов в Nginx.

Конфигурация прокси-сервера Nginx для внутреннего API:

location /api/{
    proxy_pass http://localhost:9080/api/; #фактический адрес доступа к внутреннему API
    proxy_set_header X-Real-Ip $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr; 
}

Формат возвращаемых данных интерфейса бэкенда SpringBoot.

Все параметры данных Antd могут быть расширены, и их можно определить в соответствии со сценарием проекта.

Например, формат JSON данных табличного компонента по умолчанию:

{
    list:[],
    pagination: {current: 1, pageSize: 10, total: 100}
}