Рубрики
Без рубрики

Graphcms + nuxt.js – проголосовать за ваши любимые технические курсы

В этом уроке вы собираетесь построить заявку на голосование на технические курсы. Голосование … с меткой Codenewbie, Programming, WebDev, JavaScript.

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

Если вам нравится курс и думаете, что это качественный курс, вы можете его поднять. Чем больше просят курс, тем выше он появляется на странице.

Чтобы построить приложение, вы будете использовать:

  • Graphcms
  • Nuxt.js
  • Tailwindcss

Без лишних слов, давайте начнем создавать приложение!

GraphCMS является первым нативным CMS GraphQL CMS. Он направлен на устранение болевых точек традиционного управления контентом, используя силу GraphQL.

Посмотрим, как GraphQL стремится это сделать. Некоторые из наиболее заметных особенностей GraphCM следующие:

  • Он имеет одну конечную точку GraphQL, которая поддерживает запросы и мутации.
  • Он поставляется с отличным пользовательским интерфейсом. Вы можете использовать его для создания, настройки и поддержания бэкэнда вашего приложения через их пользовательский интерфейс.
  • Он имеет локализацию контента. Это означает, что вы можете локализовать и перевести контент на любой язык.
  • Он поддерживает среды на платных планах, которые позволяют вам работать над новыми функциями в изоляции, а затем продвигать это в основной среде.
  • Интеллектуальное кэширование края, что означает, что ваши ответы на запросы кэшируются в 190 точках присутствия по всему миру.

Это всего лишь несколько функций, чтобы убедить вас в ее власти. Тем не менее, вы можете прочитать больше о GraphCM и его функциях Здесь Анкет

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

Первый шаг учебника – создать учетную запись GraphCMS, чтобы вы могли ее использовать.

Перейти к Graphcms Веб -сайт и нажмите на “Зарегистрироваться” ссылка на сайт. См. Рисунок 1 ниже для справки.

фигура 1

После этого он доставит вас на страницу регистрации. На странице регистрации вы можете зарегистрироваться в следующем:

  • Использование вашей учетной записи Facebook
  • с вашей учетной записью GitHub
  • Использование вашей учетной записи Google
  • С вашим электронной почтой, паролем и именем

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

фигура 2

Рисунок 2 иллюстрирует страницу регистрации. Прежде чем выбрать предпочтительный метод регистрации, отметьте коробку, в котором говорится, что вы соглашаетесь с их условиями и политикой. Наконец, нажмите на “Зарегистрироваться” кнопка.

После этого вы закончили. Вы должны увидеть страницу с рисунка 3 ниже. Если вы хотите принять их тур, нажмите на “Start Tour” кнопка. Если нет, пропустите прямо к обзору.

Рисунок 3

Вот как вы создаете новую учетную запись GraphCMS. Если вы нажмете на «Пропустить обзор» (Как показано на рисунке 3), вы попадаете на страницу, где вы можете создать новый проект или выбрать из существующих стартовых проектов.

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

Проект хранит курсы по технологиям вместе со своими авторами. Таким образом, у вас будет две модели:

  • модель для курсов
  • модель для авторов

Кроме того, между ними будут много-кое-коренные отношения. Например, курс может иметь несколько авторов, и авторы могут иметь несколько курсов.

С этим, давайте начнем строить проект!

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

Рисунок 4

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

Чтобы создать новый проект, нажмите на + Кнопка, которая говорит “С нуля” Анкет Рисунок 4, выше, иллюстрирует это.

Нажатие на кнопку доставит вас на новую страницу, где вам нужно:

  • Добавьте имя и описание для вашего проекта
  • Выберите свой предпочтительный CDN

На рисунке 5 ниже вы можете увидеть имя и описание для этого проекта. Кроме того, вы можете видеть, что я выбираю центр обработки данных из Европа (Франкфурт) Анкет

Рисунок 5

После того, как вы заполните все детали, нажмите кнопку «Создать проект» из нижней части страницы. На рисунке 5 вы не можете увидеть его, но вы должны увидеть это на своей странице.

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

Рисунок 6

Выберите план «бесплатно навсегда». После выбора плана вас отвезли на новую страницу, где вы можете пригласить членов команды. Тем не менее, в данный момент у вас нет членов команды, поэтому нажмите на “Пригласить позже” , внизу страницы.

Теперь вы готовы и готовы настроить свое приложение! Вы можете увидеть панель панели проекта ниже, на рисунке 7.

Рисунок 7

Давайте перейдем к следующему шагу, который создает модели.

Следующим шагом является создание моделей. Когда вы создаете модели, вы описываете, как структурированы ваши данные. Например, вам нужна схема для курсов и одна для авторов.

На панели инструментов проекта нажмите на опцию «Сказать» «Установите свою схему» Анкет См. Рисунок 8 ниже для справки.

Рисунок 8

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

Нажмите на кнопку, говорящая “Создать модель” , как показано на рисунке 9.

Рисунок 9

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

Для этого примера отображаемое имя для модели – Курс Анкет Как только вы введете имя отображения, API ID и Множество API ID Поля обновляются автоматически. Таким образом, вы можете оставить их такими, какие они есть. Наконец, введите описание вашей модели.

После того, как вы ввели все детали, нажмите кнопку «Сказать» “Создать модель” Анкет На рисунке 10 вы можете увидеть пример настройки Курс модель.

Рисунок 10

После создания модели у вас есть пустая модель для Курс Анкет

В качестве упражнения создайте модель для Автор Анкет Перейти к Схема Страница, а затем нажмите на + Добавить Кнопка на левой стороне. См. Рисунок 11 ниже для справки.

Рисунок 11

После нажатия кнопки «Добавить» вы можете создать Автор модель, когда вы создали Курс модель.

Рисунок 12 ниже иллюстрирует настройки для Автор модель.

Рисунок 12

Следующим шагом является настройка моделей путем добавления полей.

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

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

Рисунок 13

Для этого урока Курс Модель будет иметь следующие поля:

  • имя
  • описание
  • авторы
  • ссылка на сайт
  • голоса

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

  • Многострочный текст
  • отметка
  • богатый текстовый редактор
  • количество

И многое другое.

Имя Поле

Давайте начнем с добавления поля имени. Начните с нажатия на поле «Текст одиночной строки». Как только вы нажмете на это поле, появится новое поле, которое вы можете увидеть на рисунке 14.

Рисунок 14

Вам нужно указать имя , API ID и Описание для этого поля. Вы можете использовать те же детали, как и те, которые на рисунке 14, или вы можете использовать свои.

Кроме того, вы можете отобразить значение поля вместо идентификатора в отношениях, поэтому проверьте поле, говорящее Используйте в качестве заголовка поля Анкет

Прежде чем двигаться дальше, перейдите к “Валидации” вкладка и сделайте поле необходимым. Это означает имя Поле не может быть пустым. См. Рисунок 15 для справки.

Рисунок 15

Как только вы закончите настройку имя Поле нажмите кнопку «Создать». После создания поля вы должны увидеть его на панели панели.

Описание поле

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

Нажмите на поле «Отметка», и должно появиться всплывающее окно с рисунка 16. Как обычно, выберите имя, идентификатор API и описание для вашего поля.

Рисунок 16

В качестве проверки давайте сделаем необходимое поле, и давайте также добавим количество символов от 100 до 1000 слов. Таким образом, курс не может быть добавлен в базу данных, если:

  • Описание пусто
  • Описание имеет менее 100 слов или более 1000 слов

См. Рисунок 17, который иллюстрирует подтверждения.

Рисунок 17

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

Голосование поле

Голосуйте Поле имеет номер типа. Таким образом, перейдите в правую сторону и нажмите на поле «номер».

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

Рисунок 18

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

Теперь перейдите на вкладку “Advanced” и проверьте опцию «Сказать» “Установить начальное значение” Анкет Установите начальное значение на «0» Таким образом, голоса за все курсы начинаются с 0. См. Рисунок 19 ниже для справки.

Рисунок 19

Создайте поле, и оно должно появиться на приборной панели.

URL Field

Для поля URL вы можете просто использовать “Один строкальный текст” поле. На рисунке 20 показана основная конфигурация для поля URL. Это следует за тем же шаблоном, что и другие поля.

Рисунок 20

Кроме того, давайте сделаем поле необходимым. Затем перейдите на вкладку «Валидации» и проверьте опцию, которая делает поле необходимым.

Более того, вы хотите избежать злонамеренных или недействительных URL -адресов. Таким образом, включите вариант сказать «Сопоставьте конкретный шаблон» Анкет При активном опции приложение принимает только URL -адреса, соответствующие конкретному регулярному выражению.

