点赞功能的简单实现
主要是讲解一下点赞功能实现的思路。
- 首先实现页面端js控制点赞数的增减,这一步很简单。按钮点击事件绑定,控制点赞数的增减。
- 在数据库中设计一个表(praise_tab),表的列(文章点赞,评论点赞)
id INT PRIMARY KEY AUTO_INCREMENT,
userid VARCHAR(20) NOT NULL,
articleid INT DEFAULT 0,
commentid INT DEFAULT 0
主要是,用户主键,文章主键,评论主键,形成一个记录,当用户点赞后插入一条数据。文章id,评论id默认为0,区分是对文章点赞还是对评论点赞。 - ajax实现对后台提交数据与返回判断值。点击按钮触发priase函数,ajax向后台提交,userId,articleId,commentId,其中给文章点赞,则commentId为0,反之同样如此。
以下是简单实现代码
js: //praiseN,pra为span的id
function priase(articleid,commentid,praiseN,pra){
var type = "json";
var praiseNum = parseInt(document.getElementById(praiseN).innerHTML);
$.ajax({
url:"${pageContext.request.contextPath}/RecivePraiseServlet?sendType=post&dataType="+type,
data:{"anthorid":'${sessionScope.user.userId}',"articleid":articleid,"commentid":commentid},
type: "post",
dataType:type,
success:function(data){
if("json" == type){
if(data != undefined && data != null){
var flag = data.praiseflag; // 1已点过赞
if(flag == 0){
document.getElementById(praiseN).innerHTML = praiseNum + 1;
$('#'+pra).css("color","red");
}else if(flag == 1){
alert("你已经点过赞了!");
$('#'+pra).css("color","red");
}
}
}
}
});
}
body:
<a href="javascript:void(0)" onclick="priase(${Article.aid },0,'praiseOne','praiseTwo')"><span id="praiseTwo">赞</span></a>
<span id="praiseOne" >${Article.articlePraiseNum }</span>
servlet:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
StringBuffer sb = new StringBuffer("");
PraiseService praises = new PraiseServiceImpl();
ArticleService ars = new ArticleServiceImpl();
CommentService cms = new CommentServiceImpl();
request.setCharacterEncoding("utf-8");
String userId = request.getParameter("anthorid");
String articleId = request.getParameter("articleid");
String commentId = request.getParameter("commentid");
String dataType = request.getParameter("dataType");
String sendType = request.getParameter("sendType");
if ("json".equals(dataType)){
if(articleId != null && !articleId.equals("0")){
//查找是否有对文章点赞记录
Praise pr = praises.findArticlePraise(Integer.parseInt(articleId), userId);
if(pr != null){
sb.append("{");
sb.append("\"praiseflag\":1");
sb.append("}");
}else{
ars.addPraiseNum(Integer.parseInt(articleId));
praises.addArticlePriase(Integer.parseInt(articleId), userId);
sb.append("{");
sb.append("\"praiseflag\":0");
sb.append("}");
}
}
if(commentId != null && !commentId.equals("0")){
//查找是否有对评论点赞记录
Praise pr = praises.findCommentPraise(Integer.parseInt(commentId), userId);
if(pr != null){
sb.append("{");
sb.append("\"praiseflag\":1");
sb.append("}");
}else{
cms.addCommentNum(Integer.parseInt(commentId));
praises.addCommentPraise(Integer.parseInt(commentId), userId);
sb.append("{");
sb.append("\"praiseflag\":0");
sb.append("}");
}
}
response.setContentType("text/html;charset=utf-8");
}
PrintWriter out = response.getWriter();
out.println(sb.toString());
out.flush();
out.close();
}
代码比较简单,主要是思路很重要!