MERN Stack 终极指南

2025-05-27

MERN Stack 终极指南

现代网络

与十年前相比，网站已经发生了巨大的变化。我们最初只是基于纯 HTML 和 CSS 的网站。后来 JavaScript 的出现彻底改变了 Web 的运作方式。从那时起，Web 技术取得了长足的进步，这要归功于 JavaScript 框架，这些框架使得单页应用程序（SPA）成为现实。如今，我们可以构建只需从服务器获取一次代码文件的网站，即使在访问其他页面时也无需重新加载。这是如何实现的呢？

如果您曾经想过成为一名全栈 Web 开发人员，那么您很可能听说过“MERN Stack”这个术语。不过，如果您还没有听说过，也不用担心。

  • 它是什么？
  • 它代表什么
  • 如何成为 MERN 堆栈开发人员？

我来揭开它的神秘面纱，并向您介绍最流行的 Web 开发技术栈之一，同时为您提供合适的路线图和相关资源。心动了吗？让我们深入探讨，从理解核心概念开始。

目录

MERN 堆栈是什么

MERN 技术栈是一个 Web 开发技术栈，由 MongoDB、ExpressJS、ReactJS 和 NodeJS 组成，让您能够使用JavaScript这一编程语言构建功能丰富的单页 Web 应用程序。一些开发者认为这是 MERN 技术栈如此受欢迎的关键原因之一。您可以利用自己对一门语言的熟练掌握来管理 Web 应用程序的前端和后端。

现在我们已经对 MERN 堆栈有了基本的了解，让我们深入了解它所包含的技术，从 MongoDB 开始。

MongoDB

MongoDB横幅

MongoDB是一个 NoSQL 数据库，其数据存储在由键值对组成的文档中，与 JSON 或 JavaScript 对象表示法有很多相似之处。哇，哇，太多专业术语了？别担心！让我们把上面的句子分解成几个小部分。

我先从 SQL 与 NoSQL 的比较开始。在 SQL 数据库中，数据存储在表中。表只是通过行和列以表格形式呈现的数据集合。是时候来点视觉呈现了！

MongoDB 中存储的数据如下所示：

{
    _id: ObjectId("5fdf7cd797334f00175e956c")
    name: "Nitin Ranganath"
    email: "nitinranganath@gmail.com"
    password: "itsasecret!"
    createdAt: 2020-12-20T16:33:27.667+00:00
    updatedAt: 2021-01-01T08:06:15.269+00:00
    __v: 0
}
Enter fullscreen mode Exit fullscreen mode

以下是 MySQL（基于 SQL 的数据库）中存储的数据：

| id |    name    |            email            |  password   |
|  1 |    Nitin   |   nitinranganath@gmail.com  | itsasecret! |
Enter fullscreen mode Exit fullscreen mode

MongoDB 在很多方面都非常出色，是您未来项目的绝佳选择。例如：

  • 通过索引实现高性能
  • 模型的动态模式
  • 通过在多台服务器上分布数据实现高可扩展性
  • 能够通过 GeoJSON 存储地理空间数据
  • 自动复制

还有更多！

好吧，但我们究竟该如何使用 MongoDB 将数据存储在 MERN 堆栈 Web 应用程序中呢？虽然我们可以使用mongodbnpm 包，但使用 ODM 或对象数据建模库（例如）会更方便mongoose。

如果我要准备一份关于构建全栈 Web 应用程序所需的 MongoDB 知识清单，它将包括：

  • 设置本地 MongoDB 或云 MongoDB Atlas 数据库
  • 创建模型和模式
  • 对数据库执行 CRUD（创建、读取、更新和删除）操作

加分项：

  • ref使用s链接两个相关模型
  • 了解 Mongoosepre和postHooks
  • Mongoose 数据验证

ExpressJS

快递横幅

接下来讨论ExpressJS，我们首先尝试了解它到底是什么，我们为什么要使用它，以及我们是否需要它（剧透一下，其实不需要！）。Express 是最流行的基于 NodeJS 的 Web 应用框架。在 MERN 堆栈应用程序中，Express 的作用是管理我们的后端 API 服务器，我们将通过该服务器通过 React 前端从数据库获取数据。

Express 用于监听服务器的特定端口，以接收来自用户（或者更简单地说是前端）的请求。我们可以为用户访问的每个端点创建不同的路由。以下示例可以更清楚地说明我的意思：

