基于Vue.js與WordPress Rest API構(gòu)建單頁應(yīng)用詳解

import Vue from 'vue'
import Router from 'vue-router'
import ArticleList from '@/components/articleList'
import Article from '@/components/article'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'ArticleList',
      component: ArticleList
    },
    {
      path: '/article/:id',
      name: 'Article',
      component: Article
    },
  ]
})

<template>
  <el-row>
    <el-col>
      <el-col class="article">
        <ul>
          <li>
            <h2>文章標(biāo)題</h2>
            <div>文章描述</div>
            <span>查看詳情</span>
          </li>
        </ul>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    data () {
      return {        
      }
    },
  }
</script>
<style lang="less"> 
</style>

<template>
  <el-row>
    <el-col class="article">
      <h2>標(biāo)題</h2>
      <p class="p"><span>作者：</span><span>發(fā)布時間：</span></p>
      <div></div>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
  }
</script>
<style lang="less">
</style>

import axios from 'axios';
let base = 'http://example.com/wp-json/wp/v2';
//獲取文章列表
export const getArticleList = params => {
  return axios.get(`${base}/posts`, params).then();
};

import {getArticleList,getCategories} from '../api/api';

data () {
  return {
    articleData: [{
      title: {
        rendered: ''
      },
       excerpt: {
        rendered: ''
      }
    }],
  }
},
mounted: function () {
  this.getarticlelist()
  this.getcategories()
},
methods: {
  getarticlelist(){
    getArticleList().then(res => {
      this.articleData = res.data
    })
  },
}

<ul>
  <li v-for="(item,index) in articleData">
    <h2 v-html="item.title.rendered"></h2>
    <div v-html="item.excerpt.rendered"></div>
    <span>查看詳情</span>
  </li>        
</ul>

<span @click="article(index)">查看詳情</span>
article(index){
  let ids = this.articleData[index].id
  this.$router.push({
    path: '../article/' + ids
  })
},

//獲取單篇文章
export const getArticle = ids => {
  return axios.get(`${base}/posts/${ids}`).then(res => res.data);
};

import {getArticle} from '../api/api';
getarticle(){
  //獲取id
  let ids = this.$route.params.id
  //使用獲取到的id去請求api
  getArticle(ids).then(res => {
    this.articleData = res
  })
},

<el-col class="article">
  <h2 v-html="articleData.title.rendered"></h2>
  <p class="p"><span>作者：{{articleData.author}}</span><span>發(fā)布時間：{{articleData.date}}</span></p>
  <div v-html="articleData.content.rendered"></div>
</el-col>

<el-pagination 
  layout="prev, pager, next" :page-size="per_page"
  :total="total" @current-change="handleCurrentChange">
</el-pagination>

let params = {
  page: this.page,
  per_page: this.per_page,   
}
getArticleList({params}).then(res => {
  let headerData = Object.values(res.headers)
  this.articleData = res.data
  this.total = parseInt(headerData[2])
         
})     

handleCurrentChange(val) {
  this.loading = true
  this.page = val
  this.getarticlelist()
},

//獲取文章分類
export const getCategories= params => {
  return axios.get(`${base}/categories`, params).then(res => res.data);
};
html
<ul>
  <li v-for="item in categoriesData">{{item.name}}
  </li>
</ul>
js
mounted: function () {
  getcategories(){
    getCategories().then(res => {
      this.categoriesData = res
    })
  }
}    

<ul>
  <li v-for="(item,index) in categoriesData" @click="categorie(index)"
            :class="{ 'active': active == index }">{{item.name}}
  </li>
</ul>

let params = {
  page: this.page,
  per_page: this.per_page,
  categories: this.categories
}

categorie(index){
  this.categories = this.categoriesData[index].id
  this.page = 1
  this.active = index
  this.getarticlelist()
}