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 挂载才能显示文章到页面中。” /]
{{post.title.rendered}}
操作按钮
使用 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 会对这个随机数进行验证，如果验证一致，就可以保存提交的数据了，如果验证不通过，则返回错误信息。
立即投稿
取消
上面的代码中，用户提交成功后，会显示一个提交成功的提示消息。为了精简文章的篇幅，没有把提交失败的处理方法贴出来，所以如果提交失败，不会有任何提示。有需要的朋友可以自行实现一下。
创建通用的 http 模块，方便在各个模块中调用
为了方便在多个模块直接调用数据，我们还可以编写一个通用的 http 模块，在其他模块使用时，直接引入这个模块即可。如下：
在其他模块使用时：
熟悉上上面的开发方法以后，在 WordPress 前端页面获取提交数据都可以直接通过 WordPress Rest API 进行，只要熟练 JavaScript，完全可以结合 WordPress 做一个功能丰富，界面漂亮的应用了，比如 WordPress 使用者经常寻找的前端用户中心，甚至基于WordPress 的购物车订单系统等，都可以通过本文介绍的方法进行开发。