15. 데이터 삭제 하기

# Article 데이터를 DB에서 삭제하고 이를 확인한다.

 

진행 흐름

삭제 요청이 전달이 되면 DB에서 찾고 삭제 후 결과 페이지로 리다이렉트 하는 방식으로 진행

삭제 요청이 HTTP를 통해 전달이 되고 이 요청을 받은 컨트롤러가 Repository를 통해 DB에 있는 데이터를 삭제 한다.

단 기존 데이터가 존재 하는 경우에만 삭제 한다.

삭제가 완료 되었다면 결과 페이지로 리 다이렉트 하는걸로 마무리 된다. 이때 삭제가 완료 되었다는 메세지를 띄워주면 좋다. 이것을 구현해주는 클래스가 RedirectAttributes 이다.

 

삭제 버튼 생성

Delete 버튼 추가 : <a href="/articles/{{article.id}}/delete" class="btn btn-danger">Delete</a>

href 주소로 해당 버튼을 클릭 했을때, 요청을 보내겠다. 라는 의미.

버튼의 색깔을 구분하기 위해 "btn btn-danger" 코드를 삽입한다.

클라이언트에서 서버로 요청을 보낼때 크게 4가지의 행위를 한다. POST, GET, PUT, DELETE, 하지만 HTML에서는 POST와 GET 방식 외에는 지원을 하지 않는다. 추후에는 Javascript를 활용하여 수정을 해보자.

{{>layouts/header}}

<table class="table">
    <thead>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Title</th>
        <th scope="col">Content</th>
    </tr>
    </thead>
    <tbody>
    {{#article}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
    {{/article}}
    </tbody>
</table>

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>
<a href="/articles/{{article.id}}/delete" class="btn btn-danger">Delete</a>
<a href="/articles">Go to Article List</a>

{{>layouts/footer}}

컨트롤러 메소드를 생성

AcricleConroller로 이동하여 해당 메소드를 생성한다.

/articles/1/delete, /articles/2/delete, /articles/3/delete... 이런식으로 요청을 받아온다. 하지만 1, 2, 3 이 값이 변수로 바뀌어야 하기 때문에 ("/articles/{id}/delete") 이와 같이 입력해 준다.

 

1. 삭제 대상을 가져온다.

DB와 소통을 할때는 Repository를 통해 DB작업을 수행한다.

articleRepository.findById(id).orElse(null); 통해서 우선 id 값이 있는지 확인한다. 그리고 만약에 값이 없다면 null 값을 가져오도록 한다.

현재 id란 변수를 선언하지 않았으므로 .findById(id) 에서 에러가 발생한다. 해당 id는 URL에서 가져올 수 있는데 URL에서 가져올수 있도록 delete(Long id)를 선언해주면 일단 id 에러값을 사라졌다. 그리고 id Long 값이 URL로 대입이 되기 위해서는 @PathVariable Long id 와 같이 설정을 해주어야 한다.

그렇다면 URL에서 던져진 이 id값이 @GetMapping("/articles/{id}/delete") > @PathVariable Long id, 값에 대입이 되고 > 해당 값이 articleRepository.findById(id). 의 id 값으로 사용이 된다. 만약 1번 id 값이 요청이 들어오면 해당 값이 target 값으로 전달이 되고, 2번 id 값이 요청이 들어오면 2번 값이 target으로 맵핑이 된다.

 

2. 대상을 삭제한다.

null 값이 아닌 대상을 삭제 한다. delete 대상은 위에서 받아온 target 값을 넣는다. 그래서 articleRepository가 DB에서 해당 값을 지워주는 역할을 한다.

        if (target != null) {
            articleRepository.delete(target);
            rttr.addFlashAttribute("msg", "삭제가 완료 되었습니다.");
        }

 

3. 결과 페이지로 리 다이렉트 한다. 삭제가 완료 되었을때의 결과 페이지로 이동.

return "redirect:/articles";

삭제 완료 메세지 작성하기

RedirectAttributes rttr : 어떤 행위에 대한 반환값을 지정

rttr.addFlashAttribute("msg", "삭제가 완료 되었습니다."); > 일회성으로 한번쓰고 바로 사라지는 데이터를 등록, 하지만 해당 메세지가 보내지는 페이지가 바로 articles/index > index.mustache 페이지 이다.

    @GetMapping("/articles/{id}/delete")
    public String delete(@PathVariable Long id, RedirectAttributes rttr) {
        log.info("삭제 요청이 들어왔습니다!!");

        // 1. 삭제 대상을 가져온다.
        Article target = articleRepository.findById(id).orElse(null);
        log.info(target.toString());

        // 2. 대상을 삭제한다.
        if (target != null) {
            articleRepository.delete(target);
            rttr.addFlashAttribute("msg", "삭제가 완료 되었습니다.");
        }

        // 3. 결과 페이지로 리 다이렉트 한다.
        return "redirect:/articles";
    }

헤더 파일안에 "삭제가 완료 되었습니다" 라는 내용을 넣어주자.

templates > layouts > header.mustache 파일의 맨 마지막 부분에 해당 내용을 추가해 준다.

{{#msg}}라는 데이터가 있다면, 아래 내용을 출력하라.

<!-- arlet msg -->
{{#msg}}
    <div class="alert alert-primary alert-dismissible">
        {{msg}}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
    </div>
{{/msg}}

해당 bootstrap 설명

구글에서 getbootstrap 검색 > doc에서 > Alerts을 검색하면 해당 화면에 나온 코드를 사용 할 수 있다.

해당 코드를 그대로 복사하여 바로 사용할 수 있다.