AnnuncioTi presentiamo MongoDB 8.0, il MongoDB più veloce di sempre! Leggi >

AnnuncioVoyage AI si unisce a MongoDB per potenziare applicazioni AI più accurate e affidabili su Atlas. Scopra di più >

Come utilizzare lo stack MERN: una guida completa

Avrai bisogno di accedere a un database MongoDB Atlas per questo tutorial. Se non hai un account, puoi registrarti gratuitamente per seguirlo.

Inizia gratis

Questo tutorial ti mostrerà come creare un'applicazione MERN full-stack, in questo caso un database di dipendenti, con gli strumenti più recenti disponibili. Prima di iniziare, assicurati di avere familiarità con le basi di Node.js e React.js. Per questo tutorial sarà inoltre necessario avere accesso a un database MongoDB Atlas. Il codice completo è disponibile nel repository GitHub.

Sommario

Cos'è lo stack MERN?
Configurazione del progetto
Connessione a MongoDB Atlas
Configurazione dell'applicazione React
Configurazione del router React
Collegamento del frontend al backend

Cos'è lo stack MERN?

Lo stack MERN è un framework di sviluppo web composto da MongoDB, Express, React.js e Node.js. È una delle diverse varianti dello stack MEAN.

Quando si utilizza lo stack MERN, si lavora con React per implementare il layer di presentazione, con Express e Node.js per creare il layer intermedio o applicativo e con MongoDB per creare il layer del database.

In questo tutorial sullo stack MERN, utilizzeremo queste quattro tecnologie per sviluppare un'applicazione di base in grado di registrare le informazioni dei dipendenti e visualizzarle utilizzando il frontend React.

Come iniziare a utilizzare lo stack MERN

Per iniziare, dovrai fare quanto segue:

Installare Node.js

Installa Node.js scaricando la versione LTS o la versione corrente.
Nota: la versione utilizzata in questo tutorial è la v20.11.0

Avere o installare un editor di codice

Per questo tutorial puoi utilizzare qualsiasi editor di codice tu preferisca. Tuttavia, ai fini di questa dimostrazione, utilizzeremo Visual Studio Code.

Un'illustrazione raffigurante un video tutorial.

Se ti è più facile apprendere guardando video e immagini, dai un'occhiata alla versione video di questo tutorial.

Configurazione del progetto

(Inserisci pure il codice man mano che leggi il tutorial o scarica il codice completo dal repository GitHub.)

MERN ci consente di creare soluzioni full-stack. Quindi, per sfruttarne appieno il potenziale, creeremo un progetto stack MERN. Per questo progetto, creeremo sia un backend che un frontend. Il frontend sarà implementato con React e il backend sarà implementato con MongoDB, Node.js ed Express. Chiameremo il client frontend e il server backend.

Iniziamo creando una directory vuota: mern. Questa cartella conterrà le nostre cartelle client e server.

Code Snippet

Quindi, creiamo una cartella per il backend e denominiamola server. Dopodiché, inizializzeremo il file package.json usando npm init.

Code Snippet

Per utilizzare i moduli ECMAScript, il formato standard ufficialmente supportato per impacchettare il codice JavaScript da riutilizzare, aggiungeremo una riga al file package.json.

Code Snippet

Installeremo anche le dipendenze.

Code Snippet

Il comando sopra installa tre diversi pacchetti:

mongodb: il driver del database MongoDB che consente alle applicazioni Node.js di connettersi al database e lavorare con i dati
express: il framework web per Node.js (ci renderà la vita più semplice)
cors: un pacchetto Node.js che consente la condivisione di risorse tra origini diverse

Possiamo controllare le dipendenze installate nel file package.json. Dovrebbe elencare i pacchetti insieme alle loro versioni.

Dopo esserci assicurati che le dipendenze siano state installate correttamente, creiamo un file chiamato server.js con il seguente codice:

mern/server/server.js

Code Snippet

