삭제할 데이터를 조회하고, 담고, 삭제처리를하고, 삭제되었다고 알림까지 하는 기능을 구현해보자.

🍢 삭제기능

🍡 HTML

사용자가 삭제를 진행하기 위한 버튼을 생성한다.

Edit(편집) 버튼 옆에 같은 모양(색은 다름 feat.bootstrap) Delete(삭제) 버튼을 생성한다.

버튼을 누르면 삭제 페이지/articles/{{article.id}}/delete로 이동

🍡 Controller

HTTP 메서드를 사용해서 게시물을 삭제하고 싶으면 POST, GET, PATCH(PUT), DELETE 중 DELETE를 사용하고 싶지만, HTML에서는 POST와 GET을 제외한 다른 메서드는 제공하지 않는다. 그래서 GET 메서드를 사용해서 DELETE 기능을 구현해보겠다.

🍥기본형

 @GetMapping("/articles/{id}/delete")
    public String delete() {
        return;
    }

메서드를 생성해주고, URL 요청을 접수한다.

🍥 Log 확인 코드 추가

 log.info("삭제 요청이 들어왔습니다!!");

삭제 요청(URL)을 받으면 정상적으로 요청되었는지 log에서 확인 할 수 있다.

🍥 삭제할 대상 가져오기

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

        // 삭제할 대상 가져오기
        Article target = articleRepository.findById(id).orElse(null);
        log.info(target.toString());

        return;
    }

@PathVariable Long id > id를 매개변수로 가져오기

🍥 대상 엔터티 삭제하기

// 대상 엔터티 삭제하기
        if (target != null){
            articleRepository.delete(target);
            alert.addFlashAttribute("msg", "정상적으로 삭제됐습니다~!");
        }

조건문으로 삭제할 대상이 있는지 확인
delete() 메서드로 대상 삭제

🍥 결과 페이지로 리다이렉트하기

 // 결과 페이지로 리다이렉트하기
        return "redirect:/articles";

결과페이지는 결국 처음 데이터의 리스트를 보여주는 홈페이지로 설정해뒀다.

🍢 삭제 알림

🍡 RedirectAttributes

이 객체를 사용하면 객체로 리다이렉트 페이지에서 사용할 데이터를 남길 수 있다.

public String delete(@PathVariable Long id, RedirectAttributes alert) {중략}

delete() 의 메서드의 매개변수로 사용할 수 있으며, 객체 이름은 alert 로 설정했다.

🍥 addFlashAttribute()

RedirectAttributes의 객체 중 addFlashAttribute()메서드를 사용하면 리다이렉트 된 페이지에서 사용할 일회성 데이터를 등록할 수 있다.

형식 : 객체명.addFlashAttribute( 넘겨주려는키문자열, 넘겨주려는값객체 )

// 대상 엔터티 삭제하기
        if (target != null){
            articleRepository.delete(target);
            alert.addFlashAttribute("msg", "정상적으로 삭제됐습니다~!");
        }

🍡 HTML

메세지 창이 나타나는 부분에 {{#msg}} {{/msg} 범위로 설정할 수 있다.

<div></div> 태그 안에 메세지 창을 작성하고, X 표시 또한 추가했는데 이는 BootStrap을 참고하자.

🍢결과