springboot vue 前后端分离之博文标题展示页面

<!--suppress ALL -->
<template>
  <div>
    <header class="intro-header">
      <div class="container">
          <el-row class="row">
              <el-col class="24">
                  <div class="site-heading">
                      <h1>Journey Blog</h1>
                      <span class="subheading">journey 博客</span>
                  </div>
              </el-col>
          </el-row>
      </div>
    </header>
    <div class="container" v-loading="loading">
      <div class="row">
        <div class="">
          <el-row id="incomeNum" v-for="blog in BlogData" :key="blog.cid">
            <el-col :span="14" :offset="5" class="post-preview">
              <a :href="'localhost:80/blog/open/post/' + blog.cid ">
                <h2 class="post-title">
                  {{ blog.title }}
                </h2>
              </a>
              <p class="post-meta">作者：<a href="#">
                {{ blog.author }}
              </a> &nbsp;&nbsp; {{ blog.gtmCreate }}
              </p>
              <hr>
            </el-col>
          </el-row>
          <div class="clearfix">
            <p id="flagLoaded" style="display: none; text-align: center;">已全部加载</p>
            <a id="flagLoad" style="display: none;" class="btn btn-secondary float-right" @click="loadData()"><el-button type="primary" round>更早 &rarr;</el-button></a>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  import $ from 'jquery'

  export default {
    name: 'Blog_list',
    data() {
      return {
        BlogData: '',
        BlogDataCount: '',
        limit: 10,
        currentPage: 0,
        total: '',
        loading: true,
      }
    },
    methods: {
      getBlogList(limit,offset) {
        axios.get(`http://localhost/blog/open/list?type=article&limit=${limit}&offset=${offset}`).then((res) => {
          if(offset == 0){
            this.BlogData = res.data.rows
          }else{
            let temparr = res.data.rows
            temparr.forEach(blog => this.BlogData.push(blog))
            /*for(let blog of temparr){
              this.BlogData.push(blog)
            }*/
          }
          this.total = res.data.total
          $("#flagLoad").css("display","block");
          this.currentPage++;
          if (this.total <= this.currentPage * this.limit) {
            $("#flagLoaded").css("display","block")
            $("#flagLoad").css("display","none")
          }
          this.loading = false
        }).catch((err) => {
            console.log(err)
            this.loading = true
            this.$notify.error({
              title: '错误',
              message: '服务器访问出错'
            })

        })
      },
      loadData() {
        this.loading = true
        this.bindList(this.limit , this.currentPage * this.limit)
      },
      bindList(limit,offset) {
        this.getBlogList(limit,offset)
      }
    },
    mounted() {
      this.getBlogList(10,0)
    }
  }
</script>

<style scoped lang="scss">
  @import "src/styles/public.scss";
  .container{
    font-family: 'Lora', 'Times New Roman', serif;
    .intro-header{
      background-color: #808080;
      background: url('../../assets/img/blog/home-bg.jpg') no-repeat center center;
      background-size: auto auto;
      background-attachment: scroll;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
      margin-bottom: 50px;
    }
    .post-preview{
      text-align: left;
      a{
        text-decoration: none;
      }
      .post-title{
        font-size: 36px;
        margin-top: 30px;
        margin-bottom: 10px;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 800;
        color: $grey;
        text-underline: none;
        &:hover{
          color:$light-blue;
          transition: all 0.8s;
          -moz-transition: all 0.8s;
          -o-transition: all 0.8s;
          -webkit-transition: all 0.8s;
        }
      }
      .post-meta{
        color: #808080;
        font-size: 18px;
        font-style: italic;
        margin-top: 0;
        a{
          font-style: italic;
          text-decoration: none;
          color: $grey;
          font-family: 'Lora', 'Times New Roman', serif;
        }
      }
    }
    #flagLoaded{
      font-weight: 700;
    }
  }
</style>