Express

能够使用express.static()快速托管静态资源
能够使用express路由精简项目结构
能够使用常见的express中间件
能够使用express创建API接口
能够express中启用cors跨域资源共享 

1.初始Express

1.1 Express简介

1.什么是Express

官方给出的概念:Express是基于Node.js平台,快速、开发、极简的Web开发框架

通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器

Express的本质:就是一个npm上的第三方包,提供快速创建Web服务器的便捷方法

Express的中文官网:http://www.expressjs.com.cn/

2.进一步理解Express

思考:不使用Express能否创建Web服务器

能 使用Node提供的原生http模块

思考 有了http模块为啥还用Express

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

思考 http内置模块与Express是什么关系

类似于浏览器中Web API和jQuery的关系 后者是基于前者进一步封装出来的

3.Express能做什么

前端来说,最常见两种服务器是

Web网站服务器 专门对外提供Web网页资源的服务器

API接口服务器 专门对外提供API接口的服务器

使用Express 我们可以快速创建Web网站服务器和API接口服务器

1.2 Express的基本使用

1.安装

在项目所处的目录中,运行如下的终端命令,即可将express安装到项目中

npm i express@4.17.1

2.创建基本的Web服务器

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

   

3.监听GET请求

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

app.get('请求URL',function(req,res){处理函数})

参数1：客户端请求的URL
参数2：请求对应的处理函数
req：请求对象(包含了与请求相关的属性与方法)
res：响应对象(包含了与响应相关的属性与方法)

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

app.post('请求URL',function(req,res){处理函数})

参数1：客户端请求的URL
参数2：请求对应的处理函数
req：请求对象(包含了与请求相关的属性与方法)
res：响应对象(包含了与响应相关的属性与方法)

5.把内容响应给客户端

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

app.get('/user',function(req,res){
    //向客户端发送JSON对象
    res.send({name:'zs',age:20,gender:'男'})
    
})

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

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

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

7.获取URL中的动态参数

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

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

1.3托管静态资源

1.express.static()

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

例如,通过如下代码就可以将public目录下的图片 css文件 js文件

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

就可以访问public目录里的所有文件

注意
Expre在指定的静态母驴中查找文件,并对提供资源的访问路径
存放静态文件的目录名不会出现在URL中

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

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

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

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

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

3.挂载路径前缀

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

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

通过带有/public前缀地址来访问public目录中的文件

1.4nodemon

1.为什么要使用nodemon

在编写调试Node项目的时候 如果修改了项目得到暧昧 则需要频繁的手动close掉
再启动 非常繁琐

