Node.js Express 框架入门与环境搭建

一、Node.js 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它让 JavaScript 能够在服务器端运行，从而打破了 JavaScript 只能在浏览器中运行的限制。Node.js 使用事件驱动、非阻塞 I/O 模型，这种设计使得它轻量且高效，特别适合构建网络应用，尤其是 I/O 密集型的应用程序。

例如，传统的服务器端语言（如 PHP、Java）在处理大量并发请求时，可能需要为每个请求分配一个新的线程，这样在高并发情况下，线程创建和管理的开销会变得非常大。而 Node.js 通过事件驱动和非阻塞 I/O 模型，一个线程就可以处理大量的并发请求，大大提高了服务器的性能和效率。

二、安装 Node.js

在开始使用 Node.js Express 框架之前，首先需要在本地环境安装 Node.js。安装过程非常简单，具体步骤如下：

1. 下载安装包：访问 Node.js 官方网站（https://nodejs.org/），在下载页面可以看到长期支持（LTS）版本和最新版本。对于大多数开发者，建议下载 LTS 版本，因为它更稳定。根据你的操作系统下载对应的安装包，如 Windows 下的 .msi 文件，Mac 下的 .pkg 文件。
2. 运行安装程序：双击下载好的安装包，按照安装向导的提示进行安装。在安装过程中，可以选择 Node.js 的安装路径等选项。一般情况下，保持默认设置即可顺利完成安装。
3. 验证安装：安装完成后，打开命令行工具（Windows 下为命令提示符或 PowerShell，Mac 下为终端），输入 node -v 命令，如果输出版本号（如 v14.17.0），则说明 Node.js 安装成功。同样，输入 npm -v 可以验证 npm（Node Package Manager）是否安装成功，npm 是 Node.js 的包管理工具，用于安装、管理和共享 Node.js 模块。

三、Express 框架概述

Express 是 Node.js 中最流行的 web 应用框架，它提供了一系列强大的功能，帮助开发者快速搭建 web 应用和 API。Express 框架具有以下特点：

1. 简单灵活：Express 框架设计简洁，开发者可以根据自己的需求灵活地添加功能。例如，只需要几行代码就可以搭建一个简单的 HTTP 服务器。
2. 中间件支持：这是 Express 框架的核心特性之一。中间件是一个函数，它可以访问请求对象（req）、响应对象（res）以及应用程序的请求 - 响应循环中的下一个中间件。通过使用中间件，开发者可以实现诸如日志记录、错误处理、身份验证等功能。
3. 路由系统：Express 提供了强大的路由系统，允许开发者根据不同的 HTTP 方法（GET、POST、PUT、DELETE 等）和 URL 路径来定义不同的处理函数。这使得构建 RESTful API 变得非常容易。

四、搭建 Express 开发环境

1. 创建项目目录：首先，在你的本地磁盘上创建一个新的目录，用于存放你的 Express 项目。例如，在命令行中输入 mkdir my - express - app，然后进入该目录 cd my - express - app。
2. 初始化项目：在项目目录中，运行 npm init -y 命令。这个命令会使用默认设置在项目目录中创建一个 package.json 文件。package.json 文件用于管理项目的依赖关系和一些元数据，如项目名称、版本、作者等。
3. 安装 Express：运行 npm install express 命令来安装 Express 框架。npm 会从 npm 仓库下载 Express 及其所有依赖项，并将它们安装到项目目录下的 node_modules 目录中。在 package.json 文件中，会自动添加 express 作为项目的依赖项。

五、第一个 Express 应用

