Извлечение содержательных данных с использованием VueJS и Nuxt.JS - PullRequest
Новая
       33

Извлечение содержательных данных с использованием VueJS и Nuxt.JS

0 голосов
/ 04 сентября 2018

Хорошо, я хочу получить данные (существующие) из Contentful, используя VueJS.

Я не разработчик, поэтому я не совсем понимаю, как это полностью работает, я смог пройти половину пути их учебника , но, поскольку у меня уже есть место и данные, я Застрял, учебник придерживается типа блога и никогда не упоминал, как я могу получить данные с другой структурой.

На основе этого урока я должен создать .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».

1 Ответ

0 голосов
/ 04 сентября 2018

Вы используете nuxt или "Vanilla Vue"? Эти идентификаторы, которые вы упоминаете, читаются в файле 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 в объекте nuxt.config читается в компонентах страницы (pages/index.vue или 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) и добавить его в env в nuxt.config.js (это можно изменить, чтобы избежать дублирования, но это другое раздел), а затем получить доступ к ним в компонентах страницы через env, чтобы запросить данные, используя getEntries.

Надеюсь, это поможет. :)

...