• • 1. Express 简介
  • 2. Express 的基本使用
    • 2.1 创建基本的 web 服务器：
    • 2.2 监听 GET 与 POST 请求
    • 2.3 Express 静态资源托管
    • 2.4 nodeman
  • 3. Express 路由
    • 3.1 路由的概念
    • 3.2 路由的简单使用
    • 3.3 路由的模块化
    • 3.4 为路由模块添加统一的前缀
  • 4. Express 中间件
    • 4.1 中间件的基本概念
    • 4.2 中间件函数的简单使用
      • 4.2.1 全局中间件
      • 4.2.2 局部中间件
      • 4.2.3 中间件的作用与注意事项
    • 4.3 中间件的分类
    • 4.4 自定义中间件
  • 5. CORS 跨域资源共享
    • 5.1 cors 中间件解决跨域
    • 5.2 什么是 CORS ?
    • 5.3 CORS常见响应头：
    • 5.4 CORS请求分类：

1. Express 简介

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

Express 是用于快速创建服务器的第三方模块。

内置的 http 模块用起来很复杂，开发效率低；Express 是基于内置的 http 模块进一步封装出来的，能够极大程度的提高开发效率。

Express 能做什么？

• Web 网站服务器：专门对外提供 Web 网页资源的服务器。
• API 接口服务器：专门对外提供 API 接口的服务器。

2. Express 的基本使用

2.1 创建基本的 web 服务器：

// 导入 express
const express = require('express');

// 创建 express 实例（ web 服务器）
const app = express();

// 启动 web 服务器
app.listen(5000, () => {
    console.log('服务器启动成功，访问地址：http://127.0.0.1:5000');
});

2.2 监听 GET 与 POST 请求

监听 get 请求：

• 通过 app.get() 方法，可以监听客户端的GET请求，具体的语法格式：

// 参数1：请求的 url
// 参数2：处理函数
// 处理函数：接收两个参数，分别是请求对象和响应对象
app.get("请求url", (req, res) => { /* 处理函数 */})

监听 post 请求：

• 通过 app.post() 方法，可以监听客户端的POST请求，具体的语法格式：

// 参数1：请求的 url
// 参数2：处理函数
// 处理函数：接收两个参数，分别是请求对象和响应对象
app.post("请求url", (req, res) => { /* 处理函数 */})

把内容响应给客户端：

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

app.get('/user', (req, res) => {
  res.send({ name: 'zs', age: 20, gender: '男' })
})
app.post('/user', (req, res) => {
  res.send('请求成功')
})

获取 URL 中携带的查询参数

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

app.get('/', (req, res) => {
    // 通过 req.query 可以获取到客户端发送过来的查询参数（?abc=123）
    console.log(req.query); // { abc: '123' }
    res.send(req.query)
})

获取 URL 中的动态参数：

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

// 这里的 :id 是一个动态的参数
app.get('/user/:id', (req, res) => {
    // req.params 是动态匹配到的 URL 参数，默认是一个空对象
    console.log(req.params);
    res.send(req.params);
})

2.3 Express 静态资源托管

1. express.static()
   通过 express.static() 方法可创建静态资源服务器，向外开放访问静态资源。

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

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

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

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

2.4 nodeman

nodeman 能够监听项目文件的变动，当代码被修改后，nodeman 会自动重启项目，极大的方便了开发与调试。

全局安装 nodeman：

npm install -g nodeman

使用 nodeman ：

nodeman index.js

3. Express 路由

3.1 路由的概念

什么是路由？广义来说，路由就是映射关系。

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

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

// 导入 express
const express = require('express');

// 创建 express 实例（ web 服务器）
const app = express();

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

// 启动 web 服务器
app.listen(5000, () => {
    console.log('服务器启动成功，访问地址：http://127.0.0.1:5000');
});

路由匹配的注意点：

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

3.2 路由的简单使用

Express 中最简单的路由使用方式，就是将路由挂载到 app 上：

// 导入 express
const express = require('express');

// 创建 express 实例（ web 服务器）
const app = express();

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

// 启动 web 服务器
app.listen(5000, () => {
    console.log('服务器启动成功，访问地址：http://127.0.0.1:5000');
});

3.3 路由的模块化

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

抽离步骤：

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

// router.js

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

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

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

// index.js 
const express = require('express');


const app = express();

// 导入路由模块
const router = require('./router.js');

app.use(router);

app.listen('5000', () => {
    console.log('服务器启动成功，访问地址：http://127.0.0.1:5000');
});

3.4 为路由模块添加统一的前缀

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

const express = require('express')
const router = require('./router')

const app = express()

// 注册路由模块，添加访问前缀
app.use('/api', router)

app.listen(80, () => {
  console.log('http://127.0.0.1')
})

4. Express 中间件

4.1 中间件的基本概念

• 中间件是指流程的中间处理环节
• 服务器收到请求后，可先调用中间件进行预处理
• 中间件是一个 function 处理函数，包含 req, res, next 三个参数，next() 参数把流转关系交给下一个中间件或路由
  

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

4.2 中间件函数的简单使用

