[Spring Boot] 상품상세페이지2 타임리프로 링크만들기

유저가

/detail/1로 접속하면 1번 상품

/detail/2로 접속하면 2번 상품 보내주고싶을때 어떻게 보내주는지

 

@PathVariable 타입 URL파라미터명

이렇게하면 유저가 입력한 URL파라미터 자리의 값을 가져올수있음

그 값을 이용해서 findbyid로 맞는 데이터를 가져오게하고

model.addAttribute로 data라는 이름으로 html에 보내줌 

@GetMapping("/detail/{id}")
String detail(@PathVariable("id") Long id,
              Model model){
    Optional<Item>  reslut = itemRepository.findById(id);

    if (reslut.isPresent()) {
        System.out.println(reslut.get());

        model.addAttribute("data",reslut.get());
        return "detail.html";
    }else {
        return  "redirect:/list";
    }

 

detail.html 타임리프 문법으로 data를 이용해서 값을 넘겨받음 

<div th:replace="~{nav.html::navbar}"></div>
    <div class="detail" >
        <h4>상세페이지</h4>
        <img src="https://placehold.co/300">

        <h4 th:text="${data.title}">금도금 바지</h4>
        <p th:text="${data.price + '원'}">7억</p>
    </div>

 

 

그럼 이제 list페이지에서 제목 클릭하면 해당하는 상품의 detail페이지로 보내주기

a 태그로 사용하면 되는거 맞는데 타임리프 변수도 사용해야함 

 

<a th:href="@{'/detail/' + ${} }">

th:href라는 타임리프문법은 @{} 으로 시작해야함 

- 문자는 작은따옴표 안에 넣어도 됨

- 문자를 합치고 싶으면 + 기호 사용 

- 변수 넣으려면 ${}

<div><a th:href="@{'/detail/' + ${i.id} }">
    <!-- items.get(0)의 줄임 = items[0]-->
   <h4 th:text="${i.title}" >바지</h4></a>