1. 创建入口文件：在项目目录中创建一个名为 app.js（通常约定俗成，但也可以是其他名称）的文件，这将是我们 Express 应用的入口文件。
2. 编写代码：在 app.js 文件中编写以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 定义一个简单的路由
app.get('/', (req, res) => {
    res.send('Hello, World!');
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在上述代码中： - 第一行使用 require 语句引入了 Express 模块。 - 第二行通过调用 express() 函数创建了一个 Express 应用实例。 - 第三行定义了应用将监听的端口号为 3000。 - 使用 app.get 方法定义了一个路由，当客户端通过 GET 方法访问根路径（/）时，服务器会返回 Hello, World!。 - 最后，通过 app.listen 方法启动服务器，并在控制台打印出服务器运行的端口号。 3. 运行应用：在命令行中，确保当前目录是项目目录，然后运行 node app.js 命令。如果一切顺利，你会在控制台看到 Server running on port 3000 的输出。此时，打开浏览器，访问 http://localhost:3000，就可以看到 Hello, World! 的页面。

六、Express 路由详解

1. 基本路由：Express 中的路由定义基于 HTTP 方法和 URL 路径。除了前面示例中的 app.get（用于处理 GET 请求），还有 app.post（处理 POST 请求）、app.put（处理 PUT 请求）、app.delete（处理 DELETE 请求）等。 例如，要处理一个 POST 请求到 /submit 路径，可以这样编写代码：

app.post('/submit', (req, res) => {
    res.send('Received a POST request');
});

2. 参数化路由：有时候我们需要在 URL 中传递参数，Express 支持参数化路由。例如，定义一个获取用户信息的路由，用户 ID 作为参数：

app.get('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`User ID: ${userId}`);
});

在上述代码中，:id 是参数名，通过 req.params.id 可以获取到实际传递的参数值。如果访问 http://localhost:3000/users/123，服务器会返回 User ID: 123。 3. 路由匹配顺序：Express 按照路由定义的顺序进行匹配。所以，如果有多个路由定义可能匹配同一个请求，要注意定义的顺序。例如：

app.get('/users', (req, res) => {
    res.send('List all users');
});

app.get('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`User ID: ${userId}`);
});

在这个例子中，如果先定义了 /users/:id 路由，再定义 /users 路由，那么访问 /users 路径时，也会匹配到 /users/:id 路由，因为 Express 会优先匹配第一个符合条件的路由。所以要确保将更具体的路由定义在前面。

七、Express 中间件

1. 中间件概念：中间件是 Express 应用中非常重要的一部分。它本质上是一个函数，这个函数可以访问请求对象（req）、响应对象（res）以及应用程序的请求 - 响应循环中的下一个中间件（通过 next 函数）。中间件可以用于执行各种任务，如日志记录、错误处理、身份验证等。
2. 内置中间件：Express 有一些内置的中间件，例如 express.json() 用于解析 JSON 格式的请求体，express.urlencoded() 用于解析 URL 编码格式的请求体。在 Express 4.16.0 及更高版本中，可以直接使用这些中间件，而无需单独安装。 例如，要使用 express.json() 中间件来处理 JSON 格式的请求体：

app.use(express.json());

app.post('/data', (req, res) => {
    const data = req.body;
    res.send(`Received data: ${JSON.stringify(data)}`);
});

在上述代码中，app.use(express.json()) 将 express.json() 中间件应用到整个应用。这样，当有 POST 请求到 /data 路径时，可以通过 req.body 获取到解析后的 JSON 数据。 3. 自定义中间件：开发者也可以编写自己的中间件。自定义中间件函数需要接受 req、res 和 next 三个参数。例如，下面是一个简单的日志记录中间件：

const logger = (req, res, next) => {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
    next();
};

app.use(logger);

app.get('/', (req, res) => {
    res.send('Home page');
});

在这个例子中，logger 中间件会在每个请求到达时，在控制台打印出请求的时间、方法和 URL。通过 app.use(logger) 将这个中间件应用到整个应用。

八、处理静态文件

在 web 应用中，通常需要提供静态文件，如 HTML、CSS、JavaScript 文件等。Express 提供了 express.static 中间件来处理静态文件。

1. 创建静态文件目录：在项目目录中创建一个名为 public（可以是其他名称）的目录，用于存放静态文件。例如，在 public 目录下创建一个 index.html 文件和一个 styles.css 文件。
2. 配置静态文件中间件：在 app.js 文件中添加以下代码：

app.use(express.static('public'));

