리뷰 게시판의 좋아요 기능을 구현해 보았다.
| loveno | Number | pk |
| reviewno | Number | fk |
| id | Varchar2 | fk |
| loveyn | Number | nn, default=0 |
1. 하트 default는 빈하트
2. 현재 로그인 된 사용자가 빈하트(loveyn=0)를 누르면 채워진 하트(loveyn=1)가 되고, 채워진 하트를 누르면 빈하트가 된다.(update)
2-1. 단, 해당 게시글의 하트를 한번도 누른적 없는 사용자는 처음 한번만 정보가 새로 insert된다
3. 게시글마다 하트의 총합을 적어준다.( reviewno마다 loveyn=1인 count(loveno) )
3-1. 사용자가 하트를 누를때마다 총합숫자가 같이 변경되어야 함.
1. 하트 default는 빈하트
//유저의 하트 가져오기
function showlove(){
var love = {
reviewno: reviewno,
id: id
};
loveService.getList(love,
function(list){
console.log(list)
var str="";
//좋아요를 한번이상 누른적이 있는 유저일때
if(list){
//빈하트나 채워진하트
if(list.loveyn == 1){
str += "<img class='loveBtn' data-loveyn='"+list.loveyn+"' data-loveno='"+list.loveno+"' style='width:30px; height:30px' src='/resources/image/love_full.png'>";
}else{
str += "<img class='loveBtn' data-loveyn='"+list.loveyn+"' data-loveno='"+list.loveno+"' style='width:30px; height:30px' src='/resources/image/love.png'>";
}
//누른적 없으면 빈하트
}else{
str += "<img class='loveBtn' style='width:30px; height:30px' src='/resources/image/love.png'>";
}
loveDiv.html(str);
});//end function
}//end loveList
2. 현재 로그인 된 사용자가 빈하트(loveyn=0)를 누르면 채워진 하트(loveyn=1)가 되고, 채워진 하트를 누르면 빈하트가 된다.(update)
2-1. 단, 해당 게시글의 하트를 한번도 누른적 없는 사용자는 처음 한번은 정보가 새로 insert된다
//하트 누르면
$('.love-body').on("click", ".loveBtn", function(e){
e.preventDefault();
var loveyn = $(this).data("loveyn");
var loveno = $(this).data("loveno");
console.log("============"+loveyn+", "+id+", "+loveno+", "+reviewno)
//아이디 없을 때(세션에 로그인 정보가 없을 땐 'x'로 되도록 선언해줬음)
if(id == "x"){
alert("로그인이 필요합니다.");
//누른 적 있을 때(update)
}else if(loveno){
//하트가 채워져있으면
if(loveyn == 1){
var love = {
reviewno: reviewno,
id : id,
loveno: loveno,
loveyn : loveyn
};
loveService.love(love, function(result){
showlove();
lovecount();
})
//비었으면
}else{
var love = {
reviewno: reviewno,
id : id,
loveno: loveno,
loveyn : loveyn
};
loveService.love(love, function(result){
showlove();
lovecount();
})
}
//처음 눌렀을 때(insert)
}else{
var love = {
reviewno: reviewno,
id : id,
loveno: loveno,
loveyn : loveyn
};
loveService.add(love, function(result){
showlove();
lovecount();
})
loveyn=1;
}
});
3. 게시글마다 하트의 총합을 적어준다.
//하트총 개수 가져오기
function lovecount(){
loveService.getCount({reviewno:reviewno},
function(count){
console.log(count)
var str="";
str += "<span>"+count+"</span>"
countDiv.html(str);
});//end function
}//end
+연결해준 js
var loveService = (function(){
//정보
function getList(love, callback, error){
//원하는 해당자료의 json데이터를 얻기위하여 호출
$.getJSON("/loves/"+love.reviewno+"/"+love.id,
function(data){
if(callback){
callback(data);
}
}).fail(function(xhr, status, err){
if(error){
error();
}
});
}
//하트 총 개수
function getCount(param, callback, error){
var reviewno = param.reviewno;
//원하는 해당자료의 json데이터를 얻기위하여 호출
$.getJSON("/loves/love_count/"+reviewno,
function(data){
if(callback){ //값이 오면
callback(data);
}
}).fail(function(xhr, status, err){
if(error){
error();
}
});
}
//첫 좋아요
function add(love, callback, error) {
$.ajax({
type : 'post', //전송 방식
url : '/loves/new', //전송 페이지(action)
data : JSON.stringify(love), //넘길 파라미터(전송할 데이터)//reply를 JSON 문자열로 변환
contentType : "application/json; charset=utf-8", //보내는 데이터의 타입
success : function(result, status, xhr) { //전송 성공시 실행할 코드
if (callback) { //만약에 콜백함수가 값을 주면
callback(result); //실행해
}
},
error : function(xhr, status, er) { //실패시 실행할 코드
if (error) {
error(er);
}
}
})
}
//좋아요
function love(love, callback, error){
$.ajax({
type : 'patch',
url : '/loves/'+ love.reviewno +'/'+love.id+'/'+love.loveno+"/"+love.loveyn,
data : JSON.stringify(love),
contentType : "application/json; charest=utf-8",
success : function(result, status, xhr){
if(callback){
callback(result);
}
},
error : function(xhr, status, er){
if(error){
error(er);
}
}
});
}
return {
getList : getList,
getCount : getCount,
add : add,
love : love
};
})();
+Controller
@RequestMapping("/loves/")
@RestController
@Log4j
@AllArgsConstructor
public class LoveController {
private LoveService service;
// 정보
@GetMapping(value = "/{reviewno}/{id}", produces = { MediaType.APPLICATION_XML_VALUE,
MediaType.APPLICATION_JSON_VALUE })
public ResponseEntity<LoveVO> getList(@PathVariable("id") String id, @PathVariable("reviewno") Long reviewno) {
log.info("get List reviewno: " + reviewno);
log.info("id:" + id);
return new ResponseEntity<>(service.getList(id, reviewno), HttpStatus.OK);
}
// 하트 총 개수
@GetMapping(value = "love_count/{reviewno}", produces = { MediaType.APPLICATION_XML_VALUE, MediaType.APPLICATION_JSON_VALUE })
public ResponseEntity<Integer> get(@PathVariable("reviewno") Long reviewno) {
log.info("get : " + reviewno);
return new ResponseEntity<>(service.loveCount(reviewno), HttpStatus.OK);
}
// 첫좋아요
@PostMapping(value = "/new", consumes = "application/json", produces = { MediaType.TEXT_PLAIN_VALUE })
// JSON데이터를 ReplyVO타입으로 변환하도록 함(JSON->자바객체)
public ResponseEntity<String> create(@RequestBody LoveVO vo) {
log.info("LoveVO: " + vo);
// insert성공 했으면 성공 뿌려주고, 아니면 에러 뿌려줘
return service.loveSet(vo) == 1 ? new ResponseEntity<>("success", HttpStatus.OK)
: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
// 좋아요
@RequestMapping(method = {RequestMethod.PATCH },
value = "/{reviewno}/{id}/{loveno}/{loveyn}", consumes = "application/json", produces = {
MediaType.TEXT_PLAIN_VALUE })
// 실제 데이터는 JSON포맷이므로 변환하여 처리
public ResponseEntity<String> loveUp(@PathVariable("loveno") Long loveno, @PathVariable("loveyn") Long loveyn) {
log.info("loveno: " + loveno);
log.info("loveyn : " + loveyn);
if (loveyn == 0) {
log.info("UP: " + loveyn);
return service.loveUp(loveno) == 1 ? new ResponseEntity<>("success", HttpStatus.OK)
: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
} else {
log.info("DOWN: " + loveyn);
return service.loveDown(loveno) == 1 ? new ResponseEntity<>("success", HttpStatus.OK)
: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
'Git · 코드 기록' 카테고리의 다른 글
| Git 브랜치 (모두의 깃&깃허브_강민철 지음) (0) | 2022.11.13 |
|---|---|
| Git 설치 버전 릴리스 스태시 (모두의 깃&깃허브_강민철 지음) (0) | 2022.11.13 |
| Spring 게시판 댓글 기능 구현 (0) | 2022.11.07 |
| 파일 업로드 처리 (0) | 2022.11.03 |
| Spring 페이징처리하기 (0) | 2022.10.27 |