AJAX로 글 수정하기

[ BoardApiController ]

@RequiredArgsConstructor
@RestController
public class BoardApiController {
    private final BoardRepository boardRepository;

    @PutMapping("/api/boards/{id}")
    public ApiUtil<?> update(@PathVariable Integer id, @RequestBody BoardRequest.UpdateDTO requestDTO, HttpServletResponse response) {
//        boardRepository.updateById(requestDTO, id);
//
//        Board board = boardRepository.selectOne(id);
//        if (board == null) {
//            response.setStatus(404);
//            return new ApiUtil<>(404, "해당 게시글을 찾을 수 없습니다");
//        }

        boardRepository.updateById(requestDTO, id);
        //select가 아니니까 받아올 데이터가 없다!! 그러니 null
        return new ApiUtil<>(null);
    }

@PutMapping("/api/boards/{id}/update") 라고 안 쓰는 이유?
board의 1번을 put(update) 해주세요 라고 읽을 수 있기 때문에 update는 생략한다.
만약 Post 매핑으로 작성했다면 읽을 수 가 없으니 (가독성)? /update까지 적어줘야 한다.

[ BoardController ]

    @GetMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id, HttpServletRequest request) {
        Board board = boardRepository.selectOne(id);
        request.setAttribute("board", board);
        return "board/updateForm";
    }

가방에 담은걸 업데이트 폼에서 출력(뿌리기)

[ updateForm.mustache ]

{{> layout/header}}

<div class="container p-5">
    <div class="card">
        <div class="card-header"><b>익명 글수정 화면입니다</b></div>
        <div class="card-body">
            <form>
                <input type="hidden" id="id" value="{{board.id}}"> //id땡기는거 여기에 id 넣어놓고 하는게 제일 낳다
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="{{board.author}}" id="author">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="{{board.title}}" id="title">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" id="content">{{board.content}}</textarea>
                </div>
                <button type="button" onclick="btnUpdate()" class="btn btn-primary form-control">글수정완료</button>
            </form>
        </div>
    </div>
</div>

<script>
    function btnUpdate() {    //일관성 중요. btn~
        let id = $("#id").val();

      //  let boardId = {{board.id}}

        let board = {
            title: $("#title").val(),
            content: $("#content").val(),
            author: $("#author").val()
        };
        console.log(board);

        // let boardJson = JSON.stringify(board);
        // console.log(boardJson);

        $.ajax({
            url: `/api/boards/${id}`,
            type: "put",
            data: JSON.stringify(board),
            contentType: "application/json; charset=utf-8"
        }).done((res)=>{
            location.href = `/`;
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });
    }
</script>

{{> layout/footer}}

[ BoardRequest ]

package shop.mtcoding.blog.board;

import lombok.Data;

public class BoardRequest {

    @Data
    public static class WriteDTO {
        private String title;
        private String content;
        private String author;

    }

    @Data
    public static class UpdateDTO {
        private String title;
        private String content;
        private String author;

    }
}

[ BoardRepository ]

    @Transactional
    public void update(Integer id, BoardRequest.UpdateDTO requestDTO) {
        Query query = em.createNativeQuery("update board_tb set title = ?, content = ?, author = ? where id = ?");
        query.setParameter(1, requestDTO.getTitle());
        query.setParameter(2, requestDTO.getContent());
        query.setParameter(3, requestDTO.getAuthor());
        query.setParameter(4, id);

        query.executeUpdate();
    }

[ 화면 확인 ]