JAVAIARY

Spring Boot) 게시글 수정/ 삭제 처리 본문

Project/2023.02~ ) Study toy 프로젝트

Spring Boot) 게시글 수정/ 삭제 처리

shiherlis 2023. 2. 21. 22:20
  • 수정/삭제 모두 GET방식으로 진입하는 '수정' 화면에서 작업을 선택해서 처리
  • Guestbook의 수정(1)은 POST 방식으로 처리하고 다시 수정된 결과를 확인할 수 있는 조회화면으로 이동
  • 삭제(2)는 POST 방식으로 처리하고 목록 화면으로 이동
  • 목록을 이동하는 작업은 GET방식으로 처리. 이 때 기존에 사용하던 페이지 번호들을 유지하여 이동

1. 게시글 수정

1-1. GuestbookController

    @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);
    }
  • 원래 있던 read 메서드를 삭제하고 새로 작성

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로 접속시 textbox 수정 가능

1-3. service 계층 구현

    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. modify.html

  • 수정이 완료된 후에도 다시 도일한 정보를 유지할 수 있도록 page값 저장
<!-- 페이지 번호 -->
            <input type="hidden" name="page" th:value="${requestDTO.page}">

1-5. PostMapping ("modify") 작성

    @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. 수정화면 modify버튼 이벤트 처리 (JS)

$(".modifyBtn").click(function(){
              if(!confirm("수정하시겠습니까?")){
               return ;
              }
              
              actionForm
                .attr("action", "/guestbook/modify")
                .attr("method", "post")
                .submit();
            });
  • POST방식으로 서버에 요청
  • 처리 이후 조회페이지로 이동

2. 게시물 삭제

2-1. GuestbookController

    @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();
            });
  • remove 버튼 삭제처리 스크립트 추가

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(); //확인 후 주석 해제
            });

 

read(조회)페이지의 리스트버튼 클릭시 목록페이지로 이동

저작자표시 변경금지 (새창열림)

'Project > 2023.02~ ) Study toy 프로젝트' 카테고리의 다른 글

N:1(다대일) 연관관계 1  (0) 2023.03.01
검색 처리  (0) 2023.02.27
Spring Boot) 게시글 등록 페이지 / 등록 처리  (0) 2023.02.20
Spring Boot) 목록처리  (0) 2023.02.20
Spring Boot) 서비스 계층과 DTO  (0) 2023.02.20
'Project/2023.02~ ) Study toy 프로젝트' Related Articles more