Nodejs的Express中间件

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-09-12 09:47 被阅读0次

一、中间件的概念

现实生活中的例子

在处理污水的时候，一般都要经过三个处理环节

image.png

处理污水的这三个中间处理环节，就可以叫做中间件

二、Express 中间件的调用流程

当一个请求到达Express 的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理

image.png

三、Express 中间件的格式

Express 的中间件，本质上就是一个 function 处理函数，Express中间件的格式如下

注意

中间件函数的形参列表中，必须包合 next 参数。而路由处理函数中只包含 req 和 res。

3.1、next函数作用

next 函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由

image.png

四、定中间件函数

可以通过如下的方式，定义一个最简单的中间件函数:

const express = require("express");

const app = express();

// 定义一个简单的中间件函数

const mv = function (req, res, next) {
  console.log("这是一个中间件");
  // 把流转关系转交给下一个中间件或者路由
  next();
};

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

五、全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件，示例代码如下

const express = require("express");

const app = express();

// 定义一个简单的中间件函数

const mv = function (req, res, next) {
  console.log("这是一个中间件");
  // 把流转关系转交给下一个中间件或者路由
  next();
};
// 全局生效中间件
app.use(mv);

app.get("/user", (req, res) => {
  console.log("调用了/user这个路由");
  res.end("成功");
});

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

image.png

5.1、定义多个全局中间件

const express = require("express");

const app = express();

// 全局生效中间件简写形式-----第一个中间件
app.use((req, res, next) => {
  console.log("调用了第一个全局中间件");
  next();
});
// 第二个中间件
app.use((req, res, next) => {
  console.log("调用了第二个全局中间件");
  next();
});
app.get("/user", (req, res) => {
  res.end("成功");
});

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

image.png

六、中间件的作用

多个中间件之间，共享同一份 req 和 res。基于这样的特性，我们可以在上游的中间件中，统一为 req 或 res 对象添加自定义的属性或方法，供下游的中间件或路由进行使用

image.png

6.1、体验中间件的作用

为req对象挂载自定义属性从而把时间共享给后面的所有路由

const express = require("express");

const app = express();

// 定义一个简单的中间件函数

const mv = function (req, res, next) {
  // 获取请到达服务器的时间
  const time = new Date();
  // 为req对象挂载自定义属性 从而把时间共享给后面的所有路由
  req.startTime = time;
  next();
};
// 全局生效中间件
app.use(mv);

app.get("/user", (req, res) => {
  console.log(req.startTime); //2023-09-10T10:55:44.099Z
  res.end("成功");
});

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

七、局部生效的中间件

不使用 app.use()定义的中间件，叫做局部生效的中间件，示例代码如下

7.1、单个中间件

const express = require("express");

const app = express();

const vm = function (req, res, next) {
  console.log("局部中间件生效了");
  next();
};
app.get("/user", vm, (req, res) => {
  res.end("成功");
});

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

7.2、多个中间件

const vm1 = function (req, res, next) {
  console.log("局部中间件一生效了");
  next();
};
const vm2 = function (req, res, next) {
  console.log("局部中间件二生效了");
  next();
};
// app.get("/user", vm1, vm2, (req, res) => {
//   res.end("成功");
// });
app.get("/user", [vm1, vm2], (req, res) => {
  res.end("成功");
});

八、中间件使用注意事项

一定要在路由之前注册中间件

客户端发送过来的请求，可以连续调用多个中间件进行处理

执行完中间件的业务代码之后，不要忘记调用 next()函数为了防止代码逻辑混乱

调用 next()函数后不要再写额外的代码

连续调用多个中间件时，多个中间件之间，共享 req 和res 对象

九、中间件的分类

为了方便大家理解和记忆中间件的使用，Express 官方把常见的中间件用法，分成了 5 大类，分别是

应用级别的中间件

路由级别的中间件

错误级别的中间件

Express内置的中间件

第三方的中间件

9.1、应用级别的中间件（挂载到app身上）

通过 app.use()或app.get() 或 app.post()，绑定到 app 实例上的中间件，叫做应用级别的中间件

app.use((req, res, next) => {
  next();
});
app.get("/user", vm1, (req, res) => {
  res.end("成功");
});

9.2、路由级别的中间件（挂载到router身上）

const express = require("express");

// 创建路由对象
const router = express.Router();

router.use(function (req, res, next) {
  console.log("Time:" + new Date());
  next();
});

9.3、错误级别的中间件

错误级别的中间件必须注册在所有的路由之后

错误级别中间件的作用：
专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题
格式：
错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是(err,req,res, next)

传统抛错

const express = require("express");

const app = express();

app.get("/user", (req, res) => {
  throw new Error("f服务器内部发生错误"); //抛出一个自定义的错误
  res.end("成功"); //不在执行
});

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

image.png

使用错误中间件

const express = require("express");

const app = express();

app.get("/user", (req, res) => {
  throw new Error("f服务器内部发生错误"); //抛出一个自定义的错误
  res.end("成功"); //不在执行
});
//错误级别的中间件
app.use(function (err, req, res, next) {
  // 在服务器打印错误信息
  console.log("error" + err.message);
  //向客户端响应错误相关内容
  res.end(err.message);
});

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

image.png

两种方式大家自己看下区别

十、Express的内置中间件

自 Express 4.16.0版本开始，Express 内置了3 个常用的中间件，极大的提高了 Express 项目的开发效率和体验

express.static 快速托管静态资源的内置中间件，例如: HTML 文件、图片、CSS 样式等(无兼容性)

express,json 解析JSON 格式的请求体数据(有兼容性，仅在4.16.0+ 版本中可用)

express.urlencoded 解析 URL-encoded 格式的请求体数据(有兼容性，仅在 4.16.0+ 版本中可用

const express = require("express");

const app = express();
//  配置解析 application/json 格式数据的内置中间件
app.use(express.json());
// 配置解析 application/x-ww-form-urlencoded格式数据的内置中间件
app.use(express.urlencoded({ extended: false }));

app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

10.1、express.urlencoded中间件

const express = require("express");

const app = express();
// 配置解析 application/x-ww-form-urlencoded格式数据的内置中间件
app.use(express.urlencoded({ extended: false }));

app.post("/user", (req, res) => {
  // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
  // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body);
  res.end("ok");
});
app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

我们利用postman发一个请求体json的post请求

image.png

打印结果

image.png

10.3、第三方的中间件

非 Express 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率
例:在express@4.16.0之前的版本中，经常使用 bodyparser 这个第三方中间件，来解析请求体数据。使用步骤如下:

运行 npm install body-parser 安装中间件

使用 require 导入中间件

用 app.use()注册并使用中间件

注意:Express内置的expressurlencoded 中间件，就是基于 body-parser 这个第三方中间件进一步封装出来的。

const express = require("express");

const app = express();
// 1.导入解析表单数据的中间件 body-parser
const parser = require("body-parser");
// 2. 使用 app.use() 注册中间件
app.use(parser.urlencoded({ extended: false }));

app.post("/user", (req, res) => {
  // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
  // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body);
  res.end("ok");
});
app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

我们利用postman发一个请求体json的post请求

image.png

打印结果

image.png

十一、自定义中间件

需求描述与实现步骤

自己手动模拟一个类似于 expressurl.encoded 这样的中间件，来解析 POST提交到服务器的表单数据

实现步骤:

定中间件

监听 req的 data 事件

监听req的end 事件

使用querystring 模块解析请求体数据

将解析出来的数据对象挂载为 req.body

将自定义中间件封装为模块

监听req 的 data 事件

在中间件中，需要监听req 对象的 data 事件，来获取客户端发送到服务器的数据如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以data 事件可能会触发多次，每一次触发 data事件时，获取到数据只是完整数据的一部分，需要手动对接收到的数据进行拼接。

监听req 的 end 事件

当请求体数据接收完毕之后，会自动触发req的end 事件因此，我们可以在 req的end 事件中，拿到并处理完整的请求体数据。

使用querystring 模块解析请求体数据

Node,js 内置了一个 querystring 模块，专门用来处理查询字符串。通过这个模块提供的 parse0 函数，可以轻松把查询字符串，解析成对象的格式。

将解析出来的数据对象挂载为 req.body

上游的中间件和下游的中间件及路由之间，共享同一份 req 和 res。因此，我们可以将解析出来的数据，挂载为 re的自定义属性，命名为 req.body，供下游使用。

完整代码

const express = require("express");

const app = express();
// 导入 Node.js 内置的 querystring 模块
const qs = require("querystring");
// 自定义中间件
app.use(function (req, res, next) {
  // 定义中间件具体的业务逻辑
  // 1.定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
  let str = "";
  // 2.监听 req 的 data 事件
  req.on("data", (chunk) => {
    str += chunk;
  });
  // 3.监听 req 的 end 事件
  req.on("end", () => {
    // 在str中就是完整的请求体数据
    console.log(str); //name=%E5%BC%A0%E4%B8%89&age=14
    // TODO 把字符串格式的请求体数据，解析成对象格式
    const body = qs.parse(str);
    console.log(body); //{ name: '张三', age: '14' }
    // 将解析出来的数据对象挂载为 req.body
    req.body = body;
    next();
  });
});

app.post("/user", (req, res) => {
  // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
  // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body);  //{ name: '张三', age: '14' }
  res.end("ok"); 
});
app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

将自定义中间件封装为一个独立的模块

image.png

custom-body-parser.js

// 导入 Node.js 内置的 querystring 模块
const qs = require("querystring");

const bodyParser = function (req, res, next) {
  // 定义中间件具体的业务逻辑
  // 1.定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
  let str = "";
  // 2.监听 req 的 data 事件
  req.on("data", (chunk) => {
    str += chunk;
  });
  // 3.监听 req 的 end 事件
  req.on("end", () => {
    // 在str中就是完整的请求体数据
    console.log(str); //name=%E5%BC%A0%E4%B8%89&age=14
    // TODO 把字符串格式的请求体数据，解析成对象格式
    const body = qs.parse(str);
    console.log(body); //{ name: '张三', age: '14' }
    // 将解析出来的数据对象挂载为 req.body
    req.body = body;
    next();
  });
};

module.exports = bodyParser;

index.js

const express = require("express");

const app = express();
// 引入自定义中间件
const customBodyParser = require("./custom-body-parser");
// 自定义中间件
app.use(customBodyParser);

app.post("/user", (req, res) => {
  // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
  // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body); //{ name: '张三', age: '14' }
  res.end("ok");
});
app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});
const express = require("express");

const app = express();
// 引入自定义中间件
const customBodyParser = require("./custom-body-parser");
// 自定义中间件
app.use(customBodyParser);

app.post("/user", (req, res) => {
  // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
  // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body); //{ name: '张三', age: '14' }
  res.end("ok");
});
app.listen(80, () => {
  console.log("express server running at http://127.0.0.1");
});

Nodejs的Express中间件

一、中间件的概念

现实生活中的例子

二、Express 中间件的调用流程

三、Express 中间件的格式

3.1、next函数作用

四、定中间件函数

五、全局生效的中间件

5.1、定义多个全局中间件

六、中间件的作用

6.1、体验中间件的作用

七、局部生效的中间件

7.1、单个中间件

7.2、多个中间件

八、中间件使用注意事项

九、中间件的分类

9.1、应用级别的中间件（挂载到app身上）

9.2、路由级别的中间件 （挂载到router身上）

9.3、错误级别的中间件

错误级别的中间件必须注册在所有的路由之后

传统抛错

使用错误中间件

两种方式大家自己看下区别

十、Express的内置中间件

10.1、express.urlencoded中间件

我们利用postman发一个请求体json的post请求

打印结果

10.3、第三方的中间件

我们利用postman发一个请求体json的post请求

打印结果

十一、自定义中间件

需求描述与实现步骤

实现步骤:

监听req 的 data 事件

监听req 的 end 事件

使用querystring 模块解析请求体数据

将解析出来的数据对象挂载为 req.body

完整代码

将自定义中间件封装为一个独立的模块

custom-body-parser.js

index.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

9.2、路由级别的中间件（挂载到router身上）