20200610 웹계층개발_주문목록검색 및 취소 (최종완료)

주문목록검색 취소

1. OrderController 클래스에서

 

@GetMapping 작성

@PostMapping작성

사진

 

2. OrderList.html 파일 작성

 

 

3. 특정이름으로 검색이

마주한 에러 및 문제해결

-OrderRepository에 JPA Criteria 구문 작성

-OrderService 클래스에 findAllCriteria로 변경

 

실습

화면출력

정리

1.orderList.html파일

-검색조건 양식(form)이 있어야 한다.

 

회원명 구문

주문상태 구문

검색 구문

->검색 버튼을 누르면

 

위에 구문에서 작성하고 선택한 옵션값들을 보낸 값들이

OrderController 클래스에 OrderSearch의 memberName과 OrderStatus에 바인딩이 된다.

다시 OrderController에 와서 바인딩 된 상태로 return에 지정한 order/orderList로 넘어가게 된다.

 

enum type에 order,cancel을 둘다 값을 OrderStatus 루프를 통해 뿌리고 select를 해야 한다.

타임리프의 문법을 사용해서 값을 뿌릴 수 있다.

즉, enum에 잇는 values를 가져와서 값을 뿌리게 된다.

 

 

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

 

-orders를 주문으로 돌려서 나오게 한다.

 

 

<a th:if="${item.status.name() == 'ORDER'}" 구문설명

href="#" th:href="'javascript:cancel('+${item.id}+')'"

class="btn btn-danger">CANCEL</a>

 

-상태가 order이면 cancel버튼이 나오도록 자바 스크립트로 작성을 했다.

cancel을 누를 시에 자바스크립트 캔슬이 호출되어 하기구문으로 넘어간다.

 

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

 

- 구문에서 form 내에 해당하는 내용들을 위해 구문작성을 만들어야 한다.

 

-@PostMapping 방식으로 cancelOrder을 받아와서

redirect으로 화면에 cancel상태의 화면을 출력한다.

 

 

cancel버튼클릭시 화면 및 cancel상태의 목록검색

 

특정이름없이 전체목록출력