用springboot把后台数据库分类数据显示给前台

根据sorted进行了排序 效果如下：

使用vue实现，index.html核心代码

      全部
     
     

      {{index+1}}/{{blogcate.categoryTitle}}
 

index.js核心代码：

var vue=new Vue({
    el:"#app",
    data:{
        
        blogCategories:[],
       
    },
//数据和方法加载完毕的钩子
created:function () {

        //用ajax异步执行获取博客分类内容
        this.loadCategory()
     
    },
        
methods:{
     loadCategory:function () {
         	//this是指vue实例
            var that =this
			//用mybatisplus插件获取后端数据库数据res
            axios.get("/api/blogCategory/load").then(function
                (res) {
                //res不知道返回什么，可以去打印用浏览器查看数据
                that.blogCategories = res.data
                。。。
            })
        },
}
    。。。

BlogCategoryController的java代码返回json数据给前台，用axios接受，实现异步处理！

@Controller
public class BlogCategoryController {
    @Autowired
    private IBlogCategoryService blogCategoryService;

    @ResponseBody
    @GetMapping("/api/blogCategory/load")
    public List findCategories(){
        return blogCategoryService.findBlogCategies();
    }
}

IBlogCategoryService接口 ,简单的增删改查接口用IService封装好了，实现复用！

public interface IBlogCategoryService extends IService {

    
    List findBlogCategies();
}

BlogCategoryServiceImpl实现类,ServiceImpl实现了简单的增删改查！

@Service
@Slf4j
public class BlogCategoryServiceImpl extends ServiceImpl implements IBlogCategoryService {
    
    @Override
    public List findBlogCategies() {
        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(BlogCategory::getStatus,1);
//        queryWrapper.orderByAsc(BlogCategory::getSorted);
        List blogCategories = this.list(queryWrapper);
        //用stream流排序去取代SQL排序
        if(!CollectionUtils.isEmpty(blogCategories)){
            blogCategories = blogCategories
                    .stream()
                    .sorted((a,b)->a.getSorted()-b.getSorted())
                    .collect(Collectors.toList());
        }


        return blogCategories;


    }
}

至此前后端分类动态生成已经打通关！