富文本语言/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

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

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

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

。此文件夹将包含我们的客户端和服务器文件夹。

接下来，为后端创建一个文件夹，将其命名为“server”。然后，我们将使用 npm init 对 

（打包 JavaScript 代码以供重用的官方标准格式），我们将在 

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

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

在确保依赖项安装成功后，我们会创建一个名为 

在这个文件中，我们会导入要使用的 

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

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

找到连接字符串后，返回 server 目录，然后创建 config.env 文件。在该文件中，将连接字符串赋值给新的 

 变量。完成后，您的文件应如下所示。用您的数据库用户名、密码、集群名称和项目 ID 替换 

 的文件夹，然后在文件夹中创建一个名为 

 的文件。在该文件中，我们可以添加以下代码来连接我们的数据库：

数据库和服务器已经配置完毕。现在轮到 API 端点了。让我们先来创建一个 

。返回您的“server”目录，然后创建新的目录和文件：

 文件中还将包含以下几行代码：

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

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

对于前端，我们将使用现代的 React 应用程序创建方法 

 目录下的新终端中，我们来进行如下设置：

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

 文件中，我们需要添加 Tailwind 指令，并删除所有其他指令。

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

 变量中设置了应用程序页面路由，并使用了 

 有助于实现组件之间的无缝切换。基本上，它只会重新加载或刷新需要更改的组件，而不会刷新或重新加载整个页面。虽然 React Router 并非必须设置，但如果您希望应用能够快速响应，配置它就很重要了。

接下来，我们来创建之前在路由中定义的各个组件。在 

 文件夹。对于我们创建的每个组件，我们都将在 

 文件。在本例中，我们将添加 

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

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

以下代码将作为查看记录的组件，它将通过 GET 方法获取我们数据库中的所有记录。

mern/client/src/components/RecordList.jsx

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

这是我们的主要布局组件。我们的 

我们已经完成了组件的创建过程。我们还使用了 

（其提供了更直观、更简单的方式来处理 HTTP 请求）将我们的 React 应用连接到后端。在 

 代码块后面加上了以下代码。当系统向 URL 发送一条 POST 或 PATCH 请求时，

 会向数据库添加一条新记录或更新数据库中的现有记录。

 中加入以下代码块，放在构造代码块的下方，以便在有现成记录时，加载该记录。

 会从数据库中获取记录，因此我们将使用 

 方法从数据库中获取记录。为此，我们在 

 函数上方添加了以下几行代码。

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

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

恭喜您构建完您的第一个 MERN 应用程序。如需了解更多想法和高级概念，请访问我们的

。如果您有任何问题，请在我们的

Rich text2 languages/mern-stack-tutorial

开始使用 MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

MongoDB 8.0 隆重推出，这是有史以来最快的MongoDB！了解详情 &gt;

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

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

MERN 堆栈使用全指南

开始使用 MongoDB Atlas