В этом руководстве мы создадим интерфейс с использованием VueJS для нашего Forem Backend, который поддерживает веб-сайт dev.to

В предыдущем руководстве мы клонировали Forem’s Repo на GitHub и разместили его в Google Cloud. Мы также создали несколько API, чтобы мы могли использовать информацию, хранящуюся в его бэкэнде.

В этом руководстве мы создадим новый интерфейс с использованием VueJ и будем использовать эти недавно созданные API.

Что будем строить

Разработаем следующий сайт: - https://simplecoding.dev/

Предварительные условия

Предполагается, что вы знаете основы

  • API
  • Интерфейс командной строки VueJS
  • Бутстрап 4

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

  • НПМ
  • Node.js
  • Хороший редактор (рекомендуется JetBrains WebStorm / IntelliJ IDEA / MS Visual Studio Code)
  • Хороший браузер (рекомендуется Google Chrome)

Смотреть это

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

Давайте код

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

ШАГ 1. Установите Vue Cli

  • Используйте следующую команду для установки VueCLI на свой компьютер - npm install -g @vue/cli
  • Создайте новый проект Vue, используя следующую команду - vue create frontend. Это создаст новый каталог с именем frontend со следующей структурой каталогов

ШАГ 2. Создайте компонент для отображения статьи

  • Давайте создадим компонент, который может отображать каждую статью. Этот компонент будет извлекать содержимое статьи из API с помощью ярлыка, который будет присутствовать в URL-адресе.
  • Для получения данных (в нашем случае - всей статьи) из API воспользуемся библиотекой axios. Вы можете установить axios с помощью npm install axios --save
  • Каждая статья также требует раздела комментариев, где читатели могут оставлять комментарии. Для этого воспользуемся API disqus. Вы должны создать учетную запись на их веб-сайте и сгенерировать ключ для своего приложения, прежде чем продолжить это руководство.
  • Если вы читали предыдущее руководство, то знаете, что наш API возвращает объект JSON с атрибутом processed_html. Этот атрибут содержит HTML-код статьи. Теперь, поскольку наша статья содержит суть, этот HTML-код также будет иметь тег скриптов. Эти скрипты не будут выполняться, потому что VueJS - это интерфейсный фреймворк, и эти скрипты будут загружены в DOM после того, как браузер завершит выполнение кода VueJS. Следовательно, нам нужно выполнить скрипт вручную. Для этого мы будем использовать модуль узла под названием postscribe. Вы можете установить подписку с помощью npm install postscribe --save
  • Вы можете вставить следующий код в /src/components/Article.vue

ШАГ 3. Создайте список, чтобы увидеть все статьи и теги

  • Мы должны отобразить список всех статей в нашем интерфейсе. Для этого мы сначала создадим компонент под названием ArticleCard.vue. Этот компонент будет представлять каждую статью в списке.
  • Вставьте следующий код в /src/components/cards/ArticleCard.vue
  • Так выглядит каждая ArticleCard

  • Теперь мы создадим новый компонент под названием ArticleList.vue. В этом компоненте мы создадим список из ArticleCard компонентов. Вставьте следующий код в /src/components/lists/ArticleList.vue
  • Теперь мы создадим еще один компонент с именем TagCard.vue. Он будет использоваться для отображения каждого тега в списке тегов. Вставьте следующий код в /src/components/cards/TagCard.vue
  • Так выглядит каждая карточка тега

ШАГ 4.1. Создание представлений - панель навигации

  • До сих пор мы создавали только компоненты для приложения VueJS. Теперь мы создадим представления, используя эти компоненты.
  • Сначала мы создадим панель навигации с помощью Bootstrap 4. Вставьте следующий код в /public/index.html
  • Вот как выглядит Navbar: -

ШАГ 4.2. Создание представлений - Домашняя страница

  • Теперь мы создадим домашнюю страницу нашего веб-сайта. На главной странице мы будем отображать логотип нашего веб-сайта и иметь ссылки на четыре тега - Algorithms, FrontEnd, BackEnd и DevOps.
  • Вставьте следующий код в /src/views/HomePageView.vue
  • Так будет выглядеть наша домашняя страница


dev-frontend
Домашняя страница simplecoding.dev



ШАГ 4.3. Создание представлений - Просмотр всех статей

  • Теперь мы создадим представление, в котором будем отображать список всех статей. Мы будем использовать компоненты ArticleCard.vue и ArticleLists.vue.
  • Вставьте следующий код в /src/views/AllArticlesView.vue
  • Так будет выглядеть All Articles страница

ШАГ 4.4. Создание представлений - просмотр всех тегов

  • Мы создадим представление, в котором будут отображаться все теги. В этом представлении мы будем использовать компонент TagCard.vue. Вставьте следующий код в /src/views/TagListView.vue
  • Список тегов будет выглядеть так

  • Теперь мы создадим другое представление, в котором мы будем отображать все статьи, содержащие конкретный тег. Мы будем повторно использовать компонент ArticleList.vue.
  • Вставьте следующий код в /src/views/TagArticlesView.vue

ШАГ 4.5. Создание представлений - просмотры тегов главной страницы

  • Мы добавили ссылки на четыре тега на главной странице. Теперь мы создадим страницы, на которых будут отображаться все статьи, связанные с этими тегами.
  • Вставьте следующий код в /src/component/views/FrontendHomePage.vue
  • Вставьте следующий код в /src/component/views/AlgorithmsHomePage.vue
  • Вставьте следующий код в /src/component/views/BackendHomePage.vue
  • Вставьте следующий код в /src/component/views/DevopsHomePage.vue

Это оно

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