使用 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使用者经常寻找的前端用户中心，甚至基于

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。