-
코드로 배우는 스프링부트 웹 프로젝트 Day 8Spring/코드로 배우는 스프링부트 웹 프로젝트 2022. 8. 21. 17:53
/* Annotation들은 스프링부트 프로젝트의 Annotation 정리 페이지에 따로 정리해두었습니다. */
[페이지 번호 링크 처리]
앞서 작성한 코드에서는 페이지 번호의 링크를 href="#"로 처리해두었다.
이를 실제 링크로 수정해야 한다.
list.html 수정
<ul class="pagination h-100 justify-content-center align-items-center"> <li class="page-item" th:if="${result.prev}"> <a class="page-link" th:href="@{/guestbook/list(page= ${result.start -1})}" tabindex="-1">Previous</a> </li> <li th:class=" 'page-item ' + ${result.page == page?'active':''} "th:each="page: ${result.pageList}"> <a class="page-link" th:href="@{/guestbook/list(page = ${page})}"> [[${page}]] </a> </li> <li class="page-item" th:if="${result.next}"> <a class="page-link" th:href="@{/guestbook/list(page = ${result.end + 1})}">Next</a> </li> </ul>
[등록 페이지와 등록 처리]
GuestbookController 클래스에 추가
@GetMapping("/register") public void register() { log.info("register get..."); } @PostMapping("/register") public String registerPost(GuestbookDTO dto, RedirectAttributes redirectAttributes) { log.info("dto..." + dto); // 새로 추가된 엔티티의 번호 Long gno = service.register(dto); redirectAttributes.addFlashAttribute("msg", gno); return "redirect:/guestbook/list"; }등록처리는 GuestbookService까지 해놨기 때문에 GuestbookController에 @GetMapping과 @PostMapping을 이용해서 등록 작업을 처리하는 메소드를 작성
Get 에서는 등록 화면을 보여줌
Post 에서는 등록 처리 후, 목록 페이지로 redirect하도록 설계
redirectAttributes.addFlashAttribute("msg", gno); redirectAttributes: 한 번만 화면에서 "msg"라는 이름의 변수를 처리
addFlashAttribute: 한 번만 데이터 gno를 전달하는 용도
브라우저에 전달된 msg로 화면상에 모달창을 띄워주도록 할 것임
<!DOCTYPE html> <html lang="en" 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 Register Page></h1> <form th:action="@{/guestbook/register}" th:method="post"> <div class="form-group"> <label>Title</label> <input type="text" class="form-control" name="title" placeholder="Enter Title"> </div> <div class="form-group"> <label>Content</label> <textarea class="form-control" rows="5" name="content"></textarea> </div> <div class="form-group"> <label>Writer</label> <input type="text" class="form-control" name="writer" placeholder="Enter Writer"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </th:block> </th:block> </html>/layout/basic의 setContent fragment를 위 코드의 content fragment로 교체
form 태그의 action 속성에 guestbook/register url 을 주고, 데이터를 수집할 수 있도록 함
📎 <input> 태그에 지정한 name의 값을 GuestbookDTO로 수집될 데이터 이름과 동일하게 맞춰주면 자동으로 해당 데이터로 수집됨
/guestbook/register 
/guestbook/list [등록 처리와 목록 페이지의 모달창]
위에서 게시글을 등록하면 정상적으로 등록처리 되었다는 안내창으로 띄워줄 필요가 있음
=> 부트스트랩의 모달창 이용
list.html
</ul> <script th:inline="javascript"> var msg = [[${msg}]]; console.log(msg); </script>전달된 msg값 확인
Thymeleaf의 inline 속성을 이용해서 별도의 타입 처리가 필요하지 않기 떄문에 새로운 글을 등록한 경우, redirect된 화면의 소스코드↓
msg의 값이 글의 번호로 처리됨
단순한 링크 이동으로 본 list화면의 소스코드↓
msg값이 null로 처리됨
list.html
<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script th:inline="javascript"> var msg = [[${msg}]]; console.log(msg); if(msg){ $(".modal").modal(); } </script>수정 후에는 modal 창이 뜨도록 처리
'Spring > 코드로 배우는 스프링부트 웹 프로젝트' 카테고리의 다른 글
코드로 배우는 스프링부트 웹 프로젝트 Day 10 (0) 2022.08.25 코드로 배우는 스프링부트 웹 프로젝트 Day 9 (0) 2022.08.24 코드로 배우는 스프링부트 웹 프로젝트 Day 7 (0) 2022.08.20 코드로 배우는 스프링부트 웹 프로젝트 Day 6 (0) 2022.08.18 코드로 배우는 스프링부트 웹 프로젝트 Day 5 (0) 2022.08.17