Как создать внешний интерфейс Vue для CMS без головы — SitePoint

        

В этом руководстве мы узнаем, как создать современный веб-сайт блога с использованием Vue.js и GraphCMS, платформы безголовых CMS.

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

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

1. Вам потребуется установить плагин для реализации дополнительных функций. Чем больше плагинов вы устанавливаете, тем медленнее становится ваш сайт.
2. PHP довольно медленный по сравнению с большинством веб-фреймворков JavaScript. С точки зрения разработчика, гораздо проще и быстрее реализовать пользовательские функции на основе интерфейса JavaScript.

JavaScript обеспечивает превосходную производительность PHP в тестах загрузки браузера. Кроме того, современный JavaScript и его экосистема обеспечивают гораздо более приятный опыт разработки, когда речь идет о быстром создании новых веб-интерфейсов.

Хотите изучить Vue.js с нуля? Эта статья является выдержкой из нашей Премиум библиотеки. Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 9 / месяц.

Таким образом, наблюдается рост безголовых CMS решений, которые просто являются бэк-эндами для управления контентом. Благодаря такому подходу разработчики могут сосредоточиться на создании быстрых и интерактивных внешних интерфейсов с использованием инфраструктуры JavaScript по своему выбору. Настроить интерфейс на основе JavaScript гораздо проще, чем вносить изменения на сайте WordPress.

GraphCMS отличается от большинства платформ Headless CMS тем, что вместо доставки контента через REST он делает это через GraphQL. Эта новая технология превосходит REST, поскольку она позволяет нам создавать запросы, которые касаются данных, принадлежащих нескольким моделям, в одном запросе.

Рассмотрим следующую схему модели:

сообщение

• id: Number
• title: String
• Содержание: Строка
• комментарии: массив комментариев

Комментарий

• id: Number
• name: String
• сообщение: строка

Вышеуказанные модели имеют отношение один (Пост) ко многим (Комментарии). Давайте посмотрим, как мы можем получить одну запись Post со всеми связанными записями комментариев.

Если данные находятся в реляционной базе данных, вам нужно создать либо один неэффективный оператор SLQ, либо два оператора SQL для чистой выборки данных. Если данные хранятся в базе данных NoSQL, вы можете использовать современный ORM, такой как Vuex ORM, для простого извлечения данных, например:

  const post = Post.query ()
  .Благодаря ( «») комментарии
  .find (1);
 

Довольно просто! Вы можете легко передать эти данные через REST предполагаемому клиенту. Но вот проблема: всякий раз, когда требования к данным изменяются на стороне клиента, вы будете вынуждены возвращаться к своему внутреннему коду, чтобы обновить существующую конечную точку API или создать новую, предоставляющую необходимый набор данных. Этот процесс туда-сюда утомителен и повторяется.

Что, если на уровне клиента вы могли бы просто запросить необходимые данные, а серверная часть предоставит их вам, без дополнительной работы? Вот для чего нужен GraphQL.

Предпосылки

Прежде чем мы начнем, я хотел бы отметить, что это руководство для пользователей среднего и продвинутого уровня. Я не буду углубляться в основы, а скорее покажу вам, как быстро создать блог Vue.js, используя GraphCMS в качестве серверной части. Вы должны быть опытными в следующих областях:

• ES6 и ES7 JavaScript
• Vue.js (с использованием CLI версии 3)
• GraphQL

Это все, что вам нужно знать, чтобы начать работу с этим руководством. Кроме того, фон в использовании REST будет отличным, так как я буду часто ссылаться на это. Если вы хотите освежиться, эта статья может помочь: «REST 2.0 здесь и его имя GraphQL».

О проекте

Мы создадим очень простое приложение для блогов с базовой системой комментариев. Ниже приведены ссылки, которые вы можете посетить, чтобы проверить завершенный проект:

Обратите внимание, что в демоверсии был использован токен READ-ONLY, и, следовательно, система комментариев не будет работать. Чтобы он работал, вам необходимо предоставить свой токен и конечную точку ОТКРЫТИЯ согласно инструкциям в этом руководстве.

Создание базы данных проекта GraphCMS

Перейдите на сайт GraphCMS и нажмите кнопку «Начать сборку бесплатно». Вы попадете на страницу регистрации.

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

В приведенном выше примере я уже создал проект под названием «BlogDB». Идите вперед и создайте новый, и назовите его как хотите. После того, как вы ввели имя, вы можете оставить остальные поля по умолчанию. Нажмите Создать и вы попадете в их план проекта.

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

Перейдите на вкладку Схема . Мы собираемся создать следующие модели, каждая со следующими полями:

