Vue.js 是一套構(gòu)建用戶界面(user interface)的漸進(jìn)式前端框架，因為 Vue.js 的核心庫只專注于視圖層，Vue.js 沒有內(nèi)置的 HTTP API，如果我們需要與服務(wù)器進(jìn)行交互，我們必須引入第三方的 API，Vue.js 官方推薦的 HTTP 庫是 Asios。Axios 是一個偉大的 HTTP 客戶端庫。它默認(rèn)使用 promises 并在客戶端和服務(wù)器上運行（這使得它適合于在服務(wù)器端渲染期間獲取數(shù)據(jù)）。Asios 很容易與 Vue.js 一起使用，從 WordPress Rest API 獲取數(shù)據(jù)，然后通過 Vue.js 展示出來。下面我們就舉例說明，如何使用 Vue.js 和 Axios 與 WordPress Rest API 進(jìn)行交互，獲取和提交數(shù)據(jù)。

下面的示例中，使用了基于 Vue.js 的 Element UI 實現(xiàn)前端界面樣式，如果你熟悉其他前端框架，也可以使用其他框架（如 BootStrap）來實現(xiàn)前端界面樣式，效果是一樣的。

使用 Vue.js 和 Axios 從 WordPress Rest API 獲取數(shù)據(jù)并展示

下面的代碼通過 Rest API 獲取了 WordPress 的最新文章并以卡片的方式顯示在前端。

<template>
    <el-row v-if="posts && posts.length">
        <el-col :span="8" v-for="post of posts">
            <el-card :body-style="{ padding: '0px' }">
                <div style="padding: 14px;">
                    <span>{{post.title.rendered}}</span>
                    <div class="bottom clearfix">
                        <time class="time">{{ post.modified }}</time>
                        <el-button type="text" class="button">操作按鈕</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    // 首先導(dǎo)入 axios 庫
    import axios from 'axios';

    export default {
        data: () => ({
            posts : [],
            errors: []
        }),

        // 組件創(chuàng)建后獲取數(shù)據(jù)，如果獲取成功，設(shè)置 posts 數(shù)據(jù)，如果失敗，設(shè)置錯誤數(shù)據(jù)
        created() {
            axios.get('http://abc.dev/wp-json/wp/v2/posts')
                 .then(response => {
                     this.posts = response.data
                 })
                 .catch(e => {
                     this.errors.push(e)
                 })
        }
    }
</script>

使用 Vue.js 和 Axios 提交表單數(shù)據(jù)到 WordPress Rest API

下面的示例是一個基本的 WordPress 前端投稿 表單，用戶點擊 “立即投稿” 后，會通過 Rest API 發(fā)布一個狀態(tài)為草稿的文章到 WordPress 后臺。通過 Rest API 到 WordPress 后臺需要驗證才能提交，因為是在同一個站點提交數(shù)據(jù)，我們使用最基本的 “Nonce” 驗證方法即可。這種方法首先需要設(shè)置 nonce 隨機(jī)數(shù)到前端，以便 Axios 庫使用。先加入以下代碼到 WordPress 的 functions.php 文件中。

add_action( 'wp_enqueue_scripts', 'rest_theme_scripts' );
function rest_theme_scripts() {
   wp_localize_script( 'jquery', 'wp', [
      'nonce'     => wp_create_nonce( 'wp_rest' ),
   ] );
}

上面的代碼會設(shè)置一個名稱為 “wp” 的 JavaScript 對象到頁面的 head 中，然后在下面我們就可以通過 wp.nonce 訪問 WordPress 后臺生成的這個隨機(jī)數(shù)了，把這個隨機(jī)數(shù)加入到 Axios 的 http header 中，Rest API 會對這個隨機(jī)數(shù)進(jìn)行驗證，如果驗證一致，就可以保存提交的數(shù)據(jù)了，如果驗證不通過，則返回錯誤信息。

<template>
    <el-form ref="form" :model="form" label-width="80px">

        <el-c-alert v-if="message.show" :title="message.title" :type="message.type"></el-c-alert>

        <el-form-item label="文章標(biāo)題">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章摘要">
            <el-input type="textarea" v-model="form.excerpt"></el-input>
        </el-form-item>
        <el-form-item label="文章內(nèi)容">
            <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即投稿</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import axios from 'axios';

    // 設(shè)置 axios 全局 header nonce 數(shù)據(jù)，用于 WordPress REST Api 驗證，
    // 如果沒有這個，提交數(shù)據(jù)時，會因為權(quán)限驗證失敗而提交不了
    axios.defaults.headers.post['X-WP-Nonce'] = wp.nonce;

    export default {
        data() {
            return {
                form   : {
                    title   : '',
                    excerpt : '',
                    content : '',
                },
                message: {
                    title: "",
                    type : "",
                    show : false
                }
            };
        },

        methods: {
            onSubmit() {
                axios.post('http://abc.dev/wp-json/wp/v2/posts', {
                    title   : this.form.title,
                    excerpt : this.form.excerpt,
                    content : this.form.content,
                })
                     .then(response => {
                         this.message.title = "保存成功";
                         this.message.type = "success";
                         this.message.show = true;
                     })
                     .catch(e => {
                         this.errors.push(e)
                     });
            }
        }

    };
</script>

上面的代碼中，用戶提交成功后，會顯示一個提交成功的提示消息。為了精簡文章的篇幅，沒有把提交失敗的處理方法貼出來，所以如果提交失敗，不會有任何提示。有需要的朋友可以自行實現(xiàn)一下。

創(chuàng)建通用的 http 模塊，方便在各個模塊中調(diào)用

為了方便在多個模塊直接調(diào)用數(shù)據(jù)，我們還可以編寫一個通用的 http 模塊，在其他模塊使用時，直接引入這個模塊即可。如下：

<script>
    import axios from 'axios';

    export const HTTP = axios.create({
        baseURL: `http://jsonplaceholder.typicode.com/`,
        headers: {
            Authorization: 'Bearer {token}'
        }
    })
</script>

在其他模塊使用時：

<script>
    import {HTTP} from './http-common';

    export default {
        data: () => ({
            posts: [],
            errors: []
        }),

        created() {
            HTTP.get(`posts`)
                .then(response => {
                    this.posts = response.data
                })
                .catch(e => {
                    this.errors.push(e)
                })
        }
    }
</script>

熟悉上上面的開發(fā)方法以后，在 WordPress 前端頁面獲取提交數(shù)據(jù)都可以直接通過 WordPress Rest API 進(jìn)行，只要熟練 JavaScript，完全可以結(jié)合 WordPress 做一個功能豐富，界面漂亮的應(yīng)用了，比如 WordPress 使用者經(jīng)常尋找的前端用戶中心，甚至基于WordPress 的購物車訂單系統(tǒng)等，都可以通過本文介紹的方法進(jìn)行開發(fā)。