인기 페이지 구현
좋아요가 있는 사진들을 순서대로 출력 (좋아요가 많은 순으로 출력)
ImageController.java로 와서 인기페이지를 구현할거다
@GetMapping("/image/popular")
public String popular() {
return "image/popular";
}
Java
복사
기존의 popular 함수에 추가해준다
@GetMapping("/image/popular")
public String popular(Model model) {
List<Image> images = imageService.인기사진();
model.addAttribute("images", images);
return "image/popular";
}
Java
복사
근데 api로 안만드는 이유는 ajax로 이용하는게 아니라서 ~ 모델에 담고 들고가기만 할거다.
만약에 API로 구현해야한다면 → 브라우저에서 요청하는게 아니라 안드로이드 , iOS 요청일때
이제 ImageService 가서 생성
@Transactional(readOnly = true)
public List<Image> 인기사진(){
return imageRepository.mPopular();
}
Java
복사
현재 좋아요가 있는 이미지를 뽑아내야 한다
-- 좋아요가 있는 이미지 뽑아내기
SELECT * FROM image;
SELECT * FROM Likes;
SELECT * FROM image WHERE id IN (2,3);
SELECT DISTINCT imageId from Likes; -- 중복제거
SELECT * FROM image WHERE id IN (SELECT DISTINCT imageId from Likes);
SELECT imageId, 1 likeCount from Likes;
SELECT imageId, 1 likeCount from Likes Group By imageId ;
SELECT imageId, COUNT(imageId) likeCount from Likes Group By imageId ;
SELECT imageId, COUNT(imageId) likeCount from Likes Group By imageId ORDER BY likeCount DESC ;
-- 뒤에 쿼리가 오류 발생 .(뒤에 컬럼2개를 갖고오는게 문제라 하나의 컬럼만 갖고오게 수정해야함. )
-- SELECT * FROM image WHERE id IN (SELECT imageId, COUNT(imageId) likeCount from Likes Group By imageId ORDER BY likeCount DESC);
SELECT imageId
from (
SELECT imageId, COUNT(imageId) likeCount
from Likes
Group By imageId
ORDER BY likeCount DESC
) c;
-- 근데 문제는 IN 연산자 뒤에 들어가는 쿼리는 아무리 정렬해도 인기순으로 정렬 되지않는다..
SELECT * FROM image WHERE id IN (SELECT imageId from ( SELECT imageId, COUNT(imageId) likeCount from Likes Group By imageId ORDER BY likeCount DESC ) c);
SELECT * from Image ;
SELECT imageId, COUNT(imageId) likeCount from Likes Group By imageId;
-- 잘 갖고오지만 이대로 갖고가면 레파지토리에 imageId , likeCount 땜에 오류나서 빼고 갖고가줘야한다.
SELECT *
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;
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;
SQL
복사
ImageRepository.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();
Java
복사
그 전에 러브로 로그인해서 cos 사진을 좋아요 눌러주자
popular.jsp
for문 돌릴거라 하나만 냄겨두고 다 삭제
<!--인기게시글 갤러리(GRID배치)-->
<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>
HTML
복사
인기페이지가면 2개눌린 스누피랑 1개눌린 메타몽 사진이 보여진다
스누피 사진을 누르면
해당 사진 유저의 프로필페이지로 이동된다