【SpringBoot搭建个人博客】- 博客详情页面显示（十一）

admin管理员组

文章数量:1616427

select b.id bid,b.first_picture,b.flag,b.title,b.content,b.views,bment_count,b.update_time,bmentabled,b.share_statement,b.appreciation, u.nickname,u.avatar,t.name

from myblog.t_blog b,myblog.t_user u, myblog.t_type t

where b.user_id = u.id and b.type_id = t.id and b.id = #{id}

update myblog.t_blog b set b.views = b.views+1 where b.id = #{id}

update myblog.t_blog b set bment_count = (

select count(*) from myblog.t_comment c where c.blog_id = #{id} and b.id = #{id}

) WHERE b.id = #{id}

5. 持久层

• 持久层接口

在BlogService接口中添加查询博客详情方法：

//查询博客详情

DetailedBlog getDetailedBlog(Long id);

• 接口实现

次接口实现主要是设置文章显示格式，文章访问自增和文章评论的统计，在BlogServiceImpl类中添加实现方法，如下：

@Override

public DetailedBlog getDetailedBlog(Long id) {

DetailedBlog detailedBlog = blogDao.getDetailedBlog(id);

if (detailedBlog == null) {

throw new NotFoundException(“该博客不存在”);

}

String content = detailedBlog.getContent();

detailedBlog.setContent(MarkdownUtils.markdownToHtmlExtensions(content));

//文章访问数量自增

blogDao.updateViews(id);

//文章评论数量更新

blogDao.getCommentCountById(id);

return detailedBlog;

}

6. 控制器

在IndexController类中添加方法，调用业务层接口：

//跳转博客详情页面

@GetMapping(“/blog/{id}”)

public String blog(@PathVariable Long id, Model model) {

DetailedBlog detailedBlog = blogService.getDetailedBlog(id);

model.addAttribute(“blog”, detailedBlog);

return “blog”;

}

二、评论功能

由于评论稍微复杂些，这里将评论单独放一个业务层

分析：

问：评论业务层需要哪些接口？

答：评论直接在前端页面上进行操作，没有后台管理，只是区分的管理员和普通用户，管理员可以对评论进行删除，因此需要查询评论列表（listCommentByBlogId）、添加保存评论（saveComment）、删除评论(deleteComment)接口

问：业务层这些接口够了，但持久层光这些够了吗？需要哪些SQL，需要哪些持久层接口呢？

答：持久层接口肯定是不够的，主要是查询评论列表的时候，需要将评论和回复加以区分，根据评论功能来看，有父评论、子评论（回复），并且父子评论在前端显示的位置有不同，这里细说一下查询：

• 根据id为“-1”和博客id查询出所有父评论（父级评论id为‘-1’）

• 根据父评论的id查询出一级子回复

• 根据子回复的id循环迭代查询出所有子集回复

• 将查询出来的子回复放到一个集合中

所以查询评论信息需要：查询父级评论（findByBlogIdParentIdNull）、查询一级回复（findByBlogIdParentIdNotNull）、查询二级回复（findByBlogIdAndReplayId）

1. 持久层接口

在dao包下创建CommentDao接口，添加如下接口：

package com.star.dao;

import com.star.entity.Comment;

import org.apache.ibatis.annotations.Mapper;

import org.apache.ibatis.annotations.Param;

import org.springframework.stereotype.Repository;

import java.util.List;

/**

• @Description: 评论持久层接口

• @Date: Created in 9:21 2020/6/23

• @Author: ONESTAR

• @QQ群: 530311074

• @URL: https://onestar.newstar/

*/

@Mapper

@Repository

public interface CommentDao {

//查询父级评论

List findByBlogIdParentIdNull(@Param(“blogId”) Long blogId, @Param(“blogParentId”) Long blogParentId);

//查询一级回复

List findByBlogIdParentIdNotNull(@Param(“blogId”) Long blogId, @Param(“id”) Long id);

//查询二级回复

List findByBlogIdAndReplayId(@Param(“blogId”) Long blogId,@Param(“childId”) Long childId);

//添加一个评论

int saveComment(Comment comment);

//删除评论

void deleteComment(Long id);

}

2.mapper

