实训-个人博客（博客详情评论）

最新推荐文章于 2021-10-30 23:03:48 发布
最新推荐文章于 2021-10-30 23:03:48 发布
阅读量151 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46302173/article/details/118384977
版权

1、设置隐含域
在这里插入图片描述
2、评论表单验证
在这里插入图片描述

//评论表单验证
        $('.ui.form').form({
            fields: {
                title: {
                    identifier: 'content',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入评论内容'
                    }
                    ]
                },
                content: {
                    identifier: 'nickname',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入你的大名'
                    }]
                },
                type: {
                    identifier: 'email',
                    rules: [{
                        type: 'email',
                        prompt: '请填写正确的邮箱地址'
                    }]
                }
            }
        });

3、发布按钮事件
在这里插入图片描述
在这里插入图片描述
4、发送请求
在这里插入图片描述

在这里插入图片描述
5、回复
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
6、修改清除方法
在这里插入图片描述
7、功能实现
在这里插入图片描述
8、定义CommentService接口
在这里插入图片描述
9、定义CommentRepository接口
在这里插入图片描述
10、实现接口方法
在这里插入图片描述

package net.zl.myblog.service;


import net.zl.myblog.dao.CommentRepository;
import net.zl.myblog.po.Comment;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * 留言服务实现类
 */
 @Service
public class CommentServiceImpl implements CommentService{

    @Autowired
    private CommentRepository commentRepository;

    @Override
    public List<Comment> listCommentByBlogId(Long blogId) {
        Sort sort=Sort.by(Sort.Direction.DESC,"createTime");
        return commentRepository.findByBlogId(blogId,sort);
    }

    @Transactional
    @Override
    public Comment saveComment(Comment comment) {
        Long parentCommentId=comment.getParentComment().getId();
        if(parentCommentId!=-1){
            comment.setParentComment(commentRepository.findById(parentCommentId).orElse(null));
        }else {
            comment.setParentComment(null);
        }
        comment.setCreateTime(new Date());
        return commentRepository.save(comment);
    }
}

11、存放一张图片
在这里插入图片描述
12、定义图片路径
在这里插入图片描述
注意这里需要先在Comment.java里引入俩个类
在这里插入图片描述
在这里插入图片描述
13、效果
在这里插入图片描述
14、评论信息列表展示
在这里插入图片描述
15、效果
在这里插入图片描述
16、设置多级列表展示
17、添加实现方法
在这里插入图片描述

package net.zl.myblog.service;


import net.zl.myblog.dao.CommentRepository;
import net.zl.myblog.po.Comment;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * 留言服务实现类
 */
 @Service
public class CommentServiceImpl implements CommentService{

    @Autowired
    private CommentRepository commentRepository;

    @Override
    public List<Comment> listCommentByBlogId(Long blogId) {
        Sort sort=Sort.by(Sort.Direction.DESC,"createTime");
        List<Comment> comments=commentRepository.findByBlogId(blogId,sort);
        return eachComment(comments);
    }

    @Transactional
    @Override
    public Comment saveComment(Comment comment) {
        Long parentCommentId=comment.getParentComment().getId();
        if(parentCommentId != -1){
            comment.setParentComment(commentRepository.findById(parentCommentId).orElse(null));
        }else {
            comment.setParentComment(null);
        }
        comment.setCreateTime(new Date());
        return commentRepository.save(comment);
    }


    /**
     * 循环每个顶级的评论节点
     * @param comments
     * @return
     */
    private List<Comment> eachComment(List<Comment> comments) {
        List<Comment> commentsView = new ArrayList<>();
        for (Comment comment : comments) {
            Comment c = new Comment();
            BeanUtils.copyProperties(comment,c);
            commentsView.add(c);
        }
        //合并评论的各层子代到第一级子代集合中
        combineChildren(commentsView);
        return commentsView;
    }

    /**
     *
     * @param comments root根节点，blog不为空的对象集合
     * @return
     */
    private void combineChildren(List<Comment> comments) {

        for (Comment comment : comments) {
            List<Comment> replys1 = comment.getReplyComments();
            for(Comment reply1 : replys1) {
                //循环迭代，找出子代，存放在tempReplys中
                recursively(reply1);
            }
            //修改顶级节点的reply集合为迭代处理后的集合
            comment.setReplyComments(tempReplys);
            //清除临时存放区
            tempReplys = new ArrayList<>();
        }
    }