GET https://ourwebsite.com/products     -> Fetches all products
GET https://ourwebsite.com/products/1   -> Fetches the product with ID of 1
Enter fullscreen mode Exit fullscreen mode

作为程序员，我们设计和构建路由，以便从正确的端点获取合适的数据。Express 可以让我们快速做到这一点。还记得我说过 Express 并非必需吗？那是因为我们可以使用httpNodeJS 提供的核心模块来创建我上面提到的路由。那么，我们为什么不使用它呢？因为 Express 可以大大提升整个开发者体验。

// Using http
const http = require('http');
http.createServer((req, res) => {
    if (req.url === '/products' && req.method === 'GET') {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(products));
    }
}).listen(5000, console.log('Server running on port 5000'));

// Using express
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.json(products);
})

app.listen(5000, console.log('Server running on port 5000'))
Enter fullscreen mode Exit fullscreen mode

这只是一个例子，而且相当简单。Express 代码的读写都更加简洁。现在，作为 MERN 栈开发者，你应该学习一些关于 Express 的知识：

  • 设置快速服务器并监听所需端口
  • 通过 GET、POST、PUT 和 DELETE 创建数据 CRUD 操作的路由/端点
  • 通过 express.json() 中间件读取从前端发送的 JSON 表单数据
  • 使用 Express 设置像 Mongoose 这样的 ODM

加分项：

  • 将逻辑分离到不同的文件中，例如控制器、路由和模型
  • 创建自定义中间件来处理错误等

ReactJS

ReactJS 横幅

如果您想成为前端或全栈 Web 开发者，您很可能听说过React、Vue或Angular等 JavaScript 框架。现在，让我们先来了解一下 React：它无疑是最流行的 JavaScript 前端库。我们将简要介绍 Vue 和 Angular，并讨论 MEVN 和 MEAN 堆栈。不过，现在我们先来深入了解一下 React。

如上所述，它是 Facebook 创建的一个库，使我们能够高效地在网站上开发动态交互式用户界面。它在我们的 Web 应用程序中使用 props（属性的缩写）和状态提供动态界面。此外，它使我们能够将代码分解成更小的块（称为组件），从而使其更加灵活。组件可以在 Web 应用程序中的多个位置导入和使用，从而节省我们的时间和精力，避免因细微更改而重写代码，并保持代码库的 DRY（不要重复自己）。

成分

React 的一大优势在于，你可以用它来创建单页应用（SPA）。SPA 的独特之处在于，我们只需加载一次所有静态资源（例如 HTML、CSS 和 JavaScript），而传统网站则需要每次访问新页面时重新加载并获取新资源。对于路由来说，SPAreact-router-dom是最流行的实现方式之一。简而言之，只需加载一次，即可访问整个网站，无需重新加载，除非你手动重新加载，真是太棒了！

我们可以另写一篇文章来讨论 React 以及它为何如此优秀。由于本文主要概述了 MERN 技术栈，而不仅仅是 React，因此我将列出一些 React 的特性，这些特性在开发 Web 应用时会用到，并且你绝对应该学习：

  • 创建适当的组件并使用道具
  • 编写功能性 React 代码
  • 常用的React hooks比如useStateuseEffect
  • useState通过钩子管理组件中的道具
  • 条件渲染
  • 通过钩子进行 API 调用useEffect以从后端获取数据
  • 控制表单输入并处理表单提交

此外，你还可以通过以下方式提高你的React 技能：

  • 通过 Context API 或 Redux 管理全局状态
  • 学习不太常见的 React hooks 的用例useRef，例如useMemo、等等
  • 在 JS 方法中使用 styled-components 或其他 CSS

NodeJS

NodeJS 横幅

最后，我们通过探索NodeJS来完成对 MERN 堆栈构成技术的概述。首先，什么是 NodeJS？它与 JavaScript 有何不同？它们完全不同吗？我们为什么要使用它？我们不能用 JavaScript 代替吗？我将在接下来的段落中尝试回答所有这些常见问题。但首先，让我们看看什么是 NodeJS。

NodeJS 是一个跨平台的 JavaScript 运行时环境，它使用 Google 的 V8 引擎在浏览器之外运行 JavaScript 代码。JavaScript 旨在在浏览器上运行，但我们的后端并没有浏览器，不是吗？这正是 NodeJS 的闪光点。它使我们能够编写可在后端服务器上运行的 JavaScript。但它是如何实现这一点的呢？它使用了所谓的 V8 引擎和 libuv，这又是另一个话题了。以下是 NodeJS 架构的简要示意图：

