spring

간단한 사이트 만들기

Beencle 2023. 4. 5. 10:34

프로젝트 생성

  • Project: Gradle
  • Project Language: Java
  • Spring Boot: 2.4.x

Project Metadata

  • Group: hello
  • Artifact: item-service
  • Name: item-service
  • Package name: hello.itemservice
  • Packaging: Jar
  • (주의!) Java: 11

Dependencies: Spring Web, Thymeleaf, Lombok

출처 : 김영한 MVC 1편

상품 객체

public class Item {
 private Long id;
 private String itemName;
 private Integer price;
 private Integer quantity;
 public Item() {
 }
 public Item(String itemName, Integer price, Integer quantity) {
 this.itemName = itemName;
 this.price = price;
 this.quantity = quantity;
 }
}

@Getter와 @Setter추가

 

상품 저장소( ItemRepository )

@Repository
public class ItemRepository {
        private static final Map<Long, Item> store = new HashMap<>(); //static 사용
        private static long sequence = 0L; //static 사용
    public Item save(Item item) {
        item.setId(++sequence);
    store.put(item.getId(), item);
        return item;
    }
    public Item findById(Long id) {
        return store.get(id);
    }
    public List<Item> findAll() {
        return new ArrayList<>(store.values());
    }
    public void update(Long itemId, Item updateParam) {
        Item findItem = findById(itemId);
        findItem.setItemName(updateParam.getItemName());
        findItem.setPrice(updateParam.getPrice());
        findItem.setQuantity(updateParam.getQuantity());
    }
    public void clearStore() {
        store.clear();
    }
}

부트스트랩 참고로 HTML을 편리하게 개발하기 위해 부트스트랩 사용했다. 먼저 필요한 부트스트랩 파일을 설치하자

부트스트랩 공식 사이트: https://getbootstrap.com

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

부트스트랩을 다운로드 받고 압축을 풀자. 이동: https://getbootstrap.com/docs/5.0/getting-started/download/

 

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

Compiled CSS and JS 항목을 다운로드하자.

압축을 출고 bootstrap.min.css 를 복사해서 다음 폴더에 추가하자

resources/static/css/bootstrap.min.css

 

HTML, css 파일

  • /resources/static/css/bootstrap.min.css 부트스트랩 다운로드
  • /resources/static/html/items.html 아래 참조
  • /resources/static/html/item.html
  • /resources/static/html/addForm.html
  • /resources/static/html/editForm.html

상품 목록 HTML

resources/static/html/items.html

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <link 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'" 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>
 <td><a href="item.html">1</a></td>
 <td><a href="item.html">테스트 상품1</a></td>
 <td>10000</td>
 <td>10</td>
 </tr>
 <tr>
 <td><a href="item.html">2</a></td>
 <td><a href="item.html">테스트 상품2</a></td>
 <td>20000</td>
 <td>20</td>
 </tr>
 </tbody>
 </table>
 </div>
</div> <!-- /container -->
</body>
</html>

상품 상세 HTML

resources/static/html/item.html

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 상세</h2>
 </div>
 <div>
 <label for="itemId">상품 ID</label>
 <input type="text" id="itemId" name="itemId" class="form-control"
value="1" readonly>
 </div>
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="form-control"
value="상품A" readonly>
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
value="10000" readonly>
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="form-control"
value="10" readonly>
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg"
onclick="location.href='editForm.html'" type="button">상품 수정</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'" type="button">목록으로</button>
 </div>
 </div>
</div> <!-- /container -->
</body>
</html>

상품 등록 폼 HTML

resources/static/html/addForm.html

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 등록 폼</h2>
 </div>
 <h4 class="mb-3">상품 입력</h4>
 <form action="item.html" method="post">
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="formcontrol" placeholder="이름을 입력하세요">
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
placeholder="가격을 입력하세요">
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="formcontrol" placeholder="수량을 입력하세요">
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg" type="submit">상품
등록</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'" type="button">취소</button>
 </div>
 </div>
 </form>
</div> <!-- /container -->
</body>
</html>

상품 수정 폼 HTML

