在前面的章节中，我们讨论了如何使用路由来处理请求。在了解了动态路由的方式后，接下来我们将重点探讨Express.js中的中间件概念。

什么是中间件？

中间件是Express.js应用程序中的一个核心概念，它是一个函数，能够访问请求对象（req）、响应对象（res）以及应用程序请求-响应循环中的下一个中间件函数。中间件可以执行一些代码、修改请求和响应对象、结束请求-响应循环，或调用下一个中间件。

中间件的管道

可以将中间件想象成一个处理请求的管道。每当一个请求到达服务器，Express都会遍历这个管道中的每个中间件，依次执行。只有当前一个中间件调用了next()函数，控制权才会传递到下一个中间件。

中间件的分类

中间件通常可以分为以下几类：

1. 应用级中间件：绑定到express应用的实例上。
2. 路由级中间件：绑定到某个路由的express.Router()实例上。
3. 错误处理中间件：专门用来处理错误的中间件。
4. 内置中间件：Express提供的中间件。
5. 第三方中间件：社区或用户开发的中间件。

在本节中，我们会专注于了解应用级中间件的工作原理和使用方法。

创建简单的中间件

一个最基本的中间件示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

// 自定义中间件函数
const myMiddleware = (req, res, next) => {
    console.log('请求的路径:', req.path); // 打印请求路径
    next(); // 调用下一个中间件
};

// 使用中间件
app.use(myMiddleware);

// 路由
app.get('/', (req, res) => {
    res.send('你好，世界！');
});

// 启动服务
app.listen(3000, () => {
    console.log('服务正在监听 3000 端口');
});

在上面的例子中，我们创建了一个名为myMiddleware的中间件，它会打印每次请求的路径。当请求到达时，myMiddleware会被调用，然后执行next()将控制权传递给下一个中间件或路由处理程序。

中间件的执行顺序

中间件的执行顺序通常是自上而下的，也就是说，先定义的中间件先执行。为了更清晰地演示这一点，我们可以添加多个中间件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

// 第一个中间件
app.use((req, res, next) => {
    console.log('第一个中间件');
    next();
});

// 第二个中间件
app.use((req, res, next) => {
    console.log('第二个中间件');
    next();
});

// 路由处理
app.get('/', (req, res) => {
    res.send('你好，世界！');
});

// 启动服务
app.listen(3000, () => {
    console.log('服务正在监听 3000 端口');
});

在这个示例中，当客户端请求根路径时，首先会输出“第一个中间件”，然后是“第二个中间件”，最后返回“你好，世界！”。

总结

本节介绍了中间件的基本概念，它们在Express.js应用中的重要性，以及如何利用中间件来处理请求和响应。中间件为Express.js提供了强大的功能，可以实现诸如日志记录、请求验证、请求体解析等多种功能。

在接下来的章节中，我们将进一步探讨Express提供的内置中间件，以及如何使用它们来优化我们的应用。

在上一章中，我们探讨了什么是“中间件”，并了解了它在 Express.js 应用程序中的重要性。接下来，我们将深入讨论 Express.js 内置中间件的使用，帮助你更好地理解如何在应用程序中利用这些功能强大的工具。

什么是内置中间件？

Express.js 提供了一些内置的中间件，这些中间件是由 Express 框架自带的，通常用于处理常见的任务，如请求体解析、Cookie 解析、静态文件服务等。利用这些内置中间件，可以简化我们的代码并增强代码的可读性和可维护性。

本节中，我们将介绍以下几种常用的内置中间件：

1. express.static
2. express.json
3. express.urlencoded

1. express.static

express.static 是用于提供静态文件的中间件，如 HTML 文件、图片、CSS 文件和 JavaScript 文件等。使用该中间件，我们可以轻松地设定要提供的静态文件目录。

使用示例

在 Express 应用中使用 express.static 非常简单。以下是一个基本的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const express = require('express');
const path = require('path');

const app = express();

// 设定静态文件目录为 'public'
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.send('<h1>欢迎使用 Express!</h1>');
});

// 监听端口
app.listen(3000, () => {
    console.log('服务器正在运行，访问 http://localhost:3000');
});

在上述代码中，我们使用了 express.static 来指定一个静态文件目录（public）。当用户访问这个应用时，如果请求的资源存在于该目录中，Express 会自动将其返回。

2. express.json

express.json 是一个用于解析 JSON 格式请求体的中间件。对于发送 JSON 数据的 POST 请求，这个中间件尤为重要。

使用示例

下面是如何使用 express.json 中间件的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const express = require('express');

const app = express();

// 中间件解析 JSON 格式的请求体
app.use(express.json());

app.post('/data', (req, res) => {
    console.log(req.body); // 输出解析后的请求体
    res.send('接收到的数据已打印到控制台。');
});

// 监听端口
app.listen(3000, () => {
    console.log('服务器正在运行，访问 http://localhost:3000');
});

在这个示例中，我们在应用中使用了 express.json，当用户发送一个包含 JSON 数据的 POST 请求到 /data 时，Express 将自动解析请求体并将其存储在 req.body 中。

3. express.urlencoded

express.urlencoded 是用于解析 URL 编码请求体的中间件。这通常用于提交表单数据的 POST 请求。

使用示例

下面是如何使用 express.urlencoded 的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

// 中间件解析 URL 编码的请求体
app.use(express.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
    console.log(req.body); // 输出解析后的请求体
    res.send('表单数据已接收。');
});

// 监听端口
app.listen(3000, () => {
    console.log('服务器正在运行，访问 http://localhost:3000');
});

在这个例子中，当用户通过表单提交数据时，Express 会使用 express.urlencoded 中间件解析请求体，并将解析后的数据保存在 req.body 中。

总结

在本节中，我们介绍了 Express.js 中的一些内置中间件，包括 express.static、express.json 和 express.urlencoded，并通过简单的示例展示了如何使用它们。掌握这些内置中间件，可以大大提高我们开发 Express 应用程序的效率。

在即将到来的下一节中，我们将探讨如何创建和使用自定义中间件，让您在应用程序中实现更多的功能和灵活性。

在这一章节，我们将深入探讨如何在 Express.js 中创建和使用自定义中间件。掌握自定义中间件的技巧不仅能增强你对 Express.js 的理解，还能让你为特定需求定制应用程序的逻辑。

中间件概述

在 Express 中，中间件是一种函数，可以访问请求对象（req）、响应对象（res）和应用程序的请求-响应周期中的其他中间件。中间件主要用于执行操作，如执行请求数据的处理、验证用户身份、记录请求信息等。

中间件的基本结构

自定义中间件的定义相对简单。一个典型的中间件函数的结构如下：

1
2
3
4
5
6
7

function customMiddleware(req, res, next) {
    // 处理请求
    console.log("Request URL:", req.originalUrl);
    
    // 必须调用 next() 来将控制权交给下一个中间件
    next();
}

在上面的代码中，customMiddleware 是一个自定义中间件函数，next 是 Express 提供的函数，用于将控制权传递给下一个中间件。

创建并使用自定义中间件

现在，让我们来创建一个简单的自定义中间件，并将其应用到我们的 Express 应用中。

示例：请求时间戳中间件

我们将创建一个自定义中间件，它会在请求过程中记录当前的时间戳。

首先，创建一个新的 Express 应用：

1
2
3

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

然后，我们实现我们的自定义中间件：

1
2
3
4

function timestampMiddleware(req, res, next) {
    req.requestTime = new Date().toISOString();
    next();
}

接下来，使用 app.use() 方法传播这个中间件：

1
2

// 使用自定义中间件
app.use(timestampMiddleware);

然后，我们可以在路由处理程序中访问这个时间戳信息：

1
2
3

app.get('/', (req, res) => {
    res.send(`请求时间: ${req.requestTime}`);
});

最后，启动服务器：

1
2
3

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

代码综述

完整的代码示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

// 自定义中间件，记录请求时间
function timestampMiddleware(req, res, next) {
    req.requestTime = new Date().toISOString();
    next();
}

// 使用自定义中间件
app.use(timestampMiddleware);

// 路由处理程序
app.get('/', (req, res) => {
    res.send(`请求时间: ${req.requestTime}`);
});

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

测试中间件

启动你上面的应用并在浏览器中访问 http://localhost:3000/，你将会看到类似于以下的输出：

1

请求时间: 2023-10-01T12:34:56.789Z

可以看到，我们的自定义中间件成功地在请求中添加了时间戳信息。

实际应用中的自定义中间件

自定义中间件在实际开发中非常有用，以下是一些常见的应用场景：

• 请求验证：可以验证请求的用户身份，如 JWT 验证。
• 请求优化：可以在处理请求之前进行数据转换或优化。
• 日志记录：记录所有传入请求的详细信息，以便后期分析。
• 错误处理：集中处理错误并向用户返回统一的错误响应。

以下是一个验证中间件的示例：

1
2
3
4
5
6
7
8
9
10
11

function authMiddleware(req, res, next) {
    const token = req.headers['authorization'];
    if (!token) {
        return res.status(403).send('权限不足');
    }
    // 在这里验证 token 的逻辑
    next();
}

// 在需要鉴权的路由中使用
app.use('/secure', authMiddleware);

结论

本节中，我们学习了如何创建和使用自定义中间件。中间件不仅能帮助我们简化代码结构，还能重用逻辑，让我们的应用更加模块化。在下一章节中，我们将深入探讨如何处理请求和响应，特别是处理 GET 请求的技巧。通过中间件与处理请求的结合，您会发现 Express.js 的强大与灵活。

