好的藕溅，那么在上一節(jié)中呢，評(píng)論功能的后臺(tái)已經(jīng)寫(xiě)好了负拟，這一節(jié)，先把這部分后臺(tái)代碼和前臺(tái)對(duì)接一下嚷闭。

1.評(píng)論功能實(shí)現(xiàn)

我們修改一下保存評(píng)論按鈕的點(diǎn)擊事件，用jQuery的方式獲取文本框中的值赖临，然后通過(guò)ajax方法胞锰，把數(shù)據(jù)傳遞到CommentController.jsp，jsp就是Servlet思杯，這樣寫(xiě)就和傳遞到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('請(qǐng)先登錄！');
        }
    });
});

我們采用{}色乾，也就是JSON的方式誊册，將數(shù)據(jù)包裹一下，傳遞過(guò)去暖璧。

在JSP頁(yè)面是這樣接收的：

<%@page import="bean.User"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    //因?yàn)樵u(píng)論是需要登陸的,如果沒(méi)有登陸我們就調(diào)整到登陸頁(yè)面去 
    User user = (User)session.getAttribute("user");
    if(user==null){//代表用戶(hù)沒(méi)有登陸
        out.print("-1");
        return;
    }
    String txt = request.getParameter("txt").toString();
    System.out.println(txt);
%>

它只是一種寫(xiě)法而已案怯，如果在Servlet中，你是不是還要在doGet或者doPost方法中傳遞一個(gè) HttpServletRequest request 參數(shù)呢澎办？而當(dāng)我們采用JSP的話呢嘲碱，就不需要這么做了，這就是九大隱式對(duì)象的好處局蚀。

我們通過(guò)

request.getParameter("txt").toString();

的方式麦锯，先獲取到前臺(tái)傳過(guò)來(lái)的評(píng)論信息，并且用一個(gè)String數(shù)據(jù)類(lèi)型的txt 琅绅，保存下來(lái)扶欣。

接著，先不急著往下寫(xiě)，你可以先打印出來(lái)看看料祠，看看它能不能取到骆捧，如果這都不能取到，就說(shuō)明某個(gè)地方已經(jīng)錯(cuò)了髓绽，再寫(xiě)下去也沒(méi)有意義敛苇。

我們隨便寫(xiě)一個(gè)什么東西，點(diǎn)擊保存評(píng)論顺呕。

控制臺(tái)成功打印出來(lái)了枫攀，這說(shuō)明代碼沒(méi)問(wèn)題。

OK塘匣，繼續(xù)脓豪，接下來(lái)巷帝，我們就需要把這個(gè)信息保存到數(shù)據(jù)庫(kù)里了忌卤。

在調(diào)用CommentService之前，我們先看一下要保存哪些東西楞泼。（這些信息去CommentService里面看驰徊，之前寫(xiě)過(guò)一個(gè)saveComment方法）

保存信息的清單：

id,user_id,content,article_id,create_time,is_delete

id自然不用多說(shuō)，我們采用UUID就行了堕阔。user_id是用戶(hù)ID棍厂，就是當(dāng)前登錄的那個(gè)人。content的話超陆，就是評(píng)論的內(nèi)容牺弹，也就是我們剛剛?cè)〉降膖xt。article_id是文章的id时呀，到時(shí)候加載評(píng)論的時(shí)候张漂，肯定就是通過(guò)這個(gè)字段來(lái)查找的。create_time是創(chuàng)建日期谨娜，is_delete為是否刪除航攒，我們默認(rèn)給他一個(gè)0，表示不刪除趴梢。

好的漠畜，這些東西確認(rèn)好了，就開(kāi)始寫(xiě)代碼吧坞靶。

通過(guò)以上的分析憔狞，我們是不是還要把文章ID從前臺(tái)傳過(guò)來(lái)呢？好的彰阴，說(shuō)干就干瘾敢。

回到detail.jsp，給點(diǎn)擊事件中的JSON對(duì)象添加一個(gè)屬性，把文章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('請(qǐng)先登錄廉丽！');
        }
    });
});

修改后的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){//代表用戶(hù)沒(méi)有登陸
        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);
     
     
%>

測(cè)試：

哎喲不錯(cuò)哦~~ 貌似木有問(wèn)題倦微。

