[Blog 프로젝트] 게시글 수정 기능 (API 통신)

게시글 수정 기능

1. board/detail.html에서 수정 버튼과 버튼의 동작을 추가해야 합니다. 수정 버튼 클릭 시 /board/{id}/updateForm URI로 요청을 보냅니다.
2. BoardController.java에서 해당 URI에 대한 응답을 매핑해줍니다.
3. 수정하기 위한 view는 board/updateForm.html에서 생성합니다.
4. 해당 view에서는 수정 완료 버튼 클릭 시 수행할 통신에 대한 자바스크립트 코드를 추가합니다.
5. 요청에 대한 응답은 BoardApiController.java에서 매핑해줍니다.
6. 마지막으로 게시글 수정에 대한 비즈니스 로직을 추가해줍니다.

아래에서 해당 순서를 바탕으로 코드의 추가를 진행하겠습니다.

---

board/detail.html

게시글 상세보기 - 수정 버튼의 동작을 추가해줍니다.

<button th:onclick="|location.href = '@{/board/{id}/updateForm(id=${board.id})}'|">
    수정
</button>

게시글의 아이디를 URI에 포함하여 updateForm으로 요청을 보냅니다.

다음으로 해당 버튼 클릭으로 사용자가 요청한 정보의 응답을 진행하는 메서드를 추가합니다.

---

BoardController.java

앞서 추가한 수정버튼 URI에 대한 응답을 매핑해줍니다.

@GetMapping("/board/{id}/updateForm")
public String updateForm(@PathVariable int id, Model model){
    model.addAttribute("board", boardService.findBoardById(id));
    return "board/updateForm";
}

URI의 게시글 id 값을 @PathVariable 어노터이션을 사용하여 id변수에 저장합니다.

id값으로 게시글을 검색한 후 model에 담아 board/updateForm으로 이동합니다.

다음으로 게시글을 수정하기 위한 view를 생성합니다.

---

board/updateForm.html

게시글 생성에서 사용한 form을 그대로 가져와 조회한 정보를 매핑해줍니다.

<div class="container">

  <form method="post">
    <div class="mb-3 mt-3" style="margin-bottom: 1rem">
      <label for="title" class="form-label">Title</label>
      <input th:value="${board.title}" type="text" class="form-control" id="title" 
                            placeholder="Enter Title" name="title">
    </div>

    <div class="mb-3" style="margin-bottom: 1rem">
      <label for="content" class="form-label">Content</label>
      <textarea th:utext="${board.content}" class="form-control summernote" rows="5" 
                                id="content" name="content"></textarea>
    </div>
  </form>

  <button id="btn-update" class="btn btn-primary">수정 완료</button>

</div>

현재 게시글의 아이디값을 외부 자바스크립트에서 사용하기 위해 변수 처리 해줍니다.

<script type="text/javascript" th:inline="javascript">
  const updateId = $.parseJSON('[[ ${board.id} ]]');
</script>

다음으로 수정완료 버튼 클릭시 수행할 통신에 대한 자바스크립트 코드를 추가합니다.

---

static/js/board.js

버튼의 아이디 값을 사용하여 매핑해주고, 실행 함수의 로직을 설정합니다.

버튼 클릭 시 /api/board/{id} 로 title, content를 Http Body에 담아 PUT메서드 전송해줍니다.

$("#btn-update").on("click", ()=>{
            this.update();
        });

update: function () {
    let id = updateId;

    let data = {
        title: $("#title").val(),
        content: $("#content").val()
    }

    $.ajax({
        type: "PUT",
        url: "/api/board/" + id,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",

    }).done(function (response) {
        // 요청 결과가 정상인 경우
        const status = response.status;

        if (status === 200){
            alert("글 수정이 완료 되었습니다.");
            history.back();
            // location.href = ("/");
        } else {
            throw new Error();
        }

    }).fail(function (error) {
        // 요청 결과가 비정상인 경우
        alert(JSON.stringify(error));

    });
},

다음으로 PUT 요청에 대한 응답을 진행하는 메서드를 추가합니다.

---

BoardApiController.java

앞서 추가한 요청에 대한 응답을 매핑해줍니다.

@PutMapping("/api/board/{id}")
public ResponseDTO<Integer> update(@PathVariable int id,
                                   @RequestBody Board board){

    boardService.updateBoard(id, board);
    return new ResponseDTO<Integer>(HttpStatus.OK.value(), 1);
}

URI에 포함되어 온 id값을 @PathVariable 어노테이션을 사용하여 저장하고

Body에 저장되어 온 Title, Content값을 Board 객체의 setter 메서드를 사용하여 저장합니다.

해당 정보를 파라매터로 받는 boardService의 메서드를 통하여 업데이트 로직을 수행하고

결과가 정상적인 경우 결과 값을 반환 합니다.

다음으로 게시글 수정에 대한 비즈니스 로직을 추가해줍니다.

---

BoardService.java

파라매터로 전달된 id를 통하여 게시글을 조회하여 Board 객체에 저장합니다.
이는 영속성 컨텍스트에 Board 객체를 영속화 하기 위함입니다.

영속화된 Board 객체의 title, content데이터를 파라매터로 전달된 수정할 정보로 변경합니다.

@Transactional
public void updateBoard(int id, Board requestBoard) {

    Board board = boardRepository.findById(id).orElseThrow(()->{
        throw new IllegalArgumentException("글 찾기 실패: 게시글이 존재하지 않습니다.");
    });

    board.setTitle(requestBoard.getTitle());
    board.setContent(requestBoard.getContent());
}

@Transcational 어노테이션을 사용하여 해당 서비스가 종료될 시 영속성 컨텍스트가 자동으로 커밋되어 DB에 UPDATE될 수 있도록 설정해줍니다.