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

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

От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». В предыдущей части мы рассмотрели, как написать конечную точку REST API для входа пользователя в систему. Мы использовали Mongoose для взаимодействия с MongoDB от Node. После успешной валидации мы использовали Angular Router для перенаправления пользователя к HomeComponent. В этой части серии мы создадим компонент для того, чтобы выводить список анонсов постов на главной странице.

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

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

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

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

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

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

Создание компонента Show Post

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

Чтобы отобразить посты блога, давайте создадим новый компонент под названием ShowPostComponent. Создайте в папке src/app папку с именем show-post. В папке 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 и MongoDB: Отображение списка анонсов постов

Создание службы Show Post Component

Данные, отображаемые в службе 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 для получения списка постов блога. Для подключения к базе данных MongoDB используйте клиент mongoose.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

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

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

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

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

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

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

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

@Component({
selector: 'app-show-post',
templateUrl: './show-post.component.html',
styleUrls: ['./show-post.component.css'],
providers: [ ShowPostService ]
})

Как видно из приведенного выше кода, в результирующих данных задается переменная 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 и MongoDB: Отображение списка анонсов постов

Заключение

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

Автор: Roy Agasthyan

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Angular 4 NgRx

Посмотрите видео по Angular 4 NgRx

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий