vue + jpa project (8) - 게시판 Paging 처리

일단 BoardList.vue 파일에는 Paging 처리가 이미 되어 있고, 호출하는 부분만 약간 수정하면 된다.

일단 벡엔드 부분을 아래와 같이 추가하거나 수정하고, 이후에 vue 파일을 수정해보겠다.

 

1. 리턴 헤더 클래스 생성

     model이라는 패키지를 추가하여 Header.java 파일을 아래와 같이 생성한다.

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
@SuppressWarnings("unchecked")
public class Header<T> {

    private LocalDateTime  transactionTime;
    private String resultCode;
    private String description;
    private T data;
    private Pagination pagination;

    //Simple OK
    public static <T> Header<T> OK() {
        return (Header<T>) Header.builder()
                .transactionTime(LocalDateTime.now())
                .resultCode("OK")
                .description("OK")
                .build();
    }
        
    //DATA OK
    public static <T> Header<T> OK(T data) {
        return (Header<T>) Header.builder()
                .transactionTime(LocalDateTime.now())
                .resultCode("OK")
                .description("OK")
                .data(data)
                .build();
    }
    
    // Paging OK
    public static <T> Header<T> OK(T data, Pagination pagination) {
        return (Header<T>) Header.builder()
                .transactionTime(LocalDateTime.now())
                .resultCode("OK")
                .description("OK")
                .data(data)
                .pagination(pagination)
                .build();
    }
    
    // Error
    public static <T> Header<T> ERROR(String description) {
        return (Header<T>) Header.builder()
                .transactionTime(LocalDateTime.now())
                .resultCode("ERROR")
                .description(description)
                .build();
    }
}

 

2. 페이징용 클래스 생성

    이것 역시 model 패키지에 Pagination.java 파일을 아래와 같이 생성한다.   

package com.example.vueJpaProject.model;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Pagination {

    //페이지당 보여지는 게시글 최대 개수
    private int pageSize;

    //현재 페이지
    int page;

    //현재 블럭
    int block;

    //총 게시글 수
    int totalListCnt;

    //총 페이지 수
    int totalPageCnt;

    //총 구간 수
    int totalBlockCnt;

    //시작 페이지
    int startPage;

    //마지막 페이지
    int endPage;

    // 이전 구간 마지막 페이지
    int prevBlock;

    // 다음 구간 시작 페이지
    int nextBlock;

    // 인덱스
    int startIndex;
    
    public Pagination(Integer totalListCnt, Integer page, Integer pageSize, Integer blockSize) {
        this.pageSize = pageSize;

        //현재 페이지
        this.page = page;
        
        if(this.page < 1) this.page = 1;

        //총 게시글 수
        this.totalListCnt = totalListCnt;

        //총 페이지 수
        totalPageCnt = (int) Math.ceil(totalListCnt * 1.0 / this.pageSize);

        //총 블럭 수
        totalBlockCnt = (int) Math.ceil(totalPageCnt * 1.0 / blockSize);

        //현재 블럭
        block = (int) Math.ceil((this.page * 1.0) / blockSize);

        if(block < 1) block = 1;

        //블럭 시작 페이지
        startPage = ((block - 1) * blockSize + 1);

        //블럭 마지막 페이지
        endPage = startPage + blockSize - 1;

        //블럭 마지막 페이지 validation
        if (endPage > totalPageCnt) endPage = totalPageCnt;

        // 이전 블럭 (클릭 시, 이전 블럭 마지막 페이지)
        prevBlock = (block * blockSize) - blockSize;

        // 이전 블럭 validation
        if (prevBlock < 1) prevBlock = 1;

        //다음 블럭 (클릭 시, 다음 블럭 첫번째 페이지)
        nextBlock = (block * blockSize + 1);

        // 다음 블럭 validation
        if (nextBlock > totalPageCnt) nextBlock = totalPageCnt;

        startIndex = (this.page - 1) * this.pageSize;
    }
}

