Interacting with the WordPress Rest API using Vue.js and Axios - Getting or Submitting WordPress Data

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 进行交互，获取和提交数据。

下面的示例中，使用了基于 Vue.js 的 Element UI 实现前端界面样式，如果你熟悉其他前端框架，也可以使用其他框架（如 BootStrap）来实现前端界面样式，效果是一样的。

使用 Vue.js 和 Axios 从 WordPress Rest API 获取数据并展示

下面的代码通过 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>
    // 首先导入 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 的购物车订单系统等，都可以通过本文介绍的方法进行开发。