resources/static/html/editForm.html

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 수정 폼</h2>
 </div>
 <form action="item.html" method="post">
 <div>
 <label for="id">상품 ID</label>
 <input type="text" id="id" name="id" class="form-control" value="1"
readonly>
 </div>
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="formcontrol" value="상품A">
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
value="10000">
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="formcontrol" value="10">
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg" type="submit">저장
</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='item.html'" type="button">취소</button>
 </div>
 </div>
 </form>
</div> <!-- /container -->
</body>
</html>

위에 만들었던 html파일들을 thymeleaf로 변경해보자.

/resources/templates/basic/items.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css"
 th: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/${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>

BasicItemController

 

@Controller
@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";
 }
 /**
 * 테스트용 데이터 추가
 */
 @PostConstruct
 public void init() {
 itemRepository.save(new Item("testA", 10000, 10));
 itemRepository.save(new Item("testB", 20000, 20));
 }
}

기본적으로 html파일이 아닌 타임리프로 만든 html파일로 이동하기 위한 컨트롤러 (itemRepository에서 모든 상품을 조회한 다음에 모델에 담는다. 그리고 뷰 템플릿을 호출한다.)

 

@RequiredArgsConstructor

final 이 붙은 멤버변수만 사용해서 생성자를 자동으로 만들어준다.

생성자가 딱 1개만 있으면 스프링이 해당 생성자에 @Autowired 로 의존관계를 주입해준다.

따라서 final 키워드를 빼면 안된다!, 그러면 ItemRepository 의존관계 주입이 안된다.

 

타임리프 간단히 알아보기

타임리프 사용 선언 ↓

<html xmlns:th="http:/www.thymeleaf.org">

 

속성 변경 - th:href 

th:href="@{/css/bootstrap.min.css}"

  • HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다.
  • 대부분의 HTML 속성을 th:xxx 로 변경할 수 있다

타임리프 핵심

  • 핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다.
  • HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.
  • 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.

속성 변경 - th:onclick

onclick="location.href='addForm.html' ( 변경 전 )

th:onclick="|location.href='@{/basic/items/add}'| ( 변경 후 )

더보기

리터럴 대체 - |...|

  • 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
    -> <span th:text="'Welcome to our application, ' + ${user.name} + '!'">
  • 다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
    -> <span th:text="|Welcome to our application, ${user.name}!|">
  • 결과를 다음과 같이 만들어야 하는데
    -> location.href='/basic/items/add'
  • 그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해진다
    -> th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
  • 리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있다.
    -> th:onclick="|location.href='@{/basic/items/add}'|"

반복 출력 - th:each

  • <tr th:each="item : ${items}">
  • 반복은 th:each 를 사용한다. 이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
  • 컬렉션의 수 만큼 .. 이 하위 테그를 포함해서 생성된다.

변수 표현식 - ${...}

  • <td th:text="${item.price}">10000</td>
  • 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
  • 프로퍼티 접근법을 사용한다. ( item.getPrice() )

내용 변경 - th:text

  • <td th:text="${item.price}">10000</td>
  • 내용의 값을 th:text 의 값으로 변경한다.
  • 여기서는 10000을 ${item.price} 의 값으로 변경한다

URL 링크 표현식2 - @{...}

  • th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
  • 상품 ID를 선택하는 링크를 확인해보자.
  • URL 링크 표현식을 사용하면 경로를 템플릿처럼 편리하게 사용할 수 있다.
  • 경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.
  • 예) th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
    -> 생성 링크: http://localhost:8080/basic/items/1?query=test

URL 링크 간단히

  • th:href="@{|/basic/items/${item.id}|}"
  • 상품 이름을 선택하는 링크를 확인해보자
  • 리터럴 대체 문법을 활용해서 간단히 사용할 수도 있다.

타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. JSP를 생각해보면, JSP 파일은 웹 브라우저에서 그냥 열면 JSP 소스코드와 HTML이 뒤죽박죽 되어서 정상적인 확인이 불가능하다. 오직 서버를 통해서 JSP를 열어야 한다. > 이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 한다.

 

