-
상품 웹 사이트 - 상품 상세 페이지스프링/스프링 MVC 패턴 2023. 2. 16. 15:07
상품 목록에서 상품을 누르면 상품 상세페이지가 열려서 수정을 원하면 수정을 할 수 있는 사이트를 만들 것이다.
@GetMapping("/{itemId}") public String item(@PathVariable long itemId, Model model) { Item item = itemRepository.findById(itemId); model.addAttribute("item", item); return "basic/item"; }이전 게시글에서 /basic/items/{itemId}로 연결하는 것을 만들었다.
@PathVariable을 통해 itemId를 받아오고, findById를 통해 item을 찾아 온 다음 그 item을 모델에 넘겨준다.
basic/item.html 파일은 아래와 같다.
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <link href="../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <style> .container { max-width: 560px; } </style> </head> <body> <div class="container"> <div class="py-5 text-center"> <h2>상품 상세</h2> </div> <div> <label for="itemId">상품 ID</label> <input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value="${item.id}" readonly> </div> <div> <label for="itemName">상품명</label> <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}" readonly> </div> <div> <label for="price">가격</label> <input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}" readonly> </div> <div> <label for="quantity">수량</label> <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}" readonly> </div> <hr class="my-4"> <div class="row"> <div class="col"> <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|" type="button">상품 수정</button> </div> <div class="col"> <button class="w-100 btn btn-secondary btn-lg" onclick="location.href='items.html'" th:onclick="|location.href='@{/basic/items}'|" type="button">목록으로</button> </div> </div> </div> <!-- /container --> </body> </html>코드별로 설명을 하자면
<label for="itemId">상품 ID</label> <input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value="${item.id}" readonly> </div> <div> <label for="itemName">상품명</label> <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}" readonly> </div> <div> <label for="price">가격</label> <input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}" readonly> </div> <div> <label for="quantity">수량</label> <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}" readonly> </div>위의 코드는 상품 ID, 상품명, 가격, 수량을 사용자에게 보여주는 코드이다.
여기에도 th:value로 item의 지정 항목이 출력되도록 했다.
<button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|" type="button">상품 수정</button> </div> <div class="col"> <button class="w-100 btn btn-secondary btn-lg" onclick="location.href='items.html'" th:onclick="|location.href='@{/basic/items}'|" type="button">목록으로</button>상품 수정과 목록으로 이동시켜주는 버튼이 있는 코드이다.
th:onclick을 통해 버튼을 클릭하면 해당 페이지로 연결해준다.
ID 1번인 itemA를 클릭했을 때 보이는 페이지이다.
우리가 의도한대로 잘 나온 것을 확인할 수 있었다.
'스프링 > 스프링 MVC 패턴' 카테고리의 다른 글
상품 웹 사이트 - 상품 수정 (0) 2023.02.16 상품 웹 사이트 - 상품 등록 (0) 2023.02.16 상품 웹 사이트 - 타임리프 (아이템 목록) (0) 2023.02.16 상품 웹 사이트 - 도메인 개발 (0) 2023.02.16 HTTP 요청 메서드 - JSON (0) 2023.02.14