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

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

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

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

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

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

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

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

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

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

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

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

Создайте файл add-post.component.html и добавьте в него следующий код HTML:

Компонент добавления постов будет отображаться во всплывающем окне. Теперь вам нужно добавить AddPostComponent в NgModule. Импортируйте AddPostComponent в файл app.module.ts.

Добавьте компонент в список объявлений NgModule следующим образом:

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

Сохраните указанные выше изменения и перезапустите приложение. Войдите в приложение и нажмите ссылку Add на главной странице. У вас во всплывающем окне отобразится компонент AddPostComponent.

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

Включение функции добавления постов

Добавьте директиву ngModel к элементам ввода для title и description.

Добавьте к кнопке директиву click для вызова метода сохранения поста.

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

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

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

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

В AddPostService создайте метод addPost, чтобы выполнить вызов REST API.

Как видно из приведенного выше кода, мы использовали HttpClient для вызова API и возврата Observable. В файле add-post.component.ts внутри метода addPost вы осуществим подписку на метод addPost из файла add-post.service.ts.

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

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

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

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

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

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

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

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

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

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

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

Когда данные успешно добавлены в базу данных, нам необходимо закрыть всплывающее окно. Чтобы закрыть всплывающее окно, существует кнопка закрытия, которую нужно нажать программно. Мы будете использовать декоратор @ViewChild для доступа к кнопке закрытия. Импортируйте ViewChild и ElementRef в AddPostComponent.

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

Инициируйте клик closeBtn, используя следующий код:

Добавьте вышеприведенный код в обратный вызов метода addPost. Ниже приведен метод addPost из add-post.component.ts.

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

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

Следует отметить, что недавно добавленное сообщение в блоге не отображается в списке постов блога. Поэтому нам нужно добавить триггер для уведомления, когда нужно обновлять ShowPostComponent. Мы будем использовать для связи между этими двумя компонентами общий сервис. Создайте в папке src/app папку service. Создайте в ней файл common.service.ts со следующим кодом:

Как видно из приведенного выше кода, мы объявили объект с именем 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.

Автор: Roy Agasthyan

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

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

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

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

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

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

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

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

Комментарии 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