Рисунок 21, ниже, иллюстрирует это.

Рисунок 21

Если вы пойдете на приборную панель, вы сможете увидеть все созданные вами поля. Рисунок 22 показывает, как должна выглядеть ваша приборная панель.

Рисунок 22

Прежде чем настроить поле «Автор» и создать отношения, давайте настроим Автор модель.

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

  • ФИО
  • Короткая биография
  • Ссылки в социальных сетях, такие как профиль Twitter

На этом этапе вы должны быть знакомы с типами поля. Таким образом, поля будут иметь следующие типы:

  • Одно строительный текст для полного имени
  • Многострочный текст Для короткой биографии
  • Одно строительный текст для профиля в Твиттере

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

  • Все поля требуются – у каждого автора должно быть имя, короткая биография и профиль в Твиттере
  • Все поля должны быть уникальными – нет двух авторов иметь одинаковое имя, биография или профиль Twitter.

На приборной панели схемы выберите “Один строкальный текст” Чтобы создать полное имя. Рисунок 23 иллюстрирует детали для этого поля.

Рисунок 23

На рисунке 24 ниже вы можете увидеть подтверждения, используемые для этого поля и других.

Рисунок 24

Следующий шаг – добавить биография поле. Затем с правой боковой панели выберите “Multi Line Text” поле. Как только вы нажимаете на него, появляется новое всплывающее окно. Вы можете увидеть детали для этого поля на рисунке 25.

Рисунок 25

Биография Поле имеет дополнительное правило проверки. Вы не хотите, чтобы у авторов была пустая биография или биография 5000 слов. Таким образом, вы можете ограничить количество символов между 100 а также 500 слова

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

Рисунок 26

Наконец, вам нужно установить поле для URL профиля Twitter Анкет На боковой панели выберите “Один строкальный текст” поле и добавьте отображение имя, идентификатор API, описание и проверки.

На рисунке 27 ниже вы можете увидеть настройки для поля URL -адреса профиля Twitter.

Рисунок 27

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

См. Рисунок 28 ниже для справки.

Рисунок 28

Вы закончили настройку Автор Модель тоже! Если вы посмотрите на свою приборную панель, вы должны увидеть созданные вами поля. Рисунок 29, ниже, иллюстрирует это.

Рисунок 29

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

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

В видео ниже показано, как создать отношения между «курсом» и «автором».

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

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

После этого вы можете создать отношения двумя способами:

  • Вы можете отметить/раскройте флажки на основе ваших потребностей. Отношения обновляются автоматически, когда вы отмечаете/UNTICH.
  • Вы можете нажать на выпадающую сторону, чтобы выбрать нужные отношения.

Рисунок 30 иллюстрирует оба варианта.

Рисунок 30

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

Наконец, нажмите кнопку «Создать», чтобы создать отношения. Как вы можете видеть в видео выше, отношения создаются.

Прежде чем вы сможете протестировать и использовать приложение, вам необходимо добавить контент.

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

Чтобы создать контент, нажмите на значок «Печка», как показано на рисунке 31. В качестве альтернативы, вы можете нажать на второй вариант из “Ваш Quick Start Guide” раздел. См. Рисунок 31 для справки.

Рисунок 31

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

На рисунке 32 показана страница, где вы можете добавить контент. С левой стороны вы можете выбрать тип контента, который вы хотите добавить. Например, если вы хотите добавить нового автора, выберите Автор из столбца.

После того, как вы решите, какой тип контента вы хотите добавить, нажмите кнопку «Сказать» “+ Создать элемент” Анкет

Рисунок 32

После этого вы можете создать новый кусок контента. На рисунке 33 вы можете увидеть пример создания автора. Есть все поля, которые вы добавляли, когда вы настраиваете модель.

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

На данный момент, Сохранить и публиковать Автор, потому что вы свяжите автора и курс после создания курса.

Рисунок 33

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

С левой стороны нажмите на опцию «Курс». Затем нажмите еще раз на кнопке, сказав “+ Создать элемент” Анкет См. Рисунок 32 для справки.

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

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

Рисунок 34

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

Выберите автора, тикая коробку, как показано на изображении. После этого добавьте автора, нажав на кнопку “Добавить выбранного автора” Анкет

Рисунок 35

