新增个人主页页面

src/main.js

@@ -20,7 +20,7 @@ import mavonEditor from 'mavon-editor'
 import "mavon-editor/dist/css/index.css"
 Vue.use(mavonEditor)
 
-axios.defaults.baseURL = "http://62.234.217.137:8088"
+axios.defaults.baseURL = "http://127.0.0.1:8088"
 
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {

src/router/index.js

@@ -81,6 +81,14 @@ const routes = [
       title: 'Xubx的博客'
     }
   },
+  {
+    path: '/personalHomapage',
+    name: 'PersonalHomePage',
+    component: () => import('../views/PersonalHomepage.vue'),
+    meta: {
+      title: '个人主页'
+    }
+  }
 ]
 
 const router = new VueRouter({

src/views/PersonalHomepage.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="personal-homepage">
+    <Menu></Menu>
+    <br>
+    <div>
+
+    </div>
+    <div class="container">
+      <!-- 引用导航 -->
+      <el-row>
+        <div class="live2d-container">
+          <el-col :span="1">
+            <live2d style="position: absolute; left: 0; bottom: 0;"
+              :model="['Potion-Maker/Pio', 'school-2017-costume-yellow']" :direction="direction" :size="size">
+            </live2d>
+          </el-col>
+        </div>
+        <el-col :span="23">
+          <el-card :body-style="{ padding: '0px' }" v-for="blog in pagedBlogs" style="margin-bottom: 20px;"
+            :key="blog.id">
+            <el-col :span="12">
+              <router-link :to="{ name: 'BlogDetail', params: { blogId: blog.id } }">
+                <img :src="blog.coverImage" class="pulse animated image" :data="blog.id" />
+              </router-link>
+            </el-col>
+            <el-col :span="12">
+              <!-- 路由跳转 -->
+              <br>
+              <router-link :to="{ name: 'BlogDetail', params: { blogId: blog.id } }">
+                <h4 style="font-size: 20px">{{ blog.title }} </h4>
+              </router-link>
+              <el-divider></el-divider>
+              <div class="bottom">
+                <p>{{ blog.description }}</p>
+              </div>
+            </el-col>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
+        :current-page="currentPage" hide-on-single-page="true" @current-change="handleCurrentChange">
+      </el-pagination>
+
+    </div>
+
+    <br>
+    <Footer></Footer>
+    <br>
+
+  </div>
+</template>
+
+
+<script>
+import axios from "axios";
+import Menu from "../components/Menu";
+import Footer from "../components/Footer";
+// 在组件中引入
+import live2d from 'vue-live2d'
+import { IMAGE_BASE_URL } from "../config/ImageUrl";
+
+export default {
+  components: {
+    Menu,
+    Footer,
+    live2d
+  },
+  beforeRouteEnter(to, from, next) {
+    // 在组件进入之前，将页面滚动到顶部
+    window.scrollTo(0, 0);
+    next();
+  },
+  created() {
+    this.getBlogs();
+  },
+  beforeRouteLeave(to, from, next) {
+    // 清理操作，例如重置数据或取消订阅
+    // 在离开该页面时执行
+
+    next();
+  },
+  data() {
+
+    return {
+      blogs: {},
+      currentPage: 1, //当前页
+      total: 0, //总共多少页
+      pageSize: 3, //每一页的数据个数
+      pagedBlogs: [],
+      imageUrls: [
+        require("../assets/gundam1.png"),
+        require("../assets/gundam2.png"),
+        require("../assets/gundam3.png"),
+        require("../assets/gundam4.png"),
+        require("../assets/gundam5.png"),
+        require("../assets/gundam6.png"),
+        require("../assets/gundam7.png"),
+        require("../assets/gundam8.png"),
+      ],
+      direction: 'right',
+      width: 500,
+      height: 500,
+      size: 350,
+      tips: {
+        mouseover: [{
+          selector: '.vue-live2d',
+          texts: ['这样可以修改默认语句']
+        }]
+      },
+    }
+  },
+  methods: {
+    getBlogs() {
+      const that = this;
+      axios.get("/blog/getBlogs").then((response) => {
+        that.blogs = response.data;
+        for (let index in that.blogs) {
+          that.blogs[index].coverImage = IMAGE_BASE_URL + that.blogs[index].coverImage;
+          console.log(that.blogs[index].coverImage);
+        }
+        that.total = that.blogs.length; //总博客数
+        that.handleCurrentChange(that.currentPage); //初始化当前页
+      });
+    },
+    handleCurrentChange(page) {
+      const startIndex = (page - 1) * this.pageSize; //当前页的起始索引
+      const endIndex = startIndex + this.pageSize; //当前页的结束索引
+      this.pagedBlogs = this.blogs.slice(startIndex, endIndex); //通过分割获取当前页的数据
+    },
+  },
+  name: "PersonalHompageView",
+};
+</script>
+
+<style scoped>
+/*base code*/
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+/*the animation definition*/
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1)
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05)
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1)
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+    -ms-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1)
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    -ms-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05)
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    -ms-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1)
+  }
+}
+
+.pulse:hover {
+  -webkit-animation-name: pulse;
+  animation-name: pulse
+}
+
+.live2d-container {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+.personal-homepage {
+  background-color: #e6e6e6;
+
+}
+
+.container {
+  /* 居中显示 */
+  margin: 0 auto;
+  width: 60%;
+  z-index: 10;
+}
+
+.bottom {
+  margin-top: 10px;
+}
+
+.image {
+  width: 100%;
+  display: block;
+}
+</style>