-
[김영한 스프링] 32. 스프링 MVC 웹 페이지 만들기 - 상품 상세 & 상품 등록 폼Spring/스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 2023. 7. 24. 01:36
상품 상세
BasicItemController에 추가
@GetMapping("/{itemId}") public String items(@PathVariable long itemId, Model model) { Item item = itemRepository.findById(itemId); model.addAttribute("item", item); return "basic/item"; }
PathVariable로 넘어온 상품ID로 상품을 조회하고, 모델에 담아둔다. 그리고 뷰 템플릿을 호출한다.
상품 상세 뷰
resources/static/html/item.html을 resources/templates/basic로 복붙
타임리프 사용 선언, 속성 변경
<html xmlns:th="http://www.thymeleaf.org">
th:href="@{/css/bootstrap.min.css}"
상품 상세 화면은 정상적으로 뜨지만 상품명이 testA가 아닌 상품A로 나옴
th:value="${item.id}"
th:value="${item.itemName}"
th:value="${item.price}"
th:value="${item.quantity}"
속성 변경 - th:value
- th:value="${item.id}"모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. (item.getId())
- value 속성을 th:value 속성으로 변경한다.
testA 정상
localhost:8080/basic/items/1/edit으로
상품수정 링크
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
http://localhost:8080/basic/items으로
목록으로 링크
th:onclick="|location.href='@{/basic/items}'|"
상품 등록 폼
상품 등록 폼
@GetMapping("/add") public String addForm() { return "basic/addForm"; }
상품 등록 폼 뷰
resources/static/html/addForm.html을 resources/templates/basic로 복붙
<html xmlns:th="http://www.thymeleaf.org">
th:href="@{/css/bootstrap.min.css}"
@PostMapping("/add") public String save() { return "basic/addForm"; }
상품등록 폼 화면과 상품등록은 같은 URL이지만 Get과 Post로 구분 가능
상품등록 폼 화면과 같기 때문에 액션 이후 비워둠
속성 변경 - th:action
- th:action
- HTML form에서 action에 값이 없으면 현재 URL에 데이터를 전송한다.
- 상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
- 상품 등록 폼 : GET /basic/items/add
- 상품 등록 처리 : POST /basic/items/add
- 이렇게 하면 하나의 URL로 등록 폼과, 등록 처리를 깔끔하게 처리할 수 있다.
취소
- 취소시 상품 목록으로 이동한다.
- th:onclick="|location.href='@{/basic/items}'|"
출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의
웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., 원
www.inflearn.com
'Spring > 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글
[김영한 스프링] 34. 스프링 MVC 웹 페이지 만들기 - PRG Post/Redirect/Get (0) 2023.07.24 [김영한 스프링] 33. 스프링 MVC 웹 페이지 만들기 - 상품 등록 처리 & 상품 수정 (0) 2023.07.24 [김영한 스프링] 31. 스프링 MVC 웹 페이지 만들기 - 상품 목록 타임리프 (0) 2023.07.23 [김영한 스프링] 30. 스프링 MVC 웹 페이지 만들기 - 상품 서비스 HTML (0) 2023.07.20 [김영한 스프링] 29. 스프링 MVC 웹 페이지 만들기 - 상품 도메인 개발 (0) 2023.07.19