Spring MVC 다중삭제

cart.html

.
.
<button type="button" class="button_del_checked_items bg_white"> 선택 삭제 </button>
.
.
.
<!-- 제품 -->
<div class="col_table_cell">
    <!-- 체크, 이미지, 제품이름 -->
    <div class="prd">
        <!-- 선택 -->
        <div class="check">
            <input type="checkbox" class="inp_check check_only" checked th:data-cartid="${cart.cartid}" />
        </div>
        <!-- 썸네일 -->
        <div class="prd_thumb">
            <img class="prd_thumb_pic" th:src="${cart.filepath}" th:alt="${cart.title}" />
        </div>
        <!-- 제품이름 -->
        <div class="prd_info">
            <span class="prd_info_name" th:text="${cart.title}"/>&nbsp;
            <span th:if="${cart.color}">(<span th:text="${cart.color}"/>)</span>
        </div>
    </div>
</div>

 

 

axios.delete 요청에서 배열을 쿼리 매개변수로 전달할 때, 

Spring MVC에서 이를 올바르게 처리하기 위해서는 배열의 각 요소를 개별적으로 쿼리 매개변수로 전달해야 한다

이를 위해 paramsSerializer를 사용하여 쿼리 매개변수를 올바르게 직렬화 할 수 있다

/* = = = = = 다중 상품 삭제 = = = = = */

document.querySelector('.button_del_checked_items').addEventListener( 'click', async e => {

    const checkedList = document.querySelectorAll('.check_only:checked');
    // console.log(checkedList);
    if( checkedList.length == 0) {
        alert('구매하실 상품을 선택하여 주세요.');
        return;
    }

    const cartidList = Array.from(checkedList).map( v => v.getAttribute('data-cartid') );
    // console.log(cartidList);

    let data = null;
    try {
        data = await axios.delete( '[[@{/api/cart/deleteList}]]', { 
            params: {
                cartidList: cartidList
            },
            paramsSerializer: params => {
                return params.cartidList.map( v => `cartidList=${v}` ).join('&');
            }
        } );
        // console.log(data);
    } catch(error) {
        console.error(error);
    }       

    window.location.reload();
} );

 

paramsSerializer를 사용하여 cartidList 배열을 직렬화한다.

이렇게 하면 쿼리 매개변수가 cartidList=16&cartidList=18 형식으로 전달된다

 

 

CartRestController에서 cartidList를 파라미터로 받는 메서드를 작성한다

 

CartRestController.java

@DeleteMapping("/api/cart/deleteList")
public Map<String,Object> deleteList (
    @RequestParam("cartidList") List<Integer> cartidList
) {
    try {
        cartService.deleteList(cartidList);
    } catch (Exception e) {
        return restHelper.serverError(e);
    }

    return restHelper.sendJson();
}