Qui stiamo importando express e cors da utilizzare. const port = process.env.PORT accederà alla variabile porta dal file config.env che creeremo dopo.

Connessione a MongoDB Atlas

È il momento di collegare il nostro server al database. Utilizzeremo MongoDB Atlas come database. MongoDB Atlas è un servizio di database basato su cloud che offre una solida sicurezza e affidabilità dei dati. MongoDB Atlas fornisce un cluster di livello gratuito che non scade mai e consente di accedere a un sottoinsieme di caratteristiche e funzionalità di Atlas.

Segui la guida Inizia subito con Atlas per creare un account, distribuire il tuo primo cluster e individuare la stringa di connessione del tuo cluster.

Ora che hai la stringa di connessione, torna alla directory del server e crea un file config.env. Qui, assegna la stringa di connessione a una nuova variabile ATLAS_URI. Una volta terminato, il file dovrebbe apparire simile a quello qui sotto. Sostituisci < username >, < password >, < clusterName >, e < projectId > con il nome utente, la password, il nome del cluster e l'ID del progetto del tuo database.

mern/server/config.env

Code Snippet

Crea una cartella sotto la directory del server denominata db e al suo interno un file denominato connection.js. Lì possiamo aggiungere il seguente codice per connetterci al nostro database:

mern/server/db/connection.js

Code Snippet

Endpoint API del server

Database completato. Server completato. Ora è il momento degli endpoint API. Iniziamo creando una cartella routes e aggiungendo record.js al suo interno. Torna alla directory "server" e crea la nuova directory e il nuovo file:

Code Snippet

Il file routes/record.js conterrà anche le seguenti righe di codice:

mern/server/routes/record.js

Code Snippet

import express from "express";

// This will help us connect to the database
import db from "../db/connection.js";

// This help convert the id from string to ObjectId for the _id.
import { ObjectId } from "mongodb";

// router is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const router = express.Router();

// This section will help you get a list of all the records.
router.get("/", async (req, res) => {
  let collection = await db.collection("records");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get("/:id", async (req, res) => {
  let collection = await db.collection("records");
  let query = { _id: new ObjectId(req.params.id) };
  let result = await collection.findOne(query);

if (!result) res.send("Not found").status(404);
  else res.send(result).status(200);
});

// This section will help you create a new record.
router.post("/", async (req, res) => {
  try {
    let newDocument = {
      name: req.body.name,
      position: req.body.position,
      level: req.body.level,
    };
    let collection = await db.collection("records");
    let result = await collection.insertOne(newDocument);
    res.send(result).status(204);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error adding record");
  }
});

// This section will help you update a record by id.
router.patch("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };
    const updates = {
      $set: {
        name: req.body.name,
        position: req.body.position,
        level: req.body.level,
      },
    };

let collection = await db.collection("records");
    let result = await collection.updateOne(query, updates);
    res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error updating record");
  }
});

// This section will help you delete a record
router.delete("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };

const collection = db.collection("records");
    let result = await collection.deleteOne(query);

res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error deleting record");
  }
});

export default router;

Se esegui l'applicazione a questo punto, riceverai il seguente messaggio nel tuo terminale, mentre si stabilisce la connessione. Notare che stiamo utilizzando la funzionalità delle variabili di ambiente integrata delle versioni più recenti di Node.js.

Code Snippet

Questo è tutto per il backend. Ora inizieremo a lavorare sul frontend.

Configurazione dell'applicazione React

Per il frontend, useremo Vite, un modo moderno per creare un'applicazione React. In un nuovo terminale all'interno della directory mern, impostiamo questo:

Code Snippet

Ci sono alcune dipendenze aggiuntive che verranno utilizzate nel nostro progetto. Inizieremo con Tailwind CSS.

Code Snippet

Successivamente, modificheremo il campo del contenuto nel file tailwind.config.js.

Code Snippet

Nel file src/index.css dobbiamo aggiungere le direttive Tailwind ed eliminare tutto il resto.

Code Snippet

Infine, installeremo react-router-dom.

Code Snippet

