# Vue服务端渲染技术SSR-数据加载
前面我们已经把架子搭建好了
但是呢,还没有数据,所以接下来我们要去载一下数据了。
渲染流程
跟前端渲染不一样的是,后端渲染声明周期不一样了。所以我们获取数据也不是在mounted方法里去开始加载。
我们可以在asyncData里加载数据,也就是渲染之前去加载数据。
加载数据
如果没有axios的话先安装一下
npm install axios
然后导入进来
import axios from 'axios';
这里就贴出所有代码了
<template>
<div class="page-content">
<div class="content-container">
<div class="content-list">
<div class="content-item" v-for="item in dataResult.content" :key="item.id">
<div class="article-item-title" v-text="item.title">
</div>
<div class="article-item-info">
<span class="iconfont icon-Date"></span>
<span> 发表于 {{item.createtime|formatDate}}</span>
<span class="iconfont icon-view"></span>
<span>阅读次数 {{item.viewcount}}</span>
</div>
</div>
</div>
<div class="page-navigation clear-fix">
<div class="page-indicator">
<el-pagination
class="page-div"
background
:page-size="dataResult.pageable.pageSize"
:current-page="dataResult.pageable.pageNumber"
layout="prev, pager, next"
@current-change="loadByPage"
:total="dataResult.totalElements">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import {formatDate} from '~/utils/date'
export default {
methods: {
loadByPage(page) {
this.loadData(page)
},
loadData(page) {
console.log('page is -- > ' + page);
axios.get('http://localhost:50400/api/article/' + page).then(result => {
if (result.data.code === 10000) {
console.log(result.data.data);
this.dataResult = result.data.data
}
})
}
},
filters: {
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd')
}
},
asyncData() {
console.log('asyncData');
return axios.get('http://localhost:50400/api/article/1').then(result => {
if (result.data.code === 10000) {
console.log(result.data.data);
return {dataResult: result.data.data}
}
})
}
}
</script>
<style scoped="styles">
.page-indicator {
float: right;
margin-top: 20px;
}
.content-item {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 20px;
border-radius: 4px;
margin-bottom: 10px;
}
.content-item .article-item-info span {
line-height: 30px;
font-size: 12px;
color: #999;
}
.article-item-title {
font-size: 1.2em;
line-height: 2;
color: #555;
}
</style>
渲染代码
就这么一部分了
分页功能
分页这里页面使用的是element-ui
所以得先安装一下element-ui
也可以在package.json里添加依赖
然后npm install,如果有cnpm的话使用cnpm速度会比较快。
代码在前面已经全部贴出来了。可以看看前面的代码。
如果在多个地方需要请求数据,可以稍微对这些请求进行封装一下。提供一个工具类,专门做数据请求。而UI会显得简洁一些。
另外,这些面的内容也是可以分开写的,可以写成js,写成独立的css,然后引入即可。
效果
编写完以上的内容,效果如下: