express中间件（简介，流程，分类介绍）

最新推荐文章于 2024-04-26 13:07:22 发布

歪大梨

最新推荐文章于 2024-04-26 13:07:22 发布

阅读量819

点赞数 1

分类专栏：前端文章标签： express 中间件服务器

本文链接：https://blog.csdn.net/weixin_64037609/article/details/127435035

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

中间件简介

中间件（Middleware），特指业务流程的中间处理环节（处理请求）。
中间件的特点：
- 1.中间件一般都要在响应数据之前执行
- 2.中间件之间存在传递关系上一个中间件执行完之后传递给下一个中间件。

中间件的执行流程

当一个请求到达Express的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理。但是必须要有一个最终的匹配路由进行响应给客户端结果

express中间件的分类

共分为三类
- 自定义中间件
- 内置中间件
- 第三方中间件

express自定义中间件

自定义中间件就是我们自己编写的 express中间件
写法：服务器对象.use(中间件函数)

中间件的写法类似于路由其实本质上中间件就是一种路由的升级

let express = require("express");
let app = express();

//使用自定义中间件
app.use((req,res,next)=>{
    //1.对请求和响应进行一些操作 例如 设置MIME类型
    res.type(".txt")
    //2.将操作流程 传递给下面的中间件/路由 通过next形参 来进行传递
    //next形参接收到的是 一个函数  我们调用这个函数 不需要传参 就可以进行传递了
    next();
})
app.get("/index",(req,res)=>{
    res.send("xxx")
})

app.listen(3000);

express内置中间件

内置中间件都是express 自带的可以直接使用

static

用法：服务器对象.use(express.static("资源文件夹路径"))

接收post提交的数据的中间件

接收post提交数据需要用到两个中间件——express.urlencoded 和 express.json
在接收post提交数据的时候上述两个中间件都得用

用法：

let express = require("express");
let app = express();
//urlencoded中间件 是用来 接收 post请求的请求头 设置为 content-type:application/x-www-form-urlencoded   提交过来的数据 是 查询字符串
//中间件中 传入的实参对象 就是用来 选择 使用什么工具 来格式化查询字符串的 如果值为true 表示使用express 自带的 qs工具 进行格式化(不推荐)  如果值为false 表示使用node的querystring来格式化(推荐)
app.use(express.urlencoded({extended:false}));
//json中间件 是用来 接收 post请求头 设置为 content-type:application/json 
//提交过来的数据 是 json格式的对象  可以直接使用 不需要格式化 所以不传参
app.use(express.json())

//再之后 我们就可以直接获取到 post提交的数据了   通过 req形参的body属性来获取
app.post("/index",(req,res)=>{
    console.log(req.body);
})

app.listen(3000)

第三方中间件

定义：第三方中间件就是由其他人封装好并上传到 npm服务器中的中间件。我们如果想使用只需要到npm上下载并适应即可
serve-favicon
- 之后大家如果在实际开发中用到了 npm中的模块包可以直接在npm官网中搜索模块包并查阅其说明文档来了解模块的用法
  - 看文档的方法
    - 找关键词——install/installation（安装和引入方式）、API（当前模块提供的操作方法）、usage/example（示例代码）
- 安装方式
  - npm i serve-favicon
- 用法
  - ```
  //1.引入express
  let express = require("express");
  //2.引入中间件
  let fav = require("serve-favicon");
  
  let app = express();
  //3.使用中间件
  app.use(fav("小图标路径",{maxAge:保质期时长（单位为ms）}))
  //注意：第二个参数可以不设置 为可选参数
```
- serve-favicon 图标需要强制刷新（ctrl+f5/ctrl+fn+f5）

svg-captcha

这个中间件是用来给前端浏览器页面生成图形验证码的
如果npm打不开（境外服务器）可以查阅国内的镜像网站——npmmirror 中国镜像站
安装方式
- npm i svg-captcha

方法1：svg.create()

用法：

//1.引入express
let express = require("express");
//2.引入中间件
let svg = require("svg-captcha");

let app = express();
//3.使用中间件
let code = svg.create({
    size:数字//字符验证码中 字符的个数,
    ignoreChars:"指定的字符集合"//过滤掉的字符 这些字符将不会出现在随机验证码中,
    noise:数字//干扰线条数,
    color:true/false//字体颜色 如果设置为false 默认为灰色 如果设置为true 则还要设置验证码    背景颜色 才能生效
    background:"颜色值" //验证码svg图片的背景色
})

方法2：svg.createMathExpr()

用法：

//1.引入express
let express = require("express");
//2.引入中间件
let svg = require("svg-captcha");

let app = express();
//3.使用中间件
let code = svg.createMathExpr({
	mathMin:数字//数学算式中的随机数数值的下限
    mathMax:数字//数学算式中的随机数数值的上限
    mathOpreator:"+/-/+-"//数学算式的操作符 +- 表示随机加减运算
})