Study/SpringBoot

[스프링 부트 입문 14]수정 폼 만들기

슬기로운 개발자 2022. 5. 4. 22:36
728x90
* 학습목표
데이터 수정 페이지를 만드시오.

1. 진행 흐름
 - show(상세 페이지)에 edit 링크를 연결하면
 - 컨트롤러가 해당 요청을 받아서 edit(수정 페이지)를 보여줘야겠지요?
 - edit 페이지에서는 기존 내용을 보여줘야 하는데
 - 이를 위해서 Repository를 통해 DB에서 데이터를 가져와야 합니다.
 - Repository는 요청으로 던져진 Entity 가져오고
 - Entity는 View에서 사용할 수 있게 Model에 등록해야 합니다.
 - 그럼 Model에 등록된 데이터를 View 페이지에서 사용하면 되겠지요??

2. 링크 걸기
templates/articles/show.mustache
<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>
- class = "btn btn-primary" bootstrap css 기능을 사용하면 파란색 네모안에 edit 버튼으로 만들어짐.

3. 요청 받기
controller/ArticleController 컨트롤러에
@GetMapping("/articles/{id}/edit")
return "articles/edit";

4. 데이터 가져오기
수정할 데이터를 가져오기
Article articleEntity =articleRepository.findById(id).orElse(null);
public String edit(@PathVariable Long id){

5. 모델에 데이터를 등록
model.addAttribute("article", articleEntity);
public String edit(@PathVariable Long id, Model model){

6. 뷰 페이지 작성
templates/articles/edit.mustache 생성
{{#article}}
감싸주면 이 안에서는 article. 생략 가능(article.title -> title)
<input type="text" class="form-control" name="title" value="{{title}}">
<textarea class="form-control" rows="3" name="content">{{content}}</textarea>
<a href="/articles/{{id}}">back</a>
{{/article}}

7. 최종 확인.

https://github.com/Giltaehyeong/firstproject/commit/b60a890cb39a75d4c353182fef273578093a616b

 

[스프링 부트 입문 14]수정 폼 만들기 · Giltaehyeong/firstproject@b60a890

* 학습목표 데이터 수정 페이지를 만드시오. 1. 진행 흐름 - show(상세 페이지)에 edit 링크를 연결하면 - 컨트롤러가 해당 요청을 받아서 edit(수정 페이지)를 보여줘야겠지요? - edit 페이지에서는 기

github.com

소스코드참고.

728x90