Ниц Фиш (NiceFish) — это серия проектов, цель которых — продемонстрировать разработку с разделением на фронтэнд и бэкэнд. Фронтэнд реализован для браузера, мобильных устройств и среды Electron. Бэкэнд имеет две версии: SpringBoot и SpringCloud.
OpenWMS-Frontend — это код фронтэнда проекта OpenWMS.
Использование
- Сначала fork этого проекта.
- Клонируйте путь к проекту после форка.
- Перейдите в папку OpenWMS-Frontend.
- Установите cnpm с помощью команды npm i -g cnpm --registry=https://registry.npm.taobao.org.
- Установите @angular/cli с помощью команды cnpm i -g @angular/cli.
- Выполните команду cnpm install.
- Запустите команду ng serve.
- Откройте браузер и перейдите по адресу http://localhost:4200/.
Настройка стиля
Все стили, связанные с OpenWMS, находятся в папке assets/css. Вы можете изменить соответствующие файлы CSS.
Частые проблемы
- Рекомендуется использовать cnpm (обёртку npm от Taobao) для разработчиков из Китая, чтобы избежать некоторых загадочных проблем.
- Для уменьшения размера сборки используйте параметр --prod при выполнении команд ng serve и ng build.
- Если вы ранее установили @angular/cli, сначала удалите его с помощью команды npm uninstall -g @angular/cli.
- Если вы ранее использовали старую версию angular-cli, сначала удалите её с помощью команды npm uninstall -g angular-cli.
- Если вы уже пытались установить node модули с помощью npm install, удалите каталог node_modules в корневом каталоге NiceFish и установите модули снова с помощью cnpm install.
- Чтобы удалить каталог node_modules быстрее, используйте команду rmdir /s/q node_modules для Windows или sudo rm -rf node_modules для *nix.
- Если вам нужно развернуть проект на другом сервере, таком как Tomcat, серверу может потребоваться некоторая конфигурация для поддержки HTML5 PushState маршрутизации. Подробные инструкции можно найти на странице https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions.
Основные зависимости
- Angular 7.2
- PrimeNG 7.1
- Bootstrap 4.1.2
- Echarts 3.4.0
- ckeditor5-angular 1.0
Онлайн-демонстрация
Демонстрационные версии NiceFish доступны по следующим адресам:
Серия проектов
-
NiceFish: версия Angular, основанная на Angular 7.2 и PrimeNG 7.1.0. Доступна по адресу git.oschina.net/mumu-osc/NiceFish/.
-
NiceFish-React: версия React с тем же внешним видом. Использует React Hooks 16.8.3, TypeScript, Ant Design и Bootstrap v4.2.1 для разработки.
-
nicefish-ionic: демоверсия для мобильных устройств на основе ionic, которая поддерживает PWA. Доступна по адресу git.oschina.net/mumu-osc/nicefish-ionic.
-
NiceBlogElectron: проект для рабочего стола на основе Electron, который упаковывает NiceFish в программу для рабочего стола. Предоставлен коллегой из ZTE. Я форкнул его, но некоторые версии модулей узлов требуют обновления. Если вы изучаете, как использовать Electron для разработки приложений для рабочего стола, обратитесь к этому проекту: https://github.com/damoqiongqiu/NiceBlogElectron.
-
nicefish-spring-cloud: это бэкэнд-код NiceFish, основанный на SpringCloud. Он уже имеет некоторые основные функции, такие как SSO с SpringSecurity+OAuth2+JWT, пагинация запросов для статей, пользователей и комментариев и т. д. Если вам нужно интегрироваться с этим бэкэндом, проверьте ветку for-spring-cloud.
-
OpenWMS: демонстрация лучших практик для бэкенда системы управления. Доступна по адресу gitee.com/mumu-osc/OpenWMS-Frontend.
Анализ размера пакета
Анализ с использованием webpack-bundle-analyzer показывает размер каждого модуля после компиляции:
Можно видеть, что основной объём занимают ECharts и PrimeNG. Рекомендуется использовать асинхронную загрузку и избегать импорта всех компонентов сразу.
Общение онлайн
Для общения можно использовать следующие платформы:
Лицензия с открытым исходным кодом
MIT
