教师管理平台-----servlet+html用户评论与回复+ajax异步请求+json显示

停更了两天,因为周一满课,周二上两节课,休息两节课,时间间断的,就没敲代码。其实就是懒…
上课听不进去,又看了下mvc,又深刻理解了一层,原来service是写逻辑的,我以前都是在servlet里面写的。。。难受。

废话少说,开干
第五个功能: 用户评论和回复功能
继续链接接上: https://blog.csdn.net/ignite_/article/details/90553719
新增两个数据表:
comment表(评论):

在这里插入图片描述

reply表(回复):

在这里插入图片描述

Java代码

新增两个数据表的实体类+修改了下传递json数据的代码
1.ReplySon(存储回复信息json)
public class ReplySon {
    private Reply reply;
    private String id;
    private String nickname;
    private String picture;
    }
2.CourseSon(存储评论以及该条评论回复信息json)
public class CourseSon {
    private String id;
    private String nickname;
    private String picture;
    private List<ReplySon> replySon;
    }
Service
ReplyService
public interface ReplyService {
//    新增回复
    boolean insert(Reply reply) throws SQLException;
//    查找回复
    List<ReplySon> select(String id) throws SQLException;
}
CommentService
public interface CommentService {
    //    新增评论
    boolean insertComment(Comment comment) throws SQLException;

    //    查找所有评论返回CourseSon
    List<CourseSon> selectId(String id) throws SQLException;
}
CommentServiceImpl(两个实现逻辑大致差不多)
public class CommentServiceImpl implements CommentService {
    CommentDao commentDao = new CommentDaoImpl();

    @Override
    public boolean insertComment(Comment comment) throws SQLException {
        return commentDao.insertComment(comment);
    }

    @Override
    public List<CourseSon> selectId(String id) throws SQLException {
//        查找该课程所有评论
        List<Comment> comments = commentDao.selectId(id);
        List<CourseSon> courseSons = new ArrayList<CourseSon>();

//        遍历comment找出所有评论用户id以及所有回复内容
        for (int index = 0; index < comments.size(); index++) {

            String User_id = comments.get(index).getUser_id();

//            得到评论用户信息
            UserService userService = new UserServiceImpl();
            User User = userService.select(User_id);
//            得到所有回复信息
            ReplyService replyService = new ReplyServiceImpl();
            List<ReplySon> replySons= replyService.select(comments.get(index).getId());
//            创建CourseSon对象
            CourseSon courseSon = new CourseSon();

//            信息存入courseSon
            courseSon.setId(User.getId());
            courseSon.setNickname(User.getNickname());
            courseSon.setPicture(User.getPicture());
            courseSon.setComment(comments.get(index));
            courseSon.setReplySon(replySons);

//            得到的信息存入List
            courseSons.add(index, courseSon);
        }

        return courseSons;
    }
    
}

Servlet(两个也都差不多)
AddReplyServlet(新增回复)
package Servlet.video;

import Domain.Reply;
import Domain.User;
import Service.Impl.ReplyServiceImpl;
import Service.ReplyService;
import Utils.CreateUUID;
import com.alibaba.fastjson.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Date;
@WebServlet(name = "AddReplyServlet")
public class AddReplyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        设置编码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

//        设置输出
        PrintWriter out = response.getWriter();

//        获得值
        String comment_id = request.getParameter("comment_id");
        String reply_content = request.getParameter("reply_content");
//        判断是否登陆
        HttpSession session = request.getSession();
        int result = 0;
        if (session.getAttribute("login") == null) {
            System.out.println("未登陆");
            out.print(result);
            return;
        }
        User user = (User) session.getAttribute("login");
//        获得用户id
        String user_id = user.getId();
//        评论时间
        Date date = new Date();
//        uuid
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd-HH:mm:ss");
        CreateUUID createUUID = new CreateUUID();
//       存入Reply
        Reply reply = new Reply();
        reply.setId(createUUID.createUUID());
        reply.setComment_id(comment_id);
        reply.setUser_id(user_id);
        reply.setCreate_time(dateFormat.format(date));
        reply.setReply_content(reply_content);

