[팀플 - Travel Jeju] 18th course - Board Like Function

[ 오늘 할 일 ]

• 게시판 좋아요 기능 구현  

[ 전체적인 흐름 ]

• 맛집 게시판 Jsp에서 ajax로 좋아요를 카운트할 Id값을 컨트롤러로 전송 
• 컨트롤러에서 ibatis문법을 이용하여 클릭 한 카드의 좋아요 데이터를 update 함
• update 한 카드의 정보를 select문으로 가져온 후 jsp로 다시 전송 
• jsp에서 넘어온 데이터를 innerHTML로 숫자를 카운트해준다 

---

결과물

맨 처음으로 jsp에서는 ajax의 GET 방식으로 좋아요가 눌린 카드의 spotId를 

파라미터 값으로 RestController로 넘겨준다 

RestController에서는 넘겨받은 id값을 ibatis 매개변수로 사용하여 

addLike sql문을 실행한다 

id값이 일치하는 DB 데이터의 좋아요 숫자를 +1 증가시켜서 update를 시켜주고 

이후에 다시 한번 id 값을 이용하여 그 카드의 정보를 가져온 후, dto에 실어 return 시켜준다 

sql문법은 addLike와 getLike가 있는데 

addLike는 DB정보를 업데이트시켜주는 목적이고, 

getLike는 업데이트 한 칼럼의 정보들을 가져오는 목적이다 

 

다시 Jsp로 돌아와서,

전달받은 json 형식의 데이터를 if조건문을 이용하여 

어떤 카드를 수정할지 판별한다 

 

그리고 그 후에, 데이터를 JSON 형식으로 변환하고 그 값이 Object이기 때문에

Object.values를 이용하여 원하는 값만 추출하는데,

좋아요 숫자는 8번째에 위치하기 때문에 Object.values(JSON.parse(xhttp.responseText))[8]로 작성하였다 

 

기존 다른 조원이 아이콘까지 다 감싼 형태로 구현하였어서 

수정된 좋아요 숫자와 아이콘을 같이 innerHTML로 변경해주었다