NiceFish

NiceFish — это серия проектов, реализующих модель разработки и развёртывания с разделением на клиентскую и серверную части.

Клиентская часть имеет три версии:

• браузерная;
• мобильная;
• версия для Electron.

Серверная часть имеет две версии:

• SpringBoot (уже реализована система контроля доступа на основе Apache Shiro RBAC);
• SpringCloud.

🚀🚀🚀 Пожалуйста, не скупитесь на ⭐️ Star ⭐️, чем больше звёзд, тем больше мотивации. 🚀🚀🚀

1. Основные зависимости

Примечание: чтобы избежать проблем с совместимостью модулей NodeJS, в файле package.json зафиксированы все версии модулей Node. Если необходимо, вы можете протестировать совместимые версии самостоятельно (не рекомендуется, так как это может занять много времени).

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

Откройте терминал и последовательно выполните следующие команды: git clone https://gitee.com/mumu-osc/NiceFish.git cd NiceFish npm i -g @angular/cli npm i ng serve

Откройте браузер и перейдите по адресу http://localhost:4200/.

🚀🚀🚀 Для разработчиков из Китая: из-за сетевых причин рекомендуется установить nrm для управления реестром npm.

npm i -g nrm
nrm use taobao

Теперь при установке модулей с помощью npm будет использоваться реестр Taobao.

3. Переключение между режимами Mock и с серверной частью

Для удобства разделения клиентской и серверной частей в этом проекте предусмотрены два режима запуска:

