Express中间件工作原理介绍

Express中间件工作原理介绍

• 中间件是Express框架学习中最难的部分，同时也是最为核心的技术，我们的学习路线如下
  • 1.什么是中间件
  • 2.Express中间件的本质及工作原理
  • 3.自定义解析post请求参数的中间件
  • 4.第三方中间件使用

1.1-什么是中间件

• 下图是一个自来水净化的过程，这张图可以更好的理解什么是中间件
• 水库的水并不是直接取出来就送到用户的家中使用，而是经过一些净化过滤处理之后才送到用户的家中，在这个过程中水还是水，本质上还是同一个东西，但是却多了一些东西
  • 水库中原始的水可以理解为是浏览器的原始请求request
  • 最终用户喝到的水可以理解为是express最终获取的请求request
  • 而过滤中的一些加絮凝剂、过滤池等操作就是中间件，可以理解为给我们原始的请求request添加了一些属性或者方法（如post参数解析之后的对象等）

1.2-中间件的本质及工作原理

• 1.中间件其实就是一个函数

  • function(req,res,next){ req:请求对象 res：响应对象 next：下一个中间件 }

• 2.Express如何使用中间件?:三种方式

  ​ app.use('pathname',中间件) : ​ pathname不写: 任何请求路径都会执行这个中间件 ​ pathname写了：任何以pathname开头的请求路径都会执行这个中间件 ​ app.get('pathname',中间件) : 请求路径为pathname的get请求会执行这个中间件 ​ app.post('pathname',中间件) : 请求路径为pathname的post请求会执行这个中间件

• 3.中间件工作流程（Express处理网络请求流程）

​ a.从上往下依次匹配请求路径，如果匹配成功则执行该中间件 ​ b.如果这个中间件中调用了：next() ，则会继续往下匹配 ​ c.如果所有的中间件都无法匹配，则会自动进入一个兜底的中间件响应返回404 not found错误

//导入模块
const express = require('express');
//创建服务器
let app = express();

/*1.什么是express中间件？： 其实就是一个函数（这个函数有三个参数）
    function(req,res,next){  
        req:请求对象  
        res：响应对象  
        next：下一个中间件 
    }
*/

/*2.express如何使用中间件?: 三种方式  
    app.use('pathname',中间件) :
        pathname不写: 任何请求路径都会执行这个中间件
        pathname写了：任何以pathname开头的请求路径都会执行这个中间件
    app.get('pathname',中间件) :  请求路径为pathname的get请求会执行这个中间件
    app.post('pathname',中间件) :  请求路径为pathname的post请求会执行这个中间件
*/

/* 3.express处理网络请求的流程
    a.从上往下依次匹配请求路径，如果匹配成功则执行该中间件
    b.如果这个中间件中调用了：next() ，则会继续往下匹配
    c.如果所有的中间件都无法匹配，则会自动进入一个兜底的中间件响应返回404 not found错误
*/

app.use('/abc',(req,res,next)=>{
    //污水净化第一步：添加絮凝剂
    console.log(11111);
    req.a = '添加了絮凝剂';
    next();
});


app.use('/abc',(req,res,next)=>{
    //污水净化第二步：添加活性炭
    console.log(22222);
    req.b = '添加活性炭';
    next();
});

app.post('/abc',(req,res,next)=>{
    console.log(33333);
    next();
});

app.get('/abc',(req,res,next)=>{
    console.log(44444);
    //看下污水净化到这一步加了什么
    console.log(req.a);
    console.log(req.b);
    res.send('hello');
});



//express底层有一个默认的兜底中间件，如果上面所有的中间件都无法匹配或者没有结束响应，则会进入这个中间件
//自定义一个兜底中间件，覆盖默认的
app.use((req,res)=>{
    console.log(55555);
    
    res.send('你的路径是不是写错啦');
});



//开启服务器
app.listen(3000, () => {
    console.log('success');
});

1.3-自定义解析post请求参数中间件

• 使用postman测试

• bodyParse

const querystring = require('querystring');

/*  导出中间件(函数)
    第一个参数：请求对象
    第二个参数：完成回调
        * postObject:post请求参数对象
*/
module.exports = (req, res, next) => {
    /*如果本次请求是post请求，则解析post请求参数，
    并且将解析好的参数对象作为req的属性传递给下一个中间件*/
    if (req.method == 'POST') {
        //1.1 给req注册一个data事件
        let postData = "";
        req.on('data', function (chuck) {
            postData += chuck;
        });
        //1.2给req注册一个end事件
        req.on('end', function () {
            //1.3 使用 querystring模块解析post参数
            let postObjc = querystring.parse(postData);
            //将解析好的参数对象添加到req的属性中
            req.body = postObjc;
            //执行下一个中间件
            next();
        });
    }

}

• index.js

//导入模块
const express = require('express');
//创建服务器
let app = express();

//使用中间件
//任何请求都会进入我们自己写的中间件，并且只要是post请求就会帮你解析好参数放入req.body中
app.use(require('./bodyParse.js'));

app.post('/abc',(req,res,next)=>{
    console.log(req.body);
    //告诉客户端我收到的参数
    res.send(req.body);
});

app.post('/efg',(req,res,next)=>{
    console.log(req.body);
    //告诉客户端我收到的参数
    res.send(req.body);
});

//开启服务器
app.listen(3000, () => {
    console.log('success');
});