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

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

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

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

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

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

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

Добавление подтверждения удаления

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

Давайте начнем с добавления всплывающего окна для подтверждения, когда пользователь нажимает кнопку удаления. Добавьте следующий код в файл show-post.component.html.

Измените иконку удаления, чтобы включить атрибут data-target:

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

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

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

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

Начните с подключения к базе данных MongoDB с помощью клиента Mongoose.

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

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

Когда пользователь нажимает на иконку удаления, нам нужно сохранить информацию поста в переменной. Если пользователь выполнит удаление после подтверждения, мы выполняем вызов REST API для удаления. Добавьте к клику кнопки удаления метод setDelete в файле show-post.component.html. Вот как это должно выглядеть:

В файле show-post.component.ts определите переменную post_to_delete. Определите метод setDelete в show-post.component.ts, чтобы сохранить информацию поста, который нужно удалить.

Когда пользователь нажимает кнопку отмены, нам нужно вызвать метод unsetDelete, чтобы установить для post_to_delete значение null. Вот как это выглядит:

Вот как выглядит HTML-код кнопки Cancel для show-post.component.html:

Теперь давайте определим метод службы, с именем deletePost, в файле show-post.service.ts. Вот как это выглядит:

Чтобы вызвать метод службы из ShowPostComponent, определите метод deletePost, который будет подписываться на метод deletePost из ShowPostService. Вот как выглядит метод deletePost из ShowPostComponent:

После удаления поста нам необходимо обновить список постов, поэтому нужно выполнить вызов метода getAllPost. Мы также должны закрыть всплывающее окно, после того, как удаление успешно выполнено. Сначала импортируйте ссылки на ViewChild и ElementRef в файле show-post.component.ts.

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

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

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

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

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

Когда пользователь входит в приложение, мы сохраняем имя пользователя вошедшего в систему в localstorage. Измените метод validateLogin внутри LoginComponent, чтобы сохранить имя пользователя вошедшего в систему в localstorage.

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

Вот как выглядит метод validateLogin:

Теперь, в файле home.component.html добавьте к кнопке выхода из системы метод logout.

В файле home.component.ts создайте метод logout. Внутри метода logout нам нужно очистить локальное хранилище для loggedInUser. Вот как выглядит метод:

В методе конструктора компонента HomeComponent нам необходимо добавить проверку локального ключа хранения loggedInUser. Если он не найден, нам необходимо перенаправить пользователя на страницу авторизации. Вот как выглядит файл home.component.ts:

Сохраните указанные выше изменения и перезапустите клиентский сервер. Попробуйте получить доступ к домашней странице, перейдя в браузере по URL-адресу //localhost:4200/home. Вы будете перенаправлены на страницу авторизации. Войдите в приложение и нажмите кнопку выхода. Вы выйдете из системы и будете снова перенаправлены на страницу авторизации.

Заключение

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

Автор: Roy Agasthyan

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

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

Метки:

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

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