[ Spring ] 게시글 상세 좋아요 | 조회수 ⑧

 

오늘은 게시글 상세에서 좋아요 누르는 부분을 할 예정이다. 

 

우선 생각해야할게  누가 ! 어떤 게시글! 좋아요를 클릭/ 취소 했는지 알아봐야한다. 

그렇다면 그럼 정보를 어떻게 얻어 올 수 있을까 ?

 

총 3가지 방법이 있는데 그 중 가장 편하고 쉬운 3번으로 진행해보기로 했다. 

1) ajax로 session에 있는 loginMember의 memberNo를 반환
2) HTML 요소에 로그인한 회원의 번호를 숨겨 놓고 js로 얻어오기 (data-value)

❗ 3) jsp 파일 제일 위에 있는 script 태그에 JS+EL이용해서 전역 변수로 선언해둔다. ❗

📚 VS code

📕 boardDetail.jsp

<script>
    // JSP 에서 작성 가능한 언어/라이브러리 
    // html,css,js,java,EL JSTL 

    // jsp 해석 우선 순위 : Java/El/JSTL -> HTML,css,JS 

    // 게시글 번호 전역 변수로 선언 
    const boardNo = "${board.boardNo}";

    // 로그인한 회원 번호를 전역변수로 선언
    // -> 작성한 EL구문이 null일 경우 빈칸으로 출력되어
    //    변수에 값이 대입되지 않는 문제가 발생할 수 있다. -=
    //    해결 방법 : EL 구문을 '', "" 문자열로 감싸면 해결 / 해석 
          우선 순위가 EL값이 null이여도 ""(빈문자열)로 출력
    const loginMemberNo = "${loginMember.memberNo}";

    console.log(boardNo);
    console.log(loginMemberNo);
</script>

📕 boardDetail.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 { // 좋아요가 x (꽉찬하트)
        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)
            //toggle(): 클래스가 있으면 없애고, 없으면 추가한다.
            e.target.classList.toggle("fa-regular");
            e.target.classList.toggle("fa-solid");

        }) // 파싱된 데이터를 받아서 처리하는 코드 작성
        .catch(err=>{
            console.log("예외발생")
            console.log("err");
        }) // 예외 발생 시 처리하는 부분

});

❗ 위에 jsp에 요청 주소를 /board/like라고 지정해 놓았다. 

그러고 Spring를 가서 보니 이전에 작성해 놓았던 @PathVariable에 "{/boardCode}"에서 like를 잡아 처리하고 있어 

아래와 같은 오류가 발생하고 있다! 

🤔 왜 그런 것 일까 ?

요청 주소와 @pathVariable로 가져다 쓸 주소의 레벨이 같다면
구분 하지 않고 모두 맵핑되는 문제가 발생 -> 원하는 메소드가 실행되지 않는다!

🤔 그럼 어떻게 해결해야할까? 

@PathVariable 지정 시 정규 표현식 사용하면 된다! {키:정규표현식}

❗ 이전에 사용했던 @PathVariable뒤에 정규표현식을 작성하면 된다 ❗

@GetMapping("/{boardCode:[0-9]+}") //-> boardCode는 1자리 이상 숫자

 

📚 Spring

📗 BoardController

//좋아요처리
	@PostMapping("/like")
	@ResponseBody // 반환 되는 값이 비동기 요청한 곳으로 돌아게 함
	public int like(@RequestBody Map<String, Integer> paramMap) {
                 // @RequestBody했던 이유 js에서 body에 data로 담아줫기 때문에 
		//System.out.println(paramMap);
		
		return service.like(paramMap);
	}

 

📗 BoardService

/**좋아요 처리 서비스 
 * @param paramMap
 * @return count
 */
int like(Map<String, Integer> paramMap);

📗 BoardServiceImpl

// 좋아요 처리 서비스 
	@Transactional(rollbackFor = Exception.class)
	@Override
	public int like(Map<String, Integer> paramMap) {
		
		int result = 0;
		if(paramMap.get("check") == 0) { // 좋아요 상태가 x
			//BOARD_LIEK 테이블 INSERT
			result = dao.insertBoardLike(paramMap);
			
		}else { //좋아요 상태 o 
			// BOARD_LIKE 테이블 DELETE
			result = dao.delectBoardLike(paramMap);
		}
		
		// SQL 수행 결과 0 -> DB또는 파라미터에 문제가 있다.
		// 1) 에러를 나타내는 임의의 값을 반환 (-1)
		if(result == 0) return -1;
		
		// 현재 게시글의 좋아요 개수 조회 ->나만 좋아요 누르는게 아닌 다른 사람도 눌러! 
		int count = dao.countBoardLike(paramMap.get("boardNo"));
		
		return count;
}

📗 BoardServiceImpl

// 좋아요 처리 서비스 
	@Transactional(rollbackFor = Exception.class)
	@Override
	public int like(Map<String, Integer> paramMap) {
		
		int result = 0;
		if(paramMap.get("check") == 0) { // 좋아요 상태가 x
			//BOARD_LIEK 테이블 INSERT
			result = dao.insertBoardLike(paramMap);
			
		}else { //좋아요 상태 o 
			// BOARD_LIKE 테이블 DELETE
			result = dao.delectBoardLike(paramMap);
		}
		
		// SQL 수행 결과 0 -> DB또는 파라미터에 문제가 있다.
		// 1) 에러를 나타내는 임의의 값을 반환 (-1)
		if(result == 0) return -1;
		
		// 현재 게시글의 좋아요 개수 조회 ->나만 좋아요 누르는게 아닌 다른 사람도 눌러! 
		int count = dao.countBoardLike(paramMap.get("boardNo"));
		
		return count;
	}

📗 BoardDAO

/**좋아요 테이블 삽입
 * @param paramMap
 * @return result
 */
public int insertBoardLike(Map<String, Integer> paramMap) {
    return sqlSession.insert("boardMapper.insertBoardLike",paramMap);
}

/**좋아요 테이블 삭제
 * @param paramMap
 * @return result
 */
public int delectBoardLike(Map<String, Integer> paramMap) {
    return sqlSession.delete("boardMapper.delectBoardLike",paramMap);
}

📗 board-Mapper.XML

<!-- 좋아요 테이블 삽입 -->
<insert id="insertBoardLike">
    INSERT INTO BOARD_LIKE VALUES(#{boardNo},#{memberNo})
</insert>

<!-- 좋아요 테이블 삭제 -->
<delete id="delectBoardLike">
    DELETE FROM BOARD_LIKE 
    WHERE BOARD_NO = #{boardNo}
    AND MEMBER_NO = #{memberNo}
</delete>

---

그 다음에 조회수를 해보자! 

 

1) 상세조회 할때 마다 1씩 증가  새로고침하면 계속 증가(어뷰징 가능)

2) 비회원 또는 내가쓴 글 조회 수 증가 x ➡ 새로고침을 할 수 있음

3) 쿠기를 이용한다. ➡ 오늘 내가 본 게시글 번호 저장 

                                      당일 23:59:59초까지 유지 

                                      하루에 한번만 조회수 증가 가능