Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Les bases de données relationnelles comme MySQL ont traditionnellement été le choix de base de données incontournable. Cependant, les bases de données NoSQL comme MongoDB ont gagné en popularité en raison de leur structure flexible pour le stockage des données et de leur capacité à stocker et récupérer rapidement des données.

Ces bases de données offrent un langage de requête alternatif que vous pouvez intégrer de manière transparente aux applications Web et mobiles modernes. Lisez la suite pour savoir comment stocker des données React dans une base de données MongoDB.

Qu'est-ce qu'une base de données NoSQL?

NoSQL signifie Not only SQL, une base de données non relationnelle. Ce type de base de données ne repose pas sur le modèle de base de données relationnelle traditionnel. Il n'a pas de structure colonne-ligne définie et peut stocker des données dans une variété de formats différents, ce qui le rend plus flexible et évolutif.

instagram viewer

La principale différence entre NoSQL et les bases de données relationnelles est qu'au lieu d'avoir des lignes et des colonnes, les bases de données NoSQL stockent les données dans des documents, qui ont une structure dynamique.

Configurer une base de données MongoDB

MongoDB est la base de données NoSQL la plus populaire. Il s'agit d'une base de données open source qui stocke les données dans des documents de type JSON (tables) à l'intérieur de collections (bases de données).

Voici à quoi ressemble une structure de document MongoDB simple :

{
 Prénom: 'André',
 Rôle: 'Développeur Backend'
}

Pour commencer, vous devez d'abord mettre en place une base de données MongoDB. Une fois que vous avez terminé de configurer MongoDB, ouvrez l'application MongoDB Compass. Ensuite, cliquez sur le Nouvelle connexion bouton pour créer une connexion avec le serveur MongoDB exécuté localement.

Si vous n'avez pas accès à l'outil MongoDB Compass GUI, vous pouvez utiliser l'outil Outil shell MongoDB pour créer une base de données et la collection.

Fournissez l'URI de connexion et le nom de la connexion, puis appuyez sur Enregistrer et se connecter.

Enfin, cliquez sur le bouton Créer une base de données, remplissez le nom de la base de données et fournissez un nom de collection pour une collection de démonstration.

Créer un client réactif

Vous pouvez trouver le code de cette application dans son Référentiel GitHub.

Pour démarrer rapidement une application React, créez un dossier de projet sur votre ordinateur local, accédez à ce répertoire et exécutez ces commandes de terminal pour créer et lancer le serveur de développement :

npx créer-réagir-app mon-application
cd mon-application
début npm

Ensuite, installez Axios. Ce package vous permettra d'envoyer des requêtes HTTP à votre serveur backend Express.js pour stocker des données dans votre base de données MongoDB.

npm installer axios

Créer un formulaire de démonstration pour collecter des données utilisateur

Ouvrez le src/App.js fichier, supprimez le code passe-partout React et remplacez-le par ce qui suit :

importer'./App.css';
importer Réagissez, { useState } depuis'réagir';
importer Axios depuis'axios';
fonctionApplication() {
constante [nom, setName] = useState("")
constante [rôle, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/insert', {
 nomcomplet: nom,
 entrepriseRôle: rôle
 })
 }


retour (


"Application">
"App-header"> 
"Formulaire de connexion">


Prénom</p>


 NomClasse = "Nom"
 taper="texte"
 espace réservé="Prénom ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Rôle de l'entreprise</p>


 NomClasse = "Rôle"
 taper="texte"
 espace réservé = "Rôle..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exporterdéfaut application ;

Décomposons-le :

  • Déclarez deux états, un nom et un état de rôle, pour contenir les données utilisateur collectées à partir des champs d'entrée à l'aide du crochet useState.
  • Le sur le changement La méthode de chaque champ de saisie exécute un rappel qui utilise les méthodes d'état pour capturer et stocker les données que l'utilisateur soumet via le formulaire.
  • Pour soumettre les données au serveur principal, la fonction de gestionnaire onSubmit utilise la Axios.post méthode pour soumettre les données transmises des états en tant qu'objet au point de terminaison de l'API backend.

Pour styliser le formulaire rendu, ajoutez le code suivant au fichier App.css.

* {
rembourrage: 0;
marge: 0;
dimensionnement de la boîte: border-box;
}
corps {
famille de polices: 'Poppins', sans empattement;
Couleur de l'arrière plan: #8EC1D6;
}


.Formulaire de connexion {
marge: 100pixelsauto;
largeur: 200pixels;
hauteur: 250pixels;
Couleur de l'arrière plan: #fff;
rayon de bordure: 10pixels; 
}


.Formulaire de connexionp {
aligner le texte: centre;
taille de police: 12pixels;
poids de la police: 600;
couleur: #B8BFC6;
rembourrage: 10pixels 10pixels;
}


.Formulaire de connexionsaisir {
afficher: bloc;
largeur: 80%;
hauteur: 40pixels;
marge: 10pixelsauto;
frontière: 1pixelssolide#ccc;
rayon de bordure: 5pixels;
rembourrage: 0 10pixels;
taille de police: 16pixels;
couleur: noir;
}
.Formulaire de connexionbouton {
Couleur de l'arrière plan: #8EC1D6;
couleur: #fff;
le curseur: aiguille;
taille de police: 15pixels;
rayon de bordure:7px;
rembourrage: 5pixels 10pixels;
frontière: aucun;
}

Maintenant, lancez le serveur de développement pour mettre à jour les modifications et accédez à http://localhost: 3000 sur votre navigateur pour afficher les résultats.

Créer un backend Express.js

Un backend Express agit comme middleware entre votre client React et la base de données MongoDB. Depuis le serveur, vous pouvez définir vos schémas de données et établir la connexion entre le client et la base de données.

Créer un serveur Web Express et installez ces deux packages :

npm installer mongoose cors

Mongoose est une bibliothèque ODM (Object Data Modeling) pour MongoDB et Node. Il fournit une méthode simplifiée basée sur un schéma pour modéliser les données de votre application et les stocker dans une base de données MongoDB.

Le package CORS (Cross-Origin Resource Sharing) fournit un mécanisme permettant au serveur principal et à un client frontal de communiquer et de transmettre des données via les points de terminaison de l'API.

Créer un schéma de données

Créez un nouveau dossier dans le répertoire racine du dossier de projet de votre serveur et nommez-le des modèles. Dans ce dossier, créez un nouveau fichier: dataSchema.js.

Un schéma, dans ce cas, représente la structure logique de votre base de données. Il définit les documents (enregistrements) et les champs (propriétés) qui composent les collections au sein de la base de données.

Ajoutez le code suivant à dataSchema.js :

constante mangouste = exiger('mangouste');
constante ReactFormDataSchema = nouveau mangouste. Schéma({
 nom: {
 taper: Chaîne,
 requis: vrai
 },
 rôle: {
 taper: Chaîne,
 requis: vrai
 }
});
constante Utilisateur = mangouste.model('Utilisateur', ReactFormDataSchema);
module.exports = Utilisateur ;

Ce code crée un schéma Mongoose pour un modèle User. Ce schéma définit la structure de données pour les données utilisateur, y compris le nom et le rôle de l'utilisateur. Le schéma est ensuite utilisé pour créer un modèle pour l'utilisateur. Cela permet au modèle de stocker des données dans une collection MongoDB selon la structure définie dans le schéma.

Configurer le serveur express

Ensuite, ouvrez le index.js fichier dans le dossier du projet du serveur et ajoutez ce code :

constante exprimer = exiger('exprimer');
constante mangouste = exiger('mangouste');
constante cors = exiger('cors');
constante app = express();
constante Utilisateur= exiger('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


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


app.post('/insérer', asynchrone(req, res) => {
constante Prénom = req.body.firstName
constante CompanyRole = req.body.companyRole


constante formData = nouveau Utilisateur({
 Nom Prénom,
 rôle: CompanyRole
 })


essayer {
attendre formData.save();
 res.send("données insérées..")
 } attraper(erre) {
console.log (erreur)
 }
});


constante port = processus.env. PORT || 4000;
app.listen (port, () => {
console.enregistrer(`Serveur démarré sur le port ${port}`);
});

Décomposons-le :

  • Initialisez Express, mongoose et CORS sur le serveur.
  • Le package Mongoose établit la connexion à la base de données MongoDB en utilisant le connecter méthode qui prend le domaine URI et un objet. L'URI est une chaîne de connexion utilisée pour établir une connexion avec la base de données MongoDB. L'objet spécifie la configuration; dans ce cas, il contient un paramètre pour utiliser la forme la plus récente d'analyseur d'URL.
  • Le serveur Web répond principalement aux demandes provenant de différentes routes avec la fonction de gestionnaire appropriée. Dans ce cas, le serveur dispose d'une route POST qui reçoit les données du client React, les stocke dans une variable et les transmet au modèle de données importé.
  • Le serveur utilise ensuite un bloc try-and-catch pour stocker et enregistrer les données dans la base de données MongoDB, et déconnecte toutes les erreurs, le cas échéant.

Enfin, lancez le serveur de développement pour mettre à jour les modifications et accédez à votre client React dans votre navigateur. Tapez toutes les données sur le formulaire et affichez les résultats sur la base de données MongoDB.

Utilisation de la pile MERN pour créer des applications

La pile MERN fournit un ensemble d'outils efficaces et puissants pour créer des applications. Vous pouvez créer des applications réelles à part entière à l'aide de MongoDB, Express, React et Node.js,

L'écosystème React fournit également des packages pour vous aider à travailler avec des formulaires Web. Certains des plus populaires sont Formik, KendoReact Form et React Hook Form.