- 편집과 삭제 모두 GET 방식으로 진입하는 편집 화면에서 작업을 선택하여 처리
- 방명록(1) 변경은 POST 방식으로 처리되며 변경된 결과를 다시 확인할 수 있는 조회 화면으로 이동한다.
- 삭제(2)는 POST 방식으로 처리되어 리스트 화면으로 이동됩니다.
- 목록 이동은 GET 메서드로 처리됩니다. 이 시점에서 이전에 사용된 페이지 번호는 유지되고 이동됩니다.
1. 게시물 수정
1-1 방명록 컨트롤러
@GetMapping({"/read", "/modify"})
public void read(long gno, @ModelAttribute("requestDTO") PageRequestDTO requestDTO, Model model){
log.info("gno: "+ gno);
GuestbookDTO dto = service.read(gno);
model.addAttribute("dto", dto);
}- 원래 읽기 방법을 삭제하고 새 읽기 방법을 만듭니다.
1-2 modify.html 만들기
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">
<th:block th:fragment="content">
<h1 class="mt-4">GuestBook Read Page</h1>
<form action="/guestbook/modify" method="post">
<div class="form-group">
<label>Gno</label>
<input type="text" class="form-control" name="gno" th:value="${dto.gno}" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" th:value="${dto.title}">
</div>
<div class="form-group">
<label>Content</label>
<textarea class="form-control" rows="5" name="content">((${dto.content}))</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input type="text" class="form-control" name="writer" th:value="${dto.writer}" readonly>
</div>
<div class="form-group">
<label>RegDate</label>
<input type="text" class="form-control"
th:value="${#temporals.format(dto.regDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
</div>
<div class="form-group">
<label>ModDate</label>
<input type="text" class="form-control"
th:value="${#temporals.format(dto.modDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
</div>
</form>
<button type="button" class="btn btn-primary modifyBtn">Modify</button>
<button type="button" class="btn btn-info listBtn">List</button>
<button type="button" class="btn btn-danger removeBtn">Remove</button>
</th:block>
</th:block>
</html>
- 텍스트 필드는 /modify로 연결 시 변경할 수 있습니다.
1-3 서비스 레이어 구현
void remove(Long gno);
void modify(GuestbookDTO dto);@Override
public void remove(Long gno) {
repository.deleteById(gno);
}
@Override
public void modify(GuestbookDTO dto) {
Optional<Guestbook> result = repository.findById(dto.getGno());
if(result.isPresent()){
Guestbook entity = result.get();
entity.changeTitle(dto.getTitle());
entity.changeContent(dto.getContent());
repository.save(entity);
}
}1-4 change.html
- 변경 완료 후 재방문한 정보가 유지될 수 있도록 페이지 값을 저장합니다.
<!-- 페이지 번호 -->
<input type="hidden" name="page" th:value="${requestDTO.page}">1-5 PostMapping 작성(“변경”)
@PostMapping("/modify")
public String modify(GuestbookDTO dto, @ModelAttribute("requestDTO") PageRequestDTO requestDTO,
RedirectAttributes redirectAttributes){
log.info("post modify..........");
log.info("dto: " + dto);
service.modify(dto);
redirectAttributes.addAttribute("page", requestDTO.getPage());
redirectAttributes.addAttribute("gno", dto.getGno());
return "redirect:/guestbook/read";
}1-6 편집 화면 변경 버튼(JS) 이벤트 처리
$(".modifyBtn").click(function(){
if(!confirm("수정하시겠습니까?")){
return ;
}
actionForm
.attr("action", "/guestbook/modify")
.attr("method", "post")
.submit();
});- 서버에 대한 POST 메서드 요청
- 처리 후 요청 페이지로 이동
2. 게시물 삭제
2-1 방명록 컨트롤러
@PostMapping("/remove")
public String remove(long gno, RedirectAttributes redirectAttributes){
log.info("gno: "+ gno);
service.remove(gno);
redirectAttributes.addFlashAttribute("msg", gno);
return "redirect:/guestbook/list";
}2-2 Modify.html 삭제
<button type="button" class="btn btn-primary modifyBtn">Modify</button>
<button type="button" class="btn btn-info listBtn">List</button>
<button type="button" class="btn btn-danger removeBtn">Remove</button>
<script th:inline="javascript">
var actionForm = $("form"); //form 태그 객체
$(".removeBtn").click(function(){
actionForm.attr("action", "/guestbook/remove").attr("method", "post");
actionForm.submit();
});- 제거 버튼을 삭제하는 스크립트 추가
3. 리스트 버튼
// 글 목록
$(".listBtn").click(function(){
var pageInfo = $("input(name="page")")
actionForm.empty(); // form 태그의 모든 내용을 지우고
actionForm.append(pageInfo); // 목록페이지 이동에 필요한 내용을 다시 추가
actionForm.attr("action", "/guestbook/list").attr("method", "get");
console.log(actionForm.html()); // 먼저 확인 후에 주석 처리
actionForm.submit(); //확인 후 주석 해제
});
