주문 목록 검색, 취소

주문 검색 컨트롤러 정리

1. Get방식으로 들어오는 데이터를 OrderSearch로 바인딩한다. @ModelAttribute는 "orderSearch" 이름으로 이 객체 데이터를 뷰 템플릿에 전달한다!

2. orderSearch로 orderService의 findOrders메서드를 호출하여 Order 들을 검색한다. Order컬렉션(orders)를 생성하고, 이 객체 데이터도 뷰 템플릿에 전달한다!

@GetMapping("/orders")
public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model){
    List<Order> orders = orderService.findOrders(orderSearch);
    model.addAttribute("orders",orders);

    return "order/orderList";
}

구현할 내용 상품 주문까지 완료. 주문 완료된 상품 목록들을 조회하면서 주문 검색 기능과 취소 기능을 함께 구현해본다!

1. 컨트롤러

아래 보이는 것처럼 회원, 상품에 의존하며 회원 데이터와 상품 데이터를 가져와야한다.

@ModelAttribute로 요청 파라미터 값들을 바인딩하여 OrderSearch 객체 인스턴스에 담아서 이것을 모델에 담아 템플릿에 넘긴다.

@GetMapping("/orders")
public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model){
  List<Order> orders = orderService.findOrders(orderSearch);
  model.addAttribute("orders",orders);
  return "order/orderList";
}

2. 타임리프 템플릿 : orderList.html +JavaScript 추가됨

orderList.html 분석 일단 아래처럼 회원이름과 주문상태로 검색할 수 있도록 form태그를 추가해야한다!

주문 내역 목업 화면

검색 기능 구현 준비물 : OrderSearch 클래스, OrderService의 검색 기능 메서드 구현(findOrders) OrderSearch 클래스

@Getter @Setter
public class OrderSearch {
    private String memberName;//회원 이름
    private OrderStatus orderStatus;//주문 상태[ORDER, CANCEL]
}

OrderService의 findOrders(OrderSearch orderSearch)메서드 : 검색 기능

public List<Order> findOrders(OrderSearch orderSearch){
  return orderRepository.findAllByCriteria(orderSearch);//단순위임한다.=>컨트롤러에서 리포지토리로 바로 불러도 괜찮다.단순 화면 조회같은 경우.
}

닭이 먼저인가 계란이 먼저인가?어떻게 시작되는 거지?(아리까리한 부분 질문 완료) form태그의 orderSearch가 잇는 걸 보면 폼 페이지에서 데이터를 먼저 전송해서 컨트롤러에서 그 데이터를 객체로 담고, 이 객체 데이터를 템플릿에 전달한 걸로 보임. 폼 페이지 구성할 때 orderSearch 객체 데이터로 구성!? (일단 컨트롤러에서 /orders 로 접속하면 "order/orderList" 페이지 랜더링부터해야하는 거 아닌가?) 1. form 태그에서 회원명, 주문 상태를 GET방식으로 데이터 전송한다. 2. @ModelAttribute로 요청파라미터값들을 OrderSearch 객체로 바인딩한다! 3. OrderService의 findOrders(orderSearch)를 호출해서 List<Order> 변수 orders에 저장. 4. 모델에 "orders"이름으로 orders 담아 orderList 템플릿에 전달한다! 5. orderList 템플릿 렌더링한다. =>@ModelAttribute("orderSearch") : 요청파라미터들을 객체로 만들 뿐만 아니라 "orderSearch" 이름으로 모델에 객체 데이터 담아서 템플릿에 전달한다!

주문 상태가 ORDER이면 취소 가능하므로 스크립트로 cancel 버튼을 만들어주고, cancel 버튼을 누르면 cancel 페이지로 이동하도록 했다.