컨트롤러 - 상품 등록 [BasicItemController] 에 추가
- 상품 등록 페이지를 열때는 GET (실제 등록 X)
//상품 등록
@GetMapping("/add")
public String addForm(){
return "basic/addForm";
}
- 상품을 실제로 등록할 때는 POST
@PostMapping("/add")
public String save(){
return "basic/addForm";
}
같은 URL인데 HTTP 메서드로 기능을 구별해준다.
뷰 템플릿 [addForm.html]
/resources/templates/basic/addForm.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>
<h4 class="mb-3">상품 입력</h4>
<form action="item.html" th:action method="post">
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" name="itemName" class="form-control" placeholder="이름을 입력하세요">
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" name="price" class="form-control"
placeholder="가격을 입력하세요">
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" name="quantity" class="form-control" placeholder="수량을 입력하세요">
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg" type="submit">상품 등
록</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>
</form>
</div> <!-- /container -->
</body>
</html>
타임리프 속성
th:action
상품 등록 버튼을 눌렀을때 동적으로 URL이 변경되도록 하는 액션속성
- 사실상 GET, POST 같은 URL (basic/items/add) 이기 때문에 안 써도 된다.
- th:action="/basic/items/add" ▶ <form action="item.html" th:action method="post">
- 등록 페이지에 갔을때 '페이지 소스보기' 를 하면 action="" 비어있는 것을 확인할 수 있다.
취소 버튼 눌렀을때 url 수정하기
취소했을때는 목록으로 돌아가기
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>
이제 실제로 상품을 등록해보자
상품 등록 POST - @ModelAttribute
우선 @ModelAttribute 와 @RequestParam 차이점을 알아보자
@RequestParam
@RequestParam - 상품 등록 처리
클라이언트의 HTTP POST 요청파라미터를 처리하기 위해 @RequestParam 을 사용한다
[addItemV1 - BasicItemController에 추가]
@PostMapping("/add")
public String addItemV1(@RequestParam String itemName,
@RequestParam int price,
@RequestParam Integer quantity,
Model model) {
Item item = new Item();
item.setItemName(itemName);
item.setPrice(price);
item.setQuantity(quantity);
itemRepository.save(item);
model.addAttribute("item", item);
return "";
}
@RequestParam String itemName 은 addForm.html 의 name="" 값이다.
- <input type="text" id="itemName" name="itemName" ~ >
실제 상품을 등록한 뷰 화면
@ModelAttribute
@ModelAttribute - 상품 등록 처리
[addItemV2 - BasicItemController에 추가]
@PostMapping("/add")
public String addItemV2(@ModelAttribute("item") Item item ) {
itemRepository.save(item);
//model.addAttribute("item",item);
return "basic/item";
}- @ModelAttribute - 요청 파라미터 처리를 해준다.
- Item 객체를 생성하고 요청 파라미터 값을 setXxxx 으로 Item 객체의 필드에 값을 설정해준다.
- Spring이 자동으로 처리해줌 개발자가 직접 setXxxx 메서드를 호출할 필요가 없어진다.
-
Item item = new Item(); item.setItemName(itemName); item.setPrice(price); item.setQuantity(quantity);
- @ModelAttribute 은 자동으로 model에 뷰를 넣어준다.
- @ModelAttribute("item") 이름이 ▶ model.addAttribute("item", item) 이다.
- model.addAttribute("item", item) 가 주석처리를 해도 잘 동작한다.
ModelAttribute 이름 생략
[addItemV3 - BasicItemController에 추가]
@PostMapping("/add")
public String addItemV3(@ModelAttribute Item item) {
itemRepository.save(item);
//model.addAttribute("item",item);
return "basic/item";
}- @ModelAttribute("item") Item item 이름을 생략하면 클래스의 첫글자만 소문자로 변경해서 등록한다.
- 클래스명 Item ▶ item
ModelAttribute 전체 생략
[addItemV4 - BasicItemController에 추가]
@PostMapping("/add")
public String addItemV4(Item item) {
itemRepository.save(item);
return "basic/item";
}- addItemV1 처럼 단순타입인 String이라면 @RequestParam 이 자동적용되고
- 객체 타입인 경우 @ ModelAttribute가 자동적용이 된다.
- 이것 또한 클래스명 Item ▶ item 소문자로 변경해서 모델에 담긴다.
반응형
LIST
'Spring MVC 웹페이지 만들기' 카테고리의 다른 글
| Spring MVC | (5) PRG / Redirect / GET, RedirectAttributes - 저장완료 메세지 추가 (0) | 2024.04.02 |
|---|---|
| Spring MVC | (4) 상품 수정, 리다이렉트 (0) | 2024.04.02 |
| Spring MVC | (2) 상품 상세 , 타임리프 (0) | 2024.03.31 |
| Spring MVC | (1) 상품 목록, 뷰 템플릿 , 타임리프 (0) | 2024.03.27 |
| Spring MVC | 상품 도메인 개발 (Item, ItemRepository 클래스 및 테스트 코드 작성) (0) | 2024.03.27 |