使用nodemon(https://www.npmjs.com/package/nodemon) 
这个工具能欧冠监听项目文件的变动,会自动帮我们重启项目 极大方便了开发和调试

2.安装nodemon

再终端中 运行如下命令 即可将nodemon安装为全局可用的工具

npm install -g nodemon 

3.使用nodemon

当基于Node编写了一个网站运用的时候,传统的方式,是运行node app.js命令 启动项目
这样的坏处是代码被修改之后,需要手动重启项目

将node命令替换为nodemon命令 使用nodemon app.js来启动项目。这样做的好处
这样的好处是代码被修改之后 会被nodemon监听到 从而实现自动重启项目
例如

node app.js
#会被nodemon监听到 从而实现自动重启项目
nodemon app.js
 
2.Express 路由

1.什么是路由

广义上来将,路由就是映射关系

2.现实生活中的路由

路由是按键与服务之间的映射关系

3.Express中的路由

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

Express中的路由分3部分组成,分别是请求的类型、请求的URL地址、处理函数,

app.METHOD(PATH,HANDLER)

4.Express中的路由的例子

app.get('./',function(req,res){
   res.send('Hello World')
})

app.post('./',function(req,res){
   res.send('Got a POST request')
})

5.路由的匹配过程

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

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

注意 路由匹配的注意点

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

2.2 路由的使用

1.最简单的用法

在Express中使用路由最简单的方式,就是把路由挂载到app上

const express = require('express')
// 创建Web服务器 命名为app
const app = express()

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

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

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

2.模块化路由

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

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

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

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

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

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

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

3.创建路由模块

// 这是路由模块
// 1.导入express
const express = require('express')

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

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

router.post('/user/add', (req, res) => {
    res.send('Add nwe')
})

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

4.注册路由模块

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

5.为路由模块添加前缀

为静态资源统一挂载访问前缀一样,路由模块添加前缀的方式也非常简单

app.use('/api', router)

3.Express中间件

3.1中间件的概念

1.什么是中间件

中间件,特指业务流程的中间处理环节

2.现实生活中的例子

在处理污水的时候 一般有三个环节

污水 一级处理 二级处理 三级处理 达到标准

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

3.Express中间件的调用流程

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

4.Express中间件的格式

Express的中间件,本质上就说一个function处理函数,Express的中间件格式

注意：

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

5.next函数的作用

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

3.2 Express中间件的初体验

1.定义中间件函数

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

const express = require('express')

const app = express()

const mw = function (req, res, next) {
    console.log('这是中间件');
    next()
}

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

2.全局生效的中间件

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

通过调用app.use(中间件函数) 即可定义一个全局生效的中间件

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

app.use((req, res, next) => {
    console.log('home');
    next()
})

4.中间件的作用

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

5.定义多个全局中间件

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

6.局部生效的中间件

不使用app.use()定义的中间件 叫做局部生效的中间件
const mw1 = (req, res, next) => {
    console.log('调用了局部生效的中间件');
    next()
}

// 创建路由

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

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

7.定义多个局部中间件

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

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

app.get('./', [mw1, mw2], (req, res) => {res.send('')})

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

1 一定要在路由之前注册中间件

2 客户端发送过来的请求 可以连续调用多个中间件进行处理

3 执行完中间件的业务代码之后 不要忘记调用next函数

4 为了防止代码逻辑混乱 调用next()函数后 不要再写额外的代码    

5 连续调用多个中间件时 多个中间件之间 共享req和res对象 

3.3 中间件的分类

常见的中间件用法 分五类

应用级别的中间件

路由级别的中间件

错误级别的中间件

Express内置的中间件

第三方的中间件

1.应用级别的中间件

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

app.use((req, res, next) => {
    next()
})


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

2.路由级别的中间件

绑定到express.Router()实例上的中间件,叫做路由级别的中间件,
它的用法和应用级别中间件没有任何区别
只不过应用级别是绑定在app 路由级别绑定在router实例上

3.错误级别的中间件

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

错误级别中间件的function处理函数中 必须有4个形参 
形参的顺序是(err,req,res,next)

app.get('/', (req, res) => {  //1.路由
    // 人为制造错误
    throw new Error('服务器内部发生了错误')  //1.1 自定义错误
    // 响应
    res.send('HOme')
})

app.use((err, req, res, next) => {          // 2.错误级别的中间件
    console.log('发生了错误' + err.message);  // 2.1在服务器打印错误消息
    res.send('Error:' + err.message)          //向客户端响应错误相关的内容
})

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

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

4.Express内置的中间件

自Express4.16.0版本开始 
Express内置了3个常见的中间件 极大的提高了Express项目的开发效率和体验

1 express.static快速托管静态资源的内置中间件 例如HTML CSS 图片

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

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

app.use(express.json())

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

5. 第三方的中间件

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

例如 在express@4.16.0之前的版本,经常hi有body-parser这个第三方中间件 来解析请求数据
步骤

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

2 使用requier导入中间件

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

注意：

Express内置的express.urlencoded,就说基于body-parser这个第三方中间件进一步封装出来的

3.4自定义中间件

1.需求描述与实现步骤

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

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

2.定义中间件

使用app.use()来定义全局生效的中间件

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

3.监听的req的data事件

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

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

4.监听req的end事件

当请求体数据接收完毕之后,会自动触发req的end事件
因此,可以在req的end事件

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

Node内置了一个querystring模块,专门用来处理查询子查询字符串
通过这个模块提供的parse()函数,可以轻松把查询字符串,解析成对象的格式

// 导入Node内置的querystring模块
const qs = require('querystring')

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

上游的中间件和下游的中间件及路由之间,共享同一个req和res
因此我们将解析出来的数据,挂载为req的自定义属性,命名为req.body供下游使用

req.on('end', () => {
        const body = qs.parse(str) 调用qs.parse()方法 查询字符串解析为对象
        req.body = body            解析出来的请求体对象 挂载为req.body属性
        next()                   一定要调用next函数执行后续业务逻辑
    })

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

为了优化代码的结构 把自定义的中间件函数 封装为独立的模块

// 导入Node内置的querystring模块
const qs = require('querystring')

const bodyParser = (req, res, next) => {
    省略
}

module.exports = bodyParser

//1 导入自己封装的中间件模块
const customBodyParser = require('./36-custom-body-parser')
// 2 将自定义的中间件函数注册为全局可用的中间件
app.use(customBodyParser)

4.使用Express写接口

4.1 创建基本的服务器

// 导入express
const express = require('express')
//创建服务器实例
const app = express()

// 编写接口

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

4.2 创建API路由模块

// 导入express
const express = require('express')
//创建服务器实例
const app = express()

// 导入路由模块
const router = require('./37-apiRouter')

// 把路由模块 注册到app上
app.use('/api', router  )
// 编写接口

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

-----------------------------------------------------------------

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

// 这里挂载对应的路由


module.exports = router

4.3 编写GET接口

router.get('/get', (req, res) => {
    // req.query获取客户端通过查询字符串发送到服务器的数据
    const query = req.query
    // 调用res.send()方法 向客户端响应处理的结果
    res.send({
        status: 0,//状态 0表示成功 1表示失败
        msg: 'GET 请求成功',
        data: query//需要响应到科幻端的数据
    })
})

4.4编写POST接口

router.post('/get', (req, res) => {
    // req.query获取客户端通过查询字符串发送到服务器的数据
    const query = req.query
    // 调用res.send()方法 向客户端响应处理的结果
    res.send({
        status: 0,//状态 0表示成功 1表示失败
        msg: 'post 请求成功',
        data: query//需要响应到科幻端的数据
    })
})

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

4.5 CORS跨域资源共享

1.接口的跨域问题

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

http://staticfile.org/

CORS(主流的解决方案,推荐使用)

JSONP(有缺陷的解决方案:只支持GET请求)

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

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

1 运行npm install cors 安装中间件

2 使用const cors=require('cors')导入中间件

3 在路由之前调用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+、FileFox3.5+)

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

