第2章 Express 基础（二）
4 中间件简介
中间件是 Express 应用程序中执行的函数。每个中间件函数可以处理请求和响应对象，并决定是否将控制权交给下一个中间件。
中间件基本示例：
// 一个简单的日志中间件
app.use((req, res, next) => {
console.log(`${req.method} ${req.url}`);
next(); // 将控制权交给下一个中间件
});
// 定义一个处理 GET 请求的路由
app.get('/', (req, res) => {
res.send('Hello, world!');
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
代码详解：
app.use((req, res, next) => {...});：定义一个全局中间件，记录每个请求的方法和 URL，并调用next()将控制权交给下一个中间件或路由处理程序。- 中间件的执行顺序与它们在代码中的定义顺序相同。
5 内置中间件
Express 提供了一些内置中间件，用于处理常见任务，例如解析 JSON 请求体和提供静态文件服务。
解析 JSON 请求体：
// 解析 JSON 请求体中间件
app.use(express.json());
app.post('/data', (req, res) => {
// 访问请求体中的数据
const data = req.body;
res.send(`Received data: ${JSON.stringify(data)}`);
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
提供静态文件服务：
// 提供 public 目录下的静态文件
app.use(express.static('public'));
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
将静态文件（例如 HTML、CSS 和 JavaScript 文件）放在 public 目录下，可以通过 http://localhost:3000/filename 访问。
如在public 下面放入index.html文件，内容如下：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Index.html
</body>
</html>
6 自定义中间件
你可以创建自己的中间件来实现特定功能。例如，一个简单的请求日志中间件可以记录请求的时间戳和路径。
示例：
// 自定义日志中间件
const requestLogger = (req, res, next) => {
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] ${req.method} ${req.url}`);
next();
};
// 使用自定义中间件
app.use(requestLogger);
// 定义一个处理 GET 请求的路由
app.get('/', (req, res) => {
res.send('Hello, world!');
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
代码详解：
- 自定义中间件
requestLogger记录每个请求的时间戳、方法和 URL。 - 将
requestLogger中间件添加到应用程序中，使其在每个请求时执行。
7 模板引擎入门
模板引擎允许我们在服务器端生成动态 HTML 页面。Express 支持多种模板引擎，如 EJS、Pug 和 Handlebars。
示例（使用 EJS）：
首先安装 EJS：
npm install ejs --save
配置 Express 使用 EJS 作为模板引擎：
// 设置 EJS 为模板引擎
app.set('view engine', 'ejs');
// 定义一个路由渲染 EJS 模板
app.get('/hello', (req, res) => {
res.render('hello', { name: 'Express' });
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
在项目的 views 目录下创建一个名为 hello.ejs 的文件：
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, <%= name %>!</h1>
</body>
</html>
代码详解：
app.set('view engine', 'ejs');：配置 Express 使用 EJS 作为模板引擎。res.render('hello', { name: 'Express' });：渲染views目录下的hello.ejs模板，并传递数据{ name: 'Express' }。
通过本章内容，读者应该能够理解并掌握 Express 的基本用法，包括路由的定义和使用、中间件的应用、模板引擎的集成以及静态文件服务的提供。在接下来的章节中，我们将探讨 Express 的高级功能和实践技巧。
原文地址：https://blog.csdn.net/imdeity/article/details/140271519
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！