springboot - blog project (58)

스프링부트 강좌 58강(블로그 프로젝트) - 글 수정하기

<a id="btn-update" class="btn btn-warning">Edit</a>

button 이 아니라 하이퍼링크로 해보자.

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

dd
@PathVariable를 이용하여 id값을 받는다. 그리고 모델을 만든다.
모델은 해당 데이터를 가지고 view까지 이동하는 것이다.
board 데이터를, boardService.글상세보기를 그대로 실행시켜준다. 재활용할 것. 어차피 그 글을 그대로 들고갈 것이기 때문에

<input type=“hidden”>

은 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의합니다. ... 따라서 숨겨진 입력 필드는 폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용됩니다.

DeleteMapping 과 주소가 똑같은데 괜찮다. 요청하는 메서드가 다르기 때문이다.

BoardService.java

일단 수정하려면 영속화를 먼저 시켜야 한다.

그럼 이제 영속성 컨텍스트에 Board가 딱 들어온다. 데이터베이스에 있는, 테이블에 있는 board 데이터와 똑같이 동기화가 되어있다.

이때 타이틀과 내용을 바꾼다. setTitle, setContent 함수를 이용한다.

더티체킹이 일어난다. 왜냐하면 영속화 되어있는 Board의 데이터가 달라졌기 때문에 더티체킹이 되면서 자동 업데이트가 된다. DB에 flush 된다. 커밋이 된다는 의미이다. 그러기 위해선 Transactional 어노테이션을 걸어줘야 한다.

    update: function(){

        let id = $("#id").val();
        let data = {
                title: $("#title").val(),
                content: $("#content").val()
        };
        console(id);
        console(data);
        $.ajax({ 
            type: "PUT",
            url: "/api/board/+id",
            data: JSON.stringify(data), // http body데이터
            contentType: "application/json; charset=utf-8",// body데이터가 어떤 타입인지(MIME)
            dataType: "json" // 요청을 서버로해서 응답이 왔을 때 기본적으로 모든 것이 문자열 (생긴게 json이라면) => javascript오브젝트로 변경
        }).done(function(resp){
            alert("글수정이 완료되었습니다.");
            location.href = "/";
        }).fail(function(error){
            alert(JSON.stringify(error));
        }); 
    },

맞게 update가 되지 않아서..헤맸음

api의 board id는
show-sql: true #console 창에서 확인할 수 있음 창에 계속 쿼리문이 나와 불편 ㅠㅠ 주석처리 해놓자.

가끔 자바스크립트가 느려서 오류가 생길 때도 있다. 빨리 반영이 안되어서 그런 것임

해결방법 : f12 , 새로고침 마우스 우클릭 -> 캐시 비우기 및 강력 새로고침 클릭! 자바스크립트를 새로 다운받는다. 그러면 잘 동작할 것이다.

저도 가고싶어요 라는 문구를 추가하고 수정해봤더니 잘 된다!

-이 글은 유투버 겟인데어의 스프링 부트 강좌를 바탕으로 정리한 내용입니다.-