@GetMapping("/{itemId}")
public String item(@PathVariable Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "basic/item";
}
@pathVariable로 요청 값을 받아서 조회하고 model에 담아두고 뷰 템플릿을 호출해 준다.
<html xmlns:th="http://www.thymeleaf.org">타임 리프를 사용하기 위해 html 코드에 위 코드를 추가해 주고
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
동적 웹 페이지를 위해 th:href 를 사용해서 경로를 잡아준다.
<label for="itemId">상품 ID</label>
<input type="text" id="itemId" name="itemId" class="form-control"
value="1" th:value="${item.id}" readonly>
제품을 상세 조회 했을 때 등록한 정보에 맞게 나오게 하기 위해 각 표시 부분에 th:value를 추가해 주준다. 예를 들어 상품 ID를 확인해 보면 th:value를 통해 itemId를 받아온다. 이 itemId는 위에 model에 담은 값을 표현하게 된다.
th:value=”${...}”를 사용하게 되면 model에 있는 item 정보를 획득하게 되고 프로퍼티 접근 법으로출력하게 된다.
(item.getId()), 또한, 옆에 있는 value 속성을 th:value로 변경하게 된다.
상품 등록 폼도 코딩해주었다.
@GetMapping("/add")
public String addForm() {
return "basic/addForm";
}
컨트롤러에 GetMapping 코드를 추가해 주었다.
<html xmlns:th="http://www.thymeleaf.org">
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">일단 공통 부분으로 타임리프를 사용하기 위해 html에 선언을 해놓고 부트스트랩 css를 사용하기 위해 link에 th:href를 추가했다. 이 부분은 공통적으로 계속해서 적용했고 강사님이 include, 인클루드(?)를 통해 반복되는 부분을 해결할 수 있다고 했는데 이번 강의에서는 다루지 않고 다음 강의에서 타임리프에 대해 조금 더 공부하면서 다룬다고 했다.
<form action="item.html" th:action method="post">
먼저 action을 다듬어 주었는데 item.html은 정적 웹 페이지이고 타임리프를 사용하는 페이지로 action을 주기 위해 th:action을 사용했다.
th:action은 HTML form에서 action에 값이 없다면 현재 URL에 데이터를 전송하는 역할을 한다. 상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분하게 된다. - 컨트롤러 코딩을 다 적지 않았지만 같은 경로를 GetMapping과 PostMapping으로 나누어 작성해 효과적이게 사용했다.
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
th:onclick="|location.href='@{/basic/items}'|"
type="button">취소</button>
그리고 추가로 취소 버튼을 눌렀을 때 목록으로 돌아가게 끔 코딩해 주었다.
정적 웹 페이지에서는 onclick를 사용했는데 이번에는 th:onclick를 사용해서 리터럴 대체 표현식을 활용하여 동적 웹 페이지를 완성시켰다.
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술을 참고하여 공부하였습니다.
'Framework & Library > Spring Boot' 카테고리의 다른 글
| [Spring Boot] : 상품 수정 구현하기 (0) | 2022.02.03 |
|---|---|
| [Spring Boot] : 상품 등록 처리 @ModelAttribute 사용하기 (0) | 2022.02.03 |
| [Spring Boot] : thymelef, 타임리프 간단 사용법 (0) | 2022.02.02 |
| [Spring Boot] : 요구사항에 맞춰 상품 도메인을 개발하고 테스트 코드를 작성하기 (0) | 2022.02.02 |
| [Spring Boot] : 프로젝트 생성 및 요구사항 분석 (0) | 2022.02.01 |
댓글