vue模板中调用wordpress某个分类的内容

建站知识

建站知识 2025年2月5日 340

在Vue.js中调用WordPress某个分类的内容，通常需要通过WordPress的REST API来获取数据。以下是一个简单的步骤指南，帮助你在Vue模板中实现这一功能。

1. 确保WordPress REST API已启用

WordPress默认启用了REST API，你可以通过访问以下URL来检查是否可用：

https://your-wordpress-site.com/wp-json/wp/v2/categories

如果返回了JSON格式的分类数据，说明REST API已启用。

2. 安装Axios

Axios是一个常用的HTTP客户端，用于在Vue.js中发送HTTP请求。你可以通过以下命令安装Axios：

bash

npm install axios

3. 创建Vue组件

在你的Vue组件中，使用Axios来获取WordPress某个分类的内容。

vue

<template>
  <div>
    <h1>{{ categoryName }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <a :href="post.link">{{ post.title.rendered }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      categoryName: '',
      posts: []
    };
  },
  created() {
    this.fetchCategoryPosts();
  },
  methods: {
    async fetchCategoryPosts() {
      const categorySlug = 'your-category-slug'; // 替换为你的分类slug
      
      // 获取分类ID
      const categoryResponse = await axios.get(`https://your-wordpress-site.com/wp-json/wp/v2/categories?slug=${categorySlug}`);
      const categoryId = categoryResponse.data[0].id;
      this.categoryName = categoryResponse.data[0].name;

      // 获取该分类下的文章
      const postsResponse = await axios.get(`https://your-wordpress-site.com/wp-json/wp/v2/posts?categories=${categoryId}`);
      this.posts = postsResponse.data;
    }
  }
};
</script>

<style scoped>
/* 添加样式 */
</style>