Vue服务端渲染技术SSR-数据加载

前面我们已经把架子搭建好了

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>
            &nbsp;&nbsp;
            <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，然后引入即可。

效果

编写完以上的内容，效果如下：