Crearea unui app blogging folosind unghiular & MongoDB Adauga post

În partea anterioară a seriei tutoriale de bloguri Angular, ați învățat cum să creați ShowPostComponent pentru a afișa lista de postări de blog pe pagina de pornire. Ați extras înregistrările inserate din shell-ul MongoDB folosind punctul final REST API.

În acest tutorial, veți crea o componentă nouă numită AddPostComponent pentru a oferi interfața cu utilizatorul pentru a adăuga o nouă postare de blog la baza de date MongoDB.

Noțiuni de bază

Să începem prin clonarea codului sursă din partea anterioară a seriei tutorial.

git clone https://github.com/royagasthyan/ShowPost AddPost

Navigați la directorul proiectului și instalați dependențele necesare.

cd AddPost / client npm instalați cd AddPost / server npm install

Odată ce aveți dependențele instalate, reporniți aplicația client și server.

cd AddPost / client npm start cd Aplicația AddPost / server app.js

Punctați browser-ul dvs. la http: // localhost: 4200 și ar trebui să aveți aplicația să ruleze.

Crearea componentei Adăugare postare

Să începem prin crearea AddPostComponent. Creați un dosar numit add-post în interiorul src / app pliant. În interiorul add-post folder, creați un fișier numit add-post.component.ts și adăugați următorul cod:

import Component de la '@ angular / core'; import Post de la "... /models/post.model"; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css']) clasa de export AddPostComponent constructor ()  

Creați un fișier numit add-post.component.html și următorul cod HTML:

 
 
 
 
Titlul modal
  ×  
 
 
 
 Titlu  
 
 Descriere   
 Adăuga 
 
 
 
 

Veți fi afișat componenta postare post ca un popup.

Acum trebuie să adăugați AddPostComponent la NgModule. Importați AddPostComponent în app.module.ts fişier.

importați AddPostComponent din "./add-post/add-post.component";

