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: Show Post
Creating a Blogging App Using Angular & MongoDB: Edit Post

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

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

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

С чего начать

Давайте начнем с того, что скопируем исходный код из предыдущей части этой серии уроков.

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

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

В вашем браузере перейдите по адресу http://localhost:4200, и вы увидите работу вашего приложения.

Создание компонента для добавления поста

Давайте начнем с создания AddPostComponent. Создайте папку add-post внутри каталога src/app. Внутри папки add-post создайте файл add-post.component.ts, и добавьте в него следующий код:

Создайте файл add-post.component.html, содержимое которого представлено вот таким HTML кодом:

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

Теперь вам необходимо добавить AddPostComponent в NgModule. Импортируйте AddPostComponent в файле app.module.ts.

Добавьте этот компонент в список declarations в NgModule. Вот как это выглядит:

Для того, чтобы открывать диалоговое окно добавления поста, вы уже добавили атрибут data-target соответствующей кнопке в home.component.html.

Сохраните эти изменения и перезапустите приложение. Авторизуйтесь в приложении и кликните кнопку Добавить (Add) на главной странице. Это вызовет открытие диалогового окна AddPostComponent.

Angular Blog Application - Add Post Popup

Создание функционала добавления поста

Добавьте инструкции ngModel полям ввода значений title и description.

Добавьте инструкцию для события click кнопке, вызывающей сохранение блог поста.

Импортируйте модель Post из src/app/models/post.model.ts в файле add-post.component.ts.

Определите переменную post в файле add-post.component.ts.

Определите метод addPost в файле add-post.component.ts. В методе addPost вы будете производить проверку введенных значений title и description и вызывать служебный метод для обращения к REST API. Вот как выглядит этот метод:

Давайте создадим служебный файл для компонента AddPostComponent. Создайте файл add-post.service.ts и добавьте в него следующий код:

В AddPostService создайте метод addPost для обращения к REST API.

Как мы видим из кода выше, вы используете HttpClient для выполнения API запроса и возвращаете Observable.

В файле add-post.component.ts в методе addPost сделайте привязку к методу addPost из файла add-post.service.ts.

Вот как выглядит содержимое файла add-post.component.ts:

Создание REST API для добавления поста

Давайте создадим протокол REST API для добавления блог поста в базу данных MongoDB. В файле server/app.js создадим протокол API как показано ниже:

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

После установки соединения, необходимо создать объект модели, используя схему Post, которая определена в файле server/model/post.js.

Как можно увидеть из кода выше, вы создали объект Post, используя title и description, значение которых были переданы в объекте req.

Вызываем метод save объекта Post для того, чтобы сохранить запись в MongoDB.

Как вы можете увидеть в коде выше, как только функция обратного вызова метода save будет вызвана без ошибок, она будет возвращать сообщение success вместе с выводом объекта doc.

Вот как будет в итоге выглядеть протокол REST API:

Сохраните эти изменения и перезагрузите серверы Angular и Node. Авторизуйтесь в приложении и попробуйте добавить новый блог пост. После того, как вы кликните по кнопке Добавить (Add), проверьте консоль браузера, и вы увидите сообщение об успешном запросе.

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

Вы будете использовать декоратор @ViewChild для получения доступа к кнопке закрытия.

Импортируйте ViewChild и ElementRef в AddPostComponent.

В AddPostComponent определите следующую переменную:

Примените событие клика closeBtn вот таким кодом:

Добавьте код, который вы видите выше, в возвратную функцию успешного запроса метода addPost. Вот как выглядит метод addPost из add-post.component.ts.

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

Обновление списка постов блога

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

Создайте папку service в каталоге src/app. Создайте в ней файл common.service.ts со следующим кодом:

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

Импортируйте CommonService в app.module.ts и включите его в список провайдеров NgModule. Вот как это выглядит:

Импортируйте CommonService в файле show-post.component.ts и инициализируйте его в конструкторе.

В методе ngOnInit, создайте привязку к переменной postAdded_Observable и загрузите метод getAllPost. Вот как выглядит метод ngOnInit:

Импортируйте CommonService в файле add-post.component.ts и добавьте вызов метода notifyPostAddition каждый раз при добавлении блог поста. Вот как выглядит метод addPost из AddPostComponent:

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

Подытожим 

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

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

Исходный код данного урока доступен на 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.