BasicItemController에 추가

package hello.itemservice.web.basic;

import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.PostConstruct;
import java.util.List;

@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {

    private final ItemRepository itemRepository;

    @GetMapping
    public String items(Model model) {
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items", items);
        return "basic/items";
    }

    **@GetMapping("/{itemId}")
    public String item(@PathVariable long itemId, Model model) {
        Item item = itemRepository.findById(itemId);
        model.addAttribute("item", item);
        return "basic/item";
    }**

    /**
     * 테스트용 데이터 추가
     */
    @PostConstruct
    public void init() {
        itemRepository.save(new Item("itemA", 10000, 10));
        itemRepository.save(new Item("itemB", 20000, 20));
    }

}
  1. @PathVariable

상품 상세 뷰

정적 HTML을 뷰 템플릿(templates) 영역으로 복사하고 다음과 같이 수정하자.

<!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>

		<!--...1-->
    <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">
						<!--...2-->
            <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">
						<!--...3-->
            <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>

→ 타임리프 코드에 대한 자세한 내용 참고

  1. 속성 변경 - th:value
  2. 상품수정 링크
  3. 목록으로 링크

<aside> ❗ 경로를 적을 때 주의해야합니다.

맨 앞에 /를 빼고 적으면 상대 경로이기 때문에 현재 경로에서 시작해서 뒤에 쭉 경로가 붙습니다.

<aside> ❗ |...| 안에 @{...}를 굳이 적어주는 이유?

th:onclick="|location.href='@{/basic/items}'|"

경로에 @{..} 쓰지 않고,

th:onclick="|location.href='/basic/items'|"

로 써도 나중에 소스 보기하면 둘 다 똑 같이 보입니다. 이렇게요,

onclick="location.href=&#39;/basic/items&#39;"

그렇다면, 굳이 @{..} 를 쓰지 않아도 되는 것 아닐까요?

과거에 자원이 소중했던 시절에는 하나의 WAS(예를 들어 톰캣 서버)에 여러 웹 애플리케이션을 함께 배포했습니다.

그래서 서로 경로를 나누어야 하는 문제가 있었지요.

예를 들어서 a,b,c 다른 웹 애플리케이션이라면 기본 경로가 다음과 같이 각각 앞에 /a, /b, /c가 붙었습니다.

localhost:8080/a/index.html -> a.war 실행

localhost:8080/b/index.html -> b.war 실행

localhost:8080/c/index.html -> c.war 실행

이렇게 각각의 웹 애플리케이션을 구분하기 위한 경로를 context path라고 합니다.

여기서 문제는 a 애플리케이션은 항상 /a가 붙어야 한다는 것입니다.

예를 들어서 /index.html이라고 하면 안되는 것이지요. /a/index.html이라고 해주어야 합니다.

진짜 문제는 애플리케이션 배포를 z.war로 이름을 변경한다면? 모든 소스코드를 /z/index.html로 변경해야 하지요.

그래서 이런 문제를 해결하기 위해 여러가지 방법을 과거에는 사용했는데, @{/...} 이것을 사용하면 @{/index.html}이라고만 적으면 자동으로 context path를 추가해서 /a/index.html로 렌더링 해줍니다.

추가로 다음 경로를 ROOT라고 하는데요. 여기는 context path가 / 입니다.

localhost:8080/index.html -> /ROOT.war 실행

최근에는 스프링 부트가 톰캣을 내장하는 구조를 가지면서 대부분 ROOT를 사용합니다.

그래서 @{/...}을 사용하든 하지 않든 크게 구분이 없는 것이지요.

결론은 URL은 안전하게 @{/...} 이것을 사용해주세요. 그리고 타임리프 메뉴얼에 보면 추가 기능들도 좀 있습니다.

</aside>