Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Creare un App per Blogging Utilizzando Angular e MongoDB: Home

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Login
Creating a Blogging App Using Angular & MongoDB: Show Post

Italian (Italiano) translation by Stefano Pizzacalla (you can also view the original English article)

Nella prima parte della serie di tutorial, hai visto come iniziare a creare una web app con Angular. Hai imparato come impostare l'applicazione e creare il componente Login.

In questa parte della serie, farai un ulteriore passo avanti e scriverai la REST API richiesta per interagire con il back end di MongoDB. Costruirai inoltre il componente Home che verrà mostrato dopo che l'utente sarà stato riconosciuto con successo.

Iniziamo

Iniziamo copiando il codice sorgente dalla prima parte del tutorial.

Spostarsi nella directory del progetto e installare le dipendenze richieste.

Una volta installate le dipendenze, riavviare il server.

Puntare il browser su http://localhost:4200 e dovresti vedere l'applicazione in esecuzione.

Creazione del Login REST API

All'interno della cartella del progetto AngularBlogApp-Home, creare una nuova cartella chiamata server. Scriverai le REST API utilizzando Node.js.

Navigare nella cartella server e inizializzare il progetto.

Inserendo i dettagli richiesti, si dovrebbe avere il progetto inizializzato.

Userai il framework Express per creare il server. Installa Express utilizzando il seguente comando.

Una volta installato Express, creare un file chiamato app.js. Questo sarà il file radice per il tuo server Node.js.

Ecco come il file app.js appare:

Come visto nel codice precedente, hai importato express in app.js. Utilizzando express, hai creato un applicazione app.

Utilizzando app, esporrai un endpoint /api/user/login con il quale visualizzerai un messaggio. Avviare il server Node.js utilizzando il seguente comando:

Puntando il browser all'indirizzo http://localhost:3000/api/user/login dovresti vedere visualizzato il messaggio.

Potrai fare una richiesta POST dal servizio Angular al server con i parametri username e password. Sarà quindi necessario analizzare i parametri di richiesta.

Installare il body-parser, un middleware per il body-parsing di Node.js per analizzare i parametri di richiesta.

Una volta installato, importarlo in app.js.

Aggiungere il seguente codice al file app.js.

Le precedenti due opzioni body-parser restituiscono il middleware che esegue il parsing dei corpi json e urlencoded e considera solo le richieste in cui l'header Content-Type corrisponde con l'opzione type.

Dovrai utilizzare Mongoose per interagire con MongoDB da Node.js. Quindi installare Mongoose utilizzando il Gestore di Pacchetti Node (npm).

Una volta installato mongoose, importarlo in app.js.

Definire l'URL del database MongoDB in app.js.

Utilizzare Mongoose per connettersi con il database MongoDB. Ecco come appare:

Se la connessione viene stabilita, il messaggio viene registrato insieme a username e password.

Ecco come il file app.js appare:

Riavviare il server Node utilizzando il seguente comando:

Per connettersi al server Node dall'applicazione Angular, bisogna impostare il proxy. Creare un file chiamato proxy.json all'interno della cartella client/src. Ecco come appare il file:

Modificare il file client package.json per permettere all'applicazione di utilizzare il file del proxy.

Salvare le modifiche e avviare il client server.

Puntare il browser all'indirizzo http://localhost:4200 e inserire username e password. Cliccando sul pulsante di accesso, dovresti avere i parametri registrati nella console di Node.

Validazione dell'User Login

Per interagire con MongoDB utilizzando Mongoose, hai bisogno di definire uno schema e creare un modello. Nella cartella del server, creare una cartella chiamata model.

Creare un file chiamato user.js all'interno della cartella model. Aggiungere il seguente codice all'interno del file user.js.

Come puoi vedere nel codice precedente, hai importato mongoose all'interno di user.js. Hai creato un userSchema utilizzando uno schema Mongoose e creato il modello User utilizzando il modello mongoose.

Importare il file user.js all'interno del file app.js.

Prima di interrogare la raccolta user di MongoDB, è necessario creare la raccolta. Vai alla shell di MongoDB digitando mongo. Creare la raccolta user utilizzando il seguente comando:

Inserire un record con cui verrà eseguita la query.

Ora, una volta che mongoose è connesso con MongoDB, potrai trovare il record nel database utilizzando username e password passati. Ecco come appare l'API:

Come visto nel codice precedente, una volta ricevuta una risposta dal database, ti viene restituito lo stesso dal lato client.

Salvare i cambiamenti precedenti e provare ad avviare il client e il server. Inserendo l'username roy e la password 123 dovresti essere in grado di vedere il risultato nella console del browser.

Reindirizzamento al Componente Home

Una volta che l'utente è stato validato con successo, avrai bisogno di reindirizzare l'utente al componente Home. Iniziamo, quindi, creando il componente Home.

Creare una cartella chiamata Home all'interno della cartella src/app. Creare un file chiamato home.component.html e aggiungere il seguente codice HTML:

Creare un file chiamato home.component.css e aggiungere il seguente stile CSS:

Creare il file componente chiamato home.component.ts e aggiungere il seguente codice:

Come visto nel codice precedente, hai appena creato il HomeComponent utilizzando il decoratore @Component e specificando il selector, templateUrl, e styleUrls.

Aggiungere HomeComponent a NgModules in app.module.ts.

Importare HomeComponent in app.routing.ts e definire una route per home.

Nel metodo validateLogin nel file login.component.ts, alla validazione avvenuta con successo reindirizzare l'utente a HomeComponent. Per il reindirizzamento, hai bisogno di importare il Router di Angular.

Se la risposta alla chiamata API avviene con successo, potrai navigare in HomeComponent utilizzando il Router di Angular.

Ecco come il file login.component.ts appare:

Salvare le modifiche e riavviare il server. Accedendo all'applicazione utilizzando username e password esistenti si verrà reindirizzati a HomeComponent.

Angular Blog App Home Component

Concludendo

In questo tutorial, hai visto come scrivere l'endpoint REST API per l'accesso utente. Hai imparato come utilizzare Mongoose per interagire con MongoDB da Node. Dopo che la convalida ha avuto esito positivo, hai visto come utilizzare il Router di Angular per navigare in HomeComponent.

Com'è stata la tua esperienza nell'imparare a scrivere un applicazione Angular con il back end? Facci conoscere i tuoi pensieri e suggerimenti nei commenti qui sotto.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.