好的,那么在上一节中呢,评论功能的后台已经写好了,这一节,先把这部分后台代码和前台对接一下。

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); %>

测试:

哎哟不错哦~~ 貌似木有问题。

再看看数据库。

哎呀呀,真的有了!

那么这是不是就说明,评论功能到目前都是正确的?

接下来,我们是不是还应该给用户一点反馈表示评论已经成功保存了?

我们在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章,虽然不够完整,但是基本的前后台已经有了。我想,对于新人而言,还是有一定的借鉴意义的。我发现之前的这段日子里,自己开坑无数,却都不系统,所以,我打算在今后的文章中,做一个系统的归类,否则的话显得有些杂乱。

这个系列,这应该算是最后一章,没法子,个人精力有限,不可能真的把一个完完整整的网站做出来,配上博客讲解,那样的话工作量实在太大。不过这个系列我还是倾注了很多心血的,一路上,也感谢你们的陪伴,这个小网站也是在诸位的眼皮子底下一步一步成长起来的。最后,还是非常感谢大家的陪伴。好的,那么这个系列到此为止,结束了。

小兔博客:http://www.xiaotublog.com/

文章发布系统demo(雏形):http://www.xiaotublog.com:8088/Article/ (测试用户:zhangsan/123456)

技术文章搜索(简书、博客园):http://www.xiaotublog.com/search.html

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十二节)的更多相关文章

  1. 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

    说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...

  2. PHP实战-文章发布系统学习记录

    跟随大师的步伐,一步一步向前行进,PHP学习之路中的历程. 如果图片不能正常查看请访问云笔记链接 http://note.youdao.com/share/?id=3c25d8c03ef946d9c6 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(35)-文章发布系统②-构建项目

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(35)-文章发布系统②-构建项目 注:阅读本文,需要阅读本系列的之前文章 代码生成器下载地址(文章开头处) ...

  4. JAVAEE期末项目------文章发布系统

    项目文档和代码的GitHub地址:https://github.com/xiangbaobaojojo/- 1.项目介绍 (计科四班  蔡春燕 20150141401)和我 陈香宇(计科四班  201 ...

  5. PHP与MYSQL结合操作——文章发布系统小项目(实现基本增删查改操作)

    php和mysql在一起几十年了,也是一对老夫老妻了,最近正在对他们的爱情故事进行探讨,并做了一个很简单的小东西——文章发布系统,目的是为了实现mysql对文章的基本增删查改操作 前台展示系统有:文章 ...

  6. 手把手0基础项目实战(一)——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...

    原文:手把手0基础项目实战(一)--教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)... 本文你将学到什么? 本文将以原理+实战的方式,首先对& ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(36)-文章发布系统③-kindeditor使用

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(36)-文章发布系统③-kindeditor使用 我相信目前国内富文本编辑器中KindEditor 属于前 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 系列目录 最新比较闲,为了学习下Android的开发构建ASP.NET ...

  9. php小程序-文章发布系统(mvc框架)

    php小程序-文章发布系统(mvc框架) 一 项目视图 二 项目经验 通过对mvc微型框架的实现,对mvc理论加深,有利于以后框架的学习 三 项目源码 http://files.cnblogs.com ...

随机推荐

  1. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  2. C#4.0泛型的协变,逆变深入剖析

    C#4.0中有一个新特性:协变与逆变.可能很多人在开发过程中不常用到,但是深入的了解他们,肯定是有好处的. 协变和逆变体现在泛型的接口和委托上面,也就是对泛型参数的声明,可以声明为协变,或者逆变.什么 ...

  3. C语言 · 判定数字

    编写函数,判断某个给定字符是否为数字. 样例输入 9 样例输出 yes #include<stdio.h> int main(){ char c; scanf("%c" ...

  4. centos7+mono4+jexus5.6.2安装过程中的遇到的问题

    过程参考: http://www.linuxdot.net/ http://www.jexus.org/ http://www.mono-project.com/docs/getting-starte ...

  5. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

  6. Hawk 6. 编译和扩展开发

    Hawk是开源项目,因此任何人都可以为其贡献代码.作者也非常欢迎使用者能够扩展出更有用的插件. 编译 编译需要Visual Stuido,版本建议使用2015, 2010及以上没有经过测试,但应该可以 ...

  7. spring源码分析之@ImportSelector、@Import、ImportResource工作原理分析

    1. @importSelector定义: /** * Interface to be implemented by types that determine which @{@link Config ...

  8. MediatorPattern(中介者模式)

    /** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...

  9. Lucene4.4.0 开发之排序

    排序是对于全文检索来言是一个必不可少的功能,在实际运用中,排序功能能在某些时候给我们带来很大的方便,比如在淘宝,京东等一些电商网站我们可能通过排序来快速找到价格最便宜的商品,或者通过排序来找到评论数最 ...

  10. MSSQL 事务,视图,索引,存储过程,触发器

    事务 事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行. 在数据库系统上执行并发操作时事务是作为最小的控制单元来使用的.这特别适用于多用户同时操作的数据 ...