在上一个章节中，我们学习了如何创建和使用自定义中间件。自定义中间件是 Express.js 中的一个强大特性，它允许我们在请求处理流程中插入自定义逻辑。在本章的开始部分，我们将着重于处理客户端发来的 GET 请求。

6.1 处理GET请求

什么是GET请求？

GET 请求是最常用的 HTTP 方法之一，主要用于从服务器获取数据。当用户在浏览器中输入一个 URL 并访问时，浏览器会发送一个 GET 请求到指定的服务器。我们将在本节中学习如何在 Express.js 中处理这些请求。

设置路由以处理GET请求

在 Express.js 中，我们可以通过 app.get() 方法来定义一个处理 GET 请求的路由。下面是一个基本的示例：

1
2
3
4
5
6
7
8
9
10
11
12

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

// 处理GET请求
app.get('/hello', (req, res) => {
    res.send('Hello, World!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

在这个示例中，当用户访问 http://localhost:3000/hello 时，服务器会返回字符串 Hello, World!。

如何从请求中获取参数

在 GET 请求中，我们常常需要从请求中提取参数。Express.js 提供了 req.query 对象来方便地访问查询参数。查询参数是 URL 中以 ? 开始的部分。例如，在 URL http://localhost:3000/greet?name=John 中，name 是查询参数。

以下是一个处理查询参数的示例：

1
2
3
4

app.get('/greet', (req, res) => {
    const name = req.query.name || 'Guest'; // 获取查询参数 name，若未提供则默认为 'Guest'
    res.send(`Hello, ${name}!`);
});

当用户访问 http://localhost:3000/greet?name=John 时，服务器会返回 Hello, John!。

路由参数

除了查询参数，Express 还支持路由参数，它们在 URL 路径中定义。我们可以在路由中使用冒号（:）来定义动态参数。以下是一个处理路由参数的示例：

1
2
3
4

app.get('/users/:id', (req, res) => {
    const userId = req.params.id; // 获取路由参数 id
    res.send(`User ID is ${userId}`);
});

如果用户访问 http://localhost:3000/users/123，服务器会返回 User ID is 123。

处理GET请求的案例

接下来，我们将结合前面的知识，创建一个更复杂的 GET 请求处理示例。我们将构建一个简单的 API，返回用户的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

let users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

app.get('/api/users', (req, res) => {
    res.json(users); // 返回所有用户
});

app.get('/api/users/:id', (req, res) => {
    const userId = parseInt(req.params.id);
    const user = users.find(u => u.id === userId);

    if (user) {
        res.json(user); // 返回特定用户信息
    } else {
        res.status(404).send('User not found'); // 处理未找到的用户
    }
});

现在，如果我们访问 http://localhost:3000/api/users，将返回所有用户的 JSON 数据。如果我们请求 http://localhost:3000/api/users/1，将获取到 Alice 的信息。如果请求的 ID 不存在，服务器将返回 404 状态和相应信息。

结尾

在本节中，我们了解了如何处理 GET 请求，包括如何使用查询参数和路由参数。掌握这些知识会帮助我们开发出更灵活和功能丰富的 Web 应用程序。

在下一节中，我们将继续研究如何处理 POST 请求，这是与处理数据提交密切相关的内容。

在上一篇中，我们介绍了如何处理GET请求。现在，我们将讨论如何在Express.js中处理POST请求。POST请求通常用于提交数据给服务器，例如表单数据或JSON对象。

1. 理解POST请求

POST请求是HTTP协议中一种常用的方法，它允许客户端向服务器发送数据。在Express.js中，我们可以通过内置的body-parser中间件（自Express 4.16.0版起，已不再需要单独安装）来解析请求体，从而处理POST请求中的数据。

2. 设置Express应用

首先，让我们创建一个简单的Express应用，以处理POST请求。假设我们有以下目录结构：

1
2

/myapp
|-- app.js

在app.js中，我们需要设置Express应用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

// 中间件：解析应用/json类型的请求体
app.use(express.json());

// POST请求处理路由
app.post('/submit', (req, res) => {
    const { name, age } = req.body; // 从请求体中提取数据
    res.send(`Received data - Name: ${name}, Age: ${age}`);
});

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

3. 发送POST请求

在上述示例中，我们定义了一个POST请求的路由。为了测试这个路由，我们可以使用Postman或cURL命令来发送POST请求。例如，使用cURL命令行工具：

1
2
3

curl -X POST http://localhost:3000/submit \
-H "Content-Type: application/json" \
-d '{"name": "Alice", "age": 25}'

在这个命令中：

• -X POST指定请求方法为POST。
• -H "Content-Type: application/json"设置请求头，告诉服务器我们发送的是JSON格式的数据。
• -d '{"name": "Alice", "age": 25}'指定请求体中的数据。

4. 响应结果

当我们发送上述POST请求后，服务器会返回响应：

1

Received data - Name: Alice, Age: 25

这说明我们的POST请求处理成功，并且数据能够正确地从请求体中提取。

5. 处理表单数据

除了处理JSON数据外，我们还可以处理表单数据。为了处理application/x-www-form-urlencoded格式的表单数据，我们需要使用express.urlencoded()中间件。以下是一个处理表单提交的示例：

1
2
3
4
5
6
7
8

// 中间件：解析应用/x-www-form-urlencoded类型的请求体
app.use(express.urlencoded({ extended: true }));

// POST请求处理表单数据
app.post('/form-submit', (req, res) => {
    const { username, email } = req.body; // 从请求体中提取数据
    res.send(`Form submitted - Username: ${username}, Email: ${email}`);
});

在这个示例中，我们处理一个简单的HTML表单提交。可以使用以下HTML代码进行测试：

1
2
3
4
5

<form action="http://localhost:3000/form-submit" method="POST">
    <input type="text" name="username" placeholder="Username" required>
    <input type="email" name="email" placeholder="Email" required>
    <button type="submit">Submit</button>
</form>

当你在浏览器中提交这个表单时，服务器会处理并返回相应的用户信息。

6. 总结

在本章节中，我们介绍了如何在Express.js中处理POST请求。通过设置相应的中间件，我们可以轻松处理不同格式的请求体数据，如JSON和表单数据。掌握POST请求的处理是构建动态网页或API的关键步骤。

下一篇将讨论如何响应JSON数据，让我们继续深入Express.js的世界！

在前一章中，我们讨论了如何处理 POST 请求，这使我们能够从客户端接收数据并进行处理。在这一章中，我们将深入探讨如何生成 JSON 格式的响应数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

6.3 响应JSON数据

在现代的 Web 应用中，尤其是使用 Ajax 和前端框架时，客户端与服务器之间的数据交换通常采用 JSON 格式。Express.js 提供了很方便的工具来处理这类需求。

6.3.1 使用 res.json() 方法

在 Express.js 中，我们可以使用 res.json() 方法来发送 JSON 响应。这个方法将 JavaScript 对象转换为 JSON 字符串并发送给客户端，默认设置 Content-Type 为 application/json。

案例：简单的 JSON 响应

假设我们有一个简单的启动项目，并且我们要创建一个返回用户信息的 API。以下是如何实现这一点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

// 定义一个 GET 路由
app.get('/user', (req, res) => {
    // 模拟用户数据
    const user = {
        id: 1,
        name: '张三',
        age: 25,
        email: 'zhangsan@example.com'
    };

    // 发送 JSON 响应
    res.json(user);
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器正在运行，访问地址: http://localhost:${PORT}`);
});

在这个例子中，当客户端发送 GET 请求到 /user 路由时，服务器将返回一个包含用户信息的 JSON 对象。使用 res.json(user) 方法不仅简单，而且确保将 Content-Type 设置为 application/json。

6.3.2 响应数组数据

除了响应对象，我们也可以发送数组形式的 JSON 数据。这在返回多条记录时非常有用。

案例：返回用户列表

假设我们扩展我们的应用，返回多个用户的信息。请看以下代码：

1
2
3
4
5
6
7
8
9
10
11

app.get('/users', (req, res) => {
    // 模拟用户列表数据
    const users = [
        { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
        { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
        { id: 3, name: '王五', age: 22, email: 'wangwu@example.com' }
    ];

    // 发送 JSON 响应
    res.json(users);
});

现在，当我们访问 /users 路由时，返回的数据将会是一个包含多个用户对象的数组。

6.3.3 自定义响应状态码

除了发送 JSON 数据，我们有时还需要根据不同情况返回不同的 HTTP 状态码。我们可以通过以下方式设置状态码：

1
2
3
4
5
6
7
8
9
10
11
12

app.get('/user/:id', (req, res) => {
    const userId = req.params.id;

    // 假设我们没有找到用户
    if (userId > 3) {
        return res.status(404).json({ error: '用户未找到' });
    }

    // 返回找到的用户
    const user = { id: userId, name: '张三' };
    res.json(user);
});

在这个例子中，当请求的用户未找到时，我们使用 res.status(404) 设置状态码为 404 Not Found，并且返回一个包含错误信息的 JSON 对象。

6.3.4 总结

在本节中，我们学习了如何在 Express.js 中使用 res.json() 方法返回 JSON 数据。这对构建现代的 RESTful API 至关重要。通过灵活运用该方法，我们可以轻松返回单个对象、数组，甚至自定义 HTTP 状态码。

作为一个小结，处理请求和响应的能力使我们的应用更加动态和灵活，接下来我们将在下一章中讨论如何处理错误，以确保应用的稳定性和用户体验。

预告

在下一章中，我们将探讨错误处理的基本概念，学习如何更有效地处理应用中的各种错误。这对于创建一个健壮的 Web 应用程序至关重要。

在本章中，我们将探讨 Express.js 中的错误处理机制，重点关注错误处理的基本概念。在上章中，我们讨论了如何处理请求和响应，尤其是如何以 JSON 格式返回数据。在实际应用中，伴随着请求和响应的处理，错误的产生也是不可避免的，因此我们需要了解如何有效地处理这些错误，以便提供更好的用户体验。

什么是错误处理？

在 Web 应用中，错误可以分为几种类型，例如：

• 客户端错误：这些错误通常由用户输入不当或请求无效引起，例如 404 错误（请求的资源未找到）。
• 服务器错误：这些错误通常发生在服务器端，可能是由于代码bug、数据库连接失败等原因引起的。

错误处理的目的是捕获这些错误并以一种用户友好的方式向用户展示，同时记录错误信息以便后续的调试和维护。

Express.js 中的错误处理中间件

在 Express 中，错误处理中间件是一种特殊的中间件，旨在处理发生的错误。它的函数签名与普通中间件略有不同，包含一个额外的参数 err，用来捕捉错误。例如：

1
2
3
4

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

在这个例子中，当 Express 应用中的错误发生时，该中间件将被触发。err 参数表示发生的错误，req 和 res 是请求和响应对象，next 是用来将控制权转交给下一个中间件的函数。

使用错误处理中间件的顺序

在定义错误处理中间件时，它需要放置在所有其他中间件和路由的后面，否则将无法捕获到前面已经发生的错误。如果将其放置在错误发生之前的位置，它就不会被执行。

特定错误处理的示例

我们可以通过一个简单的示例来理解错误处理的使用方式。考虑以下代码，它定义了一个简单的路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

// 故意触发一个错误
app.get('/error', (req, res) => {
    throw new Error('This is a forced error!');
});

// 错误处理器
app.use((err, req, res, next) => {
    console.error(err.message);
    res.status(500).send('Internal Server Error: Something went wrong!');
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

在这个示例中，我们定义了两个路由：一个是根路由返回 “Hello World!”，另一个是 /error 路由故意抛出一个错误。当请求 /error 路由时，错误处理中间件将捕获到这个错误，并返回一个 500 状态码及相关信息。

记录错误

除了将错误信息返回给用户，记录错误对开发者和维护团队同样重要。我们可以在错误处理中间件中使用 console.error 来打印错误栈，也可以考虑将这些错误信息记录到一个日志系统中，以便后续的监控和分析。

结论

在本节中，我们了解了 Express.js 中的错误处理基本概念，包括如何定义错误处理中间件以及如何捕获和处理错误。错误处理是 Web 应用程序的一个重要组成部分，能够帮助我们提高应用的健壮性和用户体验。

准备好迎接更深入的自定义错误处理器的挑战了吗？在下一章中，我们将学习如何创建和使用自定义错误处理器，以便根据我们的需求更好地处理不同类型的错误。

在上一章中，我们讨论了错误处理的基本概念，包括如何在 Express.js 中捕获和处理错误。本章将深入探讨如何构建自定义错误处理器，以便有效地管理应用程序中的错误。

什么是自定义错误处理器？

在 Express.js 应用程序中，默认的错误处理机制可以捕获错误并在一定程度上处理它们。然而，为了更细致地控制错误的响应，我们需要定义自己的错误处理器。自定义错误处理器可以让我们根据不同的错误类型和状态码返回不同的响应。

错误处理中间件的定义

自定义错误处理器其实是一个特殊的中间件，其函数签名为：

1
2
3

function errorHandler(err, req, res, next) {
  // 错误处理逻辑
}

在这个函数中，err参数代表发生的错误，req和res是请求和响应对象，next是指向下一个中间件函数的引用。要确保这个中间件是在所有其他中间件之后定义，也就是说通常放在路由定义的最后面。

创建一个简单的错误处理器

下面是一个简单的自定义错误处理器示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

// 自定义错误处理器
function errorHandler(err, req, res, next) {
    console.error(err.stack); // 打印错误堆栈到控制台
    res.status(err.status || 500); // 设置响应状态码，默认500
    res.json({
        message: err.message || 'Internal Server Error', // 返回错误消息
    });
}

// 一个模拟的路由，可能会产生错误
app.get('/error', (req, res, next) => {
    const err = new Error('这是一个自定义错误!');
    err.status = 400; // 自定义状态码
    next(err); // 将错误传递到下一个中间件
});

// 使用自定义错误处理器
app.use(errorHandler);

// 启动服务器
app.listen(3000, () => {
    console.log('服务器在 http://localhost:3000 运行');
});

在这个例子中，我们首先定义了一个路由 /error，它会故意抛出一个错误。然后，我们创建了一个数字 400 的状态码，并将其传递给错误处理中间件。自定义错误处理器将捕获错误，并返回一个 JSON 对象，其中包含错误信息和状态码。

捕获不同类型的错误

自定义错误处理器的一个优势是可以根据错误的不同类型进行定制处理。例如，我们可能会希望对不同状态码的错误返回不同的响应格式。

假设我们有一个自定义的错误类：

1
2
3
4
5
6
7
8
9
10
11
12
13

class NotFoundError extends Error {
    constructor(message) {
        super(message);
        this.status = 404; // 设置状态码
    }
}

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.status = 400; // 设置状态码
    }
}

我们可以在我们的错误处理器中按照错误类型进行处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function errorHandler(err, req, res, next) {
    console.error(err.stack);

    if (err instanceof ValidationError) {
        return res.status(err.status).json({
            error: 'Validation Error',
            message: err.message,
        });
    }

    if (err instanceof NotFoundError) {
        return res.status(err.status).json({
            error: 'Not Found',
            message: err.message,
        });
    }

    // 默认处理
    res.status(err.status || 500);
    res.json({
        message: err.message || 'Internal Server Error',
    });
}

通过自定义错误类提升代码可读性

通过使用自定义错误类，我们可以更清楚地了解不同错误的来源，从而在 errorHandler 中灵活作出响应。这种设计有助于提升代码的可读性和维护性。

小结

本章中，我们探讨了如何创建自定义错误处理器，以便在 Express.js 应用程序中更好地管理和响应错误。通过定义具体的错误类，我们能够针对不同类型的错误采用不同的处理策略，使得代码更加清晰和易于维护。

在下一章中，我们将讨论如何捕获 404 错误并为用户提供适当的响应。这为我们提供了更多的机会来确保用户体验的完整性和一致性。

在上一章中，我们探讨了如何使用自定义错误处理器来处理应用程序中出现的错误。错误处理是构建健壮应用程序的重要组成部分，而在这章中，我们将专注于捕获404错误，也就是应用程序的“未找到”错误。

什么是404错误？

简单来说，404错误表示用户请求的资源在服务器上不存在。当用户访问一个未定义的路由或网址时，Express会默认返回一个404状态码。这种情况在前端应用中很普遍，例如，当用户输入错误的URL时。

捕获404错误的基本方法

在Express中，我们可以使用middleware来处理404错误。通过添加一个中间件来捕获未处理的请求，可以确保我们的应用在用户请求不存在的路由时给出友好的响应。

实现404错误捕获

以下是一个简单的示例，演示如何在Express应用中捕获404错误。我们可以在所有路由定义之后添加一个404中间件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

// 定义其他路由
app.get('/', (req, res) => {
    res.send('主页');
});

app.get('/about', (req, res) => {
    res.send('关于我们');
});

// 捕获404错误
app.use((req, res, next) => {
    res.status(404).send('抱歉，您请求的页面不存在。');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在监听 http://localhost:${PORT}`);
});

在上面的代码中，当用户访问一个未定义的路由时，Express会调用我们定义的404中间件，并返回一个404状态码及相应的信息。

友好的404错误页面

为了提高用户体验，我们可以让404错误页面更友好。可以创建一个单独的404页面模板，并在404中间件中渲染它。以下是使用EJS模板引擎的示例。

1. 首先，安装EJS：

1

npm install ejs

2. 在你的项目中配置EJS并创建一个404页面：

1
2
3
4
5
6
7

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

// 404错误页面
app.use((req, res, next) => {
    res.status(404).render('404', { title: '页面未找到' });
});

3. 创建一个视图文件views/404.ejs：

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您请求的页面不存在。请检查您的链接或返回主页。</p>
</body>
</html>

这样，当用户请求一个不存在的路由时，会看到一个友好的404页面，而不是简单的文本信息。

总结

在本章中，我们学习了如何在Express.js应用中捕获404错误，并为用户提供一个更友好的错误页面。通过使用中间件和模板引擎，我们能够创建更好的用户体验，确保用户在面对错误时能够轻松理解发生了什么。

在下一章中，我们将探讨如何配置静态文件目录，以便更有效地服务我们的前端资源，欢迎继续学习！

在这一章中，我们将学习如何在 Express.js 应用中配置一个静态文件目录。通过正确的配置，我们可以让 Express.js 方便地服务于我们的静态资源，比如 CSS 文件、JavaScript 文件以及图片等。

什么是静态文件？

静态文件是指文件内容不随请求而变化的文件，例如 HTML 页面、样式表、脚本文件、图像等等。在 Express.js 中，我们可以使用内置的中间件 express.static() 来提供静态文件服务。

配置静态文件目录

为了配置静态文件目录，我们需要在 Express 应用中使用 express.static() 中间件。下面是配置静态文件目录的基本步骤：

1. 创建项目目录结构
   假设我们的项目目录结构如下：

   1 2 3 4 5 6 7 8 9 10

   my-express-app/ ├── public/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── script.js │ └── images/ │ └── logo.png ├── app.js └── package.json

   在上面的结构中，public 目录将用于存放所有静态文件。

2. 安装所需的依赖
   如果还没有安装 Express.js，你可以通过 npm 安装它：

   1	npm install express

3. 配置 Express 应用
   在你的 app.js 文件中，使用 express.static 中间件来服务于 public 目录中的静态文件。代码示例如下：

   1 2 3 4 5 6 7 8 9 10 11 12 13

   const express = require('express'); const path = require('path'); const app = express(); // 配置静态文件目录 app.use(express.static(path.join(__dirname, 'public'))); // 启动服务器 const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });

   在上面的代码中，我们使用了 path.join(__dirname, 'public') 来确保即使在不同操作系统上也能够正确解析路径。

4. 测试静态文件服务
   添加一些基本的 HTML 来测试静态文件服务。在 public 目录下创建一个文件 index.html ：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/style.css"> <script src="/js/script.js"></script> <title>Static Files Example</title> </head> <body> <h1>欢迎来到 Static Files Example</h1> <img src="/images/logo.png" alt="Logo"> </body> </html>

   在这个 HTML 文件中，我们引入了 CSS 文件和 JavaScript 文件，并添加了一张图片。

5. 运行应用
   启动你的应用：

   1	node app.js

   然后在浏览器中访问 http://localhost:3000，你应该看到你的 HTML 页面和引入的静态资源。

小结

在本章中，我们学习了如何在 Express.js 应用中配置静态文件目录。通过使用 express.static() 中间件，我们能够轻松地向用户提供 CSS、JavaScript、图片等静态资源。接下来，我们将深入探讨如何访问这些静态文件，以及进一步的配置选项。希望你可以在自己的项目中灵活应用这些知识！

在上一章中，我们探讨了如何配置静态文件目录，使得Express.js能够有效地提供静态资源。在本章中，我们将专注于如何通过Express应用访问这些静态文件。这是构建现代Web应用的一个关键步骤，因为用户通常需要加载CSS、JavaScript和图片等文件来完成网页的呈现。

静态文件的访问原理

在Express中，静态文件服务的核心功能来自于express.static中间件。当我们将某个目录传递给此中间件后，Express会自动处理并提供该目录下的所有文件。用户可以通过浏览器直接访问这些文件。

例子：访问静态文件

让我们通过一个简单的示例来理解如何访问静态文件内容。

1. 设置项目

首先，确保您有一个基本的Express项目。如果没有，可以使用以下命令来创建一个新的项目：

1
2
3
4

mkdir express-static-example
cd express-static-example
npm init -y
npm install express

2. 创建静态文件目录

在项目根目录下，创建一个名为public的文件夹，并在其中添加一些静态文件。比如，我们可以添加一个style.css和一个image.png来演示：

1
2
3

public/
├── style.css
└── image.png

style.css的内容可以简单的写成：

1
2
3

body {
    background-color: lightblue;
}

然后，添加一张图片image.png到public目录中。

3. 配置Express应用

接下来，我们将创建一个简单的Express应用并配置静态文件服务：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const express = require('express');
const path = require('path');

const app = express();

// 静态文件目录配置
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.send('<h1>欢迎来到我的网站</h1><link rel="stylesheet" type="text/css" href="/style.css"><img src="/image.png" alt="示例图片">');
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器已启动，访问 http://localhost:${PORT}`);
});

在上述代码中，我们首先引入了express和path模块。然后，通过app.use(express.static(path.join(__dirname, 'public')));来设置public目录为静态文件目录。这样，浏览器就能直接访问那里的文件。

4. 启动服务器

运行您的Express应用：

1

node app.js

然后在浏览器中访问 http://localhost:3000，您将看到欢迎页面，并且样式文件和图片也会被正确加载。

访问静态文件的特性

通过上述示例，我们可以看到访问静态文件时的一些重要特性：

1. 直接访问：用户可以直接通过URL访问任何在public目录下的文件，比如访问http://localhost:3000/style.css或http://localhost:3000/image.png。

2. 保持目录结构：在public目录下的子目录结构将被保留。例如，如果您在public中创建了一个assets目录，并在其中放入文件，浏览器可以通过http://localhost:3000/assets/yourfile.ext路径访问它们。

3. 文件类型的自动处理：Express会根据文件的后缀名自动设置Content-Type响应头，以确保浏览器能正确识别和渲染文件。

总结

本章介绍了如何在Express应用中访问静态文件。通过简单的配置，我们可以方便地将CSS，JavaScript，图片等静态资源提供给用户，进而提升Web应用的用户体验。

在下一章中，我们将进一步讨论如何优化静态文件服务，以提高应用的性能，让我们的Web应用在资源加载上更加高效。

在上一章中，我们讨论了如何通过 Express.js 访问静态文件。我们了解到了如何为我们的应用设置静态文件服务，使得文件可以被客户端请求并响应。然而，在生产环境中，优化静态文件的服务是非常重要的，会影响到应用的性能和用户的体验。本章将探讨一些常用的优化方法。

1. 缓存控制

1.1 理解浏览器缓存

为了减少请求的次数和提高加载速度，浏览器提供了缓存控制机制。通过设置缓存头信息，浏览器能在一段时间内保存静态文件的副本，而不必每次都向服务器请求。

在 Express.js 中，我们可以使用 express.static() 方法来设置这些缓存头。具体的实现方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

const express = require('express');
const path = require('path');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: '1d' // 设置缓存时间为 1 天
}));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在这个例子中，maxAge 属性设置了缓存的有效期为 1 天，客户端在请求静态文件时会根据此设置决定是否使用本地缓存的文件。

