JAVA, Spring
Spring Boot 수정 폼 만들기 (Update), 데이터 수정하기
flykimjiwon
2023. 4. 5. 20:12
반응형
- Update : 수정폼 만들기
아래와 같이 게시판의 글을 수정하고 싶다.
먼저 글 상세페이지로 들어가고
글의 상세페지로 들어가 Edit을 누르면 수정으로 들어가게 되는데 그러려면 상세 페이지를 담당하는
show.mustache파일을 수정해야 한다. 테이블밑에 Edit을 추가해주고 아이디를 파라메터로 같이 전송해주는 링크를
만들어준다.
show.mustache
{{>layouts/header}}
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">title</th>
<th scope="col">content</th>
</tr>
</thead>
<tbody>
{{#article}}
<!-- 이 간격안에서 article모델 가져올 수 있다.-->
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{content}}</td>
</tr>
{{/article}}
</tbody>
</table>
<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>
<!--POST, GET ,UPDATE, DELETE 가 원래 있지만 여기선 GET, a태그 링크를 사용해서 요청해보자-->
<a href="/articles/{{article.id}}/delete" class="btn btn-danger">Delete</a>
<a href="/articles">Go To Article List</a>
{{>layouts/footer}}
그리고 컨트롤러에 edit와 update를 아래와 같이 만들어준다.
그리고 위그림같이 기존의 데이터를 가져올 필요도 있기 떄문에 edit.mustache도 만들어준다.
ArticleController.java
@GetMapping("/articles/{id}/edit")
///articles/{article.id}/edit 이건 오류!
public String edit(@PathVariable Long id,Model model){
// 수정할 데이터를 가져오기!
Article articleEntity = articleRepository.findById(id).orElse(null);
// id는 url파라미터로 가져오고싶다. 패쓰 배리어블
//모델에 데이터 등록
model.addAttribute("article",articleEntity);
// 뷰 페이지 설정!
return "articles/edit";
}
@PostMapping("articles/update")
public String update(ArticleForm form){
log.info(form.toString());
// 1: DTO를 엔티티로 변환한다!
Article articleEntity = form.toEntity();
log.info(articleEntity.toString());
// 2: 엔티티를 DB로 저장한다!
// 2-1 : DB에서 기존 데이터를 가져온다!
Article target = articleRepository.findById(articleEntity.getId()).orElse(null);
// 2-2 : 기존 데이터에 값을 갱신한다!
if (target!=null){
articleRepository.save(articleEntity); // 엔티티가 db로 갱신!
}
// 3: 수정 결과 페이지로 리다이렉트한다.
return "redirect:/articles/" + articleEntity.getId();
}edit.mustache
{{>layouts/header}}
{{#article}}
<!-- 이렇게 감싸주면 title,content,id전부 article.~로 쓰는거 줄여줄 수있다. article.title.등..-->
<form class="container" action="/articles/update" method="post">
<!-- form이 get과 post만 지원해서 put써야하지만 post를 우선 사용하기-->
<!-- action 어디로, method 어떻게-->
<input name="id" type="hidden" value="{{id}}">
<!-- 아이디도 숨겨서 보내주기-->
<div class="mb-3">
<label class="form-label">subject</label>
<input type="text" class="form-control" name="title" value="{{title}}">
</div>
<div class="mb-3">
<label class="form-label">content</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}}
Form 태그에서 post와 get만 지원하기 때문에 두가지를 사용했고 원래대로라면 put 을 사용해 줘야한다.
전체 흐름을 살펴보면
1)게시 상세글에서 링크를건다 (수정페이지)
2)컨트롤러에서 요청을 받는다.
3)수정 페이지를 작성한다.
4)이때 수정페이지의 기존 데이터를 불러온다.
5)기존 데이터의 값을 갱신한다.
첫 학습이라 흐름만 최대한 알아보려고 하고있는데도 마냥 쉽지는 않다. 그래도 큰 뭉텅이로는 이해가 가니
추후 좀더 자세히 작은 코드단위로 살펴 봐야겠다.
- 참고
https://m.blog.naver.com/adamdoha/221754911797
스프링부트, 입문!
finished with non-zero exit value 1 오류
반응형