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