In het eerste deel van de tutorialserie zag je hoe je moest beginnen met het maken van een Angular web-app. U hebt geleerd hoe u de toepassing moet instellen en hebt het aanmeldingsonderdeel gemaakt.
In dit deel van de reeks gaat u verder en noteert u de REST-API die vereist is voor interactie met het MongoDB-bankuiteinde. Je maakt ook de Huis component die zal worden weergegeven nadat de gebruiker succesvol is ingelogd.
Ermee beginnen
Laten we beginnen door de broncode uit het eerste deel van de zelfstudiegroep te klonen.
Zoals te zien in de bovenstaande code, hebt u geïmporteerd uitdrukken in app.js. Gebruik makend van uitdrukken, je hebt een applicatie gemaakt app.
Gebruik makend van app, je hebt een eindpunt blootgelegd / Api / gebruikers / login die een bericht zal weergeven. Start de Node.js-server met behulp van de volgende opdracht:
knooppunt app.js
Richt uw browser op http: // localhost: 3000 / api / user / login en u moet het bericht laten weergeven.
Je gaat een maken POST verzoek van de Angular-service naar de server met de gebruikersnaam en wachtwoord parameters. Dus je moet de verzoekparameters ontleden.
Installeren body-parser, dat is Node.js body-parsing middleware om verzoekparameters te ontleden.
npm body-parser installeren - opslaan
Zodra je het hebt geïnstalleerd, importeer je het in app.js .
const bodyParser = require ('body-parser')
Voeg de volgende code toe aan de app.js het dossier.
De bovenstaande twee body-parser opties retourneren de middleware die alleen parseert json en urlencoded instanties en kijkt alleen naar verzoeken waarbij de Content-Type header komt overeen met de type keuze.
Je zult gebruiken Mangoest om mee te communiceren MongoDB van Node.js. Dus installeer Mangoest met Node Package Manager (npm).
npm mongoose installeren - opslaan
Zodra je mongoose hebt geïnstalleerd, importeer je het in app.js.
const mongoose = vereisen ('mongoose');
Definieer de MongoDB-database-URL in app.js.
const url = 'mongodb: // localhost / blogDb';
Laten we gebruiken Mangoest om verbinding te maken met de MongoDB-database. Hier is hoe het eruit ziet:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, functie (err) if (err) gooi err; console.log ('succesvol verbonden, gebruikersnaam is' , req.body.username, 'password is', req.body.password););)
Als de verbinding tot stand is gebracht, wordt het bericht samen met het bericht vastgelegd gebruikersnaam en wachtwoord.
Start de knooppuntserver opnieuw met behulp van de volgende opdracht:
knooppunt app.js
Als u verbinding wilt maken met de knooppuntserver vanuit de Angular-toepassing, moet u de proxy instellen. Maak een bestand met de naam proxy.json binnen in de client / src map. Hier is hoe het eruit ziet:
Wijzig de client package.json bestand om de toepassing te starten met behulp van het proxy-bestand.
"start": "ng serve --proxy-config proxy.json"
Sla de wijzigingen op en start de clientserver.
npm start
Richt uw browser op http: // localhost: 4200 en voer de gebruikersnaam en het wachtwoord in. Klik op de knop Aanmelden en u moet de parameters hebben vastgelegd in de knooppuntconsole.
Validatie van de gebruikersaanmelding
Om MongoDB te gebruiken met Mongoose, moet u een schema definiëren en een model maken. Binnen in de server map, maak een map genaamd model-.
Maak een bestand met de naam user.js binnen in de model- map. Voeg de volgende code toe aan de user.js het dossier:
Zoals te zien is in de bovenstaande code, heb je mongoes geïmporteerd user.js. Je hebt een gemaakt userSchema de mangoest gebruiken schema en creëerde het Gebruiker model met behulp van de mangoest model-.
Importeer de user.js bestand in de app.js het dossier.
const User = require ('./ model / user');
Voordat u de MongoDB ondervraagt gebruiker verzameling, moet u de verzameling maken. Ga naar de MongoDB-shell door te typen mongo. Maak de verzameling gebruiker met behulp van de volgende opdracht:
Nu, zodra Mongoose is verbonden met MongoDB, vind je het record uit de database met behulp van de gebruikersnaam en wachtwoord geslaagd. Hier ziet u hoe de API eruitziet:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gooi err; User.find ( gebruikersnaam: req.body.username, wachtwoord: req.body.password, functie (err, user) if (err) gooi err; if (user.length === 1) return res.status (200). json (status: 'success', data: user) else return res.status (200) .json (status: 'fail', message: 'Login failed')));)
Zoals u in de bovenstaande code ziet, geeft u hetzelfde antwoord aan de clientzijde zodra u een antwoord uit de database ontvangt.
Sla de bovenstaande wijzigingen op en probeer de client en de server uit te voeren. Voer de gebruikersnaam in als roy en wachtwoord als 123 en je zou het resultaat in de browser console moeten kunnen bekijken.
Doorverwijzen naar de thuiscomponent
Nadat de gebruiker met succes is gevalideerd, moet u de gebruiker doorverwijzen naar de Huis component. Laten we beginnen met het maken van de Huis bestanddeel.
Maak een map met de naam Huis binnen in de src / app map. Maak een bestand met de naam home.component.html en voeg de volgende HTML-code toe:
Angular Blog-app
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ving, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo.
Lees verder…
onderverdeling
Donec id elit non mi porta gravida bij eget metus. Maecenas faucibus mollis interdum.
onderverdeling
Morbi leo risus, porta ac consectetur ac, vestibulum bij eros. Cras mattis consectetur purus sit amet fermentum.
onderverdeling
Maecenas sed diam eget risus varius blandit sit amet non magna.
onderverdeling
Donec id elit non mi porta gravida bij eget metus. Maecenas faucibus mollis interdum.
onderverdeling
Morbi leo risus, porta ac consectetur ac, vestibulum bij eros. Cras mattis consectetur purus sit amet fermentum.
onderverdeling
Maecenas sed diam eget risus varius blandit sit amet non magna.
Maak een bestand met de naam home.component.css en voeg de volgende CSS-stijl toe:
Zoals te zien is in de bovenstaande code, hebt u zojuist het HomeComponent de ... gebruiken @Component decorateur en het opgeven van de keuzeschakelaar, templateUrl, en styleUrls.
Voeg de toe HomeComponent naar de NgModules in app.module.ts.
import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer ROUTING van './app.routing'; importeer FormsModule vanuit '@ angular / forms'; importeer HttpClientModule van '@ angular / common / http'; importeer RootComponent van './root/root.component'; importeer LoginComponent van './login/login.component'; importeer HomeComponent uit './home/home.component'; @ NgModule (declarations: [RootComponent, LoginComponent, HomeComponent], import: [BrowserModule, ROUTING, FormsModule, HttpClientModule], providers: [], bootstrap: [RootComponent]) exportklasse AppModule
Importeer de HomeComponent in de app.routing.ts en definieer een route voor huis.
In de validateLogin methode in de login.component.ts bestand, stuur bij succesvolle validatie de gebruiker door naar de HomeComponent. Om door te sturen, moet u de Angular importeren router.
importeer Router van '@ angular / router';
Als het antwoord van de API-aanroep succesvol is, gaat u naar de HomeComponent het gebruik van de Angular router.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in op de applicatie met de bestaande gebruikersnaam en wachtwoord en u wordt doorgestuurd naar de HomeComponent.
Inpakken
In deze zelfstudie zag u hoe u het REST API-eindpunt schrijft voor gebruikersaanmelding. Je hebt geleerd hoe te gebruiken Mangoest om te communiceren met MongoDB vanaf Node. Na succesvolle validatie, zag u hoe u Angular moest gebruiken router voor het navigeren naar de HomeComponent.
Hoe was je ervaring met het leren schrijven van een Angular-toepassing en de achterkant ervan? Laat ons uw mening en suggesties weten in de opmerkingen hieronder.
Broncode van deze tutorial is beschikbaar op GitHub.
Accentsconagua
Share
