스프링부트 기반 프로젝트(게시판API 만들기)
오늘 배운 부분
DB 데이터 수정 폼 만들기
DB 데이터 수정하기
DB 데이터 삭제하기
•
이전 실습 > 복습
데이터 수정 흐름
PATCH/PUT > 데이터의 수정을 요청 (Update) → 정상적으로 처리되지 않는다.
HTML 폼(form) 요청이 PATCH와 PUT, DELETE를 지원하지 않기 때문이다. 링크
→ Get/POST로 대체해서 메소드를 작성할 것!
1.데이터를 받는다 (edit페이지에서 클라이언트에게서 수정한 데이터를 받음)
2.받은 데이터를 가공한다 (dto
3.DB에 저장한다
4.View 페이지에 리다이렉트한다.
5.기존에 있는 데이터만 수정해야한다
서버로, 클라이언트로 데이터가 전송되는 방식은 Protocol(”데이터 규약”)으로 규정되어있다.
데이터 수정
View 페이지 생성
edit.mustache
{{>layouts/header}}
<form class="container" action="/articles/{{article.id}}/update" method="post">
<input type="hidden" name="id" value="{{article.id}}"/>
<input type="text" name="title" value="{{article.title}}" />
<textarea class="form-control" rows="3" name="content" >{{article.content}}</textarea>
<button type="submit" class="btn btn-primary mb-3">Edit</button>
</form>
<a href="/articles/list" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">List</a>
<a href="/articles/{{article.id}}" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">Confirm</a>
{{>layouts/footer}}
Java
복사
Mustache 문법을 사용하려면 {{article.id}}, {{articles.title} 이렇게 써줘야 한다.
하지만 반복되는 코드는 싫기 때문에 {{#article}}, {{/article}} 로 article이라는 데이터를 쓸 수 있는 범위를 지정하고. {{title}}, {{id}}로 데이터를 쓸 수가 있다.
<form> 태그 설명
1.
action : 어디로 보낼지.
2.
Method : 어떻게 보낼지.
3.
폼이라는 태그는 Get과 Post 방식만 쓸 수 있다. (Put, DELETE 못써요)
<input> 태그 설명
1.
몇 번의 id의 article을 변경할지 정해준다
2.
기존에는 title과 content 데이터만 던졌지만 Article의 id값을 숨겨서 던지도록 지정했다. (<name ="id" type ="hidden" value ="{{id}} " />)
3.
다음 슬라이드에 있는 데이터 받는 메소드를 작성합니다.
4.
Controller 생성
@GetMapping(value = "/{id}/edit")
public String edit(@PathVariable Long id, Model model){
log.info("id:{}",id);
Optional<Article> optArticle = articleReapository.findById(id);
if(!optArticle.isEmpty()){
model.addAttribute("article", optArticle.get());
return "edit";
}else {
return "error";
}
}
@PostMapping("/{id}/update") // put을 폼이 받지 못해서 POST로한다
public String update( Model model, ArticleDto articleDto){
// 1. dto를 entity로 변환한 후, 2.entity를 DB에 저장한다!
Article savedArticle = articleReapository.save(articleDto.toEntity());
model.addAttribute("article", savedArticle);
log.info("id:{} title:{} content:{}",articleDto.getId(), articleDto.getTitle(), articleDto.getContent());
return String.format("redirect:/articles/%d",savedArticle.getId());
}
Java
복사
Repository의 save메서드를 통해서 save해주는데 savedArticle 를 세이브 해준다. 이렇게 실행되면 DB에 갱신된다.
수정이 완료되면 전체 페이지로 리다이렉트해줘서 결과를 확인할 수 있게 한다
데이터 삭제하기
1.
삭제 요청이 전달한다.
2.
DB에서 찾고 삭제한다
3.
결과페이지로 리다이렉트 한다
