본문 바로가기

전체 글102

[Spring Data JPA] 댓글 구현하기 -3 댓글 뷰 렌더링 $.ajax({ type:"post", url:"/api/comment", data:JSON.stringify(data), contentType:"application/json; charset=utf-8", dataType:"json" }).done(res =>{ // console.log("성공",res) let comment = res.data; let content = ` ${comment.user.username} : ${comment.content} `; commentList.prepend(content); // append= 뒤에다가 넣는거 prepend는 앞에다가넣음 최신댓글이 위로 올라와야하니까 }).fail(error => { console.log(error,"오류") }); commen.. 2023. 1. 15.
[Spring Data JPA] 댓글 구현하기 -2 댓글 ajax 구현 및 DB연동 @Data @NoArgsConstructor @AllArgsConstructor @Builder @Entity public class Comment { @GeneratedValue(strategy = GenerationType.IDENTITY) @Id private int id; @Column(length = 100 , nullable = false) private String content; @JsonIgnoreProperties @ManyToOne @JoinColumn(name = "userId") private User user; @JsonIgnoreProperties @ManyToOne @JoinColumn(name = "imageId") private Image image; private Loc.. 2023. 1. 14.
[Spring Data JPA] 댓글구현하기 -1 모델 만들기 @Builder @AllArgsConstructor @NoArgsConstructor @Data @Entity public class Comment { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int id; @Column(length = 100 , nullable = false) //댓글은 항상 제한 걸어두자 private String content; @ManyToOne(fetch = FetchType.EAGER) //얘는 왜 eager?? @JoinColumn(name = "userId") private User user; @ManyToOne(fetch = FetchType.EAGER) @JoinColumn(name ="image.. 2023. 1. 14.
[Spring Data JPA] 프로필 페이지 유저 사진 변경 - 1 프로필 사진 변경을 구현할것이다. 3가지의 목표가 있다. 1. pageUserId 와 principalId 를 비교해서 둘이 동일할때만 동작하기. 2. 사진을 클릭시 input type="file" 강제로 클릭 이벤트 발생시키기. 3. 이미지를 put방식 (ajax)을 사용하여 서버로 전송시켜보기 - formData 객체 이용 profile.jsp 현재 이렇게 되어있다. div class 안에 form 태그와 img 태그가 있고 둘중 아무거나 클릭해도 onclick="popup('.modal-image')" 에 의해 온클릭 이벤트가 발생한다. 그렇다면 modal-image 클래스 를 찾아가보자. 프로필 사진 바꾸기 사진 업로드 취소 이렇게 되어있다. 사진속 고양이 있는곳을 클릭하면 뜬다. function.. 2023. 1. 14.
[Spring Data JPA] 좋아요 구현하기 -6 프로필 페이지 좋아요 카운트 구현 현재 프로필에서 마우스를 올리면 좋아요 카운트가 뜨는것을 구현하고자 한다. 우리는 이미 포토 게시판 구현하기에서 카운트를 구현했기 때문에 가져오기만 하면 된다. @GetMapping("user/{pageUserId}") public String profile(@PathVariable int pageUserId, Model model,@AuthenticationPrincipal PrincipalDetails principalDetails){ UserProfileDto dto = userService.회원프로필(pageUserId,principalDetails.getUser().getId()); model.addAttribute("dto", dto); return "user/profile"; } 우리가 아주.. 2023. 1. 14.
[Spring Data JPA] 좋아요 구현하기 -5 좋아요 높은 순서의 인기 페이지 구현하기 좋아요 (Likes) 가 있는 게시글들은 따로 popular 페이지에서 뜨게 할 수 있는 로직을 만듭니다. @GetMapping("/image/popular") public String popular(Model model) { //api는 데이터를 리턴하는 서버 여서 이건 그냥 ajax없이 들고가기만 해서 //컨트롤러에 구현 List images = imageService.인기사진(); model.addAttribute("images", images); return "image/popular"; } 세션을 들고가야 하기 떄문에 model을 매개변수로 넣어주었고 따로 ajax를 사용하지 않고 단순 데이터를 옮기기만 할 것이기 떄문에 imageController 에 구현합니다. @Transactional(r.. 2023. 1. 13.
[Spring Data JPA] 좋아요 구현하기 번외 무한참조 오류 잡기 public class Likes { // N @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int id; @JoinColumn(name="imageId") @ManyToOne private Image image; //1 @JsonIgnoreProperties({"images"}) @JoinColumn(name="userId") @ManyToOne private User user; private LocalDateTime createDate; @PrePersist // DB에 INSERT 되기 직전에 실행 public void createDate(){ this.createDate = LocalDateTime.now(); } } user의 .. 2023. 1. 13.
[Spring Data JPA]좋아요 구현하기 -4 Ajax 연결 후 마무리하기 마지막으로 좋아요 버튼 클릭시 likes 갯수를 동적 처리 해줘야 한다. function toggleLike(imageId) { let likeIcon = $(`#storyLikeIcon-${imageId}`); if (likeIcon.hasClass("far")) { //far -> 빈 상태 //좋아요 하겠다 $.ajax({ type:"post", url:`/api/image/${imageId}/likes`, dataType: "json" }).done(res =>{ // 좋아요 갯수 동적처리 let likeCountStr = $(`#storyLikeCount-${imageId}`).text(); console.log('좋아요 카운트', likeCountStr); let likeCount = Numbe.. 2023. 1. 13.