开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

评价和点赞功能开发

评价功能

1.定义评价接口

public Evaluation evalute(Long memberId,Long bookId,Long score,String content);

代码说明: 评价接口需要四个参数，分别为用户ID，图书ID，分数，评论内容

2.实现评价接口方法

@Override
public Evaluation evalute(Long memberId, Long bookId, Long score, String content) {
    Evaluation evaluation = new Evaluation();
    evaluation.setMemberId(memberId);
    evaluation.setBookId(bookId);
    evaluation.setScore(score);
    evaluation.setContent(content);
    evaluation.setCreateTime(new Date());
    evaluation.setState("enable");
    evaluationMapper.insert(evaluation);
    return evaluation;
}

3.控制器新增方法

@PostMapping("evalute")
@ResponseBody
public Map evalute(Long memberId,Long bookId,Long score,String content){
    Map result = new HashMap<>();
    try {
        memberService.evalute(memberId,bookId,score,content);
        result.put("code","0");
        result.put("msg","success");
    }catch (BusinessException ex){
        result.put("code",ex.getCode());
        result.put("msg",ex.getMsg());
    }
    return  result;
}

4.图书详情页

$("#btnSubmit").click(function () {
    var score = $("#score").raty("score")
    var content = $("#content").val();
    if(score==0 || $.trim(content)==""){
        console.log("score:"+score);
        console.log("content:"+content);
        alert("数据不能为空")
        return false;
    }
    $.post("/evalute",{
        score:score,
        content:content,
        bookId: ${book.bookId},
        memberId: ${loginMember.memberId}
    },function (json){
        if(json.code==0){
            window.location.reload();
        }
    })

})

代码说明:

• $("#score").raty("score"):获取分数
• content = $("#content").val():获取评价内容
• $.post("/evalute":调用评价接口
• window.location.reload():刷新当前页面

5.重启项目

点赞功能

1.定义点赞接口

2.实现enjoy接口

@Override
public Evaluation enjoy(Long evaluationId) {
    Evaluation evaluation = new Evaluation();
   evaluation =  evaluationMapper.selectById(evaluationId);
   evaluation.setEnjoy(evaluation.getEnjoy()+1);
   evaluationMapper.updateById(evaluation);
    return evaluation;
}

3.控制器定义enjoy接口

@PostMapping("enjoy")
@ResponseBody
public Map enjoy(Long evaluationId){
    Map result = new HashMap<>();
    try {
      Evaluation eva =  memberService.enjoy(evaluationId);
        result.put("code","0");
        result.put("msg","success");
        result.put("evaluation",eva);
    }catch (BusinessException ex){
        result.put("code",ex.getCode());
        result.put("msg",ex.getMsg());
    }
    return  result;
}

代码说明:

• result.put("evaluation",eva):把点赞接口返回值返回给前端，用来显示新的点赞数

4.前端接口

$("*[data-evaluation-id]").click(function () {
    var evaluationId = $(this).data("evaluation-id");
    $.post("/enjoy",{evaluationId:evaluationId},function (json) {
        if(json.code==0){
            $("*[data-evaluation-id='"+evaluationId+"'] span").text(json.evaluation.enjoy);
        }
    })
})

代码说明:

• $("*[data-evaluation-id]").click:判断点赞接口点击事件
• $("*[data-evaluation-id='"+evaluationId+"'] span").text(json.evaluation.enjoy):点赞数量重新赋值