I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

I database relazionali come MySQL sono stati tradizionalmente la scelta di database di riferimento. Tuttavia, i database NoSQL come MongoDB sono cresciuti in popolarità grazie alla loro struttura flessibile per l'archiviazione dei dati e alla loro capacità di archiviare e recuperare rapidamente i dati.

Questi database offrono un linguaggio di query alternativo che puoi integrare perfettamente con le moderne app Web e mobili. Continua a leggere per sapere come archiviare i dati di React in un database MongoDB.

Che cos'è un database NoSQL?

NoSQL sta per Non solo SQL, un database non relazionale. Questo tipo di database non si basa sul tradizionale modello di database relazionale. Non ha una struttura colonna-riga definita e può archiviare i dati in una varietà di formati diversi, rendendoli più flessibili e scalabili.

instagram viewer

La principale differenza tra NoSQL e database relazionali è che invece di avere righe e colonne, i database NoSQL memorizzano i dati in documenti, che hanno una struttura dinamica.

Imposta un database MongoDB

MongoDB è il database NoSQL più popolare. È un database open source che memorizza i dati in documenti (tabelle) simili a JSON all'interno di raccolte (database).

Ecco come appare una semplice struttura di documenti MongoDB:

{
 Nome: 'Andrea',
 Ruolo: "Sviluppatore back-end"
}

Per iniziare, devi prima impostare un database MongoDB. Una volta terminata la configurazione di MongoDB, apri l'app MongoDB Compass. Quindi, fare clic su Nuova connessione pulsante per creare una connessione con il server MongoDB in esecuzione in locale.

Se non hai accesso allo strumento GUI di MongoDB Compass, puoi utilizzare il file Strumento shell MongoDB per creare un database e la raccolta.

Fornire l'URI di connessione e il nome della connessione, quindi premere Salva e connetti.

Infine, fai clic sul pulsante Crea database, inserisci il nome del database e fornisci un nome di raccolta per una raccolta demo.

Crea un client React

Puoi trovare il codice di questa applicazione nel suo file Deposito GitHub.

Per avviare rapidamente un'applicazione React, crea una cartella di progetto sul tuo computer locale, passa a quella directory ed esegui questi comandi di terminale per creare e avviare il server di sviluppo:

npx crea-reagisci-app mia-app
cd mia-app
inizio npm

Successivamente, installa Axios. Questo pacchetto ti consentirà di inviare richieste HTTP al tuo server back-end Express.js per archiviare i dati nel tuo database MongoDB.

npm installa axios

Crea un modulo demo per raccogliere i dati degli utenti

Apri il src/App.js file, eliminare il codice boilerplate React e sostituirlo con il seguente:

importare'./App.css';
importare Reagisci, { useState } da'reagire';
importare Axios da'assio';
funzioneApp() {
cost [nome, setName] = useState("")
cost [ruolo, setRole] = useState("")


cost handleSubmit = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/inserto', {
 fullName: nome,
 companyRole: ruolo
 })
 }


