Nodejs-Express

Lanborn 1/25/2022 NodejsExpress

# Express学习记录

# Express简介

什么是Express

基于Node.js平台，快速，开放，极简的Web开发框架。类似于Node.js内置的http模块，是专门用来创建Web服务器的。本质：就是Npm上的第三方包，提供了快速创建Web服务器的便捷方法。

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

# 安装express

通过 npm init 命令为你的应用创建一个 package.json 文件
在该文件夹的目录下，打开命令窗口中输入

npm i express --save

注意：如果你不想把Express添加进依赖列表

npm i express --no-save

npm 5.0+ 版本在默认情况下会将安装的模块添加到 package.json 文件中的 dependencies 列表中。对于较老的 npm 版本，你就必须指定 --save 参数。然后，照旧执行 npm install 命令即可自动安装依赖列表中所列出的所有模块。

# Express的基本使用

Express的入门案例

const express = require('express')
// 创建web服务器
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

监听GET请求

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

// 参数1：客户端请求的URL地址
// 参数2：请求对应的处理函数(基本类似于http)

app.get('url', function (req,res ){

})

监听POST请求

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

// 参数1：客户端请求的URL地址
// 参数2：请求对应的处理函数(基本类似于http)

app.post('url', function (req,res ){

})

把内容响应给客户端

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

app.get('/user', (req,res) => {
    // 向客户端发送JSON对象

    res.send( {name: 'zs', age: 20,gender:'男'})
})

app.post('/user/', (req,res) => {
    res.send('请求成功')
})

获取URL中携带的查询参数

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

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

    console.log(req.query)
})

获取URL中的动态参数

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

app.get('/user/:id/:name/:', (req,res)=>{
    console.log(req.params)
})

# 托管静态资源

express.static()

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

现在可以访问这个目录的所有文件

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

多次调用express.static()函数：

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

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

挂载路径前缀

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

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

这个时候，就可以通过带有/public前缀地址来访问public目录中的文件了

# nodemon

nodemon好处

在编写调试Node.js项目的时候，如果修改了项目代码，则需要频繁的手动close掉，然后再重新启动，非常繁琐。

现在，我们可以使用nodemon(https://www.npmjs.com/package/nodemon) 这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon会自动帮我们重启项目，极大方便了开发和调试。

安装nodemon

npm i -g nodemon

使用nodemon

node app.js
// 这个启动方式可以自动重启
nodemon app.js

# Express路由

路由是啥

路由就是一个映射

EXpress路由是指确定应用程序如何响应客户端对特定端点的请求，该端点是 URI（或路径）和特定的 HTTP 请求方法（GET、POST 等）

Express中的路由

每个路由可以有一个或多个处理函数，当路由匹配时执行。其结构是

app.METHOD(PATH, HANDLER)

参数解读：

app 是 express 的一个实例。
METHOD 是一个 HTTP 请求方法，小写。
PATH 是服务器上的路径。
HANDLER 是路由匹配时执行的函数。

路由的匹配过程

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

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

注意点：

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

# 路由的使用

模块化路由

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

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

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

创建路由模块

const express = require('express')

const router = express.Router()

router.get('/user/list', (req,res)=>{
    console.log('Get user list')
});

router.post('/user/add', (req,res)=>{
    console.log('Add new user')
})

module.exports = router

导入注册路由模块

const express = require('express')

const app = express()

const router = require('./router')

app.use(router)

// app.use()函数的作用，就是来注册全局中间件

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

为路由模块添加前缀

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

const useRouter = require('./router/user.js')

app.use('/api', useRouter)

# Express中间件

中间件的概念

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

中间件的调用流程

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

Express中间件的格式

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

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

next函数的作用

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

# Express中间件初体验

定义中间件函数

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

const mw = function( req, res, next) {
    console.log('这是一个最简单的中间件函数')
    // 注意：在当前中间件的业务处理完成后，必须调用next()函数
    next()
}

全局生效的中间件

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

通过调用的jsapp.use(中间件函数)，即可定义一个全局生效的中间件，示例代码如下:

const mw = function(req, res, next) {
    console.log('这是一个最简单的中间件函数')
    next()
}
app.use(mw)

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

app.use(function(req,res,next) {
    console.log('这是')
    next()
})

中间件的作用

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

定义多个全局中间件

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

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

app.use((req,res,next)=>{
    clg(2)
    next()
})
app.get('/',(req,res)=>{
    res.send('Home page')
})

局部生效的中间件

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

const mw1 = (req,res,next)=>{
    console.log('中间件函数')
    next()
}

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

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

定义多个局部生效的中间件

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

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

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

})

