좋아요 메뉴를 에이잭스로 구현

예제 소스 : https://github.com/kimjonghoon/ajax-like
(에이잭스 파일 업로드 예제에 좋아요 기능 추가)

실행 방법

압축을 풀고 루트 디렉터리로 이동하여 mvn jetty:run 실행하고 http://localhost:8080을 방문한다.

시나리오

페이지가 처음 로드될 때 게시글 테이블과 좋아요 테이블을 조인해서 게시글 객체의 '좋아요' 속성을 세팅한다.
'좋아요' 속성이 있으면 화면에서 게시글 제목 옆에 속이 찬 하트 모양이 보인다.
사용자가 속이 찬 하트를 클릭하면 에이잭스로 좋아요 테이블에서 해당 데이터를 삭제한다.
삭제가 성공하면 화면에서 속이 찬 하트는 속이 빈 하트로 바꾼다.
속이 빈 하트는 사용자가 좋아하지 않음을 의미한다.
사용자가 속이 빈 하트를 클릭하면 에이잭스로 좋아요 테이블에 데이터를 인서트한다.
인서트가 성공하면 화면에서 속이 빈 하트를 속이 찬 하트로 바꾼다.

예제로 구현한 내용

간단하게 구현하기 위해 데이터베이스를 사용하지 않았다.
대신 서블릿 컨텍스트에 좋아요 데이터를 담을 리스트를 생성했다.
리스트를 생성할 때 '1111/'John Doe' 데이터를 만들어 담았다.
따라서 처음 페이지가 로드될 때 속이 찬 하트가 보인다.