Spring Boot + Angular: 페이지네이션 예제

이 튜토리얼에서는 서버 측에서 전체 스택 페이지네이션(Angular + Spring Boot) 예제를 빌드하는 방법을 보여줍니다. 백엔드 서버는 REST API용 Spring Data 및 Spring Web을 사용하고 프런트엔드 측은 HTTPClient가 포함된 Angular 11/10/8 앱입니다.

전체 기사: https://bezkoder.com/pagination-spring-boot-angular-11/

Angular 및 Spring Boot 예제를 사용한 페이지 매김

다음과 같은 데이터베이스에 tutorials 테이블이 있다고 가정합니다.



다음 샘플과 같이 페이지 매김(필터 사용/사용 안 함)을 위한 API를 내보내야 합니다.

/api/tutorials?page=1&size=3

/api/tutorials?size=5 : 페이지에 대한 기본값 사용

/api/tutorials?title=data&page=1&size=5 : '데이터'를 포함하는 제목별로 페이지 매김 및 필터

/api/tutorials/published?page=2 : '게시됨' 상태로 페이지 매기기 및 필터링

이것은 API에서 얻고자 하는 결과의 구조입니다.

{
    "totalItems": 12,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}

Angular 앱은 페이지 매김과 함께 결과를 표시합니다.



색인이 더 큰 페이지로 변경할 수 있습니다.



또는 페이지 크기(페이지당 항목 수)를 변경합니다.



또는 필터를 사용한 페이징:

풀 스택 아키텍처

다음 아키텍처로 애플리케이션을 빌드할 것입니다.

Spring Boot는 Spring Web MVC를 사용하여 REST API를 내보내고 Spring 데이터를 사용하여 데이터베이스와 상호 작용합니다.

Angular 11/10/8 클라이언트는 axios를 사용하여 HTTP 요청을 보내고 HTTP 응답을 검색하며 구성 요소에 대한 데이터를 표시합니다. 또한 페이지 탐색을 위해 Angular Router를 사용합니다.

자세한 내용은 다음 사이트를 참조하십시오. https://bezkoder.com/pagination-spring-boot-angular-11/

추가 자료

How to Integrate Angular with Spring Boot Rest API

풀스택 CRUD 앱:

Angular + Spring Boot + MySQL example

Angular + Spring Boot + PostgreSQL example

Angular + Spring Boot + MongoDB example

또는 보안: Angular 11 + Spring Boot: JWT Authentication example

즐거운 배움, 또 만나요!