AnkündigungWir stellen MongoDB 8.0 vor, das schnellste MongoDB aller Zeiten! Mehr erfahren >

AnkündigungVoyage AI und MongoDB unterstützen ab sofort gemeinsam genauere und vertrauenswürdigere KI-Anwendungen auf Atlas. Mehr erfahren >

So verwenden Sie MERN Stack: Eine vollständige Anleitung

Für dieses Tutorial benötigen Sie Zugriff auf eine MongoDB Atlas-Datenbank. Wenn Sie kein Konto haben, können Sie sich kostenlos anmelden.

Kostenlos testen

Dieses Tutorial zeigt Ihnen, wie Sie mit den aktuellsten verfügbaren Tools eine Full-Stack-MERN-Anwendung erstellen – in diesem Fall eine Mitarbeiterdatenbank. Bevor Sie beginnen, stellen Sie sicher, dass Sie mit den Grundlagen von Node.js und React.js vertraut sind. Für dieses Tutorial benötigen Sie außerdem Zugriff auf eine MongoDB Atlas Datenbank. Der vollständige Code ist im GitHub-Repository verfügbar.

Inhaltsverzeichnis

Was ist der MERN-Stack?
Einrichten des Projekts
Herstellen einer Verbindung zu MongoDB Atlas
Einrichten der React-Anwendung
Einrichten des React-Routers
Verbinden des Frontends mit dem Backend

Was ist der MERN-Stack?

MERN-Stack ist ein Webentwicklungsframework, das aus MongoDB, Express, React.js und Node.js besteht. Es ist eine von mehreren Varianten des MEAN-Stacks.

Wenn Sie den MERN-Stack verwenden, arbeiten Sie mit React, um die Präsentationsschicht zu implementieren, Express, und Node.js, um die mittlere oder Anwendungsschicht zu bilden, und mit MongoDB, um die Datenbankschicht zu erstellen.

In diesem MERN-Stack-Tutorial nutzen wir diese vier Technologien, um eine grundlegende Anwendung zu entwickeln, die in der Lage ist, die Informationen von Mitarbeitern aufzuzeichnen und sie mithilfe des React-Frontends anzuzeigen.

Erste Schritte mit MERN-Stack

So legen Sie los:

Installieren Sie Node.js

Installieren Sie Node.js indem Sie entweder die LTS-Version oder die aktuelle Version herunterladen.
Hinweis: Die in diesem Tutorial verwendete Version ist v20.11.0

Besitzen oder installieren Sie einen Code-Editor

Sie können für dieses Tutorial einen beliebigen Code-Editor Ihrer Wahl verwenden. Für diese Demonstration verwenden wir jedoch Visual Studio Code.

Eine Illustration, die ein Video-Tutorial zeigt.

Wenn Sie ein visueller Lerner sind, schauen Sie sich die Videoversion dieses Tutorials an.

Einrichten des Projekts

(Sie können gerne mitcodieren oder den vollständigen Code aus dem GitHub-Repository herunterladen.)

Mit MERN können wir Full-Stack-Lösungen erstellen. Um sein volles Potenzial auszuschöpfen, werden wir ein MERN-Stack-Projekt erstellen. Für dieses Projekt werden wir sowohl ein Backend als auch ein Frontend erstellen. Das Frontend wird mit React und das Backend mit MongoDB, Node.js und Express implementiert. Wir rufen den Frontend- Client und den Backend -Server auf.

Beginnen wir mit der Erstellung eines leeren Verzeichnisses: mern. Dieser Ordner enthält unsere Client- und Serverordner.

Code Snippet

Als Nächstes erstellen Sie einen Ordner für das Backend und nennen ihn „server“. Dann initialisieren wir die Datei package.json mit npm init.

Code Snippet

Um ECMAScript Modules, das offiziell unterstützte Standardformat zur Paketierung von JavaScript-Code zur Wiederverwendung, zu verwenden, fügen wir eine Zeile in die package.json-Datei ein.

Code Snippet

Wir werden auch die Abhängigkeiten installieren.

Code Snippet

Der obige Befehl installiert drei verschiedene Pakete:

mongodb – der MongoDB-Datenbanktreiber, der es Ihren Node.js-Anwendungen ermöglicht, eine Verbindung zur Datenbank herzustellen und mit Daten zu arbeiten
express – das Webframework für Node.js (es wird unser Leben einfacher machen)
cors – ein Node.js-Paket, das die gemeinsame Nutzung von Ressourcen zwischen verschiedenen Ursprüngen ermöglicht

