04장. 머스테치로 화면 구성하기05

게시글 삭제 만들기

---

posts-update.mustache에 삭제버튼 추가

<a href="/" role="button" class="btn btn-secondary">취소</a>
<button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
<button type="button" class="btn btn-danger" id="btn-delete">삭제</button>

btn-delete

• 수정 완료 버튼 밑에 삭제버튼 추가
• 해당 버튼 클릭 시 js에서 이벤트를 수신함

 

index.js에 삭제 이벤트 함수 추가

var main = {
    init : function () {
        ..........
        $('#btn-delete').on('click', function () {
            _this.delete();
        });
    },
    .........
    delete : function () {
        var id = $('#id').val();

        $.ajax({
            type: 'DELETE',
            url: '/api/v1/posts/'+id,
            dataType: 'json',
            contentType:'application/json; charset=utf-8'
        }).done(function() {
            alert('글이 삭제되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            alert(JSON.stringify(error));
        });
    }

};

main.init();

• type에 'DELETE'를 제외하고 update functionrhk 크게 차이 없음

 

PostsService에 delete메서드 추가

@Transactional
    public void delete (Long id) {
        Posts posts = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 사용자가 없습니다. id=" + id));

        postsRepository.delete(posts);
    }

postsRepository.delete(posts);

• JpaRepository에서 이미 delete 메소드를 지원하고 있으니 이를 활용
• 엔티티를 파라미터로 삭제할 수도 있고, deleteById 메소드를 이용하면 id로 삭제할 수 있음
• 존재하는 Posts인지 확인을 위해 엔티티 조회 후 그대로 삭제

 

Service에서 만든 메서드를 PostsApiController에서 사용할 수 있게 Controller추가

@DeleteMapping("/api/v1/posts/{id}")
    public Long delete(@PathVariable Long id) {
        postsService.delete(id);
        return id;
    }

 

결과 확인

Success