[Spring] 7.스프링 MVC - 웹 페이지 만들기

1. 프로젝트 생성

파일참고

2. 요구사항 분석

상품 도메인 모델

- 상품 ID

- 상품명

- 가격

- 수량

상품 관리 기능

- 상품 목록

- 상품 상세

- 상품 등록

- 상품 수정

3. 상품 도메인 개발

상품 객체

@Data
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;
  } 
}

* @Data(롬복)는 핵심 도메인 모델에 사용하기 위험함 (getter setter만 추천)

아이템 저장소

@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();
      }  
      
}

4. 상품 서비스 HTML

부트스트랩

- HTML 편리 개발 위해 사용

5. 상품 목록 - 타임리프

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));
  }
}

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

public BasicItemController(ItemRepository itemRepository) {
    this.itemRepository = itemRepository;
}

상품 목록 view

<!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>

6. 상품 상세

BasicItemController에 추가

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

뷰

<!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>

7. 상품 등록 폼

BasicItemController에 추가

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

뷰

<!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="form-
control" 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="form-
control" 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'"
        </div>
    </div>
</form>
th:onclick="|location.href='@{/basic/items}'|" type="button">취소</button>
  </div> <!-- /container -->
  </body>
  </html>

상품 등록 처리 (POST - HTML form)

BasicItemController에 추가

@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";
}

상품 등록 처리 (ModelAttribute)

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

* modelattribute 이름 생략 가능

8. 상품 수정

BasicItemController에 추가

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

뷰

<!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="form-
control" 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="form-
control" 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})}'|"
        </div>
    </div>
</form>
type="button">취소</button>
  </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}";
  }

*리다이렉트 : 뷰 템플릿 호출하는 대신 상품 상세 화면으로 이동하도록

9. PRG : POST / REDIRECT / GET

심각한 문제

- 상품 등록하고 웹브라우저 새로고침 누르면 중복 등록됨

- 상품 등록 후 상품 상세 뷰를 호출해서 보내는데 URL은 그대로 상품 저장 URL에 남아있음

전체 흐름

POST 등록 후 새로고침

해결하는법? (Post, Redirect Get)

상품 저장 후 뷰 템플릿으로 이동하는 것이 아니라 상품 상세화면으로 리다이렉트 호출

컨트롤러 수정

/**
   * PRG - Post/Redirect/Get
   */
  @PostMapping("/add")
  public String addItemV5(Item item) {
      itemRepository.save(item);
      return "redirect:/basic/items/" + item.getId();
  }

+item.getId 방식 위험 (URL 인코딩 안되기 때문에)

RedirectAttributes

- 저장 확인 기능 추가

/**
     * RedirectAttributes
     */
    @PostMapping("/add")
    public String addItemV6(Item item, RedirectAttributes redirectAttributes) {
        Item savedItem = itemRepository.save(item);
        redirectAttributes.addAttribute("itemId", savedItem.getId());
        redirectAttributes.addAttribute("status", true);
        return "redirect:/basic/items/{itemId}";
}

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

저작자표시

'👨‍💻 Web Development > Spirng - MVC 패턴 l' 카테고리의 다른 글

[Spring] 6.스프링 MVC - 기본 기능 (0)	2023.03.15
[Spring] 5.스프링 MVC - 구조 이해 (0)	2023.03.14
[Spring] 4.MVC 프레임워크 만들기 (0)	2023.03.13
[Spring] 3.서블릿, JSP, MVC 패턴 (0)	2023.03.13
[Spring] 2.서블릿 (0)	2023.03.12

[Spring] 7.스프링 MVC - 웹 페이지 만들기