ritorno (


"App">
"Intestazione app"> 
"logIn-modulo">


Nome</p>


 nomeclasse = "Nome"
 tipo="testo"
 segnaposto="Nome di battesimo ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Ruolo aziendale</p>


 nomeclasse = "Ruolo"
 tipo="testo"
 segnaposto = "Ruolo..."
 onChange={(e) => {setRole (e.target.value)}}
 />








esportarepredefinito Applicazione;

Analizziamolo:

  • Dichiara due stati, un nome e uno stato del ruolo, per conservare i dati utente raccolti dai campi di input utilizzando l'hook useState.
  • IL onChange Il metodo di ogni campo di input esegue un callback che utilizza i metodi di stato per acquisire e archiviare i dati inviati dall'utente tramite il modulo.
  • Per inviare i dati al server back-end, la funzione del gestore onSubmit utilizza il file Axios.post metodo per inviare i dati passati dagli stati come oggetto all'endpoint dell'API back-end.

Per applicare uno stile al modulo sottoposto a rendering, aggiungi il codice seguente al file App.css.

* {
imbottitura: 0;
margine: 0;
dimensionamento della scatola: scatola di confine;
}
corpo {
famiglia di font: 'Poppins', sans-serif;
colore di sfondo: #8EC1D6;
}


.logIn-form {
margine: 100pxauto;
larghezza: 200px;
altezza: 250px;
colore di sfondo: #F F F;
bordo-raggio: 10px; 
}


.logIn-formP {
allineamento del testo: centro;
dimensione del font: 12px;
font-weight: 600;
colore: #B8BFC6;
imbottitura: 10px 10px;
}


.logIn-formingresso {
Schermo: bloccare;
larghezza: 80%;
altezza: 40px;
margine: 10pxauto;
confine: 1pxsolido#ccc;
bordo-raggio: 5px;
imbottitura: 0 10px;
dimensione del font: 16px;
colore: nero;
}
.logIn-formpulsante {
colore di sfondo: #8EC1D6;
colore: #F F F;
cursore: puntatore;
dimensione del font: 15px;
bordo-raggio:7px;
imbottitura: 5px 10px;
confine: nessuno;
}

Ora avvia il server di sviluppo per aggiornare le modifiche e vai a http://localhost: 3000 sul tuo browser per visualizzare i risultati.

Crea un back-end Express.js

Un backend Express funge da middleware tra il tuo client React e il database MongoDB. Dal server, puoi definire i tuoi schemi di dati e stabilire la connessione tra il client e il database.

Crea un server Web rapido e installiamo questi due pacchetti:

npm install mangusta cors

Mongoose è una libreria Object Data Modeling (ODM) per MongoDB e Node. Fornisce un metodo semplificato basato su schema per modellare i dati dell'applicazione e archiviarli in un database MongoDB.

Il pacchetto CORS (Cross-Origin Resource Sharing) fornisce un meccanismo per il server back-end e un client front-end per comunicare e passare i dati tramite gli endpoint API.

Crea uno schema di dati

Crea una nuova cartella nella directory principale della cartella del progetto del server e assegnale un nome Modelli. In questa cartella, crea un nuovo file: dataSchema.js.

Uno schema, in questo caso, rappresenta la struttura logica del database. Definisce i documenti (record) ei campi (proprietà) che compongono le raccolte all'interno del database.

Aggiungi il seguente codice a dataSchema.js:

cost mangusta = richiedere('mangusta');
cost ReactFormDataSchema = nuovo mangusta. Schema({
 nome: {
 tipo: Corda,
 necessario: VERO
 },
 ruolo: {
 tipo: Corda,
 necessario: VERO
 }
});
cost Utente = mangusta.modello('Utente', ReactFormDataSchema);
modulo.exports = Utente;

Questo codice crea uno schema Mongoose per un modello utente. Questo schema definisce la struttura dei dati per i dati dell'utente, inclusi il nome e il ruolo dell'utente. Lo schema viene quindi utilizzato per creare un modello per l'utente. Ciò consente al modello di archiviare i dati in una raccolta MongoDB in base alla struttura definita nello schema.

Configurare il server Express

Quindi, apri il file index.js file nella cartella del progetto del server e aggiungi questo codice:

cost espresso = richiedere('esprimere');
cost mangusta = richiedere('mangusta');
cost cor = richiedere('cor');
cost app = espresso();
cost Utente= richiedere('./models/ReactDataSchema')
app.use (express.json());
app.use(cors());


mangusta.connect('mongodb://localhost: 27017/reactdata', { useNewUrlParser: VERO });


app.post('/inserire', asincrono(req, res) => {
cost Nome = req.corpo.nome
cost CompanyRole = req.body.companyRole


cost moduloDati = nuovo Utente({
 Dì il nome,
 ruolo: CompanyRole
 })


Tentativo {
aspetta formData.save();
 res.send("dati inseriti..")
 } presa(errare) {
consolare.log (errore)
 }
});


cost porta = processo.env. PORTO || 4000;
app.listen (porta, () => {
consolare.tronco d'albero(`Server avviato sulla porta ${porta}`);
});

Analizziamolo:

  • Inizializza Express, mangusta e CORS nel server.
  • Il pacchetto Mongoose stabilisce la connessione al database MongoDB utilizzando il file Collegare metodo che accetta il dominio URI e un oggetto. L'URI è una stringa di connessione utilizzata per stabilire una connessione con il database MongoDB. L'oggetto specifica la configurazione; in questo caso, contiene un'impostazione per utilizzare la forma più recente di analizzatore di URL.
  • Il web server risponde principalmente alle richieste provenienti da percorsi diversi con l'apposita funzione di gestore. In questo caso, il server ha un percorso POST che riceve i dati dal client React, li memorizza in una variabile e li passa al modello di dati importato.
  • Il server utilizza quindi un blocco try-and-catch per archiviare e salvare i dati nel database MongoDB e disconnette eventuali errori, se presenti.

Infine, avvia il server di sviluppo per aggiornare le modifiche e vai al tuo client React nel tuo browser. Digita qualsiasi dato nel modulo e visualizza i risultati nel database MongoDB.

Utilizzo dello stack MERN per creare applicazioni

Lo stack MERN fornisce un set di strumenti efficiente e potente per la creazione di applicazioni. Puoi creare applicazioni del mondo reale complete utilizzando MongoDB, Express, React e Node.js,

L'ecosistema React fornisce anche pacchetti per aiutarti a lavorare con i moduli web. Alcuni dei più popolari sono Formik, KendoReact Form e React Hook Form.