SpringBoot个人博客项目搭建—前端首页展示功能介绍（十）

前端首页展示功能介绍

项目首页地址：https://blog.csdn.net/weixin_45019350/article/details/108869025

后台博客管理页面写完后我们就可以来完成前端展示页面了，首页博客展示主要功能有首页博客展示，最热博客推荐，博客搜索功能，跳转博客详情界面。
博客详情页面的功能比较复杂，需要进行Markdown格式转换和博客评论楼中楼效果的功能实现。

一、博客展示

登录首页最先查询的是首页的博客和最热博客，这里提供两个方法去查询博客信息，并通过分页功能进行分页展示，

持久层调用方法去数据库查询第一页博客展示，返回结果集

最新博客查询也是如此查询数据并返回结果集，结果集对应的标签为resultMap。

二、博客搜索

博客搜索页面我们调用方法根据搜索条件去查询。

持久层动态sql语句比较复杂，需要好好理解。即根据关键字（内容或者标题）作为查询条件进行模糊查询。

三、博客详情

点击博客就能跳转到博客详情，跳转到详情页面要有博客文章显示而且文章是以Markdown格式显示，文章内容显示在前端要转化为html格式，所以需要用到一个工具类。


业务层对博客详情的内容格式和浏览量做了操作，先根据博客id查询出内容再调用工具类将文章内容转换为HTML格式

之后每做一次访问访问量会自增并获取到该博客的评论总数。

另外博客评论楼中楼的功能相对比较复杂

思路解析：
楼中楼功能就是评论区可以让每个用户评论并且每条评论下方还可以不断评论以此类推。
我们把最初的每条评论成为父评论，每条父评论下方的评论都称之为子评论，一个实体类（实体类中多加了一个字段为父评论id）来表示，区别在于子评论中的又在实体类中用了一个ArrayList集合进行封装，并且每条子评论都有对应的父评论id，从而实现父评论下挂了多条子评论的功能。


代码描述：
1、先查询出所有父id为-1的评论，循环遍历获取id和别名，在查询出所有子评论，将子评论存入集合中
2、调用第二个方法查询是否为一级子评论，获取id和别名，如果还有二级评论
3、调用第三个方法根据一级评论id查询二级对应的子评论，如果还有三级，四级，则递归此方法循环该方法知道查询完所有子评论即可。

直接上代码

  //存放迭代找出的所有子代的集合
    private List<Comment> tempReplys = new ArrayList<>();

    @Override
    public List<Comment> listCommentByBlogId(Long blogId) {
        //查询出父节点
        List<Comment> comments = commentMapper.findByBlogIdParentIdNull(blogId, Long.parseLong("-1"));
        for(Comment comment : comments){
            Long id = comment.getId();
            String parentNickname1 = comment.getNickname();
            List<Comment> childComments = commentMapper.findByBlogIdParentIdNotNull(blogId,id);
//            查询出子评论
            combineChildren(blogId, childComments, parentNickname1);
            comment.setReplyComments(tempReplys);
            tempReplys = new ArrayList<>();
        }
        return comments;
    }
    
    private void combineChildren(Long blogId, List<Comment> 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);
            }
        }
    }

    private void recursively(Long blogId, Long childId, String parentNickname1) {
//        根据子一级评论的id找到子二级评论
        List<Comment> replayComments = commentMapper.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);
            }
        }//    新增评论

    }

四、博客评论保存

博客详情下方开启了评论功能我们便可以进行评论并做保存操作了。
并且也是实现了异步保存和查询评论操作。（此功能是由评论控制器实现）
如果是管理员登录我们还需要实现管理员头像显示功能。

业务层需要设置评论的创建时间和更新评论总数，再做保存操作。

持久层则只需调用方法插入数据到数据库即可。

五、底部栏功能实现

博客底部栏有文章总数，访问量等信息，是实时更新的所以我们需要对其进行查询，这里实现的是一个布局部查询的效果。

事件响应刷新：有请求才会刷新
通过JS HTML DOM或jQuery获取HTML元素，通过DOM方法或jQuery方法监听页面事件，获取用户请求；


持久层可以直接调用方法查询数据库中的数据即可。
注意sql语句的书写，调用的函数所对应的功能。