JHipster — это давний и амбициозный гибридный проект Java и JavaScript, целью которого является упрощение разработки полнофункциональных Java-приложений с использованием современных реактивных интерфейсов. Команда разработчиков JHipster постоянно выпускает новые версии, чтобы идти в ногу с изменениями в отрасли. Давайте узнаем, на что способна эта платформа, создав простое приложение.
Что такое JHipster?
«Из коробки» JHipster поддерживает React, Vue и Angular для внешнего интерфейса. Он поддерживает другие платформы, включая Svelte, через плагины, известные как чертежи. На заднем плане Spring Boot выполняет тяжелую работу. В этом отношении JHipster похож на платформу Hilla, но с более амбициозной целью поддержки широкого спектра интерфейсных стеков. По сути, JHipster — это расширенный инструмент сборки, который объединяет цепочки инструментов сборки Java и JavaScript и накладывает на них различные административные возможности.
В дополнение к полнофункциональным приложениям JHipster поддерживает создание компонентов микросервисов и имеет основу как для реляционных хранилищ данных на основе JPA, так и для хранилищ данных NoSQL, таких как MongoDB и Cassandra. Он также имеет функции для ведения журнала и аналитики.
Набор инструментов JHipster включает в себя командную строку и предметно-ориентированный язык (DSL) с визуальным средством моделирования данных и веб-конструктором (вспомните Spring Initializr на стероидах). Для начала мы воспользуемся командной строкой. Обратите внимание, что вам понадобится система с установленными достаточно актуальными версиями Java, Node.js и Git.
Пример приложения JHipster
Следуйте краткому руководству по JHipster, чтобы установить пакет NPMgenerator-jhipster и создать новый каталог для запуска генератора.
Вы увидите интерактивное приглашение, подобное тому, что показано на рисунке 1.
ИДГВы можете принять большинство значений по умолчанию, но в этом примере мы будем использовать MongoDB в качестве базы данных и React в качестве внешней среды (выберите любую тему Bootswatch, которая соответствует вашему настроению). После того, как вы установите эти параметры, JHipster сделает свое дело и оставит вам новое приложение в только что созданном каталоге.
Сборка и запуск приложения
JHipster теперь создал две половины полнофункционального приложения Java и JavaScript. Бэкенд создан с помощью Maven, а внешний интерфейс — с помощью веб-пакета. Вы можете запустить две половины одновременно, чтобы запустить приложение. (Помните, что вам также необходимо, чтобы MongoDB работала в фоновом режиме.)
В одной оболочке введите: ./mvn -P-webapp. Эта команда создаст и запустит серверную часть Java. Мы используем -P-webapp флаг, чтобы Maven не запускал часть веб-пакета.
В другой оболочке введите: npm start. Эта команда создает внешний интерфейс и запускает его в режиме разработки веб-пакета, при этом вызовы API указывают на только что запущенный Java-сервер.
Если все прошло хорошо, по адресу localhost:8080 вас встретит экран, аналогичный показанному на рисунке 2.
ИДГСоздайте тестового пользователя
Если вы покопаетесь в приложении, вы быстро обнаружите, что здесь много всего. Генератор JHipster предоставляет гораздо больше возможностей, чем ваш обычный инструмент, включая функциональное управление пользователями и систему аутентификации на основе JWT. В приложении также есть учетные записи по умолчанию, которые мы будем использовать для создания тестового пользователя.
Для начала используйте регистр в правом верхнем углу экрана приложения для создания нового пользователя. Затем создайте тестового пользователя (test@test.com), затем перейдите по адресу авторизоваться и выберите значение по умолчанию админ/админ пользователь. Перейдите к экрану управления пользователями (Администрирование -> Управление пользователями). Обратите внимание, что ваш новый пользователь указан в списке. Вы можете активировать пользователя, переключив неактивную кнопку на активную, а затем войти в систему как тестовый пользователь. Обратите внимание, что этот пользователь не может получить доступ к консоли администратора.
Как я уже сказал, это множество готовых функций, особенно если учесть, что JHipster поддерживает не только стек React и MongoDB, но также Angular, Vue и множество хранилищ данных SQL и NoSQL.
Изучите код
Как вы понимаете, для поддержки всей этой функциональности в JHipster имеется довольно много кода. К счастью, он в значительной степени актуален и соответствует лучшим практикам программирования. Например, код React использует функциональные компоненты, использует перехватчики и запускается в централизованном хранилище Redux.
Взгляните на каталог приложения, и вы увидите такую структуру:
/foundry-jhipster//webpack/: Конфигурация/утилиты для пакета веб-пакета./src/main//java/: исходники Java/webapp/: Внешние источники
/target/: Выходной каталог для обеих сборок./webapp/: Выходные данные внешней сборки/java/: Выходные данные внутренней сборки/docker/: Файлы для поддержки контейнеризации.
Основным классом приложения Java является src/main/java/com/mycompany/myapp/JhipsterApp.java. По сути, это веб-приложение Spring Boot, которое можно настроить с помощью аргументов командной строки через --spring.profiles.active=your-active-profile.
Java-приложение «из коробки» по сути представляет собой API для пользовательских функций CRUD (создание, чтение, обновление и удаление) с аутентификацией и авторизацией с помощью Spring Security. Система Spring Security настроена в /myapp/security. Помните, что JHipster использует JSON Web Token, поэтому поддерживаемые классы находятся в /security/jwt.
Доменные модели приложения определены в /domainкоторый является аналогом внешнего интерфейса /entities каталог, который вы скоро увидите.
Найдите доступные внешние сценарии, просмотрев package.json. В добавок к dev mode команда, которую мы используем прямо сейчас, другие функции включают в себя mongodb prune команды, тесты и команды промышленной сборки.
Вход для клиентов находится по адресу /src/main/webapp/index.htmlно настоящая работа начинается в /sec/main/webapp/app/app.tsxкоторый определяет маршрутизатор приложения (маршруты определены в router.tsx), на котором будут размещаться различные компоненты страницы.
Вы можете найти компоненты веб-страницы приложения, определенные в main/webapp/app/modules; например, /home/home.tsx имеет определение домашней страницы.
в /main/webapp/app/shared В каталоге вы найдете код, используемый во всем приложении. Большая часть этого посвящена центральному хранилищу, например, определению модели и редукторам. В настоящее время приложение работает только с пользователями, поэтому в общем каталоге находятся только эти компоненты и код аутентификации.
/entities Папка содержит код для поддержки смоделированных объектов. Однако обратите внимание, что модель пользователя хранится в общем каталоге. Сущностей пока нет, поэтому давайте добавим их.
Определите модель: JDL и JDL-Studio.
JDL — это предметно-ориентированный язык JHipster для определения моделей приложений. Он делает гораздо больше — вы можете определить все приложение с помощью метаданных JDL, — но мы сосредоточимся на модели.
Для начала давайте воспользуемся JDL-Studio, онлайн-инструментом JHipster, чтобы быстро создать некоторые функции CRUD для модели предметной области. Вы увидите построитель отношений сущностей, подобный показанному на рисунке 3.
ИДГКонструктор JDL поддерживает определение сущностей и их свойств, а также отношений между ними. Мы не будем здесь углубляться в синтаксис, потому что он достаточно понятен. Вы можете изучить синтаксис, внося изменения в определение слева и наблюдая, как они выражаются на визуальном дисплее.
Давайте примем данные отношения и экспортируем их, нажав кнопку Загрузите этот исходный код JDL кнопку в правом верхнем углу экрана. (Обратите внимание, что на панели инструментов есть несколько параметров для настройки внешнего вида и поведения объектов.)
Получив файл, перейдите в командную строку в корне проекта и введите jhipster jdl my-jdl-file.jdlгде my-jdl-file.jdl — это имя файла, который вы только что экспортировали.
В подсказке будет задан вопрос, хотите ли вы перезаписать пару файлов. Давай, сделай это. После этого вы можете перезагрузить серверы и посмотреть, что вы добавили в приложение. Вернитесь в браузер, снова откройте приложение на порту 9000 и войдите в систему как админ/админ.
Теперь, когда вы открываете Сущности пункта меню на панели навигации, вы получаете все те объекты, которые вы только что импортировали, а также полностью реализованную консоль для управления ими. Например, вы можете создать новую сущность «Страна», затем создать новую сущность «Местоположение» и использовать вновь созданную страну в своем местоположении. Обратите внимание, что здесь также присутствуют все возможности CRUD.
Мониторинг и администрирование API
Стоит отметить несколько дополнительных функций для пользователей с правами администратора. Администрация меню включает в себя Метрики опция, которая дает представление о характеристиках работающей JVM, как показано на рисунке 4. Дополнительную информацию о функциях мониторинга см. в документации JHipster.
ИДГJHipster также генерирует определения OpenAPI/Swagger для своих внутренних конечных точек, а также простую консоль для взаимодействия с ними. На рис. 5 показан экран администрирования API.
ИДГJHipster предоставляет все это благодаря гибкой архитектуре, которая позволяет использовать различные хранилища данных и интерфейсные платформы. В целом, это впечатляющая структура.
