【精选】Node.js笔记总结(day4)

文章目录

• • Node第四天
  • • • 今日目标
      • 1. Express 路由
      • • 1.1 路由的概念
        • 1.2 路由的使用
      • 2. Express 中间件
      • • 2.1 中间件的概念
        • 2.2 Express 中间件的初体验
        • 2.3 中间件的分类
        • 2.4 自定义中间件
      • 3. 使用 Express 写接口
      • • 3.1 创建基本的服务器
        • 3.2 创建 API 路由模块
        • 3.3 编写 GET 接口
        • 3.4 编写 POST 接口
        • 3.5 CORS 跨域资源共享
        • 3.6 JSONP 接口

Node第四天

今日目标

• 能够使用 express 路由精简项目结构
• 能够使用常见的 express 中间件
• 能够使用 express 创建 API 接口
• 能够在 express 中启用 cors 跨域资源共享

1. Express 路由

1.1 路由的概念

• 什么是路由

  广义上来讲，路由就是映射关系。

• 现实生活中的路由

  

• Express 中的路由

  在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系。

  Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、处理函数，格式如下：

  app.METHOD(PATH, HANDLER)
  

• Express 中的路由的例子

  // 匹配 GET 请求，并且请求的 URL 地址为 /
  app.get('/', (req, res) => {
    res.send('this is a get request')
  })
  
  // 匹配 POST 请求，并且请求的 URL 地址为 /
  app.post('/', (req, res) => {
    res.send('this is a post request')
  })
  

• 路由的匹配过程

  每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。

  在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的 URL 同时匹配成功，则 Express 会将这次请求，转 交给对应的 function 函数进行处理。

  

​ 路由匹配注意点：

​ 1、按照定义的先后顺序进行匹配

​ 2、请求类型和请求的地址同时匹配成功，才会调用对应的处理函数

1.2 路由的使用

• 最简单的用法
  在 Express 中使用路由最简单的方式，就是把路由挂载到 app 上，示例代码如下：

  // 挂载路由
  app.get("/", (req, res) => {
    res.send("this is a get request");
  });
  
  app.post('/',(req, res) => {
    console.log('this is a post request');
  })
  

• 模块化路由

  为了方便对路由进行模块化的管理，Express 不建议将路由直接挂载到 app 上，而是推荐将路由抽离为单独的模块。 将路由抽离为单独模块的步骤如下：

  1、创建路由模块对应的 .js 文件

  2、调用 express.Router() 函数创建路由对象

  3、向路由对象上挂载具体的路由

  4、用 module.exports 向外共享路由对象

  5、使用 app.use() 函数注册路由模块

• 创建路由模块

  const express = require("express");
  
  const router = express.Router();
  
  router.get("/user/list", (req, res) => {
    res.send("this is a get request");
  });
  
  router.post("/user/add", (req, res) => {
    res.send("this is a post request");
  });
  
  module.exports = router;
  

• 注册路由模块

  // 导入路由模块
  const useRouter = require('./03-router')
  // app.use() 的作用是用来注册全局的中间件
  // 使用 app.use() 注册路由
  app.use(useRouter)
  

• 为路由模块添加前缀

  类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单：

  // 导入路由模块
  const useRouter = require("./03-router");
  // 使用 app.use() 注册路由
  app.use("/api", useRouter);
  

2. Express 中间件

2.1 中间件的概念

• 什么是中间件

  中间件(Middleware )，特指业务流程的中间处理环节。

• 现实生活中的例子

  在处理污水的时候，一般都要经过三个处理环节，从而保证处理过后的废水，达到排放标准。

​

​

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

• Express 中间件的调用流程

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

  

• Express 中间件的格式

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

  

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

• next 函数的作用

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

2.2 Express 中间件的初体验

• 定义中间件函数

  可以通过如下代码，定义一个最简单的中间件函数：

  // 定义一个最简单的中间件函数
  const mw = (req, res, next) => {
    console.log("这是最简单的中间件");
    // 把流转关系交给下一个中间件，或是路由
    next()
  }
  

• 全局生效的中间件

  客户端发起的任何请求，到达服务器之后，都会触发的中间件，就叫做全局生效的中间件。

  通过调用 app.use(中间件函数)，即可注册一个全局生效的中间件，示例代码如下：

  // 将 mw 注册为全局生效的中间件
  app.use(mw);
  

• 定义全局中间件的简化形式

  // 定义简化的全局中间件
  app.use((req, res, next) => {
    console.log("简化版全局中间件");
    next()
  })
  

• 中间件的作用

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

  

  // 定义简化的全局中间件
  app.use((req, res, next) => {
    // 获取到请求到达服务器的时间
    const time = Date.now();
    // 为 req 对象，挂载自定义属性，从而把时间共享给后面所有的路由
    req.startTime = time;
    next();
  });
  
  app.get("/", (req, res) => {
    res.send("Home Page" + req.startTime);
  });
  
  app.get("/user", (req, res) => {
    res.send("User Page" + req.startTime);
  });
  
  app.listen(80, () => {
    console.log("express server is running");
  });
  

• 定义多个全局中间件

  可以使用 app.use() 连续定义多个全局中间件，客户端请求到达服务器之后，会按照中间件定义的先后顺序依次进行调用，代码如下：

  // 定义第一个全局中间件
  app.use((req, res, next) => {
    console.log("调用了第一个全局中间件");
    next()
  })
  
  // 定义第二个全局中间件
  app.use((req, res, next) => {
    console.log("调用了第二个全局中间件");
    next()
  })
  
  // 定义一个路由
  app.get('/user', (req, res) => {
    res.send('User page')
  })
  

• 局部生效的中间件

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

  // 定义中间件函数
  const mw1 = (req, res, next) => {
    console.log("调用了局部生效的中间件");
    next();
  };
  
  // 创建路由
  // mw1 这个中间件只在当前路由中生效，这种用法属于“局部中间件”
  app.get("/", mw1, (req, res) => {
    res.send("Home Page");
  });
  
  // mw1 不会影响到下面这个路由
  app.get("/user", (req, res) => {
    res.send("User Page");
  });
  

• 定义多个局部中间件

  可以在路由中，通过如下两种等价的方式，使用多个局部中间件：

  // 定义中间件函数
  const mw1 = (req, res, next) => {
    console.log("调用了第一个局部生效的中间件");
    next();
  };
  
  const mw2 = (req, res, next) => {
    console.log("调用了第二个局部生效的中间件");
    next();
  };
  
  // 方式一
  app.get("/", mw1, mw2, (req, res) => {
    res.send("Home Page");
  });
  
  // 方式二
  app.get("/", [mw1, mw2], (req, res) => {
    res.send("Home Page");
  });
  

• 了解中间件的5个使用注意事项：

  • 一定要在路由之前注册中间件
  • 客户端发送过来的请求，可以连续调用多个中间件进行处理
  • 执行完中间件的业务代码之后，不要忘记调用 next() 函数
  • 为了防止代码逻辑混乱，调用 next() 函数后不要再写额外的代码
  • 连续调用多个中间件时，多个中间件之间，共享 req 和 res 对象

2.3 中间件的分类

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

  • 应用级别的中间件
  • 路由级别的中间件
  • 错误级别的中间件
  • Express 内置的中间件
  • 第三方的中间件

• 应用级别的中间件

  通过 app.use() 或 app.METHOD() 函数，绑定到 app 实例上的中间件，叫做应用级别的中间件，代码示例如下：

  // 应用级别中间件 （全局中间件）
  app.use((req, res, next) => {
    next()
  })
  
  // 应用级别中间件（局部中间件）
  app.get('/', mw, (req, res) => {
    res.send('Home Page')
  })
  

