基於Vue.js 與 WordPress Rest API 構建單頁應用

前言

Vue.js 是用於構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統，具備簡單、靈活的 API。
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，咱們將使用它來請求api。
WordPress REST API爲WordPress數據類型提供API端點，容許開發人員經過發送和接收JSON（JavaScript Object Notation）對象與站點進行遠程交互 。

demo須要實現功能

• 獲取所有的文章列表
• 點擊查看詳情進入文章詳情頁展現文章內容
• 實現文章列表的分頁功能
• 獲取全部的文章分類
• 點擊分類獲取不一樣分類下的文章列表

環境搭建

vue-cli單頁應用的腳手架構建：

https://cn.vuejs.org/v2/guide/installation.html

Axios引入

https://www.kancloud.cn/yunye/axios/234845

element-ui引入

http://element-cn.eleme.io/2.0/#/zh-CN/component/installation

測試 API 的工具

https://www.getpostman.com/

Wordpress REST API手冊

https://developer.wordpress.org/rest-api/

新建兩個.vue文件分別顯示文章列表和文章詳情

文章列表：articleList.vue
文章詳情：article.vue
並在src/router.js中設置頁面路由以下：

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
        },
    ]
})

articleList.vue結構：

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

article.vue結構：

<template>
    <el-row>
        <el-col class="article">
            <h1>標題</h1>
            <p class="p"><span>做者：</span><span>發佈時間：</span></p>
            <div></div>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data () {
            return {
            }
        },
    }
</script>
<style lang="less">
</style>

文章列表api獲取：

在src目錄下新建api/api.js文件，注意替換域名

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

在articleList.vue中引入api.js：

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
        })
    },
}

使用v-for將數據渲染到頁面

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

到這裏一個簡單的顯示文章列表功能就完成了

文章詳情頁

爲文章列表中的查看詳情綁定事件:

當點擊時獲取當前點擊文章id，根據不一樣id跳轉到響應的詳情頁

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

如今已經實現了點擊跳轉到article詳情頁，接下來要作的是在詳情頁中顯示當前id下文章的內容，咱們須要在當前詳情頁載入的時候執行事件獲取文章內容
在api.js中定義獲取文章詳情的api

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

article.vue中引入並定義事件：

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">
    <h1 v-html="articleData.title.rendered"></h1>
    <p class="p"><span>做者：{{articleData.author}}</span><span>發佈時間：{{articleData.date}}</span></p>
    <div v-html="articleData.content.rendered"></div>
</el-col>

文章列表分頁的實現

element-ui分頁組件：

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

上面的組件中定義了handleCurrentChange事件，用於在點擊不一樣的頁數時去爲請求的api帶上不一樣的參數

請求所需參數

page：指定要返回的結果頁面。
例如，/wp/v2/posts?page=2是帖子結果的第二頁
per_page：指定要在一個請求中返回的記錄數，指定爲從1到100的整數。
例如，/wp/v2/posts?per_page=1只會返回集合中的第一個帖子,爲了肯定有多少頁的數據可用，API返回兩個標題字段，每一個分頁響應
api返回頭部帶的參數：
X-WP-Total：集合中的記錄總數
X-WP-TotalPages：包含全部可用記錄的總頁數
前面定義了請求文章列表api的方法，只須要將它修改下調用便可，須要給api傳遞兩個參數page和per_page，page的值須要從分頁組件中拿到，per_page看須要設定就能夠
api請求成功後能夠在頭部找到X-WP-Total字段，就是咱們須要的文章列表總數，由於字段X-WP-Total的格式不能直接取到值，須要先將它轉爲數組而後取value
修改後api請求的方法：

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()
},

獲取全部的文章分類

獲取全部分類比較簡單，獲取數據使用v-for渲染就能夠了

api.js

//獲取文章分類
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>

改造文章列表請求api

爲文章列表請求api添加categories字段,這個字段爲所需分類的id

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

編寫事件

點擊事件時須要作如下幾件事情：

• 獲取當前點擊分類id
• 爲當前分類添加選中樣式
• 讓請求中的page字段爲1
• 獲取請求結果從新渲染文章列表

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

服務器部署

根目錄下執行npm run dev生成dist靜態文件夾，將dist文件夾中內容部署到http服務器上便可經過域名訪問

demo地址

https://github.com/qianxiaoduan/Vue-WordPress-Rest-API
http://vue-blog.qianxiaoduan.com/

永久連接： https://blog.qianxiaoduan.com/archives/134