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

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

1.jpg

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


#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 ,保存下来。

接着,先不急着往下写,你可以先打印出来看看,看看它能不能取到,如果这都不能取到,就说明某个地方已经错了,再写下去也没有意义。11.png

我们随便写一个什么东西,点击保存评论。

12.png

控制台成功打印出来了,这说明代码没问题。


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

测试

13.png

14.png

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

再看看数据库。

115.png

哎呀呀,真的有了!


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


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


我们在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~~

16.png

#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>

这样就行了,刷新:

17.png

样式稍微有点问题,稍微调一下:

.comment_word {
    margin-top:16px;
}

这样好些了。

18.png

最后,当提示保存成功的时候,顺便把页面刷新一下,这样方便我们直接看到效果:

16.png

本文结束…


最近事情太多,一方面项目工期加紧,空余时间越来越少。另一方面,我自己的个人网站-小兔博客刚刚起步,一大堆BUG要调整,真的有些分身乏术的感觉。


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


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


相关文章
|
11月前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术,构建高效、可扩展的销售管理平台,实现客户、订单、数据可视化等全流程自动化管理,提升企业运营效率与决策能力。
|
11月前
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现,涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块,提供完整代码示例,助力掌握Java Web项目实战技能。(238字)
1269 0
|
11月前
|
存储 Java 关系型数据库
Java 项目实战基于面向对象思想的汽车租赁系统开发实例 汽车租赁系统 Java 面向对象项目实战
本文介绍基于Java面向对象编程的汽车租赁系统技术方案与应用实例,涵盖系统功能需求分析、类设计、数据库设计及具体代码实现,帮助开发者掌握Java在实际项目中的应用。
403 0
|
12月前
|
算法 Java 测试技术
零基础学 Java: 从语法入门到企业级项目实战的详细学习路线解析
本文为零基础学习者提供完整的Java学习路线,涵盖语法基础、面向对象编程、数据结构与算法、多线程、JVM原理、Spring框架、Spring Boot及项目实战,助你从入门到进阶,系统掌握Java编程技能,提升实战开发能力。
774 0
|
12月前
|
Java 关系型数据库 数据库
Java 项目实战教程从基础到进阶实战案例分析详解
本文介绍了多个Java项目实战案例,涵盖企业级管理系统、电商平台、在线书店及新手小项目,结合Spring Boot、Spring Cloud、MyBatis等主流技术,通过实际应用场景帮助开发者掌握Java项目开发的核心技能,适合从基础到进阶的学习与实践。
1560 4
|
12月前
|
前端开发 JavaScript Java
Java 项目实战城市公园信息管理系统开发流程与实用功能实现指南
本系统基于Java开发,采用Spring Boot后端框架与Vue.js前端框架,结合MySQL数据库,构建了一个高效的城市公园信息管理系统。系统包含管理员、用户和保洁人员三大模块,涵盖用户管理、园区信息查询、订票预约、服务管理等功能,提升公园管理效率与服务质量。
316 6
|
12月前
|
前端开发 Java 数据库
Java 项目实战从入门到精通 :Java Web 在线商城项目开发指南
本文介绍了一个基于Java Web的在线商城项目,涵盖技术方案与应用实例。项目采用Spring、Spring MVC和MyBatis框架,结合MySQL数据库,实现商品展示、购物车、用户注册登录等核心功能。通过Spring Boot快速搭建项目结构,使用JPA进行数据持久化,并通过Thymeleaf模板展示页面。项目结构清晰,适合Java Web初学者学习与拓展。
675 1
|
12月前
|
安全 Java 数据库
Java 项目实战病人挂号系统网站设计开发步骤及核心功能实现指南
本文介绍了基于Java的病人挂号系统网站的技术方案与应用实例,涵盖SSM与Spring Boot框架选型、数据库设计、功能模块划分及安全机制实现。系统支持患者在线注册、登录、挂号与预约,管理员可进行医院信息与排班管理。通过实际案例展示系统开发流程与核心代码实现,为Java Web医疗项目开发提供参考。
508 2
|
算法 Java 开发者
Java 项目实战数字华容道与石头迷阵游戏开发详解及实战方法
本文介绍了使用Java实现数字华容道和石头迷阵游戏的技术方案与应用实例,涵盖GUI界面设计、二维数组操作、游戏逻辑控制及自动解法算法(如A*),适合Java开发者学习游戏开发技巧。
736 46
|
设计模式 人工智能 前端开发
现代 Java 实现数字华容道与石头迷阵游戏的项目实战及项目开发指南
本项目基于Java 17+,采用JavaFX与MVC架构,实战开发数字华容道/石头迷阵游戏。内容涵盖技术选型、核心逻辑、现代GUI设计、动画实现及项目打包发布,结合sealed class、record等新特性,打造简洁可维护的游戏代码结构。
420 0