NodeJS 架构

如果您有兴趣了解有关 NodeJS 内部工作原理的更多信息，例如事件循环等，这里有一个很棒的视频可以帮助您入门。

回到 MERN 堆栈，NodeJS 的目的很简单。它允许我们用 JavaScript 编写后端，省去了学习一门能够运行后端的新编程语言的麻烦。此外，它是一种事件驱动的非阻塞 I/O 模型。虽然构建 MERN 堆栈应用程序不需要学习太多 NodeJS 相关的知识，但以下是一些您应该了解的相关内容：

  • 初始化 npm 包
  • npm通过或安装 npm 包yarn
  • 使用 commonJS 导入和导出模块
  • 了解package.json文件

加分项：

  • fs使用内置包访问文件系统
  • 使用内置包设置服务器http（如果使用 express 则不需要）

结合技术并探索其如何协同工作

工作原理横幅

在上一节中，我们了解了构成 MERN 堆栈的四种技术。虽然每种技术单独使用都非常出色，但将这些技术精准地组合在一起，才能打造出一个优秀的 Web 应用程序。这正是我们本节要学习的内容。了解每种技术只是技能的一半，而另一半则是将它们拼凑成一个有意义的东西。还有什么比用另一种可视化的方式呈现一个 MERN 堆栈 Web 应用程序更棒呢？在这个应用程序中，用户与前端交互，前端又访问后端和数据库。

框图

让我们通过一个例子来理解整个机制。假设我们构建了一个很棒的服装电商 Web 应用。有一位客户正在访问我们的网站，想购买运动鞋。落地页上有一个链接，可以将用户引导到运动鞋页面。那么，我们如何从后端获取数据呢？让我们一步一步来。

  1. 用户访问我们使用 React 构建的网站登录页面。
  2. 用户点击链接购买运动鞋。由于我们构建的是单页面应用，因此无需重新加载页面即可渲染运动鞋页面。
  3. 目前我们还没有运动鞋数据，即状态为空。因此，我们向后端发出 API 调用来获取数据。
  4. 由于从我们的数据库获取数据的过程是异步的，这意味着它需要一些时间才能完成执行，因此我们在检索运动鞋数据时向用户显示加载 GIF。
  5. 在我们的后端，ExpressJS 查看我们命中的端点（路由）并执行适当的控制器功能，用于检索运动鞋数据。
  6. 在这个控制器函数中，我们用它mongoose来查询数据库并获取数据，并以 JSON（JavaScript 对象表示法）的形式返回它。
  7. 此 JSON 数据被发送回我们的 React 前端，我们可以在那里使用新获取的数据更新状态。
  8. 由于我们的状态已更新，React 将重新渲染依赖于它的组件，随后，我们用运动鞋信息替换加载 GIF。

这就是所有技术协同工作的原理。如果您还没有完全理解，也不用担心。由于这种机制非常常用，您最终会理解并掌握它。现在让我们讨论一些我们尚未涉及的内容，例如身份验证、授权和状态管理。

验证

如今，大多数网站都允许您通过注册和登录程序为自己创建用户帐户。我们希望自己的 Web 应用程序也具备此功能，不是吗？即使是最简单的应用程序（例如待办事项列表），如果我们能够将每个待办事项与创建它的用户关联起来，也会变得非常有趣。那么，我们如何验证用户身份呢？

在注册网站时，我们实际上是创建一个包含邮箱和密码字段的用户，并将其存储到数据库中。但这里有一个问题。出于安全考虑，将用户密码以明文或原样存储是一种不好的做法。为了解决这个问题，我们可以使用一些强大的哈希算法对用户密码进行哈希处理，以确保其安全。我使用bcryptjsnpm 中的包来实现此目的。

另一个选择是使用 OAuth，例如 Google OAuth，让用户使用其 Google 帐户注册到我们的网站。这省去了我们手动处理所有安全措施的麻烦，但由于需要谨慎处理 OAuth 的 API 密钥，增加了项目的复杂性。

授权

简单来说，授权就是将某些路由限制给特定类型的用户。例如，我们不希望未登录的用户下订单，因为我们需要将用户与每个订单绑定。同样，我们也不希望任何随机用户删除他人的账户。此类功能应该仅限于管理员使用。这就是我们需要授权的原因。