Категория

• name: однострочный текст, обязательно, уникальный

сообщение

• slug: однострочный текст, обязательный, уникальный
• title: Однострочный текст, обязательный, уникальный
• содержание: многострочный текст

Комментарий

• имя: текст в одну строку, требуется
• сообщение: требуется многострочный текст

Используйте кнопку Создать модель для создания моделей. Справа вы найдете скрытую панель для полей, которая активируется нажатием кнопки Fields . Перетащите соответствующий тип поля на панель модели. Вам будет предоставлена ​​форма для заполнения атрибутов вашего поля. Обратите внимание, что внизу есть розовая кнопка с надписью Advanced . Нажатие на нее раскроет панель, чтобы дать вам больше атрибутов полей, которые вы можете включить.

Далее необходимо добавить взаимосвязь между моделями следующим образом:

• Пост> Категории (многие ко многим)
• Post> Комментарии (один ко многим)

Используйте поле Reference чтобы определить это отношение. Вы можете добавить это поле на любую сторону; GraphCMS автоматически создаст противоположное поле отношения в ссылочной модели. Когда вы завершите определение моделей, у вас должно получиться что-то вроде этого:

Вы завершили первую часть. Теперь давайте предоставим некоторые данные для наших моделей.

GraphQL Data Migration

Чтобы добавить контент в свои модели, вы можете просто щелкнуть вкладку Контент на панели инструментов проекта, где вы можете создавать новые записи для каждой из ваших моделей. Однако, если вы обнаружите, что это медленный метод, вы будете рады узнать, что я создал инструмент миграции GraphCMS, который копирует данные из файлов CSV и загружает их в вашу базу данных GraphCMS. Вы можете найти проект здесь в этом репозитории GitHub. Чтобы начать использовать проект, просто загрузите его в свою рабочую область следующим образом:

  git clone git@github.com: sitepoint-editors / graphcsms-data -igration.git
cd graphcsms-data -igration
установка npm
 

Далее вам нужно получить конечную точку API токена проекта GraphCMS и токен со страницы настроек панели мониторинга . Вам нужно будет создать новый токен. Для уровня разрешений используйте OPEN, поскольку это позволит инструменту выполнять операции READ и WRITE в вашей базе данных GraphCMS. Создайте файл с именем .env и поместите его в корень проекта:

  ENDPOINT = 
ЗНАК = 
 

Далее вам может понадобиться заполнить CSV-файлы в папке данных своими собственными. Вот некоторые примеры данных, которые были использованы:

  // Categories.csv
название
Рекомендуемые
питание
мода
красота

// Posts.csv
название, слизняк, содержание, категории
Food Post 1, food-post-1, Легкий ветер через День Благодарения, приготовив этот апельсиновый клюквенный соус Instant Pot, Food | Featured
Food Post 2, food-post-2, Это мой второй пост еды, Еда
Food Post 3, food-post-3, Это мой последний и последний пост еды, Еда
Fashion Post 1, fashion-post-1, Это действительно мой самый первый модный пост, Fashion | Featured
Fashion Post 2, fashion-post-2, Это мой второй модный пост, Fashion
Fashion Post 3, fashion-post-3, Это мой последний и последний модный пост, Fashion
Beauty Post 1, Beauty-post-1, Это действительно мой самый первый пост Beauty, Beauty | Featured
Beauty Post 2, Beauty-post-2, Это мой второй пост красоты, Beauty
 

Вы можете изменить содержимое, если хотите. Не касайтесь верхней строки, так как в противном случае вы измените имена полей. Обратите внимание, что для столбца категории я использовал символ | в качестве разделителя.

Чтобы загрузить данные CSV в базу данных GraphCMS, выполните следующие команды в следующем порядке:

  категории запуска в минуту
Npm Run сообщения
 

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

Если вы хотите очистить базу данных, вы можете выполнить следующую команду:

  Сброс пробега в минуту
 

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

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

С заботой о бэкэнде, давайте начнем создавать интерфейсный интерфейс нашего блога.

Создание внешнего интерфейса блога с использованием Vue.js

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

Если у вас не установлен Vue CLI, сделайте это сейчас:

  npm install -g @ vue / cli
 

Затем создайте новый проект:

  vue create vue-graphcms
 

Выберите, чтобы выбрать функции вручную, затем выберите следующие параметры:

• Особенности: Babel, Router
• Режим истории маршрутизатора: Y
• ESLint только с предотвращением ошибок
• Lint on save
• Размещение файла конфигурации: выделенные файлы конфигурации
• Сохранить пресет: ваш выбор

