- 리디북스 홈페이지의 위시리스트 서비스를 모델링하여 다음과 같은 로직을 구성함
- 위시버튼을 클릭하였을 때, ajax로 사용자 아이디와 책 아이디를 전달하여 DB에 입력함
- 위시리스트 테이블은 (m_email, b_itemId)를 pk로 지정했음. DataAccessException을 이용해 선택했을 때와 선택을 취소했을 때의 로직을 한번에 처리함.
- ajax는 Boolean 형태의 데이터를 돌려받지 못한다. 그래서 String 형태의 데이터를 받아 분기를 해줬음.
@ResponseBody
@GetMapping("addItem.do")
public String addItemToWishList(WishVo wishVo) {
return service.clickWishButton(wishVo);
}
@Override
public String clickWishButton(WishVo wishVo) {
try {
mapperWish.insertWishList(wishVo);
return "selected";
}catch(DataAccessException dae) {
mapperWish.deleteWishList(wishVo);
return "unselected";
}
}
$(document).on("click","#in-wish-list",function(){
let loginUser = $("#login-user-for-js").val();
let b_itemId = $("#itemId").val();
if(loginUser == undefined){
alert("로그인이 필요한 서비스입니다.");
location.href = "../member/login.do";
return false;
}
$.ajax({
url : "../wishList/addItem.do",
type : "Get",
data : {b_itemId : b_itemId, m_email : loginUser},
dataType : "text",
success : function(selectWish){
let html = '';
html += '<span>';
if(selectWish == "selected"){
html += '<i class="ion-ios-heart" style="color:red"></i>';
}else{
html += '<i class="ion-ios-heart-outline"></i>';
}
html += '</span>';
$("#in-wish-list").html(html);
if(selectWish == "selected" ){
if(confirm("위시리스트 페이지로 이동하시겠습니까?")==true){
location.href = "../wishList/moveWishPage.do";
}else{
return false;
}
}
},
error : function(a,b,c){
alert("실패 :" + a.responseText);
alert("실패 :" + c);
}
});
});