good day good day

Spring Boot

• 인기페이지 구현

  Spring Boot 2021. 11. 17. 22:32

  인기페이지란, 좋아요 수가 많은 이미지를 차례대로 출력해 화면에 보여주는 페이지이다. 상황 설명을 하겠다. 현재 사이트에 가입한 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 로 완성하는데, 아래 주소를 참조하면 그 과정을 볼 수 있다. h..

  Read More
• 좋아요 버튼, 좋아요 수 구현

  Spring Boot 2021. 11. 16. 21:16

  //1) 좋아요 버튼 `; if(image.likeState){ item += ``; }else{ item += ``; } item += ` //2) 좋아요 수 ${image.likeCount} likes 좋아요 버튼, 좋아요 수 구현 // (3) 좋아요, 안좋아요 function toggleLike(imageId) { let likeIcon = $(`#storyLikeIcon-${imageId}`); if (likeIcon.hasClass("far")) { // 좋아요 $.ajax({ type: "post", url: `/api/image/${imageId}/likes`, dataType: "json" }).done(res=>{ let likeCountStr = $(`#storyLikeCount-${i..

  Read More
• 좋아요 버튼 만들기

  Spring Boot 2021. 11. 16. 19:44

  좋아요 - 하트 버튼 누르면 빨간색으로 채워지게 하고, 좋아요 취소 - 다시 하트 버튼을 누르면 빨간색 사라지면서 취소 `; if(image.likeState){ item += ``; }else{ item += ``; } item += ` 좋아요 버튼 누르면, likeState = true 가 되도록 구현해놨음 -> 그래서 likeState 라면, class = "fas fa -heart active"가 되도록 하고, 좋아요 버튼을 누르지 않았다면, likeState = false가 되서, -> class = "far fa-heart"가 되도록 함 이것을 toggleLike 함수를 js 에 구현해서 적용시킴. function toggleLike(imageId) { let likeIcon = $(`#sto..

  Read More
• 페이지 스크롤

  Spring Boot 2021. 11. 12. 19:56

  https://happy-fun.tistory.com/132 페이징 처리 웹사이트 상에 이미지를 한 페이지 당 3개씩 보이도록 함 function storyLoad() { $.ajax({ url: `/api/image?page=${page}`, dataType: "json" : url에 페이지처리 주소 사용 @GetMapping("/api/image") public R.. happy-fun.tistory.com 이 글은 웹사이트상에 페이징 처리(한 페이지에 나타낼 수 있는 이미지 수 제한) 한 후 스크롤 바를 이용해서 페이지 이동처리를 하는 방법이다. 따라서 위의 페이징 처리 글을 읽고 와도 된다. $(window).scroll(() => { }); 다음과 같이 입력 시 웹 사이트 상에 스크롤 바가 생긴..

  Read More
• 페이징 처리

  Spring Boot 2021. 11. 12. 15:19

  웹사이트 상에 이미지를 한 페이지 당 3개씩 보이도록 함 function storyLoad() { $.ajax({ url: `/api/image?page=${page}`, dataType: "json" : url에 페이지처리 주소 사용 @GetMapping("/api/image") public ResponseEntity imageStory(@AuthenticationPrincipal PrincipalDetails principalDetails, @PageableDefault(size=3) Pageable pageable){ Page images = imageService.이미지스토리(principalDetails.getUser().getId(), pageable); return new ResponseEn..

  Read More
• @JsonIgnoreProperties

  Spring Boot 2021. 11. 11. 15:14

  mariadb 에 SELECT * FROM image WHERE userId IN (SELECT toUserId FROM subscribe WHERE fromUSerId = 2); 쿼리를 작성하면, 2번이 구독하는 1,3 번의 image로부터 정보를 얻어낸다. Image.java는 아래와 같다. import java.time.LocalDateTime; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persist..

  Read More
• ResponseEntity

  Spring Boot 2021. 10. 27. 15:47

  참고 자료 : https://devlog-wjdrbs96.tistory.com/182 [Spring Boot] ResponseEntity란 무엇인가? 먼저 REST API가 무엇인지는 아래 블로그를 먼저 잘 읽어보자. https://meetup.toast.com/posts/92 REST API 제대로 알고 사용하기 : TOAST Meetup REST API 제대로 알고 사용하기 meetup.toast.com 1. ResponseEn.. devlog-wjdrbs96.tistory.com

  Read More