SpringBoot个人博客开发（十六）----功能实现5.前端博客展示

此时后端已经弄完了，缺少的只有前端，前端博客展示效果图

这个效果所需要的其实也是老一套，服务接口，服务接口实现，控制器。和一些新的方法
这一讲会将前端展示博客这部分直接说完。有耐心就看看，没耐心的翻下面有代码。其实最后还是直接放代码，看注释，我懒得一步步讲。。。。。。。
一开始不是为了测试项目404等项目创建了一个indexController吗？
在这个Controller中注入

@Autowired
private BlogService blogService;
@Autowired
private TypeService typeService;
@Autowired
private TagService tagService;

并且修改之前的getmapping

这里面这些东西都是在各自的服务接口中进行了修改的。首先是blogservice，这个添加了分页获取博客。
所以打开blogservice接口，在其中添加

Page<Blog> listBlog(Pageable pageable);//分页获取博客
List<Blog> listRecommendBlogTop(Integer size);//获取最新博客

还新添加了些东西，就一并放出来了。毕竟马上要结束了。
此时的接口内容为

package net.yq.springbootblog.service;

import net.yq.springbootblog.PersisentObject.Blog;
import net.yq.springbootblog.vo.BlogQuery;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;

import java.util.List;
import java.util.Map;

public interface BlogService {
   
    Blog getBlog(Long id);//获取博客
    Page<Blog> listBlog(Pageable pageable, BlogQuery blog);//博客管理搜索时分页获取博客
    Blog saveBlog(Blog blog);//保存博客
    Blog updateBlog(Long id,Blog blog);//更新博客
    void deleteBlog(Long id);//删除博客
    List<Blog> listRecommendBlogTop(Integer size);//获取最新博客
    Map<String,List<Blog>> archiveBlog();//博客归档
    Long countBlog();//获取博客条数
    Blog getAndConvert(Long id);//获取并转换markdown格式文章
    Page<Blog> listBlog(Pageable pageable);//分页获取博客
    Page<Blog> listBlog(Long tagId,Pageable pageable);//博客和标签的关联性获取博客
    Page<Blog> listBlog(String query,Pageable pageable);//全局搜索并展示

}

对应的最新的实现

package net.yq.springbootblog.service;

import net.yq.springbootblog.NotFoundException;
import net.yq.springbootblog.PersisentObject.Blog;
import net.yq.springbootblog.PersisentObject.Type;
import net.yq.springbootblog.repository.BlogRepository;
import net.yq.springbootblog.util.MarkdownUtils;
import net.yq.springbootblog.util.MyBeanUtils;
import net.yq.springbootblog.vo.BlogQuery;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.annotation.Transient;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.persistence.criteria.*;
import java.util.*;


@Service
public class BlogServiceImpl implements BlogService{
   

    @Autowired
    private BlogRepository blogRepository;

    @Override
    public Blog getBlog(Long id) {
   
        return blogRepository.getById(id);//根据ID获取博客
    }

    @Override
    public Page<Blog> listBlog(Pageable pageable, final BlogQuery blog) {
   
        return blogRepository.findAll(new Specification<Blog>() {
   
            @Override
            public Predicate toPredicate(Root<Blog> root,
                                         CriteriaQuery<?> cq,
                                         CriteriaBuilder cb) {
   
                List<Predicate> predicates = new ArrayList<>();
                if (!"".equals(blog.getTitle()) && blog.getTitle() != null) {
   
                    predicates.add(cb.like(root.<String>get("title"), "%" + blog.getTitle() + "%"));
                }
                if (blog.getTypeId() != null) {
   
                    predicates.add(cb.equal(root.<Type>get("type").get("id"), blog.getTypeId()));
                }
                if (blog.isRecommend()) {
   
                    predicates.add(cb.equal(root.<Boolean>get("recommend"), blog.isRecommend()));
                }
                cq.where(predicates.toArray(new Predicate[predicates.size()]));
                return null;
            }
        },pageable);//博客管理搜索时分页获取博客
    }

    @Override
    public Page<Blog> listBlog(Pageable pageable) {
   
        return blogRepository.findAll(pageable);//分页获取博客
    }


    @Transactional
    @Override
    public Blog saveBlog(Blog blog) {
   
        if (blog.getId() == null){
   //保存博客
            blog.setCreateTime(new Date());
            blog.setUpdateTime(new Date());
            blog.setViews(0);
        }else {
   
            blog.setUpdateTime(new Date());
        }
        return blogRepository.save(blog);
    }

    @Transactional
    @Override
    public Blog updateBlog(Long id, Blog blog) {
   //新增博客
        Blog b = blogRepository.getById(id);//先根据ID获取
        if (b == null){
   //获取不到
            throw new NotFoundException("博客不存在!");//抛出错误
        }
        BeanUtils.copyProperties(blog