=============
前端_列表页面
=============

1 文章列表和分页

/src/views/List.vue：

<template>
  <div>
    <Header/>

    <div>
      <el-timeline>
        <el-timeline-item :timestamp="record.created" placement="top"
                          v-for="record in records">
          <el-card>
            <h4>
              <router-link :to="{name:'Detail',params:{id:record.id}}">
                {{record.title}}
              </router-link>
            </h4>
            <p>{{record.description}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <el-pagination class="page"
                     background
                     layout="prev, pager, next"
                     :current-page="current"
                     :page-size="size"
                     :total="total"
                     @current-change=page>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header"

export default {
  name: "List",
  components: {Header},
  data() {
    return {
      records: {},
      current: 1,
      total: 0,
      size: 5
    }
  },
  methods: {
    page(currentPage) {
      const _this = this
      _this.$axios.get("/blogs?currentPage=" + currentPage).then(
        response => {
          let result = response.data
          console.log(result)

          _this.records = result.data.records
          _this.current = result.data.current
          _this.total = result.data.total
          _this.size = result.data.size
        })
    }
  },
  created() {
    this.page(1)
  }
}
</script>

<style scoped>
.page {
  text-align: center;
  margin: 0 auto;
}
</style>

2 日期时间格式

/src/main/java/com/weihome/barblog/entity/Blog.java：

...
public class Blog implements Serializable {
    ...
    @JsonFormat(pattern="yyyy-MM-dd")
    private LocalDateTime created;
    ...
}