По завершении процесса создания проекта перейдите в каталог проекта и установите следующие зависимости:

  npm установили аксиумы начальной загрузки
 

Чтобы настроить Bootstrap-Vue в нашем проекте, просто откройте src / main.js и добавьте следующий код:

  импорт BootstrapVue из "bootstrap-vue";
импорт "bootstrap / dist / css / bootstrap.css";
импорт "bootstrap-vue / dist / bootstrap-vue.css";

Vue.config.productionTip = false;
Vue.use (BootstrapVue);
 

Далее нам нужно начать закладывать структуру нашего проекта. В папке src / components удалите существующие файлы и создайте следующие новые:

• CommentForm.vue
• CommentList.vue
• Post.vue
• PostList.vue

В папке src / views удалите About.vue и создайте новый файл с именем PostView.vue . Как видно из демо, у нас будет несколько страниц категорий, каждая из которых отображает список сообщений, отфильтрованных по категориям. Технически, будет только одна страница, на которой будет отображаться другой список сообщений, основанный на имени активного маршрута. Компонент PostList будет фильтровать сообщения на основе текущего маршрута.

Давайте сначала настроим маршруты. Откройте src / router.js и замените существующий код следующим:

  импорт Vue из "vue";
импортировать роутер из "vue-router";
импортировать Home из "./views/Home.vue";
импортировать сообщение из "./views/PostView.vue";

Vue.use (маршрутизатор);

экспорт по умолчанию новый маршрутизатор ({
  режим: «история»,
  база: process.env.BASE_URL,
  linkActiveClass: "активный",
  маршруты: [
    {
      path: "/",
      name: "Featured",
      component: Home
    },
    {
      path: "/food",
      name: "Food",
      component: Home
    },
    {
      path: "/fashion",
      name: "Fashion",
      component: Home
    },
    {
      path: "/beauty",
      name: "Beauty",
      component: Home
    },
    {
      path: "/post/:slug",
      name: "Post",
      component: Post
    }
  ]
});
 

Теперь, когда у нас есть наши маршруты, давайте настроим наше меню навигации. Откройте src / App.vue и замените существующий код следующим:

Это добавит навигационную панель вверху нашего сайта со ссылками на наши разные категории.

Сохраните файл и соответственно обновите следующие файлы:

SRC / просмотров / Home.vue

SRC / компоненты / PostList.vue

Обратите внимание, что в компоненте PostList мы используем специальный наблюдатель для обновления нашего свойства данных категории category основываясь на нашем текущем URL.

Теперь мы готовы выполнить быструю проверку, чтобы убедиться, что маршруты работают. Раскрутите сервер Vue.js с помощью команды npm run serve . Откройте браузер на localhost: 8080 и протестируйте каждую навигационную ссылку. Свойство category должно выводить то же значение, которое мы определили в атрибуте имени маршрута.

Получение данных из GraphCMS

Теперь, когда у нас есть работающий код маршрутизации, давайте посмотрим, как мы можем получить информацию из нашей серверной части GraphCMS. В корне вашего проекта создайте файл env.local и заполните его значениями для следующих полей:

  VUE_APP_ENDPOINT =
VUE_APP_TOKEN =
 

Обратите внимание, что одностраничные приложения Vue.js загружают только пользовательские переменные среды, начиная с VUE_APP . Вы можете найти конечную точку API и токен на странице настроек панели управления GraphCMS. Для токена обязательно создайте его с разрешением OPEN, так как это позволит выполнять операции READ и WRITE. Затем создайте файл src / graphcms.js и скопируйте следующий код:

  импорт axios из "axios";

экспорт const ENDPOINT = process.env.VUE_APP_ENDPOINT;
const TOKEN = process.env.VUE_APP_TOKEN;

const headers = {
  «Content-Type»: «application / json»,
  Авторизация: `Носитель $ {TOKEN}`
};

экспорт const apiClient = axios.create ({
  заголовки
});

экспорт const POSTS_BY_CATEGORY_QUERY = `
  query PostsByCategory ($ category: String!) {
    категория (где: {
      имя: $ категория
    }
    ) {
      название,
      сообщения {
        Я бы
        слизень
        заглавие
        содержание
        категории {
          название
        }
      }
    }
  }
`;

экспорт const POST_BY_SLUG_QUERY = `
  query PostBySlug ($ slug: String!) {
    пост (где: {
      слаг: $ слаг
    })
    {
      Я бы
      заглавие
      содержание
      категории {
        название
      }
      Комментарии {
        название
        сообщение
      }
    }
  }
`;