响应头部中跨域携带一个Access-Control-Allow-Origin字段
格式

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

其中,origin参数的值指定了允许访问该资源的外语URL
例如,下面的字段值将只允许来自http://itcast.cn的请求

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

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

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

6.CORS响应头部 - Access-Control-Allow-Headers

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

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

允许客户端额外向服务器发送Conten-Type请求头和X-Custom-Header 请求头
注意:多个请求头之间使用英文的逗号进行分割

res.setHeader('Access-Control-Allow-Origin','Conten-Type'X-Custom-Header)

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

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

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

只允许POST GET DELETE HEAD请求方法
res.setHeader('Access-Control-Allow-Methods'，'POST GET DELETE HEAD')

允许所有的HTTP请求方法
res.setHeader('Access-Control-Allow-Methods','*')

8.CORS请求的分类

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

1 简单请求

2 预检请求

9. 简单请求

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

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

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

10 预检请求

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

1 请求方式为POST GET HEAD 之外

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

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

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

11.简单请求和预检请求的区别

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

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

4.6JSONP接口

1.回顾JSONP的概念与特点

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

特点

1 JSONP不属于真正的Ajax请求 因为它没有使用XMLHttpRequest

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

2.创建JSONP接口的注意事项

如果项目中已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS中间件之前声明
JSONP的接口。否则JSONP

3.实现JSONP接口的步骤

1 获取客户端发送过来的回调函数的名字

2 得到要通过JSONP形式发给客户端的数据

3 根据前两步得到的数据,拼接出一个函数调用的字符串

4 把上一步拼接得到的字符串,响应客户端的<script>标签进行解析执行

4 实现JSONP接口的具体代码

app.get('/api/jsonp', (req, res) => {
    //TODO:定义jsonp接口具体的实现过程
    //1 得到函数的名称
    const funcName = req.query.callback
    //2 定义要发送的奥客户端的数据对象
    const data = { name: 'zs', age: 22 }
    //3 拼接出一个函数的调用
    const scriptStr = `${funcName}(${JDON.stringify(data)})`
    //4 把拼接的字符串,响应给客户端
    res.send(scriptStr)
})

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

调用$.ajax()函数,提供JSONP的配置选项,从而发起JSONP请求

            // 4为jsonp按钮绑定点击事件处理函数 
            $('#btnjsonp').on('click', function () {
                $.ajax({
                    type: 'GET',
                    ur: 'http://127.0.0.1/api/jsonp',
                    dataType: 'jsonp',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })