vue.js [글 삭제하기]
지난번 수정에 이어서 바로 글 삭제하는 기능을 추가하였다.
삭제하기 또한 수정하기와 마찬가지로 db안에 저장 되어있는 password와 사용자가 ui에서 입력하는 password가 일치하면 삭제가 되도록 하였다.
그렇기 때문에 ui에서는 비밀번호 입력란만 만들어 넣었다.
삭제를 할때에도 BoardDelete.vue에서 해당하는 글의 id값을 가진 글만 삭제 되도록 하여야 하기 때문에 Board.vue(상세페이지목록) 에서 BoardDelete.vue로 id값이 넘어가도록 linkTo3메서드를 만들었다.
따라서 글 삭제 버튼을 클릭하면 linkTo3메서드가 실행되면서 현재 쿼리의 id값이 BoardDelete로 같이 넘어간다.
Backend
backend의 컨트롤러에서 "/del" url을 새로 만들었다.
이번에도 PostMapping을 사용하여 수정기능때와 거의 동일하게 구현.
그리고 글 삭제기능을 구현할때에 두가지의 선택지가 있다.
첫번째는 mapper에서 delete구문을 사용하여 해당 글을 완전히 삭제시키는 것과
두번째로 처음 Board 테이블을 만들때에 'isDel'컬럼을 만들었는데 'isDel' 컬럼의 값이 Y 또는 N으로 나뉘어 지며 Home.vue에서 'isDel'의 값이 N인 값의 글만 게시판에 보여지도록 하고 BoardDelete.vue에서 UPDATE쿼리를 사용하여 삭제할 글의 'isDel'값을 Y로 바꾸어줌으로써 게시판에 삭제된 데이터를 제외한 글만 보여지게 하는 방법이 있다.
이 방법을 사용하면 원치 않게 삭제된 데이터도 복구 시킬수 있는 장점이 있다.
우선 첫번째 방법을 사용하여 구현하였다.
수정하기와 마찬가지로 boardDAO(서버에 저장된 password)와 getPassword(입력한 password)가 일치하면 실행되도록 설정.
Mapper에서는 앞서 말헌것 처럼 해당하는 id에관한 글을 삭제하도록 DELETE쿼리를 작성.
이제 웹에서 9번째 글을 삭제해 보겠다.
db에 저장된 password와 동일한 password입력
확인해보면 성공적으로 9번째 글이 삭제가 되었다!
수정하기 기능을 만들때 BoardChange.vue에 해당하는 글의 id값을 넘겨주는과정, backend에서는 service부분에서 좀 헤매서 시간이 좀 걸렸었다.
삭제하기 기능을 만드는 과정이 수정하기와 매우 비슷하기 때문에 쉽게 해결 할 수 있었다.