[블로그 만들기] 게시글 수정하기 - form 태그 PUT mapping

상세보기 페이지에 있는 수정/삭제 버튼 중 삭제 버튼의 기능은 넣었으니 이제 수정 버튼의 기능을 넣도록 하겠습니다. 수정 버튼을 누르면 수정 페이지로 이동하여 원래 게시글의 제목 및 내용을 수정할 수 있는 기능을 만들어줍니다.

 

우선 수정 버튼 클릭 시 이동할 페이지를 만들어줍니다.

글쓰기 페이지와 같은 디자인을 사용할 것이기 때문에 복사해서 필요한 부분을 수정해줍니다.

게시글을 수정할 때에는 원래 게시글의 데이터를 가져오고, 수정한 데이터를 다시 저장해야하기 때문에 PUT 매핑을 해야합니다. form 태그의 onsubmit 속성에 수정완료 버튼을 클릭했을 때 실행될 함수를 적어줍니다.

제목 부분의 input 태그의 value 속성에는 postEntity 모델에 올라가있는 title을 가져와 기존의 제목을  출력해줍니다.

textarea의 내용에도 postEntity 모델에 올라가있는 content를 가져와 기존의 내용을 출력해줍니다.

textarea의 id를 content로 바꿨기 때문에 summernote API를 적용했던 javascript 코드에서도 수정해줍니다.

수정완료 버튼을 눌렀을 때 실행될 함수의 코드를 작성해줍니다. 수정된 데이터를 그대로 저장해야하기 때문에 submit이 실행됐을 때 자동으로 새로고침되는 것을 막아주어야 합니다. event.preventDefault()함수로 막아주도록 합니다.

저장할 제목과 내용의 value 값을 가지고 와 변수에 저장해주고 오브젝트 변수에 넣어줍니다.

 

비동기함수로 만들기 위해 함수 앞에 async를, fetch 앞에 await을 붙여줍니다. 

이렇게 하지 않으면 데이터를 가져오기도 전에 fetch를 통해 매핑해버리기 때문에 수정된 데이터가 제대로 매핑되지 않아 기능을 수행하지 못합니다. 따라서 위의 수정된 게시글의 데이터를 가져오고 난 후 매핑이 되도록 코딩해주어야 합니다.

 

"/post/${postEntity.id}" 를 매핑값으로 가진 Controller의 메서드에 PUT 방식으로 JSON 데이터를 보내어 줍니다.

return 받은 데이터를 text화 시켜 잘 수정 되었다면 상세보기 페이지로, 수정되지 않았다면 메시지 창을 띄워주도록 합니다.

 

PostController 클래스에 PutMapping을 하고, 매핑 주소가 "/post/{id}"인 메서드를 하나 생성해줍니다.

PostController는 ViewResolver가 작동하지만 javascript에 데이터를 전송해주어야 하므로 @ResponseBody를 붙여 해당 메서드에 대해서만 MessageConverter가 작동하도록 해줍니다.

 

로그인된 사용자의 DB 아이디와 게시글을 작성한 사용자의 DB 아이디를 비교해 같다면 title과 content를 가져와 save 하도록하고 "ok"를 return 해줍니다. 아닐시에는 "fail"을 return해줍니다.

 

저장하고 서버를 실행시켜보면

수정이 잘 되는 것을 볼 수 있습니다.

 

그런데 수정 완료를 눌렀을 때 실행되는 javascript 함수에서

이렇게 EL 표현식으로 데이터를 불러오게 되면 나중에 js 파일을 따로 생성할 수가 없습니다. 

이럴 때는 함수의 매개변수로 받아오는게 가장 적합합니다.

수정완료 버틀을 눌렀을 때 실행되는 함수의 매개변수로 postEntity 모델에 올라가있는 post의 DB id를 매개변수로 전달해줍니다.

아래 함수에서 매겨변수를 받아 EL 표현식으로 데이터를 가져왔던 자리에 넣어줍니다.

 

다시 저장하고 서버를 실행시켜보면

똑같이 잘 작동하는 것을 볼 수 있습니다.