게시글 수정
들어가기에 앞서서 이번 포스팅에서는 데이터를 수정할 때 이를 jpa의 변경 감지 기능을 사용해서 수정하는 방식이 아닌 무작정 덮어버리는 식의 진행을 합니다. 이는 옳지 못한 방식으로 JPA를 더 공부해서 진행해볼 예정입니다.
📌 출처: https://youtu.be/ODdGp13YatA?list=PLZzruF3-_clsWF2aULPsUPomgolJ-idGJ
뷰페이지 작성
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<style>
.layout {
width: 500px;
margin: 0 auto;
margin-top: 40px;
}
.layout input {
width: 100%;
box-sizing: border-box;
margin-top; 10dpx;
}
.layout textarea{
width: 100%;
margin-top: 10px;
min-height: 300px;
}
</style>
<body>
<div class="layout">
<form th:action="@{/board/update/{id}(id=${board.id})}" method="post">
<input name="title" type="text" th:value=${board.title}>
<textarea name="content" th:text=${board.content}></textarea>
<button type="submit">수정</button>
</form>
</div>
</body>
</html><input name="title" type="text" th:value=${board.title}>- th: value는 테그의 값을 넣을 때 사용한다. 이때, 수정창에 우리가 써놨던 타이틀을 가져와야 하기에 해당 id의 타이틀 값을 가져와 넣어준다.<textarea name="content" th:text=${board.content}></textarea>- textarea 테그의 경우 value를 사용하지 못하기 때문에 이 경우엔 text로 해당 id의 작성해놨던 글을 가져와준다.
[수정 페이지(뷰)]
컨트롤러 작성
[페이지 수정 폼 컨트롤러]
@GetMapping("/board/modify/{id}")
public String boardmodify(@PathVariable("id") Integer id,
Model model){
//상세 페이지 내용이랑 수정할 때 내용이 같이 때문
model.addAttribute("board", boardService.boardview(id));
return "boardmodify";
}- 해당 컨트롤러는 @PathVariable을 사용해 id라는 값을 매개변수로 넘겨 쿼리 스트링 형식이 아닌 특정 숫자 그자체로 조회가 가능하게 했다.
- 예를 들어
@PathVariable를 사용한 경우라면 localhost:8080/board/modify/1 이런식으로 uri가 나온다면쿼리 스트링의 경우엔 localhost:8080/board/modify?id=1의 형식으로 나오게 된다.
[수정 시 작동하는 컨트롤러]
@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id,
Board board){
Board boardTemp = boardService.boardview(id);
boardTemp.setTitle(board.getTitle());
boardTemp.setContent(board.getContent());
boardService.write(boardTemp);
return "redirect:/board/list";
}- 본래는 jpa의 변경 감지 기능을 사용하지만 이 경우엔 직접 setter를 사용해서 값을 변경한 다음 덮어쓰는 방식을 진행했습니다.
쿼리 스트링 vs @PathVariable - 파라미터를 넘기는 두가지 방법
쿼리 스트링 = 특정 값을 사용한 필터링
@PathVariable = 특정 인덱스를 조회
[정리] 수정을 누르면 데이터가 담겨올 수 있게 하는 방법
해당 파트는 정리 파트로 중요한 부분만 코드를 잘라서만 사용했습니다.
[타임리프를 사용한 수정을 위한 작성해놓은 데이터 담아오기]
<input name="title" type="text" th:value=${board.title}>
<textarea name="content" th:text=${board.content}></textarea>- 뷰 페이지에서는 해당 테그들에 해당 객체의 title과 content를 보여주는 작업만 진행하면 된다.
[컨트롤러가 뷰페이지에 데이터를 넘기는 방법]
public String boardmodify(@PathVariable("id") Integer id,
Model model){
model.addAttribute("board", boardService.boardview(id));Model을 사용해서 board라는 이름으로 id를 찾아 넘겨준다.- 이때 서비스에서 사용하고 있는
findById()(boardService.boardview 내에서 사용)는 실제 데이터베이스에 요청해서 엔티티를 가져옵니다. 그렇기에 가져온 엔티티를 넘겨주면 이 엔티티를 사용해서 title과 content 등을 저장해 놓은 상태로 수정창에 출력할 수 있는 것입니다.
즐겁고 괴로운 개발😎