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 的最新文章并以卡片的方式显示在前端。

[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 的购物车订单系统等，都可以通过本文介绍的方法进行开发。