이제 내가 쓴 댓글을 맵핑해준다
그 전에 유저 데이터 중에 유저가 등록한 images 에 대한 데이터는 필요가 없다!
Comment.java 에서 @JsonIgnoreProperties 추가해주자
@JsonIgnoreProperties({"images"})
@JoinColumn(name = "userId")
@ManyToOne(fetch = FetchType.EAGER)
private User user;
Java
복사
이제 user데이터 안에 images 데이터는 안들고온다
이제 전에 하던 story.js 에서 addComment 함수 안에 성공할때 ajax를 이어서 진행해준다
$.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 = `
<div class="sl__item__contents__comment" id="storyCommentItem-${comment.id}">
<p>
<b>${comment.user.username} :</b>
${comment.content}
</p>
<button><i class="fas fa-times"></i></button>
</div>
`;
commentList.prepend(content);
}).fail(error=>{
console.log("오류", error)
});
commentInput.val(""); //인풋 필드를 깨끗하게 비워준다.
JavaScript
복사
댓글이 제대로 남겨지고 있다. 근데 새로고침하면 사라짐.
그래서 페이지 로드할때도 갖고오게 해줘야 한다.
ImageApiController.java 에서 imageStory 함수에서 페이지 데이터를 갖고오는데
Image.java 가면 댓글에 대한 주석처리 되어있는데 밑에 선언해준다
// 댓글
@OneToMany(mappedBy = "image")
private List<Comment> comments;
Java
복사
근데 이러면 또 무한참조 오류가 날것이다
image의 댓글을 가지고 오면서 댓글안의 데이터인 image를 가지고 온다
그 안의 image는 필요없으니 @JsonIgnoreProperties({"image”}) 추가
// 댓글
@JsonIgnoreProperties({"image"})
@OneToMany(mappedBy = "image")
private List<Comment> comments;
Java
복사
story.js에 가면 getStoryItem 함수 안에 우리가 예전에 넣어준 태그들이 있다
<div class="sl__item__contents__comment" id="storyCommentItem-1">
<p>
<b>Lovely :</b> 부럽습니다.
</p>
<button>
<i class="fas fa-times"></i>
</button>
</div>
JavaScript
복사
이걸 수정해준다
<div id="storyCommentList-${image.id}">`;
image.comments.forEach((comment)=>{
item += `
<div class="sl__item__contents__comment" id="storyCommentItem-${comment.id}">
<p>
<b>${comment.user.username} :</b> ${comment.content}
</p>
<button>
<i class="fas fa-times"></i>
</button>
</div>
`;
})
item += `
</div>
JavaScript
복사
근데 댓글을 쓰면 위에 생기는데 order by 해줘야한다
Image.java에 @OrderBy로 추가해주면 정렬이 원하는대로 된다
// 댓글
@OrderBy("id DESC")
@JsonIgnoreProperties({"image"})
@OneToMany(mappedBy = "image")
private List<Comment> comments;
JavaScript
복사
