컨트롤러 - 상품 상세 [BasicItemController] 에 추가
//상품 상세
@GepMapping(/{itemId})
public String item(@PathVariable Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "basic/item";
}@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
private final ItemRepository itemRepository;
//상품 목록
@GetMapping
public String items(Model model){
List<Item> itmes = itemRepository.findAll(); //아이템 전체목록
model.addAttribute("items", itmes);
return "basic/items";
}
//상품 상세
@GepMapping(/{itemId})
public String item(@PathVariable Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "basic/item";
}
}
뷰 템플릿 [ item.html ]
/resources/templates/basic/item.html
- 타임리프 설정
<html xmlns:th="http://www.thymeleaf.org">
<link th:href="@{/css/bootstrap.min.css}"
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
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>
- 렌더링 하기 - 상품ID
<div>
<label for="itemId">상품 ID</label>
<input type="text" id="itemId" name="itemId" class="form-control"
value="1" th:value="${item.id}" readonly>
</div>
- 상품명
- th:value="${item.itemName}"
- 가격
- th:value="${item.price}"
- 수량
- th:value="${item.quantity}"
[뷰화면]
버튼 링크 수정하기
- 상품수정 버튼
- th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
- basic/items/1/edit 같은 URL
<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>
- 목록으로 버튼
- th:onclick="|location.href='@{/basic/items}'|"
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
th:onclick="|location.href='@{/basic/items}'|"
type="button">목록으로
</button>반응형
LIST
'Spring MVC 웹페이지 만들기' 카테고리의 다른 글
| Spring MVC | (4) 상품 수정, 리다이렉트 (0) | 2024.04.02 |
|---|---|
| Spring MVC | (3) 상품 등록, @ModelAttribute 와 @RequestParam 차이점 (0) | 2024.04.01 |
| Spring MVC | (1) 상품 목록, 뷰 템플릿 , 타임리프 (0) | 2024.03.27 |
| Spring MVC | 상품 도메인 개발 (Item, ItemRepository 클래스 및 테스트 코드 작성) (0) | 2024.03.27 |
| Spring MVC | 프로젝트 생성 및 설정 , 웰컴 페이지 생성 (0) | 2024.03.27 |