3. 페이징 기본처리 Resolver 생성

    패키지는 config 를 추가로 붙혀서 생성하고 WebMvcConfig.java 를 아래와 같이 생성한다.

    반드시 @Configuration을 붙혀서 사전 처리를 하도록 한다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
        SortHandlerMethodArgumentResolver sortArgResolver = new SortHandlerMethodArgumentResolver();
        sortArgResolver.setSortParameter("sort");
        sortArgResolver.setPropertyDelimiter("|");

        PageableHandlerMethodArgumentResolver pageableArgResolver = new PageableHandlerMethodArgumentResolver(sortArgResolver);
        pageableArgResolver.setOneIndexedParameters(true);
        pageableArgResolver.setMaxPageSize(500);
        pageableArgResolver.setFallbackPageable(PageRequest.of(0, 10));
        argumentResolvers.add(pageableArgResolver);
    }
}

 

4. 게시판 레파지토리 변경

     기존 BoardRepository 파일에 Pagealbe 파라미터를 처리하는 메소드를 추가한다.  

public interface BoardRepository extends JpaRepository<BoardEntity, Long> {
	Page<BoardEntity> findAllByOrderByBoardNo(Pageable pageable);
}

 

5. 게시판 서비스 변경

    기존의 메소드를 수정하거나 아니면 아래 소스를 추가한다. (저는 추가했음)

    public Header<List<BoardDto>> getBoardList(Pageable pageable) {

        Page<BoardEntity> boardEntities = boardRepository.findAllByOrderByBoardNo(pageable);
        List<BoardDto> dtoList = new ArrayList<>();

        for (BoardEntity entity : boardEntities) {
        	dtoList.add(entityToDto(entity));
        }

        Pagination pagination = new Pagination(
    			(int)boardEntities.getTotalElements()
    			, pageable.getPageNumber() + 1
    			, pageable.getPageSize()
    			, 10
    	);

    	return Header.OK(dtoList, pagination);
    }

 

6. 게시판 컨트롤러 수정

    기존의 메소드를 수정하거나 아니면 아래 소스를 추가한다.

    (저는 추가했기 때문에 호출 맵핑을 구분하기 위하여 list_paging으로 하였다)

    @GetMapping("/board/list_paging")
    public Header<List<BoardDto>> boardList_paging(
            @PageableDefault(sort = {"boardNo"}) Pageable pageable)
    {
    	return boardService.getBoardList(pageable); 
    }

 

7. BoardList.vue 에서 axios를 통해서 가져오는 소스를 아래와 같이 바꾼다.

    mounted()와 methods: 부분을 수정한 내용이다.

  mounted() {
    this.fnGetList()
  },
  methods: {
    fnGetList() {
      this.requestBody = { // 데이터 전송
        page: this.page,
        size: this.size
      }

      this.$axios.get(this.$serverUrl + "/board/list_paging", {
        params: this.requestBody,
        headers: {}
      }).then((res) => {
        this.list = res.data.data
        this.paging = res.data.pagination
      }).catch((err) => {
        if (err.message.indexOf('Network Error') > -1) {
          alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
        }
      })
    },
    fnPage(n) {
      if(this.page !== n) {
        this.page = n
      }
      this.fnGetList()
    }
  }

 

8. 테스트 데이터 임의 생성

    Test 폴더에서 메인테스트 class 파일에 insertData 메소드를 아래와 같이 추가하고 

    Junit을 이용하여 실행시켜서 데이터를 임의로 생성하도록 한다. (이때 BoardEntity의 updDate 상단에 있는

    @UpdateTimestamp 를 잠깐 주석처리하고 끝나면 다시 주석을 해제하자. 수정일자에 일단 날짜를 기본적으로

     들어가지 않도록 함이다.)

package com.example.vueJpaProject;

import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
class VueJpaProjectApplicationTests {

	@Autowired
	private BoardService boardService;

	@Test
	void contextLoads() {
	}
	
	@Test
	void insertData() {
	     BoardDto dto = null;

	    for (int i = 1; i <= 101; i++) {
	    	dto = new BoardDto();
	    	dto.setTitle("게시글 제목" + i);
	    	dto.setWriter("작성자" + i);
	    	dto.setContent("게시글 내용" + i);
	    	boardService.create(dto);
	    }
	}
}

 

 수정이 완료되면 화면에서 게시판 링크를 클릭하면 아래와 같은 화면이 조회된다.

하단에 페이징 처리가 되고 10개씩 조회가 되면 정상적으로 되는 것이다.