본문 바로가기
Spring Tutorial

[스프링MVC -상품 관리 웹 개발 3] 상품 상세

by 미소5 2023. 8. 30.
  • 컨트롤러 로직 추가
/** 상품 상세(조회) */
@GetMapping("/{itemId}")
public String item(@PathVariable Long itemId, Model model) {
    Item item = itemRepository.findById(itemId);    //PathVariable 로 넘어온 상품ID로 item 조회하고
    model.addAttribute("item", item);   //모델에 담아둔다
    return "basic/item";      //뷰 템플릿 호출
}

 


  • 뷰 템플릿(templates)
    • /resources/templates/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>

 

 


  • 속성 변경 - th:value
th:value="${item.id}"
  • 모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력 ( item.getId() )
  • value 속성을 th:value 속성으로 변경

 


  • 상품수정 링크
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"

 

  • 목록으로 링크
th:onclick="|location.href='@{/basic/items}'|"

 


[스프링MVC 상품 관리 웹 페이지 2] 상품 목록 - 타임리프 (tistory.com)

 

[스프링MVC 상품 관리 웹 페이지 2] 상품 목록 - 타임리프

컨트롤러 로직 @Controller @RequestMapping("/basic/items") @RequiredArgsConstructor//final이 붙은 멤버변수만 사용한 생성자 자동 생성 public class BasicItemController { private final ItemRepository itemRepository; /** 상품 목록 */

joly156.tistory.com

 

728x90
반응형