관리 메뉴

Mini

주문 목록 검색, 취소 // @ModelAttribute, @PathVariable / 실전편-1 끝! 본문

Java/Spring-app

주문 목록 검색, 취소 // @ModelAttribute, @PathVariable / 실전편-1 끝!

Mini_96 2023. 7. 31. 23:21

* orderController - Get매핑

    @GetMapping(value = "/orders")
    public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model){
        List<Order> orders = orderService.findOrders(orderSearch);
        model.addAttribute("orders",orders);    //orders를 들고 html로 가라
        //model.addAttribute("orderSearch",orderSearch);    //@ModelATtribute => 자동으로 모델에 담아줌. 받기도가능

        return "order/orderList";


    }

 

*HTML

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<body>

<div class="container">

  <div th:replace="fragments/bodyHeader :: bodyHeader"/>

  <div>
    <div>
      <form th:object="${orderSearch}" class="form-inline">
        <div class="form-group mb-2">
          <input type="text" th:field="*{memberName}" class="form-control" placeholder="회원명"/>
        </div>
        <div class="form-group mx-sm-1 mb-2">
          <select th:field="*{orderStatus}" class="form-control">
            <option value="">주문상태</option>
            <option th:each="status : ${T(jpabook.jpashop.domain.OrderStatus).values()}"
                    th:value="${status}"
                    th:text="${status}">option
            </option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary mb-2">검색</button>
      </form>
    </div>

    <table class="table table-striped">
      <thead>
      <tr>
        <th>#</th>
        <th>회원명</th>
        <th>대표상품 이름</th>
        <th>대표상품 주문가격</th>
        <th>대표상품 주문수량</th>
        <th>상태</th>
        <th>일시</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="item : ${orders}">
        <td th:text="${item.id}"></td>
        <td th:text="${item.member.name}"></td>
        <td th:text="${item.orderItems[0].item.name}"></td>
        <td th:text="${item.orderItems[0].orderPrice}"></td>
        <td th:text="${item.orderItems[0].count}"></td>
        <td th:text="${item.status}"></td>
        <td th:text="${item.orderDate}"></td>
        <td>
          <a th:if="${item.status.name() == 'ORDER'}" href="#" th:href="'javascript:cancel('+${item.id}+')'"
             class="btn btn-danger">CANCEL</a>
        </td>
      </tr>

      </tbody>
    </table>
  </div>

  <div th:replace="fragments/footer :: footer"/>

</div> <!-- /container -->

</body>
<script>
    function cancel(id) {
        var form = document.createElement("form");
        form.setAttribute("method", "post");
        form.setAttribute("action", "/orders/" + id + "/cancel");
        document.body.appendChild(form);
        form.submit();
    }
</script>
</html>

 

* OrderController - Post매핑

    @PostMapping(value="orders/{orderId}/cancel") //PathVAriable에서 받아온거 {}에 대입.
    public String cancelOrder(@PathVariable("orderId") Long orderId){
        orderService.cancleOrder(orderId);

        return "redirect:/orders";
    }

 

*실행결과

 

*실전스프링-1편 회고

드디어 실전편-1이 끝났다.

2편에서는 API를 배워서 다른 앱과 통신해보자.

 

- 느낀점 : 

MVC 패턴을 모르니까 @Controller 등 어노테이션이 어떻게 동작하는지 몰라서 단순히 코드를 받아쓰는 느낌이 들었다.

DB 설계후 JPA로 구현하는 것을 다시 복습해야 겠다.

의존관계주입에 대해 복습해야겠다.

 

-해결 : 

MVC 강의를 수강 및 복습.

야생스타일로 나만의 앱을 만들어보며 모르는것이 생기면 그때마다 공부 (완전 실전형으로)

-> 이방법이 실력이 빨리 는다고 하더라..