[Web Service Project]8. 게시글 삭제

게시글 삭제

• 수정화면에 삭제 버튼 기능 추가

FrontEnd

posts-update.mustache

• update
  • btn-delete
    • 삭제 버튼을 수정 완료 옆에 추가
    • id가 btn-delete인 버튼의 click 이벤트가 발생하는 경우 게시글 삭제 javaScript delete 함수 호출

{{>layout/header}}

    <h1>게시글 수정</h1>

    <div class="col-md-12">
        <div class="col-md-4">

            <!-- ... -->

            <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>
        </div>
    </div>

{{>layout/footer}}

• index
  • btn-delete 버튼 이벤트 등록
  • delete 함수 호출 시 /api/v1/posts/{id} URL 로 DELETE Method 방식으로 호출하여 게시글을 삭제 요청

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

    // ... save, update

    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();

BackEnd

PostsAPIController

• PostsAPIController
  • 게시글의 Id를 arguements로 받아 PostsService.delete(id)를 호출
  • URL을 Delete method 방식으로 호출하는 경우 게시글 삭제

@RequiredArgsConstructor
@RestController
public class PostsAPIController {

    private final PostsService postsService;

    // ... save, update, findById

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

• PostsService
  • postsRepository.delete(posts)
    • JpaRepository에서 이미 delete 메서드를 지원
    • 엔티티를 파라미터를 삭제할 수도 있고, deleteById 메서드를 이용하면 id로 삭제할 수도 있다.
    • 존재하는 Posts인지 확인하기 위해 Entity 조회 후 그대로 삭제

@RequiredArgsConstructor
@Service
public class PostsService {
    private final PostsRepository postsRepository;

    // ...     save, update, findById, findAllDesc

    @Transactional
    public void delete(Long id) {
        Posts posts = postsRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("해당 게시물이 없습니다. id=" + id));
        postsRepository.delete(posts);
    }
}

화면 확인