公告MongoDB 8.0 隆重推出，这是有史以来最快的MongoDB！了解详情 >

公告Voyage AI 与 MongoDB 携手合作，致力于在 Atlas 上提供更准确和更值得信赖的 AI 应用。了解更多 >

MERN 堆栈使用全指南

在本教程中，您需要访问 MongoDB Atlas 数据库。如果您还没有帐户，可以免费注册一个帐户，以便跟随学习。

本教程将向您展示如何使用最新的可用工具来构建全栈 MERN 应用程序（在本例中为员工数据库）。开始之前，请确保您熟悉有关 Node.js 和 React.js 的基础知识。在本教程中，您还需要访问 MongoDB Atlas 数据库。完整代码可在 GitHub 存储库中找到。

什么是 MERN 堆栈？
设置项目
连接到 MongoDB Atlas
设置 React 应用程序
设置 React Router
将前端连接到后端

什么是 MERN 堆栈？

MERN 堆栈是一个由 MongoDB、Express、React.js 和 Node.js 组成的 Web 开发框架。它是 MEAN 堆栈的几种变体之一。

在使用 MERN 堆栈时，您可以借助 React 来实现表示层，借助 Express 和 Node.js 来构成中间层或应用层，使用 MongoDB 来创建数据库层。

在本 MERN 堆栈教程中，我们将利用这四项技术来开发一款基础应用程序，该应用程序能够记录员工的信息并使用 React 前端显示这些信息。

如何开始使用 MERN 堆栈

首先，您需要执行以下操作：

安装 Node.js

通过下载 LTS 版本或当前版本来安装 Node.js。
注意：本教程使用的版本是 v20.11.0

准备或安装代码编辑器

在本教程中，您可以使用自选的任何代码编辑器。但是，为了便于演示，我们将使用 Visual Studio Code。

如果您是视觉型学习者，请查看本教程的视频版本。

设置项目

（请随意编写代码或从 GitHub 存储库上下载完整代码。）

MERN 支持创建全栈解决方案。因此，为了充分发挥它的潜力，我们将创建一个 MERN 堆栈项目。在此项目中，我们将同时创建前端和后端。前端将使用 React 来实现，而后端将使用 MongoDB、Node.js 和 Express 来实现。我们将前端称为客户端 (client)，后端称为服务器 (server)。

让我们先来创建一个空目录：mern。此文件夹将包含我们的客户端和服务器文件夹。

Code Snippet

接下来，为后端创建一个文件夹，将其命名为“server”。然后，我们将使用 npm init 对 package.json 文件进行初始化。

Code Snippet

为了使用 ECMAScript 模块（打包 JavaScript 代码以供重用的官方标准格式），我们将在 package.json 文件中添加一行。

Code Snippet

我们还将安装各种依赖项。

Code Snippet

上述命令会安装三个不同的包：

mongodb — MongoDB 数据库驱动程序，其允许 Node.js 应用程序连接到数据库并处理数据
express — Node.js 的 Web 框架（可让我们的生活更轻松）
cors — 支持跨源资源共享的 Node.js 包

我们可以在 package.json 文件中查看已安装的依赖项。该文件应列出各个包及其版本。

在确保依赖项安装成功后，我们会创建一个名为 server.js 的文件，其中包含以下代码：

mern/server/server.js

Code Snippet

在这个文件中，我们会导入要使用的 express 和 cors。const port = process.env.PORT 将从我们接下来要创建的 config.env 中访问 port 变量。

连接到 MongoDB Atlas

现在可以将我们的服务器连接到数据库了。我们将使用 MongoDB Atlas 作为数据库。MongoDB Atlas 是一种基于云的数据库服务，可提供强大的数据安全性和可靠性。MongoDB Atlas 提供永不过期的免费集群，并允许您访问部分 Atlas 特性和功能。

参照 Atlas 入门指南创建帐户，部署第一个集群，然后找到集群的连接字符串。

找到连接字符串后，返回 server 目录，然后创建 config.env 文件。在该文件中，将连接字符串赋值给新的 ATLAS_URI 变量。完成后，您的文件应如下所示。用您的数据库用户名、密码、集群名称和项目 ID 替换 < username >、< password >、< clusterName > 和 < projectId >。

mern/server/config.env

Code Snippet

在 server 目录下创建一个名为 db 的文件夹，然后在文件夹中创建一个名为 connection.js 的文件。在该文件中，我们可以添加以下代码来连接我们的数据库：

mern/server/db/connection.js

Code Snippet

