Nella prima parte della serie di tutorial, hai visto come iniziare a creare un'app web Angolare. Hai imparato come configurare l'applicazione e creato il componente Login.
In questa parte della serie, ti sposti ulteriormente e scrivi l'API REST richiesta per interagire con il banco bancario MongoDB. Creerai anche il Casa componente che verrà visualizzato dopo che l'utente ha effettuato l'accesso con successo.
Iniziare
Iniziamo clonando il codice sorgente dalla prima parte della serie di tutorial.
Passare alla directory del progetto e installare le dipendenze richieste.
cd AngularBlogApp-Home / client npm install
Dopo aver installato le dipendenze, riavviare il server delle applicazioni.
inizio di npm
Puntare il browser su http: // localhost: 4200 e l'applicazione dovrebbe essere in esecuzione.
Creazione dell'API REST di accesso
All'interno della cartella del progetto AngularBlogApp-casa, crea un'altra cartella chiamata server. Scriverete le API REST utilizzando Node.js.
Vai a server cartella e inizializzare il progetto.
cd server npm init
Inserisci i dettagli richiesti e dovresti inizializzare il progetto.
Userai il Esprimere quadro per la creazione del server. Installare Esprimere usando il seguente comando:
npm install express --save
Una volta che hai Esprimere installato, crea un file chiamato app.js. Questo sarà il file di root per il tuo server Node.js.
Ecco come app.js aspetto del file:
const express = require ('express') const app = express () app.get ('/ api / user / login', (req, res) => res.send ('Hello World!')) app. listen (3000, () => console.log ('server di blog in esecuzione sulla porta 3000!'))
Come visto nel codice sopra, hai importato esprimere in app.js. utilizzando esprimere, hai creato un'applicazione App.
utilizzando App, hai esposto un endpoint / Api / user / login che mostrerà un messaggio. Avvia il server Node.js utilizzando il seguente comando:
nodo app.js
Puntare il browser su http: // localhost: 3000 / api / user / login e si dovrebbe visualizzare il messaggio.
Farai un INVIARE richiesta dal servizio Angolare al server con il nome utente e parola d'ordine parametri. Quindi è necessario analizzare i parametri della richiesta.
Installare corpo-parser, che è il middleware di analisi del corpo di Node.js per analizzare i parametri di richiesta.
I due sopra corpo-parser le opzioni restituiscono il middleware che analizza solo jSON e urlencoded corpi e guarda solo le richieste in cui il Tipo di contenuto l'intestazione corrisponde a genere opzione.
Userai Mangusta interagire con MongoDB da Node.js. Quindi installare Mangusta usando Node Package Manager (npm).
npm install mongoose --save
Una volta installata la mangusta, importala app.js.
const mongoose = require ('mangusta');
Definisci l'URL del database MongoDB in app.js.
const url = 'mongodb: // localhost / blogDb';
Usiamo Mangusta per connettersi al database MongoDB. Ecco come appare:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, function (err) if (err) gira err; console.log ('connesso correttamente, username è' , req.body.username, 'password is', req.body.password););)
Se la connessione è stabilita, il messaggio viene registrato insieme al nome utente e parola d'ordine.
Ecco come app.js aspetto del file:
const express = require ('express') const bodyParser = require ('body-parser') const app = express () const mongoose = require ('mongoose'); const url = 'mongodb: // localhost / blogDb'; app.use (bodyParser.json ()) app.use (bodyParser.urlencoded (extended: false)) app.post ('/ api / user / login', (req, res) => mongoose.connect ( url, function (err) if (err) throw err; console.log ('connesso con successo, username è', req.body.username, 'password is', req.body.password););) app .listen (3000, () => console.log ('server di blog in esecuzione sulla porta 3000!'))
Riavvia il server Node usando il seguente comando:
nodo app.js
Per connettersi al server Node dall'applicazione Angular, è necessario impostare il proxy. Crea un file chiamato proxy.json dentro il client / src cartella. Ecco come appare:
Modifica il client package.json file per avviare l'applicazione utilizzando il file proxy.
"start": "ng serve --proxy-config proxy.json"
Salva le modifiche e avvia il server client.
inizio di npm
Puntare il browser su http: // localhost: 4200 e inserire nome utente e password. Fai clic sul pulsante di accesso e dovresti avere i parametri registrati nella console del nodo.
Convalida dell'accesso utente
Per interagire con MongoDB usando Mongoose, è necessario definire uno schema e creare un modello. Dentro il server cartella, creare una cartella chiamata modello.
Crea un file chiamato user.js dentro il modello cartella. Aggiungi il seguente codice al user.js file:
Come visto nel codice sopra, hai importato mangusta in user.js. Hai creato a userSchema usando la mangusta schema e creato il Utente modello usando il mangusta modello.
Importa il user.js file all'interno del app.js file.
const User = require ('./ model / user');
Prima di interrogare il MongoDB utente collezione, è necessario creare la collezione. Vai alla shell MongoDB digitando mongo. Crea la collezione utente usando il seguente comando:
db.createCollection ( 'user')
Inserisci un record su cui dovrai eseguire una query.
Ora, una volta che la mangusta si connette a MongoDB, troverai il record dal database usando il nome utente e parola d'ordine passato. Ecco come appare l'API:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; User.find ( username: req.body.username, password: req.body.password, function (err, user) if (err) throw err; if (user.length === 1) return res.status (200). json (stato: 'successo', dati: utente) else return res.status (200) .json (stato: 'fail', messaggio: 'Login fallito')));)
Come visto nel codice precedente, una volta ricevuta una risposta dal database, si restituisce lo stesso al lato client.
Salvare le modifiche precedenti e provare a eseguire il client e il server. Inserisci il nome utente come roy e password come 123 e dovresti essere in grado di visualizzare il risultato nella console del browser.
Reindirizzamento al componente principale
Una volta che l'utente è stato validato con successo, è necessario reindirizzare l'utente a Casa componente. Quindi iniziamo creando il Casa componente.
Crea una cartella chiamata Casa dentro il src / app cartella. Crea un file chiamato home.component.html e aggiungi il seguente codice HTML:
Blog angolare
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fa eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Leggi di più…
sottotitolo
Donec id elit non mi porta gravida su eget metus. Mecenate faucibus mollis interdum.
sottotitolo
Morbi leo risus, porta ac consectetur ac, vestibulum all'eros. Cras mattis consectetur purus sit amet fermentum.
sottotitolo
Il mecenate non è mai risorto vario blandit sit amet non magna.
sottotitolo
Donec id elit non mi porta gravida su eget metus. Mecenate faucibus mollis interdum.
sottotitolo
Morbi leo risus, porta ac consectetur ac, vestibulum all'eros. Cras mattis consectetur purus sit amet fermentum.
sottotitolo
Il mecenate non è mai risorto vario blandit sit amet non magna.
Crea un file chiamato home.component.css e aggiungi il seguente stile CSS:
.intestazione, .marketing, .footer padding-right: 1rem; padding-left: 1rem; / * Intestazione di pagina personalizzata * / .header padding-bottom: 1rem; border-bottom: .05rem solid # e5e5e5; .header h3 margin-top: 0; margin-bottom: 0; line-height: 3rem; / * Piè di pagina personalizzato * / .footer padding-top: 1.5rem; colore: # 777; border-top: .05rem solid # e5e5e5; / * Personalizza contenitore * / @media (larghezza minima: 48em) .container larghezza massima: 46rem; .container-narrow> hr margin: 2rem 0; / * Principale messaggio di marketing e pulsante di registrazione * / .jumbotron text-align: center; border-bottom: .05rem solid # e5e5e5; .jumbotron .btn padding: .75rem 1.5rem; font-size: 1.5rem; / * Supporto del contenuto di marketing * / .marketing margin: 3rem 0; .marketing p + h4 margin-top: 1.5rem; / * Responsive: tavolette Portrait e up * / @media screen e (min-width: 48em) / * Rimuovi il padding che abbiamo impostato in precedenza * / .header, .marketing, .footer padding-right: 0; padding-left: 0; / * Spazio fuori la masthead * / .header margin-bottom: 2rem; .jumbotron border-bottom: 0;
Crea il file del componente chiamato home.component.ts e aggiungi il seguente codice:
importare Component da '@ angular / core'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) export class HomeComponent
Come visto nel codice sopra, hai appena creato il HomeComponent usando il @Componente decoratore e specificando il selettore, TemplateURL, e styleUrls.
Aggiungi il HomeComponent al NgModules nel app.module.ts.
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; import ROUTING da './app.routing'; import FormsModule da '@ angular / forms'; import HttpClientModule da '@ angular / common / http'; importare RootComponent da './root/root.component'; importare LoginComponent da "./login/login.component"; import HomeComponent da './home/home.component'; @NgModule (dichiarazioni: [RootComponent, LoginComponent, HomeComponent], importa: [BrowserModule, ROUTING, FormsModule, HttpClientModule], provider: [], bootstrap: [RootComponent]) classe di esportazione AppModule
Importa il HomeComponent nel app.routing.ts e definire un percorso per casa.
Nel validateLogin metodo nel login.component.ts file, in caso di convalida riuscita reindirizzare l'utente a HomeComponent. Per reindirizzare, è necessario importare l'angolare Router.
importare Router da '@ angular / router';
Se la risposta dalla chiamata API è un successo, navigherai verso HomeComponent usando l'angolare Router.
if (result ['status'] === 'success') this.router.navigate (['/ home']); else alert ('Password nome utente errato');
Ecco come login.component.ts aspetto del file:
importare Component da '@ angular / core'; import LoginService da './login.service'; importare Utente da '... /models/user.model'; importare Router da '@ angular / router'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], provider: [LoginService]) classe di esportazione LoginComponent public utente: utente; costruttore (loginServizio privato: LoginService, router privato: Router) this.user = new User (); validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result); if (risultato ['status'] === 'successo') this.router.navigate (['/ home']); else alert ('Password nome utente errato');, error => console. log ('errore è', errore);); else alert ('inserire nome utente e password');
Salvare le modifiche precedenti e riavviare il server. Accedi all'applicazione utilizzando il nome utente e la password esistenti e verrai reindirizzato a HomeComponent.
Avvolgendolo
In questo tutorial, hai visto come scrivere l'endpoint dell'API REST per l'accesso dell'utente. Hai imparato a usare Mangusta interagire con MongoDB da Node. Dopo aver convalidato correttamente, hai visto come usare Angular Router per la navigazione verso il HomeComponent.
In che modo la tua esperienza ha imparato a scrivere un'applicazione Angular e il suo back-end? Fateci sapere i vostri pensieri e suggerimenti nei commenti qui sotto.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Accentsconagua
Share
