如何根据 API 获取的内容创建列表 + 详细信息页面

Posted 2023-02-22

【中文标题】如何根据 API 获取的内容创建列表 + 详细信息页面

【英文标题】：How to have list + details pages based on API fetched content

【发布时间】：2021-08-01 20:47:16

【问题描述】：

我的 nuxt 项目遇到问题。

当我使用 nuxt-link 路由页面时，它不会在我的页面中呈现组件，我猜这不是在进行 fetch 调用。

但是当我使用正常的 href 链接时，我的页面工作正常。一切就绪。

这是博客列表页面组件中的链接

//博客列表页sn-p

<template>
  <div>
    <div v-for="blog in blogs.response.posts" :key="blog.id" class="col-md-3">
      <nuxt-link :to="`/blogs/$blog.id`" class="theme-blog-item-link"> Click to View Blog </nuxt-link>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      blogs: [],
    
  ,
  async fetch() 
    this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/list?limit=4').then((res) => res.json())
  ,

</script>

但是如果我用 href 标记替换 nuxt-link 就可以了

<a :href="`/blogs/$blog.id`" class="theme-blog-item-link">
  Click to View Details
</a>

通过单击该链接，我想通过给定的 ID 查看博客的详细信息。即_id.vue，该页面的代码如下。

//这是具体的博客详情页面代码

<template>
  <div class="theme-blog-post">
    <div v-html="blogs.response.description" class="blogdesc"></div>  
  </div>
</template>

<script>
 export default 
   data()
    return 
      blogs: []
    
  ,
  async fetch() 
    const blogid = this.$route.params.id
    this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/detail?id='+blogid+'').then((res) => res.json())
  ,

</script>

问题出在 blogdetails 页面上，通过 nuxt-link 路由而不是渲染组件，而是通过正常的 a href 链接，它工作正常

我在控制台中收到此错误

 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <PageNotFound> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

    ---> <Error> at layouts/error.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

【问题讨论】：

给定模板中没有<nuxt-link>？

为什么在目标模板中需要 ？使用 路由到给定模板不起作用，但使用 标记，它可以正常工作

请分享不起作用的代码。

我已经更新了问题以明确表示，我已经分享了代码。有两个页面，博客列表和博客详细信息，从博客列表页面，我使用 路由到博客详细信息页面。

请给你的sn-ps代码命名并给出更广泛的范围，例如blog.id取自哪里？除了这个，剩下的逻辑是什么？ fetch() 应该是“详细信息”页面吗？您应该将其传递给特定的博客，而不是整个博客列表。

【参考方案1】：

因此，由于您的 API 需要一些 CORS 配置，因此这里有一个简单的解决方案，使用 JSONplaceholder API。

test.vue，几乎就是你的博客列表

<template>
  <div>
    <div v-if="$fetchState.pending">Fetching data...</div>
    <div v-else>
      <div v-for="item in items" :key="item.id">
        <nuxt-link :to="`/details/$item.id`"> View item # item.id </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      items: [],
    
  ,
  async fetch() 
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    this.items = await response.json()
  ,

</script>

details.vue，这个需要放入pages/details/_id.vue文件才能工作

<template>
  <div>
    <button @click="$router.push('/test')">Go back to list</button>
    <br />
    <br />

    <div v-if="$fetchState.pending">Fetching details...</div>
    <div v-else> details.email </div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      details: ,
    
  ,
  async fetch() 
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/$this.$route.params.id`)
    this.details = await response.json()
  ,

</script>

如您所见，为了保持一致和清晰，我在这里只使用async/await 而没有使用then。

试试这个例子，然后看看修复 CORS 问题。后者只是后端，与 Nuxt 无关。根据您的后端，快速 google 搜索可能会为您提供大量结果。

【讨论】：

嗨，伙计，我在上面发布了 git repo 链接，每当您从宝贵的时间中发现一点时，请尝试检查是什么问题以及如何解决。我尝试了在谷歌上找到的所有东西，似乎没有什么对我有用。

好的，所以我检查了你的回购。我在这里提交了一个拉取请求：github.com/imthegrv/hvtours/pull/2 现在从 git 中删除了 3 000 000 条无用的行。修复了一些小东西。有很多东西要修复。这完全超出了这个 *** 问题的范围。您将需要学习一门好的课程或一些指导来改进这个应用程序并使其准备好生产。不确定您的个人资料是什么，以及它是否是您工作中的日常应用程序或其他什么，但它需要很多爱。拉取请求修复了一些基本错误，还修复了/en/blogs 的主要问题。

感谢您的建议 Kissu 并感谢您的支持，是的，在此锁定期间，我正在尽我所能通过将我的 php codeigniter 网站前端转换为 vue 和 nuxt 来学习这种语言，还有很多东西要学。参加了关于 Udemy 的课程，希望对您有所帮助。如果出现任何问题，将发布并寻求支持。

也许先尝试关注 JS 基础，然后是 Vue，然后是 Nuxt。从 Nuxt 开始是个坏主意，因为它需要其他部分的知识。