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() + ''); // + '' }); // * 表示所有的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() + ''); }); 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-nodejs/10850.html