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.RequestMapping;
import javax.annotation.PostConstruct;
import java.util.List;
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor //...1
public class BasicItemController {
private final ItemRepository itemRepository;
//...2
@GetMapping
public String items(Model model) {
List<Item> items = itemRepository.findAll();
model.addAttribute("items", items);
return "basic/item";
}
/**
* 테스트용 데이터 추가
*/
//...3
@PostConstruct
public void init() {
itemRepository.save(new Item("itemA", 10000, 10));
itemRepository.save(new Item("itemB", 20000, 20));
}
}
롬복을 활용한 코드 최적화
→ 참고
BasicItemController가 스프링 빈에 등록되면서 생성자 주입으로 ItemRepository itemRepository에 들어갑니다.
@Controller
@RequestMapping("/basic/items")
public class BasicItemController {
private final ItemRepository itemRepository;
@Autowired
public BasicItemController(ItemRepository itemRepository) {
this.itemRepository = itemRepository;
}
}
@Autowired를 생략할 수 있습니다.
@Controller
@RequestMapping("/basic/items")
public class BasicItemController {
private final ItemRepository itemRepository;
public BasicItemController(ItemRepository itemRepository) {
this.itemRepository = itemRepository;
}
}
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
private final ItemRepository itemRepository;
}
items
테스트용 데이터 추가
@PostConstruct : 해당 빈의 의존관계가 모두 주입되고 나면 초기화 용도로 호출됩니다.
테스트용 데이터가 없으면 회원 목록 기능이 정상 동작하는지 확인하기 어렵습니다.
상품 목록을 보고 싶은데 데이터가 하나도 없으면 된건지 안된건지 모르니 테스트용으로 itemRepository에다가 데이터를 넣어둡니다.
여기서는 간단히 테스트용 테이터를 넣기 위해서 사용했습니다.
/resources/static/items.html → 복사 → /resources/templates/basic/items.html
<!DOCTYPE HTML>
<html xmlns:th="<http://www.thymeleaf.org>"> <!--...1-->
<head>
<meta charset="utf-8">
<!--...2,3-->
<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">
<!--...2,3-->
<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>
<!--...4-->
<tr th:each="item : ${items}">
<!--...5-->
<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/${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 xmlns:th="http://www.thymeleaf.org">
<aside> ❗ 타임리프 자주 사용 문법 설명
속성 변경 - th:href
th:href="@{/css/bootstrap.min.css}"
절대 경로로 프로젝트에 있는 css를 가지고 옵니다. (다음에 폴더가 바뀌면 안열릴 수도 있으니 절대 경로로 넣어줬습니다.)
→ 절대 경로 참고
<link> 태그의 href 속성은 링크된 외부 리소스(external resource)의 URL를 명시합니다.
href="value1" 을 th:href="value2" 의 값으로 변경합니다.
타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경합니다. 만약 값이 없다면 새로 생성합니다.
예를 들어,
<a href="/index1" th:href="/index2">index</a>가 작성된 html파일이 있습니다.
해당 파일이 타임리프 엔진을 거쳐 화면으로 출력될 때
<a href="/index2">index</a>가 됩니다.
즉, 타임리프 엔진을 거칠 때 th:href 속성의 값인 /index2(th:xxx의 값)가 href 속성의 값인 /index1(원래 값)을 덮어써서 최종적으로 href 속성의 값이 /index2가 되게 합니다.
만약 href 속성이 존재하지 않고 th:href만 있다면 href 속성 생성하여 값을 넣습니다. → “만약 값이 없다면 새로 생성합니다.”의 의미입니다.
HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있습니다.
대부분의 HTML 속성을 th:xxx 로 변경할 수 있습니다.
<aside> ❗ 타임리프 핵심
핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체합니다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용됩니다.
위의 예시에서 기본은
../css/bootstrap.min.css경로로 열립니다.하지만 서버를 실행하고 뷰 템플릿을 거치면
/css/bootstrap.min.css경로로 열립니다.
HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시합니다.
따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있습니다.
URL 링크 표현식 - @{...}
th:href="@{/css/bootstrap.min.css}"
@{...} : 타임리프는 URL 링크를 사용하는 경우 @{...} 를 사용합니다. 이것을 URL 링크 표현식이라 합니다.
URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함합니다.
지금은 할 필요가 없으니 몰라도 됩니다. → 궁금하다면 참고
속성 변경 - th:onclick
onclick="location.href='addForm.html'"th:onclick="|location.href='@{/basic/items/add}'|"
<aside> ❗ location.href 란?
href 는 location 객체에 속해있는 프로퍼티로 현재 접속중인 페이지 정보를 갖고 있습니다.
또한 값을 변경할 수 있는 프로퍼티이기 때문에 다른 페이지로 이동하는데도 사용되고 있습니다.
자바스크립트로 다른 URL 호출하는 방법은 여러가지가 있습니다.
자바스크립트에서는 window.location 또는 간단하게 location 오브젝트를 이용하여 현재 웹페이지의 정보를 가져오거나 수정하는데 사용합니다. 수정한다는 이야기는 현재 페이지에 보여지는 URL 을 변경 하는 것도 포함됩니다.
그래서 우리는 다른 페이지로 이동 시킬때 window.location 또는 location object 를 이용합니다.
</aside>
리터럴 대체 - |...|
|...| :이렇게 사용합니다.
타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 합니다.
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있습니다.
<span th:text="|Welcome to our application, ${user.name}!|">결과를 다음과 같이 만들어야 하는데
location.href='/basic/items/add'그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해집니다.
리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있습니다.