什么是MERN堆栈，以及如何使用它？

哈Ha！

曾几何时，我们在MEAN堆栈 （Mongo，Express，Angular，Node） 上发布了一个试点项目，该项目通常不会令我们失望，但是，我们决定当时不进行其他打印和更新-与Manning不同，Manning对此书进行了更新 。 尽管如此，我们仍继续朝这个方向进行搜索，今天我们想与您讨论相关的MERN堆栈，React位于客户端而不是Angular。 地板交给蒂姆史密斯 。



警告：本文的所有代码都在这里 。

在这份MERN堆栈指南中，我们将使用React.js，Node.js，Express.js和MongoDB编写一个简单的博客，以扩展我们的全堆栈武器库。

什么是堆栈？

讨论的第一件事也许就是“堆栈”的概念。 有许多不同的堆栈，所有堆栈都是实现同一目标的不同途径。 在创建全栈应用程序时，我们提供了用户将与之交互的客户端部分，并且同一客户端部分将与服务器和数据库进行中介工作-使整个过程尽可能简单和可管理。

我们可以说堆栈是用于解决此问题的一组特定技术。

尽管有很多值得一提的堆栈，但其中有些堆栈比今天的堆栈更受欢迎。 这些流行的堆栈之一称为MEAN，它包括：

• 芒果
• xpress.js
• ngular.js
• ode.js

今天我们将讨论MERN堆栈，它与MEAN非常相似，只是在这里将Angular.js替换为React.js。 因此，我们可以将MongoDB用作数据库，分别将Node.js和Express用于服务器和路由，以及React.js-创建与用户进行交互的客户端部分。

如何使用此堆栈完成开发？

在继续讨论所有细微差别之前，让我们来大致了解一下所有这些元素是如何协同工作的。 就个人而言，我花了一些时间来了解这一点，因为我的背景与PHP有关，其中客户端部分和服务器部分有些混杂。

1.服务器部分（Node和Express.js）和客户端部分（React.js）

首先，您需要了解服务器部分和客户端部分是单独的实体。 客户端部分可以与服务器位于同一存储库中，也可以位于完全不同的存储库中。

2. API终端用于通讯

如果您已经在考虑如何结交客户端和服务器部分的朋友，我将回答：这是通过API完成的。 在服务器上创建一个API（应用程序接口），我们将在其中获得“终端”，位于客户端的应用程序可以通过这些“终端”与服务器进行交互。

让我们用手指解释一下：假设您的左手是服务器端，而右手是客户端。

现在，将您的手折叠并扭曲在一起，就像在晃动自己的手一样。 模板语言就是这样工作的。 它们使您可以简单地显示一些标记以及随服务器转储的数据-并且在其中客户机和服务器组件在很大程度上重叠。

现在打开你的手。 尽可能地张开手指，确保左手和右手仅用指尖触摸。 这就是MERN堆栈的工作方式。 服务器部分提供用于访问服务器的终端（左手的指尖），客户端向其发送呼叫（通过右手的指尖），并通过这些联系点与服务器（左手）交换信息。

我希望它已经变得更清晰了，如果没有，请忘记所有这些隐喻，好像我没有提到它。

我们在Node.js和Express.js的服务器端

尽管我不会在此处提供有关如何构建此堆栈的逐步说明（这是另一篇文章的主题），但我想考虑一下堆栈中通常使用或可以使用的各种元素。 我本人阅读了几本手册，它们讲述了如何配置服务器，但是没有解释为什么将这些特定的库用于此目的。

创建app.js文件后，您将需要安装许多软件包。 以下是我以前在Express.js项目中使用的最常见的软件包-也许它们会为您带来方便。

• Express.js是用于创建Web应用程序的框架。 它具有内置功能，可以解决许多问题，尤其是建立路由。
• Mongoose是一个对象数据管理器（ODM），可在express.js应用程序和MongoDB数据库之间提供互操作性。
• BodyParser是一个库，它允许express.js应用程序读取传入请求的正文（即内容）。
• DotENV-允许您使用扩展名为.env的文件来处理机密数据。
• Passport.js-在我们的应用程序中提供身份验证，并提供几种不同的身份验证方法。
• 验证器 -多种数据类型的简单验证
• bCrypt-加密敏感数据，例如密码
• Nodemon-在情况发生变化时为我们的节点服务器“热重启”； 感谢Nodemon，您无法在进行任何更改后停止或重新启动服务器。

当然，还有许多其他软件包，但是以我的经验，最常使用的是这些库。

因此，在整理出一些最常用的软件包之后，让我们看一下代码。 首先-我们的服务器：



这是一个简单的API服务器。 如您所见，它配备了基本的CRUD功能（创建-读取-更新-删除）-没有什么超自然的。 仔细研究一下，会发现此处使用res.json()为特定URL提供输出数据-即，不使用HTML或其他模板进行输出。 这就是我们通过打开对React.js的数据访问来构建API的方式。

您可能还会注意到，我只是将mongoose指向计算机上安装的自己的mongodb服务器。 为了使这种机制正常工作，必须在计算机上安装MongoDB并使其正常工作。 如果它不起作用，只需打开控制台窗口并输入以下命令：



它将在您的本地计算机上启动MongoDB服务器。 由于所有这些操作都是在本地完成的，因此如果您从存储库中运行代码，您将看不到我的帖子。 我们必须自己编写新内容。 如果您需要内容存根，我建议使用出色的Fillerama.io生成器， 将一些我喜欢的电影和电视节目中的文本切成薄片 。

如果您有兴趣自己测试服务器，则可以使用以下命令启动它：



服务器启动并告诉我们它可以在端口3333上工作以及连接到MongoDB后，您可以打开Postman并在此处测试我们的路由。 至于GET选项，您只需插入路线并单击“发送”即可。 如果是POST，则必须选择“正文”，并填写标题和主要内容的字段。

客户端说明

现在，我们已经配置并启动了服务器，我们可以开始在与用户进行交互的客户端上工作。 客户端将用React.js编写，这可以通过几种不同的方式完成。

首先是将客户端所有必要的库（反应，react-dom，react-router等）简单地添加到我们编写服务器库的同一package.json文件中。 在这个项目中，我只是这样做，但我必须说，我认为此选项不是最佳选择。 我认为随着我们项目的发展，代码库将变得越来越混乱，如果仅使用此方法，那么将来使用它会变得更加复杂。 我之所以在描述的应用程序中选择此路径，恰恰是因为我确定：它不会增长，也不会改变。 本应用程序仅出于演示目的而编写。

第二种也是（我认为）更好的方法是为服务器端创建一个单独的存储库，为客户端创建一个单独的存储库。 和以前一样，我们可以轻松地将客户端部件存储库克隆到我们的项目目录中，而不会出现任何问题，只需确保客户端部件在.gitignore文件中列出即可。 例如，在此应用程序的文件结构中，有一个client目录，所有客户零件代码都位于该目录中。 我们可以将其带到一个完全独立的存储库，然后通过服务器端将以下条目添加到我们存储库的.gitignore文件中：



通过将client文件夹添加到.gitignore文件，我们保证系统不会将该文件夹视为项目中的第二个存储库。 另外，由于服务器部分完全不受影响，因此此方法还有助于重新设计或替换客户端部分的工作。

如何完全设计您的全栈应用程序完全取决于您。 在我看来，如果为客户端和服务器部分保留单独的存储库，则应用程序的结构将更加准确。

我们在React.js上创建一个客户端部分

现在，在了解了项目的组织之后，让我们实际讨论客户端代码。 以下是我在React.js上的应用程序的app.js文件，在这篇文章中我不会为每个组件插入代码，我只留下到存储库的链接并解释每个React组件的作用。

这是我们应用程序主页的屏幕截图，如下所示：



如您所见， app.js绝对没有什么复杂的。 有一个<Router>，您可以在React.js中设置路由，这些路由根据URL显示各种组件。 这是我们的React.js应用程序中将使用的其他组件：

• 页眉 -位于屏幕顶部的导航栏
• 索引 -列出可用的博客条目
• 新建 -用户可以通过其创建新帖子的表单
• 单一 -根据其id显示特定的博客条目
• 编辑 -用户通过其可以更新id查找到的博客条目的表单

我们使用Axios对API终端进行http调用，然后使用React.js根据需要显示数据。 在这篇文章中，我将提供Index.js代码以使它们如何协同工作更加清晰。



在上面的代码中，涉及到一个类组件，使我们可以使用状态和生命周期方法。 这是必需的，因为必须在componentDidMount()生命周期方法中进行Axios调用。 应该注意的是，在尝试对本地API进行调用时遇到了CORS错误。 为了解决此问题，我在Express服务器中的server.js文件中添加了几个标头-并且可以正常工作。 该代码在server.js文件的注释中注明。

让我们确保搜索机器人能够正常阅读我们的React.js应用。

四舍五入，我想简单地谈一谈渲染。 如果您启动我们的网站并直接转到一些博客文章，则内容的显示可能会出现问题。 在这种情况下，浏览网站不仅会给用户带来不便，还会给搜索引擎编入索引的内容带来不便。 要变通解决此问题，我建议使用Gatsby js或Next js之类的工具。 这两种解决方案互不相同，但都可以派上用场，具体取决于您的实际需求。

Gatsby js是一个静态网站生成器。 您可以在React.js上编写一个站点，然后Gatsby将在构建过程中将其转换为静态文件，这将使该站点超快。 Gatsby附带了许多有用的插件，使该工具几乎通用。 顺便说一下，我的网站是使用Gatsby.js建立的！ 由于静态文件是在组装期间创建的，因此，只要原始内容发生更改，都需要重建站点。

接下来 ， Next.js是用于显示React.js站点的服务器组件。 它内置了许多有用的功能，特别是路由，代码拆分，设计的组件等等。 服务器渲染意味着将像在服务器上一样自动更新数据，但是在浏览器窗口中显示之前，将进行渲染阶段。 这就是为什么向用户显示数据应该没有任何问题的原因，搜索机器人也可以毫无问题地完成工作。

这类解决方案还有很多，但是我对这两种解决方案的了解最多，在进行此项目时，我使用了它们。 两者都有很好的文档记录，因此可以轻松地快速处理它们并开始业务。

关于MERN堆栈的最终想法

希望本文能帮助您更准确地了解MERN堆栈的工作方式。 在其中，我们仅采用MongoDB，Express.js和Node.js并从它们创建一个已经提供API终端的服务器，通过该终端我们的React.js应用程序可以访问数据。 因此，您现在已经了解很多，现在该是做伟大的事情的时候了！