Как создать бессерверное приложение Vue.js на основе CMS

1656647774 kak sozdat besservernoe prilozhenie vuejs na osnove cms

Джейк Люметта

7nEUbLlT8j4UsfeZ411yzYdvAoG-DUglALzL
Фотография 贝莉儿 NG на Unsplash

Vue.js завоевывает большую любовь и не зря растет популярность. Как постепенно адаптируемый фреймворк он легок, реактивен и базируется на компонентах, что позволяет создавать подключаемые компоненты, которые можно добавлять к любому проекту.

Прогрессивная структура Vue.js отлично подходит для бессерверных архитектур приложений. Разработчики все чаще обращаются к бессерверной архитектуре, поскольку бессерверная архитектура позволяет быстрее создавать и настраивать продукты без необходимости нести нагрузку (обслуживание серверов, сбои в работе и узкие места масштабирования) традиционной серверной архитектуры.

Vue.js и его отличная постепенная адаптация позволяют попробовать Vue, не подвергая риску существующую кодовую базу.

В этой статье вы узнаете, как создать бессерверное приложение Vue.js с помощью ButterCMS. ButterCMS – это безголовая CMS и платформа для ведения блогов, позволяющая создавать программы на основе CMS с помощью любого языка программирования. Этот учебник покажет вам, как добавить производительные API содержимого в программу Vue.js. Эти API просты в навигации даже для нетехнических членов вашей команды, что позволяет наслаждаться гибким управлением содержимым без необходимости развертывать и поддерживать собственную инфраструктуру CMS.

В частности, мы рассмотрим три случая использования: маркетинговые страницы, блоги и базы знаний с образцами кода. Готовый код этого руководства доступен на GitHub.

Начинаем

Сначала установите ButterCMS JS SDK. Мы будем использовать это для запроса содержимого API.

npm install buttercms — save

После установки вы можете следовать приведенным ниже инструкциям для создания трех типов содержимого: маркетинговых страниц, блогов и баз знаний (например, часто задаваемые вопросы).

Разместите маркетинговые страницы

Предположим, вы хотите позволить нетехническому человеку в вашей команде добавлять странички примеров клиента на ваш маркетинговый сайт. Для этого мы создадим в качестве примера страницу примера. Используя информационную панель ButterCMS, вы можете создать «тип страницы» под названием «Пример клиента» и определить поля.

GMhXSxeSjG0xWjQCklBRTlk0L95gvRhmoACg

Сделав это, вы можете создать свою первую страницу. Укажите название и URL страницы с помощью информационной панели Butter и заполните содержимое страницы. Когда все это будет сделано, API ButterCMS вернет вашу определенную страницу в формате JSON. Это должно выглядеть примерно так:

