[Spring] 쇼핑몰 - 60 주문 상태 변경 버튼 클릭시

주문 상태 버튼을 이용해 배송 관리를 해보자.

---

 

체크박스가 하나 이상이니 WHERE절에 ORDER_NUM 조건으로  IN 쿼리를 짜준다.

UPDATE ORDER_STATUS
SET
STATUS_CODE = #{statusCode}
WHERE ORDER_NUM IN (?,?)

쿼리에는 먼저 이런식으로 나오게 되는데,  IN에는 두개 이상의 매개변수가 들어와야하므로  Map으로 빈값을 채워야한다.

order_manage.html

버튼을 누를 때마다 js을 이용해 주문 상태를 변경하기 위해 버튼에 onclick 을 넣어주었다.

order_manage.js

js에서 컨트롤러로 이동하면 쿼리가 실행될 수 있도록 Map데이터를 생성해서 던질것이다.

AdminController 컨트롤러

일단 orderNum이 1, 2로 체크되어 있다고 가정해서 임의로 1, 2를 넣었다.

admin-mapper.xml

mapper로 돌아와서 changeStatus에 대해 쿼리를 만들어주고,

AdminService

서비스에서 map 데이터로 컨트롤러에서 실행될 수 있도록 해주었다.

AdminController 컨트롤러

만든 쿼리문에 map을 넣어 html에 뿌려주었다.

 

새로고침을 하면, 두개의 데이터가 주문 확인 내역에 들어와 있고, 신규 주문 내역에 체크박스를 누르면,

alert창으로 통신 성공 알림이 뜨게된다.

 

 

버튼에 체크박스의 value 값에 orderNum이 들어가 있으면 된다.

admin-mapper.xml

데이터를 타고 타고 들어가서 쿼리에 ORDER_NUM이 있는지 확인해주고,

order_manage.html

checkbox에 value 값을 orderNum으로 주고, 클래스를 chk로 만들어주었다.

html에서 개발자 모드로 확인하면 테이블에 해당 체크된 체크박스 데이터를 다들고 와준다.

order_manage.html

실제로 액션이 취해진 this를 함께 가지고 온다.

order_manage.js

이후 ajax에서 데이터를 넘겨주었다.

data를 JSON으로 넘겨주기 위해선 contentType을 json형태걸로 바꿔주어야한다.

paramData는 클래스로 생각해주자.

AdminController 컨트롤러

컨트롤러에서 데이터를 넘겨받아 출력해본 결과 이렇게 데이터가 나오는 것을 확인해볼 수 있다.

 

AdminController 컨트롤러

컨트롤러에서 출력하려면 이렇게도 써줄 수 있다.

order_manage.js

내가 클릭한 곳에서 어디로 가겠다 라고해서 this를 써야한다.

 

부모태그.replaceChildren() -> 부모태그 안에 있는 내용 지운다.,

nextElementSibling 내가 클릭한 버튼의 형제태그 지움

 

object에서 toString 쓰면 문자열로 바꿔준다. 따라서 parsInt에 문자열 데이터를 넣어주어 int로 변환해준다.

AdminController 컨트롤러

컨트롤러에서 result 변수에 Map으로 데이터 두개를 firstOrderList, secondOrderList로 나누어 쿼리를 넣어준후 리턴시킨다.

order_manage.js

컨트롤러에서 보낸 데이터가 Ajax로 돌아오면서 result를 함께 받아와주었고,

밑 함수에서도 result를 받아가 콘솔에 받아온 데이터를 html 콘솔창에 나타내보았다.

체크박스 후 데이터를 누르면 firstOrderList 데이터가 secondOrderList 데이터로 넘어가면서 각각 조회된 데이터들을 확인할 수 있다.

order_manage.js

insertAdjacentHTML("1" , 2)

첫번째 매개변수 - 어디에 넣을래, 두번째 매개변수  - 뭐 넣을래.

afterbegin -> 내가 선택한 태그의 첫번째 자식.

order_manage.js, order_manage.html

toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })

자바스크립트에서 원화 쓰는 화폐기호 단위

 

html에서 ajax로 그림을 다시 채워 넣으면서 정상적으로 기능 구현이 완료된 것을 볼 수 있다.