๐ฅ #15 ๊ธ ์์ ๊ธฐ๋ฅ
๐ก board.js ์์ ์ฐจ์ด์
- delete ๊ธฐ๋ฅ :
let id = $("#id").text();
๊ธ ๋ฒํธ : <span id="id"><i>${board.id} </i></span>
์์${board.id}
๊ฐ ํ๊ทธ ์ฌ์ด์ ์์ผ๋ฏ๋ก html ํน์ text ํจ์๋ฅผ ์ด๋ค.
- update ๊ธฐ๋ฅ :
let id = $("#id").val();
<input type="hidden" id="id" value="${board.id}"/>
์์ input ํ๊ทธ ์์ value ๊ฐ์ ์์ผ๋ฏ๋ก val ํจ์๋ฅผ ์ด๋ค.
-
detail.jsp ์์ ์์ ๋ฒํผ ๋๋ฅด๊ธฐ
-
ํด๋น url ์ด ๋งคํ๋ BoardController ์ updateForm ๋ฉ์๋๋ก ๊ฐ์ updateForm.jsp ์ ๋ฆฌํดํจ
-
updateForm.jsp ์์ ์ฌ์ฉ์๊ฐ ์์ ํ ๋ด์ฉ์ ์ ๋ ฅํ๊ณ (title, content)
-
๊ธ ์์ ์๋ฃ ๋ฒํผ์ ๋๋ฅด๋ฉด board.js ๊ฐ ์๋ํจ
-
board.js ์์ update ํจ์๊ฐ ์คํ๋๊ณ ํด๋น url ๋ก ๋ฐ์ดํฐ๊ฐ ์ ์ก๋จ -> json ๋ฐ์ดํฐ ํํ๋ก..
-
BoardApiController ์ update ๋ฉ์๋๊ฐ ์คํ๋๊ณ boardService ๋ฅผ ํธ์ถํจ
โญ 7. BoardSerivce ์์ ๊ธ์์ ํ๊ธฐ ๋ฉ์๋๊ฐ ์คํ๋๋๋ฐ ์ด๋ ํธ๋์ญ์ ์ด๋ ธํ ์ด์ ์ ๋ถ์ฌ์ ๋ ํผ์งํ ๋ฆฌ์ save ํจ์ ์์ด select ๋ง์ผ๋ก ๊ธ์ ์์ ํ ์ ์์
< detail.jsp >
.
.
.
<c:if test="${board.user.id == principal.user.id}">
<a href="/board/${board.id}/updateForm" class="btn btn-warning">์์ </a>
<button id="btn-delete" class="btn btn-danger">์ญ์ </button>
</c:if>
.
.
.
์์ ๋ฒํผ์ a ํ๊ทธ๋ก url ์ ๊ฑธ์ด์ค๋ค!
< BoardController >
// ๊ธ ์์ ํ๊ธฐ
@GetMapping("/board/{id}/updateForm")
public String updateForm(@PathVariable int id, Model model) {
model.addAttribute("board", boardService.๊ธ์์ธ๋ณด๊ธฐ(id));
return "board/updateForm";
}
์ปจํธ๋กค๋ฌ์์ ํด๋น url์ ์ฐพ์ ์จ๋ค.
GetMapping ์ผ๋ก, ์์ ํ ํ์ด์ง๋ก ์ด๋์์ผ์ฃผ๋ ๊ณณ์ด๋ค.
๊ธฐ์กด์ ์์ฑํ๋ title๊ณผ content๋ model๋ก ๋๊ฒจ์ค๋ค.
< updateForm.jsp >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form>
<input type="hidden" id="id" value="${board.id}" />
<div class="form-group">
<input value="${board.title}" type="text" class="form-control" placeholder="Enter title" id="title">
</div>
<div class="form-group">
<textarea class="form-control summernote" rows="5" id="content">${board.content}</textarea>
</div>
</form>
<button id="btn-update" class="btn btn-primary">๊ธ์์ ์๋ฃ</button>
</div>
<script>
$('.summernote').summernote({
tabsize: 2,
height: 300
});
</script>
<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>
model๋ก ๋๊ฒจ๋ฐ์ title๊ณผ content๋ฅผ ์ถ๋ ฅํ๊ณ ,
์๋ก ์์ ํ title๊ณผ content๋ฅผ ๋๊ฒจ์ค์ผ ํ๋ค.
๊ธ์์ ์๋ฃ ๋ฒํผ์ id="btn-update" ๋ฅผ ๊ฐ๊ณ , board.js๋ฅผ ์๋์ํจ๋ค.
< board.js >
.
.
.
$("#btn-update").on("click", ()=>{
this.update();
});
.
.
.
update: function () {
let id = $("#id").val();
let data = {
title: $("#title").val(),
content: $("#content").val()
};
$.ajax({
type: "PUT",
url: "/api/board/"+id,
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function (resp) {
// ๊ฒฐ๊ณผ๊ฐ ์ ์์ด๋ฉด done ์คํ
alert("๊ธ์์ ์ด ์๋ฃ๋์์ต๋๋ค.");
location.href = "/";
}).fail(function (error) {
// ์คํจํ๋ฉด fail ์คํ
alert("๊ธ์์ ์ ์คํจํ์์ต๋๋ค.");
alert(JSON.stringify(error));
});
},
.
.
.
์์ ์ด๊ธฐ ๋๋ฌธ์ type="PUT" ์ด๊ณ , ๋ฐ์ดํฐ๋ฅผ json ํํ๋ก "/api/board/"+id
url์ ๋ณด๋ธ๋ค.
< BoardApiController >
@PutMapping("/api/board/{id}")
public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board) {
boardService.๊ธ์์ ํ๊ธฐ(id, board);
return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
}
json ํ์ ์ ๋ฐ์ดํฐ์ด๋ฏ๋ก ๋งค๊ฐ๋ณ์์์ @RequestBody๋ก ๋ฐ๋๋ค.
< BoardService >
@Transactional
public void ๊ธ์์ ํ๊ธฐ(int id, Board requestBoard) {
Board board = boardRepository.findById(id) // ์์ํ (์์์ฑ ์ปจํ
์คํธ์ ๋ฃ๋ ๊ฒ)
.orElseThrow(()->{
return new IllegalArgumentException("๊ธ ์ฐพ๊ธฐ ์คํจ : ์์ด๋๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค." + id);
});
board.setTitle(requestBoard.getTitle());
board.setContent(requestBoard.getContent());
// ํด๋น ํจ์ ์ข
๋ฃ์(Service๊ฐ ์ข
๋ฃ๋ ๋) ํธ๋์ญ์
์ข
๋ฃ -> ์์ํ ๋์ด์๋ board ๋ฐ์ดํฐ๊ฐ ๋ฌ๋ผ์ก๊ธฐ ๋๋ฌธ์ ๋ํฐ์ฒดํน ์ผ์ด๋จ -> ๋ณ๊ฒฝ ๊ฐ์ง -> DB์ ์๋ flush
}
์์ ์ CRUD ์ค์์ U์ด๋ค.
์ฆ, ํธ๋์ญ์
์ ๊ฑธ์ด์ค์ผ ํ๋ค.
update ์ด์ง๋ง ๋ ํผ์งํ ๋ฆฌ์ save ํจ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ,
DB์์ select ํ์ฌ ์์์ฑ ์ปจํ
์คํธ์ ๋ด๋๋ค.
๊ทธ๋ฆฌ๊ณ ์์ ํ ๋ฐ์ดํฐ๋ฅผ set ํ๋ฉด, ์์์ฑ ์ปจํ ์คํธ์ ์๋ Board๊ฐ ๋ณ๊ฒฝ๋๋ ๊ฒ์ด๋ค.
ํจ์๊ฐ ์ข ๋ฃ๋๋ฉด ํธ๋์ญ์ ๋ ์ข ๋ฃ๋๋ฉด์ ์์์ฑ ์ปจํ ์คํธ์ ์๋ Board๊ฐ ๋ณ๊ฒฝ์ด ๊ฐ์ง๋๊ณ , DB์ ์๋์ผ๋ก flush ๋๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฅ #15 ๊ธ ์์ ๊ธฐ๋ฅ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@rladuswl/15-๊ธ-์์ -๊ธฐ๋ฅ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค