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

迷南。 2021-12-21 07:13 330阅读 0赞

## 一、博客分页 ##

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

（1）安装

npm install vue-pagination-2

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

import Pagination from 'vue-pagination-2'
    
    Vue.component('pagination', Pagination);

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70][]

##  二、数据绑定 ##

（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_web]

后端：[https://github.com/sustly/blog\_vue\_server][https_github.com_sustly_blog_vue_server]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70]: /images/20211221/da41baca2d72400b8409fb87c52f450e.png
[https_github.com_sustly_blog_vue_web]: https://github.com/sustly/blog_vue_web
[https_github.com_sustly_blog_vue_server]: https://github.com/sustly/blog_vue_server