스프링부트 공부기록(22) - 방명록 작성:: 게시물 조회, 수정, 삭제 구현

🤍1. 방명록 조회 구현

 

1. 서비스단 코드 작성

• findById를 통해 만일 엔티티 객체를 가져왔다면 entityToDto를 이용해 엔티티 객체를 DTO로 변환해서 반환함.

 

2. 컨트롤러 코드 작성

 

• Model에 GuestDTO 객체를 담아서 전달하도록 코드를 작성한다.

 

3. 조회 화면 read.html 작성

• 읽기만 할 수 있도록 readonly 속성 적용

4. 게시글 목록 클릭 시 조회 페이지로 이동하도록 list.html 수정

<a th:href="@{/guestbook/read(gno=${dto.gno},page=${result.page})}">
    [[${dto.gno}]]
</a>

 

5. 조회 구현 완료

---

🤍2. 방명록 수정, 삭제 구현

• 수정은 POST 방식으로 처리하고 다시 수정된 결과를 확인할 수 있는 조회(read.html) 화면으로 리다이렉트시킴.
• 삭제는 POST 방식으로 처리하고 목록 화면으로 리다이렉트시킴.
• 목록 이동 작업은 GET 방식으로 처리하고 기존에 사용하던 페이지 번호 등을 유지하도록 구현함.

1. 수정 화면은 read.html을 복사해와서 제목, 내용을 수정할 수 있도록 readonly를 지워주기만 하면 된다.

 

2. 그리고 수정화면 하단에 버튼 3개를 추가해준다.

 <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>

 

3. 수정, 삭제 서비스 코드 작성

 

4. 수정, 삭제 컨트롤러 코드 작성

 

5. 수정, 삭제, 목록 버튼을 눌렀을 때 작동하도록 버튼에 스크립트 코드 작성

<script th:inline="javascript">
        var actionForm = $("form"); //form 태그 객체

        //삭제 이벤트 처리
        $(".removeBtn").click(function (){
            actionForm
                .attr("action","/guestbook/remove")
                .attr("method","post");
            actionForm.submit();
        });
        //수정 이벤트 처리
        $(".modifyBtn").click(function (){
            if(!confirm("수정하시겠습니까?")){
                return;
            }
            actionForm
            .attr("action","/guestbook/modify").attr("method","post").submit();
        });
        //목록으로 이동 이벤트 처리
        $(".listBtn").click(function (){
            //var pageInfo = $("input[name='page']");
            var page = $("input[name='page']");
            var type = $("input[name='type']");
            var keyword = $("input[name='keyword']");

            actionForm.empty(); //form 태그의 모든 내용을 지우고
            //actionForm.append(pageInfo);    //목록 페이지 이동에 필요한 내용을 다시 추가
            actionForm.append(page);
            actionForm.append(type);
            actionForm.append(keyword);
            actionForm.attr("action","/guestbook/list").attr("method","get");
            console.log(actionForm.html()); //먼저 확인 후 주석 처리
            actionForm.submit();    //확인 후 주석 해제
        });
    </script>

 

6. 삭제 후 목록 화면으로 리다이렉트

 

7. 수정 완료

버튼이 왜 저렇게 나오는지는....모르겠다...