on
[Spring][쇼핑몰 프로젝트][39] 장바구니 기능(장바구니 삭제)
[Spring][쇼핑몰 프로젝트][39] 장바구니 기능(장바구니 삭제)
728x90
반응형
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188
목표
장바구니 품목 삭제 구현
장바구니 페이지 상품란에 '삭제' 버튼을 누르면 장바구니 품목에서 제거되는 기능 구현을 목표로 합니다.
순서
1. 개요
2. 서버 측 구현
2.1 CartService
2.2 CartController.java
3. 뷰 측 구현
4. 테스트
1. 개요
'장바구니 삭제' 구현은 크게 서버 측, 뷰 측 작업으로 나누어서 진행합니다.
'서버 측' 구현의 경우 '뷰'에서 품목 삭제 요청과 함께 "장바구니 id(cartId)"를 전달받으면 DB vam_cart 테이블에서 요청받은 cartId'를 가지는 행을 제거해야 합니다.
'뷰 측' 사용자가 원하는 품목의 '삭제' 버튼을 눌렀을 때 '장바구니 품목 삭제' 요청와 함께 '장바구니 id'를 함께 전성하도록 하도록 구현할 것입니다.
2. 서버 측 구현
DB에 장바구니 수량 변경 쿼리가 동작하도록 만드는 Mapper 메서드(deleteCart())는 이미 만들어 두었습니다. 이를 호출하는 Service 메서드를 만들어 주겠습니다
2.1 CartiService
CartService.java
CartService.java 인터페이스에 아래의 메서드 선언부를 추가해줍니다.
/* 카트 삭제 */ public int deleteCart(int cartId);
그림 2-1
CartServiceImpl.java
인터페이스에서 선언한 메서드를 오버라이딩 해서 구현부를 작성해줍니다.
@Override public int deleteCart(int cartId) { return cartMapper.deleteCart(cartId); }
그림 2-2
2.2 CartController.java
장바구니 품목 삭제를 수행하는 URL은 POST 방식으로서 경로를 "/cart/delete"로 할 것입니다. CartController.java에 아래의 URL 매핑 메서드를 추가해줍니다. 작성한 메서드가'cartId' 'memberId'를 전달받도록 파라미터를 부여해하는데 한 번에 받아들일 수 있도록 CartDTO를 파라미터로 부여했습니다.
'cartId'의 경우 품목 삭제에 필요로한 데이터고 'memberId'는 장바구니 페이지 이동에 필요로 한 데이터입니다.
/* 장바구니 수량 수정 */ @PostMapping("/cart/update") public String updateCartPOST(CartDTO cart) { }
구현부에 앞서 만든 Service 메서드를 호출하고, '장바구니 페이지'에 리다이렉트 방식으로 이동하도록 return 값을 부여합니다.
장바구니 페이지로 이동하는 url은 "/cart/사용자아이디"이기 때문에 아래와 같이 작성했습니다.
/* 장바구니 수량 수정 */ @PostMapping("/cart/update") public String updateCartPOST(CartDTO cart) { cartService.modifyCount(cart); return "redirect:/cart/" + cart.getMemberId(); }
그림 2-3
3. 뷰 측 구현
본격 구현 전 '삭제' 버튼 객체에 쉽게 접근하기 위해 태그에 class 속성을 부여해주었습니다. ( 태그를 감싸는 태그에 delete_btn 클래스 속성 값이 부여되어 있는지 지우고 태그의 class 속성에 'delete_btn'을 값으로 부여해줍니다.
삭제
그림 3-1
더불어 태그의 data 속성을 이용하여 상품의 cartId 값을 태그에 심어줍니다.
삭제
그림 3-2
태그 추가
'cart/delete'요청과 함께 서버에 데이터를 보낼 수 있도록 'cartId', 'memberId' 값들이 저장된 태그를 감 싸는 태그를 추가해줍니다. 위치는 상관없고, 저의 경우 contents 태그 맨 아래 공간에 추가해주었습니다.
그림 3-3
삭제 요청 Js코드
사용자가 삭제 버튼인 태그를 클릭했을 때 동작하는 메서드를
/* 장바구니 삭제 버튼 */ $(".delete_btn").on("click", function(e){ });
메서드 구현부에 먼저 기본 동작이 되지 않도록 preventDefault() 메서드를 호출해주고, cartId변수를 선언하여 해당 객체(클릭된 태그 객체)의 '장바구니 id' 값을 대입해줍니다.
장바구니 id : 클릭된 태그에 (data속성을 통해) 심어진 cartId
/* 장바구니 삭제 버튼 */ $(".delete_btn").on("click", function(e){ e.preventDefault(); const cartId = $(this).data("cartid"); });
구한 값을 앞서 작성한 태그 내부에 작성된 태그에 저장한 후, 태그를 서버로 전송하는 코드를 작성합니다.
/* 장바구니 삭제 버튼 */ $(".delete_btn").on("click", function(e){ e.preventDefault(); const cartId = $(this).data("cartid"); $(".delete_cartId").val(cartId); $(".quantity_delete_form").submit(); });
그림 3-4
4. 테스트
작업한 기능이 잘 구현되었는지 테스트를 해봅니다.
그림 4-1
그림 4-2
그림 4-3
그림 4-4
REFERENCE
DATE
2020.12.01
728x90
from http://kimvampa.tistory.com/270 by ccl(A) rewrite - 2021-12-01 13:27:24