[블로그프로젝트] 24. 글 삭제하기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

저번글에서 글상세보기에서 뒤로가기, 수정, 삭제 총 3가지를 만들었다.

뒤로가기는 history.back()으로 작동하는 버튼으로 만들었고 이번에는 삭제하는 기능을 만들고자한다.

 

가장먼저 글상세보기를 클릭했을때 해당 글의 번호와 작성자가 누구인지 확인하게 해보자

detail.jsp에 새로운 영역을 위해 div태그를 하나 추가한 후 span 태그를 이용해 글번호와 작성자를 한줄씩 지정해준다.

detail에는 boardController에서 board라는 이름값을 사용해 board.java에 있는 값들을 사용하게 저장해두었었다.

그렇기 때문에 board.id에는 글번호, board.user에는 유저정보 그중에서 유저의 아이디값인 username을 가져오면 된다.

        <br><br>

        <div>
            No : <span id="id"><i>${board.id} </i></span>
            <br>
            Writer : <span><i>${board.user.username} </i></span>
        </div>
            <br>

개발자도구에서 확인해보면(F12) div안에서 글번호와 작성자아이디를 볼 수 있고 span태그에 의해 두개가 따로 줄을 차지하고 있다.

<i>는 기울기를 설정하는 태그이다.

확인해보면 아래와같이 글번호와 작성자아이디를 확인할 수 있다.

 

BoardApiController로 이동해서 아래와 같이 작성한다.

기존에 하던 postmapping 이나 getmapping이 아니므로 잘 확인하자.

여기서 글번호를 가져와야하기 때문에 상세보기에서 했던것처럼 @pathvariable 어노테이션을 활용해서 주소안에"{}"을 사용할 수 있게 해주자 삭제하는 기준은 글번호를 기준으로 할 것이기 때문에 id값을 받고 service에는 글삭제하기라는 기능을 추가할 것이다.

    @DeleteMapping("/api/board/{id}")
    public ResponseDTO<Integer> deleteById(@PathVariable int id){
        boardService.글삭제하기(id);
        return new ResponseDTO<Integer>(HttpStatus.OK.value(),1);
    }

 

boardService로 이동해 메서드를 작성해주자

글을 삭제하고 따로 할것이 값을 보내줄게 없기 때문에 void로 작성해 리턴값을 없게해주면된다.

    @Transactional
    public void 글삭제하기(int id) {
        boardRepository.deleteById(id);
    }

 

이제 글삭제하기 버튼을 클릭했을 때 js로 클릭이벤트가 작동하도록 하자

board.js로 이동해 아래와 같이 작성해준다.

        $("#btn-delete").on("click",()=> {
            this.deleteById();
            });

 

마찬가지로 보내줄 데이터가 없기 때문에 data와 contentType이 없이 아래와 같이 작성해주면된다.

deleteById : function(){
            let id = $("#id").text();

            $.ajax({
                type : "DELETE",
                url : "/api/board/"+id,
                dataType : "json"

            }).done(function(resp) {
                alert("글삭제완료");

                location.href ="/"
            }).fail(function(error) {
                alert(JSON.stringify(error));
            });

 

서버를 실행해서 글삭제버튼을 눌러보면 기능이 잘 작동하는걸 확인할 수 있다.

test4가 사라졌다.

 

그런데 지금 방식대로 하면 아무나 아무글을 삭제할수 있게 된다.

그럼 어떻게 다른사람이 내가 작성한 글을 삭제못하게 할 수 있을까?

여러가지 방법이 있겠지만, 이 프로젝트에선 작성한사람과 로그인한사람이 다르면 아예 삭제버튼을 사용할수 없게 만드는 방식으로 진행하고자한다.

 

detail.jsp에서 삭제 버튼을 c taglib을 활용해 board에 저장된 userId가 시큐리티세션에 저장된 userId가 일치해야만 삭제버튼이

생기게 작성해주었다.

 <c:if test="${board.user.userId == principal.user.userId}">
        <button id="btn-delete" class="btn btn-danger">Delete</button>
    </c:if>

board.jsp

 

과연 잘 작동하는지 새로운 아이디로 회원가입을 진행해 확인해보자

회원가입후 로그인한다음 다른 회원의 글을 클릭해보면 삭제버튼이 아예 사라진걸 볼 수 있다.

수정버튼은 다음글에서 작성하도록 하겠다.