我们可以使用一些条件来限制对后端 API 的访问，以防止授权过程中的滥用。实现授权的最常用方法之一是使用 JSON Web Tokens（简称 JWT）。每当用户注册或登录时，我们都会向用户返回一个令牌。在以后的 API 调用中，将此令牌传递到标头中，我们可以通过在有效负载中编码用户 ID 来唯一地标识用户。这可以帮助我们检查用户是否已登录、是否是管理员，以及哪个用户正在访问路由。

状态管理

随着网站规模的增长，管理全局状态会变得棘手。登录的用户就是一个全局状态的例子。为什么？因为这些信息或状态可能在多个组件中都需要，例如导航栏、个人资料卡片等等。由于我们需要在所有使用共享状态的组件中保持一致，因此保留组件级状态useState并不可行。

另一种解决方案可能是将状态存储在最顶层组件中，并将其作为 props 传递给其他需要它的组件。即使这种方法也不推荐，因为您可能需要将状态作为 props 传递给多个组件和多个层级，甚至传递给那些不需要状态的组件，以便将状态从顶层组件传递到底层组件。

这就是为什么我们可以使用 Context API 或 Redux 来维护一个全局状态存储，这样我们就可以在所需的所有组件中访问状态，而无需将其作为 props 传递。虽然有些人认为自从 Context API 出现以来 Redux 就不再需要了，但我仍然发现很多代码库都在使用它，学习它或许是个好主意。

如何成为 MERN Stack 开发人员？

呼！这可真是让人费解。不过好处是，你完全不需要死记硬背。开发人员是边做边学，而不是死记硬背！说到这里，你肯定想知道如何成为一名 MERN 栈开发者。这将是本节的重点，我将为你提供我自己的路线图，无论你是 Web 开发新手，还是刚刚开始探索其他技术栈，你都可以从中获得灵感，开启你的 MERN 之旅。

Web 开发新手：

如果您是 Web 开发新手，甚至编程新手，我强烈建议您预留充足的时间，先学习基础知识。这包括 Web 的工作原理、HTML、CSS 和 JavaScript。一旦您能够熟练地使用它们构建静态网站，就可以选择学习像 React 这样的 JavaScript 框架，或者使用 NodeJS 探索后端开发。选择哪种方式取决于您自己，但最终，您都需要学习这两种方式。一个提升技能的绝佳方法是为初学者制作 JavaScript 项目。

我推荐的学习路径是：

初学者路线图

因此，我们将从基础知识开始，了解 Web 并深入研究前端世界，从 HTML、CSS 和 JavaScript 开始，以便您可以构建一些很棒的静态网站，例如具有响应式设计的登录页面。使用 Git 这样的版本控制系统至关重要，因为您将来会经常使用它。猜猜怎么着？您已经足够优秀，可以找一些自由职业了。

在编写后端代码之前，您应该了解 HTTP 以及 HTTP 方法（例如 GET 和 POST）。对于 MERN 堆栈，您将结合使用 NodeJS 和 ExpressJS 来布局后端。要与 MongoDB 数据库交互，您可以使用 mongoose。掌握一些身份验证和授权技能后，您就可以构建一个全栈 Web 应用程序了。

最后，我们回到前端，开始学习 React。它是一个框架（严格来说，是一个库），它将提升你的网站和开发者体验。你可以想象自己能够构建社交网络 Web 应用、电商 Web 应用，以及几乎任何你想要的 Web 应用，这一切都离不开你目前所学的知识。太令人兴奋了！

经验丰富的开发人员切换技术栈：

虽然路线图对于经验丰富的开发人员来说也是一样的，但您可以跳过 HTML、CSS 和 JavaScript 部分。您可能已经熟悉这些内容，并专注于深入理解 NodeJS 的工作原理。由于您之前对其他技术栈的了解，我相信您很快就能适应 NodeJS。仔细思考如何更好地构建您的 Web 应用架构、进行优化并编写简洁的代码，绝对会让您比其他人更具优势。

资源和工具

温馨提示：你当然不需要观看所有这些资源。选择你喜欢的资源，然后继续观看。我犯的一个错误就是因为害怕错过而不断在多个资源之间切换。相信我，你不会有任何问题。所有这些资源都很棒，而且都同样优秀。你不必只从这个列表中选择。快速在 YouTube 或 Google 上搜索一下也可以。

免费课程

FreeCodeCamp YouTube频道

HTML、CSS 和 JavaScript：

Brad Traversy 的 HTML 和 CSS 播放列表- 速成课程和大量精彩项目。

12HR+ YouTube 编码训练营 2021！作者：Ania Kubow - 在一个视频中学习 HTML、CSS 和 JavaScript。

The Net Ninja 的 HTML 和 CSS 播放列表- 字节大小的视频可以保持您的兴趣。

Brad Traversy 的 Vanilla JavaScript 播放列表- 通过大量项目巩固您的 JavaScript 知识。

The Net Ninja 的现代 JavaScript 播放列表- 学习现代 JavaScript，包括 ES6

Colt Steele 的《JavaScript 初学者课程 (2020)》 ——几个小时内即可开始使用 JavaScript。

NodeJS、ExpressJS 和 MongoDB：

Brad Traversy 的 NodeJS 播放列表- NodeJS 资源的瑰宝

Dev Ed 的 NodeJS 速成课程- 让学习 NodeJS 变得有趣

使用 Express 和 MongoDB 构建 RESTful API（作者：Dev Ed） ——学习构建 REST API

Dev Ed 的 NodeJS JWT 身份验证- 探索身份验证和授权

Academind 的 MongoDB 简介- 熟悉 MongoDB

Codedamn 的 MongoDB + Mongoose + Node.js 速成课程- 一小时内自学后端

React 和 Redux：

The Net Ninja 的现代 React 播放列表- 字节大小，最新的 React 教程

Web Dev Simplified 的 React Hooks 播放列表- 通过一个播放列表了解有关 React Hooks 的所有内容

Codedamn 的 React Crash Course 2020 - 通过构建大型项目来理解 React

Traversy Media 的 React 项目播放列表- 构建出色的 React 项目

Redux for Beginners for Dev Ed - 以有趣的方式了解 Redux

Stephen Grider 的 Redux 解释- Redux 的最佳解释之一

要使用的工具

Visual Studio Code - 免费、开源且最好的文本编辑器之一

Figma - 协作界面设计工具

GitHub Desktop - GitHub 的桌面客户端

Google Lighthouse - 测试您网站的性能和 SEO

React 开发者工具- 用于测试 React 网站的 Chrome 扩展程序

Redux DevTools - 用于测试 Redux 的 Chrome 扩展程序

JSON Viewer - Chrome 扩展程序，用于以更易读的方式显示 JSON

WhatRuns - 检查你最喜欢的网站使用的技术栈

Postman - 测试你的 API

设计资源

开发人员的设计资源- 一个包含大量设计资源的仓库

Coolors - 轻松生成配色方案

Grabient - 超棒的渐变色

Google Fonts - 可在您的网站中使用的字体

FontAwesome - 图标字体集合

让我们看看替代方案

在编程方面，有很多方法可以实现相同的结果。Web 开发也不例外。让我们来看看 MERN 堆栈的一些流行替代方案。

MEVN 堆栈

MEVN 堆栈在前端使用 Vue 而非 React。VueJS 是一个开源 JavaScript 框架，在 GitHub 上拥有超过 17.5 万颗星，无疑是一个热门选择。它被认为比 React 更容易学习，但在 Vue 开发人员的就业机会方面略逊一筹。然而，该框架本身非常出色，值得一试。与 React 和 Angular 不同，它没有任何公司支持。

MEAN 堆栈

说到 Angular，它也是一个使用 TypeScript 而非 JavaScript 来构建 Web 应用程序的前端框架。与 React 和 Vue 相比，它可以说是最难学的，但也被许多企业使用。它由 Google 开发，专注于高性能和 MVC 架构。

最后的话

成为一名开发者并非易事。各种新进展、框架和技术层出不穷，保持与时俱进并非易事。不要沉迷于“闪亮物体综合症”，要相信这个过程。允许自己花时间去尝试，去犯错。我们都能从中学习。希望本指南能帮助您入门 MERN 技术栈。祝您好运！

文章来源：https://dev.to/itsnitinr/the-ultimate-guide-to-mern-stack-1051
Devto 翻译
PREV
作为 React 开发人员，你需要尝试这 10 个 NPM 包
NEXT
学习 .NET Core