[Thymeleaf+Spring] 입력 form 처리

1. 입력 form 처리

---

• th:object : 커맨드 객체를 지정한다.
  • Controller에서 넘어오는 Model에 담긴 객체를 지정.(빈 객체도 가능)

  •  <form action="item.html" th:action th:object="${item}" method="post">

  • th:object를 사용하면 좋은 점이 뭘까?
  • id와 name을 직접 입력해 주는데, 빈 객체를 model로 넘기고 th:object로 사용하면 객체의 필드명을 사용가능.
  • 오류 가능성을 줄일 수 있음.
  • form submit을 할 때, form의 데이터가 th:object에 설정해준 이름으로 객체가 넘어감.
    • ex) th:object="${item}" --> controller에서 @ModelAttribute("item")으로 객체를 받을 수 있음.
    • 이 때 필드명이  같으면 다른 객체에 매핑이 가능. -> @ModelAttribute("item") ItemSaveForm form
• *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다.
  • ${item.itemName}을 *{itemName}으로 줄일 수 있다.
• th:field
  
  • HTML 태그의 id , name , value 속성을 자동으로 처리해준다.
  • 즉 아래의 경우에서 id="itemName", name="itemName" 을 지워도 됨.
    
    • id : th:field 에서 지정한 변수 이름과 같다. id="itemName"
    • name : th:field 에서 지정한 변수 이름과 같다. name="itemName"
    • value : th:field 에서 지정한 변수의 값을 사용한다. value=""

  • <input type="text" id="itemName" name="itemName" th:field="*{itemName}"  class="form-control" placeholder="이름을 입력하세요">

  • <input type="text" id="itemName" th:field="*{itemName}"  class="form-control" placeholder="이름을 입력하세요">

 

2. 수정 form 처리

---

• 변경 전

    <form action="item.html" th:action method="post">
        <div>
            <label for="id">상품 ID</label>
            <input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}" readonly>
        </div>

• 변경 후

    <form action="item.html" th:action th:object="${item}" method="post">
        <div>
            <label for="id">상품 ID</label>
            <input type="text" id="id" class="form-control" th:field="*{id}" readonly>
        </div>

• 랜더링 후
  • name, value까지 해줌.
  • 많은 부분이 th:field로 해결됨.

        <div>
            <label for="id">상품 ID</label>
            <input type="text" id="id" class="form-control" readonly name="id" value="1">
        </div>
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" class="form-control" name="itemName" value="itemA">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" class="form-control" name="price" value="10000">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" class="form-control" name="quantity" value="10">
        </div>

 

3. GitHub : Thymeleaf_Spring

---

GitHub - bsh6463/Thymeleaf_Spring