• 路由级别中间件

  绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过，应用级别中间件是绑定到 app 实例上，路由级别中间件绑定到 router 实例上，代码示例如下：

  const app = express()
  const router = express.Router()
  
  router.use((req, res, next) => {
    console.log('Time:', Date.now())
    next()
  })
  
  app.use('/', router)
  

• 错误级别的中间件

  作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。

  格式：错误级别的中间件 function 处理函数，必须有 4 个形参，形参顺序从前到后，分别是 (err, req, res, next)。

  app.get("/", (req, res) => {
    // 人为制造错误
    throw new Error("服务器内部发生了错误");
    res.send("Home Page");
  });
  
  // 定义错误级别中间件，防止程序崩溃
  app.use((err, req, res, next) => {
    console.log(e3err.message);
    res.send(err.message);
  });
  

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

• Express内置的中间件

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

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

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

// 配置解析 application/json 格式数据的内置中间件
app.use(express.json())

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

express.json() 演示代码：

// 注意：除了错误级别的中间件，其他的中间件，必须在路由之前进行配置
// 通过 express.json(）这个中间件，解析表单中的 JSON 格式的数据
app.use(express.json())

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

express.urlencoded() 演示代码：

// 通过 express. urlencoded(）这个中间件，来解析 表单中的 url-encoded 格式的数据
app.use(express.urlencoded({ extended: false }));

app.post("/book", (req, res) => {
  // 在服务器端，可以通过 req,body 来获取 JSON 格式的表单数据和 url-encoded 格式的数据
  console.log(req.body);
  res.send("ok");
});

• 第三方的中间件

非 Express 官方内置的中间件，而是由第三方开发出来的 Express 中间件，叫做第三方中间件。在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率。

例如：除了使用 express.urlencoded 这个内置中间件来解析请求体数据，还可以使用 body-parser 这个第三方中间件，来解析请求体数据。使用步骤如下：

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

2、使用 require() 导入中间件

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

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

演示代码：

// 导入第三方中间件 body-parser
const parser = require("body-parser");

// 注册为全局中间件
app.use(parser.urlencoded({ extended: false }));

app.post("/user", (req, res) => {
  console.log(req.body);
  res.send("ok");
});

2.4 自定义中间件

• 需求描述与实现步骤

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

  步骤：

  • 定义中间件
  • 监听 req 的 data 事件
  • 监听 req 的 end 事件
  • 使用 querystring 模块解析请求体数据
  • 将解析出来的数据对象挂载为 req.body
  • 将自定义中间件封装为模块

• 定义中间件

  使用 app.use() 来定义全局生效的中间件，代码如下：

  // 自定义中间件
  app.use((req, res, next) => {
    // 业务逻辑
  });
  

• 监听 req 的 data 事件

  在中间件中，需要监听 req 对象的 data 事件，来获取客户端发送到服务器的数据。

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

  // 定义变量，用来存储客户端发送过来的请求体数据
  let str = "";
  // 监听 req 对象的 data 事件
  req.on("data", (thunk) => {
    // 拼接请求体数据，隐式转换为字符串
    str += thunk;
  });
  

• 监听 req 的 end 事件

  当客户端最终把所有数据发送到服务器之后，会自动触发 req 的 end 事件。

  因此，我们可以在 req 的 end 事件中，拿到并处理完整的请求体数据。示例代码如下：

   // 监听 req 的 end 事件 (请求体发送完毕会触发)
  req.on("end", () => {
    // 打印完整的请求体数据
    console.log(str);
  });
  

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

  Node.js 内置了一个 querystring 模块，专门用来处理查询字符串。通过这个模块提供的 parse() 函数，可以轻松把 查询字符串，解析成对象的格式。示例代码如下：

  // 导入处理 querystring 的 Node.js 模块
  const qs = require('querystring')
  
  // 调用 qs.parse() 方法，把接收到的字符串解析为对象
  const body = qs.parse(str)
  

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

  为了方便在后续的业务处理流程中，能够直接访问当前中间件解析出来的请求体对象，我们将解析出来的数据，挂载 为 req 的自定义属性，命名为 req.body。示例代码如下：

  const body = qs.parse(str);
  req.body = body;
  next();
  

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

  为了优化代码的结构，我们可以把自定义的中间件函数，封装为独立的模块，示例代码如下：

  const qs = require("querystring");
  
  const bodyPaser = (req, res, next) => {
    // 业务逻辑
    let str = "";
    req.on("data", (thunk) => {
      str += thunk;
    });
  
    // 监听 req 的 end 事件 (请求体发送完毕会触发)
    req.on("end", () => {
      // 打印完整的请求体数据
      // console.log(str);
      // 调用 qs.parse() 方法，把接收到的字符串解析为对象
      const body = qs.parse(str);
      req.body = body;
      next();
    });
  };
  
  module.exports = bodyPaser;
  

3. 使用 Express 写接口

3.1 创建基本的服务器

const express = require("express");

const app = express();

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

3.2 创建 API 路由模块

// apiRouter.js 路由模块
const express = require("express");
const router = express.Router();
// 在这里挂载路由

module.exports = router;

-----------------------------
// app.js 导入并注册路由模块
// 导入路由模块
const router = require("./16-apiRouter");
// 注册路由模块
app.use("/api", router);

3.3 编写 GET 接口

router.get("/get", (req, res) => {
  // 获取客户端发送的数据
  const query = req.query;
  // 响应回客户端
  res.send({
    status: 0,
    message: "GET请求成功！",
    data: query,
  });
});

3.4 编写 POST 接口

router.post("/post", (req, res) => {
  const body = req.body;
  res.send({
    status: 0,    				// 状态，0 表示成功，1 表示失败
    message: "POST请求成功！",	// 状态描述信息 
    data: body,				   // 需要响应给客户端的具体数据
  });
});

注意：如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))

3.5 CORS 跨域资源共享

• 接口的跨域问题

  刚才编写的 GET 和 POST接口，存在一个很严重的问题:不支持跨域请求。 解决接口跨域问题的方案主要有两种：

  1、CORS（主流的解决方案，推荐使用）

  2、JSONP（有缺陷的解决方案:只支持 GET 请求）

• 使用 cors 中间件解决跨域问题

  cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。

  使用步骤分为如下 3 步：

  1、运行 npm install cors 安装中间件

  2、使用 const cors = require(‘cors’) 导入中间件

  3、在路由之前调用 app.use(cors()) 配置中间件

  // 一定要在路由之前配置 cors 中间件，从而解决接口跨域问题
  const cors = require("cors");
  app.use(cors());
  

• 什么是 CORS

  CORS （Cross-Origin Resource Sharing，跨域资源共享）由一系列传输的 HTTP 头组成，这些 HTTP 头决定浏览器是否阻止前端JavaScript 代码获取跨域请求的响应。

  同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了 web 服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

  

• CORS 的注意事项
  1、CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。

  2、CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服 务端接口(例如:IE10+、Chrome4+、FireFox3.5+)。

• CORS 响应头部 - Access-Control-Allow-Origin

  响应头部中可以携带一个 Access-Control-Allow-Origin 字段，其语法如下：

  Access-Control-Allow-Origin: <origin> | *
  

  其中，origin 参数的值指定了允许访问该资源的外域 URL。

  例如，下面的字段值将只允许来自 itcast.cn 的请求：

  res.setHeader('Access-Control-Allow-Origin', 'http://itcast.cn')
  

  如果指定了 Access-Control-Allow-Origin 字段的值为通配符 *，表示允许来自任何域的请求，示例代码如下：

  res.setHeader('Access-Control-Allow-Origin', '*')
  

• CORS 响应头部 - Access-Control-Allow-Headers

  默认情况下，CORS 仅支持客户端向服务器发送如下的 9 个请求头:

  Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、 Content-Type (值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)

  如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过 Access-Control-Allow-Headers 对额外 的请求头进行声明，否则这次请求会失败!

  // 允许客户端额外向服务器发送 Content-Type 请求头和 X-Custom-Header 请求头
  // 注意：多个请求头之间使用英文的逗号进行分割
  res.setHeader('Access-Control-Allow-Origin', 'Content-Type, X-Custom-Header')
  

• CORS 响应头部 - Access-Control-Allow-Methods

  默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。

  如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods 来指明实际请求所允许使用的 HTTP 方法。

  示例代码如下：

  // 只允许 POST、 GET、DELETE、HEAD 请求方法
  res. setHeader('Access-Control-A1low-Methods', " POST, GET, DELETE, HEAD’ ）
  // 允许所有的 HTTP 请求方法
  res. setHeader("Access-Control-A1low-Methods"， '*')
  

• 简单请求

  同时满足以下两大条件的请求，就属于简单请求：

  1、请求方式：GET、POST、HEAD 三者之一

  2、HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、 Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值application/x-www-form- urlencoded、multipart/form-data、text/plain）

  简单请求的特点：客户端与服务器之间只会发生一次请求。

• 预检请求

  只要符合以下任何一个条件的请求，都需要进行预检请求：

  1、请求方式为 GET、POST、HEAD 之外的请求 Method 类型

  2、请求头中包含自定义头部字段

  3、向服务器发送了 application/json 格式的数据

  在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一 次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。

  预检请求的特点：OPTION 预检请求成功之后，才会发起真正的请求。

• 简单请求和预检请求区别

  简单请求特点：客户端与服务器之间只会发生一次请求。

  预检请求的特点：客户端与服务器之间会发生两次请求，OPTION 预检请求成功后，才会发出真正的请求。

3.6 JSONP 接口

• 回顾 JSONP 的概念与特点

  概念：浏览器端通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP。

  特点：

  1、JSONP 不属于真正的 ajax 请求，因为它并没有使用 XMLHttpRequset 这个对象。

  2、JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求。

• 创建 JSONP 接口的注意事项

  如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否则 JSONP 接口会被处理成开启了 CORS 的接口。示例代码如下：

  // 必须在 cors 中间件之前，配置 jsonp 的接口
  app.get("/api/jsonp", (req, res) => {
    // 定义 jsonp 接口的具体实现过程
  });
  

• 实现 JSONP 接口的步骤

  • 获取客户端发送过来的回调函数的名字
  • 得到要通过 JSONP 形式发送给客户端的数据
  • 根据前两步得到的数据，拼接出一个函数调用的字符串
  • 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行

• 实现 JSONP 接口的具体代码

  // 必须在 cors 中间件之前，配置 jsonp 的接口
  app.get("/api/jsonp", (req, res) => {
    // 定义 jsonp 接口的具体实现过程
    // + 获取客户端发送过来的回调函数的名字
    const funcName = req.query.callback;
    // + 得到要通过 JSONP 形式发送给客户端的数据
    const data = { name: "zs", age: 20 };
    // + 根据前两步得到的数据，拼接出一个函数调用的字符串
    const scriptStr = `${funcName}(${JSON.stringify(data)})`;
    // + 把上一步拼接得到的字符串，响应给客户端的 `<script>` 标签进行解析执行
    res.send(scriptStr);
  });
  

• 在网页中使用 jQuery 发起 JSONP 请求

  调用 $.ajax() 函数，提供 JSONP 的配置选项，从而发起 JSONP 请求，示例代码如下：

   // 4、测试JSONP接口
  $("#btnJSONP").on("click", function () {
    $.ajax({
      type: "GET",
      url: "http://127.0.0.1/api/jsonp",
      dataType: "jsonp",
      success: function (res) {
        console.log(res);
      },
    });
  });