Node.js(复习三)——Express

//express
//1.导入express模块
const express=require('express');
//2.创建服务器
const app=express();
//3.启动web服务器
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1');
})

//原生
//1.导入http模块
const http=require('http');
//2.创建服务器
const server=http.createServer();
//4.启动服务器
server.listen(80,function(){
    console.log('server running at http://127.0.0.1:80');
})

从上面代码中可以体现使用express,是较为方便，快捷的

3. 监听 GET 请求和 POST请求

通过 app.get() 方法，app.post() 可以监听客户端的 GET 请求，POST请求

具体的语法格式如下：

//get/post

// 参数1: 客户端请求的 URL 地址
// 参数2: 请求对应的处理函数
//      req : 请求对象(包含了与请求相关的属性与方法)
//      res : 响应对象(包含了与响应相关的属性与方法)
app.get('请求URL',(req,res)=>{
    //处理函数具体内容
})
app.post('请求URL',(req,res)=>{
    //处理函数具体内容
})

4. 把内容响应给客户端

通过 res.send() 方法，可以把处理好的内容，发送给客户端

app.get('/user', (req, res) => {
  //调用 express 提供的res.send()方法,向客户端响应一个JSON对象
  res.send({ name: 'zs', age: 20, gender: '男' })
})
app.post('/user', (req, res) => {
  //调用 express 提供的res.send()方法,向客户端响应一个字符串
  res.send('请求成功')
})

5. 获取 URL 中携带的查询参数

通过 req.query 对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数

app.get('/',(req,res)=>{
    //req.query 默认是一个空对象
    //客户端使用 ?name=zs&age=20 这种查询字符串形式，发送到服务器的参数
    //可以通过req.query 对象访问到,例如：
    // req.query.name req.query.age
    console.log(req.query);
})

6. 获取 URL 中的动态参数

通过 req.params 对象，可以访问到 URL 中，通过 : 匹配到的动态参数：

// URL 地址中，可以通过 :参数名 的形式,匹配动态参数值
app.get('/user:id',(req,res)=>{
    //req.params 默认是一个空对象
    // 里面存放着通过 : 动态匹配到的参数值
    console.log(req.params);
})

1.3 托管静态资源

1. express.static()

express 提供了一个非常好用的函数，叫做 express.static()，通过它，我们可以非常方便地创建一个静态资源服务器。

例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

app.use(express.static('punlic'))

现在，你就可以访问 public 目录中的所有文件了：

http://localhost:3000/images/bg.jpg

http://localhost:3000/css/style.css

http://localhost:3000/js/login.js

注意：Express 在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在 URL 中

2. 托管多个静态资源目录

如果要托管多个静态资源目录，请多次调用 express.static() 函数：

app.use(express.static('punlic'))
app.use(express.static('files'))

访问静态资源文件时，express.static() 函数会根据目录的添加顺序查找所需的文件

3. 挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式

app.use('/api',express.static('public'))

现在，你就必须通过带有 /api 前缀地址才能访问 public 目录中的文件了

2. Express 路由

2.1 路由的概念

1. 什么是路由

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

2. 现实生活中的路由

在这里，路由是按键与服务之间的映射关系

3. Express 中的路由

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

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

app.METHOD(PATH,HANDLER)

4. Express 中的路由的例子

app.get('/', (req, res) => {
  res.send('hello world')
})

app.post('/', (req, res) => {
  res.send('Post Request')
  console.log('Post Request');
})

5. 路由的匹配过程

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

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

路由匹配的注意点：

按照定义的先后顺序进行匹配
请求类型和请求的URL同时匹配成功，才会调用对应的处理函数

2.2 路由的使用

1. 最简单的用法

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

//1.导入express
const express = require('express');
//2.创建web服务器
const app = express();

//挂载路由
app.get('/', (req, res) => {
  res.send('hello world')
})

app.post('/', (req, res) => {
  res.send('Post Request')
  console.log('Post Request');
})
//3.启动服务器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1');
})

2. 模块化路由

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

将路由抽离为单独模块的步骤如下：

创建路由模块对应的 .js 文件
调用 express.Router() 函数创建路由对象
向路由对象上挂载具体的路由
使用 module.exports 向外共享路由对象
使用 app.use() 函数注册路由模块

3. 创建路由模块

