Vue.js?是一套構建用戶界面(user interface)的漸進式前端框架，因為 Vue.js 的核心庫只專注于視圖層，Vue.js 沒有內置的 HTTP API，如果我們需要與服務器進行交互，我們必須引入第三方的 API，Vue.js 官方推薦的 HTTP 庫是 Asios。Axios 是一個偉大的 HTTP 客戶端庫。它默認使用 promises 并在客戶端和服務器上運行（這使得它適合于在服務器端渲染期間獲取數據）。Asios 很容易與 Vue.js 一起使用，從 WordPress Rest API 獲取數據，然后通過 Vue.js 展示出來。下面我們就舉例說明，如何使用 Vue.js 和 Axios 與?WordPress Rest API?進行交互，獲取和提交數據。
- 原文來源：wordpress智庫
最新教程如下
下面的示例中，使用了基于 Vue.js 的 Element UI 實現前端界面樣式，如果你熟悉其他前端框架，也可以使用其他框架（如 BootStrap）來實現前端界面樣式，效果是一樣的。
使用 Vue.js 和 Axios 從 WordPress Rest API 獲取數據并展示
下面的代碼通過 Rest API 獲取了 WordPress 的最新文章并以卡片的方式顯示在前端。
[wprs_c-alert type=”info” content=”下面的代碼是從一個 Vue.js 單文件組件中直接復制出來的，直接粘貼到頁面中，不會顯示任何內容，需要手動掛載到 “#APP” 上或者通過 Vue Router 掛載才能顯示文章到頁面中。” /]
<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>
// 首先導入 axios 庫
import axios from 'axios';
export default {
data: () => ({
posts : [],
errors: []
}),
// 組件創建后獲取數據，如果獲取成功，設置 posts 數據，如果失敗，設置錯誤數據
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 提交表單數據到 WordPress Rest API
下面的示例是一個基本的?WordPress 前端投稿?表單，用戶點擊 “立即投稿” 后，會通過 Rest API 發布一個狀態為草稿的文章到 WordPress 后臺。通過 Rest API 到 WordPress 后臺需要驗證才能提交，因為是在同一個站點提交數據，我們使用最基本的 “Nonce” 驗證方法即可。這種方法首先需要設置 nonce 隨機數到前端，以便 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' ),
] );
} 上面的代碼會設置一個名稱為 “wp” 的 JavaScript 對象到頁面的 head 中，然后在下面我們就可以通過?wp.nonce?訪問 WordPress 后臺生成的這個隨機數了，把這個隨機數加入到 Axios 的 http header 中，Rest API 會對這個隨機數進行驗證，如果驗證一致，就可以保存提交的數據了，如果驗證不通過，則返回錯誤信息。
<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="文章標題">
<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="文章內容">
<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';
// 設置 axios 全局 header nonce 數據，用于 WordPress REST Api 驗證，
// 如果沒有這個，提交數據時，會因為權限驗證失敗而提交不了
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>上面的代碼中，用戶提交成功后，會顯示一個提交成功的提示消息。為了精簡文章的篇幅，沒有把提交失敗的處理方法貼出來，所以如果提交失敗，不會有任何提示。有需要的朋友可以自行實現一下。
創建通用的 http 模塊，方便在各個模塊中調用
為了方便在多個模塊直接調用數據，我們還可以編寫一個通用的 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>熟悉上上面的開發方法以后，在 WordPress 前端頁面獲取提交數據都可以直接通過 WordPress Rest API 進行，只要熟練 JavaScript，完全可以結合 WordPress 做一個功能豐富，界面漂亮的應用了，比如 WordPress 使用者經常尋找的前端用戶中心，甚至基于WordPress 的購物車訂單系統等，都可以通過本文介紹的方法進行開發。
