@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;
<select id="adminUserList2"
resultMap="UserInfo">
select u.*,
(select count(*) from job_board where board_writer = u.user_id) as board_cnt,
(select count(*) from job_comment where com_writer = u.user_id) as comment_cnt
from user_info u
order by u.user_no desc
</select>
유저의 모든것을 조회하면서
게시물수와 댓글 갯수를 as __cnt 라는것으로
끌고 온다.
이렇게 끌고오면 게시글과 댓글수가 끌고와지는데
꼭 VO에 추가해주어야한다.
그래야 자료를 활용할 수있다.
public class UserVO {
private int userNo;
private String userId;
private String userName;
private String userPw;
private String userPh;
private int userAdr1;
private String userAdr2;
private String userAdr3;
private String userAdr4;
private int userStatus;
private String userEmail;
private String userCompany;
private int adminType;
private int userPass;
private Timestamp userDate;
private int boardCnt;
private int commentCnt;
<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 최대 업로드 가능한 바이트 크기(바이트 단위), -1은 제한이 없음을 의미 -->
<beans:property name="maxUploadSize" value="10485760" />
<!-- 업로드 요청을 변환할 때 사용할 문자 인코딩 방식 -->
<beans:property name="defaultEncoding" value="utf-8" />
</beans:bean>
//사용자가 선택한 페이지 정보를 담을 변수.
private int pageNum;
private int countPerPage;
private int pagecnt;
public int getPageStart() {
return (pageNum-1)*countPerPage;
}
//검색에 필요한 데이터를 변수로 선언.
private String keyword;
private String condition;
public PageVO() {
this.pageNum = 1;
this.countPerPage = 10;
}
이제 위에 것으로 매퍼를 바꿔줄 것이다.
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select * from Vegan_freeBoard
<include refid="search" />
order by freeboard_no desc
limit #{pagecnt} , #{countPerPage}
@Getter
@Setter
@ToString
public class PageVO {
//사용자가 선택한 페이지 정보를 담을 변수.
private int pageNum;
private int countPerPage;
//검색에 필요한 데이터를 변수로 선언.
private String keyword;
private String condition;
public PageVO() {
this.pageNum = 1;
this.countPerPage = 10;
}
}
앞서 설명한거와 같이 사용자가 선택한 페이지 정보를 담고
검색은 키워드와 컨디션으로 통일한다.
그리고 생성자를 하나 꺼내 맨 처음 페이지 1과 페이지에 보여줄 게시글 수 10개를 선택해준다.
<sql id="search">
<if test="condition == 'freeboard_title'">
WHERE freeboard_title LIKE CONCAT('%',#{keyword},'%')
</if>
<if test="condition == 'freeboard_content'">
WHERE freeboard_content LIKE CONCAT('%',#{keyword},'%')
</if>
<if test="condition == 'freeboard_writer'">
WHERE freeboard_writer LIKE CONCAT('%',#{keyword},'%')
</if>
</sql>
<!-- 토탈 -->
<select id="getTotal" resultType="int">
SELECT COUNT(*)
FROM Vegan_freeBoard
<include refid="search" />
</select>
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select * from Vegan_freeBoard
<include refid="search" />
order by freeboard_no desc
limit #{pageNum} , #{countPerPage}
</select>
토탈을 구해주고 리밋으로 페이지넘과 페이지 수를 전달해준다.
컨트롤러 부분
@GetMapping("/freeList")
public String getFree(Model model, PageVO vo) {
PageCreate pc = new PageCreate();
pc.setPaging(vo);
pc.setArticleTotalCount(service.getTotal(vo));
System.out.println(pc);
model.addAttribute("freeList", service.getFreeBoard(vo));
model.addAttribute("pc", pc);
return "FreeBoard/freeList";
}