{ “data”: {   “slug”: “acme-co”,   “fields”: {     “facebook_open_graph_title”: “Acme Co loves ButterCMS”,     “seo_title”: “Acme Co Customer Case Study”,     “headline”: “Acme Co saved 200% on Anvil costs with ButterCMS”,     “testimonial”: “<p>We’ve been able to make anvils faster than ever before! — <em>Chief Anvil Maker</em></p>\r\n<p><img src=\” alt=\”\” caption=\"false\" width=\”249\” height=\”249\” /></p>”,     “customer_logo”: “    }  }}

Далее откройте редактор кода и создайте файл под названием buttercms.js в вашем /src каталог.

Если у вас нет проекта, создайте его, введя следующее:

vue init webpack buttercms-projectcd buttercms-projectnpm inpm i -S buttercmsnpm run dev

Тогда, в src/buttercms.js :

import Butter from ‘buttercms’;
const butter = Butter(‘your_api_token’);

Теперь обновите маршруты в своем приложении. Доступ router/index.js и

import Vue from ‘vue’import Router from ‘vue-router’import CustomersHome from ‘@/components/CustomersHome’import CustomerPage from ‘@/components/CustomerPage’
Vue.use(Router)
export default new Router({  mode: ‘history’,  routes: [      {        path: ‘/customers/’,        name: ‘customers-home’,        component: CustomersHome      },      {        path: ‘/customers/:slug’,        name: ‘customer-page’,        component: CustomerPage      }    ]  })

Теперь, чтобы настроить страницу «клиенты» для перечня всех ваших клиентов, мы определим a getpages() способ получения всех страниц клиентов. В components/CustomersHome.vue файл, мы добавляем следующее:

<script>  // import ButterCMS from  import { butter } from ‘@/buttercms’  export default {    name: ‘customers-home’,    data() {      return {      page_title: ‘Customers’,      // Create array to hold the pages from ButterCMS API      pages: []    }  },  methods: {    // Get List of Customer Pages    getPages() {      butter.page.list(‘customer_case_study’)        .then((res) => {          // console.log(res.data.data)          // Check the results in the console         this.pages = res.data.data      })    }  },created() {  // Fire on page creation  this.getPages()    }  }</script>

Показать результаты:

<template>  <div id=”customers-home”>    <h1>{{ page_title }}</h1>    <div v-for=”(page,index) in pages” :key=”page.slug + ‘_’ + index”>      <router-link :to=”’/customers/’ + page.slug”>        <div>          <img :src=”page.fields.customer_logo” alt=””>          <h2>{{ page.fields.headline }}</h2>        </div>      </router-link>    </div>  </div></template>
9AgAa7mEf-ClV924vr6009jjc3A1aVA1o5ao
Пример чего-то близкого тому, что вы имеете на данный момент после публикации одного примера

Теперь мы настроим страницу для просмотра отдельного клиента. Для этого в components/CustomerPage.vue мы определяем a getPage() метод получения страницы конкретного клиента на основе ее слагаемости:

<script>  import { butter } from ‘@/buttercms’  export default {    name: ‘customer-page’,    data() {      return {      slug: this.$route.params.slug,      page: {        slug: ‘’,        fields: {}      }    }  },  methods: {    getPage() {      butter.page.retrieve(‘customer_case_study’, this.slug)        .then((res) => {        console.log(res.data.data)        this.page = res.data.data      }).catch((res) => {        console.log(res)      })    }  },  created() {    this.getPage()    }  }</script>

Когда вы отразите результат, вы должны получить:

<template>  <div id=”customer-page”>    <figure>      <img :src=”page.fields.customer_logo”>    </figure>    <h1>{{ page.fields.headline }}</h1>    <h3>Testimonials</h3>    <div v-html=”page.fields.testimonial”></div>    <div v-html=”page.fields.body”></div>  </div></template>
vf7fKxt3xSesNmIpsyRH9rxo1a3iUF8ypkel
Вы только что создали нечто подобное

Удачи! Теперь вы можете перейти к странице клиента, созданной на информационной панели Butter, с помощью списка всех страниц клиента или непосредственно по URL-адресу.

Добавьте базу знаний

Нижеследующее руководство проведет вас через создание базы знаний для вашей программы Vue.js. Для этого мы будем использовать «Поля содержимого» ButterCMS. Поля содержимого – это просто глобальные части содержимого, которыми может управлять ваша команда. Это содержимое может включать несколько страниц, и каждое поле содержимого имеет уникальный идентификатор, который можно запрашивать, как вы увидите ниже.

Настройка полей содержимого

Во-первых, вам нужно будет настроить некоторые специальные поля содержимого. Используя информационную панель, можно настроить рабочее пространство для организации полей содержимого. Рабочие пространства позволят редакторам контента управлять содержимым, не влияя на разработку или API.

cmUx8ENPpMDOGxy0PkwpDn-Ro4DPMCqLLoff

В рабочей области нажмите кнопку для создания нового поля содержимого. Выберите тип объекта и назовите поле «Заголовок часто задаваемых вопросов». У него будет слог API «faq_headline».

8rJmYAZ9riqhFy0A3BJCbEdi6s6L6UOuMpAd

После сохранения добавьте еще одно поле — но на этот раз выберите тип «Коллекция» и назовите поле «Элементы часто задаваемых вопросов». У него будет слог API «faq_items». На следующем экране установите два свойства для элементов в коллекции. Теперь вернитесь к рабочей среде и обновите заголовок и добавьте некоторые вопросы.

Интеграция вашей программы

Теперь, когда вы создали динамическое содержимое, пора отобразить динамическое содержимое в вашем приложении. Для этого вы получите поля с помощью вызова API и ссылаетесь на них в своем представлении. Сначала настройте маршрут на страницу часто задаваемых вопросов:

Мы добавим маршруты часто задаваемых вопросов router/index.js:

import Vue from ‘vue’import Router from ‘vue-router’
import FAQ from ‘@/components/FAQ’
Vue.use(Router)
export default new Router({  mode: ‘history’,  routes: [    {      path: ‘/faq’,      name: ‘faq’,      component: FAQ    }  ]})

Затем создайте components/FAQ.vue с вызовом для получения часто задаваемых вопросов по API:

<script>  import { butter } from ‘@/buttercms’  export default {    name: ‘faq’,    data() {      return {        page_title: ‘FAQ’,        faq_items: []    }  },  methods: {    getFaqs() {      butter.content.retrieve([‘faq_headline’, ‘faq_items’])        .then((res) => {        console.log(res.data.data)        this.page_title = res.data.data.faq_headline        this.faq_items = res.data.data.faq_items      })    }  },  created() {    this.getFaqs()    }  }</script>

Обратите внимание, что мы предварительно определили page_title как «FAQ», а затем обновил его вызовом API в «Frequently Asked Questions».

<template>  <div id=”faq”>    <h1>{{ page_title }}</h1>    <div v-for=”(faq, index) in faq_items” :key=”index”>      <p>{{ faq.question }}</p>      <p>{{ faq.answer }}</p>    </div>  </div></template>

Отображенный результат должен выглядеть следующим образом:

v6UCEaryIPeuqMhdM3QZr0zV9TY2j8udSuz1

Теперь ваша команда может обновлять значение из информационной панели Butter, и соответствующее содержимое в вашем приложении будет обновляться автоматически.

Двигатель блогов

Наконец, мы рассмотрим добавление двигателя блога. Вы можете быстро создать блог на основе CMS с помощью Vue.js.

Отображение сообщений

Мы начнем с создания маршрута блога с помощью vue-router. Для отображения публикаций мы создаем простой /blog маршрут в нашей программе и получение сообщений блога, а также a /blog/:slug маршрут обработки отдельных сообщений.

в router/index.js:

import Vue from ‘vue’import Router from ‘vue-router’import BlogHome from ‘@/components/BlogHome’import BlogPost from ‘@/components/BlogPost’
Vue.use(Router)
export default new Router({  mode: ‘history’,  routes: [    {      path: ‘/blog/’,      name: ‘blog-home’,      component: BlogHome    },    {      path: ‘/blog/:slug’,      name: ‘blog-post’,      component: BlogPost    }  ]})

Чтобы создать домашнюю страницу своего блога, на которой будут отображаться последние публикации, вы создаете components/BlogHome.vue:

<script>  import { butter } from ‘@/buttercms’  export default {    name: ‘blog-home’,    data() {      return {        page_title: ‘Blog’,        posts: []      }    },    methods: {      getPosts() {        butter.post.list({          page: 1,          page_size: 10        }).then((res) => {          // console.log(res.data)          this.posts = res.data.data        })      }    },    created() {      this.getPosts()    }  }</script>

Вам нужно отобразить содержимое, определив шаблон и вызвав поля в том же файле компонента:

<template>  <div id=”blog-home”>    <h1>{{ page_title }}</h1>
// Create v-for and apply a key for Vue. Example is using a combination of the slug and index
    <div v-for=”(post,index) in posts” :key=”post.slug + ‘_’ + index”>      <router-link :to=”’/blog/’ + post.slug”>        <article class=”media”>          <figure>
// Bind results using a ‘:’ 
// Use a v-if/else if their is a featured_image 
          <img v-if=”post.featured_image” :src=”post.featured_image” alt=””>          <img v-else src=” alt=””>          </figure>          <h2>{{ post.title }}</h2>          <p>{{ post.summary }}</p>        </article>      </router-link>    </div>  </div></template>
yjoDoCoG3CgEy8xYE-c1eUbLApYPPqF1wjAP
Домашняя страница вашего блога будет выглядеть подобно, если ваши поля соответствуют примеру

Далее создайте components/BlogPost.vue которая будет вашей страницей сообщения в блоге для перечня одной публикации.

<script>  import { butter } from ‘@/buttercms’  export default {    name: ‘blog-post’,    data() {      return {        post: {}      }    },    methods: {      getPost() {        butter.post.retrieve(this.$route.params.slug)          .then((res) => {            // console.log(res.data)            this.post = res.data          }).catch((res) => {            console.log(res)          })      }    },    created() {      this.getPost()    }  }</script>

Теперь вам нужно определить шаблон и вызвать поля содержимого публикации в блоге:

<template>  <div id=”blog-post”>    <h1>{{ post.data.title }}</h1>    <h4>{{ post.data.author.first_name }} {{ post.data.author.last_name }}</h4>    <div v-html=”post.data.body”></div>
    <router-link v-if=”post.meta.previous_post” :to=”/blog/ + post.meta.previous_post.slug” class=”button”>      {{ post.meta.previous_post.title }}    </router-link>    <router-link v-if=”post.meta.next_post” :to=”/blog/ + post.meta.next_post.slug” class=”button”>      {{ post.meta.next_post.title }}    </router-link>  </div></template>
n0YDcljSBaMJKwbXMTpNdIBLGB03BXEvpsSv
Ваш результат должен выглядеть примерно так

На этом этапе ваше приложение собирает все публикации блога, позволяя вам переходить к отдельным публикациям. Но вы заметите, что кнопки следующего/предыдущего не работают. почему При использовании маршрутов с paramsкогда пользователь переходит с /blog/foo к /blog/barтот же экземпляр компонента будет использован повторно.

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

Для этого есть исправление. Нам нужно следить за $route объект и призыв getPost() при смене маршрута. Для этого нужно обновить раздел скриптов в components/BlogPost.vue:

<script>  import { butter } from ‘@/buttercms’  export default {    name: ‘blog-post’,    data() {      return {        post: {}      }    },    methods: {      getPost() {        butter.post.retrieve(this.$route.params.slug)          .then((res) => {            // console.log(res.data)            this.post = res.data          }).catch((res) => {            console.log(res)          })    }  },  watch: {    $route(to, from) {      this.getPost()    }  },  created() {    this.getPost()  }}</script>

На данный момент в вашем приложении есть рабочий блог, который можно легко обновить с информационной панели CMS.

Вы также можете использовать API для фильтрации и размещения содержимого в своем блоге с помощью категорий, тегов и авторов. На самом деле вы можете многое сделать с помощью API с точки зрения управления различными аспектами вашего блога, включая разметку RSS, Atom и Sitemap, а также стиль содержимого с помощью CSS.

Завершите

Поздравляю! Вы создали бессерверное приложение Vue.js с производительными API содержимого. Ваша команда разработчиков может вернуться к кодированию, а члены вашей команды, не имеющие технических знаний, теперь имеют простой способ управлять содержимым, не погружаясь в сорняки программирования. И вы создали адаптивную программу, которая плавно адаптирует изменения к вашему веб-сайту.

Добавить комментарий

Ваш адрес email не будет опубликован.