Tailwind è un framework CSS utility-first che consente di aggiungere stili CSS utilizzando nomi di classe predefiniti. E React Router aggiunge il routing delle pagine lato client a React!

Configurazione del router React

All'interno di src/main.jsx, aggiungeremo il seguente codice:

mern/client/src/main.jsx

Code Snippet

Abbiamo impostato i percorsi della nostra pagina applicativa nella variabile router e abbiamo utilizzato RouterProvider per mantenere la nostra IU sincronizzata con l'URL. RouterProvider aiuta con transizioni senza interruzioni durante il passaggio da un componente all'altro. In pratica, ricaricherà o aggiornerà solo il componente che deve essere modificato, invece di aggiornare o ricaricare l'intera pagina. Sebbene React Router non sia obbligatorio, è importante se vuoi che la tua app sia reattiva.

Creazione di componenti

Successivamente, creiamo i componenti che abbiamo definito nei nostri percorsi. Crea una cartella components all'interno della cartella src. Per ogni componente che creiamo, aggiungeremo un nuovo file .js nella cartella dei componenti. In questo caso aggiungeremo Navbar.jsx, RecordList.jsx e ModifyRecord.jsx.

Code Snippet

Gli snapshot seguenti mostrano l'aspetto di ciascun file.

Navbar.jsx

Nel componente navbar.js, creeremo una barra di navigazione che ci collegherà ai componenti necessari utilizzando il seguente codice.

mern/client/src/componenti/Navbar.jsx

Code Snippet

RecordList.jsx

Il seguente codice servirà come componente di visualizzazione per i nostri record. Recupererà tutti i record nel nostro database attraverso un metodo GET.

mern/client/src/components/RecordList.jsx

Code Snippet

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Record = (props) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.position}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.level}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      <div className="flex gap-2">
        <Link
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 h-9 rounded-md px-3"
          to={`/edit/${props.record._id}`}
        >
          Edit
        </Link>
        <button
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3"
          color="red"
          type="button"
          onClick={() => {
            props.deleteRecord(props.record._id);
          }}
        >
          Delete
        </button>
      </div>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

// This method fetches the records from the database.
  useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5050/record/`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const records = await response.json();
      setRecords(records);
    }
    getRecords();
    return;
  }, [records.length]);

// This method will delete a record
  async function deleteRecord(id) {
    await fetch(`http://localhost:5050/record/${id}`, {
      method: "DELETE",
    });
    const newRecords = records.filter((el) => el._id !== id);
    setRecords(newRecords);
  }

// This method will map out the records on the table
  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