这样，当浏览器请求 http://localhost:3000/index.html 时，Express 会在 public 目录下查找 index.html 文件并返回给客户端。同样，如果请求 http://localhost:3000/styles.css，会返回 public/styles.css 文件。

九、错误处理中间件

在 Express 应用中，错误处理是非常重要的。可以通过定义错误处理中间件来捕获和处理应用中的错误。

1. 错误处理中间件的定义：错误处理中间件与普通中间件类似，但它需要接受四个参数：err（错误对象）、req、res 和 next。例如：

app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('Something went wrong!');
});

在上述代码中，当应用中发生错误时，错误处理中间件会捕获到错误，在控制台打印错误堆栈信息，并向客户端返回一个状态码为 500 的响应，提示 Something went wrong!。 2. 抛出错误：在路由处理函数或其他中间件中，可以通过 throw 语句抛出错误，从而触发错误处理中间件。例如：

app.get('/error', (req, res, next) => {
    throw new Error('This is a test error');
});

当访问 /error 路径时，会抛出错误，然后被错误处理中间件捕获并处理。

十、使用模板引擎

模板引擎可以帮助我们动态生成 HTML 页面。在 Express 中，有很多模板引擎可供选择，如 EJS、Pug（原名 Jade）等。这里以 EJS 为例介绍如何在 Express 中使用模板引擎。

1. 安装 EJS：在项目目录中运行 npm install ejs 命令安装 EJS 模板引擎。
2. 配置 EJS：在 app.js 文件中添加以下代码：

app.set('view engine', 'ejs');

这行代码告诉 Express 使用 EJS 作为视图引擎。 3. 创建视图目录和模板文件：在项目目录中创建一个名为 views 的目录，用于存放 EJS 模板文件。在 views 目录下创建一个 index.ejs 文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>My EJS Page</title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

在上述 EJS 模板中，<%= message %> 是一个 EJS 表达式，用于在 HTML 中嵌入动态数据。 4. 渲染模板：修改路由处理函数，使用 EJS 模板渲染页面：

app.get('/', (req, res) => {
    const message = 'Welcome to my EJS - powered site';
    res.render('index', { message: message });
});

在这个例子中，res.render 方法用于渲染 views/index.ejs 模板，并将 message 变量传递给模板。当访问根路径时，会看到页面显示 Welcome to my EJS - powered site。

十一、部署 Express 应用

1. 选择服务器提供商：有很多云服务提供商可供选择，如 Heroku、AWS、Google Cloud Platform 等。这里以 Heroku 为例介绍部署过程。
2. 创建 Heroku 账户：访问 Heroku 官方网站（https://www.heroku.com/），注册并创建一个账户。
3. 安装 Heroku CLI：在本地安装 Heroku 命令行工具（Heroku CLI），根据操作系统下载对应的安装包并安装。安装完成后，在命令行中输入 heroku -v 验证是否安装成功。
4. 准备项目：在项目目录中创建一个 Procfile 文件（无文件扩展名），内容如下：

web: node app.js

这行代码告诉 Heroku 如何启动我们的应用。如果你的入口文件不是 app.js，需要相应修改。同时，确保 package.json 文件中包含所有依赖项，运行 npm install 确保 node_modules 目录存在（虽然 Heroku 会在部署时自动安装依赖项，但最好在本地也进行验证）。 5. 部署应用：在命令行中，进入项目目录，登录 Heroku：heroku login，按照提示输入 Heroku 账户的用户名和密码。然后运行 git init 初始化项目为 Git 仓库（如果项目还不是 Git 仓库），添加所有文件 git add.，提交更改 git commit -m "Initial commit"。最后，运行 heroku create 创建一个 Heroku 应用，Heroku 会为你的应用分配一个随机的 URL。运行 git push heroku master 将本地代码推送到 Heroku 服务器进行部署。部署完成后，通过 Heroku 分配的 URL 就可以访问你的 Express 应用了。

通过以上步骤，你已经完成了从 Node.js Express 框架的环境搭建到应用开发、部署的全过程。希望这些内容能帮助你快速入门并掌握 Express 框架的使用，开发出功能强大的 web 应用和 API。