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

Creare una App di Blogging usando React, Parte 2: Sign-Up Utenti

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 1: User Sign-In
Creating a Blogging App Using React, Part 3: Add & Display Post

Italian (Italiano) translation by Mariano Serafini (you can also view the original English article)

Nella prima parte di questa serie di tutorial, hai visto come implementare la funzionalità di accesso. In questa parte, imparerai come implementare la funzionalità di registrazione e modificare la funzionalità di accesso per verificare gli utenti validi da MongoDB.

Iniziamo

Iniziamo clonando il codice sorgente dalla prima parte del tutorial.

Una volta che la cartella è stata clonata, naviga fino alla cartella del progetto e installa le dipendenze necessarie.

Avvia il server Node.js e avrai l'applicazione in esecuzione all'indirizzo http://localhost:7777/index.html#/.

Preparazione del Back End

Per questa applicazione, userai MongoDB come back end. Segui le istruzioni nella documentazione ufficiale di MongoDB per installare MongoDB su Ubuntu. Una volta installato MongoDB, è necessario un connettore per collegare MongoDB e Node.js. Installa il driver MongoDB Node.js utilizzando il Node Package Manager (o npm):

Una volta installato il driver, dovresti essere in grado di richiedere il driver nell'applicazione.

Crea un file chiamato user.js in cui conserverai le cose relativa agli utenti. All'interno del file user.js, richiedi le dipendenze correlate al client MongoDB.

Utilizzerai una libreria chiamata assert per controllare la risposta restituita. Includi assert nel file user.js.

Chiamiamo il nostro database Blog in MongoDB, quindi il nostro URL del database è come mostrato:

All'interno del file user.js, crea e esporta una funzione denominata signup.

Utilizzando il client MongoDB, cerca di connetterti al database. Una volta connesso, nel terminale verrà registrato il messaggio collected.

Impostazione dell'evento di registrazione

Una volta impostato il back end di MongoDB, implementiamo l'evento di registrazione. All'interno della pagina main.jsx, includi l'evento on-change per le caselle di input testuale di nome, email e password nella classe signup.

Collega i cambiamenti di evento sopra indicati nel costruttore di classe.

Definisci le variabili di stato all'interno del costruttore di classi di signup.

Definire il metodo signup nella classe signup. All'interno del metodo signup, utilizzando la libreria axios, effettua una chiamata con metodo post al metodo signup nel file user.js.

All'interno della funzione signup nel file user.js, implementerai l'inserto del database.

Aggiungere il gestore di richiesta /signup nel file app.js come mostrato per gestire l'evento click di sign-up. All'interno della funzione di gestore di richiesta /signup, effettua una chiamata al metodo user.signup.

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

Salva le modifiche di cui sopra e riavvia il server. Punta il tuo browser a http://localhost:7777/index.html#/signup e dovresti avere la pagina di registrazione. Fai clic sul pulsante Sign Up e avrai il messaggio connected nel terminale.

Salva i dettagli degli utenti in MongoDB

Per salvare i dati utente nel database Blog, creerai una collezione chiamata user. All'interno della collezione user, conserverai tutti i dettagli utente come il nome, l'indirizzo e-mail e la password. Il MongoClient.connect restituisce un parametro db con cui è possibile inserire una voce nella collezione user.

Utilizzerai il metodo insertOne per inserire un singolo record nella collezione user. Modifica il codice nel metodo signup in user.js come mostrato di seguito:

Ecco il codice completo di user.js:

Modifica il gestore di richiesta /signup nel file app.js per passare il nome, email e password al metodo signup di user.js.

Salva le modifiche di cui sopra e riavvia il server. Punta il tuo browser su http://localhost:7777/index.html#/signup. Compila i dettagli di registrazione utente e fai clic sul pulsante di iscrizione. Avrai messaggio Saved the user sign up details. nel terminale del server. Accedi alla shell MongoDB e controlla la collezione user nel database Blog. Per trovare i dettagli utente, immettere il seguente comando nella shell MongoDB:

Il comando precedente visualizzerà i dettagli utente in formato JSON.

Implementazione del controllo di accesso utente

Nella prima parte del tutorial, hai inserito nel codice il controllo di accesso utente poiché la registrazione utenti non era stata implementata. Modifichiamo il controllo di accesso e cerchiamo nel database MongoDB gli accessi utente validi.

Crea una funzione chiamata validateSignIn nel file user.js.

All'interno della funzione validateSignIn, utilizzando il client MongoDB, ti connetterai al database Blog e farai una richiesta alla tabella user per un utente con nome utente e password specificati. Utilizzerai il metodo findOne per interrogare la collezione user.

Controllare il risultato restituito per null nel caso in cui la voce non venga trovata.

Come visto nel codice precedente, se non viene trovata alcuna voce, viene restituito false nel callback. Se viene trovata una voce, il valore true viene restituito nel callback.

Ecco il metodo validateSignIn completo:

Nel metodo /signin nel file app.js, farai una chiamata al metodo validateSignIn. Nella funzione di callback verificherai la risposta. Se è true, indicherà un accesso valido, altrimenti un accesso non valido. Ecco come appare:

Salva le modifiche di cui sopra e riavvia il server. Punta il tuo browser su http://localhost:7777/index.html#/. Inserisci un nome utente e una password validi e avrai un messaggio di successo registrato nella console del browser. Inserendo un nome utente e una password non validi, verrà visualizzato un messaggio di errore.

Ricapitolando

In questa parte del tutorial, hai visto come implementare il processo di registrazione utente. Hai visto come creare la vista di registrazione e passare i dati dall'interfaccia utente React a Node.js e quindi salvarla nel MongoDB. Hai anche modificato la funzionalità di accesso utente per verificare l'accesso valido dell'utente dal database MongoDB.

Nella prossima parte del tutorial, implementerai la funzione di aggiunta post e la visualizzazione delle pagine dei post.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Facci sapere i tuoi pensieri e suggerimenti nei commenti qui sotto.

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.