springboot+vue个人博客系统（二） 博客分页及数据绑定

一、博客分页

分页插件使用vue-pagination-2。

（1）安装

npm install vue-pagination-2

（2） 在main.js中引入插件

import Pagination from 'vue-pagination-2'

Vue.component('pagination', Pagination);

（3）在要使用的组件中引入

这样，分页的效果就出来了。

 二、数据绑定

（1） 前端

前端请求分页数据，当用户点击了某一个博客后，将博客id存储的vuex中，在展示博客的另一组件中获取博客内容并展示。

（2）后端 

提供数据接口。

@RestController
public class ArticleController {

    private final ArticleService articleService;

    @Autowired
    public ArticleController(ArticleService articleService) {
        this.articleService = articleService;
    }

    @PostMapping("/saveArticle")
    public void save(@RequestBody(required = false) Blog blog){
        blog.setCreateTime(DateUtil.getLocalTime());
        articleService.save(blog);
    }

    @PostMapping("/getArticle/{id}")
    public Map get(@PathVariable("id") Integer id){
        HashMap map = new HashMap<>(1);
        Blog blog = articleService.findById(id);
        if (blog != null) {
            map.put("blog", blog);
            map.put("result", true);
        }else {
            map.put("result", false);
        }
        return map;
    }
    @PostMapping("/deleteArticle/{id}")
    public Map delete(@PathVariable("id") Integer id){
        HashMap map = new HashMap<>(1);
        articleService.delete(id);
        map.put("result", true);
        return map;
    }

    @PostMapping("/getArticleList/{page}")
    public Map getArticleList(@PathVariable("page") Integer page){
        HashMap map = new HashMap<>(2);
        long records = articleService.getAllCount();
        map.put("records", records);
        List blogList = articleService.getBlogListByPage(page);
        map.put("blogList", blogList);
        return map;
    }

    @PostMapping("/view/{id}")
    public void view(@PathVariable("id") Integer id){
        Blog blog = articleService.findById(id);
        Integer views = blog.getViews();
        views = views + 1;
        blog.setViews(views);

        articleService.save(blog);
    }
}

三、GitHub地址

前端：https://github.com/sustly/blog_vue_web

后端：https://github.com/sustly/blog_vue_server