-
상품 웹 사이트 - 타임리프 (아이템 목록)스프링/스프링 MVC 패턴 2023. 2. 16. 14:52
@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"; }items 메서드는 localhost:8080/basic/items에 매핑해줘서 아이템 목록을 확인할 수 있게 해주는 메서드이다.
itemRepository.findAll()메서드를 통해서 items를 만들고 items를 model.addAttribute를 통해 모델에 넘겨주는 것이다.
<!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"> </head> <body> <div class="container" style="max-width: 600px"> <div class="py-5 text-center"> <h2>상품 목록</h2> </div> <div class="row"> <div class="col"> <button class="btn btn-primary float-end" onclick="location.href='addForm.html'" th:onclick="|location.href='@{/basic/items/add}'|" type="button">상품 등록</button> </div> </div> <hr class="my-4"> <div> <table class="table"> <thead> <tr> <th>ID</th> <th>상품명</th> <th>가격</th> <th>수량</th> </tr> </thead> <tbody> <tr th:each="item : ${items}"> <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td> <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.itemName}">상품명</a></td> <td th:text="${item.price}">10000</td> <td th:text="${item.quantity}">10</td> </tr> </tbody> </table> </div> </div> <!-- /container --> </body> </html>위는 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">th는 타임리프이며 타임리프를 사용할때 ht:href=~~~를 입력하면 된다. th를 안 붙이면 절대경로로 열었을 때에 실행되는 코드이다.
<button class="btn btn-primary float-end" onclick="location.href='addForm.html'" th:onclick="|location.href='@{/basic/items/add}'|" type="button">상품 등록</button>th:onclik="|location.href='@{basic/items/add}'|"라는 줄이 있다.
상품 등록이라는 버튼을 누르면 /baisc/items/add라는 경로로 이동한다는 뜻이다.
<tr th:each="item : ${items}"> <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td> <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.itemName}">상품명</a></td> <td th:text="${item.price}">10000</td> <td th:text="${item.quantity}">10</td> </tr>URL링크 표현식
th:tref="@{/basic/items/{itemId}(itemId=${item.id})}"
상품을 클릭하면 상세 정보에 들어갈 수 있는 링크 표현식이다. () 괄호에 변수를 넣어주면 itemId 에 item.id 가 들어가서 경로가 자동으로 /basic/items/1 , /basic/item/2 처럼 될 수 있다.
<tr th:each="item : ${items}"> 문장은 반복 출력 문장이다.
포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고 반복문 안에서 item 변수를 사용할 수 있다.
속성 변경 - 리터럴 대체 문법 |...|
원래는 <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> 처럼 사용해야했는데 리터럴 대체 문법을 사용하면 <sapn th:text="|Welcome to our application, ${user.name}!|"> 끊지 않고 사용할 수 있다.
th:text
내용의 값을 변경해주는 문법이다. <td th:text="${item.price}">10000</td>를 보면 기본값은 10000원인데 th:text를 통해 ${item.price}로 값을 변경해준다.
아이템 상세 정보를 누를 수 있는 페이지이다.
/basic/items/{itemId}로 연결되며 만약 ID가 1인 itemA를 누르면 /basic/items/1로 연결되게 만들어 준다.
html파일은 외부에서 가져온거라 아직 익숙하지 않고, 타임리프는 앞으로 공부를 많이 해야겠다는 생각이 들었다.
'스프링 > 스프링 MVC 패턴' 카테고리의 다른 글
상품 웹 사이트 - 상품 등록 (0) 2023.02.16 상품 웹 사이트 - 상품 상세 페이지 (0) 2023.02.16 상품 웹 사이트 - 도메인 개발 (0) 2023.02.16 HTTP 요청 메서드 - JSON (0) 2023.02.14 HTTP 요청 메시지 - 텍스트 (0) 2023.02.14