I første del av opplæringsserien så du hvordan du kommer i gang med å lage en kantet webapp. Du lærte hvordan du konfigurerer programmet og opprettet loggkomponenten.
I denne delen av serien går du videre og skriver ned REST-API som kreves for å samhandle med MongoDB-banken. Du vil også opprette Hjem komponent som vil bli vist etter at brukeren har logget inn med hell.
Starter
La oss begynne med å klone kildekoden fra første del av opplæringsserien.
Ovennevnte to body-parser alternativer returnerer mellomprogramvaren som bare analyserer json og urlencoded kropper og ser bare på forespørsler der Innholdstype topptekst samsvarer med type alternativ.
Du skal bruke Mongoose å samhandle med MongoDB fra Node.js. Så installer Mongoose bruker Node Package Manager (npm).
npm installere mongoose - save
Når du har installert mongoose, importerer du den inn app.js.
const mongoose = krever ('mongoose');
Definer MongoDB-databasens URL i app.js.
const url = 'mongodb: // localhost / blogDb';
La oss bruke Mongoose å koble til MongoDB-databasen. Slik ser det ut:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, funksjon (feil) hvis (feil) kaste err; console.log ('koblet til vellykket, brukernavn er' , req.body.username, 'passord er', req.body.password););)
Hvis tilkoblingen er opprettet, blir meldingen logget sammen med brukernavn og passord.
Start Nøtserveren på nytt ved å bruke følgende kommando:
node app.js
For å koble til Node-serveren fra Angular-programmet, må du sette proxyen. Opprett en fil som heter proxy.json inne i klient / src mappe. Slik ser det ut:
Endre klienten package.json fil for å starte programmet ved hjelp av proxy-filen.
"start": "ng tjene - proxy-config proxy.json"
Lagre endringene og start klientserveren.
npm start
Pek nettleseren din til http: // localhost: 4200 og skriv inn brukernavnet og passordet. Klikk på påloggingsknappen, og du bør ha parametrene logget inn i nodekonsollen.
Validerer brukerinnlogging
Å samhandle med MongoDB ved hjelp av Mongoose, må du definere et skjema og lage en modell. Inne i serveren mappe, opprett en mappe som heter modell.
Opprett en fil som heter user.js inne i modell mappe. Legg til følgende kode i user.js fil:
Som vist i koden ovenfor importerte du mongoose inn i user.js. Du opprettet en userSchema bruker mongoose skjema og opprettet Bruker modell ved hjelp av Mongoose modell.
Importer user.js fil inne i app.js fil.
const Bruker = krever ('./ modell / bruker');
Før du spør om MongoDB bruker samling, må du opprette samlingen. Gå til MongoDB-skallet ved å skrive mongo. Opprett samlingen bruker bruker følgende kommando:
Nå, når mongoose blir koblet til MongoDB, finner du posten fra databasen ved hjelp av brukernavn og passord sendt inn. Slik ser API-en ut:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (feil) hvis (feil) kaste err; User.find ( brukernavn: req.body.username, passord: req.body.password, funksjon (feil, bruker) hvis (err) kaste feil, hvis (user.length === 1) return res.status (200). json (status: 'suksess', data: bruker annet return res.status (200) .json (status: 'mislykkes', melding: 'Innlogging mislyktes');)
Som vist i koden ovenfor, når du mottar et svar fra databasen, returnerer du det samme til klientsiden.
Lagre endringene ovenfor og prøv å kjøre klienten og serveren. Skriv inn brukernavnet som roy og passord som 123 og du bør kunne se resultatet i nettleserkonsollen.
Omadresserer til hjemmekomponenten
Når brukeren har blitt godkjent, må du omdirigere brukeren til Hjem komponent. Så la oss begynne med å lage Hjem komponent.
Opprett en mappe som heter Hjem inne i src / app mappe. Opprett en fil som heter home.component.html og legg til følgende HTML-kode:
Angular Blog App
Lorem ipsum
Det er ikke noe du vil, men det er ikke så mye som du vil, men det er ikke et øyeblikk, og du har en god jobb. Ut som et minimum, det er ikke nødvendig å utøve arbeidet med å utvide ut fra det som følger.
Les mer…
Varenummer
Donec er ikke en av de eldste på egen måte. Maecenas faucibus mollis interdum.
Varenummer
Morbi leo risus, porta ac consectetur ac, vestibulum på eros. Cras mattis consectetur purus sit amet fermentum.
Varenummer
Maecenas seddi sin egen risus varius blandet sitt ikke-magna.
Varenummer
Donec er ikke en av de eldste på egen måte. Maecenas faucibus mollis interdum.
Varenummer
Morbi leo risus, porta ac consectetur ac, vestibulum på eros. Cras mattis consectetur purus sit amet fermentum.
Varenummer
Maecenas seddi sin egen risus varius blandet sitt ikke-magna.
Opprett en fil som heter home.component.css og legg til følgende CSS-stil:
Som vist i koden ovenfor, har du nettopp opprettet HomeComponent bruker @Komponent dekoratør og angi velger, templateUrl, og styleUrls.
Legg til HomeComponent til NgModules i app.module.ts.
importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer ROUTING fra './app.routing'; importer FormModule fra '@ vinkler / skjemaer'; importer HttpClientModule fra '@ vinkel / vanlig / http'; importer RootComponent fra './root/root.component'; importer LoginComponent fra './login/login.component'; importer HomeComponent fra './home/home.component'; @NgModule (deklarasjoner: [RootComponent, LoginComponent, HomeComponent], import: [BrowserModule, ROUTING, FormsModule, HttpClientModule], leverandører: [], bootstrap: [RootComponent]) eksportklasse AppModule
Importer HomeComponent i app.routing.ts og definer en rute for hjem.
importer RouterModule, Routes fra '@ vinkel / router'; importer ModuleWithProviders fra '@ vinkel / kjerne / src / metadata / ng_module'; importer LoginComponent fra './login/login.component'; importer HomeComponent fra './home/home.component'; eksport const AppRoutes: Ruter = [sti: ", komponent: LoginComponent, sti: 'hjem', komponent: HomeComponent]; eksport const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
I validateLogin metode i login.component.ts fil, ved vellykket validering, omdirigere brukeren til HomeComponent. For å omdirigere, må du importere vinkelen Router.
importer Router fra '@ vinkel / router';
Hvis svaret fra API-samtalen er en suksess, navigerer du til HomeComponent bruker vinkelen Router.
importer Komponent fra '@ vinkel / kjerne'; importer LoginService fra './login.service'; importer Bruker fra '... /models/user.model'; importer Router fra '@ vinkel / router'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], leverandører: [LoginService]) eksportklasse LoginComponent public Bruker: Bruker; konstruktør (privat loginService: LoginService, privat router: Router) this.user = ny bruker (); validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('resultat er', resultat); (resultat ['status'] === 'suksess') this.router.navigate (['/ home']); else alert ('Feil brukernavn passord');, error => konsoll. logg ('feil er', feil);); ellers alert ('skriv inn brukernavn og passord');
Lagre endringene ovenfor og start serveren på nytt. Logg inn på programmet ved å bruke det eksisterende brukernavnet og passordet, og du blir omdirigert til HomeComponent.
Pakke det opp
I denne veiledningen så du hvordan du skriver REST API-sluttpunktet for brukerinnlogging. Du lærte å bruke Mongoose å samhandle med MongoDB fra Node. Etter vellykket validering så du hvordan du bruker Angular Router for å navigere til HomeComponent.
Hvordan var din erfaring med å lære å skrive en kantet applikasjon og dens bakside? Gi oss beskjed om dine tanker og forslag i kommentarene nedenfor.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Accentsconagua
Share
