От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». В предыдущей части этой серии вы узнали, как реализовать функционал для редактирования постов. В этой части мы реализуем функционал для того, чтобы производить удаление существующего поста и осуществлять выход из системы.
Приступим. Давайте начнем с клонирования исходного кода из последней части серии.
git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost
Перейдите в каталог проекта и установите необходимые зависимости.
cd DeletePost/client npm install cd DeletePost/server npm install
После установки зависимостей перезапустите клиентское и серверное приложение.
cd DeletePost/client npm start cd DeletePost/server node app.js
Откройте в браузере адрес http://localhost:4200, и у вас должно запуститься приложение.
Добавление подтверждения удаления
Мы уже добавили иконку удаления поста. Когда пользователь нажимает на иконку удаления, расположенному рядом с любым постом, нам нужно вывести всплывающее окно для подтверждения удаления. Если пользователь подтверждает удаление, только тогда необходимо удалить пост.
Давайте начнем с добавления всплывающего окна для подтверждения, когда пользователь нажимает кнопку удаления. Добавьте следующий код в файл show-post.component.html.
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Delete Post</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure ? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Delete</button> </div> </div> </div> </div>
Измените иконку удаления, чтобы включить атрибут data-target:
<i data-toggle="modal" data-target="#deleteModal" title="Delete" class="fas fa-trash-alt" aria-hidden="true"></i>
Сохраните указанные выше изменения и перезапустите клиентский сервер. Войдите в приложение и нажмите иконку удаления, соответствующую любому посту, и у вас экране должно появиться всплывающее окно для подтверждения.
Создание API для удаления постов
Давайте создадим конечную точку REST API для удаления постов. В файле server/app.js создайте конечную точку REST API для обработки удаления поста на основе идентификатора. Вот как она должна выглядеть:
app.post('/api/post/deletePost', (req, res) => { })
Начните с подключения к базе данных MongoDB с помощью клиента Mongoose.
mongoose.connect(url, { useMongoClient: true }, function(err){ // соединение установлено
});
Мы будем использовать метод findByIdAndRemove, чтобы найти пост, используя идентификатор, и удалить его. После того, как пост был успешно удалено, мы возвращаем статус в качестве ответа. Вот как выглядит конечная точка REST API:
app.post('/api/post/deletePost', (req, res) => { mongoose.connect(url, { useMongoClient: true }, function(err){ if(err) throw err; Post.findByIdAndRemove(req.body.id, (err, doc) => { if(err) throw err; return res.status(200).json({ status: 'success', data: doc }) }) });
})
})
Выполнение вызова API удаления
Когда пользователь нажимает на иконку удаления, нам нужно сохранить информацию поста в переменной. Если пользователь выполнит удаление после подтверждения, мы выполняем вызов REST API для удаления. Добавьте к клику кнопки удаления метод setDelete в файле show-post.component.html. Вот как это должно выглядеть:
<i (click)="setDelete(post)" data-toggle="modal" data-target="#deleteModal" title="Delete" class="fas fa-trash-alt" aria-hidden="true"></i>
В файле show-post.component.ts определите переменную post_to_delete. Определите метод setDelete в show-post.component.ts, чтобы сохранить информацию поста, который нужно удалить.
setDelete(post: Post){ this.post_to_delete = post;
}
Когда пользователь нажимает кнопку отмены, нам нужно вызвать метод unsetDelete, чтобы установить для post_to_delete значение null. Вот как это выглядит:
unsetDelete(){ this.post_to_delete = null;
}
Вот как выглядит HTML-код кнопки Cancel для show-post.component.html:
<button #closeBtn (click)="unsetDelete()" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
Теперь давайте определим метод службы, с именем deletePost, в файле show-post.service.ts. Вот как это выглядит:
deletePost(id){ return this.http.post('/api/post/deletePost',{id : id})
}
Чтобы вызвать метод службы из ShowPostComponent, определите метод deletePost, который будет подписываться на метод deletePost из ShowPostService. Вот как выглядит метод deletePost из ShowPostComponent:
После удаления поста нам необходимо обновить список постов, поэтому нужно выполнить вызов метода getAllPost. Мы также должны закрыть всплывающее окно, после того, как удаление успешно выполнено. Сначала импортируйте ссылки на ViewChild и ElementRef в файле show-post.component.ts.
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
Определите переменную closeBtn, чтобы создать ссылку на кнопку закрытия всплывающего окна.
@ViewChild('closeBtn') closeBtn: ElementRef;
Теперь, когда вызов удаления успешно завершен, нам нужно закрыть всплывающее окно подтверждения удаления. Вот как выглядит измененный метод deletePost:
deletePost(){ this.showPostService.deletePost(this.post_to_delete._id).subscribe(res => { this.getAllPost(); this.closeBtn.nativeElement.click(); })
}
Вот как выглядит файл show-post.component.ts:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ShowPostService } from './show-post.service';
import { Post } from '../models/post.model';
import { CommonService, } from '../service/common.service'; @Component({ selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], providers: [ ShowPostService ]
})
export class ShowPostComponent implements OnInit { @ViewChild('closeBtn') closeBtn: ElementRef; public posts : any []; public post_to_delete; constructor(private showPostService: ShowPostService, private commonService: CommonService) { } ngOnInit(){ this.getAllPost(); this.commonService.postAdded_Observable.subscribe(res => { this.getAllPost(); }); } setDelete(post: Post){ this.post_to_delete = post; } unsetDelete(){ this.post_to_delete = null; } getAllPost(){ this.showPostService.getAllPost().subscribe(result => { console.log('result is ', result); this.posts = result['data']; }); } editPost(post: Post){ this.commonService.setPostToEdit(post); } deletePost(){ this.showPostService.deletePost(this.post_to_delete._id).subscribe(res => { this.getAllPost(); this.closeBtn.nativeElement.click(); }) } }
Сохраните указанные выше изменения и перезапустите клиентское и серверное приложение. Войдите в приложение и нажмите иконку удаления, соответствующую любому посту в блоге. Появится окно для подтверждения действия. Подтвердите удаление, и пост будет удален, а список постов будет обновлен.
Обработка сеанса пользователя во время входа в систему
Когда пользователь входит в приложение, мы сохраняем имя пользователя вошедшего в систему в localstorage. Измените метод validateLogin внутри LoginComponent, чтобы сохранить имя пользователя вошедшего в систему в localstorage.
Когда результат от вызова API подтвержден, добавьте следующий код, чтобы сохранить имя пользователя вошедшего в систему.
localStorage.setItem('loggedInUser', this.user.username);
Вот как выглядит метод validateLogin:
validateLogin() { if(this.user.username && this.user.password) { this.loginService.validateLogin(this.user).subscribe(result => { if(result['status'] === 'success') { localStorage.setItem('loggedInUser', this.user.username); this.router.navigate(['/home']); } else { alert('Wrong username password'); } }, error => { console.log('error is ', error); }); } else { alert('enter user name and password'); }
}
Теперь, в файле home.component.html добавьте к кнопке выхода из системы метод logout.
<button (click)="logout()" type="button" class="btn btn-link"> Logout </button>
В файле home.component.ts создайте метод logout. Внутри метода logout нам нужно очистить локальное хранилище для loggedInUser. Вот как выглядит метод:
logout(){ localStorage.removeItem('loggedInUser'); this.router.navigate(['/']);
}
В методе конструктора компонента HomeComponent нам необходимо добавить проверку локального ключа хранения loggedInUser. Если он не найден, нам необходимо перенаправить пользователя на страницу авторизации. Вот как выглядит файл home.component.ts:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { CommonService } from '../service/common.service';
import { Router } from '@angular/router'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']
})
export class HomeComponent { @ViewChild('addPost') addBtn: ElementRef; constructor(private commonService: CommonService, private router: Router){ if(!localStorage.getItem('loggedInUser')){ this.router.navigate(['/']); } this.commonService.postEdit_Observable.subscribe(res => { this.addBtn.nativeElement.click(); }); } logout(){ localStorage.removeItem('loggedInUser'); this.router.navigate(['/']); } }
Сохраните указанные выше изменения и перезапустите клиентский сервер. Попробуйте получить доступ к домашней странице, перейдя в браузере по URL-адресу http://localhost:4200/home. Вы будете перенаправлены на страницу авторизации. Войдите в приложение и нажмите кнопку выхода. Вы выйдете из системы и будете снова перенаправлены на страницу авторизации.
Заключение
В этой части серии статей вы узнали, как реализовать удаление поста. Мы также создали REST API для удаления из базы данных MongoDB информации поста с использованием клиента Mongoose. Мы реализовали только основные функции приложения для блоггинга, его можно дополнить другим функционалом. Исходный код этого руководства доступен на GitHub.
Автор: Roy Agasthyan
Источник: https://code.tutsplus.com/
Редакция: Команда webformyself.