// 1. 导入 express
const express = require('express')
// 2. 创建路由对象
const router = express.Router()

// 3. 挂载具体的路由
router.get('/user/list', (req, res) => {
  res.send('Get user list.')
})
router.post('/user/add', (req, res) => {
  res.send('Add new user.')
})

// 4. 向外导出路由对象
module.exports = router

4. 注册路由模块

// 1. 导入路由模块
const router = require('./03.router')
// 2. 使用 app.use() 注册路由模块
app.use(router)

5. 为路由模块添加前缀

类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单（在app.use 前面加上一个参数）：

// 1. 导入路由模块
const router = require('./03.router')
// 2. 使用 app.use() 注册路由模块
app.use('/api',router)

3. Express 中间件

3.1 中间件的概念

1. 什么是中间件

中间件（Middleware ），特指业务流程的中间处理环节

2. 现实生活中的例子

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

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

3. Express 中间件的调用流程

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

4. Express 中间件的格式

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

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

5. next 函数的作用

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

3.2 Express 中间件的初体验

1. 定义中间件函数

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

const myFunction=function(req,res,next){
    console.log('这是一个中间件函数');
    //注意: 在当前中间件的业务处理完毕后,必须调用next()函数
    next();
}

2. 全局生效的中间件

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

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

//将mw注册为全局生效的中间件
//--全局生效的中间件(客户端发起的任何请求,到达服务器都会生效的中间件)
app.use(mw);

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

// 全局生效的中间件
app.use((req, res, next)=>{
  console.log('这是定义全局中间件的简化形式');
  next();
})

4. 中间件的作用

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

5. 定义多个全局中间件

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

// 定义第一个全局中间件
app.use((req, res, next) => {
  console.log('调用了第1个全局中间件')
  next()
})
// 定义第二个全局中间件
app.use((req, res, next) => {
  console.log('调用了第2个全局中间件')
  next()
})

// 定义一个路由
app.get('/user', (req, res) => {
  res.send('User page.')
})

// 运行顺序
// 调用了第1个全局中间件
// 调用了第2个全局中间件
// res.send('User page.')

6. 局部生效的中间件

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

// 1. 定义中间件函数
const mw1 = (req, res, next) => {
  console.log('调用了局部生效的中间件函数');
}

// 2. 创建路由 将mw1给路由,调用那个路由就会调用这个局部生效中间件
app.get('/', mw1, (req, res) => {
  res.send('Home page.')
})

7. 了解中间件的5个使用注意事项

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

3.3 中间件的分类

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

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

1. 应用级别的中间件

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

//应用级别的中间件(全局中间件)
app.use((req,res,next)=>{
    console.log('调用全局中间件');
    next()
})

//应用级别的中间件(局部中间件)

const mw1 = (req, res, next) => {
    console.log('调用了局部生效的中间件函数');
  }

app.get('/',mw1,(req,res)=>{
    res.send('Home page.')
})

2. 路由级别的中间件

绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。

只不过，应用级别中间件是绑定到 app 实例上，路由级别中间件绑定到 router 实例上，代码示例如下：

const express = require('express');

const app = express();

const router = express.Router();

//路由级别的中间件
router.use((req, res, next) => {
    console.log('路由级别中间件');
    next();
})

//不要忘了使用app.use 注册路由
app.use('/', router);

3. 错误级别的中间件

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

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

//1.定义路由
app.get('/', (req, res) => {
  //1.1 人为的制造错误
  throw new Error('服务器内部发生了错误');
  res.send('Home page');
})
//2.定义错误级别的中间件,捕获整个项目的异常错误，从而防止程序的奔溃(错误中间需要放在最后面)
app.use((err, req, res, next) => {
  console.log('发生了错误!' + err.message);
  res.send('Error:' + err.message)
})

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

4. 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+ 版本中可用）
【urlencoded格式】：又叫form格式，或者是x-www-form-urlencoded格式。

// 通过 express.static,快速的对外提供静态资源
app.use(express.static('./files'))


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

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

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

5. 第三方的中间件

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

例如：在 express@4.16.0 之前的版本中，经常使用 body-parser 这个第三方中间件，来解析请求体数据。

使用步骤如下

运行 npm install body-parser 安装中间件
使用 require 导入中间件
调用 app.use() 注册并使用中间件

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

3.4 自定义中间件

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

实现步骤：

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

//导入 express 模块
const express = require('express');
//创建 express 的服务器实例
const app = express();
//导入 node.js 内置的querystring模块
const qs = require('querystring');

//定义一个自定义中间件(解析表单数据)---这一部分可以进行模块化拆分
app.use((req, res, next) => {
  //定义中间件具体的业务逻辑
  //1定义变量,用来存储客户端发送过来的请求体数据 (因为data事件在实际当中不会只触发一次)
  let str = '';
  //2.监听 req的data事件
  req.on('data', (chunk) => {
    str += chunk;
  })
  //3.监听 req的end事件
  req.on('end', () => {
    //在str 中存放的是完整的请求体数据
    console.log(str);
    //TODO: 把字符串格式的请求体数据,解析成对象格式(使用querystring中的parse方法解析成对象格式)
    const body = qs.parse(str);
    //;将解析出来的请求体对象,挂载为 req.body属性
    req.body = body;
    next();
  })
})


app.post('/user', (req, res) => {
  res.send(req.body);
})


//调用 app.listen方法 指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1');
})

4. 使用 Express 写接口

4.1 创建基本的服务器


// app.js [导入并注册路由模块]
//导入 express 模块
const express =require('express')
// 创建 express 的服务器实例
const app=express()

// write your code here...


//调用app.listen 方法, 指定端口并启动web服务器
app.listen(80,function(){
    console.log('Express server running at http://127.0.0.1');
})

4.2 创建 API 路由模块

//apiRouter.js [路由模块]
//导入 express 模块
const express =require('express')
const apiRouter=express.Router()

// 绑定路由，编写get,post相关接口

//向外导出
module.exports=apiRouter


//app.js 进行注册和导入
//导入
const apiRouter=require('./apiRouter.js')
//注册
app.use('/api',apiRouter)

4.3 编写相关接口

//编写在 apiROuter.js [路由模块]

// 处理请求体的URL-encode格式(内置中间件)
app.use(express.urlencoded({extended:false}))

apiRouter.get('/get',(req,res)=>{
    //1.获取客户端的查询字符，并发送到服务器
    const query=req.query
    //2.调用 res.send 方法，将数据响应给客户
    res.send({
        status:0,   //状态 0 成功 1  失败
        msg:'GET请求成功', //状态描述
        data:query   //需要响应的数据
    })
})
apiRouter.post('/post',(req,res)=>{
    //1.获取客户端通过请求体,发送到服务器的 URL-encode
    //---需要导入内置中间件express.urlendcoded()这个中间件
    const body=req.body
    //2.调用 res.send 方法，将数据响应给客户
    res.send({
        status:0,   //状态 0 成功 1  失败
        msg:'POST请求成功', //状态描述
        data:body   //需要响应的数据
    })
})

4.5 CORS 跨域资源共享

1. 接口的跨域问题

刚才编写的 GET 和 POST接口，存在一个很严重的问题：不支持跨域请求。

解决接口跨域问题的方案主要有两种

CORS（主流的解决方案，推荐使用）
JSONP（有缺陷的解决方案：只支持 GET 请求）

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

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

使用步骤分为如下 3 步：

运行 npm install cors 安装中间件
使用 const cors = require('cors') 导入中间件
在路由之前调用 app.use(cors()) 配置中间件

3. 什么是 CORS

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

浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。

4. CORS 的注意事项

CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。
CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）。

5. CORS 响应头部 - Access-Control-Allow-Origin

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

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

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

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

app.get('url',(req,res)=>{
    res.setHeader(' Access-Control-Allow-Origin','http://itcast.cn')
})

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

app.get('url',(req,res)=>{
    res.setHeader(' Access-Control-Allow-Origin','*')
})

6. 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')

7. CORS 响应头部 - Access-Control-Allow-Methods

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

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

示例代码如下：

    //允许所有HTTP的请求方法
    res.setHeader(' Access-Control-Allow-Method','*')
    //只允许 POST，GET
    res.setHeader(' Access-Control-Allow-Method','POST，GET')

8. CORS请求的分类

客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 CORS 的请求分为两大类，分别是

简单请求
预检请求

9. 简单请求

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

请求方式：GET、POST、HEAD 三者之一
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