Spring BootとJPA 1-TIL(7)を使用


[参考講座]実戦!Spring BootとJPAによる1-Webアプリケーションの開発

💡 Web階層開発


商品を注文する


商品注文コントローラ


@Controller
@RequiredArgsConstructor
public class OrderController {

    private final OrderService orderService;
    private final MemberService memberService;
    private final ItemService itemService;

    @GetMapping("/order")
    public String createForm(Model model) {

        List<Member> members = memberService.findMembers();
        List<Item> items = itemService.findItems();

        model.addAttribute("members", members);
        model.addAttribute("items", items);

        return "order/orderForm";
    }

    @PostMapping("/order")
    public String order(@RequestParam("memberId") Long memberId,
                        @RequestParam("itemId") Long itemId,
                        @RequestParam("count") int count) {
        orderService.order(memberId, itemId, count);
        return "redirect:/orders";
    }
}

オーダーフォームの移動

  • メイン画面で注文商品を選択すると、GETは/orderを呼び出す
  • Order ControlのcreateForm()メソッド
  • 注文画面で注文する顧客情報と商品情報が必要なため、
  • をモデルオブジェクトに配置してビューに送信する

    オーダーの実行

  • を注文する会員と商品を選択し、submitボタンを押してPOST方式で/order URLを呼び出す
  • コントローラを実行するorder()メソッド
  • この方法は、顧客識別子(memberId)、注文する商品識別子(itemId)、および数量(count)情報を受信することによって、注文サービス
  • を要求する.
  • 注文が終了すると、商品注文履歴付き/orders URLを使用して、
  • に直接指示する.
    商品注文フォームorderForm
    <!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"/>
        <form role="form" action="/order" method="post">
            <div class="form-group">
                <label for="member">주문회원</label>
                <select name="memberId" id="member" class="form-control">
                    <option value="">회원선택</option> <option th:each="member : ${members}"
                                                           th:value="${member.id}"
                                                           th:text="${member.name}" />
                </select>
            </div>
            <div class="form-group">
                <label for="item">상품명</label>
                <select name="itemId" id="item" class="form-control"> <option value="">상품선택</option>
                    <option th:each="item : ${items}"
                            th:value="${item.id}"
                            th:text="${item.name}" />
                </select>
            </div>
            <div class="form-group">
                <label for="count">주문수량</label>
                <input type="number" name="count" class="form-control" id="count"
                       placeholder="주문 수량을 입력하세요"> </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <br/>
        <div th:replace="fragments/footer :: footer" />
    </div> <!-- /container -->
    </body>
    </html>

    受注リストの検索、キャンセル


    オーダーリスト検索コントローラ

        @GetMapping("/orders")
        public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model) {
            List<Order> orders = orderService.findOrders(orderSearch);
            model.addAttribute("orders", orders);
    
            return "order/orderList";
        }
    オーダーリスト検索画面orderList
    <!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>
    

    オーダーのキャンセル

        @PostMapping("/orders/{orderId}/cancel")
        public String cancelOrder(@PathVariable("orderID") Long orderId) {
            orderService.cancelOrder(orderId);
            return "redirect:.orders";
        }