[개발] - Spring/MVC 1

웹 페이지 만들기 (9) RedirectAttributes

완벽한 장면 2023. 11. 5. 21:04

상황 설정

상품을 저장하고 상품 상세 화면으로 리다이렉트 한 것 까지는 좋았다. 

그런데 고객 입장에서 저장이 잘 된 것인지 안 된 것인지 확신이 들지 않는다.

그래서 저장이 잘 되었으면 상품 상세 화면에 "저장되었습니다"라는 메시지를 보여달라는 요구사항이 추가되었다면,

이를 해결해본다.

 

BasicItemController에 추가

/**
 * 상품을 추가하는 메서드.
 *
 * @param item 추가할 상품 정보를 나타내는 객체
 * @param redirectAttributes Spring MVC 리다이렉트 시 데이터를 전달하기 위한 객체
 * @return 상품 추가 후 해당 상품 상세 정보 페이지로 리다이렉트
 */
@PostMapping("/add")
public String addItemV6(Item item, RedirectAttributes redirectAttributes) {
    // 상품 정보를 데이터베이스에 저장하고 저장된 상품 정보를 반환.
    Item savedItem = itemRepository.save(item);

    // 리다이렉트 시 URL에 파라미터를 추가하기 위해 RedirectAttributes를 사용.
    // "itemId" 파라미터에 저장된 상품의 ID를 추가.
    redirectAttributes.addAttribute("itemId", savedItem.getId());

    // "status" 파라미터를 추가하고 값을 true로 설정. (예: 성공적으로 상품을 추가한 상태를 나타냄)
    redirectAttributes.addAttribute("status", true);

    // 상품 추가 후 해당 상품의 상세 정보 페이지로 리다이렉트.
    return "redirect:/basic/items/{itemId}";
}

 

 

* 리다이렉트 할 때 간단히 status=true 를 추가해보자. 그리고 뷰 템플릿에서 이 값이 있으면,

  "저장되었습니다." 라는 메시지를 출력하도록 만들기.


실행해보면 다음과 같은 리다이렉트 결과가 나온다.
=> http://localhost:8080/basic/items/3?status=true

 

RedirectAttributes

RedirectAttributes를 사용하면 URL 인코딩도 해주고, pathVarible , 쿼리 파라미터까지 처리해준다.

 

redirect:/basic/items/{itemId}

  • pathVariable 바인딩: {itemId}
  • 나머지는 쿼리 파라미터로 처리: ?status=true

뷰 템플릿 메시지 추가
resources/templates/basic/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>

    <!-- 추가 -->
    <h2 th:if="${param.status}" th:text="'저장 완료!'"></h2>

    <!-- 상품 상세 정보를 입력/표시하는 부분 -->
    <div>
        <label for="itemId">상품 ID</label>
        <input class="form-control" id="itemId" name="itemId" readonly type="text" value="1">
        <!-- 상품 ID를 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>
    <div>
        <label for="itemName">상품명</label>
        <input class="form-control" id="itemName" name="itemName" readonly type="text" value="상품A">
        <!-- 상품명을 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>
    <div>
        <label for="price">가격</label>
        <input class="form-control" id="price" name="price" readonly type="text" value="10000">
        <!-- 상품 가격을 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>
    <div>
        <label for="quantity">수량</label>
        <input class="form-control" id="quantity" name="quantity" readonly type="text" value="10">
        <!-- 상품 수량을 표시하는 입력 필드. "readonly" 속성으로 읽기 전용 상태로 설정됨. -->
    </div>

    <hr class="my-4"> <!-- 수평 구분선 추가 -->

    <!-- 버튼으로 이동할 수 있는 부분 -->
    <div class="row">
        <!-- "상품 수정" 버튼. 클릭하면 'editForm.html' 페이지로 이동. -->
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" type="button">상품 수정
            </button>
        </div>
        <!-- "목록으로" 버튼. 클릭하면 'items.html' 페이지로 이동. -->
        <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>

 

 

 

728x90
반응형