수정, 삭제 화면 만들기

posts-update.mustache 생성

{{>layout/header}}

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

<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="title">글 번호</label>
                <input type="text" class="form-control" id="id" value="{{post.id}}" readonly>
            </div>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title" value="{{post.title}}">
            </div>
            <div class="form-group">
                <label for="author"> 작성자 </label>
                <input type="text" class="form-control" id="author" value="{{post.author}}" readonly>
            </div>
            <div class="form-group">
                <label for="content"> 내용 </label>
                <textarea class="form-control" id="content">{{post.content}}</textarea>
            </div>
        </form>
        <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}}

머스테치 문법을 써서 value에 {{posts.변수명}}을 넣어줬다.

readonly를 사용하면 읽기만 가능하고 수정이 불가능하다.

 

index.js에 update, delete function추가

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 : function () {
        var data = {
            title: $('#title').val(),
            author: $('#author').val(),
            content: $('#content').val()
        };

        $.ajax({
            type: 'POST',
            url: '/api/v1/posts',
            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));
        });
    },
    update : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };

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

        $.ajax({
            type: 'POST',
            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));
        });
    },
    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();

 

init에 btn-update를 클릭하면 update function을 호출하도록, btn-delete를 클릭하면 delete function을 호출하도록 설계한다.

 

index.controller에 update 메소드 추가

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

id를 Get방식으로 받아서 findById메소드로 postsResponseDto인스턴스를 전달받아서 "posts"라는 이름으로 모델에 넣어준다. 그리고 나서 posts-update.mustache로 이동한다.

 

 

PostsService 삭제 기능

@Transactional
public void delete(Long id) {
    Posts posts = postsRepository.findById(id)
            .orElseThrow(
                    () -> new IllegalArgumentException("해당 글이 존재하지 않습니다. id = " + id)
            );
    postsRepository.delete(posts);
}

postsRepository.findById로 posts 인스턴스를 받는다. 이때 없으면 IllegalArgumentException을 반환하고 있으면 해당 posts를 삭제한다.

 

PostsApiController에 delete메소드 추가

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

@DeleteMapping으로 id를 전달받아서 postsService.delete(id)로 삭제한다.

 

이로써 수정, 삭제 기능을 완료했다.