java_web论坛项目4(评论点赞的功能实现)
这两个功能实现花费了有一天事件吧
我把我的难点分享一下吧
先说评论功能
评论是你点击以后可以发表你自己的话 然后添加到数据里面
但是我的前端页面 评论和回复使用的是同一个模态框
所以评论和回复的一个区别就是是否有被回复人的id,以及如何拿到被回复人的id
我使用的是jquery控制的跳转 直接把信息拼接到链接里面了
//如果没有登录 直接返回登录界面
if(${user.userId==null}){
window.location.href="LoginServlet?act=useLogin";
}else{
//如果点击回复后 设置标题的字为 回复:${userName}
if(${userId1!=null }){
var userName = "${userName1}";
$("#title").val("回复:"+userName);
$("#openReply1").trigger("click");//打开回复框
}
//如果点击评论的话 设置标题的字为 评论
$("#openReply").click(function(){
$("#title").val("评论");
})
//如果点击回复框的确定 执行以下操作
$("#button").click(function(){
var val = document.getElementById("val").value;
var title = document.getElementById("title").value;
//评论没有被回复人id
if(title=="评论"){
window.location.href="campusInform?val="+val+"&act=addReply&userId="+${user.userId}+"&cId="+${cId};
}else{
//没必要进行判断 但是如果不判断 走评论的话 万一${userId1}==null 下面url会报错 jquery 无法正常运行
var userId1 = "${userId1}";
if(${userId1== null}){
userId1 = -1;
}
window.location.href="campusInform?val="+val+"&act=addReply&userId="+${user.userId}+"&cId="+${cId}+"&userId1="+userId1;
}
})
}
这些只是被回复人到id信息后的操作,那么怎么拿到被回复人的id呢?我最终选择,让点击回复后先跳到servlet然后处理的到被回复人id,在请求回来,直接在请求回来,打开模态框,并且把被回复人的id传回来如果没有id就是评论,有id就把id拼接到链接里面,请求过去,后台根据有没有id区分是否是平论还是回复
HttpSession session = request.getSession();
String cId = request.getParameter("cId");
String userId = "0";
User user = (User) session.getAttribute("user");
if(user!=null){
userId = user.getUserId();
}
CInfoServiceImp csi = new CInfoServiceImp();
List cReplyList = csi.searchReply(cId);//得到回复的内容
List pictureList = csi.getPicturePath();//得到所有的图片地址
CInfo singleCInfo = csi.singleSearch(cId,userId);//得到文章
//判断 如果点击回复按钮则把userId和name传送回主界面 主界面通过jquery控制显示回复框 并设置userId和name
String userId1 = request.getParameter("userId1");
String userName1 = request.getParameter("userName1");
if(userId1!=null){
request.setAttribute("userId1", userId1);
request.setAttribute("userName1", userName1);
}
request.setAttribute("pictureList", pictureList);
request.setAttribute("cId", cId);
request.setAttribute("cReplyList", cReplyList);
request.setAttribute("cInfo", singleCInfo);
request.getRequestDispatcher("campusReply.jsp").forward(request, response);
剩余的就是插入数据库的操作,如果展示回复的话查询数据库就可以了
点赞我是用ajax写的
下面放一下ajax代码
//点击点赞按钮后运行
function prise(c){
var articleId = c.firstElementChild.value;
var userId = "${user.userId}";
if(${user.userName!=null}){
$.ajax({
url:"campusInform?act=clickPrise",//请求地址
data:{"articleId":articleId,"userId":userId}, //请求的参数 {username: 'name', password: '123456'}
type:"post",//请求的类型
dataType:"json",//接受的数据类型 text html xml json
//回调函数
success:function(result){
if(result==1){
// class="btn btn-default btn-sm" class="btn btn-info btn-sm"
$(c).removeClass("btn btn-default btn-sm").addClass('btn btn-info btn-sm');
//得到点赞数 并且加一
var priseConetext = c.innerText;
var priseCount = parseInt(priseConetext.substring(2));
var val = priseCount+1;
$(c).html("<input type='hidden' value='"+articleId+"'/><span class='glyphicon glyphicon-thumbs-up'></span>点赞"+val);
}else{
$(c).removeClass("btn btn-info btn-sm").addClass('btn btn-default btn-sm');
//得到点赞数 并且减一
var priseConetext = c.innerText;
var priseCount = parseInt(priseConetext.substring(2));
var val = priseCount-1;
$(c).html("<input type='hidden' value='"+articleId+"'/><span class='glyphicon glyphicon-thumbs-up'></span>点赞"+val);
}
},
error:function(){
alert("系统繁忙,点赞失败")
}
})
}else{
window.location.href="LoginServlet?act=useLogin";
}
}
后台也就是几个数据库联合的,要不是增加,要不是删除。