如何查询我的 WordPress 博客以列出我的 Vue.js 网站上的最新帖子？

Posted 2023-02-22

【中文标题】如何查询我的 WordPress 博客以列出我的 Vue.js 网站上的最新帖子？

【英文标题】：How do I query my WordPress blog to list most recent posts on my Vue.js website?

【发布时间】：2020-12-12 10:20:59

【问题描述】：

我正在尝试从我的网站获取我最近发布的帖子，但无法正确调用 API。我做错了什么？

我正在使用 WordPress API 1.1 版和 Vue.js 2.0 版。我已经正确安装了 Axios 和所有必要的工具，包括 Vue.js Devtools 来查看正确 API 调用的结果。

但是，一旦我调用 API，它就不会列出任何帖子。

<template>
    <div>
        <div>
            <p>posts</p>
        </div>
    </div>
</template>

<script>
import Axios from "axios"

    export default 
        name: 'Blog',
        mounted() 
            this.getPosts();
        ,
        data() 
            return 
                postsURL: "https://public-api.wordpress.com/rest/v1.1/sites/ninjawebsitedesign.com/blog/posts/?number=2&pretty=true",
                posts: [],
                postsData: 
                    per_page: 20,
                    page: 1
                
            
        ,
        methods: 
            getPosts() 
                Axios.get(this.postsUrl,  params: this.postsData )
                    .then((response) => 
                        this.posts = response.data
                    )
                    .catch((error) => 
                        console.log(error)
                    )
            
        
    
</script>

<style scoped>
    ul li 
        color: black !important;
    
</style>

【问题讨论】：

除了 “不起作用” 之外还需要一些基本的调试细节，这告诉我们一点价值。是否正在提出请求、错误等？如果做出响应会是什么样子？

您是否检查过您的请求是否返回了任何数据？

【参考方案1】：

您需要在 wordpress 上启用 REST API 并使用此 url api：https://ninjawebsitedesign.com/wp-json/posts

【讨论】：

好的，但是我的 WordPress 网站存储在一个文件夹中。主域是一个 Vue.js 应用程序。如何引用未存储在主域中的站点？网址名称是什么？ “/”似乎可以分隔某些 API 函数，那么我如何将 ninjawebsitedesign.com/blog 之类的“文件夹”指示为我从中调用 API 的 WordPress 网站？

所以您的 wordpress 没有 url API，您是否可以访问 wordpress 面板？你需要两个端点 api.wordpress.com（带有安全令牌）和 vuejs.com TUTO：snipcart.com/blog/wordpress-vue-headless

我写完了，谢谢！ ninjawebsitedesign.com/Posts