[스프링] 댓글에서 추천/비추천 기능 구현 방법

 

 

오늘은 댓글에서 추천/비추천 기능을 정리해보려 합니다.

JQUERY를 이용하면 그다지 어렵지 않게 할 수 있는 것 같습니다.

 

---

 

구현 화면입니다.

 

 

 

 

HTML

버튼을 만들어주고 ONCLICK에 함수를 적용합니다.

이때, 각각의 값을 인식할 수 있도록 함수 가로에 THIS을 넣어줍니다.

 

 

<td>
    <button type="button" id="likeBtn" class="btn btn-info likeBtn" onclick="updateLike(this);">
        <c:out value="${result.faqrp_likeCnt}"/>                                                
    </button>
</td>
<td>
    <button type="button" id="hateBtn" class="btn btn-secondary hateBtn" onclick="updateHate(this);">
        <c:out value="${result.faqrp_hateCnt}"/>                                                
    </button>
</td>

 

JQEURY

여기서는 변수를 생성하고 값을 넣어줘서

버튼 부분에서 +1을 해주는게 핵심입니다. (lcnt = parseInt(lcnt)+1;)

그리고 Object를 통해서 ajax의 data에 넣어줍니다.

추천 / 비추천 따로 함수를 작성합니다.

 

 

var lcnt = '<c:out value="${resultList[0].faqrp_likeCnt }"/>';
var hcnt = '<c:out value="${resultList[0].faqrp_hateCnt }"/>';
var faq_idx = "${searchVO.faq_idx }";
var faqrp_idx = "${resultList[0].faqrp_idx }";
var me_id = "${resultList[0].me_id }";
var alreadyLikeClick = false;
var alreadyHateClick = false;
 
function updateLike(ths){
        
    var idx = $("button.likeBtn").index(ths); 
    faqrp_idx = $("input[name='faqrp_idx']").eq(idx).val(); 
    
 
    if(!alreadyLikeClick){
        lcnt = parseInt(lcnt)+1;
        alreadyLikeClick = true;
        alreadyHateClick = true;
    }
    
    
    var submitObj = new Object();
    submitObj.faq_idx = faq_idx;
    submitObj.faqrp_idx = faqrp_idx;
    submitObj.me_id = me_id;
    submitObj.faqrp_likeCnt= lcnt;
    
    
    $.ajax({ 
            url: path+"/onlinecounsel/csfaq/likeCnt.do", 
            type: "POST", 
            contentType: "application/json;charset=UTF-8",
            data:JSON.stringify(submitObj),
            dataType : "json",
            async: false,
           })
          .done(function(resMap) {
              alert("추천하였습니다.");
              location.reload();
           }) 
           .fail(function(e) {  
               alert("한개의 글에 한번만 클릭이 가능합니다.");
           }) 
           .always(function() { 
           }); 
    
}
    
function updateHate(ths){
    var idx = $("button.hateBtn").index(ths); 
    faqrp_idx = $("input[name='faqrp_idx']").eq(idx).val();
    if(!alreadyHateClick){
        hcnt = parseInt(hcnt)+1;
        alreadyLikeClick = true;
        alreadyHateClick = true;
    }
    
    var submitObj = new Object();
    submitObj.faq_idx = faq_idx;
    submitObj.faqrp_idx = faqrp_idx;
    submitObj.me_id = me_id;
    submitObj.faqrp_hateCnt=  hcnt;
    
    $.ajax({ 
            url: path+"/onlinecounsel/csfaq/hateCnt.do", 
            type: "POST", 
            contentType: "application/json;charset=UTF-8",
            data:JSON.stringify(submitObj),
            dataType : "json",
            async: false,
           })
          .done(function(resMap) {
              alert("비추천하였습니다.");
              location.reload();
           }) 
           .fail(function(e) {  
               alert("한개의 글에 한번만 클릭이 가능합니다.");
           }) 
           .always(function() { 
           }); 
}

 

CONTROLLER

이곳에서는 JSON형태로 추천부분을 1 증가시키도록 합니다.

댓글의 인덱스인 faqrp_idx를 가지고 갑니다.

 

 

@RequestMapping(value = "/onlinecounsel/csfaq/likeCnt.do", method = RequestMethod.POST)
@ResponseBody
public String likeCnt(
        @RequestBody String filterJSON,
        HttpServletResponse response,
        HttpServletRequest request,
        ModelMap model ) throws Exception {
    
    LoginVO loginVO = loginService.getLoginInfo();
    
    JSONObject resMap = new JSONObject();
        
    try{
        ObjectMapper mapper = new ObjectMapper();
        
        tbl_counsel_faq_replyVO searchVO = (tbl_counsel_faq_replyVO)mapper.readValue(filterJSON,new TypeReference<tbl_counsel_faq_replyVO>(){ });
            
        onlineCounselService.updateLike(searchVO.getFaqrp_idx());
        
        }catch(Exception e){
        System.out.println(e.toString());
        
    }
    
    response.setContentType("text/html; charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.print(resMap);
    
    return null;
}
 
 
@RequestMapping(value = "/onlinecounsel/csfaq/hateCnt.do", method = RequestMethod.POST)
@ResponseBody
public String hateCnt(
        @RequestBody String filterJSON,
        HttpServletResponse response,
        ModelMap model ) throws Exception {
    
    LoginVO loginVO = loginService.getLoginInfo();
    
    JSONObject resMap = new JSONObject();
    
    try{
        ObjectMapper mapper = new ObjectMapper();
        tbl_counsel_faq_replyVO searchVO = (tbl_counsel_faq_replyVO)mapper.readValue(filterJSON,new TypeReference<tbl_counsel_faq_replyVO>(){ });
        
        onlineCounselService.updateHate(searchVO.getFaqrp_idx());
        
    }catch(Exception e){
        System.out.println(e.toString());
        
    }
    
    response.setContentType("text/html; charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.print(resMap);
    
    return null;
}

 

 

 

SERVICE

 

public int updateLike(int faqrp_idx) throws Exception;
 
public int updateHate(int faqrp_idx) throws Exception;

 

 

SERVICEIMPL

 

 

@Override
public int updateLike(int faqrp_idx) throws Exception {
    return dao.updateLike(faqrp_idx);
}
 
@Override
public int updateHate(int faqrp_idx) throws Exception {
    return dao.updateHate(faqrp_idx);
};

 

DAO

 

public int updateLike(int faqrq_idx) {
    return update("updateLike", faqrq_idx);
}
 
public int updateHate(int faqrq_idx) {
    return update("updateHate", faqrq_idx);
}

 

 

XML

 

<update id="updateLike" parameterType="int">
    update tbl_counsel_faq_reply set
        faqrp_likeCnt = faqrp_likeCnt +1
    where
        faqrp_idx =#{faqrp_idx}
</update>
 
<update id="updateHate" parameterType="int">
    update tbl_counsel_faq_reply set
        faqrp_hateCnt = faqrp_hateCnt +1
    where
        faqrp_idx =#{faqrp_idx}
</update>