[SpringBoot] 게시판 만들기(4) - 게시글 수정, 삭제 VIEW/API만들기 - REST API

등록,조회에 이어 수정/삭제 기능도 만들겠다.

 

그전에 앞서 REST API 메소드를 간략정리하겠다.

생성 - POST
읽기 - GET
수정 - PUT
삭제 - DELETE

 

역시나 코드는 아래 github을 참조하였다. 내 포스트에는 전체 코드를 그대로 가져올 수 없으니 생략된 부분이 많다.

전체코드를 보려면 아래 링크로~~

github.com/jojoldu/freelec-springboot2-webservice

jojoldu/freelec-springboot2-webservice

 

1. 게시물 수정화면 생성

posts-update view인 mustache 화면을 생성하고, init함수에서 버튼 클릭이벤트 발생시에 동작할 함수를 연결한다.

        $('#btn-update').on('click',function() {
            _this.update();
        });

공통으로 관리하던 index.js에 update관련 function을 추가한다.

        var id = $('#id').val();

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

view화면에 적혀있는 수정할 데이터들을 받아와서 id값을 기준으로 수정된 내용을 저장한다.

type이 'PUT' 메소드로 지정되어 있는 것에 주목,,,

    @GetMapping("/posts/update/{id}")
    public String postsUpdate(@PathVariable Long id, Model model) {
        PostsResponseDto dto = postsService.findById(id);
        model.addAttribute("post",dto);

        return "posts-update";
    }

이미 수정 API는 APIController에서 만들어 놓았기때문에 IndexController에서는 view의 url 매핑만 해준다.

url에 id값이 붙어있기에 @PathVariable으로 id값을 받아온다.

findById(id)를 통해 얻어온 dto를 post라는 이름의 모델로 만들어 posts-update.mustache 파일에 전달한다.

 

프로젝트를 rerun()하여 게시물 생성후 조회된 테이블의 게시물제목을 클릭하면 다음과 같이 나오는 것을 확인한다.

제목/내용을 수정하여 수정완료를 누르고 반영이 된 것을 확인해본다.

 

 

2. 게시물 삭제 화면 생성

수정화면에 있는 삭제 버튼에 이벤트를 부여한다.

 $.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));
         });

그리고 Service, Controller에 해당 삭제작업의 실제 로직을 작성해준다.

Repository 인터페이스내 에서 별도 작업을 안하는이유는.. JPA에서 delete의 기본 기능에 대해서 지원을 하고 있기 때문!

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

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

 

 

이렇게 조회/등록/수정/삭제의 기본적인 기능을 하는 게시판이 끝났다.

아주 기본적인거여서 휘루룩 적은거라서 따라하려는 분들은 필히 깃헙을 참고하시기를...