定义一个简单的中间件函数：

// 常亮 mw 所指向的，就是一个中间件函数
const mw = function(req,res,next){
	console.log("这是一个最简单的中间件函数")
	// 注意：当前中间件的业务处理完毕后，必须调用 next() 函数
	// 表示把流转关系转交给下一个中间件或路由
	next()
}

4.2.1 全局中间件

全局中间件：

• 通过 app.use() 定义的中间件为全局中间件。

客户端发起的任何请求，到达服务器之后，都会触发的中间件。

const express = require('express')
const app = express()

// 定义第一个全局中间件
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.')
})

app.listen(80, () => {
  console.log('http://127.0.0.1')
})

4.2.2 局部中间件

局部中间件：

const express = require('express')
const app = express()

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

const mw2 = (req, res, next) => {
  console.log('调用了第二个局部生效的中间件')
  next()
}

// 两种定义局部中间件的方式
app.get('/hello', mw2, mw1, (req, res) => res.send('hello page.'))
app.get('/about', [mw1, mw2], (req, res) => res.send('about page.'))

app.get('/user', (req, res) => res.send('User page.'))

app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1')
})

4.2.3 中间件的作用与注意事项

中间件的作用：

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

中间件使用注意事项：

• 一定要在路由之前定义中间件。
• 客户端发送来的请求，可以连续调用多个中间件进行处理。
• 执行完中间件代码后，不要忘了调用 next() 函数。
• next() 后不要在写代码。
• 连续调用多个中间件时，多个中间件共享 req、 res对象。

4.3 中间件的分类

Express 把常见的中间件用法分成两 5 大类：

• 应用级别的中间件

  • 通过 app.use() 或 app.get() 或 app.post() 绑定到 app 实例上的中间件，叫做应用级别的中间件。

• 路由级别的中间件

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

  const app = express()
  const router = express.Router()
  
  router.use(function (req, res, next) {
    console.log(1)
    next()
  })
  
  app.use('/', router)
  

• 错误级别的中间件

  • 用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。
  • 错误级别中间件的处理函数中，必须有 4 个形参，形参顺序从前到后分别是 (err, req, res, next) 。
  • 错误级别的中间件必须注册在所有路由之后

  const express = require('express')
  const app = express()
  
  app.get('/', (req, res) => {
    throw new Error('服务器内部发生了错误！')
    res.send('Home page.')
  })
  
  // 定义错误级别的中间件，捕获整个项目的异常错误，从而防止程序的崩溃
  app.use((err, req, res, next) => {
    console.log('发生了错误！' + err.message)
    res.send('Error：' + err.message)
  })
  
  app.listen(80, function () {
    console.log('Express server running at http://127.0.0.1')
  })
  

• 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+ 版本中可用）

    app.use(express.json())
    app.use(express.urlencoded({ extended: false }))
    

• 第三方中间件

4.4 自定义中间件

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

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

// 导入 express
const express = require('express');

// 创建 express 实例（ web 服务器）
const app = express();

// 导入 querystring 模块
const querystring = require('querystring');

// 监听 req 中的 data 事件，获取客户端发送过来的数据
let str = '';

// 定义中间件
app.use((req, res, next) => {
    // 定义中间件的具体业务
    // 监听 req 中的 data 事件，获取客户端发送过来的数据
    let str = '';
    req.on('data', (chunk) => {
        str += chunk;
    })

    // 监听 req 中的 end 事件
    req.on('end', () => {
        // 将获取到的数据赋值给 req.body
        // req.body = str;
        console.log(str);
        var obj = querystring.parse(str);
        console.log("obj:",obj);
        req.body = obj;
        next();
    })

})

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

// 启动 web 服务器
app.listen(5000, () => {
    console.log('服务器启动成功，访问地址：http://127.0.0.1:5000');
});

5. CORS 跨域资源共享

5.1 cors 中间件解决跨域

• 安装中间件：npm install cors
• 导入中间件：const cors = require('cors')
• 配置中间件：app.use(cors)

5.2 什么是 CORS ?

• CORS（Cross-Origin Resource Sharing，跨域资源共享）解决跨域，是通过 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。
• 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可解除浏览器端的跨域访问限制。

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

5.3 CORS常见响应头：

• Access-Control-Allow-Origin：制定了允许访问资源的外域 URL

// 控制只允许来自某些网站的请求
res.setHeader('Access-Control-Allow-Origin', 'http://bruceblog.io')
res.setHeader('Access-Control-Allow-Origin', '*')

• 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 对额外的请求头进行声明，否则这次请求会失败！

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Header')

• Access-Control-Allow-Methods
• 默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods 来指明实际请求所允许使用的 HTTP 方法

res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')
res.setHEader('Access-Control-Allow-Methods', '*')

5.4 CORS请求分类：

1. 简单请求

• 请求方式：GET、POST、HEAD 三者之一
• HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值 application/x-www-formurlencoded、multipart/form-data、text/plain）

2. 预检请求

• 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
• 请求头中包含自定义头部字段
• 向服务器发送了 application/json 格式的数据

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