• режим с данными Mock: ng serve --configuration development-mock (или просто ng serve для запуска в режиме Mock по умолчанию), все данные Mock находятся в каталоге src/mock-data в формате JSON, соответствующем формату данных, возвращаемых серверным интерфейсом;
• режим доступа к реальному серверному интерфейсу: ng serve --configuration development-backend (для запуска этого режима необходим реальный серверный интерфейс, измените адрес сервера в proxy.config.json на адрес вашего собственного интерфейса, этот проект предоставляет версию серверного интерфейса на основе SpringBoot, см.: https://gitee.com/mumu-osc/nicefish-spring-boot).

Конфигурационные параметры, связанные с окружением, находятся в environment.* и angular.json.

4. Модульное тестирование

Выполните следующую команду для проведения модульного тестирования:

ng test

По умолчанию используется ChromeHeadless для выполнения модульных тестов, тесты выполняются параллельно в соответствии с количеством ядер процессора, конфигурация karmar.conf.js основана на проекте Clarity от VMware, см. https://github.com/vmware-clarity/ng-clarity.

Отчёт о покрытии кода:

Подробные инструкции по использованию модульного тестирования и синтаксиса Jasmine см. в: https://angular.io/guide/testing.

5. Интеграционное тестирование

С версии v12 Angular официально отказался от предыдущего инструмента интеграционного тестирования Protractor (протрактор), и этот проект перешёл на официальный рекомендуемый инструмент интеграционного тестирования Cypress, выполните следующую команду для запуска интеграционного теста:

ng e2e

Подробнее о Cypress см.: https://testing-angular.com/end-to-end-testing/#end-to-end-testing.

6. Сборка

В соответствии со статусом разработки доступны два режима сборки:

1. сборка для среды разработки с данными Mock без доступа к серверному интерфейсу: ng build --configuration development-mock;
2. сборка для среды разработки с доступом к реальному серверному интерфейсу: ng build --configuration development-backend.

Если вам нужно, чтобы <base href="/NiceFish/"> отображался в index.html конечного продукта, добавьте параметр --base-href /NiceFish/ после вышеуказанных команд.

Обратите внимание, что здесь NiceFish — это имя проекта, если вы изменили имя проекта на другое, замените NiceFish на ваше собственное имя проекта.

7. Прямая публикация в nginx

1. Соберите конечный продукт в соответствии с описанным выше процессом.
2. Установите nginx и скопируйте содержимое каталога dist/browser в каталог html nginx.
3. Обратитесь к файлу конфигурации nginx.conf в корневом каталоге этого проекта для настройки (этот проект использует конфигурацию по умолчанию для среды Docker, которая не может быть использована в среде Windows).
4. Перезапустите nginx.

8. Публикация в среде Docker

Пожалуйста, последовательно выполните следующие команды (пожалуйста, не используйте мой ID, замените его на ваш собственный идентификатор платформы Docker):

1. Построить образ: sudo docker build -t damoqiongqiu/nice-fish .
2. Просмотреть список образов: sudo docker images
3. Запустить контейнер: sudo docker run -d -it -p 8080:80/tcp --name nice-fish damoqiongqiu/nice-fish:latest
4. Просмотреть запущенные контейнеры: sudo docker ps -a
5. Просмотреть журнал контейнеров: docker logs --details CONTAINER_ID
6. Войдите в контейнер: sudo docker exec -it CONTAINER_ID sh

9. Анализ пакета

Ниже приведён анализ структуры модуля после упаковки с использованием webpack-bundle-analyzer:

Похоже, что CKEditor и ECharts занимают большой объём, и требуется асинхронная загрузка.

Чтобы использовать webpack-bundle-analyzer, выполните следующие действия:

1. npm i webpack-bundle-analyzer --save-dev

2. Добавьте строку "bundle-report": "webpack-bundle-analyzer dist/browser/stats.json" в scripts в package.json

3. Скомпилируйте с помощью ng build --stats-json (опция --stats-json создаст файл stats.json). Конфигурация файла

4. Выполнить npm run bundle-report для просмотра процесса упаковки.

10. Серия проектов

Клиентский проект NiceFish:

Название	Описание	Звёзды
NiceFish (美人鱼)	Это интерфейс на Angular, основанный на последней версии Angular и использующий библиотеку компонентов PrimeNG.
NiceFish-React	Это интерфейс на React, основанный на React 18.0.0, использующий PrimeReact и настраиваемую версию Bootstrap. Чистый JSX без использования TypeScript.
nicefish-ionic	Это демо для мобильных устройств, основанное на ionic, которое уже поддерживает PWA.
NiceBlogElectron	Это проект для рабочего стола на основе Electron, который упаковывает NiceFish в программу для рабочего стола с помощью Electron. Проект предоставлен коллегой из ZTE. Я его разветвил, и мне пришлось изменить несколько версий модулей узлов. Если вы изучаете, как использовать Electron для разработки приложений для рабочего стола, обратитесь к этому проекту.

Серверный проект NiceFish:

Название	Описание	Звёзды
nicefish-spring-boot	Используется для демонстрации способа подключения кода переднего плана к серверной службе в режиме разделения переднего и заднего планов. Базовая версия уже завершена. На её основе можно продолжить разработку кода, подходящего для вашего бизнес-сценария.
nicefish-spring-cloud	Используется для демонстрации способа подключения кода переднего плана к распределённой серверной службе в режиме разделения переднего и заднего планов. ## 11. О типичных проблемах в среде NodeJS

• Китайские разработчики: если вы используете cnpm для установки зависимостей, это может привести к несовместимости некоторых пакетов и невозможности запуска приложения. Причина на данный момент неизвестна, требуется решение от официальных представителей cnpm. (cnpm — это не просто ускоренный узел, он выполняет множество собственных операций, включая предварительную компиляцию и кэширование некоторых модулей C++ для Node, поэтому пакеты, установленные с его помощью, могут отличаться от тех, что доступны из официального источника.) Это не проблема Angular, она характерна для всех фреймворков переднего плана.

• Если ранее вы устанавливали @angular/cli, сначала удалите его: npm uninstall -g @angular/cli.

• Если вы ранее устанавливали старую версию angular-cli, сначала удалите её: npm uninstall -g angular-cli.

• Если вы уже пытались установить модули Node с помощью npm install, вручную удалите каталог node_modules в корне NiceFish и установите модули заново с помощью npm.

• Для быстрого удаления каталога node_modules через командную строку используйте следующие команды:

  • для Windows: rmdir /s/q node_modules;
  • для *nix: sudo rm -rf node_modules.

• В случае возникновения других загадочных проблем рекомендуется удалить каталог node_modules вручную, переключиться на официальный источник npm и переустановить все модули Node.

• При необходимости развернуть проект на другом типе сервера, например Tomcat, потребуется выполнить некоторые простые настройки сервера для поддержки HTML5 PushState маршрутизации. Подробные инструкции можно найти по ссылке: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions. В разделе «How to: Configure your server to work with html5Mode» приведены примеры конфигураций для различных веб-контейнеров, включая IIS, Apache, nginx, NodeJS и Tomcat. (Обратите внимание, что эта конфигурация не является уникальной для Angular, и все современные SPA-фреймворки переднего плана требуют такой конфигурации.)

12. Скриншоты интерфейса

Скриншот

13. Ресурсы для обучения

• Для изучения микрофронтенд решений на основе Angular рекомендуется обратиться к коду и конфигурации проекта: https://gitee.com/mumu-osc/module-federation-plugin-example.
• Связанные с проектом PPT и материалы доступны по ссылке: https://gitee.com/mumu-osc/NiceFish/attach_files.
• Подробное описание структуры и функций проекта представлено в 93 статьях по ссылке: https://gitbook.cn/gitchat/column/5bebdaf22c33167c317cc285.

14. Лицензия

MIT

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

(Автор этого проекта ищет новую работу. Если у вас есть хорошие возможности, пожалуйста, свяжитесь со мной в VX: lanxinshuma)