在mapper目录下创建CommentDao.xml文件，添加如下：

<?xml version="1.0" encoding="utf-8" ?>

insert into myblog.t_comment (nickname,email,content,avatar,create_time,blog_id,parent_comment_id,admin_comment)

values (#{nickname},#{email},#{content},#{avatar},#{createTime},#{blogId},#{parentCommentId},#{adminComment});

select *

from myblog.t_comment c

where c.blog_id = #{blogId} and c.parent_comment_id = #{blogParentId}

order by c.create_time desc

select *

from myblog.t_comment c

where c.blog_id = #{blogId} and c.parent_comment_id = #{id}

order by c.create_time desc

select *

from myblog.t_comment c

where c.blog_id = #{blogId} and c.parent_comment_id = #{childId}

order by c.create_time desc

delete from myblog.t_comment where id = #{id}

讲解：

添加删除：直接使用insert和delete即可进行添加和删除

查询：

• findByBlogIdParentIdNull：根据id为“-1”和博客id查询出所有父评论（父级评论id为‘-1’）

• findByBlogIdParentIdNotNull：根据父评论的id查询出一级子回复

• findByBlogIdAndReplayId：根据子回复的id循环迭代查询出所有子集回复

3. 业务层

• 业务层接口：

在service包下创建CommentService接口，如下：

package com.star.service;

import com.star.entity.Comment;

import java.util.List;

/**

• @Description: 评论业务层接口

• @Date: Created in 10:22 2020/6/23

• @Author: ONESTAR

• @QQ群: 530311074

• @URL: https://onestar.newstar/

*/

public interface CommentService {

//根据博客id查询评论信息

List listCommentByBlogId(Long blogId);

//添加保存评论

int saveComment(Comment comment);

//删除评论

void deleteComment(Comment comment,Long id);

}

• 接口实现：

在Impl包下创建接口实现类：CommentServiceImpl，功能都在这个接口中实现

package com.star.service.Impl;

import com.star.dao.BlogDao;

import com.star.dao.CommentDao;

import com.star.entity.Comment;

import com.star.service.CommentService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import java.util.ArrayList;

import java.util.Date;

import java.util.List;

/**

• @Description: 博客评论业务层接口实现类

• @Date: Created in 10:23 2020/6/23

• @Author: ONESTAR

• @QQ群: 530311074

• @URL: https://onestar.newstar/

*/

@Service

public class CommentServiceImpl implements CommentService {

@Autowired

private CommentDao commentDao;

@Autowired

private BlogDao blogDao;

//存放迭代找出的所有子代的集合

private List tempReplys = new ArrayList<>();

/**

• @Description: 查询评论

• @Auther: ONESTAR

• @Date: 10:42 2020/6/23

• @Param: blogId：博客id

• @Return: 评论消息

*/

@Override

public List listCommentByBlogId(Long blogId) {

//查询出父节点

List comments = commentDao.findByBlogIdParentIdNull(blogId, Long.parseLong(“-1”));

for(Comment comment : comments){

Long id = comment.getId();

String parentNickname1 = comment.getNickname();

List childComments = commentDao.findByBlogIdParentIdNotNull(blogId,id);

//查询出子评论

combineChildren(blogId, childComments, parentNickname1);

comment.setReplyComments(tempReplys);

tempReplys = new ArrayList<>();

}

return comments;

}

/**

• @Description: 查询出子评论

• @Auther: ONESTAR

• @Date: 10:43 2020/6/23

• @Param: childComments：所有子评论

• @Param: parentNickname1：父评论姓名

• @Return:

*/

private void combineChildren(Long blogId, List childComments, String parentNickname1) {

//判断是否有一级子评论

if(childComments.size() > 0){

//循环找出子评论的id

for(Comment childComment : childComments){

String parentNickname = childComment.getNickname();

childComment.setParentNickname(parentNickname1);

tempReplys.add(childComment);

Long childId = childComment.getId();

//查询出子二级评论

recursively(blogId, childId, parentNickname);

}

}

}

/**

• @Description: 循环迭代找出子集回复

• @Auther: ONESTAR

• @Date: 10:44 2020/6/23

• @Param: chileId:子评论id

• @Param: parentNickname1:子评论姓名

• @Return:

*/

private void recursively(Long blogId, Long childId, String parentNickname1) {

//根据子一级评论的id找到子二级评论

List replayComments = commentDao.findByBlogIdAndReplayId(blogId,childId);

if(replayComments.size() > 0){

for(Comment replayComment : replayComments){

String parentNickname = replayComment.getNickname();

replayComment.setParentNickname(parentNickname1);

Long replayId = replayComment.getId();

tempReplys.add(replayComment);

recursively(blogId,replayId,parentNickname);

}

}

}

//新增评论

@Override

public int saveComment(Comment comment) {

comment.setCreateTime(new Date());

int comments = commentDao.saveComment(comment);

//文章评论计数

blogDao.getCommentCountById(comment.getBlogId());

return comments;

}

//删除评论

@Override

public void deleteComment(Comment comment,Long id) {

commentDao.deleteComment(id);

blogDao.getCommentCountById(comment.getBlogId());

}

}

4. 控制器

• 添加图片配置 在评论中，需要显示头像，这里直接在配置文件里面进行配置，在application.yml中添加如下配置(这里直接把后面留言的显示图片也一起添加了)：

comment.avatar: /images/avatar.png

message.avatar: /images/avatar.png

在controller包下创建CommentController类，如下：

package com.star.controller;

import com.star.entity.Comment;

import com.star.entity.User;

import com.star.queryvo.DetailedBlog;

import com.star.service.BlogService;

import com.star.service.CommentService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpSession;

import java.util.List;

/**

• @Description: 评论控制器

• @Date: Created in 10:25 2020/6/23

• @Author: ONESTAR

• @QQ群: 530311074

• @URL: https://onestar.newstar/

*/

@Controller

public class CommentController {

@Autowired

private CommentService commentService;

@Autowired

private BlogService blogService;

@Value(“${comment.avatar}”)

private String avatar;

//查询评论列表

@GetMapping(“/comments/{blogId}”)

public String comments(@PathVariable Long blogId, Model model) {

List comments = commentService.listCommentByBlogId(blogId);

model.addAttribute(“comments”, comments);

return “blog :: commentList”;

}

//新增评论

@PostMapping(“/comments”)

public String post(Comment comment, HttpSession session, Model model) {

Long blogId = comment.getBlogId();

User user = (User) session.getAttribute(“user”);

if (user != null) {

comment.setAvatar(user.getAvatar());

comment.setAdminComment(true);

} else {

//设置头像

comment.setAvatar(avatar);

}

if (comment.getParentComment().getId() != null) {

comment.setParentCommentId(comment.getParentComment().getId());

}

commentService.saveComment(comment);

List comments = commentService.listCommentByBlogId(blogId);

model.addAttribute(“comments”, comments);

return “blog :: commentList”;

}

//删除评论

@GetMapping(“/comment/{blogId}/{id}/delete”)

public String delete(@PathVariable Long blogId, @PathVariable Long id, Comment comment, RedirectAttributes attributes, Model model){

commentService.deleteComment(comment,id);

DetailedBlog detailedBlog = blogService.getDetailedBlog(blogId);

List comments = commentService.listCommentByBlogId(blogId);

model.addAttribute(“blog”, detailedBlog);

model.addAttribute(“comments”, comments);

return “blog”;

}

}

讲解：

查询评论列表：调用接口查询评论信息列表，局部刷新评论信息

新增评论：对评论进行判断，区分游客和管理员

删除评论：将博客id和评论id参数传入，判断删除的是哪一条评论，这里没有做迭代删除子评论，若删除了含有回复的评论，根据之前的查询来看，在前端回复也不会查询出来，但回复并没有删除，依然在数据库里面，删除的只是父评论

5. 前后端交互

给出部分前端代码，仅供参考，了解更多可以查看整个项目源码：https://github/oneStarLR/myblog-mybatis

提交评论

• HTML

发布

• JS

$(‘#commentpost-btn’).click(function () {

var boo = $(‘.ui.form’).form(‘validate form’);

if (boo) {

console.log(‘校验成功’);

postData();

} else {

console.log(‘校验失败’);

}

本文标签： 博客详情页面SpringBoot