인기페이지 구현

인기페이지란, 좋아요 수가 많은 이미지를 차례대로 출력해 화면에 보여주는 페이지이다.

 

상황 설명을 하겠다.

현재 사이트에 가입한 user 는 총 3명이다. (user = 1,2,3 존재)

 

지금 로그인한 user =1 이다.

user 1은,

user 2 의 이미지(A)에 좋아요를 눌렀고,

user 3의 이미지(B)에도 좋아요를 눌렀다.

 

그런데 user2 역시 user 3의 이미지(B) 에 좋아요를 눌러서,

결과적으로

 

좋아요 수는

user 2의이미지(A) : 1

user 3의 이미지(B) : 2

가 된다.

 

따라서 user1 의 인기페이지에는

B ,A 순으로 화면에 나타나게 된다. 

 

즉 아래처럼 화면에 표시된다.

 

 

 

 

쿼리는 직접 nativeQuery 로 완성하는데,

아래 주소를 참조하면 그 과정을 볼 수 있다.

https://happy-fun.tistory.com/144

 

쿼리가 완성되었다고 하고, 다음 코드들을 완성한다.

 

 

<jsp 파일>

	<div class="popular-gallery">

			<c:forEach var="image" items="${images}">
				<div class="p-img-box">
					<a href="/user/${image.user.id}"> <img src="/upload/${image.postImageUrl}" />
					</a>
				</div>
			</c:forEach>

		</div>

controller.java에서는 db로부터 받아온 인기페이지를 

model(images 변수) 을 통해 jsp 파일에 보내준다.

그래서 위와 같이 images 값을 받아 image로 활용하는 것을 알 수 있다.

 

더불어서 인기페이지의 각 이미지를 클릭하면, 그 이미지의 주인 user의 페이지로 이동하도록

href 를 완성했다.

 

img src를 통해 인기페이지에 이미지를 뿌려줌

 

 

<controller.java파일>

 

@GetMapping("/image/popular")
	public String popular(Model model) {
		List<Image> images = imageService.인기사진();
		model.addAttribute("images", images);
		
		return "image/popular";
	}

 

보통은, apicontroller.java를 활용해서 데이터로 담아오기도 하는데,

여기서 그렇게 하지 않은 이유는 

굳이 ajax를 이용해서 어렵게 구현하지 않아도 model에 담아서 구현가능하기 때문.

 

 

<service.java 파일>

	
	@Transactional(readOnly = true)
	public List<Image> 인기사진(){
		return imageRepository.mPopular();
	}

 

 

<repository.java 파일>

 

	
	@Query(value = "SELECT i.* FROM image i INNER JOIN (SELECT imageId, COUNT(imageId) likeCount FROM likes GROUP BY imageId) c ON i.id = c.imageId ORDER BY likeCount DESC", nativeQuery = true)
	List<Image> mPopular();

위에서 완성한 nativeQuery 를 여기서 활용한다.

 

이렇게 하면 완성된다.

 

 

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