게시물 수정하기(DB 갱신)

1.상세페이지에서 수정버튼을 누르면 /articles/글번호/edit으로 이동하고,

2. edit페이지에서 내용을 수정해 submit버튼을 누르면 /articles/update로 post요청을 한다.

3. /articles/update로의 post요청을 처리한다(DB 갱신)

 

우선, 글의 상세페이지를 보여주는 mustache파일에 

수정하기 링크를 하나 추가한다.

링크는 /articles/{{article.id}} 로 해서 현재 글의 id값이 url주소에 사용되게 했다.

 

---

Controller에서 /articles/{id}/edit 경로의 get요청을 처리한다.

repository를 이용해 DB에서 해당id번호에 맞는 entity를 찾아, articleEntity변수에 저장한다.

view로 데이터를 전달하기 위해 model에 articleEntity를 등록하고,

articles/edit.mustache 뷰페이지를 보여준다

---

edit.mustache이다.

 

새 글을 작성하는 view인 new.mustache와 똑같은 구성으로 만들었는데,

input과 textarea에는 원래 글의 정보가 담겨있도록 input태그에는 value={{article.title}}를, textarea는 태그 내에 {{article.content}}를 넣어주었다.

 

그리고, submit 버튼을 눌렀을 때, 현재 글의 id정보도 함께 보내기 위해

input태그를 하나 더 생성하여 id값을 넣어주고, type="hidden"으로 보이지 않게 했다.

 

form태그의 action은 "articles/update"경로로 설정하였고, 

method는 PATCH/PUT을 쓰고싶지만.. form태그는 GET과 POST밖에 지원하지 않기 때문에 POST로 작성한다.

 

이제 다시 컨트롤러로 돌아가서 articles/update로의 post요청을 처리하자.

 

PostMapping해주었고

DTO형태로 폼 데이터를 받아오기 때문에, 인자로 ArticleForm을 넣어주었다(예전에 만들어둔 dto패키지 내의 클래스)

 

그리고 DB로 저장하기 위해 ArticleForm을 Entity로 변환해야 한다.

이 때, ArticleForm에 만들어두었던 toEntity메소드를 사용하면 된다.

 

이후, repository를 이용하여 DB에서 기존 데이터를 가져와 target변수에 저장한다.

target이 null이 아니라면 (=기존 데이터가 있다면)

DB에 새로운 데이터를 저장하면 된다.

(.save(articleEntity))

 

그리고, 수정이 완료되었다면

해당 글의 상세페이지로 이동하도록 리다이렉트 해준다.

"redirect:/articles/"+articleEntity.getId();