После этого вы должны увидеть, как автор встроен в ваш курс. Затем, наконец, вы должны увидеть что -то похожее на рисунок 36.

Теперь нажмите на зеленую кнопку “Сохранить и публиковать” Чтобы создать отношения. Автор и курс сейчас связаны!

Рисунок 36

Теперь, когда вы закончили с созданием и настройкой приложения, вы можете поиграть с ним!

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

Таким образом, чтобы получить доступ к детской площадке, перейдите на панель панели проекта, а затем нажмите на значок «Play», как показано на рисунке 37 ниже.

Рисунок 37

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

После того, как вы нажимаете на кнопку, и открывается игровая площадка GraphQL, вы можете начать играть с данными.

На рисунке 38 показана страница детской площадки.

Рисунок 38

Давайте начнем писать несколько запросов GraphQL. Первый запрос GraphQL показывает все курсы и авторы. Вы можете увидеть все детали о каждом курсе и информацию о каждом авторе курса.

Смотрите запрос ниже:

query Courses {
  courses {
    name
    description
    publishedAt
    url
    vote
    authors {
      name
      biography
      twitterProfile
    }
  }
}

На следующем запросе показаны все авторы наряду с созданными ими курсами. Он получает все подробности об авторах и их курсах.

Скопируйте следующий запрос на детскую площадку:

query Authors {
  authors {
    name
    biography
    twitterProfile
    courses {
      name
      url
      vote
      description
    }
  }
}

Интерактивный строитель делает его плавным для создания запросов. Например, в видео ниже вы можете увидеть, как я строю два запроса с помощью GraphCMS Explorer.

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

Если вы прокрутите внизу вкладки «Explorer», вы можете увидеть опцию с надписью «Добавить новую мутацию» Анкет После того, как вы нажмете на эту опцию, вы увидите все доступные мутации на вкладке “Explorer”.

Например, вы можете создать новый курс со следующей мутацией:

mutation CourseCreation {
  createCourse(data: {name: "Test Course", description: "Add a longer description", vote: 10, url: "https://google.com"}) {
    id
    name
  }
}

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

В качестве альтернативы, вы можете удалить курс. Чтобы удалить курс (или автор), вам нужно передать идентификатор курса (или автора) в DeleteCourse Анкет Мутация ниже показывает, как вы можете достичь этого.

mutation CourseDeletion {
  deleteCourse(where: {id: "ckqg8wi7s13ko0c56z71xw139"}) {
    id
    name
  }
}

Создание автора похоже на создание курса, за исключением того, что существуют разные поля. Мутация ниже показывает, как это сделать.

mutation AuthorCreation {
  createAuthor(data: {name: "Test Author", biography: "A short biography.", twitterProfile: "{% twitter testauthor"}) %} {
    id
    name
  }
}

Ниже, в видео вы можете увидеть следующие мутации:

  • Добавление и удаление курса
  • Добавление и удаление автора

Опция «Explorer» от GraphCMS очень удобна, и он делает процесс создания запросов и мутаций простым.

Теперь, когда вы видели примеры запросов и мутаций в этом учебном пособии, идите и изучите других. Играйте и добавьте новые данные или измените существующие данные.

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

Согласно Graphcms документация , «Запросы и мутации по умолчанию требуют постоянного токена токена аути».

Таким образом, прежде чем вы сможете использовать API в своем приложении, вам необходимо установить разрешения. Перейдите на панель панели проекта и нажмите на любой из двух вариантов, выделенных на рисунке 39 ниже.

Рисунок 39

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

  • АПИС контента и управления
  • Содержание разрешений API
  • Постоянные токены аудитории

Разрешения для пользователей несанкционированных

Если вы прокрутите внизу страницы, вы увидите API общедоступного контента и Постоянные токены аудитории . С API общедоступного контента , вы устанавливаете разрешения для неавтотиционировано пользователи.

Для пользователей, не являющихся несаутентированными, вы, вероятно, хотите только «прочитать» доступ. Это означает, что несаутентированные пользователи могут только читать данные.

Таким образом, из API общедоступного контента , вы можете нажать на кнопку «Да, инициализируйте по умолчанию» , как показано на рисунке 40.

Как показано на рисунке 40, разрешения по умолчанию позволяют лишь неаутентифицированным людям читать данные.

Рисунок 40

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

Создать аут токен

Согласно Graphcms документация «Постоянные токены AUTH используются для контроля доступа к запросам, мутированию контента и поставляются в форме аутентификации токена токена носителя».

Чтобы создать новый токен для вашего приложения, нажмите кнопку «Сказать» “+ Создать токен” внизу страницы.

Рисунок 41

Как только вы нажимаете на кнопку «Создать токен», появляется новое всплывающее окно. Из всплывающего окна вы можете создать новый токен. Вам будет предложено ввести имя , a Описание и Стадия по умолчанию для доставки контента Анкет Вы хотите, чтобы пользователи имели доступ только к опубликованным данным, поэтому оставьте опцию по умолчанию – Опубликовано Анкет

Рисунок 42 иллюстрирует всплывающее окно, где вы настраиваете свой токен.

Рисунок 42

Разрешения для аутентифицированных пользователей

После создания токена он перенесет вас на панель панели токена для настройки разрешений. На новой странице вы должны увидеть следующую информацию:

  • Ваше имя токена
  • Описание токена
  • значение токена
  • Контент API
  • Управление API

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

Рисунок 43

Давайте создадим некоторые разрешения. Чтобы создать новые разрешения, нажмите кнопку «Сказать» “+ Создать разрешение” , как показано на рисунке 43 выше.

Как только вы нажмете кнопку «Создать разрешение», появится новое всплывающее окно, где вы можете настроить свои модели. Есть два важных шага:

  • В выпадении « модель » выберите каждую модель индивидуально. Не оставляйте опцию по умолчанию «все», потому что существуют другие модели, созданные системой. Создайте разрешения для каждой модели индивидуально.
  • Тик Публиковать и Неопубликованный опции. Вы должны иметь возможность публиковать курсы для функциональности голосования.

Наконец, вы хотите иметь возможность читать , Создать , редактировать и Удалить данные. Таким образом, отметьте соответствующие коробки.

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

Рисунок 44

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

Рисунок 45

Теперь, когда у вас есть конечная точка и установленные разрешения, вы готовы построить часть фронта!

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

  • конечная точка
  • а также Ваш токен

Первый шаг – перейти к настройкам, как показано на рисунке 46 ниже. Нажмите на ползунки.

Рисунок 46

После того, как вы нажмете на настройки, вы попадаете на другую страницу. Оттуда нажмите на API Access Опция с левой боковой панели, как показано на рисунке 47, ниже.

После этого вы должны увидеть свои конечные точки. Затем скопируйте Контент API Выделено на рисунке 47 ниже.

Рисунок 47

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

Рисунок 48

Теперь, когда у вас есть конечная точка и АВТОРНЫЙ ПЕРЕДАЧИ , вы можете использовать приложение GraphCMS извне – например, из фреймворта JavaScript, такой как Nuxt.

Для фронта вы будете использовать nuxt.js, который является структурой VUE. Если вы хотите прочитать об этом больше или увидеть его преимущества, проверьте их официальный сайт Анкет

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

npx create-nuxt-app voting-app

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

Рисунок 49 иллюстрирует настройки для этого проекта. Вы можете использовать те же параметры или настроить проект на основе ваших потребностей.

Рисунок 49

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

cd voting-app

Если вы пойдете в Компоненты Папка, вы должны увидеть два компонента:

  • Nuxtlogo.vue
  • Tutorial.vue

Удалить их обоих. Следующим шагом является создание новых компонентов. Создайте следующие компоненты:

  • Coursecard.vue = >. Как вы можете сделать вывод из имени, этот компонент предназначен для создания карты курса. Каждый курс из базы данных имеет свою карту.
  • Courseist.vue = >. Этот компонент отображает все курсы из базы данных. Это также использует Coursecard.vue компонент, чтобы представить каждый курс.
  • Hero.vue и Нижний колонтитул

На рисунке 50 ниже показано, как должна выглядеть папка компонентов.

Рисунок 50

Управление переменными окружающей среды

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

  • URL конечной точки GraphCMS
  • Токен носителя

Первый шаг – установить необходимый пакет. Перейдите в корневой каталог проекта и установите пакет dotenv следующим образом:

npm i @nuxtjs/dotenv

После установки пакета вам нужно зарегистрировать его. Перейти к nuxt.config.js и добавить модуль в BUILDMODULES множество. Ваши модули сборки должны выглядеть следующим образом:

buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/dotenv'
  ],

Следующий шаг – создать .env Файл, где вы добавите вашу конфиденциальную информацию. Создать .env Файл в корневом каталоге проекта. Вы можете сделать это следующим образом:

touch .env

Теперь откройте файл и добавьте следующие строки:

GRAPHCMS_ENDPOINT=
BEARER=

Конечно, вам нужно добавить свою информацию. Добавьте URL -адрес конечной точки GraphCMS и токен для носителя. Прежде чем двигаться дальше , вам нужно добавить .env Файл в .gitignore Таким образом, вы не делаете свою конфиденциальную информацию публичной.

Теперь вы можете получить доступ к конфиденциальной информации, такой как:

  • process.env.graphcms_endpoint
  • Process.env. Носитель

Давайте перейдем к следующему шагу, который посвящен созданию плагина nuxt graphcms.

Graphcms Nuxt Plugin

Прежде чем идти дальше, вам нужно добавить плагин GraphCMS. Клиент GraphCMS позволяет вам делать запросы в базу данных GraphCMS.

Итак, прежде всего, вам нужно создать новую папку с именем плагины В корневом каталоге проекта. После этого создайте файл с именем graphcms.js Внутри плагины папка.

Как только вы создаете как каталог, так и файл, откройте graphcms.js и добавить следующий код:

import { GraphQLClient } from 'graphql-request';

const graphcmsClient = new GraphQLClient(process.env.GRAPHCMS_ENDPOINT, {
    headers: {
        authorization: `Bearer ${process.env.BEARER}`
    }
});

export default(_, inject) => {
    inject('graphcms', graphcmsClient);
};

Приведенный выше код создает новый экземпляр клиента GraphQL, и он проходит ваш Graphcms конечная точка и токен носителя. Таким образом, вы можете использовать graphcms Клиент повсюду в вашем приложении nuxt.js.

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

Строить Hero.vue

Первый компонент – Hero.vue Анкет Этот компонент имеет только две строки текста. Откройте его и добавьте следующий кусок кода:

Рисунок 51, ниже, иллюстрирует, что вы увидите, когда запустите приложение.

Рисунок 51

Теперь перейти к Страницы> index.vue и удалите все, что находится внутри файла. Затем добавьте следующий кусок кода:

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

Построить coursecard.vue

Карта курса отображает всю информацию о курсах. Он показывает имя, описание и другие детали. Это также позволяет вам провести курс.

Начнем с создания шаблона. Все, что вы видите внутри усам, – {{}} – Это данные, поступающие из базы данных.

Во второй части компонента вы описываете тип реквизита, метод и вычисленное свойство.

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

Конечная точка /upvote/$, this.id} это пользовательская конечная точка API, созданная в Nuxt. В следующем разделе вы увидите, как это сделать.

С тех пор Мутирующие реквизиты это анти-паттерн, мы создали новое поле под названием newvote Анкет Вы назначаете значение из голосуйте Опора в эту новую собственность. Также собственность newvote обновляется и отображается на странице, когда пользователь проголосует за курс.

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

Рисунок 52 показывает, как выглядит карта курса. Кроме того, когда вы нажимаете на имя курса, он доставит вас на страницу курса.

Рисунок 52

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

Пользовательская конечная точка API для голосования

Nuxt.js позволяет создавать пользовательские конечные точки API в вашем приложении. Например, вы можете создать экспресс -сервер внутри вашего приложения Nuxt.

Nuxt.js имеет Servermiddleware свойство, которое позволяет вам использовать дополнительные пользовательские маршруты API без необходимости внешнего сервера. Если вы хотите прочитать больше о Servermiddlware Собственность, я рекомендую официальную документацию.

Таким образом, первый шаг это создать папку в корневом каталоге проекта. Создайте новую папку под названием Сервер-среднее посуды Анкет Затем создайте новый файл, upvotecourse.js Внутри каталога.

Следующий шаг это открыть файл nuxt.config.js и добавьте следующую строку в конце файла:

serverMiddleware: ['~/server-middleware/upvoteCourse.js']

Ваш файл nuxt.config.js должен выглядеть следующим образом:

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Vote Tech Courses',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/graphcms.js'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  serverMiddleware: ['~/server-middleware/upvoteCourse.js']
}

