Создание новых API и представлений в JHipster

1. Введение

В этом учебнике мы увидим, как мы можем создать новый API внутри приложения JHipster. Затем мы интегрируем этот API в передний дисплей.

2. Пример применения

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

Книжный магазин построен как монолит. Он использует Угловой для переднего конца и имеет единую сущность под названием книжный со следующими полями:

титул
автор
Опубликованные данные
цена
количество

JHipster автоматически генерирует API и передние представления, которые обеспечивают простые операции для книги : просмотр, создание, редактирование и удаление.

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

Мы сосредоточимся только на API и фронт-конец аспекты покупки. Мы не будем выполнять обработку платежей и только минимальную проверку.

3. Весенние изменения загрузки

JHipster предоставляет генератор для создания новых контроллеры . Тем не менее, для этого учебника, Мы вручную создадим API и связанный с ним код .

3.1. Класс ресурсов

Первым шагом является обновление генерируемого BookResource класса. Мы добавляем новую конечную точку, которую может позвонит:

@GetMapping("/books/purchase/{id}")
public ResponseEntity purchase(@PathVariable Long id) {
    Optional bookDTO = bookService.purchase(id);
    return ResponseUtil.wrapOrNotFound(bookDTO);
}

Это создает новую конечную точку API, расположенную /книги/покупка/«id» . Единственный вход – это id , и мы возвращаем BookDTO , которые будут отражать новый уровень запасов после покупки.

3.2. Интерфейс обслуживания и класс

Теперь, мы должны обновить BookService интерфейс для включения нового покупка метод:

Optional purchase(Long id);

Затем нам необходимо внедрить новый метод в BookServiceImpl класс:

@Override
public Optional purchase(Long id) {
    Optional bookDTO = findOne(id);
    if (bookDTO.isPresent()) {
        int quantity = bookDTO.get().getQuantity();
        if (quantity > 0) {
            bookDTO.get().setQuantity(quantity - 1);
            Book book = bookMapper.toEntity(bookDTO.get());
            book = bookRepository.save(book);
            return bookDTO;
        }
        else {
            throw new BadRequestAlertException("Book is not in stock", "book", "notinstock");
        }
    }
    return Optional.empty();
}

Давайте посмотрим, что происходит в этом коде. Во-первых, мы смотрим книгу по ее id чтобы подтвердить, что она существует. Если этого не происходит, мы возвращаем пустой Необязательный .

Если она существует, то мы гарантируем, что она имеет уровень запасов больше нуля. В противном случае, мы бросаем BadRequestАлертЭксцепция. Хотя это исключение обычно используется только в слое REST JHipster, мы используем его здесь, чтобы продемонстрировать, как вернуть полезные сообщения об ошибках на передний конец.

В противном случае, если запас больше нуля, то мы уменьшаем его на один, сохранить его в репозиторий, и вернуть обновленный DTO.

3.3. Конфигурация безопасности

Окончательное изменение требуется в БезопасностьКонфигурация класс:

.antMatchers("/api/books/purchase/**").authenticated()

Это гарантирует, что звонки на наш новый API разрешены только аутентифицированным пользователям.

4. Фронт-Конец Изменения

Теперь давайте сосредоточимся на передних изменениях. JHipster создает представление для отображения одной книги, и вот где мы добавим нашу новую кнопку покупки .

4.1. Класс обслуживания

Во-первых, мы должны добавить новый метод к существующему book.service.ts файл. Этот файл уже содержит методы манипулирования объектами книги, так что это хорошее место, чтобы добавить логику для нашего нового API:

purchase(id: number): Observable {
    return this.http
        .get(`${this.resourceUrl}/purchase/${id}`, { observe: 'response' })
        .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}

4.2. Компонент

Затем, нам нужно обновить код компонента в book.component.ts . Мы создадим функцию, которая вызывает новый метод в службе Angular book, а затем прослушивает ответ с сервера:

purchase(id: number) {
    this.bookService.purchase(id).subscribe(
        (res: HttpResponse) => {
            this.book = res.body;
        },
        (res: HttpErrorResponse) => console.log(res.message)
    );
}

4.3. Вид

Наконец, мы можем добавить кнопку к просмотру книги который называет новый метод покупки в компоненте:

На рисунке ниже показано обновленное представление на переднем конце:

Нажатие на новый Покупка кнопка приведет к вызову нашего нового API, и интерфейс будет автоматически обновляться с новым статусом запасов (или отображать ошибку, если что-то пошло не так).

5. Заключение

В этом учебнике мы видели, как создавать пользовательские API в JHipster и интегрировать их в передний конец.

Мы начали с добавления API и бизнес-логики в Spring Boot. Затем мы изменили интерфейс кода, чтобы использовать новый API и отображать результаты. С помощью всего лишь небольшого усилия мы смогли добавить новые функциональные возможности поверх существующих КРУД операций, которые JHipster автоматически генерирует.

И, как всегда, код доступен более на GitHub .