构建 Express Hello World 应用程序

摘要：在本教程中，您将了解 Express Web 框架以及如何构建 Express Hello World 应用程序。

Express 简介

Express 是一个快速、无观点且最小的 Node.js Web 框架。Express 提供了一套适合构建 Web 应用程序的功能。

使用 Express，您可以

• 构建 Web 应用程序，包括单页面和多页面应用程序。
• 构建 API 服务器。

Express 的优势

• 简单性：Express 通过提供极简主义的方法来帮助您简化构建 Web 服务器和 API 的过程。
• 灵活性：Express 是无观点的，这意味着您可以根据需要构建应用程序。
• 活跃的社区和生态系统：Express 拥有丰富的文档和第三方库，可以帮助您更轻松、更快地开发 Web 应用程序。

创建 Express Hello World 应用程序

步骤 1. 打开您的终端或命令提示符，并创建一个名为 express-server 的新项目目录。

mkdir express-server
cd express-serverCode language: plaintext (plaintext)

步骤 2. 在您的项目目录中运行 npm init --yes 命令以初始化一个新的 Node.js 项目

npm init --yesCode language: plaintext (plaintext)

此命令将创建一个 package.json 文件，您可以在其中管理依赖项和脚本。

步骤 3. 通过运行以下 npm install 命令安装 express 包

npm install express

步骤 4. 在 package.json 文件中将 type 键的值设置为 "module" 以指示 Node.js 使用 ES 模块

  "type": "module",Code language: JSON / JSON with Comments (json)

此外，将 package.json 文件中的 scripts 部分更改为以下内容

  "scripts": {
    "start": "node --watch index.js"
  },Code language: JSON / JSON with Comments (json)

当您运行命令 npm start 时，它将执行 node --watch index.js 命令。--watch 标志将在您更改源代码时重新启动服务器。

如果您没有添加 --watch 标志，则必须在每次更改代码后重新启动服务器。

请注意，--watch 标志在 Node.js 19 或更高版本中可用。

步骤 5. 创建一个包含以下代码的 index.js 文件

import express from 'express';

const app = express();

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});Code language: JavaScript (javascript)

步骤 6. 打开终端并运行服务器

npm startCode language: plaintext (plaintext)

它将在终端上显示以下消息

Server is listening on port 3000

这意味着服务器正在运行并在端口 3000 上监听。如果您在 Web 浏览器上启动页面 http://localhost:3000/，您将在屏幕上看到 Hello, World! 消息。

Express 应用程序的工作原理

首先，从 express 库导入 express 函数

import express from 'express';Code language: JavaScript (javascript)

express 是一个返回 Express 应用程序实例的函数。

接下来，调用 express() 函数以获取 Express 应用程序的实例

const app = express();  Code language: JavaScript (javascript)

然后，定义一个 PORT 常量，用于存储服务器监听的端口号

const PORT = 3000;Code language: JavaScript (javascript)

之后，定义一个路由处理程序，用于处理对站点路由 / 的 HTTP GET 请求

app.get('/', (req, res) => {
    res.send('Hi there');
});Code language: JavaScript (javascript)

get() 方法有两个参数

• 第一个参数是 路由 /。
• 第二个参数是一个带有两个参数的回调函数：req 和 res。req 和 res 分别代表 request 和 response。此回调函数称为 路由处理程序。

req 代表 HTTP 请求，res 描述 HTTP 响应。它们分别是 Request 和 Response 类的实例。这些对象具有许多有用的属性和方法，用于处理 HTTP 请求和响应。

在本例中，我们调用 HTTP 响应对象的 send() 方法以返回一个简单的文本。

最后，指示应用程序在端口 3000 上监听请求

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});Code language: JavaScript (javascript)

从 Express 应用程序返回 JSON 到客户端

以下显示了如何将 JSON 返回给客户端

import express from 'express';

const app = express();

const PORT = 3000;

app.get('/', (req, res) => {
  res.send({ message: 'Hello, World!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Code language: JavaScript (javascript)

在这段代码中，我们调用 send() 函数将 JSON 数据返回给客户端

res.send({ message: 'Hello, World!' });Code language: JavaScript (javascript)

如果您在 Web 浏览器上打开 URL http://localhost:3000/，您将看到 JSON 而不是简单的文本。

{
  "message": "Hi there"
}Code language: JSON / JSON with Comments (json)

添加环境变量

Node.js v20.6.0 或更高版本支持 .env 文件，通过 process 核心模块配置环境变量。

process 核心模块具有 env 属性，该属性存储所有环境变量。Node.js 自动导入 process 模块，因此您无需在使用之前导入它。

步骤 1. 在项目目录中创建一个新的 .env 文件，并将 PORT 变量设置为 3000

PORT=3000Code language: plaintext (plaintext)

在应用程序中，您可以使用 proccess 模块访问 PORT 变量，如下所示

process.env.PORTCode language: plaintext (plaintext)

步骤 2. 修改 index.js 文件以使用 PORT 变量

import express from 'express';

const app = express();

const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.status(200).send({ message: 'Hello, World!' });
});

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});
Code language: JavaScript (javascript)

工作原理。

首先，定义 PORT 变量，并将 process.env.PORT 赋值给它。如果 PORT 环境变量不可用，则 PORT 变量将默认为 3000

const PORT = process.env.PORT || 3000;Code language: JavaScript (javascript)

其次，在 listen() 方法中使用 PORT

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});Code language: JavaScript (javascript)

您将在终端中看到相同的消息

Server is listening on port 3000Code language: plaintext (plaintext)

在 VS 代码上使用 REST 客户端

如果您使用 VS Code，您可以使用 REST 客户端 扩展来发出 HTTP 请求并直接在编辑器中查看响应。

步骤 1. 安装 REST 客户端扩展。

步骤 2. 在项目目录中创建一个名为 api.http 的新文件。

步骤 3. 添加以下代码以发出对 http://localhost:3000/ 的 HTTP GET 请求

GET http://localhost:3000/
Content-Type: application/jsonCode language: HTTP (http)

步骤 4. 点击发送请求以发出 HTTP 请求。

步骤 5. 查看 HTTP 响应

除了 REST 客户端工具之外，您还可以使用其他 REST 客户端工具（如 Postman）来发出 HTTP 请求。

下载 Express Hello World 应用程序

步骤 1. 下载 Express Hello World 应用程序

下载项目源代码

步骤 2. 将其解压缩到一个目录中，例如 express-server

步骤 3. 打开您的终端或命令提示符，并运行 npm install 命令以安装依赖项

npm install

步骤 4. 运行 npm start 以运行 Express 应用程序

npm start

总结

• Express 是一个灵活的 Web 应用程序框架，用于构建 Web 应用程序和 API。
• 使用 REST 客户端 扩展直接在 VS Code 中发出 HTTP 请求并查看 HTTP 响应。
• 使用 process.env 访问环境变量。