Теперь вы готовы построить пользовательскую конечную точку API для курсов для голосования. Откройте файл upvotecourse.js и импортировать следующие пакеты:

const express = require('express');
const { GraphQLClient } = require('graphql-request');

Прежде всего, вам нужно Экспресс Чтобы создать конечную точку API. Во -вторых, вам нужно graphql-request Чтобы сделать запросы GraphQL на сервер GraphCMS.

После этого вам нужно:

  • Создать экспресс -экземпляр
  • Используйте json () промежуточное программное обеспечение

Добавьте следующие строки после импорта вышеуказанных пакетов:

const app = express();

app.use(express.json());

Есть еще один шаг, прежде чем построить конечную точку API. Вам нужно создать новый экземпляр клиента GraphQL. Экземпляру GraphQL требует URL API контента GraphCMS и токен для носителя.

Добавьте следующий код:

const client = new GraphQLClient(
    process.env.GRAPHCMS_ENDPOINT,
    {
        headers: {
            authorization: `Bearer ${process.env.BEARER}`,
        }
    }
);

На данный момент, так ваш файл upvotecourse.js должен выглядеть как:

const express = require('express');
const { GraphQLClient } = require('graphql-request');

const app = express();

app.use(express.json());

const client = new GraphQLClient(
    process.env.GRAPHCMS_ENDPOINT,
    {
        headers: {
            authorization: `Bearer ${process.env.BEARER}`,
        }
    }
);

Теперь пришло время построить конечную точку API. Давайте начнем с заголовка функции.

