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

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

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

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

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

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

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

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

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

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

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

В ShowPostComponent мы добавим две иконки для редактирования и удаления поста. Мы будем использовать Font Awesome. Загрузите и включите папки Font Awesome в папке assets.

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

На странице src/app/index.html включите ссылку на CSS-стиль Font Awesome.

Теперь измените файл show-post/show-post.component.html, чтобы включить HTML-код для иконок редактирования и удаления.

Вот как будет выглядеть выглядит файл show-post.component.html:

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

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

Заполнение редактируемой информации во всплывающем окне

Когда пользователь нажимает на иконку редактирования, соответствующую любому посту в блоге, нам нужно заполнить данные в окне редактирования поста. Добавьте метод клика к иконке редактирования.

Внутри CommonService нам необходимо определить наблюдаемый объект, чтобы отслеживать, когда будет нажата кнопка редактирования:

Определите еще одну переменную, чтобы отслеживать, когда пост будет отредактирован:

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

Когда пользователь нажимает кнопку редактирования, мы будем получать информацию в общей службе. Чтобы вывести всплывающее окно для обновления поста, нам нужно программно нажать кнопку добавления поста. Внутри файла home/home.component.html добавьте к кнопке добавления поста идентификатор #.

Импортируйте ViewChild и ElementRef в файл home.component.ts.

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

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

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

Определите ссылку на кнопку добавления в файле home.component.ts.

Внутри конструктора HomeComponent подпишитесь на postEdit_Observable из CommonService. При выполнении обратного вызова подписки postEdit_Observable вызовите клик кнопки добавления, чтобы отобразить всплывающее окно. Вот как будет выглядеть файл home.component.ts:

Нам нужно подписаться на postEdit_Observable в файле add-post.component.ts, чтобы настроить редактирование поста для переменной post. Вот как выглядит метод ngOnInit в add-post.component.ts:

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

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

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

Внутри server/app.js давайте определим еще одну конечную точку REST API для обновления информации поста на основе идентификатора. Вот как это должно выглядеть:

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

После установления соединения мы используем метод обновления в модели Post.

Мы будем обновлять пост на основе отправленного идентификатора поста. Как видно из приведенного выше кода, мы указали для обновления post _id. Во втором параметре мы указали поля для обновления, title и description.

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

Выполнение вызова REST API для обновления

Идентификатор, возвращаемый из MongoDB для каждого поста, равен _id, поэтому нам нужно изменить идентификатор модели src/app/models/post.model.ts. Вот как это выглядит:

Когда мы нажимаете кнопку добавления поста, метод вызывает addPost. Внутри метода addPost в add-post.component.ts мы проверяем, имеет ли объект post _id. Если _id присутствует, нам необходимо вызвать метод обновления из службы, в противном случае мы вызываем метод службы добавления поста. Создайте внутри файла add-post.service.ts метод updatePost.

Вот как будет выглядеть измененный метод addPost в файле add-post.component.ts:

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

Заключение

В этом руководстве мы реализовали функционал для обновления существующих постов блога. Мы создали базовую конечную точку REST API, чтобы обновлять данные блога, основываясь на ID поста. Мы использовали клиент Mongoose для обновления информации поста в базе данных MongoDB. В следующей части мы будем использовать функции удаления и выхода из системы. Исходный код этого руководства доступен на 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