Adăugați componenta la NgModule declaraţii listă. Iată cum arată:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; import ROUTING din "./app.routing"; import FormsModule din '@ unghiular / formulare'; import HttpClientModule de la '@ angular / common / http'; import RootComponent din ".root/root.component"; import LoginComponent din './login/login.component'; import HomeComponent de la "./home/home.component"; import ShowPostComponent de la "./show-post/show-post.component"; importați AddPostComponent din "./add-post/add-post.component"; @NgModule (declarații: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importurile: [BrowserModule, ROUTING, FormsModule, HttpClientModule], furnizori: [], bootstrap: [RootComponent] 

Pentru a declanșa adăugarea pop-up popup, ați adăugat deja date-țintă atribuiți butonului din home.component.html.

 Adăuga 

Salvați modificările de mai sus și reporniți aplicația. Conectați-vă la aplicație și faceți clic pe Adăuga link-ul de pe pagina de pornire. Veți avea AddPostComponent afișat ca un popup.

Implementarea funcționalității Add Post

Adaugă ngModel directivă la elementele de intrare pentru titlu și Descriere.

Adauga o clic directivă la butonul pentru a apela metoda de salvare a postării pe blog.

Adăuga

Importați Post model de la src / app / modele / post.model.ts în add-post.component.ts fişier.

import Post de la "... /models/post.model";

Definiți post variabilă în add-post.component.ts fişier.

post public: Post;

Definiți addPost în interiorul metodei add-post.component.ts fişier. De la addPost , veți valida codul introdus titlu și Descriere și apelați la metoda de serviciu pentru a apela API-ul REST. Iată cum arată metoda:

addPost () if (this.post.title && this.post.description) // apelați metoda de serviciu pentru a adăuga postarea altceva alert ('Title and Description required'); 

Să creăm fișierul de serviciu al componentei AddPostComponent. Creați un fișier numit add-post.service.ts și adăugați următorul cod:

import Injectable de la '@ angular / core'; import HttpClient de la '@ angular / common / http'; import Post de la "... /models/post.model"; @ Injectable () clasa de export AddPostService constructor (privat http: HttpClient) 

În interiorul AddPostService, creați o metodă numită addPost pentru a efectua apelul API REST.

addPost (post: Post) return this.http.post ('/ api / post / createPost', title: post.title, descriere: post.description

După cum se vede în codul de mai sus, ați făcut uz de httpclient pentru a efectua apelul API și pentru a returna apelul Observabil.

În add-post.component.ts fișier în interiorul addPost , vă veți abona la addPost metoda de la add-post.service.ts fişier.

this.addPostService.addPost (this.post) .subscribe (res => // răspuns de la apelul API REST);

Iată cum add-post.component.ts file looks:

import Component de la '@ angular / core'; import AddPostService din "./add-post.service"; import Post de la "... /models/post.model"; @Component (selector: 'app-add-post', templateUrl:'//add-post.component.html ', styleUrls: [' ./add-post.component.css '], furnizori: [AddPostService] ) clasa de export AddPostComponent public post: Post; constructor (privat addPostService: AddPostService) this.post = Post nou ();  addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => console.log ('răspunsul este', res)) ;  altceva alert ('Titlul și descrierea necesare');  

Crearea API-ului REST pentru postarea postului

Să creați un punct de sfârșit de API REST pentru adăugarea postării de blog în baza de date MongoDB. În Server / app.js fișier, creați un punct de sfârșit API după cum se arată:

app.post ('/ api / post / createPost', (req, res) => // introduceți detaliile în MongoDB)

În primul rând, trebuie să vă conectați la baza de date MongoDB folosind Mangustă client.

mongoose.connect (url, useMongoClient: true, funcția (err) if (err) throw err; console.log ('connection established'););

Odată ce conexiunea a fost stabilită, trebuie să creați un obiect model folosind Post schema definită în Server / modelul / post.js fişier. 

const post = mesaj nou (title: req.body.title, descriere: req.body.description)

După cum se vede în codul de mai sus, ați creat obiectul Post utilizând titlu și Descriere transmisă din cerere req obiect.

Suna Salvați pe obiectul Post pentru a salva intrarea în MongoDB.

post.save ((err, doc) => if (err) throw err; retur res.status (200) .json (status:

După cum se vede în codul de mai sus, o dată pe Salvați apelul de metodă este apelat fără eroare, va reveni succes mesaj împreună cu obiectul returnat medic.

Iată cum arată în final punctul final al API-ului REST:

app.post ('/ api / post / createPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) post (nume: req.body.title, descriere: req.body.description) post.save ((err, doc) => if (err) : 'succes', date: doc)));)

Salvați modificările de mai sus și reporniți ambele servere Angulare și Noduri. Conectați-vă la aplicație și încercați să adăugați o nouă postare pe blog. După ce faceți clic pe Adăuga , verificați consola browserului și veți avea răspunsul de succes înregistrat.

Atunci când detaliile postului de blog sunt adăugate la baza de date cu succes, trebuie să închideți fereastra pop-up. Pentru a închide fereastra pop-up, există un buton de închidere pe care trebuie să faceți clic programabil.

Veți utiliza @ViewChild decorator pentru a accesa butonul de închidere.

Import ViewChild și ElementRef în AddPostComponent.

import Component, ViewChild, ElementRef de la '@ angular / core';

În interiorul AddPostComponent, definiți următoarea variabilă:

@ViewChild ('closeBtn') closeBtn: ElementRef;

Inițiați closeBtn faceți clic pe următorul cod:

this.closeBtn.nativeElement.click ();

Adăugați codul de mai sus la apelul de apel de succes al addPost metodă. Aici este addPost metoda de la add-post.component.ts.

addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (););  altceva alert ('Titlul și descrierea necesare'); 

Salvați modificările și reporniți serverul client. Conectați-vă la aplicație și încercați să adăugați o nouă postare pe blog. Odată ce detaliile postării blogului au fost salvate cu succes, pop-ul se va închide.

Actualizarea listei de bloguri

Un lucru de remarcat este că postul nou adăugat pe blog nu apare în lista de postări pe blog. Deci, trebuie să adăugați un declanșator pentru a notifica când să actualizați ShowPostComponent. Veți utiliza un serviciu comun pentru a comunica între cele două componente.

Creați un dosar numit serviciu în interiorul src / app pliant. Creați un fișier numit common.service.ts cu următorul cod:

import Injectable de la '@ angular / core'; import Subject de la "rxjs / Subject"; @Injectable () clasa de export CommonService public postAdded_Observable = new Subiect (); constructor ()  notifyPostAddition () this.postAdded_Observable.next (); 

După cum se vede în codul de mai sus, ați declarat a Subiect denumit postAdded_Observable pentru a urmări noua adăugare de postări pe blog în baza de date. Ori de câte ori este adăugată o nouă postare de blog în baza de date, veți apela notifyPostAddition , care va notifica abonaților despre actualizare.

Importați CommonService în app.module.ts și includeți-l în NgModule lista furnizorilor. Iată cum arată:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; import ROUTING din "./app.routing"; import FormsModule din '@ unghiular / formulare'; import HttpClientModule de la '@ angular / common / http'; import RootComponent din ".root/root.component"; import LoginComponent din './login/login.component'; import HomeComponent de la "./home/home.component"; import ShowPostComponent de la "./show-post/show-post.component"; importați AddPostComponent din "./add-post/add-post.component"; import CommonService de la "./service/common.service"; @NgModule (declarații: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importurile: [BrowserModule, ROUTING, FormsModule, HttpClientModule], furnizori: [CommonService], bootstrap: [RootComponent] 

Import CommonService în show-post.component.ts fișier și inițializați-o în metoda constructorului.

import CommonService de la "... /service/common.service";

constructor (private showPostService: ShowPostService, private commonService: CommonService) 

În interiorul ngOnInit metoda, abonați la postAdded_Observable variabile și încărcați getAllPost metodă. Iată cum ngOnInit metoda arată:

ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost ();); 

Import CommonService în add-post.component.ts fișier și apelați notifyPostAddition după adăugarea postului de blog. Iată cum addPost metoda de la AddPostComponent arată:

addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService. notifyPostAddition (););  altceva alert ('Titlul și descrierea necesare'); 

Salvați modificările de mai sus și reporniți serverul client. Conectați-vă la aplicație și adăugați o nouă postare pe blog. Odată adăugat, lista de postări pe blog devine actualizată cu noua postare pe blog.

Înfășurați-o

În acest tutorial, ați creat AddPostComponent pentru a adăuga detaliile postării de blog la baza de date MongoDB. Ați creat API-ul REST pentru salvarea unei postări de blog în baza de date MongoDB utilizând Mangustă client.

În următoarea parte a seriei, veți implementa funcția de editare și actualizare a detaliilor postării de blog.

Codul sursă pentru acest tutorial este disponibil pe GitHub.

Cum a fost experiența dvs. până acum? Dați-mi voie să știu sugestiile dvs. valoroase în comentariile de mai jos.