[Spring Boot] 수정/삭제 처리

리버 River 2024. 5. 25. 19:29

2024. 5. 25. 19:29

1. 게시물의 수정/삭제 처리

게시물 수정/삭제에 대한 처리는 GET 방식으로 게시물을 수정이나 삭제할 수 있는 화면을 보는 것으로 시작

BoardController의 read()를 수정해서 /board/modify에도 적용되도록 수정

@GetMapping({"/read", "/modify"})
public void read(Long bno, PageRequestDTO pageRequestDTO, Model model) {
    BoardDTO boardDTO = boardService.readOne(bno);
    log.info(boardDTO);
    model.addAttribute("dto", boardDTO);
}

templates의 board 폴더에는 modify.html을 추가

<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{layout/basic.html}">
<head>
    <meta charset="UTF-8">
    <title>Board Modify</title>
</head>

<div layout:fragment="content">
    <div class="row mt-3">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Board Modify
                </div>
                <div class="card-body">
                
                </div> <!-- end card-body -->
            </div> <!-- end card -->
        </div> <!-- end col -->
    </div> <!-- end row -->
</div>

<form> 태그를 추가하고 'dto'라는 이름으로 전달된 BoardDTO 객체를 출력

📍 <form> 태그에 제목 title, 내용 contents 을 수정할 수 있도록 작성하고 전송할 때 필요한 name 속성을 확인

<div class="card-body">
    <form th:action="@{/board/modify}" method="post" id="f1">
        <div class="input-group mb-3">
            <span class="input-group-text">Bno</span>
            <input type="text" class="form-control" name="bno" th:value="${dto.bno}" readonly>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">Title</span>
            <input type="text" class="form-control" name="title" th:value="${dto.title}" >
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">Content</span>
            <textarea class="form-control col-sm-5" name="content" rows="5" >[[${dto.content}]]</textarea>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">Writer</span>
            <input type="text" class="form-control" name="writer" th:value="${dto.writer}" readonly>
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text">RegDate</span>
            <input type="text" class="form-control" th:value="${#temporals.format(dto.regDate, 'yyyy-MM-dd HH:mm:ss')}" readonly>
        </div>
        
        <div class="input-group mb-3">
            <span class="input-group-text">ModDate</span>
            <input type="text" class="form-control" th:value="${#temporals.format(dto.modDate, 'yyyy-MM-dd HH:mm:ss')}" readonly>
        </div>

        <div class="my-4">
            <div class="float-end">
                <button type="button" class="btn btn-primary listBtn">List</button>
                <button type="button" class="btn btn-secondary modBtn">Modify</button>
                <button type="button" class="btn btn-danger removeBtn">Remove</button>
            </div>
        </div>
    </form>
</div> <!-- end card-body -->

/board/modify?bno=310 형태로 수정화면 접근

1) 수정 처리

🚀 실제 수정 작업은 POST 방식으로 처리. 수정 후에는 다시 조회 화면으로 이동해서 수정된 내용을 확인할 수 있도록 구현
🚀 수정 후 조회 화면으로 이동시에 검색했던 조건들이 해당하지 않을 수 있어서, 수정 후에는 검색 조건 없이 단순 조회 화면으로 이동하도록 구현

BoardController에는 POST 방식의 modify()를 구현

@PostMapping("/modify")
public String modify(PageRequestDTO pageRequestDTO,
                     @Valid BoardDTO boardDTO,
                     BindingResult bindingResult,
                     RedirectAttributes redirectAttributes) {

    log.info("board POST modify..." + boardDTO);

    if (bindingResult.hasErrors()) {
        log.info("has errors......");

        String link = pageRequestDTO.getLink();
        redirectAttributes.addFlashAttribute("errors", bindingResult.getAllErrors());
        redirectAttributes.addAttribute("bno", boardDTO.getBno());
        return "redirect:/board/modify?" + link;
    }

    boardService.modify(boardDTO);
    redirectAttributes.addFlashAttribute("result", "modified");
    redirectAttributes.addAttribute("bno", boardDTO.getBno());
    return "redirect:/board/read";
}

✓ modify()에는 문제가 발생할 때 'errors'라는 이름으로 다시 수정 페이지로 이동 할 수 있도록 PageRequestDTO의 getLink()를 통해서 기존의 모든 조건을 붙여서 /board/modify'로 이동하게 구성.
✓ 수정 작업에 이상이 없을 때는 아무런 검색이나 페이징 조건없이 /board/read로 이동

modify.html에 문제가 있을 때는 자바스크립트를 이용해서 처리하도록 구성

<script layout:fragment="script" th:inline="javascript">
    const errors = [[${errors}]]
    console.log(errors)

    let errorMsg = ''

    if(errors) {
        for (let i = 0; i < errors.length; i++) {
            errorMsg += `${errors[i].field}은(는) ${errors[i].code} \n`;
        }
        history.replaceState({}, null, null)
        alert(errorMsg);
    }
</script>

자바스크립트로 이벤트 처리하는 부분을 작성

    const link = [[${pageRequestDTO.getLink()}]];
    const formObj = document.querySelector("#f1");

    document.querySelector(".modBtn").addEventListener("click", function(e){

        e.preventDefault();
        e.stopPropagation();

        formObj.action = `/board/modify?${link}`;
        formObj.method = 'post';
        formObj.submit();

    }, false);

✓ 수정 처리를 할 때는 나중에 잘못되는 상황을 대비해서 페이지 / 검색 정보도 같이 쿼리 스트링으로 전달

2) 삭제 처리

🚀 BoardController에서 remove()라는 메서드 구성, 삭제 후에는 목록으로 이동하도록 구성

@PostMapping("/remove")
public String remove(Long bno, RedirectAttributes redirectAttributes) {
    log.info("remove()...");

    boardService.remove(bno);
    redirectAttributes.addFlashAttribute("result", "removed");
    return "redirect:/board/list";
}

modify.html에는 자바스크립트를 이용해서 /board/remove를 호출하도록 작성

document.querySelector(".removeBtn").addEventListener("click", function(e){

    e.preventDefault();
    e.stopPropagation();

    formObj.action = `/board/remove`;
    formObj.method = 'post';
    formObj.submit();

}, false);

✓ 정상적으로 삭제가 이루어질 경우 RedirectAttributes를 통해서 'result' 값이 전달되므로 list.html에서는 모달창으로 삭제 처리된 것을 알 수 있음

목록으로 이동하는 버튼의 이벤트 처리는 페이지/검색 조건을 유지하도록 구성

document.querySelector(".listBtn").addEventListener("click", function(e){
    e.preventDefault();
    e.stopPropagation();

    formObj.reset();
    self.location = `board/list?${link}`;
}, false);

[ 내용참고 : IT 학원 강의 ]

저작자표시 비영리 변경금지

'Spring & Spring Boot' 카테고리의 다른 글

[Spring Boot] REST 방식의 댓글 처리 준비 (0)	2024.05.30
[Spring Boot] AJax와 JASON · 댓글 기능 구현 준비 (0)	2024.05.30
[Spring Boot] 조회 처리 (0)	2024.05.25
[Spring Boot] 등록 처리 (0)	2024.05.25
[Spring Boot] 컨트롤러와 화면 처리 · 목록 화면 출력 (0)	2024.05.25

ID_ allriver