Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 08 글 삭제

Spring Boot + Gradle + MySQL + JPA + Thymeleaf  환경에서 간단한 CRUD 예제를 만들어보자
이번 포스팅에서는 게시물 삭제를 구현해보자.
 

주요 기능

회원가입
로그인
게시글 등록
게시글 수정
게시글 삭제
게시글 조회 (일반 회원 조회수와 운영자 회원 조회수 따로 구분)
게시글 추천 

 

 

 

detail.html

body 태그 하단에 아래와 같은 스크립트를 작성한다.

<th:block layout:fragment="script">
    <script th:inline="javascript">

        $(document).ready(function () {
            /*<![CDATA[*/

            var id = /*[[${post.id}]]*/'';
            var memberId = /*[[${post.memberId}]]*/'';


            $('#remove').click((event) => {
                if (localStorage.getItem('id') != memberId) {
                    alert('권한이 없습니다');
                } else {
                    const path = 'http://localhost:8086/api/posts/' + id;

                    $.ajax({
                        url: path,
                        type: 'DELETE',
                        contentType: 'application/json',
                    }).done((result) => {
                        console.log(result);
                        if (response == 'success') {
                            alert('삭제 성공')
                            location.href = "http://localhost:8086"
                        } else {
                            alert(result);
                        }
                    });
                }
            })
        });

        /*]]*/
    </script>
</th:block>

 

 

 

CDATA

character data를 의미

일반 문자 데이터를 의미한다.

 

타임리프 변수를 script 태그 내에 사용하려면 아래 코드 안에서 명시한다.

타임리프 변수는 /*[[${  }]]*/ 로 감싸준다.

<script th:inline="javascript">
	
    /*<![CDATA[*/


    /*]]*/
 
 </script>

 

이렇게 쓰면 안된다. 조심하자 

<script type="text/javascript">

 

 

 

현재 서버에서 memberId는 내려주지 않기 때문에 코드를 수정해보자.

DetailDTO

필드에memberId를 추가해준다.

@Getter
@Setter
@Builder
public class DetailDTO {
    private Long id;
    private String title;
    private String content;
    @DateTimeFormat(pattern = "yyyy-MM-dd`T`HH:mm:ss")
    private LocalDateTime createdAt;
    @DateTimeFormat(pattern = "yyyy-MM-dd`T`HH:mm:ss")
    private LocalDateTime updatedAt;
    private int userViews;
    private int adminViews;
    private int likes;
    private String memberId;
    private String memberName;
}

 

 

 

BoardServiceImpl

 getDetail(Long id, String memberId) 메소드에서 DTO 생성 부분에 memberId를 추가해주자.

DetailDTO detailDTO = DetailDTO.builder()
        .id(boardEntity.getId())
        .title(boardEntity.getTitle())
        .content(boardEntity.getContent())
        .createdAt(boardEntity.getCreatedAt())
        .updatedAt(boardEntity.getUpdatedAt())
        .userViews(boardEntity.getUserViews())
        .adminViews(boardEntity.getAdminViews())
        .memberId(member.getId())
        .memberName(member.getName())
        .build();

 

 

 

BoardService

ResponseEntity remove(Long id);

 

 

 

BoardServiceImpl

remove(Long id)를 구현해주자.

@Override
public ResponseEntity remove(Long id) {

    boardRepository.deleteById(id);
    return new ResponseEntity("success", HttpStatus.OK);

}

 

deleteById(Id id)

Spring Data JPA에서 제공하는 메소드

내부적으로 delete를 호출한다.

id 값이 null인 경우 EmptyResultDataAccessException을 발생시킨다.

 

 

 

ApiController

@DeleteMapping("/posts/{id}")
public ResponseEntity remove(@PathVariable Long id) {
    ResponseEntity responseEntity = boardService.remove(id);
    return responseEntity;
}

 

 

 

이전 게시글들에서 충분히 설명했으므로 자세한 내용은 생략한다.

서버를 실행해서 삭제가 되는지 확인해보자.