    //存放迭代找出的所有子代的集合
    private List<Comment> tempReplys = new ArrayList<>();
    /**
     * 递归迭代，剥洋葱
     * @param comment 被迭代的对象
     * @return
     */
    private void recursively(Comment comment) {
        tempReplys.add(comment);//顶节点添加到临时存放集合
        if (comment.getReplyComments().size()>0) {
            List<Comment> replys = comment.getReplyComments();
            for (Comment reply : replys) {
                tempReplys.add(reply);
                if (reply.getReplyComments().size()>0) {
                    recursively(reply);
                }
            }
        }
    }
}

18、留言区域代码
在这里插入图片描述

 <!--留言区域-->
        <div class="ui bottom attached segment">
            <!--留言区域列表-->
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%">
                        <h3 class="ui dividing header">评论</h3>
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}">
                            </a>
                            <div class="content">
                                <a class="author" th:text="${comment.nickname}">Matt</a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                </div>
                                <div class="text" th:text="${comment.content}">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id}, data-commentnickname=${comment.nickname}"  onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            <!--评论子级-->
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.nickname}">xiao</span><span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小红</span>
                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id}, data-commentnickname=${reply.nickname}"  onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>
                </div>
            </div>

在这里插入图片描述
19、效果
在这里插入图片描述
20、管理员回复评论功能

21、添加字段并添加setter、getter
在这里插入图片描述
22、页面处理

在这里插入图片描述
在这里插入图片描述
23、获取博主用户名等信息
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述
24、浏览次数累加
在这里插入图片描述
在这里插入图片描述

