🥇 VS-Code [ jsp ]
📺 JSP 본문 코드
🥈 VS-Code [ js ]
// 좋아요 버튼이 클릭 되었을 때
const boardLike = document.getElementById("boardLike");
// 로그인 여부 검사
boardLike.addEventListener("click",e =>{
if(loginMemberNo == ""){
alert("로그인한후 이용해주세요");
return;
}
let check; // 기존에 좋아요 X(빈하트) : 0
// 기존에 좋아요 O(꽉찬하트) : 1
// contains("클래스명") : 클래스가 있으면 true, 없으면 false
if(e.target.classList.contains("fa-regular")){ // 좋아요 X (빈하트)
check = 0;
} else{ /// 좋아요 0(꽉찬하트)
check = 1;
}
// 로그인한 회원 번호, 게시글번호, 체크 전달할 데이터
// ajax로 서버로 제출할 파라미터를 모아둔 JS객체
const data = {"boardNo" : boardNo, "memberNo": loginMemberNo, "check" : check};
// ajax 코드 작성
fetch("/board/like" , {
method : "POST",
headers : {"Content-Type" : "application/json"},
body : JSON.stringify(data)
})
.then(response => response.text()) // 응답 객체를 필요한 형태로 파싱하여 리턴
.then(count => {
console.log("count :" + count);
if(count == -1){ // INSERT, DELETE 실패 시
console.log("좋아요 처리 실패");
return;
}
// toggle() : 클래스가 있으면 없애고, 없으면 추가하고
e.target.classList.toggle("fa-regular");
e.target.classList.toggle("fa-solid");
// 현재 게시글의 좋아요 수를 화면에 출력
e.target.nextElementSibling.innerText = count;
}) // 파싱된 데이터를 받아서 처리하는 코드 작성
.catch( err=> {
console.log("예외 발생");
console.log(err);
})
});🥉 Spring
📺 BoardController
- @ResponseBody : 반환되는값이 비동기 요청한곳으로 반환되는 어노테이션
📺 BoardService
📺 BoardServiceImpl
- @Transactional : DML 구문 수행할때 예외발생시 롤백해주는 어노테이션
📺 BoardDAO
📺 board-mapper.xml
💎 Result
🔈좋아요 버튼 클릭전 웹브라우저
🔈좋아요 버튼 클릭 웹브라우저 ( 하트에 색이 더해지고 좋아요 갯수가 올라감 )
