一.Express

1.1什么是Express

Express的作用和Node.js内置的http模块类似

专门用来创建Web服务器的

本质：npm上的第三方包，提供快速创建Web服务器的便捷方法

1.2Express能做什么

• Web网站服务器：专门提供Web网页资源的服务器

• API接口服务器：专门提供API接口的服务器

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

1.3.安装

在项目所处的目录中，运行如下的终端命令

npm i express@4.17.1

1.4.创建基本的web服务器

//导入express
const express = require('express')
//创建web服务器
const app = express()//调用 app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(80,()=>{console.log('express server running at http://127.0.0.1')
})

1.5.监听GET请求

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

1.6.把内容响应给客户端

app.get('/user',(req,res)=>{//向客户端发送JSON对象res.send({name:'zs',age:20,gender:'男'})
})app.post('/user',(req,res)=>{//向客户端发送文本内容res.send('请求成功')
})

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

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

1.8.获取URL中的动态参数

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

二.托管静态资源

express.static()，可以非常方便地创建一个静态资源服务器

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

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

Express 在指定的静态目录中查找文件，并对提供资源的访问路径

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

因此，存放静态文件的目录名不会出现在URL中

2.1托管多个静态资源目录

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

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

2.2.挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀

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

现在，你就可以通过带有/public前缀地址来访问public目录中的文件

http://localhost:3000/public/images/kitten.jpg

三.nodemon

3.1为什么要使用nodemon

修改项目代码后，要关闭服务器，重启，很繁琐

nodemon可以监听项目文件的变动

自动重新

3.2安装

npm i -g nodemon

3.3使用nodemon

node app.js
# 将上面的终端命令，替换为下面的终端命令，即可实现自动重启项目的效果
nodemon app.js

四.Express中的路由

4.1路由的概念

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

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

app.METHOD(PATH,HANDLER)

路由例子

//匹配GET请求，且请求URL为/
app.get('/',function(req,res){res.send('Hello World')
})
//匹配POST请求，且请求URL为/
app.post('/',function(req,res){res.send('Got a POST request')
})

4.2路由的匹配过程

每当一个请求到达服务器之后，需要先经过路由的匹配

只有匹配成功之后，才会调用对应的处理函数

在匹配时，会按照路由的顺序进行匹配

如果请求的类型和请求的URL同时匹配成功

则Express会将这次请求，转交给对应的function函数进行处理

注意：

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

4.3路由的最简单用法

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

const express = require('express')
//创建Web服务器，命名为app
const app = express()//挂载路由
app.get('/',(req,res)=>{res.send('Hello World.')
})
app.post('/',(req,res)=>{res.send('Post Request.')
})//启动Web服务器
app.Listen(80,()=>{console.log('server running at http://127.0.0.1')
})

4.4模块化路由

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

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

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

4.4.1创建路由模块

//1.导入express
var express = require('express')
//2.创建路由对象
var router = express.Router()
//3.挂载获取用户列表的路由
router.get('/user/list',function(req,res){res.send('Get user list.')
})
//4.挂载添加用户的路由
router.pos('/user/add',function(req,res){res.send('Add new user.')
})
//5.向外导出路由对象
module.exports = router

4.4.2注册路由模块

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

4.4.3为路由模块添加前缀

类似于托管静态资源

//1.导入路由模块
const userRouter = require('./router/user.js')
//2.使用app.use() 注册路由模块，并添加统一的访问前缀 /api
app.use('/api',userRouter)

五.Express中间件

5.1上面是中间件

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

5.2Express中间件的调用流程

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tt5voFl-1669710623478)(C:\Users\47982\AppData\Roaming\Typora\typora-user-images\image-20221112161108795.png)]

5.3Express中间件的格式

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

注意：

中间件函数的形参列表中，必须包含next参数

而路由处理函数中只包含req和res

5.4next函数的作用

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

六.Express中间件的初体验

6.1定义中间件函数

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

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

6.2全局生效的中间件

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

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

//常量mw所指向的，就是一个中间件函数
const mw  = function (req,res,next){console.log('这是一个最简单的中间件函数')next()
}
//全局生效的中间件
app.use(mw)

6.3中间件的作用

多个中间件之间，共享同一个份req和res

基于这样的特性，我们可以在上游的中间件中

统一未req或res对象添加自定义的属性或方法

供下游的中间件或路由进行使用

6.4局部生效的中间件

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

//定义中间件函数 mw1
const mw1 = function(req,res,next){console.log('这是中间件函数')next()
}
//mw1这个中间件只在“当前路由中生效”，这种用法属于“局部生效的中间件”
app.get('/',mw1,function(req,res){res.send("Home page.")
})

6.5定义多个局部中间件

//两种写法完全等价
app.get('/',mw1,mw2,(req,res)=>{res.send('Home page.')
})
app.get('/',[mw1,mw2],(req,res)=>{res.send('Home page.')
})

6.6中间件使用注意事项

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

七.中间件的分类

1. 应用级别的中间件
2. 路由级别的中间件
3. 错误级别的中间件
4. Express内置的中间件
5. 第三方的中间件

7.1应用级别的中间件

绑定到app实例上的中间件，叫做应用级别的中间件

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

7.2路由级别的中间件

绑定到express.Router()实例上的中间件

var app = express()
var router = express.Router()//路由级别的中间件
router.use(function (req,res,next){console.log("Time:",Date.now())next()
})app.use('/',router)

7.3错误级别的中间件

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

格式：错误级别中间件的function处理函数中，必须有4个形参

形参顺序从前到后：err，req，res，next

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

app.get('/',function (req,res){   //路由throw new Error('服务器内部发生了错误！')  //抛出一个自定义的错误res.send('Home Page.')
})app.use(function (err,req,res,next){         //错误级别的中间件console.log('发生了错误' + err.message)   //在服务器打印错误信息res.send('Error!' + err.message)         //向客户端响应错误相关的内容
})

7.4Express内置的中间件

• express.static快速托管静态资源的内置中间件

• express.json解析JSON格式的请求体数据

• express.urlencoded解析URL-encoded格式的请求体数据

  //配置解析 application/json 格式数据的内置中间件
  //注意：
  //在服务器，可以使用req.body这个属性，来接收客户端发送过来的请求体数据
  //默认情况下，如果不配置解析表单数据的中间件，则req.body默认等于 undefind
  app.use(express.json())
  //配置解析 application/x-www-form-urlencoded 格式数据的内置中间件
  //在服务器，可以使用req.body这个属性，来获取JSON格式的表单数据和url-encoded格式的数据
  app.use(express.urlencoded({extended:false}))
  

7.5第三方的中间件

• 安装
• 使用require导入中间件
• 调用app.use()注册并使用中间件

八.Express接口

8.1创建基本的服务器

//导入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')
})

8.2创建API路由模块

//apiRouter.js 路由模块
const express = require('express')
const apiRouter = express.Router()//bind your router here....module.exports = apiRouter//------------------------------//app.js 导入并注册路由模块
const apiRouter = require('./apiRouter.js')
app.use('/api',apiRouter)

8.3编写GET接口

apiRouter.get('/get',(req,res)=>{//获取到客户端通过查询字符串，发送到服务器的数据const query = req.query//调用res.send()方法，把数据响应给客户端res.send({status:0,             //状态，0表示成功，1表示失败msg:'GET请求成功!',    //状态描述data:query            //需要响应给客户端的具体数据})
})

8.4编写POST接口

apiRouter.get('/post',(req,res)=>{//获取客户端通过请求体，发送到服务器的URL-encoded数据const body = req.body//调用 res.send()方法，把数据响应给客户端res.send({status:0,           //状态，0表示成功，1表示失败msg:'POST请求成功！',//状态描述消息data:body           //响应响应给客户端的具体数据})})

8.5接口跨域问题

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

解决接口跨域问题的方案：

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

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

cors是Express的一个第三方中间件

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

8.7什么是CORS

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

浏览器的同源安全策略默认会阻止网页 “跨域” 获取资源

如果接口服务器配置了CORS相关的HTTP响应头

就可以接触浏览器端的跨域访问限制

注意事项：

1. CORS主要在服务器端进行配置，客户端浏览器无须做任何额外的配置
2. CORS在浏览器中由兼容行

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

响应头部中可以携带一个 Access-Control-Allow-Origin 字段

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

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

例如：

//表示只允许来自http://itcast.cn的请求
rs.setHeader('Access-Control-Allow-Origin','http://itcast.cn')
//表示允许来自任何域的请求
rs.setHeader('Access-Control-Allow-Origin','*')

8.9CORS响应头部- 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-Headers','Content-Type,X-Custom-Header')

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

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

如果客户端希望通过PUT，DELETE等方式请求服务器的资源

则需要在服务器端，通过Access-Control-Alow-Methods

来指明实际请求所允许使用的HTTP方法

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

8.11CORS请求的分类

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

• 简单请求

满足以下条件：

1. 请求方式：GET，POST，HEAD三者之一
2. HTTP头部信息不超过一下9种字段+无自定义头部字段

• 预检请求

  满足任何一个条件：

  1. 请求方式：GET，POST，HEAD之外的请求Method类型
  2. 请求头种包含自定义头部字段
  3. 向服务器发送了application/json 个数的数据

  在浏览器与服务器正式通信之前，浏览器会发送OPTION请求进行预检，以获知浏览器是否允许该实际请求

  所以这一次的OPTON请求称为“预检请求”

  服务器成功响应预检请求后，才会发送真正的请求，并且携带真实的数据

  区别：

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

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

8.12JSONP接口

8.12.1什么是JSONP接口

概念：浏览器端通过

特点：

1. JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象
2. JSONP仅支持GET请求，不支持POST，PUT，DELETE等请求

8.12.2创建JSONP接口的注意事项

如果项目中已经配置了CORS跨域资源共享，为了防止冲突

必须在配置CORS中间件之前声明JSONP的接口

否则JSONP接口会被处理成开启了CORS的接口

//优先创建JSONP接口
app.get('/api/jsonp',(req,res)=>{})//再配置CORS中间件
app.use(cors())//这是一个开启了CORS的接口
app.get('/api/get',(req,res)=>{})

8.12.3实现JSONP接口的步骤

1. 获取客户端发送过来的回调函数的名字
2. 得到要通过JSONP形式发送给客户端的数据
3. 根据前两步得到的数据，拼接出一个函数调用的字符串
4. 把上一步拼接得到的字符串，响应给客户端的

app.get('/api/jsonp',(req,res)=>{//获取客户端发送过来的回调函数的名字const funcName = req.query.callback//得到要通过JSONP形式发送给客户端的数据const data = {name:'zs',age:22}//根据前两步得到的数据，拼接出一个函数调用的字符串const scriptStr = `${funcName}(${JSON.stringify(data)})`//把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行res.send(scriptStr)
})

后记

内容来网上学习视频