// This following section will display the table with the records of individuals.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Employee Records</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Position
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Level
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {recordList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Record.jsx

Il codice seguente fungerà da componente del modulo per creare o aggiornare i record. Questo componente invierà un comando di creazione o un comando di aggiornamento al nostro server.

mern/client/src/components/Record.jsx*

Code Snippet

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

export default function Record() {
  const [form, setForm] = useState({
    name: "",
    position: "",
    level: "",
  });
  const [isNew, setIsNew] = useState(true);
  const params = useParams();
  const navigate = useNavigate();

useEffect(() => {
    async function fetchData() {
      const id = params.id?.toString() || undefined;
      if(!id) return;
      setIsNew(false);
      const response = await fetch(
        `http://localhost:5050/record/${params.id.toString()}`
      );
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        console.warn(`Record with id ${id} not found`);
        navigate("/");
        return;
      }
      setForm(record);
    }
    fetchData();
    return;
  }, [params.id, navigate]);

// These methods will update the state properties.
  function updateForm(value) {
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

// This function will handle the submission.
  async function onSubmit(e) {
    e.preventDefault();
    const person = { ...form };
    try {
      let response;
      if (isNew) {
        // if we are adding a new record we will POST to /record.
        response = await fetch("http://localhost:5050/record", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      } else {
        // if we are updating a record we will PATCH to /record/:id.
        response = await fetch(`http://localhost:5050/record/${params.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      }

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error) {
      console.error('A problem occurred with your fetch operation: ', error);
    } finally {
      setForm({ name: "", position: "", level: "" });
      navigate("/");
    }
  }

// This following section will display the form that takes the input from the user.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Create/Update Employee Record</h3>
      <form
        onSubmit={onSubmit}
        className="border rounded-lg overflow-hidden p-4"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-slate-900/10 pb-12 md:grid-cols-2">
          <div>
            <h2 className="text-base font-semibold leading-7 text-slate-900">
              Employee Info
            </h2>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              This information will be displayed publicly so be careful what you
              share.
            </p>
          </div>

<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 ">
            <div className="sm:col-span-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Name
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="First Last"
                    value={form.name}
                    onChange={(e) => updateForm({ name: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div className="sm:col-span-4">
              <label
                htmlFor="position"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Position
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="position"
                    id="position"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="Developer Advocate"
                    value={form.position}
                    onChange={(e) => updateForm({ position: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div>
              <fieldset className="mt-4">
                <legend className="sr-only">Position Options</legend>
                <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
                  <div className="flex items-center">
                    <input
                      id="positionIntern"
                      name="positionOptions"
                      type="radio"
                      value="Intern"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Intern"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionIntern"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Intern
                    </label>
                    <input
                      id="positionJunior"
                      name="positionOptions"
                      type="radio"
                      value="Junior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Junior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionJunior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Junior
                    </label>
                    <input
                      id="positionSenior"
                      name="positionOptions"
                      type="radio"
                      value="Senior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Senior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionSenior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Senior
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <input
          type="submit"
          value="Save Employee Record"
          className="inline-flex items-center justify-center whitespace-nowrap text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3 cursor-pointer mt-4"
        />
      </form>
    </>
  );
}

Ora, aggiungiamo quanto segue al file src/App.jsx.

mern/client/src/App.jsx

Code Snippet

Questo è il nostro principale componente di layout. Il componente Navbar sarà sempre nella parte superiore di ogni pagina e l'Outlet accetterà i componenti figli che abbiamo definito nei nostri percorsi nel file main.jsx.

Collegamento del frontend al backend

Abbiamo completato il processo di creazione dei componenti. Abbiamo anche collegato la nostra app React al backend tramite fetch, che offre modi più puliti e semplici per gestire le richieste http. In Record.jsx, abbiamo aggiunto il seguente codice al blocco onSubmit(e). Quando una richiesta POST o PATCH viene inviata all'URL, fetch aggiungerà un nuovo record al database o aggiornerà un record esistente nel database.

Code Snippet

Abbiamo anche inserito il seguente blocco di codice in Record.jsx sotto il blocco del costruttore per caricare un record esistente, se presente.

Code Snippet

Infine, RecordList.jsx. RecordList.jsx recupera i record dal database, quindi useremo il metodo GET di fetch per recuperare i record dal database. Per raggiungere questo obiettivo, abbiamo aggiunto le seguenti righe di codice sopra la funzione RecordList() in RecordList.jsx.

Code Snippet

Dopo aver chiuso tutto, per avviare l'app, segui i passaggi seguenti:

Assicurati che l'app del server sia ancora in esecuzione. In caso contrario, avviala eseguendo il seguente comando nella directory del server:

Code Snippet

In un nuovo terminale, vai alla directory client ed esegui il comando:

Code Snippet

Ecco come apparirà la pagina di destinazione del componente record dopo aver aggiunto i record per "Jesse Hall", "Kushagra Kesav" e "Stanimira Vlaeva" tramite il pulsante "Create Employee".

Ecco come apparirà la schermata che ti permetterà di aggiungere un dipendente:

Congratulazioni per aver creato la tua prima applicazione MERN. Per ulteriori idee e concetti avanzati, visita il nostro Developer Center e se hai delle domande, pubblicale nei nostri forum della community.

Primi passi con MongoDB Atlas

Prova gratuita

Ulteriori Informazioni