Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Создание приложения блога на Angular и MongoDB: Отображаем пост

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Home
Creating a Blogging App Using Angular & MongoDB: Add Post

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В последней части серии учебников вы видели, как написать REST API ендпоинт для входа пользователя в систему. Вы использовали Mongoose для взаимодействия с MongoDB из node. После успешной валидации вы видели, как использовать Angular Router для перехода к HomeComponent.

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

Начинаем

Давайте начнем с клонирования исходного кода из последней части серии.

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

После установки зависимостей перезапустите клиентское и серверное приложение.

Откройте http://localhost:4200 в своем браузере и у вас должно быть запущенное приложение.

Angular Blogging App

Создание компонента «Отображение поста»

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

Чтобы отобразить сообщения в блоге, давайте создадим новый компонент под названием ShowPostComponent. Создайте папку под названием show-post внутри папки src/app. Внутри папки show-post создайте файл show-post.component.html и добавьте следующий код HTML:

Создайте файл show-post.component.ts, который будет содержать класс ShowPostComponent. Вот как это выглядит:

Импортируйте ShowPostComponent в файл app.module.ts.

Добавьте ShowPostComponent в NgModule в файл app.module.ts.

Измените файл home.component.html, чтобы включить селектор ShowPostComponent.

Вот как выглядит измененный файл home.component.html:

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

Angular Blog App - Show Post Component

Создание сервиса Show Post

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

Создайте файл show-post.service.ts в src/app/show-post и добавьте следующий код:

Внутри ShowPostService создайте метод getAllPost, который совершит вызов REST API для получения списка сообщений в блоге. Вот как это выглядит:

Вот как выглядит файл show-post.service.ts:

Затем вам нужно записать API REST для запроса коллекции MongoDB, чтобы получить список сообщений в блоге.

На стороне сервера, давайте начнем с создания модели для поста. Внутри папки models создайте файл с именем post.js. Подключите модуль Mongoose и создайте схему для поста в блоге и экспортируйте его. Вот как выглядит /server/models/post.js:

Экспортируйте указанный выше файл post.js в app.js.

Создайте API ендпоинт /api/post/getAllPost для получения списка сообщений в блоге. Используйте клиент mongoose для подключения к базе данных MongoDB.

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

Обратный вызов .find возвращает список документов.

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

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

Выполнение вызова API

В файле show-post.component.ts определите список массивов для хранения результатов вызова API.

Импортируйте ShowPostService в ShowPostComponent.

Добавьте ShowPostService в качестве провайдера к ShowPostComponent.

Определите метод getAllPost, для вызова метода службы. Вот как это выглядит:

Как видно из приведенного выше кода, результаты сохраняются в переменную posts.

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

Вот как выглядит файл show-post.component.ts:

Рендеринг записей блога

В коллекции MongoDB могут отсутствовать записи. Итак, добавим несколько записей в MongoDB из оболочки mongo.

Войдите в оболочку MongoDB, введя следующую команду:

Как только вы входите в оболочку mongo, проверьте базу данных, доступную в базе данных MongoDB.

Выберите базу данных blogDb из перечисленных записей.

Создайте коллекцию с именем post.

Вставьте пару записей в коллекцию post.

Теперь давайте свяжем нашу переменную posts в ShowPostComponent с кодом HTML.

Вы будете использовать директиву ngFor для перебора переменной posts и отображения сообщений в блоге. Измените файл show-post.component.html, как показано ниже:

Сохраните указанные выше изменения и перезапустите клиентский сервер REST API. Войдите в приложение, и у вас будут вставленные записи из MongoDB, отображаемые на главной странице.

Angular Blog App - Dynamic Blog Post Listing

Подведем итоги

В этом учебном пособии вы создали ShowPostComponent для отображения сообщений из блога, которые были сохранены в базе данных MongoDB. Вы создали API REST для запроса базы данных MongoDB с использованием клиента Mongoose с сервера Node.

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

Исходный код этого учебника доступен на GitHub.

Как прошел у вас этот урок? Оставляйте свои комментарии ниже под этой статьей.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.