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）在要使用的组件中引入

<div style="padding-left: 30%">
        <pagination v-bind:records="records" v-bind:per-page="10" v-model="page" v-bind:options="options" >
        </pagination>
      </div>

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

 二、数据绑定

（1） 前端

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

<template>
    <div class="container">
      <div class="whitebg bloglist">
      <ul v-for="(blog, index) in blogList">
        <li>
          <h3 class="blogtitle"><a v-on:click="read(blog.id)" target="_blank">{{blog.title}}</a></h3>
          <span class="blogpic imgscale"><i><a href="/">{{blog.category}}</a></i><a href="/" title=""><img v-bind:src="'../../static/images/'+index+'.jpg'" alt=""></a></span>
          <p class="blogtext">{{blog.content | getSummary}}</p>
          <p class="bloginfo"><i class="avatar"><img src="../../static/images/avatar.png"></i><span>{{blog.createUser}}</span><span>{{blog.createTime}}</span><span>浏览量：{{blog.views}}</span><span>【<a href="/">{{blog.category}}</a>】</span></p>
          <a v-on:click="read(blog.id)" class="viewmore">阅读更多</a> </li>
      </ul>
      </div>
      <div style="padding-left: 30%">
        <pagination v-bind:records="records" v-bind:per-page="10" v-model="page" v-bind:options="options" >
        </pagination>
      </div>
    </div>
</template>

<script>
    export default {
        name: "ShowArticleList",
      data(){
          return {
            page:1,
            options:{theme:'bootstrap4',texts:{count:''}},
            records:1,
            blogList:null
          }
      },
      watch:{
        page:{
          handler(newval, oldval){
            var currentPage = newval -1;
            fetch("/api/blog/getArticleList/"+ currentPage,{
              method:"post",
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(result => {
              if (!result.ok) {
                alert("通信失败，请联系管理员！");
              }
              return result.json()
            }).then(data => {
              this.records = data.records;
              this.blogList = data.blogList;
            })
          },
          immediate:true
        }
      },
      methods:{
          read(id){
            this.$store.commit("setId",id);
            this.$router.push({name:'showArticleLink'});
          }
      },
      filters:{
          getSummary(value){
            return value.substring(0, 200)+"..."
          }
      }
    }
</script>

（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<String, Object> get(@PathVariable("id") Integer id){
        HashMap<String, Object> 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<String, Object> delete(@PathVariable("id") Integer id){
        HashMap<String, Object> map = new HashMap<>(1);
        articleService.delete(id);
        map.put("result", true);
        return map;
    }

    @PostMapping("/getArticleList/{page}")
    public Map<String, Object> getArticleList(@PathVariable("page") Integer page){
        HashMap<String, Object> map = new HashMap<>(2);
        long records = articleService.getAllCount();
        map.put("records", records);
        List<Blog> 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