스프링 좋아요 구현 및 게시판 리스트에 댓글 수 표시(ajax,마이바티스)

게시판이 있는 사이트 라면 꼭 있는 기능중에 하나인 

좋아요 기능을 만들어 보려고 한다. 

 

좋아요는 한 게시글당 하나만 누를 수 있으면 누를 경우 

좋아요 취소로 바뀌게 된다. 

 

시작 해보자 .

---

 

좋아요 및 취소 기능

 

우선 테이블을 만들자.

 

/*
 	create table vegan_like(
	like_no int(30) AUTO_INCREMENT PRIMARY KEY not null,
    board_no int(30),
    user_no int(30),
    likeNum int(5)
);
 */

나는 따로 테이블을 생성했다. 

 

그 후 VO 객체를 하나 만들어 준다. 

 

@Getter
@Setter
@ToString
public class LikeVO {
	private int like_no;
	private int board_no;
	private String user_no;
	private int freeboard_like;

먼저 해야 할 것은 

해당 게시글에 좋아요를 눌렀는가? 안눌렀는가? 부터 알아야 한다. 

 

그래서 매퍼에 쿼리문을 작성했다. 

	<!-- 좋아요 눌럿는지 안눌럿는지 -->
	<select id="findLike" resultType="int">
		select count(*) from vegan_like where board_no = #{board_no} and user_no = #{user_no}
	</select>

이렇게 하면 1또는 0이 오는데 1이 오면 좋아요 취소를 보여주고 0이면 좋아요를 보여주면 된다. 

 

//	상세보기
	@GetMapping("/freeDetail")
	public void freeDetail(int freeboard_no, String user_id,Model model) {
		
		System.out.println("상세보기 페이지");
		model.addAttribute("Detail", service.freeDetail(freeboard_no));
		
		LikeVO like = new LikeVO();
		
		like.setBoard_no(freeboard_no);
		like.setUser_no(user_id);
		
		model.addAttribute("like", service.findLike(freeboard_no, user_id));
		model.addAttribute("getLike", service.getLike(freeboard_no));
		service.hit(freeboard_no);
		
		
		
	}

기존 상세보기에서 likevo 객체를 선언해주고 

getlke로 메퍼에서 오는 값을 모델로 뷰로 던져준다.  

 

이때 유저 아이디와 글 번호를 받게 된다. 

 

var likeval = ${like};
		
