编写头部信息组件
登录完成之后直接进入博客列表页面，然后加载博客列表的数据渲染出来。同时页面头部我们需要把用户的信息展示出来，因为很多地方都用到这个模块，所以我们把页面头部的用户信息单独抽取出来作为一个组件。
那么，我们先来完成头部的用户信息，应该包含三部分信息：id，头像、用户名，而这些信息我们是在登录之后就已经存在了sessionStorage。因此，我们可以通过store的getters获取到用户信息。
header.vue
<template>
<div class="m-content">
<h3>欢迎来到MarkerHub的博客</h3>
<div class="block">
<el-avatar :size="50" :src="user.avatar"></el-avatar>
<div>{{ user.username }}</div>
</div>
<div class="maction">
<span><el-link href="/blogs">主页</el-link></span>
<el-divider direction="vertical"></el-divider>
<span><el-link type="success" href="/blog/add">发表博客</el-link></span>
<el-divider direction="vertical"></el-divider>
<span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>
<span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
user: {
username: ‘请先登录‘,
avatar: ‘https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png‘
},
hasLogin: false
}
},
methods: {
logout() {
const _this = this
_this.$axios.get("/logout", {
headers: {
"Authorization": localStorage.getItem("token")
}
}).then(res => {
_this.$store.commit("REMOVE_INFO")
_this.$router.push("/login")
})
}
},
created() {
if(this.$store.getters.getUser.username) {
this.user.username = this.$store.getters.getUser.username
this.user.avatar = this.$store.getters.getUser.avatar
this.hasLogin = true
}
}
}
</script>
<style scoped>
.m-content {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.maction {
margin: 10px 0;
}
</style>
然后需要头部用户信息的页面只需要几个步骤：
import Header from "@/components/Header";
data() {
components: {Header}
}
# 然后模板中调用组件
<Header></Header>
博客分页
接下来就是列表页面，需要做分页，列表我们在element-ui中直接使用时间线组件来作为我们的列表样式，还是挺好看的。还有我们的分页组件。
需要几部分信息：
分页信息
博客列表内容，包括id、标题、摘要、创建时间
views\Blogs.vue
<template>
<div class="m-container">
<Header></Header>
<div class="block">
<el-timeline>
<el-timeline-item v-bind:timestamp="blog.created" placement="top" v-for="blog in blogs">
<el-card>
<h4><router-link :to="{name: ‘BlogDetail‘, params: {blogId: blog.id}}">{{blog.title}}</router-link></h4>
<p>{{blog.description}}</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
<el-pagination class="mpage"
background
layout="prev, pager, next"
:current-page=currentPage
:page-size=pageSize
@current-change=page
:total="total">
</el-pagination>
</div>
</template>
<script>
import Header from "@/components/Header";
export default {
name: "Blogs",
components: {Header},
data() {
return {
blogs: {},
currentPage: 1,
total: 0,
pageSize: 5
}
},
methods: {
page(currentPage) {
const _this = this
this.$axios.get(‘http://localhost:8081/blogs?currentPage=‘ + currentPage).then((res) => {
console.log(res.data.data.records)
_this.blogs = res.data.data.records
_this.currentPage = res.data.data.current
_this.total = res.data.data.total
_this.pageSize = res.data.data.size
})
}
},
mounted () {
this.page(1);
}
}
</script>
data()中直接定义博客列表blogs、以及一些分页信息。methods()中定义分页的调用接口page（currentPage），参数是需要调整的页码currentPage，得到结果之后直接赋值即可。然后初始化时候，直接在mounted()方法中调用第一页this.page(1)。完美。使用element-ui组件就是简单快捷哈哈！
注意标题这里我们添加了链接，使用的是标签。