[Spring boot] (14) 수정 폼 만들기

Mission 
데이터 수정 페이지를 만드시오 

1.진행흐름 
-상세페이지지에 edit 링크를 연결하면 Controller가 해당 요청을 받아서 수정페이지를 보여준다.
-수정페이지에서는 기존 데이터를 보여줘야 하는데 이를 위해서 Repository를 통해 DB에서 데이터를 가져와야 한다.
-Repository 는 요청으로 던져진 Entity를 가져오고 Entity는 View 에서 사용할 수 있도록 Model에  등록돼야한다. 그럼 Model 에 등록된 데이터를 View 페이지에서 사용하면 된다. 

2.링크걸기
- 상세페이지 /articles/show.mustache 에서 
<a href="/articles/{{article.id}}/edit">edit</a>
-bootstrap 먹여서 버튼으로 
<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>


3. 요청받기
위의 요청을 받아줄 Controller가 필요하다. 

4.데이터 가져오기
@GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id){
        //수정할 데이터를 가져오기 DB에 있는 데이터를 레파지토리를 통해서 꺼내오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        return "ariticles/edit";  //뷰페이지 설정
    }

5.모델에 데이터 등록
/모델에 데이터를 등록, 모델을 쓸려면 파라미터에 모델을 등록해줘야 한다.
model.addAttribute("article", articleEntity);

6. 뷰페이지 작성  articles/edit.musthache 파일 생성
{{#article}} {{/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>

• edit의 전체적인 흐름 

 

 

🔥 구글링 훈련하기

• bootstrap btn primary
• HTML input name 속성

 

내용참고

https://www.youtube.com/channel/UCpW1MaTjw4X-2Y6MwAVptcQ