服务器 API 端点

数据库和服务器已经配置完毕。现在轮到 API 端点了。让我们先来创建一个 routes 文件夹，在其中添加 record.js。返回您的“server”目录，然后创建新的目录和文件：

Code Snippet

routes/record.js 文件中还将包含以下几行代码：

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;

如果此时运行应用程序，终端将在连接建立后显示以下信息。请注意，我们使用的是最新版 Node.js 的内置环境变量功能。

Code Snippet

关于后端的内容就介绍到这里。现在，我们将开始配置前端。

设置 React 应用程序

对于前端，我们将使用现代的 React 应用程序创建方法 Vite。在 mern 目录下的新终端中，我们来进行如下设置：

Code Snippet

在我们的项目中还会用到一些其他依赖项。我们先来使用 Tailwind CSS。

Code Snippet

接下来，我们将编辑 tailwind.config.js 文件中的 content 字段。

Code Snippet

在 src/index.css 文件中，我们需要添加 Tailwind 指令，并删除所有其他指令。

Code Snippet

最后，我们将安装 react-router-dom。

Code Snippet

Tailwind 是一套实用型 CSS 框架，允许您使用预定义类名称来添加 CSS 样式。而 React Router 会为 React 添加客户端页面路由。

设置 React Router

在 src/main.jsx 中，我们将添加以下代码：

mern/client/src/main.jsx

Code Snippet

我们在 router 变量中设置了应用程序页面路由，并使用了 RouterProvider 让用户界面与 URL 保持同步。RouterProvider 有助于实现组件之间的无缝切换。基本上，它只会重新加载或刷新需要更改的组件，而不会刷新或重新加载整个页面。虽然 React Router 并非必须设置，但如果您希望应用能够快速响应，配置它就很重要了。

创建组件

接下来，我们来创建之前在路由中定义的各个组件。在 src 文件夹内创建一个 components 文件夹。对于我们创建的每个组件，我们都将在 components 文件夹内创建一个新的 .js 文件。在本例中，我们将添加 Navbar.jsx、RecordList.jsx 以及 ModifyRecord.jsx。

Code Snippet

下方快照显示了每个文件的外观。

Navbar.jsx

在 navbar.js 组件中，我们将使用以下代码创建一个导航栏，将我们链接到所需的组件。

mern/client/src/components/navbar.jsx

Code Snippet

RecordList.jsx

以下代码将作为查看记录的组件，它将通过 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

以下代码将作为表单组件来创建或更新记录。该组件将向我们的服务器提交 create 命令或 update 命令。

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>
    </>
  );
}

现在，我们将以下内容添加到 src/App.jsx 文件中。

mern/client/src/App.jsx

Code Snippet

这是我们的主要布局组件。我们的 Navbar 将始终位于每个页面的顶部，Outlet 将接受我们之前在 main.jsx 文件的 routes 中定义的子组件。

将前端连接到后端

我们已经完成了组件的创建过程。我们还使用了 fetch（其提供了更直观、更简单的方式来处理 HTTP 请求）将我们的 React 应用连接到后端。在 Record.jsx 中，我们在 onSubmit(e) 代码块后面加上了以下代码。当系统向 URL 发送一条 POST 或 PATCH 请求时，fetch 会向数据库添加一条新记录或更新数据库中的现有记录。

Code Snippet

我们还将在 Record.jsx 中加入以下代码块，放在构造代码块的下方，以便在有现成记录时，加载该记录。

Code Snippet

最后我们来配置 RecordList.jsx。RecordList.jsx 会从数据库中获取记录，因此我们将使用 fetch 的 GET 方法从数据库中获取记录。为此，我们在 RecordList.jsx 中的 RecordList() 函数上方添加了以下几行代码。

Code Snippet

关闭所有文件后，若要启动应用，请按照以下步骤操作：

请确保服务器应用仍在运行。如果该应用未运行，请在 server 目录中执行以下命令来启动它：

Code Snippet

在新终端中，转到 client 目录，然后运行以下命令：

Code Snippet

这是我们通过“创建员工”按钮为“Jesse Hall”、“Kushagra Kesav”和“Stanimira Vlaeva”添加记录后，record 组件登陆页面将呈现的外观。

以下展示了添加员工屏幕：

恭喜您构建完您的第一个 MERN 应用程序。如需了解更多想法和高级概念，请访问我们的开发者中心。如果您有任何问题，请在我们的社区论坛上发帖提问。

开始使用 MongoDB Atlas

免费试用

了解详情