스프링 33강. 페이징

 

 

mariadb 페이징

SELECT *
FROM post
LIMIT 0,3;

 

주의할 점

첫 번째 숫자 0은 번지수,

두 번째 숫자 3은 한 페이지에 띄울 개수이다.

 

0, 3은 0번지부터 3개씩 페이징 하겠다는 말이다.

 

첫 번째 숫자만 바뀌면서 페이징 해주면 되겠다.

 

이렇게 네이티브 쿼리 만들어주면 되는데

jpa를 쓰면 알아서 페이징을 해준다.

 

findAll 메서드에서 sort도 해주고 페이징도 해주는 메서드가 없다.

우선 정렬은 포기하고 실습해보자.

 

findAll의 리턴타입이 Page인 것을 볼 수 있다.

페이지 타입은 어떻게 생긴 데이터를 건네주는지 테스트해보자.

 

@ResponseBody를 걸어주면 RestController처럼 데이터를 리턴해준다.

@GetMapping("test/post/list")
public @ResponseBody Page<Post> listTest(@RequestParam(defaultValue = "0") Integer page) {
    
    // @RequestParam(defaultValue = "0")과 같은 것
    // if(page == null) {
    //     page = 0;
    // }

    
    PageRequest pq = PageRequest.of(page, 3);
    return postRepository.findAll(pq);
}

 

해당 페이지에 대한 모든 정보를 넘겨준다!

 

 

int는 null이 없고 초기 값이 0이다.

null 처리를 해주기 불편하니까 Integer를 사용하자.

Integer는 초기값이 null이다.

 

기본 자료형을 객체로 다루기 위해 사용하는 클래스인 래퍼 클래스(Wrapper Class)이다.

자바의 모든 자료형은 값을 갖는 객체를 생성할 수 있다.

 

기본 타입(Primitive Type)	래퍼 클래스(Wrapper Class)
byte	Byte
char	Character
int	Integer
float	Float
double	Double
boolean	Boolean
long	Long
short	Short

 

시작페이지 0페이지

 

페이지 정보도 모델에 담아가자.

 

// 메인 페이지 - 인증 X
// GET 글 목록 페이지 /post/list/
@GetMapping({ "/", "post/list" }) // { "/", "post/list" }로 쓰면 두 가지 방법으로 들어올 수 있음
public String list(@RequestParam(defaultValue = "0") Integer page, Model model) {

    // 1. postRepository의 findAll() 호출
    // posts = postRepository.findAll(Sort.by(Sort.Direction.DESC, "id")); // sort
    PageRequest pq = PageRequest.of(page, 3); // 페이지대로 3개씩 알아서 넘어가준다

    // 2. model에 담기
    model.addAttribute("posts", postRepository.findAll(pq)); // paging
    model.addAttribute("nextPage", page + 1);
    model.addAttribute("previewPage", page - 1);

    // 3. mustache 파일에 뿌리기

    return "post/list";
}

 

 머스태치는 View에서는 연산을 아무것도 못하게 막아뒀다.

컨트롤러에서 모든 연산을 한 후에 View로 가져가야 한다.

 

<!-- ../는 상위폴더로 올라가는 것 -->
{{> /layout/header}}

<!-- 컨테이너 시작 -->
<div class="container mt-3"> <!-- container, mt-3은 css 클래스임!! -->

    현재 페이지 번호 : {{posts.number}} <br />
    첫 페이지 : {{posts.first}} <br />
    마지막 페이지 : {{posts.last}} <br />

    <!-- 게시글 아이템 시작 -->
    {{#posts.content}}
    <div class="card mb-3">
        <div class="card-body">
          <h4 class="card-title">{{title}}</h4>
          <a href="/post/{{id}}" class="btn btn-dark">상세보기</a> <!--나중에 동적으로 id 바꿔줘야함!!!-->
        </div>
    </div>
    {{/posts.content}}
    <!-- 게시글 아이템 끝 -->

    <!-- 페이지 시작 -->
    <ul class="pagination justify-content-center">
        {{#posts.first}}
        <li class="page-item disabled"><a class="page-link" href="?page={{previewPage}}">이전</a></li>
        {{/posts.first}}
        {{^posts.first}}
        <li class="page-item"><a class="page-link" href="?page={{previewPage}}">이전</a></li>
        {{/posts.first}}

        {{#posts.last}}
        <li class="page-item disabled"><a class="page-link" href="?page={{nextPage}}">다음</a></li>
        {{/posts.last}}
        {{^posts.last}}
        <li class="page-item"><a class="page-link" href="?page={{nextPage}}">다음</a></li>
        {{/posts.last}}
    </ul>
    <!-- 페이지 시작 -->

</div>
<!-- 컨테이너 끝 -->

{{> /layout/footer}}

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