基于SpringBoot + Vue的个人博客系统11——时间线页面

简介

前端实现时间线功能就比较简单，因为 Element-UI 中已经有现成的组件，详情可参考：https://element.eleme.cn/#/zh-CN/component/timeline

步骤

1、js 部分只用发送一个请求即可

import request from "@/http/request";
export default {
  name: "TimeLine",
  data() {
    return {
      timelineData: [],
    };
  },
  created() {
    request
      .getTimeline()
      .then((res) => {
        if (res.code === 0) {
          this.timelineData = res.data;
        } else {
          this.$notify.error({
            title: "提示",
            message: res.msg,
          });
        }
      })
      .catch((err) => {
        console.log(err);
        this.$notify.error({
          title: "提示",
          message: "网络忙，标签时间线失败",
        });
      });
  },
};

2、对应 @/http/request.js中的封装

  getTimeline() {
    return instance.get(urls.timeline).then(res => res.data);
  }

3、设计布局，展示时间线

<template>
  <el-row :gutter="0">
    <el-col :span="14" :offset="5">
      <el-timeline v-for="(timeline,index) in timelineData" :key="index">
        <h2 class="year">{{timeline.year}}</h2>
        <el-timeline-item
          v-for="(item, index) in timeline.items"
          :key="index"
          :timestamp="item.gmtCreate"
          placement="top"
        >
          <router-link class="title" :to="'/post/' + item.id">{{item.title}}</router-link>
        </el-timeline-item>
      </el-timeline>
    </el-col>
  </el-row>
</template>

<script>
// 此处省略......
</script>

<style scoped>
.el-row {
  margin-top: 20px;
}
.year {
  margin-bottom: 10px;
}
.title {
  font-size: 16px;
  text-decoration: none;
  color: #606266;
}
.title:hover {
  cursor: pointer;
  color: #0a0a0a;
}
</style>

说明：

• placement=“top” 用来设置时间显示的位置
• 使用了 Element-UI 中的分栏布局，使内容部分占 14 个栅格
• 文章的 title 使用 router-link 包裹，当点击的时候，可以跳转到对应的文章详情页面

页面效果：

参考代码：https://gitee.com/qianyucc/QBlog2/tree/v-8.0