스프링 부트, 입문!

스프링 부트, 입문!

쉽고 빠르게 배우는, 스프링 부트 첫걸음!

14 수정 폼(form) 만들기

# 수정 폼 만들기 ## 미션 데이터 수정을 위한 폼을 만드시오. ![홍팍-스프링-부트-입문--미션](http://drive.google.com/thumbnail?export=view&sz=w960&id=1e-Sn3RWb6yp_hn1C6FGnkeAILjX_-6wN) ## 01:34 링크 걸기 - a 태그 #### ../articles/show.mustache ``` {{>layouts/header}} <table class="table"> ... </table> <!-- 수정 링크 추가 --> <a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a> <a href="/articles">Go to Article List</a> {{>layouts/footer}} ``` ## 03:38 요청 받기 - 컨트롤러, GetMapping #### ../controller/ArticleController ``` ... @Controller @Slf4j public class ArticleController { ... @GetMapping("/articles/{id}/edit") public String edit(@PathVariable Long id, Model model) { // 수정할 데이터 가져오기 Article articleEntity = articleRepository.findById(id).orElse(null); // 모델에 데이터 등록 model.addAttribute("article", articleEntity); // 뷰 페이지 설정 return "articles/edit"; } } ``` ## 07:33 수정 페이지 작성 #### ../articles/edit.mustache ``` {{>layouts/header}} {{#article}} <form class="container" action="" method="post"> <div class="mb-3"> <label class="form-label">제목</label> <input type="text" class="form-control" name="title" value="{{title}}"> </div> <div class="mb-3"> <label class="form-label">내용</label> <textarea class="form-control" rows="3" name="content">{{content}}</textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> <a href="/articles/{{id}}">Back</a> </form> {{/article}} {{>layouts/footer}} ``` ## 🔥 구글링 훈련하기 - bootstrap btn primary - HTML input name 속성