Question

好的，我想使用VueJS从Contentful中提取数据（现有数据）。

我不是开发人员，所以我真的不太了解它是如何工作的，我可以进行their tutorial的一半，但是由于我已经拥有了空间和数据，所以我陷入了困境，该教程坚持使用博客类型，从未真正提及过如何提取具有不同结构的数据的任何内容。

根据教程，我必须创建一个包含

的.contentful.json。

{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_SPACE_ID": "YOUR_SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR_ACCESS_TOKEN"
}

除了他们提供的模板以外，他们没有提到我可以如何提取其他数据。

我想知道的是： 1.如果我有自己的空间而不是模板，那么如何或在何处可以找到类似于“ CTF_PERSON_ID”和“ CTF_BLOG_POST_TYPE_ID”的内容。

Answer 1

您使用的是nuxt还是“ Vanilla Vue”？您提到的这些ID是在nuxt.config.js文件中读取的，该文件是nuxt的主要配置文件。 Nuxt在服务器和客户端上运行的javascript，这就是为什么它需要知道什么是配置参数。

// ./nuxt.config.js
const config = require('./.contentful.json')

module.exports = {
  // ...
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  }
  // ...
}

在页面组件（env或pages/index.vue）中读取nuxt.config对象的pages/blog/index.vue属性。

const client = createClient()
export default {
  asyncData ({ env, params }) {
    return client.getEntries({
      'content_type': env.CTF_BLOG_POST_TYPE_ID,
      order: '-sys.createdAt'
    }).then(entries => {
      return {
        posts: entries.items
      }
    })
  },
  components: {
    ArticlePreview,
    Navigation
  }
}

如果您使用不同的结构，则可以在配置文件（.contentful.json）中添加新的内容类型ID，并将其添加到env中的nuxt.config.js中（可以对其进行重组，以避免复制，但这是一个不同的主题），然后通过env在页面组件中对其进行访问，以使用getEntries查询数据。

希望有帮助。：）

使用VueJS和Nuxt.JS提取内容丰富的数据

1 个答案: