Node学习（五）021-处理静态资源——中间件是express最大特色-app.use() & 有三个基本参数req、res、next & 自定义中间件处理静态资源文件-sendFile异步读取文件
Node学习（五）021-处理静态资源——中间件是express最大特色-app.use() & 有三个基本参数req、res、next & 自定义中间件处理静态资源文件-sendFile异步读取文件
2.3 处理静态资源文件
方案一：使用 app.get(‘*’, (req, res) => { 根据请求的url做出响应 }); ---- 不推荐
方案二：使用官网提供的中间件的方法来处理。
const express = require('express');
const app = express();
app.listen(3000, () => console.log('又开启了'));
// 通过如下代码就可以将 manager 目录下的图片、CSS 文件、JavaScript、html文件 对外开放访问了
app.use(express.static('manager'));
// 处理浏览器的请求，响应一个index.html 效果一
// app.get('/index.html', (req, res) => {
// res.sendFile(__dirname + '/manager/index.html');
// });
效果一
实例
实例1：01-处理静态资源文件.js
const express = require('express');
const app = express();
app.listen(3000, () => console.log('又开启了'));
// 处理 /index.html
// app.get('/index.html', (req, res) => {
// res.sendFile(__dirname + '/manager/index.html');
// });
app.get('/time', (req, res) => {
res.send(Date.now() + ''); // 21423523 + ''
});
// * 表示所有的GET请求
app.get('*', (req, res) => {
// console.log(req.url);
res.sendFile(__dirname + '/manager' + decodeURIComponent(req.url));
});
展示效果
2.4 中间件
为了理解中间件，我们先来看一下我们现实生活中的自来水厂的净水流程。
- 在上图中，自来水厂从获取水源到净化处理交给用户，中间经历了一系列的处理环节
- 我们称其中的每一个处理环节就是一个中间件。
- 这样做的目的既提高了生产效率也保证了可维护性。
express中间件是一个特殊的url地址处理函数
- 中间件是 express 的最大特色，也是最重要的一个设计
- 一个 express 应用，就是由许许多多的中间件来完成的
- 中间件就是一个函数，中间件函数要当做
app.use();的参数，这样来使用 - 中间件函数中有三个基本参数， req、res、next
- req就是请求相关的对象，它和后面用到的req对象是一个对象
- res就是响应相关的对象，它和后面用到的res对象也是一个对象
- next：它是一个函数，调用它将会跳出当前的中间件函数，执行后续代码；如果不调用next，则会在当前中间件卡住
错误的原因是，因为有两次响应，前面一次响应设置了响应头，后面又做出了响应；做出响应之后，有设置了响应头，所以就出现这个错误了。
以后如果遇到这个问题，首先思考当前这次请求是否有多次响应。
实例
利用 Express 托管静态文件 - Express 中文文档 | Express 中文网 (expressjs.com.cn)
例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：
// 中间件
app.use(express.static('public'))
现在，你就可以访问 public 目录中的所有文件了：
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
例子
02-处理静态资源文件.js
const express = require('express');
const app = express();
app.listen(3000, () => console.log('又开启了'));
// 通过如下代码就可以将 manager 目录下的图片、CSS 文件、JavaScript、html文件 对外开放访问了
// https://www.expressjs.com.cn/starter/static-files.html
app.use(express.static('manager')); // 此为中间件，详情内容见上述链接
// 处理浏览器的请求，响应一个index.html
// app.get('/index.html', (req, res) => {
// res.sendFile(__dirname + '/manager/index.html');
// });
app.get('/time', (req, res) => {
res.send(Date.now() + '');
});
2.5 自定义中间件处理静态资源文件的读取及响应
思路：
- 如果发现请求的是静态资源（url以
/assets/开头），则读取他们，并返回。 - 如果不是静态资源，则交给下一个中间件处理（next）
app.listen(3000, .....);
// 下面开始写中间件
app.use((req, res, next) => {
// console.log(req.url);
if (req.url.startsWith('/lib') || req.url.startsWith('/images')) {
// 满足条件，说明是静态资源
// fs.readFile(path.join(__dirname, req.url), (err, data) => {
// res.end(data);
// })
// sendFile是异步读取文件，并响应读取的结果
res.sendFile(__dirname + '/manager' + decodeURIComponent(req.url));
} else {
// 不满足条件，交给下一个中间件，否则服务器会卡住
next();
}
});
app.get('/index.html', (req, res) => {
res.sendFile(__dirname + '/manager' + decodeURIComponent(req.url));
});
app.get('/time', (req, res) => {
res.send(Date.now() + '');
});
实例
03-自定义中间件处理静态资源文件.js
const fs = require('fs');
const express = require('express');
const app = express();
app.listen(3000, () => console.log('又开启了'));
// 自定义中间件，处理静态资源文件
app.use((req, res, next) => {
console.log(req.url);
if (req.url.startsWith('/lib') || req.url.startsWith('/images')) {
res.sendFile(__dirname + '/manager' + decodeURIComponent(req.url));
} else {
next(); // 调用next函数，表示当前的中间件处理完毕，代码向后执行即可
}
});
app.get('/index.html', (req, res) => {
res.sendFile(__dirname + '/manager' + decodeURIComponent(req.url));
});
app.get('/time', (req, res) => {
res.send(Date.now() + '');
});
方案二：
app.use([请求的url的开头部分], 中间件函数);
const fs = require('fs');
const express = require('express');
const app = express();
app.listen(3000, () => console.log('又开启了'));
// 自定义中间件，处理静态资源文件
app.use('/lib', (req, res, next) => {
console.log(req.url); // 这里req.url不再包含 /lib 了
res.sendFile(__dirname + '/manager/lib' + decodeURIComponent(req.url));
});
app.use('/images', (req, res, next) => {
res.sendFile(__dirname + '/manager/images' + decodeURIComponent(req.url));
});
app.get('/index.html', (req, res) => {
res.sendFile(__dirname + '/manager' + decodeURIComponent(req.url));
});
app.get('/time', (req, res) => {
res.send(Date.now() + '');
});