페이징 처리

웹사이트 상에 이미지를 한 페이지 당 3개씩 보이도록 함

 

<js 파일>

 

function storyLoad() {
	$.ajax({
		url: `/api/image?page=${page}`,
		dataType: "json"

: url에 페이지처리 주소 사용

 

 

<controller.java 파일>

@GetMapping("/api/image")
	public ResponseEntity<?> imageStory(@AuthenticationPrincipal PrincipalDetails principalDetails, 
			@PageableDefault(size=3) Pageable pageable){
		Page<Image> images =  imageService.이미지스토리(principalDetails.getUser().getId(), pageable);
		return new ResponseEntity<>(new CMRespDto<>(1, "성공", images), HttpStatus.OK);
	}

: 매개변수에 @PageableDefault Pageable pageable 사용 , service 로부터 Page<Image>로 받음

 

 

<service.java 파일>

	
	@Transactional(readOnly = true) 
	public Page<Image> 이미지스토리(int principalId, Pageable pageable){
		Page<Image> images = imageRepository.mStory(principalId, pageable);

 

: 매개변수로 Pageable pageable 사용

 

<repository.java 파일>

@Query(value = "SELECT * FROM image WHERE userId IN (SELECT toUserId FROM subscribe WHERE fromUserId = :principalId) ORDER BY id DESC", nativeQuery = true)
	Page<Image> mStory(int principalId, Pageable pageable);

: 매개변수로 Pageable pageable 받아서 사용

쿼리상에 ORDER BY id DESC로 받아서 내림차순

 

 

이렇게 하면, jsp 파일 즉, 웹 사이트 한 페이지 당 이미지가 3개씩만 보임

 

postman 결과:

 

이런식으로 ?page=1 로 웹사이트 상 1페이지를 보여달라고 하면, 최대 3개의 이미지만 나타냄.

(page =0 이 첫페이지)

 

postman 결과 페이지 아래부분에 이런 내용을 볼 수 있는데,

totalElemants : 현재 이미지가 총 5개

totalPages : 한 페이지당 3개씩 나타내므로 총 페이지수는 2개

size : 한 페이지당 보여지는 이미지 개수

number : 현재 페이지(1페이지에 있음)

 

 

* 번외 : 이미지 사용

이렇게 받게 된 이미지가 어디에 있는지 확인.

<controller.java 파일>

@GetMapping("/api/image")
	public ResponseEntity<?> imageStory(@AuthenticationPrincipal PrincipalDetails principalDetails, 
			@PageableDefault(size=3) Pageable pageable){
		Page<Image> images =  imageService.이미지스토리(principalDetails.getUser().getId(), pageable);
		return new ResponseEntity<>(new CMRespDto<>(1, "성공", images), HttpStatus.OK);
	}

 

(아까 맨 위에 올린 controller 파일과 동일하다.)

그런데 여기서 보면, return 으로 new CMRespDto<>(1, "성공", images) 이렇게 되어 있다.

 

<CMRespDto.java> 파일

 

 

public class CMRespDto<T> {
	private int code; // 1(성공), -1(실패)
	private String message;
	private T data;
}

 

즉, CMRespDto.java의 data부분에 images를 받는 것이다.

그런데, 웹사이트 상에서 f12 로 console 창을 보면,

 

 

이런식으로, data.content 내부에 이미지가 있다.

때문에, 

 

<js파일>

function storyLoad() {
	$.ajax({
		url: `/api/image?page=${page}`,
		dataType: "json"
	}).done(res => {
		//console.log(res);
		res.data.content.forEach((image)=>{
			let storyItem = getStoryItem(image);
			$("#storyList").append(storyItem);
		});

이런식으로, res.data.content 로 이미지 사용함

 

 

참고자료: 이지업 강의 사이트 "스프링부트 SNS프로젝트 - 포토그램 만들기"