스프링 좋아요 구현 및 게시판 리스트에 댓글 수 표시(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월 초까지 완성하지 않을까 싶다.
파이팅