在 MEAN 堆栈中添加 Node 后端

17 Mar 2025 | 4 分钟阅读

在前面的章节中,我们学习了将应用程序与 Node 服务器连接的方法,并介绍了理论部分。在本节中,我们将把应用程序与 Node 后端连接起来。

现在,我们将以以下方式构建一个完全分离的后端

1) 我们可以在一个新文件夹中创建一个新项目。但是我们将在同一个文件夹中进行,这样在文件之间切换更容易,也更容易让我们理解。

Node: Node 代码实际上与我们的 Angular 代码无关。

因此,我们将把它放到一个单独的文件夹中。我们将在源代码文件夹旁边创建一个新文件夹,并将其命名为 backend。这个名称完全取决于我们,可以是任何我们想要的名称。

Adding the Node Backend in MEAN Stack

2) 我们将创建一个单独的 JavaScript 文件,它将成为我们的服务器,因为这对于 Nodejs 来说很重要。与 PHP 不同,我们需要像 Apache 或 Nginx 这样的单独的服务器软件。对于 Nodejs,我们也可以使用 nodejs 创建服务器。这意味着我们自己编写所有内容。我们将在根文件夹中创建这个文件。通过在根文件夹中添加这个文件,我们将更容易执行。

Adding the Node Backend in MEAN Stack

现在,可以使用 Nodejs 执行这个 server.js 文件。

3) 现在,我们将打开一个新的终端,并使用 Node 执行这个 server.js 文件。当我们运行它时,控制台上不会发生任何事情,因为它是一个空文件。因此,我们将编写以下代码来测试 server.js 文件是否正在运行

Adding the Node Backend in MEAN Stack

控制台语句是 Node 的服务器端代码,因此它不会侦听任何请求。我们可以使用 Node 执行任何 JavaScript 文件,但那些试图访问 DOM 中某些内容的文件除外。这背后的原因是 Nodejs 是一个服务器端运行时,没有 DOM。

4) 现在,我们将此文件转换为服务器。首先,我们需要导入一个包,即 Nodejs 提供的 http 包。在 Nodejs 中导入包的语法与之前的不同。在 Nodejs 中,我们需要创建一个变量,并使用 required 关键字导入包,如下所示

Adding the Node Backend in MEAN Stack

我们无法在 package.json 文件中找到这个包,因为这是一个默认的 Nodejs 包,它与系统中的 Nodejs 一起安装。

5) 现在,我们将使用 http 包创建一个新服务器。http 包有一个 createServer() 方法,该方法接受一个请求侦听器作为参数。这是一个函数,它将为每个传入的请求执行,而无需担心此请求的目标路径。

我们在 createServer 函数中传递 ES6 箭头函数。此函数将接收两个参数,即 requestresponse 对象,它们将由 Nodejs 传入。这些对象提供数据和实用程序方法,允许我们处理请求和响应。

Adding the Node Backend in MEAN Stack

在此函数中,我们将对请求执行任何我们想要的操作。

6) 响应是最有趣的,需要理解。响应有 emit、getHeader 和 getHeaders 等方法。end 方法是用于结束写入响应流的方法之一。在此函数中,我们可以添加一些将作为文本发送的内容。

Adding the Node Backend in MEAN Stack

7) 现在,服务器已创建,但尚未激活。我们需要将该服务器存储在一个新的常量中,因为我们不会更改 server 值。我们将调用服务器的 listen() 函数,在此函数中,我们需要传递一个端口号。在开发期间,此端口将为 3000,并按以下方式设置

Adding the Node Backend in MEAN Stack

我们可以使用该端口或托管提供商的默认端口。我们正在托管它,因为此托管提供商通常会为我们提供要在生产中托管应用程序的端口号。

因此,我们将使用 process.env.PORT 访问环境变量,如果未设置,则使用 3000。环境变量是动态注入的变量,它们始终在 process.env 上访问,这是一个 Nodejs 特性。环境变量可以由运行此应用程序的运行时注入。

Adding the Node Backend in MEAN Stack

现在,如果保存它并在 localhost 3000 上运行,我们将看到浏览器如下所示

Adding the Node Backend in MEAN Stack

仅使用 Nodejs 编写所有代码非常困难。为了解决这个困难,我们将添加 Express 后端。因此,在下一节中,我们将学习如何添加 Express 后端。