app.post('/upvote/:slug', async (req, res) => {

}

Вам нужно сделать асинхронные запросы на /upvote/: slug конечная точка. Таким образом, вам нужно использовать Пост метод

С тех пор, как : slug является динамическим значением, вам нужно извлечь его из URL. Вы можете получить слизняк от URL следующим образом:

app.post('/upvote/:slug', async (req, res) => {
    const { slug } = req.params;
}

Вы получаете доступ к Params Собственность на Запрос объект.

После этого вы будете делать Три Действия в методе:

  • Вы получаете курс из базы данных, используя слизняк , что является идентификатором курса
  • Увеличьте голоса
  • переоборудовать Публикуйте курс

Таким образом, вам нужен один запрос GraphQL и две мутации. Вы получаете курс из базы данных с помощью запроса. Тем не менее, чтобы поднять и опубликовать курс, вам нужна мутация.

В приведенном ниже фрагменте кода вы можете увидеть запрос и две мутации:

app.post('/upvote/:slug', async (req, res) => {
    const { slug } = req.params;

    const getCourse =
    `
        query getCourse($slug: ID!) {
            course(where: { id: $slug }) {
                id
                vote
                name
            }
        }
    `;

    const upvoteCourse = 
    `
        mutation voteCourse($slug: ID!, $existingVotes: Int) {
            updateCourse(where: { id: $slug }, data: { vote: $existingVotes }) {
                id
                name
                vote
            }
        }
    `;

    const publishCourse = 
    `
        mutation publishCourse($slug: ID!) {
            publishCourse(where: { id: $slug }) {
                id
                name
                vote
            }
        }
    `;
});

Вы будете использовать запрос и мутации, когда сделаете запросы в базу данных GraphCMS.

Наконец, вы используете клиент GraphQL для выполнения запросов. Следующий запрос получает курс из базы данных:

const { course } = await client.request(getCourse, { slug });

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

const existingVotes = course.vote + 1;

После этого вы поднимаете курс, сделав запрос в базу данных и передавая слизняк и Существующиевоты , который является новым увеличенным номером.

const voteCourse = await client.request(upvoteCourse, { slug, existingVotes });

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

Таким образом, вы делаете еще один запрос на сервер для публикации данных. Вы передаете слизняку, поэтому база данных знает, какой курс обновить.

const publishedCourse = await client.request(publishCourse, { slug });

Наконец, после того, как все операции успешны, вы отправляете ответ JSON, содержащий:

  • сообщение
  • обновленное количество голосов
res.json({ message: 'Course upvoted successfully!', votes: publishedCourse.publishCourse.vote });

Вот как полный код для upvotecourse.js должно быть:

const express = require('express');
const { GraphQLClient } = require('graphql-request');

const app = express();

app.use(express.json());

const client = new GraphQLClient(
    process.env.GRAPHCMS_ENDPOINT,
    {
        headers: {
            authorization: `Bearer ${process.env.BEARER}`,
        }
    }
);

app.post('/upvote/:slug', async (req, res) => {
    const { slug } = req.params;

    const getCourse =
    `
        query getCourse($slug: ID!) {
            course(where: { id: $slug }) {
                id
                vote
                name
            }
        }
    `;

    const upvoteCourse = 
    `
        mutation voteCourse($slug: ID!, $existingVotes: Int) {
            updateCourse(where: { id: $slug }, data: { vote: $existingVotes }) {
                id
                name
                vote
            }
        }
    `;

    const publishCourse = 
    `
        mutation publishCourse($slug: ID!) {
            publishCourse(where: { id: $slug }) {
                id
                name
                vote
            }
        }
    `;

    const { course } = await client.request(getCourse, { slug });
    const existingVotes = course.vote + 1;
    const voteCourse = await client.request(upvoteCourse, { slug, existingVotes });
    const publishedCourse = await client.request(publishCourse, { slug });

    res.json({ message: 'Course upvoted successfully!', votes: publishedCourse.publishCourse.vote });
});

module.exports = app

Теперь вы можете использовать пользовательскую конечную точку API для курсов Upvote.

Строитель courseist.vue

Courseist.vue Компонентные петли над множеством курсов и делают каждый курс индивидуально.

В приведенном ниже коде вы называете Coursecard компонент для каждого курса, и вы проходите необходимые реквизиты.

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

Теперь вы можете использовать Courseist компонент для отображения курсов из базы данных на странице.

Строить нижний файл. Vue

Компонент нижнего колонтитула содержит только две иконки:

  • иконка GitHub
  • значок Твиттера

Ниже вы можете увидеть код для нижнего колонтитула ( Он использует SVG для значков ):

Как обычно, давайте возьмем домашнюю страницу и разделим ее на две части. Домашняя страница живет в Страницы каталог, и он называется index.js Анкет

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

  1. Герой компонент
  2. Компонент курсора, который отдает все курсы из базы данных
  3. Компонент нижнего колонтитула

Таким образом, добавьте их в свой шаблон следующим образом:

Если вы посмотрите на Courseist Компонент, вы видите, что Курсы опора передается. Курсы Опора – это массив с объектами, каждый объект, представляющий индивидуальный курс.

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

В приведенном ниже фрагменте кода вы используете graphql-request Пакет и Асинкдата Крюк, чтобы сделать запрос на графики. Вы также указываете, какие поля вернуть. Затем, как только у вас есть данные из базы данных, вы возвращаете их и передаете их как опору на Courseist Анкет

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

Рисунок 53

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

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

Прежде чем идти дальше, важно сформировать идею о том, как работают динамические страницы в Nuxt. Чтобы создать динамическую страницу в Nuxt, вам нужно использовать подчеркивание ( _ ) перед именем страницы.

Таким образом, создайте новую страницу _slug.vue в папке «страницы». Поскольку вы префикс подчеркнули его подчеркиванием, это будет динамичная страница. Затем вы можете получить доступ к значению из параметров. В этом случае вы можете получить значение через Params.slug , как вы увидите в коде ниже.

Теперь давайте перейдем на первый шаг, который должен построить шаблон. Все, что вы видите внутри усам, – {{}} – Это динамические данные, поступающие из базы данных.

Во второй части вы используете graphql-request Чтобы сделать запрос GraphQL в базу данных GraphCMS. Вы также проходите слизняк к запросу, который представляет идентификатор курса.

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

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

Рисунок 54 показывает, как выглядит отдельная страница курса. Вы можете увидеть все подробности о курсе и авторах.

Рисунок 54

И ты закончил!

Молодец для построения приложения! Теперь вы можете хранить технические курсы и позволить людям голосовать за них.

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

  • Добавьте изображения для курсов и авторов
  • Позвольте людям комментировать
  • Разрешить только один голос за пользователя
  • Добавить аутентификацию и разрешение

И более.

Вы можете увидеть живое приложение Здесь Анкет Кроме того, репозиторий GitHub доступен по этой ссылке Анкет

Статья, первоначально опубликованная на catalins.tech .

Оригинал: “https://dev.to/codeloungedev/graphcms-nuxt-js-vote-your-favourite-tech-courses-2efl”

Читайте ещё по теме: