【备战春招】第15天 新版 Node.js+Express+Koa2 开发Web Server博客 10-5

课程名称： 新版 Node.js+Express+Koa2 开发Web Server博客

课程章节： 10-5 express 中间件

课程讲师： 双越

课程内容：

中间件机制

• 上一节课看到很多 app.use
• 代码中的 next 参数是什么？

代码演示

创建测试文件夹 express-test

文件夹中创建 app.js 文件

初始化 npm

npm init -y

安装 express

不使用脚手架，来使用express，因为里面东西有点多，妨碍学习中间件

npm i express

app.js

如：运行代码，访问 /api/get-cookie，后执行的步骤：

app.use() 第一个参数没有写路由的话，写的是函数的话，运行后会直接执行里面的函数。

next() 就是往下（代码下面），通过 app.use 或 app.get …，来注册的所有符合逻辑的函数

next()：通过 next() 来联系每一块函数

// 运行代码，以get 请求访问 /api/get-cookie 路由为演示，代码的执行步骤

const express = require("express");
// 本次http请求的实例
const app = express();

// app.use() 第一个参数如果没有写路由的话，都会走这个函数
// 执行1-因为没有写路由所以执行
app.use((req, res, next) => {
  console.log("请求开始...", req.method, req.url);
  
  // 往下查找符合访问 /api/get-cookie 路由的逻辑函数
  next();
});

// 执行2-因为没有写路由所以执行
app.use((req, res, next) => {
  // 假设在处理 cookie
  req.cookie = {
    userId: "abc123",
  };

  next();
});

// 执行3-因为没有写路由所以执行
app.use((req, res, next) => {
  // 假设处理 post data
  // 异步
  setTimeout(() => {
    req.body = {
      a: 100,
      b: 200,
    };

    next();
  });
});

// app.use() 不论以什么方法，访问这个路由，都执行这个逻辑
// 执行4-因为 /api/get-cookie 的父路由 /api 符合 这个路由所以执行
app.use("/api", (req, res, next) => {
  console.log("处理 /api 路由");

  // 继续往下查找符合访问 /api/get-cookie 路由的逻辑函数
  next();
});

// 以 get 方法访问路由的时候会处理这个逻辑
// 执行5-因为 /api/get-cookie 是get 请求，而父路由 /api 符合 这个路由所以执行
app.get("/api", (req, res, next) => {
  console.log("get /api 路由");

  next();
});

// 以 post 方法访问路由的时候会处理这个逻辑
app.post("/api", (req, res, next) => {
  console.log("post /api 路由");

  next();
});

// 执行6-因为 /api/get-cookie 是get 请求，这里符合所以执行
app.get("/api/get-cookie", (req, res, next) => {
  console.log("get /api/get-cookie");
  res.json({
    errno: 0,
    data: req.cookie,
  });
    
   // 下面代码不执行，因为没有调用 nex()
});



app.post("/api/get-post-data", (req, res, next) => {
  console.log("post /api/get-post-data");
  res.json({
    errno: 0,
    data: req.body,
  });
});

app.use((req, res, next) => {
  console.log("处理 404");
  res.json({
    errno: -1,
    msg: "404 not fount",
  });
});

app.listen(3000, () => {
  console.log("server is running on port 3000");
});

其他请求也是和get请求一样

中间件是什么？

就是通过 app.xxx 注册的函数就是中间件，并且是函数，函数参数要是 (req,res,next)=>{}

简单来说中间件就是一个函数。

中间件注册形式（写法）

• 直接通过 app.use() 里面直接写函数的注册形式

  const express = require("express");
  // 本次http请求的实例
  const app = express();
  
  app.use((req, res, next) => 
    next();
  });
  

• 通过 app.xxx 注册，第一个参数的路由，第二个是函数的形式

  const express = require("express");
  // 本次http请求的实例
  const app = express();
  
  app.use('/api',(req, res, next) => 
    next();
  });
  
  // 或
  
  app.get('/api',(req, res, next) => 
    next();
  });
  

• 通过 app.xxx 注册，第一个参数是路由，后面是多个中间件

  const express = require("express");
  // 本次http请求的实例
  const app = express();
  
  // 模拟登录验证-中间件
  function loginCheck(req, res, next) {
    console.log("模拟登录成功");
  
    // 模拟异步
    setTimeout(() => {
      next();
    });
  }
  
  app.get("/api/get-cookie", loginCheck, ..., (req, res, next) => {
    console.log("get /api/get-cookie");
    res.json({
      errno: 0,
      data: req.cookie,
    });
  });
  

课程收获：

1. 明白中间件是什么
2. 知道 next() 函数是什么