상품 상세

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

/resources/templates/basic/item.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css"
 th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 상세</h2>
 </div>
 <div>
 <label for="itemId">상품 ID</label>
 <input type="text" id="itemId" name="itemId" class="form-control"
value="1" th:value="${item.id}" readonly>
 </div>
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="form-control"
value="상품A" th:value="${item.itemName}" readonly>
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
value="10000" th:value="${item.price}" readonly>
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="form-control"
value="10" th:value="${item.quantity}" readonly>
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg"
onclick="location.href='editForm.html'"
 th:onclick="|location.href='@{/basic/items/{itemId}/
edit(itemId=${item.id})}'|" type="button">상품 수정</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
 th:onclick="|location.href='@{/basic/items}'|"
 type="button">목록으로</button>
 </div>
 </div>
</div> <!-- /container -->
</body>
</html>

속성 변경 - th:value

th:value="${item.id}"

  • 모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. ( item.getId())
  • value 속성을 th:value 속성으로 변경한다.

상품수정 링크

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

목록으로 링크

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

상품 등록 폼

@GetMapping("/add")
public String addForm() {
	return "basic/addForm";
}

/resources/templates/basic/addForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css"
 th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 등록 폼</h2>
 </div>
 <h4 class="mb-3">상품 입력</h4>
 <form action="item.html" th:action method="post">
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="formcontrol" placeholder="이름을 입력하세요">
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
placeholder="가격을 입력하세요">
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="formcontrol" placeholder="수량을 입력하세요">
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg" type="submit">상품
등록</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
 th:onclick="|location.href='@{/basic/items}'|"
 type="button">취소</button>
 </div>
 </div>
 </form>
</div> <!-- /container -->
</body>
</html>

속성 변경 - th:action

  • HTML form에서 action 에 값이 없으면 현재 URL에 데이터를 전송한다.
  • 상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
    1. 상품 등록 폼: GET /basic/items/add
    2. 상품 등록 처리: POST /basic/items/add
  • 취소
    th:onclick="|location.href='@{/basic/items}'|"

(1) 상품 등록 처리 - @RequestParam

상품 등록 폼은 다음 방식으로 서버에 데이터를 전달한다.

POST - HTML Form

  • content-type: application/x-www-form-urlencoded
  • 메시지 바디에 쿼리 파리미터 형식으로 전달 itemName=itemA&price=10000&quantity=10
  • 예) 회원 가입, 상품 주문, HTML Form 사용

요청 파라미터 형식을 처리해야 하므로 @RequestParam 을 사용하자

@PostMapping("/add")
public String addItemV1(@RequestParam String itemName,
        @RequestParam int price,
        @RequestParam Integer quantity,
    Model model) {
    Item item = new Item();
    item.setItemName(itemName);
    item.setPrice(price);
    item.setQuantity(quantity);
    itemRepository.save(item);
    model.addAttribute("item", item);
    return "basic/item";
}

1. 먼저 @RequestParam String itemName : itemName 요청 파라미터 데이터를 해당 변수에 받는다.

2. Item 객체를 생성하고 itemRepository 를 통해서 저장한다.

3. 저장된 item 을 모델에 담아서 뷰에 전달한다.

여기서는 상품 상세에서 사용한 item.html 뷰 템플릿을 그대로 재활용한다.

 

(2) 상품 등록 처리 - @ModelAttribute

@RequestParam 으로 변수를 하나하나 받아서 Item 을 생성하는 과정은 불편했다

/**
 * @ModelAttribute name 생략 가능
 * model.addAttribute(item); 자동 추가, 생략 가능
 * 생략시 model에 저장되는 name은 클래스명 첫글자만 소문자로 등록 Item -> item
 */
@PostMapping("/add")
public String addItemV2(@ModelAttribute("item") Item item, Model model) {
    itemRepository.save(item);
    //model.addAttribute("item", item); //자동 추가, 생략 가능
    return "basic/item";
}

@ModelAttribute - 요청 파라미터 처리

