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

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

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

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

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

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

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

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

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

Откройте в браузере адрес 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

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

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

После того, как вы установил соединение, вы можете использовать модель 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

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

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

Курс по Angular 4 NgRx

Прямо сейчас посмотрите курс по Angular 4 NgRx

Смотреть курс

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree