블로그 만들기 | 게시글 목록 보기, 페이징 처리하기

 

메인페이지에서 게시글 목록 보이기

메인페이지로 이동할때 데이터를 가져가야한다. = model 이 필요

 

 

[BoardController] 에서 BoardService를 연결하고 model 을 이용해 데이터를 담아 뷰까지 데이터를 이동한다.

@Controller
public class BoardController {

   @Autowired
   private BoardService boardService;

   @GetMapping({"","/"})
   public String index(Model model) {
       model.addAttribute("boards",boardService.글목록());
       return "index";     // viewResolver 작동! = 해당index페이지로 모델의 정보를 이동
   }

• 모델은 jsp에서는 request정보이다. 
• @Controller 어노테이션은 리턴할때 viewResolver 작동을 하는데 이때 해당 index페이지로 모델의 정보를 들고 이동

 

 

model.addAttribute("boards",boardService.글목록()); 
return "index";

• boardService.글목록() 이라는 데이터를 "boards" 키 값에 담으면 리턴하는 뷰까지 데이터를 끌고 이동한다. 

 

 

 

 

2. boardService 에서 글목록()을 만든다 

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

• 글목록 전체를 들고오는거라 리스트 타입으로 리턴한다. 
• findAll() : 전체 들고오는 함수

 

 

 

3. [index.jsp] 메인 뷰페이지에 model 의 키값(boards) 넣어서 데이터 보이기 

<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>

 <c:forEach var="board" items="${boards}"> 의 items에서 데이터를 받고! 한개씩 var="board" 변수에 담아 실행한다.

 

제목부분에 ${board.title} 을 넣으면 board.getTitle() 메서드가 호출된다.

= board객체의 title 변수를 들고온다.

 

 

 

☆ 중요한점!

title을 들고오려면 Board객체 클래스에 @Getter 어노테이션이 있어야함.

 

 

즉 데이터를 들고오기 위해서는 @Getter 어노테이션이 있어야하는데 이미 @Getter @Setter을 포함한 @Data 어노테이션이 있어서 데이터를 정상적으로 들고올수있다.

 

 

 

 

 

- 결과 

 

 

---

 

게시글 목록 페이징 처리하기 

 

 

1. 메인페이지에서 글목록 페이징처리.

 

[BoardController]

 

@PageableDefault(size = 3, sort="id", direction = Direction.DESC) Pageable pageable

@GetMapping({"","/"})
public String index(Model model, @PageableDefault(size = 3, sort="id", direction = Direction.DESC) Pageable pageable) { 
    model.addAttribute("boards",boardService.글목록(pageable));
    return "index";
}

pageable 을 글목록에 넘긴다

 

 

 

2. 글목록()에서도 Pageable을 넣고 페이지는 List 타입이 아니고 Page타입

 

[BoardService]

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

 

 

 

이때 <c:forEach var="board" items="${boards.content}"> 로 수정해야 메인페이지에 게시글 목록이 나온다.

 

[index.jsp]

<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>

 

 

 

2페이지로 이동하려면 주소창에 ?page=2 붙여주기

* http://localhost:8000/?page=2

 

 

 

 

 

 

페이지 이동 버튼 추가하기

 

http://localhost:8000/

<ul class="pagination justify-content-center">
    <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>

<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">
    <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>
</div>

 

 

Previous버튼, next 버튼을 누를때 전 페이지, 다음페이지로 이동하기

• 이전버튼  href="?page=${boards.number-1}"
• 다음버튼  href="?page=${boards.number+1}"

* number가 현재페이지 번호

 

 

 

 

 

 

마지막 페이지에는 비활성화하기

 

<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>

 

** <c:choose> <c:when> <c:otherwise> 사용법은 switch ~ case문이다. 

• <c:choose> </c:choose>로 조건문의 영역을 설정
• <c:when> </c:when> 으로 조건문을 설정하고 그에 따른 명령문을 설정
• <c:otherwise> </c:otherwise> 로 위의 when에 해당되지 않는 조건들의 명령문을 설정

 

첫 페이지면 이전버튼을 disabled 비활성화하고, 처음이 아니면 disabled를 적지않는다

<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>

 

 

마지막 페이지면 다음버튼을 disabled 비활성화하고, 마지막이 아니면 disabled를 적지않는다

<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>