1.2 强缓存与协商缓存

在一般情况下，缓存控制可以分为强缓存和协商缓存。通过设置 Cache-Control 和 Expires 头，我们可以使用强缓存，而协商缓存则依赖于 Last-Modified 和 ETag 头。

你可以在 express.static() 中进一步配置这些参数，示例如下：

1
2
3
4
5
6
7
8
9

app.use(express.static(path.join(__dirname, 'public'), {
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      res.setHeader('Cache-Control', 'no-cache');
    } else {
      res.setHeader('Cache-Control', 'public, max-age=31557600'); // 1 年
    }
  }
}));

在这个例子中，对于 .html 文件，我们设置了 no-cache，强制浏览器每次都请求新的版本，而其他静态资源则使用 1 年的强缓存。

2. 启用 Gzip 压缩

2.1 什么是 Gzip 压缩

Gzip compression 是一种利用 DEFLATE 算法压缩文件大小的方式，通过减少数据传输的字节数来提升性能和加载速度。Express.js 提供了中间件 compression 来轻松启用 Gzip 压缩。

2.2 如何使用 Gzip 压缩

首先，我们需要安装 compression 包：

1

npm install compression

然后，在我们的应用中集成它：

1
2
3

const compression = require('compression');

app.use(compression());

将上述代码添加到你的 Express 应用中后，所有传递的 HTTP 响应都会自动进行 Gzip 压缩。这将大大减少响应体的大小，使得静态文件的传输更快速。