@ModelAttribute 는 Item 객체를 생성하고, 요청 파라미터의 값을 프로퍼티 접근법(setXxx)으로 입력해준다.

 

@ModelAttribute - Model 추가

@ModelAttribute는 중요한 한가지 기능이 더 있는데, 바로 모델(Model)에 @ModelAttribute 로 지정한 객체를 자동으로 넣어준다. 지금 코드를 보면 model.addAttribute("item", item) 가 주석처리 되어 있어도 잘 동작하는 것을 확인할 수 있다.

 

모델에 데이터를 담을 때는 이름이 필요하다. 이름은 @ModelAttribute 에 지정한 name(value) 속성을 사용한다. 만약 다음과 같이 @ModelAttribute 의 이름을 다르게 지정하면 다른 이름으로 모델에 포함된다.

 

@ModelAttribute("hello") Item item → 이름을 hello 로 지정

model.addAttribute("hello", item); → 모델에 hello 이름으로 저장

 

ModelAttribute 이름 생략 

@ModelAttribute 의 이름을 생략할 수 있다.

@ModelAttribute 의 이름을 생략하면 모델에 저장될 때 클래스명을 사용한다.

이때 클래스의 첫글자만 소문자로 변경해서 등록한다.

예) @ModelAttribute 클래스명 모델에 자동 추가되는 이름 ( Item →  item )

 

ModelAttribute 전체 생략

/**
 * @ModelAttribute 자체 생략 가능
 * model.addAttribute(item) 자동 추가
 */
@PostMapping("/add")
public String addItemV4(Item item) {
	itemRepository.save(item);
	return "basic/item";
}

@ModelAttribute 자체도 생략가능하다. 대상 객체는 모델에 자동 등록된다. 나머지 사항은 기존과 동일하다.

 

상품 수정

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

/resources/templates/basic/editForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css"
 th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
 <style>
 .container {
 max-width: 560px;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="py-5 text-center">
 <h2>상품 수정 폼</h2>
 </div>
 <form action="item.html" th:action method="post">
 <div>
 <label for="id">상품 ID</label>
 <input type="text" id="id" name="id" class="form-control" value="1"
th:value="${item.id}" readonly>
 </div>
 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" name="itemName" class="formcontrol" value="상품A" th:value="${item.itemName}">
 </div>
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" name="price" class="form-control"
th:value="${item.price}">
 </div>
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" name="quantity" class="formcontrol" th:value="${item.quantity}">
 </div>
 <hr class="my-4">
 <div class="row">
 <div class="col">
 <button class="w-100 btn btn-primary btn-lg" type="submit">저장
</button>
 </div>
 <div class="col">
 <button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='item.html'"
 th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|"
 type="button">취소</button>
 </div>
 </div>
 </form>
</div> <!-- /container -->
</body>
</html>

 

상품 수정 개발

@PostMapping("/{itemId}/edit")
public String edit(@PathVariable Long itemId, @ModelAttribute Item item) {
    itemRepository.update(itemId, item);
    return "redirect:/basic/items/{itemId}";
}

상품 수정은 상품 등록과 전체 프로세스가 유사하다.

  • GET /items/{itemId}/edit : 상품 수정 폼
  • POST /items/{itemId}/edit : 상품 수정 처리

리다이렉트

상품 수정은 마지막에 뷰 템플릿을 호출하는 대신에 상품 상세 화면으로 이동하도록 리다이렉트를 호출한다

redirect:/basic/items/{itemId}

  • 컨트롤러에 매핑된 @PathVariable 의 값은 redirect 에도 사용 할 수 있다.
  • redirect:/basic/items/{itemId} {itemId} 는 @PathVariable Long itemId 의 값을 그대로 사용한다.

참고

> HTML Form 전송은 PUT, PATCH를 지원하지 않는다. GET, POST만 사용할 수 있다.

> PUT, PATCH는 HTTP API 전송시에 사용

> 스프링에서 HTTP POST로 Form 요청할 때 히든 필드를 통해서 PUT, PATCH 매핑을 사용하는 방법이 있지만, HTTP 요청상 POST 요청이다.