Wir können die installierten Abhängigkeiten in der Datei package.json überprüfen. Es sollte die Pakete zusammen mit ihren Versionen auflisten.

Nachdem wir sichergestellt haben, dass die Abhängigkeiten erfolgreich installiert wurden, erstellen wir eine Datei namens server.js mit folgendem Code:

mern/server/server.js

Code Snippet

Hier importieren wir Express und cors. const port = process.env.PORT greift auf die Portvariable aus der Datei config.env zu, die wir als Nächstes erstellen.

Verbindungsherstellung zu MongoDB Atlas

Es ist an der Zeit, unseren Server mit der Datenbank zu verbinden. Wir werden MongoDB Atlas als Datenbank verwenden. MongoDB Atlas ist ein cloudbasierter Datenbankdienst, der robuste Datensicherheit und Zuverlässigkeit bietet. MongoDB Atlas bietet einen kostenlosen Cluster, der nie abläuft und Ihnen Zugriff auf eine Teilmenge der Features und Funktionen von Atlas gewährt.

Befolgen Sie die Anleitung Erste Schritte mit Atlas, um ein Konto zu erstellen, Ihren ersten Cluster bereitzustellen und die Verbindungszeichenfolge Ihres Clusters zu finden.

Nachdem Sie nun die Verbindungszeichenfolge haben, gehen Sie zurück zum Serververzeichnis und erstellen Sie eine Datei „config.env“. Weisen Sie dort die Verbindungszeichenfolge einer neuen ATLAS_URI-Variable zu. Wenn Sie fertig sind, sollte Ihre Datei ungefähr wie die folgende aussehen. Ersetzen Sie < username >, < password >, < clusterName > und < projectId > mit Ihrem Datenbank-Benutzernamen, Passwort, Clusternamen und Projekt-ID.

mern/server/config.env

Code Snippet

Erstellen Sie unter dem Serververzeichnis einen Ordner mit dem Namen db und darin eine Datei mit dem Namen connection.js. Dort können wir den folgenden Code hinzufügen, um eine Verbindung zu unserer Datenbank herzustellen:

mern/server/db/connection.js

Code Snippet

Server-API-Endpunkte

Datenbank fertig. Server fertig. Jetzt ist es Zeit für die API-Endpunkte. Beginnen wir mit der Erstellung eines Routenordners und dem Hinzufügen von record.js darin. Navigieren Sie zurück zu Ihrem „Server“-Verzeichnis und erstellen Sie das neue Verzeichnis und die neue Datei:

Code Snippet

Die Datei routes/record.js wird auch die folgenden Codezeilen enthalten:

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;

Wenn Sie die Anwendung an diesem Punkt ausführen, erhalten Sie beim Herstellen der Verbindung die folgende Meldung in Ihrem Terminal. Beachten Sie, dass wir die integrierte Umgebungsvariablenfunktionalität der neuesten Versionen von Node.js verwenden.

Code Snippet

Mit dem Backend sind wir nun fertig. Jetzt beginnen wir mit der Arbeit am Frontend.

Einrichten der React-Anwendung

Für das Frontend werden wir Vite verwenden, eine moderne Art, eine React-Anwendung zu erstellen. In einem neuen Terminal im Verzeichnis mern richten wir Folgendes ein:

Code Snippet

Es gibt einige zusätzliche Abhängigkeiten, die in unserem Projekt verwendet werden sollen. Wir beginnen mit Tailwind CSS.

Code Snippet

Als Nächstes bearbeiten wir das Inhaltsfeld in der Datei tailwind.config.js.

Code Snippet

In der Datei src/index.css müssen wir die Tailwind-Direktiven hinzufügen und alles andere löschen.

Code Snippet

Zuletzt installieren wir react-router-dom.

Code Snippet

Tailwind ist ein nutzerorientiertes CSS-Framework, mit dem Sie durch die Verwendung vordefinierter Klassennamen CSS-Stile hinzufügen können. Und React Router fügt clientseitiges Seitenrouting zu React hinzu!

Einrichten des React-Routers

Innerhalb von src/main.jsx fügen wir den folgenden Code ein:

mern/client/src/main.jsx

Code Snippet

