댓글 폼에 댓글내용을 작성하고 전송버튼을 클릭.
해당 버튼의 이벤트리스너를 추가해 클릭을 감지하고
클릭시에 fetch를 통해 RestAPI를 호출해보자..
<div class="card m-2" id="comments-new">
<div class="card-body">
<!-- 댓글 작성 폼-->
<form>
<div class="mb-3">
<label class="form-label">nickname</label>
<input type="text" class="form-control form-control-sm" id="new-comment-nickname">
</div>
<div class="mb-3">
<label class="form-label">comment</label>
<textarea type="text" class="form-control form-control-sm" rows="3" id="new-comment-body"></textarea>
</div>
<!--히든 인풋-->
{{#article}}
<input type="hidden" id="new-comment-article-id" value="{{id}}">
{{/article}}
<button type="button" class="btn btn-outline-primary btn-sm" id="comment-create-btn">save</button>
</form>
</div>
</div>
뷰페이지에는
새 댓글의 정보를 입력할 폼이 있다.
nickname, body를 입력할 란이 있고, 각 란은 id값을 지정해놓았다.
또한, 현재 글의 article_id 정보를 함께 전달하기 위해 hidden타입의 input에 article_id값을 넣어두었다.
<script>
{
//댓글 생성 버튼 변수에 저장
const commentCreateBtn = document.querySelector("#comment-create-btn");
//버튼클릭 이벤트 감지
commentCreateBtn.addEventListener("click",function(){
//새 댓글 객체 생성
const comment = {
nickname : document.querySelector("#new-comment-nickname").value,
body : document.querySelector("#new-comment-body").value,
article_id: document.querySelector("#new-comment-article-id").value
}
//fetch() - API요청을 JavaScript로 보냄
const url = "/api/articles/"+comment.article_id +"/comments";
fetch(url,{
method: "post", //post요청을 보냄
body: JSON.stringify(comment), //comment JS객체를 JSON으로 변경하여 보냄
headers:{
"Content-Type" : "application/json"
}
}).then(response => {
//http 응답 코드에 따른 메세지 출력
const msg = (response.ok) ? "saved" : "Error" ;
alert(msg);
//페이지 새로고침
window.location.reload();
});
});
}
</script>
addEventListner를 이용해 전송버튼의 클릭을 감지하고,
폼에 입력된 정보를 이용해 JS 객체 comment를 생성한다.
그리고 fetch메소드를 이용하여 RestAPI를 호출하는데,
fetch() 메소드는 첫번째 인자로는 url을, 두번째 인자로는 옵션 객체를 전달해야한다.
두번째 인자인 옵션객체는
요청방법(method), 헤더(headers), 바디(body) 등의 정보를 포함해야하는데,
헤더에는 body에 넣을 데이터의 타입을 지정하는데, 여기서는
"Content-Type" : "application/json"로 설정하여, 바디에서 JSON데이터를 다루도록 하였다.
body에는 JSON객체를 넣어주기 위해 JSON.stringify 메소드를 사용하여 JS객체를 JSON으로 변환하여 넣었다.
fetch가 완료되고 나면, 응답에 따른 동작을 하도록 .then()코드를 작성했다.
응답에 따라 메세지를 출력하고,
페이지를 새로고침한다.
새로고침은 window.location.reload() 메소드를 이용하면 된다.
'웹개발 > SpringBoot' 카테고리의 다른 글
AOP(Aspect Oriented Programming) (1) | 2023.03.14 |
---|---|
댓글 수정, 삭제기능 추가하기 (API 호출, fetch) (1) | 2023.03.14 |
댓글 REST API 완성하기 (0) | 2023.03.13 |
Comment 엔티티와 리파지터리 만들기 (0) | 2023.03.11 |
테스트코드 작성하기 (0) | 2023.03.11 |
댓글