羔羊深
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot后端开发评论功能+分类页面+标签页面
qq_41823958的博客
07-31 1455
SpringBoot后端开发评论功能+分类页面+标签页面评论功能新建实体新建CommentRepository新建服务新建控制器分类页面标签页面功能展示评论功能分类新闻页标签新闻页总结 评论功能 评论功能主要是要有评论实体，然后将每个评论实体与一个确定的新闻实体挂钩，另外还需要有评论回复的功能，所以对于每一条评论都需要携带一个回复评论的List以及一个父评论（也就是回复的评论），如果父评论为-1则说明是顶级的评论。 新建实体 Comment.java: @Entity @Table(name = "t_co
Spring Boot第三次总结
erwaplus的博客
05-28 269
Spring Boot整合JPA 一、Spring Boot整合JPA 1、创建Spring Boot项目jpademo并添加相关项目依赖 2、创建ORM实体类（ORM: Object Relation Mapping 对象关系映射 (Object: Java Bean; Relation: Table） 1）在net.lxt.lesson07目录下创建子目录bean,并在里面创建评论实体类-Comment package net.lxt.lesson07.bean; import javax.pers
6-Spring Boot缓存管理
daqi1983的博客
04-07 2357
缓存是分布式系统中的重要组件，主要解决数据库数据的高并发访问。在实际开发中，尤其是用户访问量较大的网站，用户对高频热点数据的访问非常频繁，为了提高服务器访问性能、减少数据库的压力、提高用户体验，使用缓存显得尤为重要。
基于spring boot实现评论和分类功能
qq_43510659的博客
07-31 361
Comment package com.zr0726.news.po; import javax.persistence.*; import java.util.ArrayList; import java.util.Date; import java.util.List; @Entity @Table(name = "t_comment") public class Comment { @Id @GeneratedValue(strategy = GenerationType.IDE
MongoDB基础
吃西瓜不吐葡萄皮
08-26 301
MongoDB 介绍 MongoDB 是一个基于 分布式 文件存储 的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。在高负载的情况下，添加更多的节点，可以保证服务器性能。 文档存储一般用类似json的格式存储，存储的内容是文档型的。这样也就有机会对某些字段建立索引，实现关系数据库的某些功能。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。是一个 非关系型数据库。 关系型数据...
实习日记11：评论功能和分类、标签显示新闻
qq_45070054的博客
08-01 396
目录评论功能新建一个comment类在dao层下commentRepositoryservice层commentservice接口实现接口controller层标签和分类显示dao层service层创建controller成果bug日记总结 评论功能 新建一个comment类 @Entity @Table(name = "t_comment") public class Comment { @Id @GeneratedValue(strategy = GenerationType.IDENT
实训-个人博客（博客详情页）
qq_46302173的博客
07-01 277
实现博客首页点击列表博客，打开一个博客详情页面，向用户展示博客内容信息 1，修改indeController的方法 2、blog.html页面获取数据 3、查看效果 4、应用markdown插件 （1）添加依赖 <dependency> <groupId>com.atlassian.commonmark</groupId> <artifactId>commonmark</artifactId
CSDN实训 - 个人博客界面制作
weixin_51196032的博客
10-30 2758
文章目录前言一、个人博客界面展示二、HTML代码展示总结 前言 最近，我看到一句话，是解释什么是博客的，他是这样说的：博客是什么，简单的说就是记录生活和工作的记事本，一种公开与网络世界的日记本。这句话也充分说明了众多博主的心声，所以今天，我们来写博客，自己当站长！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、个人博客界面展示 二、HTML代码展示 <!DOCTYPE html> <html lang="zh-CN"> <head><meta nam
SpringBoot完整项目-个人博客
03-08
【SpringBoot完整项目-个人博客】是一个基于SpringBoot框架构建的个人博客系统，它提供了详细的实现，可以帮助开发者理解和学习如何运用SpringBoot来开发实际的Web应用程序。该项目的主要特点包括使用MySQL作为后台...
毕设&课设&项目&实训-基于ssm框架的个人博客开发 .zip
01-26
基于ssm框架的个人博客开发 使用技术spring+springmvc+mybatis 数据库mysql 安全认证shiro 后台界面easyui 前台界面bootstrap 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博...
网络数据库系统开发实训报告-个人博客.doc
06-09
网络数据库系统开发实训报告-个人博客
Java实训项目个人博客
12-23
【Java实训项目个人博客】是一个综合性的学习项目，旨在帮助开发者通过实际操作加深对Java编程语言的理解，特别是针对IDEA集成开发环境、Java后端接口设计以及DAO（Data Access Object）模型的应用。在这个项目中，...
毕设&课设&项目&实训-基于ThinkPHP6.0开发的极致简约的卡片风格个人博客系统.zip
最新发布
02-05
基于ThinkPHP6.0开发的极致简约的卡片风格个人博客系统，前端优化了SEO，词条收录更快。主题自适应PC手机端。一键安装，部署简单！！！另外接入七牛云,百度搜索资源平台. 【项目资源】： 包含前端、后端、移动开发、...
实训-个人博客（博客关于我页面）
qq_46302173的博客
07-01 673
1，创建AboutShowController package net.zl.myblog.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; /** * 关于我展示 */ @Controller public class AboutShowController { @GetMapping("/about")
实训-个人博客（后台登录）
qq_46302173的博客
06-22 571
文章目录一，构建登录页面和后台管理首页1，login.html登录页面2，_fragments.html页面3，index.html后台管理首页二，UserService和UserServicelmpl三、LoginController实现登录四、MD5加密五、登录拦截器 在进行后台登录之前我们先在我们数据库的t_user表中输入一条记录，用于我们来进行后台的登录。 这里的密码是进行了MD5加密之后的了，如果还没有进行到MD5的可以写自己的密码，如：111111。 一，构建登录页面和后台管理首页 1，lo
实训-个人博客（标签管理）
qq_46302173的博客
06-29 432
一、标签管理页面 标签管理与分类管理为相同的做法，以下都是拷贝分类管理的相关代码作更改实现的效果 1、拷贝types.html做修改 tags.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head th:replace="admin/_fragments :: head(~{::title})"> <meta charset="UTF-8">
实训-个人博客（前端首页展示）
qq_46302173的博客
06-29 346
1、首页处理 2、定义blog package net.zl.myblog.service; import net.zl.myblog.po.Blog; import net.zl.myblog.vo.BlogQuery; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import java.util.List; import java.util.Map;
周璐的三周JAVA学习总结
qq_46302173的博客
04-21 332
三周JAVA学习总结 在这三周里，我从零开始学起了java_(:3」∠❀)_从一开始的不知道怎么用什么软件来写一个Java程序到现在基本上简单一点的程序都可以写得出来了，老师上课讲得内容也基本可以理解。 最开始的一周基本上就是老师再讲解如何配置好环境方便编定程序，讲得很详细。 接下的几周里，老师开始渐渐的深入的教授东西，比如一个基本的Java程序的基本结构是怎么样的，编写java程...
实训-个人博客（博客管理）
qq_46302173的博客
06-29 305
一、博客分页查询 1，新建BlogService接口 package net.zl.myblog.service; import net.zl.myblog.po.Blog; import net.zl.myblog.vo.BlogQuery; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import java.util.List; import java.u
个人博客管理系统样本.doc - 软件技术实训项目 3(B/S 实训)
博客既可以是个人的日记，也可以是专注于某一特定主题的新闻评论平台。它可以结合文字、图像、链接等多种媒体形式，给读者提供丰富的内容。博客在社交媒体网络中扮演着重要角色，成为人们获取信息和交流的重要渠道。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值