使用 Vue.js 和 Axios 与 WordPress Rest API 交互-获取或提交WordPress数据

使用 Vue.js 和 Axios 与 WordPress Rest API 交互-获取或提交WordPress数据

使用 Vue.js 和 Axios 与 WordPress Rest API 交互-获取或提交WordPress数据

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

下面的代码是从一个 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-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 数据,用于 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 的购物车订单系统等,都可以通过本文介绍的方法进行开发。

本站提供 WordPress 主题定制开发服务

本站长期承接WordPress主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有7年 WordPress 开发经验, 如果你想用 WordPress 开发网站, 请联系 QQ: 470266798 或邮箱: 4626395@gmail.com 咨询。

2 thoughts on “使用 Vue.js 和 Axios 与 WordPress Rest API 交互-获取或提交WordPress数据

  1. Vue.js 目前非常火,新东西太多; 前端 停留在(JQuery+CSS)蒸气时代的我,感觉有点跟不上时代

    1. 直接看一下官方文档,做一个项目就掌握了,其实没多少东西。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*