экспорт const CREATE_COMMENT_MUTATION = `
  мутация CreateComment ($ post: PostWhereUniqueInput !, $ name: String !, $ message: String!) {
    createComment (data: {
      имя: $ имя,
      сообщение: $ сообщение,
      сообщение: {
        подключиться: $ post
      },
      статус: ИЗДАНО
    })
    {
      Я бы
      название
      сообщение
    }
  }
`;
 

Этот вспомогательный файл, который мы только что создали, предоставляет две основные функции:

• Он создает экземпляр axios, который настроен для выполнения авторизованных запросов к вашей серверной части GraphCMS.
• Содержит запросы и мутации GraphQL, используемые в этом проекте. Они отвечают за выборку постов (по категориям или по слагам), а также за создание новых комментариев. Если вы хотите узнать больше о запросах и мутациях GraphQL, обратитесь к документации GraphQL.

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

Вот пример запроса:

Вот пример мутации:

Отображение данных в шаблоне

Теперь давайте создадим наш HTML-шаблон в нашем src / components / PostList.vue который будет аккуратно отображать список сообщений. Мы также добавим код axios, который будет извлекать данные записей из нашей базы данных GraphCMS:

Давайте быстро пройдемся по основным функциям кода:

• Загрузка . Когда запрос сделан, загрузочный счетчик отображается, чтобы указать пользователю, что что-то выполняется. Когда запрос выполнен, загрузочный счетчик заменяется списком сообщений.
• Запрос . Чтобы получить список постов по категориям, я обнаружил, что проще запросить категорию, а затем использовать отношение категории к постам, чтобы получить доступ к отфильтрованным постам.
• Создан . Когда страница загружается впервые, функция fetchPosts () вызывается из ловушки созданного жизненного цикла.
• Часы . При изменении URL-адреса маршрута функция fetchPosts () вызывается каждый раз.

После внесения этих изменений у вас должен появиться следующий вид:

Отображение отдельной записи

Убедитесь, что верхняя главная навигация работает как положено. Давайте теперь поработаем над компонентом Post . Он будет иметь свою собственную функцию fetchPost () где он будет запрашивать слаг . Если вам интересно, откуда берется параметр slug позвольте мне напомнить вам об этом фрагменте кода, который мы вставили в router.js :

  // ...
{
  путь: '/ post /: slug',
  название: 'Post',
  компонент: сообщение
},
// ...
 

Здесь говорится, что все, что идет после / post / в URL, доступно нам в компоненте как this. $ Route.params.slug .

Компонент post является родителем компонентов CommentForm и CommentList . Данные комментариев будут передаваться как реквизиты компоненту CommentList из записи сообщений. Давайте вставим код для src / components / CommentList.vue сейчас:

Если вы не вводили комментарии вручную через панель управления GraphCMS, пока не ожидайте увидеть какие-либо результаты. Давайте добавим код в src / components / CommentForm.vue который позволит пользователям добавлять комментарии к сообщению в блоге:

Теперь у нас есть базовая форма комментариев, позволяющая отправить новый комментарий в нашу серверную систему GraphQL. После сохранения нового комментария мы возьмем возвращенный объект и добавим его в массив post.comments . Это должно запустить компонент CommentList для отображения недавно добавленного комментария .

Давайте теперь создадим компонент src / components / Post.vue :

Наконец, вот код для src / views / PostView.vue чтобы связать все вместе:

Теперь у вас должен быть следующий вид сообщений. Обратите внимание на : slug в конце URL localhost: 8080 / post / fashion-post-1 :

В приведенном выше примере я добавил пару комментариев, чтобы протестировать новую функцию. Убедитесь, что вы делаете то же самое с вашим.

Резюме

Я надеюсь, вы видели, как легко создать блог-сайт с использованием Vue.js и GraphQL. Если бы вы использовали обычный PHP и MySQL, вы бы написали гораздо больше кода. Даже с PHP-фреймворком вы все равно написали бы больше кода для простого блогового приложения.

Ради этого урока я должен был сделать вещи максимально простыми. Вы можете заметить, что этот блог-проект далек от минимальной настройки блога. Есть несколько вещей, которые мы не рассмотрели, такие как обработка ошибок, проверка формы и кэширование. В заключение я рекомендую Apollo Client, так как он имеет механизмы для кэширования результатов запросов GraphQL. Тогда, конечно, должна быть модель автора и надлежащая система комментариев, которая поддерживает аутентификацию и утверждение сообщений.

Если вы готовы, пожалуйста, продолжайте и продолжайте этот простой блог Vue.js GraphCMS.