ScaffoldClient

На основе:

• React (v15.*);
• DVA (v1.2.1);
• Antd (2.13.*);
• Webpack;
• Node.

Требуется зависимость от серверной части (.Net Core 2.0):

• Адрес: https://gitee.com/teambp/ScaffoldServer.

Статьи, связанные с проектом:

Нажмите здесь.

Демонстрационный адрес проекта:

Нажмите здесь.

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

Тестовые учётные данные:

• test1/test1;
• test2/test2;
• test3/test3;
• test4/test4;
• test5/test5.

Обновление от 02.01.2018

• Обновлён Antd до версии 3.1.0. PS: последующие версии можно обновлять самостоятельно, но рекомендуется ознакомиться с журналом обновлений на официальном сайте. Если указано, что версия не поддерживает React 16.0 и ниже, то обновление не рекомендуется.

Обновление от 04.12.2017

• Изменён процесс загрузки главной страницы, чтобы избежать входа в систему до полной загрузки ресурсов.
• Добавлена команда npm run dev для запуска среды разработки (вместо предыдущей команды npm run start). Конфигурирование статического сервера ресурсов больше не требуется!
• Команда npm run start теперь используется для запуска в рабочей среде. Перед запуском необходимо настроить статический сервер ресурсов!

Введение в проект

Присоединиться к группе QQ: 17078075.

Путь обучения может быть трудным (недостаток внутренних статей) и извилистым (без чёткого понимания правильности пути).

Проект может использоваться как шаблон (требуется знание C#) или как учебный пример для изучения React.

Код относительно прост и понятен (если вы уже изучали React и C#).

Рекомендуется использовать vscode для разработки.

Использованные инструменты

• Документация по React: https://doc.react-china.org/docs/hello-world.html.
• Документация DVA: https://github.com/dvajs/dva/blob/master/README_zh-CN.md. DVA — это примерно React Router + Redux. Версия DVA вызывает вопросы, почему она не обновляется сейчас. Версия V2.0 использует React Router версии V4, а различия между версиями V2/3 и V4 слишком велики. Начато обновление после подтверждения отсутствия проблем с серверным рендерингом.
• Документация Antd: https://ant.design/docs/react/introduce-cn. Antd — это фреймворк пользовательского интерфейса для фронтенда.

Реализованные функции

1. Контроль меню и прав доступа.
2. Переадресация и проверка API-запросов (в сотрудничестве с серверной частью).
3. Серверная отрисовка.

Недостатки проекта

Изменения в файлах требуют обновления страницы F5 для отображения изменений.

Запуск проекта

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

npm i

npm run static

npm run dev

Для рабочей среды (npm run start) необходимо направить IIS на папку static в проекте и изменить адрес в server/utils/config. См. рисунок ниже.

После запуска фронтенд готов к работе!

Скриншоты проекта

Вход

.

Страница демонстрации

.

.

.