[Spring] 컨트롤러와 화면에서의 목록 처리

in Study on Spring, Web
[Spring] 컨트롤러와 화면에서의 목록 처리

컨트롤러를 작성해 화면에 반영해봅시다.


서비스 계층까지 등록과 목록 처리를 완료했습니다. 이를 실제 화면에 반영하기 위해 컨트롤러를 작성합니다.


1. GuestbookController 클래스 수정


1

기본 화면이 될 list()에는 파라미터로 PageRequestDTO를 매개변수로 전달받습니다. 화면에서 page와 size를 매개변수로 전달한다면 스프링 MVC는 이를 자동으로 수집해 PageRequestDTO로 전달합니다.
Model은 화면에 데이터를 전달하는 목적으로 사용합니다. GuestbookServiceImpl에서 pageResultDTO를 매개변수로 받아 반환하는 dtoList를 result라는 이름으로 전달합니다.

2. list.html 작성


2

메인 화면이자 목록을 보여줄 list.html을 위의 그림과 같이 작성합니다.
앞서 전달받은 result를 이용해 GuestbookDTO를 출력합니다. th:each를 이용해 dtoList를 반복처리합니다. 시간은 포매팅을 사용해 출력합니다.

3. list.html 확인


3

/guestbook/list 또는 /guestbook/list?page=1의 매핑 결과로 브라우저에 출력된 list.html의 화면은 위의 그림과 같습니다.

4. list.html 페이지 이동 확인


4

/guestbook/list?page=2와 같이 페이지 변호를 변경해 결과가 정상적으로 출력되는지 확인합니다.
gno 번호와 제목 등이 변경되는 것을 확인해 정상적으로 작동되는 것을 알 수 있습니다.

5. 페이지 번호가 출력되도록 list.html 수정


5

목록의 아래에는 페이지를 이동할 수 있도록 페이지 번호가 출력되는 코드를 작성합니다.
Prev 버튼과 Next 버튼은 th:if를 통해 이전 페이지와 다음 페이지가 존재할 때만 나오도록 작성합니다.
페이지 버튼들을 하나씩 비교해 만약 현재 페이지라면 active라는 이름의 클래스가 출력되도록 합니다.

6. 페이지 번호 확인


6

브라우저로 확인한 결과 아래에 페이지 번호가 정상적으로 출력되는 것을 확인할 수 있습니다.

7. 페이지 번호 이동 확인


7

아직 페이지 번호에 이벤트 처리는 하지 않은 상태이기 때문에 4번에서 수행한 것과 같이 /guestbook/list?page=25로 페이지 번호를 변경합니다. 실행 결과 위의 그림과 같이 25번으로 정상적으로 이동되는 것을 확인할 수 있습니다.

8. 페이지 번호 링크 처리


8

th:href를 이용해 Prev의 경우 start 값보다 1 적은 값으로, Next의 경우 end 값보다 1 큰 값으로 지정합니다.

9. 페이지 번호 링크 처리 결과


9

이제 Prev와 Next를 이용해 자유로운 페이지 이동이 가능한 것을 확인할 수 있습니다.

© 2022. All rights reserved.