//        存入数据库
        ReplyService replyService = new ReplyServiceImpl();
        boolean b=false;
        try {
            b=replyService.insert(reply);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        if (b){
//            创建json
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("reply",reply);
            out.print(jsonObject);

        }


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

前台代码

video.html(达成成就,用jQuery写div…)
<script>
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

    window.onload = function () {
        // 获取url的id
        // 获取id
        var id = getQueryString("id");
        // alert(id);
        $.getJSON(
            "onlyvideo",
            {"id": id},
            function (result) {
                var jsonOnly = eval(result);
                $("#coursename").append(jsonOnly.videoOnly.course.course_name);
                $("#coursetype").append(jsonOnly.videoOnly.course.course_type);
                $("#courseTtype").append(jsonOnly.videoOnly.course.course_Ttype);
                $("#coursedescribe").append(jsonOnly.videoOnly.course.course_describe);
                $("#coursetime").append(jsonOnly.videoOnly.course.create_time);
                $("coursetime").append(jsonOnly.videoOnly.course.create_time);
                $("#usernickname").append(jsonOnly.videoOnly.nickname);
                $("#userpicture").attr("src", "upload/" + jsonOnly.videoOnly.picture);
                $("#video").attr("src", "uploadvideo/" + jsonOnly.videoOnly.course.course_path);


                // 获得courseSon长度
                var courseSonlength = 0;
                for (courseSonlength in jsonOnly.videoOnly.courseSon
                    ) {
                    courseSonlength++;
                }

                for (var index = 0; index < courseSonlength; index++) {

                    //获得replySon长度
                    var replySonlength = 0;
                    for (replySonlength in jsonOnly.videoOnly.courseSon[index].replySon) {
                        replySonlength++;
                    }
                    $("#outcomment").append(
                        "<div>" +
                        "<span>留言:" + jsonOnly.videoOnly.courseSon[index].comment.comment_content + "</span><br>" +
                        "<span>留言用户:" + jsonOnly.videoOnly.courseSon[index].nickname + "</span><br>" +
                        "<span>留言时间:" + jsonOnly.videoOnly.courseSon[index].comment.create_time + "</span><br>" +
                        "<div id='reply_content" + index + "' style='color: red'></div><br>" +
                        "<input  id='reply" + index + "'>" +
                        "<button id='upreply" + index + "' datafld='" + jsonOnly.videoOnly.courseSon[index].comment.id + "'>回复</button></div><br>"
                    );
                    for (var index2 = 0; index2 <replySonlength; index2++) {
                        // alert(index2);
                        $("#reply_content" + index).append(
                            "<div>" +
                            "<span>回复:" + jsonOnly.videoOnly.courseSon[index].replySon[index2].reply.reply_content + "</span><br>" +
                            "<span>回复用户:" + jsonOnly.videoOnly.courseSon[index].replySon[index2].nickname + "</span><br>" +
                            "<span>回复时间:" + jsonOnly.videoOnly.courseSon[index].replySon[index2].reply.create_time + "</span></div><br>"
                        );
                    }


                    (function (index) {
                        $("#upreply" + index).click(function () {
                            var comment_id = $("#upreply" + index).attr("datafld");
                            var reply_content = $("#reply" + index).val();
                            $.getJSON(
                                "addreply",
                                {"comment_id": comment_id, "reply_content": reply_content},
                                function (result) {
                                    var result = result;
                                    if (result == 0) {
                                        alert("请登录");
                                    } else {
                                        var json = eval(result);
                                        $("#outreply").append(
                                            "<span>回复用户id:" + json.reply.user_id + "</span><br>" +
                                            "<span>回复评论id:" + json.reply.comment_id + "</span><br>" +
                                            "<span>回复时间:" + json.reply.create_time + "</span><br>" +
                                            "<span>回复内容:" + json.reply.reply_content + "</span><br>"
                                        );

                                    }

                                }
                            )

                        });
                    })(index);
                }

            }
        )


    }

    function AddCourse() {
        var id = getQueryString("id");
        $.getJSON(
            "addcourse",
            {"id": id},
            function (result) {
                var boolean = result;
                if (boolean) {
                    alert("添加成功");
                } else {
                    alert("您已添加该课程");
                }

            }
        )
    }

    function AddComment() {
        var id = getQueryString("id");
        var comment = $("#comment").val();
        // alert(id);
        // alert(comment);
        $.getJSON(
            "addcomment",
            {"id": id, "comment": comment},
            function (result) {
                var result = result;
                if (result == 0) {
                    alert("请登录");
                } else {
                    var json = eval(result);
                    $("#outcomment").append(
                        "<div>" +
                        "<span>留言用户id:" + json.comment.user_id + "</span><br>" +
                        "<span>留言视频id:" + json.comment.course_id + "</span><br>" +
                        "<span>留言时间:" + json.comment.create_time + "</span><br>" +
                        "<span>留言内容:" + json.comment.comment_content + "</span></div><br>"
                    );


                }

            }
        )

    }
</script>
页面效果:
添加评论:

在这里插入图片描述

添加回复(因为只是Demo,新回复显示位置没调):

在这里插入图片描述

Json数据:

在这里插入图片描述

因为这些功能都只是demo,所以有些细节没处理,页面显示的很乱很难看…
其实评论和回复个人觉得还是有点挑战性,因为评论用到了User表(查找留言人信息),用到了Course表(确定在该课程留言),以及它自身,同时回复也是,确定是回复的该条评论,在ajax异步提交的时候,数据要捋清楚。以前用php写过这个,所以现在写起来还是很容易的。改天把分页加上。
另外后台的主要几个功能暂时就先这样了,还有搜索就是模糊查询,问答板块和评论回复的都是一样,教师开设班级以及学生选择班级和教师上传视频和学生添加该视频也是一样,个人中心的显示问题就是数据库的查找罢了。暂时后台就不更新。
明天开始写前台页面,争取一个星期尽量的写完整。这个撸完了开始学习Spring全家桶咯。溜了溜了。

欢迎前辈指出问题哇。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值