好的,那么在上一节中呢,评论功能的后台已经写好了,这一节,先把这部分后台代码和前台对接一下。
#1.评论功能实现
我们修改一下保存评论按钮的点击事件,用jQuery的方式获取文本框中的值,然后通过ajax方法,把数据传递到CommentController.jsp,jsp就是Servlet,这样写就和传递到Servlet是差不多的意思。
detail.jsp
代码:
$(".button").eq(0).on('click',function(){ var txt = $('#commenttxt').val(); $.post("${basePath}/controller/CommentController.jsp",{txt : txt},function(data){ data = data.trim(); if(data == '-1'){ alert('请先登录!'); } }); });
我们采用{},也就是JSON的方式,将数据包裹一下,传递过去。
在JSP页面是这样接收的
<%@page import="bean.User"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% //因为评论是需要登陆的,如果没有登陆我们就调整到登陆页面去 User user = (User)session.getAttribute("user"); if(user==null){//代表用户没有登陆 out.print("-1"); return; } String txt = request.getParameter("txt").toString(); System.out.println(txt); %>
它只是一种写法而已,如果在Servlet中,你是不是还要在doGet或者doPost方法中传递一个 HttpServletRequest request 参数呢?而当我们采用JSP的话呢,就不需要这么做了,这就是九大隐式对象的好处。
我们通过
request.getParameter("txt").toString();
的方式,先获取到前台传过来的评论信息,并且用一个String数据类型的txt ,保存下来。
接着,先不急着往下写,你可以先打印出来看看,看看它能不能取到,如果这都不能取到,就说明某个地方已经错了,再写下去也没有意义。
我们随便写一个什么东西,点击保存评论。
控制台成功打印出来了,这说明代码没问题。
OK,继续,接下来,我们就需要把这个信息保存到数据库里了。
在调用CommentService之前,我们先看一下要保存哪些东西。(这些信息去CommentService里面看,之前写过一个saveComment方法)
保存信息的清单:
id,user_id,content,article_id,create_time,is_delete
id自然不用多说,我们采用UUID就行了。user_id是用户ID,就是当前登录的那个人。content的话,就是评论的内容,也就是我们刚刚取到的txt。article_id是文章的id,到时候加载评论的时候,肯定就是通过这个字段来查找的。create_time是创建日期,is_delete为是否删除,我们默认给他一个0,表示不删除。
好的,这些东西确认好了,就开始写代码吧。
通过以上的分析,我们是不是还要把文章ID从前台传过来呢?好的,说干就干。
回到detail.jsp,给点击事件中的JSON对象添加一个属性,把文章ID拿到:
$(".button").eq(0).on('click',function(){ var txt = $('#commenttxt').val(); $.post("${basePath}/controller/CommentController.jsp",{txt : txt , articleId : "${article.id}"},function(data){ data = data.trim(); if(data == '-1'){ alert('请先登录!'); } }); });
修改后的CommentController
<%@page import="bean.User"%> <%@page import="bean.Comment"%> <%@page import="service.CommentService"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% User user = (User)session.getAttribute("user"); if(user==null){//代表用户没有登陆 out.print("-1"); return; } String txt = request.getParameter("txt").toString(); String articleId = request.getParameter("articleId").toString(); CommentService commentService = new CommentService(); Comment comment = new Comment(); comment.setId(UUID.randomUUID().toString()); comment.setUserId(user.getId()); comment.setArticleId(articleId); comment.setContent(txt); commentService.saveComment(comment); %>
测试
:
哎哟不错哦~~ 貌似木有问题。
再看看数据库。
1
哎呀呀,真的有了!
那么这是不是就说明,评论功能到目前都是正确的?
接下来,我们是不是还应该给用户一点反馈表示评论已经成功保存了?
我们在CommentController里面,最后再加上返回一个标志位 1 即可。
out.print(“1”);
然后前台判断,如果返回的是1,那么就提示“保存成功!”
$(".button").eq(0).on('click',function(){ var txt = $('#commenttxt').val(); $.post("${basePath}/controller/CommentController.jsp",{txt : txt , articleId : "${article.id}"},function(data){ data = data.trim(); if(data == '-1'){ alert('请先登录!'); }else if(data == '1'){ alert('保存成功!'); } }); });
这样不就好了吗?O(∩_∩)O~~
#2.评论加载
评论保存已经没问题了,接下来就是加载。
回到detail.jsp页面,第一步,是不是要导包啊?
<%@ page language="java" import="service.CommentService"%>
第二步,就是获取CommentService的实例对象。然后把我们需要的评论都查询出来。(因为之前查询文章内容的时候,已经获取到id了,所以这里不再获取)
<% CommentService commentService = new CommentService(); List<Map<String,Object>> list = commentService.getCommentsByArticleId(id); pageContext.setAttribute("comments", list); System.out.println(list); %>
测试,刷新一下页面,要是不起作用的话呢,就重启一下tomcat。
控制台成功打印出了信息:
[{content=OK, username=zhangsan}, {content=很不错的文章,赞一个!, username=zhangsan}]
接下来,就是如何把这些数据贴到页面上的问题了。
怎么贴呢,是不是还要循环一下?
<div class='mb64' class="comment_list"> <c:forEach items="${comments}" var="comment"> <div class="comment_infor clearfix"> <div style='border-bottom:1px solid #ccc' class="comment_word"> <p style='border-bottom:20px solid #fff'>${comment.username}说:</p> <p class='mb32'>${comment.content}</p> </div> </div> </c:forEach> </div>
这样就行了,刷新:
样式稍微有点问题,稍微调一下:
.comment_word { margin-top:16px; }
这样好些了。
最后,当提示保存成功的时候,顺便把页面刷新一下,这样方便我们直接看到效果:
本文结束…
最近事情太多,一方面项目工期加紧,空余时间越来越少。另一方面,我自己的个人网站-小兔博客刚刚起步,一大堆BUG要调整,真的有些分身乏术的感觉。
这个系列,到这一节,一共写了12章,虽然不够完整,但是基本的前后台已经有了。我想,对于新人而言,还是有一定的借鉴意义的。我发现之前的这段日子里,自己开坑无数,却都不系统,所以,我打算在今后的文章中,做一个系统的归类,否则的话显得有些杂乱。
这个系列,这应该算是最后一章,没法子,个人精力有限,不可能真的把一个完完整整的网站做出来,配上博客讲解,那样的话工作量实在太大。不过这个系列我还是倾注了很多心血的,一路上,也感谢你们的陪伴,这个小网站也是在诸位的眼皮子底下一步一步成长起来的。最后,还是非常感谢大家的陪伴。好的,那么这个系列到此为止,结束了。