🔥 #15 글 수정 기능

💡 board.js 에서 차이점

• delete 기능 : let id = $("#id").text();
  • 글 번호 : <span id="id"><i>${board.id} </i></span> 에선 ${board.id}가 태그 사이에 있으므로 html 혹은 text 함수를 쓴다.
• update 기능 : let id = $("#id").val();
  • <input type="hidden" id="id" value="${board.id}"/> 에선 input 태그 안의 value 값에 있으므로 val 함수를 쓴다.

---

1. detail.jsp 에서 수정 버튼 누르기

2. 해당 url 이 매핑된 BoardController 의 updateForm 메서드로 가서 updateForm.jsp 을 리턴함

3. updateForm.jsp 에서 사용자가 수정할 내용을 입력하고 (title, content)

4. 글 수정 완료 버튼을 누르면 board.js 가 작동함

5. board.js 에서 update 함수가 실행되고 해당 url 로 데이터가 전송됨 -> json 데이터 형태로..

6. BoardApiController 의 update 메서드가 실행되고 boardService 를 호출함

⭐ 7. BoardSerivce 에서 글수정하기 메서드가 실행되는데 이때 트랜잭션 어노테이션을 붙여서 레퍼지토리의 save 함수 없이 select 만으로 글을 수정할 수 있음

---

< detail.jsp >

.
.
.
<c:if test="${board.user.id == principal.user.id}">
    <a href="/board/${board.id}/updateForm" class="btn btn-warning">수정</a>
    <button id="btn-delete" class="btn btn-danger">삭제</button>
</c:if>
.
.
.

수정 버튼을 a 태그로 url 을 걸어준다!

< BoardController >

	// 글 수정하기
    @GetMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id, Model model) {
        model.addAttribute("board", boardService.글상세보기(id));
        return "board/updateForm";
    }

컨트롤러에서 해당 url을 찾아 온다.
GetMapping 으로, 수정할 페이지로 이동시켜주는 곳이다.
기존에 작성했던 title과 content도 model로 넘겨준다.

< updateForm.jsp >

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="../layout/header.jsp"%>

<div class="container">

    <form>

        <input type="hidden" id="id" value="${board.id}" />
        <div class="form-group">
            <input value="${board.title}" type="text" class="form-control" placeholder="Enter title" id="title">
        </div>
        <div class="form-group">
            <textarea class="form-control summernote" rows="5" id="content">${board.content}</textarea>
        </div>

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

</div>

<script>
    $('.summernote').summernote({
        tabsize: 2,
        height: 300
    });
</script>

<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

model로 넘겨받은 title과 content를 출력하고,
새로 수정할 title과 content를 넘겨줘야 한다.
글수정 완료 버튼은 id="btn-update" 를 갖고, board.js를 작동시킨다.

< board.js >

.
.
.
	$("#btn-update").on("click", ()=>{
            this.update();
	});
.
.
.
update: function () {
        let id = $("#id").val();

        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 (resp) {
            // 결과가 정상이면 done 실행
            alert("글수정이 완료되었습니다.");
            location.href = "/";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("글수정을 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    },
.
.
.

수정이기 때문에 type="PUT" 이고, 데이터를 json 형태로 "/api/board/"+id url에 보낸다.

< BoardApiController >

	@PutMapping("/api/board/{id}")
    public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board) {
        boardService.글수정하기(id, board);
        return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
    }

json 타입의 데이터이므로 매개변수에서 @RequestBody로 받는다.

< BoardService >

@Transactional
public void 글수정하기(int id, Board requestBoard) {
	Board board = boardRepository.findById(id) // 영속화 (영속성 컨텍스트에 넣는 것)
            .orElseThrow(()->{
                return new IllegalArgumentException("글 찾기 실패 : 아이디를 찾을 수 없습니다." + id);
            });
    board.setTitle(requestBoard.getTitle());
    board.setContent(requestBoard.getContent());
        // 해당 함수 종료시(Service가 종료될 때) 트랜잭션 종료 -> 영속화 되어있는 board 데이터가 달라졌기 때문에 더티체킹 일어남 -> 변경 감지 -> DB에 자동 flush
    }

수정은 CRUD 중에서 U이다.
즉, 트랜잭션을 걸어줘야 한다.
update 이지만 레퍼지토리의 save 함수를 사용하지 않고,
DB에서 select 하여 영속성 컨텍스트에 담는다.

그리고 수정한 데이터를 set 하면, 영속성 컨텍스트에 있는 Board가 변경되는 것이다.

함수가 종료되면 트랜잭션도 종료되면서 영속성 컨텍스트에 있는 Board가 변경이 감지되고, DB에 자동으로 flush 된다.