3. 使用 CDN

3.1 CDN 的优势

内容分发网络（CDN）是一种通过将静态资源分发给与用户更接近的多个服务器来加速内容交付的服务。使用 CDN 可以大幅提升网站的载入速度和响应能力，将静态文件从你的服务器上托管到 CDN 服务器上。

3.2 如何将静态文件托管到 CDN

将静态文件发布到 CDN 服务器上通常需要经过如下步骤：

1. 上传文件: 将你的静态文件上传至 CDN 提供商（如 Cloudflare、AWS CloudFront 等）。
2. 配置域名: 配置你的 CDN 域名指向这些文件。
3. 更新引用: 在应用中，将所有静态文件的引用更新为 CDN 的 URL。

例如，将以下静态文件引用：

1

<script src="/js/app.js"></script>

更新为：

1

<script src="https://cdn.example.com/js/app.js"></script>

通过使用 CDN，我们可以加速静态文件的获取速度，分散请求的负担，提高用户的体验。

4. 图片优化

对于静态文件服务而言，图片的加载和处理尤为重要。通过优化图片能够显著提升页面加载速度。

4.1 图片格式选择

选择合适的图片格式可以减少文件大小。以下是一些推荐的格式：

• 使用 JPEG 格式来处理照片，因为其压缩比高且保留较多细节。
• 使用 PNG 格式来处理需要透明背景的图片。
• 使用 SVG 格式来处理矢量图形，以保持清晰度和小巧的文件大小。

4.2 图片压缩

使用工具如 imagemin 来批量压缩图片。通过安装并使用它，可以减少静态文件夹中图片的大小。

4.3 响应适配的图片

可以考虑使用 srcset 属性使浏览器根据设备的屏幕大小和分辨率选择合适的图片加载。

1
2
3
4
5
6
7
8

<img src="image-640w.jpg" 
     srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1200px) 800px,
            1200px"
     alt="描述">

结论

通过设置缓存控制、启用 Gzip 压缩、使用 CDN 和优化图片，我们可以显著提升 Express.js 应用中的静态文件服务的性能。这些优化不仅能够减少加载时间，还能提高用户的体验，使得我们的应用更加高效和流畅。继续优化代码和资源是提升用户体验的关键，下一章将介绍如何使用模板引擎 EJS 来更动态地生成 HTML 内容。