Dans la première partie de la série de didacticiels, vous avez appris à créer une application Web angulaire. Vous avez appris comment configurer l'application et créé le composant Login..
Dans cette partie de la série, vous allez aller plus loin et écrire l'API REST requise pour interagir avec l'extrémité de la banque MongoDB. Vous allez également créer le Accueil composant qui sera affiché après que l'utilisateur se soit connecté avec succès.
Commencer
Commençons par cloner le code source de la première partie de la série de tutoriels..
Accédez au répertoire du projet et installez les dépendances requises.
Installation de cd AngularBlogApp-Home / client npm
Une fois les dépendances installées, redémarrez le serveur d'applications..
npm start
Pointez votre navigateur sur http: // localhost: 4200 et vous devriez avoir l'application en cours d'exécution.
Création de l'API REST de connexion
Dans le dossier du projet AngularBlogApp-Home, créer un autre dossier appelé serveur. Vous allez écrire les API REST à l'aide de Node.js.
Accédez au serveur dossier et initialiser le projet.
cd server npm init
Entrez les détails requis et le projet devrait être initialisé.
Vous utiliserez le Express cadre pour la création du serveur. Installer Express en utilisant la commande suivante:
npm install express --save
Une fois que tu as Express installé, créez un fichier appelé app.js. Ce sera le fichier racine de votre serveur Node.js.
Voici comment app.js fichier regarde:
const express = require ('express') const app = express () app.get ('/ api / utilisateur / login', (req, res) => res.send ('Hello World!')) app. listen (3000, () => console.log ('serveur de blog fonctionnant sur le port 3000!'))
Comme indiqué dans le code ci-dessus, vous avez importé Express dans app.js. En utilisant Express, vous avez créé une application app.
En utilisant app, vous avez exposé un point final / api / utilisateur / login qui affichera un message. Démarrez le serveur Node.js à l'aide de la commande suivante:
noeud app.js
Pointez votre navigateur sur http: // localhost: 3000 / api / user / login et vous devriez avoir le message affiché.
Vous allez faire un POSTER demande du service angulaire au serveur avec le message Nom d'utilisateur et mot de passe paramètres. Donc, vous devez analyser les paramètres de la demande.
Installer analyseur de corps, qui est le middleware d'analyse de corps Node.js pour analyser les paramètres de requête.
npm install body-parser --save
Une fois que vous l'avez installé, importez-le dans app.js .
Les deux ci-dessus analyseur de corps les options renvoient le middleware qui analyse seulement JSON et codé en url corps et ne regarde que les demandes où la Type de contenu l'en-tête correspond à la type option.
Vous utiliserez Mangouste interagir avec MongoDB de Node.js. Alors installez Mangouste en utilisant Node Package Manager (npm).
npm install mongoose --save
Une fois que vous avez installé la mangouste, importez-la dans app.js.
const mangouste = require ('mangouste');
Définir l'URL de la base de données MongoDB dans app.js.
const url = 'mongodb: // localhost / blogDb';
Utilisons Mangouste se connecter à la base de données MongoDB. Voici à quoi ça ressemble:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, function (err) if (err) renvoie err; console.log ('connecté avec succès, nom d'utilisateur est' , req.body.username, 'password is', req.body.password););)
Si la connexion est établie, le message est consigné avec le message Nom d'utilisateur et mot de passe.
Voici comment app.js fichier regarde:
const express = require ('express') const bodyParser = require ('analyseur de corps') const app = express () const mangouste = require ('mangouste'); 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) renvoie err; console.log ('connecté avec succès, le nom d'utilisateur est', req.body.username, 'le mot de passe est', req.body.password););) app .listen (3000, () => console.log ('serveur de blog exécuté sur le port 3000!'))
Redémarrez le serveur de noeud à l'aide de la commande suivante:
noeud app.js
Pour vous connecter au serveur de nœud à partir de l'application Angular, vous devez définir le proxy. Créez un fichier appelé proxy.json à l'intérieur de client / src dossier. Voici à quoi ça ressemble:
Modifier le client package.json fichier pour démarrer l'application à l'aide du fichier proxy.
"start": "ng serve --proxy-config proxy.json"
Enregistrez les modifications et démarrez le serveur client.
npm start
Pointez votre navigateur sur http: // localhost: 4200 et entrez le nom d'utilisateur et le mot de passe. Cliquez sur le bouton de connexion et les paramètres doivent être consignés dans la console Node..
Validation de la connexion de l'utilisateur
Pour interagir avec MongoDB à l'aide de Mongoose, vous devez définir un schéma et créer un modèle. À l'intérieur de serveur dossier, créez un dossier appelé modèle.
Créez un fichier appelé user.js à l'intérieur de modèle dossier. Ajoutez le code suivant au user.js fichier:
const mangouste = require ('mangouste'); const Schema = mongoose.Schema; // crée un schéma const userSchema = new Schema (nom d'utilisateur: type: chaîne, obligatoire: true, unique: true, mot de passe: type: chaîne, obligatoire: true, nom: type: chaîne, collection: 'utilisateur'); const User = mongoose.model ('User', userSchema); module.exports = Utilisateur;
Comme indiqué dans le code ci-dessus, vous avez importé de la mangouste dans user.js. Vous avez créé un userSchema en utilisant la mangouste schéma et créé le Utilisateur modèle en utilisant le mangouste modèle.
Importer le user.js déposer à l'intérieur du app.js fichier.
const User = require ('./ modèle / utilisateur');
Avant d'interroger MongoDB utilisateur collection, vous devez créer la collection. Accédez au shell MongoDB en tapant mongo. Créer la collection utilisateur en utilisant la commande suivante:
db.createCollection ('utilisateur')
Insérer un enregistrement sur lequel vous allez interroger.
db.user.insert (nom: 'roy agasthyan', nom d'utilisateur: 'roy', mot de passe: '123')
Maintenant, une fois que la mangouste est connectée à MongoDB, vous trouverez l’enregistrement de la base de données à l’aide du Nom d'utilisateur et mot de passe passé. Voici à quoi ressemble l’API:
app.post ('/ api / user / login', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) renvoie err; User.find ( nom d'utilisateur: req.body.nom d'utilisateur, mot de passe: req.body.password, fonction (err, utilisateur) if (err) renvoie 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'))))
Comme indiqué dans le code ci-dessus, une fois que vous avez reçu une réponse de la base de données, vous retournez la même chose du côté client..
Enregistrez les modifications ci-dessus et essayez d’exécuter le client et le serveur. Entrez le nom d'utilisateur comme roy et mot de passe 123 et vous devriez pouvoir voir le résultat dans la console du navigateur.
Redirection vers le composant Accueil
Une fois que l'utilisateur a été validé avec succès, vous devez le rediriger vers l'utilisateur. Accueil composant. Commençons donc par créer le Accueil composant.
Créez un dossier appelé Accueil à l'intérieur de src / app dossier. Créez un fichier appelé home.component.html et ajoutez le code HTML suivant:
App blog angulaire
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur elit adipiscing, sed eiusmod tempor incidid ut labore et dolore magna aliqua. Il enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conséquat.
Lire la suite…
Sous rubrique
Donec id elit non porta gravida à eget metus. Maecenas faucibus mollis interdum.
Sous rubrique
Morbi leo risus, porta ac consectetur ac, vestibule chez eros. Cras mattis consectetur purus sit amet fermentum.
Sous rubrique
Les mécènes ont perdu tout leur cœur blandit assis sans regarder.
Sous rubrique
Donec id elit non porta gravida à eget metus. Maecenas faucibus mollis interdum.
Sous rubrique
Morbi leo risus, porta ac consectetur ac, vestibule chez eros. Cras mattis consectetur purus sit amet fermentum.
Sous rubrique
Les mécènes ont perdu tout leur cœur blandit assis sans regarder.
Créez un fichier appelé home.component.css et ajoutez le style CSS suivant:
.en-tête, .marketing, .footer padding-right: 1rem; rembourrage gauche: 1rem; / * En-tête de page personnalisé * / .header padding-bottom: 1rem; border-bottom: .05rem solid # e5e5e5; .header h3 margin-top: 0; marge inférieure: 0; hauteur de ligne: 3rem; / * Pied de page personnalisé * / .footer padding-top: 1.5rem; couleur: # 777; border-top: .05rem solid # e5e5e5; / * Personnaliser le conteneur * / @media (min-width: 48em) .container max-width: 46rem; .container-narrow> hr margin: 2rem 0; / * Message marketing principal et bouton d'inscription * / .jumbotron text-align: center; border-bottom: .05rem solid # e5e5e5; .jumbotron .btn padding: .75rem 1.5rem; taille de la police: 1.5rem; / * Contenu marketing de soutien * / .marketing margin: 3rem 0; .marketing p + h4 margin-top: 1.5rem; / * Responsive: Tablettes de portrait et haut * / @Media screen et (min-width: 48em) / * Supprime le remplissage que nous avons défini précédemment * / .header, .marketing, .footer padding-right: 0; rembourrage à gauche: 0; / * Espacez le générique * / .header margin-bottom: 2rem; .jumbotron border-bottom: 0;
Créez le fichier de composant appelé home.component.ts et ajoutez le code suivant:
importer composant de '@ angular / core'; @Component (sélecteur: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) classe d'exportation HomeComponent
Comme on le voit dans le code ci-dessus, vous venez de créer le AccueilComposant en utilisant le @Composant décorateur et spécifiant le sélecteur, templateUrl, et styleUrls.
Ajouter le AccueilComposant au NgModules dans app.module.ts.
importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer ROUTING depuis './app.routing'; importer FormsModule à partir de '@ angular / forms'; importer HttpClientModule à partir de '@ angular / common / http'; import RootComponent de './root/root.component'; importer LoginComponent de './login/login.component'; importer HomeComponent de './home/home.component'; @NgModule (declarations: [RootComponent, LoginComponent, HomeComponent], importations: [BrowserModule, ROUTING, FormsModule, HttpClientModule], fournisseurs: [], bootstrap: [RootComponent]) classe d'exportation AppModule
Importer le AccueilComposant dans le app.routing.ts et définir un itinéraire pour maison.
dans le validateLogin méthode dans le login.component.ts fichier, en cas de validation réussie, redirige l'utilisateur vers le AccueilComposant. Pour rediriger, vous devez importer le fichier angulaire Routeur.
importer routeur de '@ angular / router';
Si la réponse de l'appel API est un succès, vous accédez à la AccueilComposant en utilisant le angulaire Routeur.
if (résultat ['status'] === 'succès') this.router.navigate (['/ home']]); else alert ('Mot de passe d'utilisateur incorrect');
Voici comment login.component.ts fichier regarde:
importer composant de '@ angular / core'; importer LoginService à partir de './login.service'; importer utilisateur de '… /models/user.model'; importer routeur de '@ angular / router'; @Component (sélecteur: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], fournisseurs: [LoginService]) classe d'exportation LoginComponent public utilisateur: utilisateur; constructeur (loginService privé: LoginService, routeur privé: Routeur) this.user = new User (); validateLogin () if (this.user.nomutilisateur && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result)); (result ['status'] === 'success') this.router.navigate (['/ home']); else alert ('Mot de passe incorrect');, error => console. log ('erreur est', erreur);); else alert ('entrez votre nom d'utilisateur et votre mot de passe');
Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l’application en utilisant le nom d’utilisateur et le mot de passe existants. Vous serez redirigé vers le AccueilComposant.
Envelopper
Dans ce didacticiel, vous avez appris à écrire le point de terminaison de l'API REST pour la connexion de l'utilisateur. Vous avez appris à utiliser Mangouste pour interagir avec MongoDB depuis Node. Après validation réussie, vous avez vu comment utiliser Angular Routeur pour naviguer vers le AccueilComposant.
Comment votre expérience a-t-elle appris à écrire une application angulaire et son back-end? Faites-nous savoir vos pensées et suggestions dans les commentaires ci-dessous.
Le code source de ce tutoriel est disponible sur GitHub.
Accentsconagua
Share