		let board_no = ${Detail.freeboard_no};
		let user_no = '${login.user_id}';
		if(likeval > 0){
			console.log(likeval + "좋아요 누름");
			$('.LikeBtn').html("좋아요 취소");
			$('.LikeBtn').click(function() {
				$.ajax({
					type :'post',
					url : '<c:url value ="/FreeBoard/likeDown"/>',
					contentType: 'application/json',
					data : JSON.stringify(
							{
								"board_no" : board_no,
								"user_no" : user_no
							}		
						),
					success : function(data) {
						alert('취소 성공');
					}
				})// 아작스 끝
			})

		}else{
			console.log(likeval + "좋아요 안누름")
			console.log(user_no);
			$('.LikeBtn').click(function() {
				$.ajax({
					type :'post',
					url : '<c:url value ="/FreeBoard/likeUp"/>',
					contentType: 'application/json',
					data : JSON.stringify(
							{
								"board_no" : board_no,
								"user_no" : user_no
							}		
						),
					success : function(data) {
						alert('성공염');
					}
				})// 아작스 끝
			})

일단 모든 자바스크립트를 보여주었지만 위에 언급한대로 

0이 오면 좋아요 버튼을

1이 오면 좋아요 취소 버튼을 보여주고 

그에 따라 동작 하게 하면 된다. 

 

이제 좋아요를 구현해보자 

 

먼저 매퍼 부터 구현하자. 

 

	<insert id="likeUp">
		insert into vegan_like (like_no ,board_no , user_no, freeboard_like)
		values((select * from (select max(like_no)+1 from vegan_like) next), #{board_no},#{user_no},1)
	</insert>

이렇게 인서트로 좋아요 버튼을 누르면 1을 눌러 좋아요를 카운트 업을 시켜준다. 

 

반대로 취소는 

 

	  <delete id="likeDown">
	  	delete from vegan_like where board_no = #{board_no} and user_no = #{user_no} 
	  </delete>

딜리트 이다. 

 

컨트롤러를 보자 

 

	@ResponseBody 
	@PostMapping("/likeUp")
	public void likeup(@RequestBody LikeVO vo) {
		System.out.println("컨트롤러 연결 성공");
		System.out.println(vo.getBoard_no());
		System.out.println(vo.getUser_no());
		service.likeUp(vo.getBoard_no(), vo.getUser_no());
	
	}
	
	@ResponseBody
	@PostMapping("/likeDown")
	public void likeDown(@RequestBody LikeVO vo) {
		System.out.println("좋아요 싫어요!");
		service.likeDown(vo.getBoard_no(), vo.getUser_no());
	}

좋아요 싫어요 모두 같은 코드가서 딱히 설명한 것이 없다. 

 

이렇게 코드를 짜면 대략 좋아요 기능이 완성 되었을 것이다. 

 

좋아요 버튼을 누르면 

 

이렇게 좋아요 카운트가 올라가고 좋아요 취소버튼으로 바뀐다.

그 후 좋아요 취소 버튼을 누르면  

다시 기존대로 변경된다. 

---

댓글 및 조아요 제목에 보이기

 

이제 메인에 좋아요를 뿌려보자 

 

우선 매퍼를 수정해주자 

기존 리스트 매퍼에서 

스칼라 서브쿼리를 이용하여 좋아요 및 댓글 수를 카운트 해보자 

 

     
     <select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">

     	select *,
     	(select count(*) from vegan_comment where bno = v.freeboard_no) as com_cnt,
		(select count(*) from vegan_like where board_no = v.freeboard_no) as like_cnt
     	 from Vegan_freeBoard  v
     	<include refid="search" />
     	order by freeboard_no desc
     	limit #{pagecnt} ,  #{countPerPage}

     	
     </select>

서브 쿼리로 댓글 개수는 com_cnt

좋아요 개수는 like_cnt로 선언 했다.

 

그리고 boardVO객체에 위에 cnt들을 추가 해주자 

	private int freeboard_no;
	private String freeboard_title;
	private String freeboard_writer;
	private String freeboard_content;
	private int freeboard_hit;
	private int freeboard_like;
	private String uploadpath;
	private String fileloca;
	private String filename;
	private String ilerealname; // 파일리얼네임
	private Timestamp freeboard_regDate;
	private int com_cnt;
	private int like_cnt;

추가 됫다. 

 

그후 컨트롤러는 이미 뿌려주고 있으니 생략하지만 코드를 봐보자

 

	@GetMapping("/freeList")
	public String getFree(Model model, PageVO vo) {
		System.out.println("자유 게시판으로 이동");
		System.out.println("검색어" + vo.getKeyword());
		System.out.println("검색조건" + vo.getCondition());
		
		PageCreate pc = new PageCreate();
		pc.setPaging(vo);
		pc.setArticleTotalCount(service.getTotal(vo));
		
		System.out.println(pc);
		vo.setPagecnt((vo.getPageNum()-1) * vo.getCountPerPage());
		model.addAttribute("freeList", service.getFreeBoard(vo));
		model.addAttribute("pc", pc);
		
		return "FreeBoard/freeList";
	}
//	글쓰기페이

이제 freeList라는 이름으로 jsp에 뿌려주면 된다. 

 

        <c:forEach var="vo" items="${freeList}">
          <tr>
          	<th scope="row">${vo.freeboard_no}</th>
            <td><a href="<c:url value='/FreeBoard/freeDetail?freeboard_no=${vo.freeboard_no}&user_id=${login.user_id}'/>">${vo.freeboard_title} (${vo.com_cnt})</a></td>
            <td>${vo.freeboard_writer}</td>
            <td>${vo.freeboard_regDate}</td>
            <td>${vo.freeboard_hit}</td>
            <td>${vo.like_cnt}</td>
          </tr>
         </c:forEach>
        </tbody>

이렇게 완성 되었다. 

 

오늘의 포스팅 끝 !!

 

점점 사이트가 완성 되간다.

이제 이 기능들을 토대로 레시피만 완성 하면 끝난다

 

아마 5월 초까지 완성하지 않을까 싶다.

 

파이팅 

 

https://github.com/MoonSeokHyun