-
코드로 배우는 스프링부트 웹 프로젝트 Day 7Spring/코드로 배우는 스프링부트 웹 프로젝트 2022. 8. 20. 12:41
/* Annotation들은 스프링부트 프로젝트의 Annotation 정리 페이지에 따로 정리해두었습니다. */
GuestbookServiceTests
@Test public void testList() { PageRequestDTO pageRequestDTO = PageRequestDTO.builder().page(1).size(10).build(); PageResultDTO<GuestbookDTO, Guestbook> resultDTO = service.getList(pageRequestDTO); System.out.println("PREV: " + resultDTO.isPrev()); System.out.println("NEXT: " + resultDTO.isNext()); System.out.println("TOTAL: " + resultDTO.getTotalPage()); System.out.println("--------------------------------------------"); for (GuestbookDTO guestbookDTO : resultDTO.getDtoList()) { System.out.println(guestbookDTO); } System.out.println("============================================="); resultDTO.getPageList().forEach(i -> System.out.println(i)); }day6에서 만든 PageResultDTO 확인용
Hibernate:
select
guestbook0_.gno as gno1_0_,
guestbook0_.moddate as moddate2_0_,
guestbook0_.regdate as regdate3_0_,
guestbook0_.content as content4_0_,
guestbook0_.title as title5_0_,
guestbook0_.writer as writer6_0_
from
guestbook guestbook0_
order by
guestbook0_.gno desc limit ?
Hibernate:
select
count(guestbook0_.gno) as col_0_0_
from
guestbook guestbook0_
PREV: false
NEXT: true
TOTAL: 31
```현재 301개의 데이터가 있으므로 제대로된 결과가 나온 것 확인 가능
[컨트롤러 화면에서 목록 처리]
컨트롤러를 작성해서 실제 화면에 목록처리 한 것을 반영
@Controller @RequestMapping("/guestbook") @Log4j2 @RequiredArgsConstructor // 자동 주입을 위한 Annotation public class GuestbookController { private final GuestbookService service; // final로 선언 @GetMapping("/") public String index() { return "redirect:/guestbook/list"; } @GetMapping("/list") public void list(PageRequestDTO pageRequestDTO, Model model){ log.info("list............" + pageRequestDTO); model.addAttribute("result", service.getList(pageRequestDTO)); } }list()에서 파라미터로 PageRequestDTO와 Model타입을 받음
PageRequestDTO는 화면에서 page와 size를 전달하면 PageRequestDTO객체로 자동 수집됨 (스프링MVC)
Model은 결과 데이터를 화면에 전달하기 위해 사용
list()에 Model을 이용해서 GuestbookServiceImpl에서 반환하는 PageResultDTO를 result라는 이름으로 전달
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}"> <th:block th:fragment="content"> <h1>GuestBook List Page</h1> <table class="table table-stripped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Gno</th> <th scope="col">Title</th> <th scope="col">Regdate</th> </tr> </thead> <tbody> <tr th:each="dto : ${result.dtoList}" > <th scope="row">[[${dto.gno}]]</th> <td>[[${dto.title}]]</td> <td>[[${dto.writer}]]</td> <td>[[${#temporals.format(dto.regDate, 'yyy/MM/dd')}]]</td> </tr> </tbody> </table> </th:block> </th:block>list.html로 전달된 dtoList를 이용해서 GuestbookDTO 출력
[목록 페이지 처리]
페이지 이동이 동작하는지 확인
하단에 페이지 처리 바와 페이지 이동 처리
list.html
``` <ul class="pagination h-100 justify-content-center align-items-center"> <li class="page-item " th:if="${result.prev}"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li th:class=" 'page-item ' + ${result.page == page?'active':''} "th:each="page: ${result.pageList}"> <a class="page-link" href="#"> [[${page}]] </a> </li> <li class="page-item" th:if="${result.next}"> <a class="page-link" href="#">Next</a> </li> </ul> </th:block> </th:block>tabindex
• 요소의 탭 순서 지정
• -1: a, button, input, 같은 태그가 탭을 받지 못하도록 함
• 양수: 1부터 적어서 탭의 순서 지정
• 0: h1, div같은 초점을 받을 수 없는 태그들도 탭으로 초점을 받을 수 있도록 함
'Spring > 코드로 배우는 스프링부트 웹 프로젝트' 카테고리의 다른 글
코드로 배우는 스프링부트 웹 프로젝트 Day 9 (0) 2022.08.24 코드로 배우는 스프링부트 웹 프로젝트 Day 8 (0) 2022.08.21 코드로 배우는 스프링부트 웹 프로젝트 Day 6 (0) 2022.08.18 코드로 배우는 스프링부트 웹 프로젝트 Day 5 (0) 2022.08.17 코드로 배우는 스프링부트 웹 프로젝트 Day 4 (0) 2022.08.16