Búsqueda de sitios web

Cómo almacenar datos del formulario React en una base de datos MongoDB


Intente agregar MongoDB a su pila web para ver lo fácil que es almacenar y consultar datos de formularios.

Las bases de datos relacionales como MySQL han sido tradicionalmente la opción de base de datos preferida. Sin embargo, las bases de datos NoSQL como MongoDB han ganado popularidad debido a su estructura flexible para el almacenamiento de datos y su capacidad para almacenar y recuperar datos rápidamente.

Estas bases de datos ofrecen un lenguaje de consulta alternativo que puede integrar perfectamente con aplicaciones web y móviles modernas. Continúe leyendo para aprender cómo almacenar datos de React en una base de datos MongoDB.

¿Qué es una base de datos NoSQL?

NoSQL significa No solo SQL, una base de datos no relacional. Este tipo de base de datos no se basa en el modelo de base de datos relacional tradicional. No tiene una estructura de filas y columnas definida y puede almacenar datos en una variedad de formatos diferentes, lo que lo hace más flexible y escalable.

La principal diferencia entre las bases de datos NoSQL y las relacionales es que, en lugar de tener filas y columnas, las bases de datos NoSQL almacenan datos en documentos, que tienen una estructura dinámica.

Configurar una base de datos MongoDB

MongoDB es la base de datos NoSQL más popular. Es una base de datos de código abierto que almacena datos en documentos (tablas) similares a JSON dentro de colecciones (bases de datos).

Así es como se ve una estructura de documento MongoDB simple:

{
  FirstName: 'Andrew',
  Role: 'Backend Developer'
}

Para comenzar, primero debe configurar una base de datos MongoDB. Una vez que haya terminado de configurar MongoDB, abra la aplicación MongoDB Compass. Luego, haga clic en el botón Nueva conexión para crear una conexión con el servidor MongoDB ejecutándose localmente.

Si no tiene acceso a la herramienta GUI de MongoDB Compass, puede usar la herramienta de shell MongoDB para crear una base de datos y la colección.

Proporcione el URI de conexión y el nombre de la conexión, luego presione Guardar y conectar.

Por último, haga clic en el botón Crear base de datos, complete el nombre de la base de datos y proporcione un nombre de colección para una colección de demostración.

Crear un cliente reaccionar

Puedes encontrar el código de esta aplicación en su repositorio de GitHub.

Para iniciar rápidamente una aplicación React, cree una carpeta de proyecto en su máquina local, cambie a ese directorio y ejecute estos comandos de terminal para crear y poner en marcha el servidor de desarrollo:

npx create-react-app my-app
cd my-app
npm start

A continuación, instale Axios. Este paquete le permitirá enviar solicitudes HTTP a su servidor backend Express.js para almacenar datos en su base de datos MongoDB.

npm install axios

Cree un formulario de demostración para recopilar datos del usuario

Abra el archivo src/App.js, elimine el código repetitivo de React y reemplácelo con lo siguiente:

import './App.css';
import React, { useState } from 'react';
import Axios from 'axios';
function App() {
  const [name, setName] = useState("")
  const [role, setRole] = useState("")
  const handleSubmit = (e) => {
      e.preventDefault();
      Axios.post('http://localhost:4000/insert', {
          fullName: name,
          companyRole:role
      })
  }
  return (
    <div className="App">
      <header className="App-header"> 
        <div className="logIn-form">
            <form onSubmit={handleSubmit}>
                <p>First Name</p>
                <input
                  className = "Name" 
                  type="text"
                  placeholder="First name ..."
                  onChange={(e) => {setName(e.target.value)}}
                />
                <p> Company Role</p>
                <input 
                  className = "Role"
                  type="text"
                  placeholder = "Role...." 
                  onChange={(e) => {setRole(e.target.value)}}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
      </header>
    </div>
  );
}
export default App;

Vamos a desglosarlo:

  • Declare dos estados, un nombre y un estado de función, para contener los datos del usuario recopilados de los campos de entrada mediante el enlace useState.
  • El método onChange de cada campo de entrada ejecuta una devolución de llamada que utiliza los métodos de estado para capturar y almacenar los datos que el usuario envía a través del formulario.
  • Para enviar los datos al servidor backend, la función del controlador onSubmit utiliza el método Axios.post para enviar los datos pasados desde los estados como un objeto al punto final de la API backend.

Para aplicar estilo al formulario representado, agregue el siguiente código al archivo App.css.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  background-color: #8EC1D6;
}
.logIn-form {
  margin: 100px auto;
  width: 200px;
  height: 250px;
  background-color: #fff;
  border-radius: 10px; 
}
.logIn-form p {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #B8BFC6;
  padding: 10px 10px;
}
.logIn-form input {
  display: block;
  width: 80%;
  height: 40px;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 16px;
  color: black;
}
.logIn-form button {
  background-color: #8EC1D6;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  border-radius:7px;
  padding: 5px 10px;
  border: none;
}

Ahora, active el servidor de desarrollo para actualizar los cambios y navegue hasta http://localhost:3000 en su navegador para ver los resultados.

Crear un backend Express.js

Un backend Express actúa como middleware entre su cliente React y la base de datos MongoDB. Desde el servidor, puede definir sus esquemas de datos y establecer la conexión entre el cliente y la base de datos.

Cree un servidor web Express e instale estos dos paquetes:

npm install mongoose cors

Mongoose es una biblioteca de modelado de datos de objetos (ODM) para MongoDB y Node. Proporciona un método simplificado basado en esquemas para modelar los datos de su aplicación y almacenarlos en una base de datos MongoDB.

El paquete CORS (Cross-Origin Resource Sharing) proporciona un mecanismo para que el servidor backend y un cliente frontend se comuniquen y pasen datos a través de los puntos finales API.

Crear un esquema de datos

Cree una nueva carpeta en el directorio raíz de la carpeta del proyecto de su servidor y asígnele el nombre modelos. En esta carpeta, cree un nuevo archivo: dataSchema.js.

Un esquema, en este caso, representa la estructura lógica de su base de datos. Define los documentos (registros) y campos (propiedades) que componen las colecciones dentro de la base de datos.

Agregue el siguiente código a dataSchema.js:

const mongoose = require('mongoose');
const ReactFormDataSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true
    },
    role: {
        type: String,
        required: true
    }
});
const User = mongoose.model('User', ReactFormDataSchema);
module.exports = User;

Este código crea un esquema Mongoose para un modelo de Usuario. Este esquema define la estructura de datos de los datos del usuario, incluido el nombre y la función del usuario. Luego, el esquema se utiliza para crear un modelo para el usuario. Esto permite que el modelo almacene datos en una colección de MongoDB de acuerdo con la estructura definida en el esquema.

Configurar el servidor expreso

A continuación, abra el archivo index.js en la carpeta del proyecto del servidor y agregue este código:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const User= require('./models/ReactDataSchema')
app.use(express.json());
app.use(cors());
mongoose.connect('mongodb://localhost:27017/reactdata', { useNewUrlParser: true });
app.post('/insert', async(req, res) => {
    const FirstName = req.body.firstName
    const CompanyRole = req.body.companyRole
    const formData = new User({
        name: FirstName,
        role: CompanyRole
    })
    try {
        await formData.save();
        res.send("inserted data..")
    } catch(err) {
        console.log(err)
    }
});
const port = process.env.PORT || 4000;
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});

Vamos a desglosarlo:

  • Inicialice Express, mongoose y CORS en el servidor.
  • El paquete Mongoose establece la conexión a la base de datos MongoDB utilizando el método connect que toma el dominio URI y un objeto. El URI es una cadena de conexión que se utiliza para establecer una conexión con la base de datos MongoDB. El objeto especifica la configuración; en este caso, contiene una configuración para utilizar la forma más nueva de analizador de URL.
  • El servidor web responde principalmente a las solicitudes que llegan desde diferentes rutas con la función de controlador adecuada. Para este caso, el servidor tiene una ruta POST que recibe datos del cliente React, los almacena en una variable y los pasa al modelo de datos importado.
  • Luego, el servidor utiliza un bloque try-and-catch para almacenar y guardar los datos en la base de datos MongoDB y cierra la sesión de cualquier error, si corresponde.

Finalmente, active el servidor de desarrollo para actualizar los cambios y diríjase a su cliente React en su navegador. Escriba cualquier dato en el formulario y vea los resultados en la base de datos MongoDB.

Uso de la pila MERN para crear aplicaciones

La pila MERN proporciona un conjunto de herramientas potente y eficiente para aplicaciones de construcción. Puede crear aplicaciones completas del mundo real utilizando MongoDB, Express, React y Node.js.

El ecosistema React también proporciona paquetes para ayudarle a trabajar con formularios web. Algunos de los más populares son Formik, KendoReact Form y React Hook Form.

Artículos relacionados: