머스테치로 화면 구성하기(3) 수정, 삭제

게시글 수정 화면 만들기

게시글 수정 API는 저번에 이미 만들었다.

@Transactional
public Long update(Long id, PostsUpdateRequestDto requestDto){
    Posts posts = postsRepository.findById(id)
            .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id="+ id));
    posts.update(requestDto.getTitle(), requestDto.getContent());
    return id;
}

그러므로 API 요청만 잘 하면된다.

• 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}}

btn-update 버튼을 누르면 아까 js에 만들었던 function이 실행된다. 이제 그 function안 채워야 한다.

• index.js

update : function () {
    var data = {
        title: $('#title').val(),
        content: $('#content').val()
    };

    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));
    });
},

title과 content만 받고 id를 가져온 뒤 api를 id로 호출하는 것이다. 수정되면 매페이지로 돌아간다.

• index.mustache

<td><a href="/posts/update/{{id}}">{{title}}</a></td>

title을 누르면 수정화면으로 가게 만든다.

• IndexController

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

 

실행

수정 된 모습을 확인할 수 있다.

 

게시글 삭제 화면 만들기

위의 수정하기 페이지를 보면 삭제가 존재하는 것을 알 수 있다. 이제 btn-delete를 게시글을 삭제 한다.

• index.js

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

id를 찾고 delete api를 호출한다.

• PostsService

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

• PostsApiController

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

 

실행

삭제 된 모습을 확인할 수 있다.

 

이번 장에서는 머스테치와 화면을 구성하는 방법에 대해 배웠다. 또 서버 템플릿 엔진에 대해서도 배웠다. 이제 혼자서 게시판 웹페이지는 만들 수 있을거 같다!!