Wir haben die Routen unserer Anwendungsseite in der Router-Variable eingerichtet und den RouterProvider verwendet, um unsere Benutzeroberfläche mit der URL synchron zu halten. RouterProvider hilft bei nahtlosen Übergängen beim Wechseln zwischen Komponenten. Im Grunde wird nur die Komponente neu geladen oder aktualisiert, die geändert werden muss, anstatt die gesamte Seite zu aktualisieren oder neu zu laden. Obwohl React Router keine Notwendigkeit ist, ist es wichtig, wenn Ihre App reagieren soll.

Erstellen von Komponenten

Als Nächstes erstellen wir die Komponenten, die wir in unseren Routen definiert haben. Erstellen Sie einen Komponentenordner im src-Ordner. Für jede Komponente, die wir erstellen, fügen wir eine neue .js- Datei im Komponentenordner hinzu. In diesem Fall fügen wir NavBar.jsx, RecordList.jsx und ModifyRecord.jsx hinzu.

Code Snippet

Die folgenden Snapshots zeigen, wie jede Datei aussehen würde.

Navbar.jsx

In der Komponente navbar.js erstellen wir eine Navigationsleiste, die uns mit folgendem Code zu den benötigten Komponenten führt.

mern/client/src/components/Navbar.jsx

Code Snippet

RecordList.jsx

Der folgende Code dient als Anzeigekomponente für unsere Datensätze. Es werden alle Datensätze in unserer Datenbank über eine GET-Methode abgerufen.

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

Der folgende Code dient als Formularkomponente zum Erstellen oder Aktualisieren von Datensätzen. Diese Komponente sendet entweder einen Erstellungsbefehl oder einen Aktualisierungsbefehl an unseren 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>
    </>
  );
}

Jetzt fügen wir Folgendes zur Datei src/App.jsx hinzu.

mern/client/src/App.jsx

Code Snippet

Dies ist unsere Hauptlayout-Komponente. Unsere Navbar wird immer oben auf jeder Seite stehen, und das Outlet wird die untergeordneten Komponenten akzeptieren, die wir zuvor in unseren Routen in der Datei main.jsx definiert haben.

Verbindung des Frontends mit dem Backend

Wir haben den Prozess der Komponentenerstellung abgeschlossen. Außerdem haben wir unsere React-App mithilfe von fetch mit dem Back-End verbunden, was eine sauberere und einfachere Verarbeitung von HTTP-Anfragen ermöglicht. In Record.jsx haben wir den folgenden Code an den Block onSubmit(e) angehängt. Wenn eine POST- oder PATCH-Anforderung an die URL gesendet wird, fügt Fetch der Datenbank entweder einen neuen Datensatz hinzu oder aktualisiert einen vorhandenen Datensatz in der Datenbank.

Code Snippet

Wir haben auch den folgenden Codeblock in Record.jsx unterhalb des Konstruktorblocks eingefügt, um einen vorhandenen Datensatz zu laden, falls er existiert.

Code Snippet

Schließlich holt RecordList.jsx. RecordList.jsx die Datensätze aus der Datenbank. Wir werden also die GET-Methode von fetch verwenden, um Datensätze aus der Datenbank abzurufen. Um dies zu erreichen, haben wir die folgenden Codezeilen über der Funktion RecordList() in RecordList.jsx hinzugefügt.

Code Snippet

Nachdem Sie alles geschlossen haben, führen Sie die folgenden Schritte aus, um die App zu starten:

Stellen Sie sicher, dass die Server-App noch ausgeführt wird. Ist dies nicht der Fall, starten Sie sie, indem Sie den folgenden Befehl im Serververzeichnis ausführen:

Code Snippet

Gehen Sie in einem neuen Terminal zum Client-Verzeichnis und führen Sie den folgenden Befehl aus:

Code Snippet

So sieht die Landing Page der Datensatzkomponente aus, nachdem wir Datensätze für „Jesse Hall“, „Kushagra Kesav“ und „Stanimira Vlaeva“ über die Schaltfläche „Mitarbeiter erstellen“ hinzugefügt haben.

So sieht der Bildschirm aus, auf dem Sie einen Mitarbeiter hinzufügen können:

Herzlichen Glückwunsch zum Erstellen Ihrer ersten MERN-Anwendung. Weitere Ideen und fortgeschrittene Konzepte finden Sie in unserem Developer Center und wenn Sie Fragen haben, können Sie diese in unseren Community-Foren stellen.

Erste Schritte mit MongoDB Atlas

Kostenlos testen