상품 상세

타임리프 문법이 제대로 숙지되지 않아서 typo 때문에 몇번이고 오류가 났다. 다음 3가지 컨트롤러(메서드)와 뷰를 구현해보자.

• 상품 상세페이지

• 상품 수정 페이지 렌더링

• 상품 목록으로

상품 상세페이지로 이동하는 메서드와 템플릿 구현

1. 메서드 구현 단순 조회이기 때문에 GET 메서드로 매핑한다! 틀린 부분 @GetMapping 값으로 넣어준 경로 변수 ("/{varName}")의 varName이랑 메서드의 파라미터로 받을 것이기 때문에 동일해가 해줘야한다! 전자는 i를 소문자로 하고, 후자는 대문자로 해서 오류가 났었다! 치환할 속성 이름은 복붙해서 쓰도록 하자!!!

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

정답 소스

@GetMapping("/{itemId}")//경로 변수 설정
    public String item(@PathVariable long itemId, Model model){
        Item item = itemRepository.findById(itemId);
        model.addAttribute("item",item);
        return "basic/item_practice";
//        return "basic/item";
    }

2. 템플릿 뷰 구현

1. 템플릿 등록 선언⭐️ 타임 문법 사용을 위해 필수!!!!⭐️

2. 부트스트랩 css 경로 설정

3. model에서 받은 데이터로 동적 페이지 구현

model로 받은 item 객체의 데이터들을 렌더링한다! 기존의 value들을 타임리프 문법으로 동적으로 수정한다! 기존 html 문법을 따라가되, 값을 넣어줄 때 타임리프 문법이 사용된다!!! 기존 => value="..." 타임리프=> th:value="${item.id}"

틀린 이유 : value 철자가 틀려서 치환할 데이터 값이 치환되지 않았다!!

타임리프 경로 설정(@{...} Tip 기존의 HTML 속성 설정 포맷을 들고오되, 동적으로 변경하고 싶은 데이터 자리에 타임리프 문법으로 작성해준다!

상품 수정 링크 설정 - 기존 코드

onclick="location.href='editForm.html'"

수정 후 : 타임리프의 리터럴을 사용해서 경로 설정해줄 것이기 때문에 HTML 속성값을 셋팅하는 큰 따옴표 바로 다음에 |로 시작하고 큰 따옴표 닫히기 바로 전에 |로 닫아준다!

href='...' 이 부분에 경로가 들어갈 것이기 때문에 @{..}문법 사용해서 경로 설정해준다!

th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"

상품 목록으로 링크 설정 - 기존 코드

onclick="location.href='items.html'"

수정 후 :

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