使用 Vue.js 和 Axios 与 WordPress Rest API 交互-获取或提交WordPress数据
Vue.js和Axios从WordPress RestAPI获取并展示数据
我是一个使用Vue.js和Axios进行开发的前端工程师,这里主要介绍一下如何使用Vue.js和Axios从WordPress RestAPI获取并展示数据。
Vue.js是一种渐进式的前端框架,专注于构建用户界面。由于Vue.js的核心库仅关注视图层,因此它不包含内置的HTTP API。如果需要与服务器交互,必须引入第三方API。Vue.js官方推荐使用的HTTP库是Axios。Axios是一个非常棒的HTTP客户端库,它默认使用Promises,并在客户端和服务器上运行,因此非常适合在服务器端呈现期间获取数据。使用Vue.js和Axios可以从WordPressRestAPI获取数据,然后将其显示在前端UI上。接下来,我们将介绍如何使用Vue.js和Axios与WordPress RestAPI进行交互,以获取并提交数据。
下面的示例使用基于Vue.js的ElementUI实现了前端界面样式。使用其他前端框架也可以,如Bootstrap等效果会一样。
使用Vue.js和Axios从WordPress RestAPI获取并展示数据
下面的代码从RestAPI获取了WordPress的最新文章,并以卡片形式展示在前端。
[wprs_c-alert type="info" content="下面的代码是从一个Vue.js单文件组件中直接复制出来的,直接粘贴到页面中,不会显示任何内容,需要手动挂载到“#APP”上或者通过VueRouter挂载才能显示文章到页面中。"]
<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 RestAPI
下面的示例是一个基本的WordPress前端投稿表单。用户点击"立即投稿"后,会使用RestAPI将一篇草稿文章发布到WordPress后台。在RestAPI到达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中,让RestAPI进行验证。如果验证成功,就可以保存提交的数据。否则,会返回错误信息。
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-alert v-if="message.show" :title="message.title" :type="message.type"></el-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数据,用于WordPressRESTApi验证
//如果没有这个,提交数据时,会因为权限验证失败而提交不了
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 RestAPI获取提交数据了。只要熟练掌握JavaScript,就可以结合WordPress开发出一个功能丰富、界面漂亮的应用程序,比如WordPress使用者经常寻找的前端用户中心,甚至基于

-
IDC/ISP办理许可证的基本条件(附:IDC和ISP许可证申请流程) 2023-06-07 08:00:01
-
利用tinymce.activeEditor获取到 WordPress可视化编辑器中的值(附:tinymce.activeEditor常见其他用法) 2023-06-06 08:00:02
-
WordPress是什么框架吗?WordPress是用什么写的? 2023-06-06 08:00:02
-
WordPress哪个版本稳定好用(附:如何查看当前WordPress版本) 2023-06-06 08:00:02
-
Automattic 发布 wp-now:由 WordPress Playground 提供支持的本地开发环境 2023-06-05 08:00:02
-
PHP预定义常量都有哪些(含常见PHP魔术常量) 2023-06-04 08:00:01
-
php的 require 和include 有什么区别 2023-06-04 08:00:01
-
UGPT插件:国内首个永久免费WordPress ChatGPT插件 2023-06-04 08:00:01
-
wordpress seo哪个插件好用 – WordPress SEO by Yoast 2023-06-03 08:00:02
-
WordPress古腾堡编辑器模块开发教程 2023-06-03 08:00:02