再看看數(shù)據(jù)庫(kù)。

哎呀呀正压，真的有了欣福！

那么這是不是就說(shuō)明，評(píng)論功能到目前都是正確的焦履？

接下來(lái)拓劝，我們是不是還應(yīng)該給用戶(hù)一點(diǎn)反饋表示評(píng)論已經(jīng)成功保存了？

我們?cè)贑ommentController里面嘉裤，最后再加上返回一個(gè)標(biāo)志位 1 即可郑临。

out.print("1");
然后前臺(tái)判斷，如果返回的是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('請(qǐng)先登錄！');
        }else if(data == '1'){
            alert('保存成功典奉！');
        }
    });
});

這樣不就好了嗎躺翻？O(∩_∩)O~~

2.評(píng)論加載

評(píng)論保存已經(jīng)沒(méi)問(wèn)題了，接下來(lái)就是加載卫玖。

回到detail.jsp頁(yè)面公你，第一步，是不是要導(dǎo)包凹偎病陕靠？

<%@ page language="java" import="service.CommentService"%>

第二步，就是獲取CommentService的實(shí)例對(duì)象脱茉。然后把我們需要的評(píng)論都查詢(xún)出來(lái)剪芥。（因?yàn)橹安樵?xún)文章內(nèi)容的時(shí)候，已經(jīng)獲取到id了芦劣，所以這里不再獲却志恪）

<%
    CommentService commentService = new CommentService();
    List<Map<String,Object>> list = commentService.getCommentsByArticleId(id);
    pageContext.setAttribute("comments", list);
    System.out.println(list);
%>

測(cè)試，刷新一下頁(yè)面虚吟，要是不起作用的話呢寸认，就重啟一下tomcat。

控制臺(tái)成功打印出了信息：

[{content=OK, username=zhangsan}, {content=很不錯(cuò)的文章串慰，贊一個(gè)偏塞！, username=zhangsan}]

接下來(lái)，就是如何把這些數(shù)據(jù)貼到頁(yè)面上的問(wèn)題了邦鲫。

怎么貼呢灸叼，是不是還要循環(huán)一下神汹？

<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}說(shuō)：</p>
                 <p class='mb32'>${comment.content}</p>
             </div>
        </div>
     </c:forEach>
</div>

這樣就行了，刷新：

樣式稍微有點(diǎn)問(wèn)題古今，稍微調(diào)一下：

.comment_word {
    margin-top:16px;
}

這樣好些了屁魏。

最后，當(dāng)提示保存成功的時(shí)候捉腥，順便把頁(yè)面刷新一下氓拼，這樣方便我們直接看到效果：

本文結(jié)束...

最近事情太多，一方面項(xiàng)目工期加緊抵碟，空余時(shí)間越來(lái)越少桃漾。另一方面，我自己的個(gè)人網(wǎng)站-小兔博客剛剛起步拟逮，一大堆BUG要調(diào)整撬统，真的有些分身乏術(shù)的感覺(jué)。

這個(gè)系列敦迄，到這一節(jié)恋追，一共寫(xiě)了12章，雖然不夠完整颅崩，但是基本的前后臺(tái)已經(jīng)有了几于。我想蕊苗，對(duì)于新人而言沿后，還是有一定的借鑒意義的。我發(fā)現(xiàn)之前的這段日子里朽砰，自己開(kāi)坑無(wú)數(shù)尖滚，卻都不系統(tǒng)，所以瞧柔，我打算在今后的文章中漆弄，做一個(gè)系統(tǒng)的歸類(lèi)，否則的話顯得有些雜亂造锅。

這個(gè)系列撼唾，這應(yīng)該算是最后一章，沒(méi)法子哥蔚，個(gè)人精力有限倒谷，不可能真的把一個(gè)完完整整的網(wǎng)站做出來(lái)，配上博客講解糙箍，那樣的話工作量實(shí)在太大渤愁。不過(guò)這個(gè)系列我還是傾注了很多心血的，一路上深夯，也感謝你們的陪伴抖格，這個(gè)小網(wǎng)站也是在諸位的眼皮子底下一步一步成長(zhǎng)起來(lái)的。最后，還是非常感謝大家的陪伴雹拄。好的收奔，那么這個(gè)系列到此為止，結(jié)束了滓玖。