5个使用注意事项

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

# 中间件的分类

应用级别的中间件

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

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

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

路由级别的中间件

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

const app = express()

const router = express.Router()

router.use((req,res,next)=>{
    clg('Time', Date.now())
    next()
})

app.use('/',router)

错误级别的中间件

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

格式：该中间件的处理函数中，必须要有四个形参，形参顺序从前到后，分别是(err,req,res,next)

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)
})

Express内置的中间件

Express.static快速托管静态资源的内置中间件，例如：HTML文件、图片、CSS样式等等(无兼容性)
express.json解析JSON格式的请求体数据(有兼容性，仅在4.16.0+版本可用)
express.urlencoded解析URL-encoded格式的请求体数据(有兼容性，仅在4.16.0+版本中可用)

用法：

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

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

第三方的中间件

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

例如：在express4.16.0之前的版本中，经常使用body-parser这个第三方中间件，来解析请求体数据。使用步骤如下：

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

需求：做一个类似于express.urlencoded功能的中间件

步骤：

定义中间件

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

})

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


app.use((req,res,next)=>{
    let str = ''
    req.on('data', (chunk)=>{
        str += chunk
    })
})

监听req的end事件

当请求体数据接收完毕之后，会自动触发req的end事件因此，我们可以在req的end事件中，拿到并处理完整的请求体数据。

req.on('end',()=>{
    // 打印完整的请求体数据
    console.log(str)
    // TODO: 把字符串格式的请求体数据，解析成对象格式

})

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

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

const qs = require('querystring')

const body = qs.parse(str)

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

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

const body = qs.parse(str)

req.body = body
next()

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

# 利用Express写接口

创建基本的服务器
创建API路由模块
编写get接口

apiRouter.get('/get', (req,res)=>{
    const query = req.query

    res.send({
        status : 0,  // 0 - 成功 1-失败
        msg: 'GET请求成功',
        data: query
    })
})

编写POST接口

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

})

注意：要调用express.urlencoded方法，否则无法解析body的内容

CORS跨域资源共享

接口的跨域问题

解决接口的跨域问题的方案主要有两种：
1. CORS(主流的解决方案，推荐使用)
2. JSONP(有缺陷的解决方案：只支持GET请求)
使用cors中间件解决跨域问题

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

step1. 运行npm i cors
step2. 使用const cors = require('cors')
step3. 在路由之前调用api.use(cors()) 配置中间件

什么是CORS

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

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

CORS的注意事项

CORS主要在服务器端进行配置，客户端浏览器无需做任何的配置，即可请求开启了CORS的接口。

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

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

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

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

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

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

res.setHeader('Access-Control-Allow-Origin', 'http://lanboc.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对额外的请求头进行声明，否则这次请求会失败！

// 多个请求头用逗号分隔
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, x-Custom-Header')

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', '*')

CORS请求的分类

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

简单请求

同时满足以下两大条件的请求，就属于简单请求
- 请求方式：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)
预检请求

只要符合以下任何一个条件的请求，都需要进行预检请求：
- 请求方式为GET、POST、HEAD之外的请求Method类型
- 请求头中包含自定义头部字段
- 向服务器发送了application/json 格式的数据

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

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

简单请求的特点：客户端和服务端只会发生一次请求预检请求的特点：客户端和服务器之间会发生两次请求，OPTION预检请求之后，才会发起真正的请求

# JSONP接口

回顾JSONP的概念与特点

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

特点：
- JSONP不属于真正的ajax请求，因为它没有使用XMLHttpRequest这个对象
- JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求
创建JSONP接口的注意事项

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

// 优先配置JSONP接口【这个接口不会被处理成CORS接口】
app.get('/api/jsonp', (req,res)=>{

})
// 在配置CORS中间件[后续的所有接口、都会被处理成CORS接口]
app.use(cors())

app.get('/api/get', (req,res)=>{

})

实现jsonp接口的步骤

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

实现JSONP接口的具体代码：

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)
})

在网页中使用jQuery发送JSONP请求

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

        $('.jsonp').on('click',function(){
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1/api/jsonp',
                dataType: 'jsonp',
                success: function(res){
                    console.log(res)
                }
            })
        })

独自在秋雨后踏碎落叶

Choose mode

Nodejs-Express

Nodejs-Express

# Express学习记录

# Express简介

# 安装express

# Express的基本使用

# 托管静态资源

# nodemon

# Express路由

# 路由的使用

# Express中间件

# Express中间件初体验

# 中间件的分类

# 利用Express写接口

# JSONP接口