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
После установки вы можете следовать приведенным ниже руководствам по созданию трех типов контента: маркетинговые страницы, ведение блогов и базы знаний (например, FAQ).
Добавить маркетинговые страницы
Предположим, вы хотите дать возможность человеку, не имеющему технических знаний, добавить в вашу команду страницы с тематическими исследованиями клиентов на ваш маркетинговый сайт. Для этого мы создадим страницу с тематическим исследованием в качестве примера. Используя панель управления на ButterCMS, вы можете создать «тип страницы» под названием «Пример клиента» и определить поля.
Как только вы это сделаете, вы можете создать свою первую страницу. Укажите имя и 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=\”https://cdn.buttercms.com/NiA3IIP3Ssurz5eNJ15a\” alt=\”\” caption=\"false\" width=\”249\” height=\”249\” /></p>”,
“customer_logo”: “https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
}
}
}
Затем откройте редактор кода и создайте файл с именем buttercms.js в своем /src directory.
Если у вас нет существующего проекта, создайте его, введя следующее:
vue init webpack buttercms-project cd buttercms-project npm i npm i -S buttercms npm 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
}
]
})
Теперь, чтобы настроить страницу «клиенты», на которой будут перечислены все ваши клиенты, мы собираемся определить 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>
Теперь мы собираемся настроить страницу клиента для просмотра одного клиента. Для этого в components/CustomerPage.vue мы определяем 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>
Успех! Теперь вы можете перейти на страницу клиента, которую вы создали на панели инструментов Butter, через список всех страниц клиентов или напрямую через URL-адрес.
Добавить базу знаний
В приведенном ниже руководстве вы узнаете, как создать базу знаний для вашего приложения Vue.js. Для этого мы будем использовать «Поля контента» ButterCMS. Поля контента - это просто глобальные части контента, которыми может управлять ваша команда. Этот контент может охватывать несколько страниц, и каждое поле контента имеет уникальный идентификатор, который может быть запрошен, как вы увидите ниже.
Настройка полей содержимого
Во-первых, вам нужно настроить несколько настраиваемых полей содержимого. Используя панель управления, вы можете настроить рабочее пространство для организации полей содержимого. Рабочие области позволят редакторам контента курировать контент, не влияя на разработку или API.
Войдя в рабочую область, нажмите кнопку, чтобы создать новое поле содержимого. Выберите тип «Объект» и назовите поле «Заголовок часто задаваемых вопросов». Он будет иметь ярлык API «faq_headline».
После сохранения добавьте еще одно поле - но на этот раз выберите тип «Коллекция» и назовите поле Элементы FAQ. Он будет иметь ярлык 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 на «Часто задаваемые вопросы».
<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>
Ваш отображаемый результат должен выглядеть так:
Теперь ваша команда может обновлять значения на панели инструментов Butter, и соответствующий контент в вашем приложении будет обновляться автоматически.
Blog Engine
Наконец, мы займемся добавлением движка для блогов. Вы можете быстро создать блог на базе CMS, используя Vue.js.
Отображение сообщений
Мы начнем с создания маршрута блога, используя vue-router. Для отображения сообщений мы создаем простой /blog маршрут в нашем приложении и получаем сообщения блога, а также /blog/:slug маршрут для обработки отдельных сообщений.
In 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=”http://via.placeholder.com/250x250" alt=””>
</figure>
<h2>{{ post.title }}</h2>
<p>{{ post.summary }}</p>
</article>
</router-link>
</div>
</div>
</template>
Затем создайте 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>
На этом этапе ваше приложение извлекает все сообщения блога, позволяя вам переходить к отдельным сообщениям. Но вы заметите, что следующие / предыдущие кнопки не работают. Почему? При использовании маршрутов с 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 контента. Ваша команда разработчиков может вернуться к кодированию, а у нетехнических членов вашей команды теперь есть простой способ управлять контентом, не влезая в сорняки кодирования. И вы создали адаптивное приложение, которое легко адаптирует изменения к вашему сайту.
