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() + '');
});