🔥 #12 메인화면에서 글 목록 보기 + 페이징 처리

메인화면에서 글 목록 보기

이렇게 되어있던 메인화면에 이제 직접 작성한 글들(Board 테이블에 저장된)을 불러와서 보여줄 것이다.

< BoardController >

@Controller
public class BoardController {

    @Autowired
    private BoardService boardService;
    
    .
    .
    .
    
    @GetMapping({"", "/"})
    public String index(Model model) {
        model.addAttribute("boards", boardService.글목록());

        // /WEB-INF/views/index.jsp
        return "index"; // viewResolver 작동 (@Controller)
    }
}

jsp로 데이터를 가져갈 때 Model 필요하다. 매개변수에 Model을 넣어준다.

BoardController는 RestController가 아닌 일반 Controller이기 때문에 리턴할 때 viewResolver가 작동한다.

< BoardService >

@Service // 스프링이 컴포넌트 스캔을 통해서 Bean에 등록을 해줌. (IoC)
public class BoardService {

    @Autowired
    private BoardRepository boardRepository;
    
    .
    .
    .

    public List<Board> 글목록() {
        return boardRepository.findAll();
    }
}

findAll 함수를 통해 Board를 모두 불러온다.

< index.jsp >

head.jsp에 들어있는

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>

를 이용한다. (jstl)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="layout/header.jsp"%>

<div class="container">

    <c:forEach var="board" items="${boards}">
    <div class="card m-2">
        <div class="card-body">
            <h4 class="card-title">${board.title}</h4>
            <a href="#" class="btn btn-primary">상세보기</a>
        </div>
    </div>
    </c:forEach>
    
</div>

<%@ include file="layout/footer.jsp"%>

그다음 EL 표기법으로 items="${boards}" 이렇게 작성하면, 컨트롤러에서 model로 넘긴 "boards"가 받아진다.

${board.title}를 하면 실제로는 board.getTitle이 호출된다.
Board 객체에서 title에 대한 get 을 만들어놨으므로 (@Data 어노테이션) 불러올 수 있다.

---

페이징 처리

< index.jsp > 추가

<c:forEach var="board" items="${boards}"> 에서
<c:forEach var="board" items="${boards.content}"> 로 바꿔준다.
content를 붙여야 한다!!

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

위의 코드도 추가해줘서

이렇게 페이지 표시를 만든다!

< index.jsp > 최종

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="layout/header.jsp"%>

<div class="container">

    <c:forEach var="board" items="${boards.content}">
    <div class="card m-2">
        <div class="card-body">
            <h4 class="card-title">${board.title}</h4>
            <a href="#" class="btn btn-primary">상세보기</a>
        </div>
    </div>
    </c:forEach>

    <ul class="pagination justify-content-center">

        <c:choose>
            <c:when test="${boards.first}">
                <li class="page-item disabled"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
            </c:when>
            <c:otherwise>
                <li class="page-item"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
            </c:otherwise>
        </c:choose>

        <c:choose>
            <c:when test="${boards.last}">
                <li class="page-item disabled"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
            </c:when>
            <c:otherwise>
                <li class="page-item"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
            </c:otherwise>
        </c:choose>

    </ul>

</div>

<%@ include file="layout/footer.jsp"%>

첫번째 페이지에서는 Previous 버튼이 비활성화 되어야 하고,
마지막 페이지에서는 Next 버튼이 비활성화 되어야 한다.

따라서 <c:choose> <c:when> <c:otherwise> ... 를 사용하여 구분하였다.

< BoardController >

// 페이징 url : http://localhost:8000/?page=0
    @GetMapping({"", "/"})
    public String index(Model model, @PageableDefault(size = 3, sort = "id", direction = Sort.Direction.DESC) Pageable pageable) {
//        Page<Board> pagingBoard = boardService.글목록(pageable);
//        List<Board> boards = pagingBoard.getContent(); // getContent() 하면 List 타입으로 받을 수 있음
//        model.addAttribute("boards", boards);

        model.addAttribute("boards", boardService.글목록(pageable)); // List 가 아닌 Page 타입으로..

        // /WEB-INF/views/index.jsp
        return "index"; // viewResolver 작동 (@Controller)
    }

Page 타입으로 받는 이유는 index.jsp에서

이렇게 현재 페이지를 나타내는 number, 첫번째 페이지를 나타내는 first, 마지막 페이지를 나타내는 last 등을 쓰기 위해서 이다.