简介:Express4是Node.js中流行的Web应用框架,简化了构建Web应用程序的过程。本工具包提供了一个完整的指南,涵盖Express4的核心概念、安装和设置、路由处理、中间件使用、静态文件服务、模板引擎集成、错误处理和服务器启动。通过实践任务和代码示例,学生将掌握Express4的实际应用,并能够构建高效且可扩展的Web服务。
1. Express.js 简介
Express.js 是一个流行的 Node.js Web 框架,用于构建快速、灵活且可扩展的 Web 应用程序。它提供了一组丰富的功能,包括路由、中间件、模板引擎和静态文件服务,使开发人员能够轻松创建健壮且可维护的 Web 应用程序。
Express.js 采用模块化设计,允许开发人员根据应用程序的特定需求选择和组合不同的模块。它还提供了一个强大的插件生态系统,使开发人员能够扩展框架的功能并满足各种需求。
2. Express.js 核心概念
2.1 路由
路由概述
路由是 Express.js 中一个关键的概念,它允许应用程序根据请求的 URL 将请求映射到特定的处理函数。路由定义了当客户端向服务器发送请求时,服务器将如何响应。
路由定义
路由使用 app.METHOD(path, handler)
方法定义,其中:
-
app
:Express.js 应用程序实例 -
METHOD
:HTTP 请求方法,如get
、post
、put
、delete
-
path
:请求的 URL 路径 -
handler
:处理请求的函数
以下是一个简单的路由示例:
app.get('/', (req, res) => {
res.send('Hello World!');
});
路由参数
路由参数允许在路由路径中捕获动态值。这些值可以在处理函数中使用。
要定义路由参数,请在路径中使用冒号 (:),后跟参数名称。例如:
app.get('/user/:id', (req, res) => {
const id = req.params.id;
// ...
});
2.2 中间件
中间件概述
中间件是 Express.js 中另一个重要的概念。它们是应用程序中处理请求和响应的函数,可以在路由处理函数之前或之后执行。
内置中间件
Express.js 提供了几个内置中间件,包括:
-
express.json()
:解析 JSON 请求体 -
express.urlencoded()
:解析 URL 编码的请求体 -
express.static(path)
:提供静态文件服务
自定义中间件
也可以创建自定义中间件。自定义中间件允许在应用程序中添加自定义功能。
要创建自定义中间件,请使用以下语法:
app.use((req, res, next) => {
// ...
next();
});
中间件堆栈
中间件按照它们被定义的顺序执行。中间件堆栈允许在应用程序中创建复杂的行为。
2.3 模板引擎
模板引擎概述
模板引擎是 Express.js 中用于渲染动态 HTML 的工具。它们允许应用程序将数据与 HTML 模板合并,从而生成动态响应。
EJS 模板引擎
EJS(嵌入式 JavaScript)是最流行的 Express.js 模板引擎之一。它允许在模板中嵌入 JavaScript 代码。
Jade 模板引擎
Jade(又名 Pug)是另一个流行的 Express.js 模板引擎。它使用简洁的语法,可以生成干净、语义化的 HTML。
3. Express.js 安装与设置
Express.js 是一个轻量级的 Web 应用程序框架,用于构建基于 Node.js 的 Web 应用程序。在开始使用 Express.js 之前,需要先进行安装和设置。
安装 Express.js
安装 Express.js 的最简单方法是使用 npm(Node.js 包管理器):
npm install express --save
这将在您的项目中安装 Express.js 并将其添加到 package.json
文件的依赖项列表中。
设置 Express.js
安装 Express.js 后,您需要在应用程序中设置它。为此,请在您的应用程序文件中(通常是 app.js
或 server.js
)导入 Express.js:
const express = require('express');
然后,创建一个 Express.js 应用程序实例:
const app = express();
配置 Express.js
设置 Express.js 应用程序后,您可以配置各种设置,例如:
- 端口: 指定应用程序侦听的端口号。
- 视图引擎: 指定用于渲染视图的模板引擎。
- 静态文件目录: 指定静态文件(例如 HTML、CSS 和 JavaScript)的目录。
以下是如何配置这些设置:
// 设置端口
app.set('port', 3000);
// 设置视图引擎
app.set('view engine', 'ejs');
// 设置静态文件目录
app.use(express.static('public'));
启动 Express.js 应用程序
配置 Express.js 应用程序后,您可以启动它:
app.listen(app.get('port'), () => {
console.log(`Express.js 应用程序正在端口 ${app.get('port')} 上运行`);
});
这将启动 Express.js 应用程序并使其在指定的端口上侦听传入请求。
代码逻辑分析
安装 Express.js
-
npm install express --save
命令使用 npm 安装 Express.js 并将其添加到package.json
文件的依赖项列表中。
设置 Express.js
-
const express = require('express');
语句导入 Express.js 模块。 -
const app = express();
语句创建一个 Express.js 应用程序实例。
配置 Express.js
-
app.set('port', 3000);
语句将端口号设置为 3000。 -
app.set('view engine', 'ejs');
语句将视图引擎设置为 EJS。 -
app.use(express.static('public'));
语句将静态文件目录设置为public
目录。
启动 Express.js 应用程序
-
app.listen(app.get('port'), () => { ... });
语句启动 Express.js 应用程序并使其在指定的端口上侦听传入请求。
4. Express.js 路由处理
Express.js 提供了一个强大的路由系统,用于处理 HTTP 请求并将其定向到适当的处理程序。路由允许开发人员根据请求的 URL、HTTP 方法和其他因素定义应用程序的响应。
4.1 路由定义
路由定义指定了当客户端发送请求时应执行的处理程序。路由定义由 app.METHOD(path, handler)
方法定义,其中:
-
app
是 Express.js 应用程序实例。 -
METHOD
是 HTTP 方法,例如get
、post
、put
或delete
。 -
path
是请求的 URL 路径。 -
handler
是处理请求的函数。
示例:
app.get('/', (req, res) => {
res.send('Hello World!');
});
此路由定义一个处理根 URL 路径 /
的 GET 请求的处理程序。当客户端发送 GET 请求到根 URL 时,处理程序将响应 "Hello World!"。
4.2 路由参数
路由参数允许开发人员从请求的 URL 中提取动态值。路由参数使用冒号 (:) 表示,例如:
app.get('/user/:id', (req, res) => {
const id = req.params.id;
// ...
});
此路由定义一个处理 GET 请求到 /user/:id
路径的处理程序。 id
是一个路由参数,它将从请求的 URL 中提取并存储在 req.params.id
中。
4.3 路由组
路由组允许开发人员将具有相同前缀的多个路由定义组合在一起。路由组由 app.METHOD(path, router)
方法定义,其中:
-
app
是 Express.js 应用程序实例。 -
METHOD
是 HTTP 方法,例如get
、post
、put
或delete
。 -
path
是路由组的前缀。 -
router
是一个新的 Express.js 路由器,用于定义组内的路由。
示例:
const userRouter = express.Router();
userRouter.get('/', (req, res) => {
// ...
});
userRouter.get('/:id', (req, res) => {
// ...
});
app.use('/user', userRouter);
此代码创建了一个新的路由器 userRouter
,并定义了两个路由:一个处理 GET 请求到 /user
路径,另一个处理 GET 请求到 /user/:id
路径。然后,将 userRouter
作为中间件添加到 /user
路径,这意味着所有以 /user
开头的请求都将被路由到 userRouter
。
路由优先级
当多个路由定义匹配请求时,Express.js 会按照以下优先级顺序处理路由:
- 最具体 :具有最具体路径的路由具有最高优先级。
- 最长 :具有最长路径的路由具有更高优先级。
- 最早定义 :最早定义的路由具有更高优先级。
路由表
Express.js 维护一个路由表的内部列表,其中包含所有定义的路由。路由表是按优先级排序的,当请求到达时,Express.js 会遍历路由表并选择匹配请求的第一个路由。
5. Express.js 中间件使用
Express.js 中间件是一种强大的机制,用于在请求和响应生命周期中插入自定义逻辑。它允许您在处理请求之前或之后执行某些操作,从而为您的应用程序添加额外的功能。
5.1 内置中间件
Express.js 提供了一系列内置中间件,用于处理常见任务,例如:
- express.json(): 解析 JSON 请求体。
- express.urlencoded(): 解析 URL 编码的请求体。
- express.static(): 提供静态文件服务。
- express.cookieParser(): 解析 HTTP Cookie。
- express.session(): 启用会话管理。
使用内置中间件非常简单。只需将它们作为参数传递给 app.use()
方法即可:
const express = require('express');
const app = express();
// 解析 JSON 请求体
app.use(express.json());
// 解析 URL 编码的请求体
app.use(express.urlencoded({ extended: true }));
// 提供静态文件服务
app.use(express.static('public'));
5.2 自定义中间件
除了内置中间件,您还可以创建自己的自定义中间件。自定义中间件可以执行各种任务,例如:
- 验证请求
- 记录请求
- 缓存响应
- 添加自定义标头
创建自定义中间件非常简单。只需创建一个函数,并将其作为参数传递给 app.use()
方法即可:
const express = require('express');
const app = express();
// 创建一个自定义中间件来记录请求
const requestLogger = (req, res, next) => {
console.log(`Received a ${req.method} request to ${req.path}`);
next();
};
// 使用自定义中间件
app.use(requestLogger);
5.3 中间件堆栈
中间件在 Express.js 中以堆栈的方式执行。这意味着每个中间件都会按顺序执行,直到 next()
函数被调用。
中间件堆栈的顺序非常重要,因为它决定了请求和响应生命周期的执行顺序。例如,如果您想在解析请求体之前验证请求,则必须将验证中间件放在解析请求体中间件之前。
您可以使用 app.use()
方法将中间件添加到堆栈中。您还可以使用 app.get()
、 app.post()
和其他路由方法将中间件添加到特定路由中。
graph LR
subgraph Middleware Stack
A[Request] --> B[Middleware 1] --> C[Middleware 2] --> D[Middleware 3] --> E[Response]
end
中间件堆栈示例:
const express = require('express');
const app = express();
// 验证中间件
const authMiddleware = (req, res, next) => {
// 验证请求
if (req.headers.authorization) {
next();
} else {
res.status(401).send('Unauthorized');
}
};
// 路由处理程序
const routeHandler = (req, res) => {
// 处理请求
res.send('Hello, world!');
};
// 将验证中间件添加到堆栈中
app.use(authMiddleware);
// 将路由处理程序添加到堆栈中
app.get('/protected', routeHandler);
在上面的示例中,验证中间件将添加到中间件堆栈中。当请求到达 /protected
路由时,验证中间件将首先执行。如果请求被验证,则路由处理程序将被执行。否则,将返回 401 未授权响应。
6. Express.js 静态文件服务
6.1 静态文件配置
Express.js 提供了内置的静态文件服务功能,允许开发者轻松地提供静态文件,如 HTML、CSS、JavaScript、图像等。要配置静态文件服务,需要使用 express.static()
中间件。
const express = require('express');
const app = express();
// 配置静态文件服务,指定静态文件所在的目录
app.use(express.static('public'));
在上面的代码中, public
是静态文件所在的目录。当用户访问该目录中的文件时,Express.js 会自动提供这些文件。
6.2 静态文件访问
配置静态文件服务后,用户可以通过以下方式访问静态文件:
- 直接访问: 用户可以通过在浏览器中输入静态文件的 URL 直接访问它。例如,如果静态文件
index.html
位于public
目录中,用户可以通过输入http://localhost:3000/index.html
来访问它。 - 通过路由: 开发者也可以通过路由来访问静态文件。例如,以下路由将
/static
路径映射到public
目录:
app.use('/static', express.static('public'));
现在,用户可以通过输入 http://localhost:3000/static/index.html
来访问 index.html
文件。
6.2.1 设置静态文件缓存
为了提高性能,Express.js 允许开发者设置静态文件的缓存。可以通过 maxAge
选项来指定缓存时间,单位为毫秒。例如,以下代码将静态文件的缓存时间设置为 1 小时:
app.use(express.static('public', {
maxAge: 3600000
}));
6.2.2 设置静态文件根目录
默认情况下,Express.js 会使用 public
目录作为静态文件的根目录。开发者可以通过 root
选项来指定不同的根目录。例如,以下代码将静态文件的根目录设置为 static
目录:
app.use(express.static('public', {
root: 'static'
}));
6.2.3 设置静态文件扩展名
默认情况下,Express.js 会自动为静态文件添加扩展名。开发者可以通过 extensions
选项来指定要添加的扩展名。例如,以下代码将为静态文件添加 .html
和 .css
扩展名:
app.use(express.static('public', {
extensions: ['html', 'css']
}));
7. Express.js 模板引擎集成
7.1 模板引擎概述
模板引擎是一种将动态数据与模板文件相结合以生成最终 HTML 输出的工具。在 Express.js 中,模板引擎允许我们轻松地将应用程序数据呈现给用户。
7.2 EJS 模板引擎
EJS(嵌入式 JavaScript)是一种流行的模板引擎,它允许我们在模板文件中使用 JavaScript 代码。
安装 EJS
npm install ejs --save
使用 EJS
在 Express.js 中使用 EJS 非常简单:
// 引入 EJS 模块
const ejs = require('ejs');
// 设置模板引擎为 EJS
app.set('view engine', 'ejs');
// 渲染 EJS 模板
app.get('/', (req, res) => {
res.render('index', { title: '主页' });
});
7.3 Jade 模板引擎
Jade(现在称为 Pug)是一种另一种流行的模板引擎,它使用简洁的语法来生成 HTML 输出。
安装 Jade
npm install jade --save
使用 Jade
在 Express.js 中使用 Jade 也很简单:
// 引入 Jade 模块
const jade = require('jade');
// 设置模板引擎为 Jade
app.set('view engine', 'jade');
// 渲染 Jade 模板
app.get('/', (req, res) => {
res.render('index', { title: '主页' });
});
简介:Express4是Node.js中流行的Web应用框架,简化了构建Web应用程序的过程。本工具包提供了一个完整的指南,涵盖Express4的核心概念、安装和设置、路由处理、中间件使用、静态文件服务、模板引擎集成、错误处理和服务器启动。通过实践任务和代码示例,学生将掌握Express4的实际应用,并能够构建高效且可扩展的Web服务。