Express

Express

介绍
安装
搭建服务器的步骤
express提供的新方法
GET接口
获取GET中的请求参数

POST接口
获取POST请求提交的数据

中间件原理
中间件语法
中间件初体验（设置响应头）
中间件开放静态资源
中间件接收POST请求体
中间件返回404页面

express 介绍

Express 是一个第三方模块，用于快速搭建服务器
Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架。
express保留了http模块的基本API，使用express的时候，也能使用http的API
express还额外封装了一些新方法，能让我们更方便的搭建服务器
express提供了中间件功能，其他很多强大的第三方模块都是基于express开发的
Express 官网
Express 中文文档（非官方）
Express GitHub仓库

安装express

项目文件夹中，执行 npm i express。即可下载安装express。

注意：express不能安装在express文件夹中。否则安装失败。

使用Express构造Web服务器

使用Express构建Web服务器步骤：

加载 express 模块
创建 express 服务器
开启服务器
监听浏览器请求并进行处理

// 使用express 搭建web服务器
// 1) 加载 express 模块
const express = require('express');// 2) 创建 express 服务器
const app = express();// 3) 开启服务器
app.listen(3006, () => console.log('express服务器开始工作了'));// 4) 监听浏览器请求并进行处理app.get('GET请求的地址', 处理函数);app.post('POST请求的地址', 处理函数);

express封装的新方法

express之所以能够实现web服务器的搭建，是因为其内部对核心模块http进行了封装。

封装之后，express提供了非常方便好用的方法。

express
- express.static() – 开放静态资源
- express.urlencoded() – 获取POST请求体
- 其他…
app
- app.get() – 处理客户端的GET请求
- app.post() – 处理客户端的POST请求
- app.use() – 设置应用级别的中间件
- 其他…
req
- req.body – 获取POST请求体
- req.params – 获取GET请求动态参数
- req.query – 获取GET请求参数(获取查询字符串参数)
- 其他…
res
- res.sendFile(文件的绝对路径) – 读取文件，并将结果响应
- res.set({name, value}) – 设置响应头
- res.status(200) – 设置响应状态码
- res.send(字符串或对象) – 响应结果
- res.json(对象) – 以JSON格式响应结果
- res.jsonp() – 以JSONP格式响应结果
- 其他…

请注意，在express中，我们仍然可以使用http模块中的方法。

GET接口

// app.get('请求的URL', callback);
app.get('/api/getbooks', (req, res) => {// 处理GET方式的/api/getbooks接口
});app.get('/', (req, res) => {// 客户端没有指定请求的url，在这里处理。
});app.get('*', (req, res) => {// 处理所有的GET请求
})

app.get('*', (req, res) => {}) 他能够匹配到所有的GET请求，所以把它放到所有接口的最后。

获取GET方式请求的参数

获取url`?参数=值&参数=值`

这种方式的参数，比较常规，参数部分也叫做查询字符串
请求地址的写法： http://localhost:3006/test?id=3&bookname=zxx&age=20
获取方式：req.query

// 写接口
app.get('/test', (req, res) => {console.log(req.query); // { id: '3', bookname: 'zxx', age: '20' }});

获取 url/`:id/:name/:age`

这种方式的参数，叫做动态参数
请求地址的写法：http://localhost:3006/test/3/zs/30
要求请求的url参数必填，否则不能和定义的接口匹配

// 1个参数
// 浏览器的请求  http://localhost/test/3
// 测试接口，获取动态参数
app.get('/test/:id', (req, res) => {console.log(req.params); // 可以获取所有的动态参数 { id: 3 }res.send('收到参数');
});// 多个参数
// 浏览器的请求  http://localhost/test2/3/zhangsan/20
// 测试接口，获取多个动态参数
app.get('/test2/:id/:name/:age', (req, res) => {console.log(req.params); // 可以获取所有的动态参数  // { id: '4', name: 'zhangsan', age: '20' }res.send('全部收到');
});

POST接口

// app.post('请求的URL', callback);
app.post('/api/addbook', (req, res) => {// 处理POST方式的/api/addbook接口
});app.post('*', (req, res) => {// 处理所有的POST请求
})

获取POST请求体

GET方式没有请求体，POST方式才有请求体。
请求体，即客户端提交的数据。
我们仍然可以使用http模块中的语法，获取请求体。
POST请求体，有哪些格式
- 查询字符串 – 对应的Content-Type: application/x-www-form-urlencoded
- FormData对象 – 对应的Content-Type: multipart/form-data; --XXADFsdfssf

请求体是查询字符串


// 客户端，需要发送POST请求，提交的数据随便写// 写接口之前，配置
// 可以帮我们接收 content-type: application/x-www-form-urlencoded类型的请求体
app.use(express.urlencoded({extended: false}));// 后续，任何一个POST接口，都可以通过req.body获取到请求体的内容
app.post('/test', (req, res) => {// 获取请求体console.log(req.body);res.send('你的请求体收到了');
});

postman发送一个POST方式的请求，来配合测试：

在这里插入图片描述

获取FormData类型的请求体

比较麻烦，需要使用第三方模块（multer）才能够获取到。这里不做演示。

中间件介绍

中间件(Middleware )，特指业务流程的中间处理环节。
中间件，是express最大的特色，也是最重要的一个设计
很多第三方模块，都可以当做express的中间件，配合express，开发更简单。
一个express应用，是由各种各样的中间件组合完成的
中间件，本质上就是一个函数/方法

中间件原理

为了理解中间件，我们先来看一下我们现实生活中的自来水厂的净水流程。

在这里插入图片描述

在上图中，自来水厂从获取水源到净化处理交给用户，中间经历了一系列的处理环节
我们称其中的每一个处理环节就是一个中间件。
这样做的目的既提高了生产效率也保证了可维护性。

express中间件原理：

在这里插入图片描述

中间件语法

中间件就是一个函数
中间件函数中有四个基本参数， err、req、res、next
- 很多情况下，err都会省略
- req就是请求相关的对象
- res就是响应相关的对象
- next：它是一个函数，某些时候，可以省略
把写好的中间件函数，传递给 app.get()、app.post()``或app.use()使用

示例代码：

// app.get('/api/getbooks',  中间件函数);
app.get('/api/getbooks', (req, res) => {})app.post('/api/add', 中间件函数, 中间件函数, 中间件函数, ......);// app.use([path],  中间件函数);
app.use((req, res, next) => {});app.use('/my', (req, res, next) => {});

中间件的特点

每个中间件函数，共享req对象、共享res对象
- js代码中，所有的req对象是一个对象；所有的res是一个对象
不调用next()，则程序执行到当前中间件函数后，不再向后执行
- 注意中间件的顺序，因为有可能因为顺序原因，你的中间件函数不会执行
- 为了防止代码逻辑混乱，调用 next() 函数后不要再写额外的代码
客户端发送过来的请求，可能连续调用多个中间件进行处理
使用app.use()注册的中间件，GET和POST请求都可以触发

中间件初体验

为所有的请求，统一设置响应头

// 图书管理案例中，为所有的接口解决跨域问题
// 自定义中间件函数，统一处理跨域
app.use((req, res, next) => {// 为后续所有的接口设置响应头，解决跨域问题res.set({'Access-Control-Allow-Origin': '*'});next();
});

中间件详细使用方法

app.use的第一个参数

// 匹配url开头是 /my 的接口，比如 /my/aa  /my/bb ，但是不能匹配 /mynadsf
app.use('/my', (req, res, next) => {req.abc = '123';next();
});// 匹配url的开头是 /my 的接口，比如 /my/aa  /my/bb  /mysadfa   /myasdfdd
app.use('/my*', (req, res, next) => {.....
});

app.get 和 app.post使用多个中间件

//
// app.get('/abcd', ()=>{},  ()=>{},  ()=>{}, ....);app.get('/abcd', (req, res, next) => {req.abc = 'a';next();
}, (req, res, next) => {req.abc += 'b';next();
}, (req, res) => {res.send(req.abc);
});// app.get('/abcd', [()=>{},  ()=>{}, ....],  ()=>{});
let a = (req, res, next) => {req.abc = 'a';next();
};let b = (req, res, next) => {req.abc += 'b';next();
}app.get('/abcd', [a, b], (req, res) => {res.send(req.abc);
});

中间件的分类

应用级别中间件
- 针对整个项目进行配置的中间件，叫做应用级别的中间件
路由级别中间件
- 写到路由文件中的中间件（稍后介绍路由）
错误处理中间件
- 一般一个项目在最后，设置一个错误处理中间件即可。
- 错误处理中间件，需要填4个参数（err, req, res, next）
内置中间件
- express自带的中间件
  - express.urlencoded()
  - express.static()
第三方中间件
- 别人写的模块，发布到npm上，我们下载下来，可以当做express的中间件
  - multer – 接收FormData数据的模块
  - cors - 解决跨域的
  - …

回顾获取请求体的方法

统一获取post请求体

app.use(express.urlencoded({extended: false}));
// app.use(方法);  --- 这是在配置中间件
// express.urlencoded()  --- 它是中间件函数，是express内置的中间件
// https://www.expressjs.com.cn/4x/api.html#express.urlencoded

express.urlencoded() 这也是一个函数，而且也是一个中间件函数。

它内部实现的原理是：

app.use((req, res, next) => {if (req.method === 'POST') {var str = '';req.on('data', chunk => {str += chunk;});req.on('end', () => {const querystring = require('querystring')req.body = querystring.parse(str);next();})} else {next();}
});

很多中间件，别人早已经写好了。我们直接使用即可。

我们后面还会做很多事情，比如开放静态资源、实现跨域资源共享（CORS）、身份认证、图片上传等等工作，别人早已经写好中间件了。我们后面学习这些中间件如何使用即可。

中间件开放静态资源

什么叫做静态资源
- css文件
- 图片文件
- js文件
- 有时候也包括html文件
- 等等
什么叫做开放静态资源
- 开放，即允许客户端来访问
具体做法
- 比如，允许客户端访问public文件夹里面的文件
- app.use(express.static('public'))

在这里插入图片描述

中间件接收POST请求体

POST请求体的类型（Content-Type）
- application/x-www-form-urlencoded 比如：id=1&name=zs&age=20
- form-data 比如，提交的是FormData对象
- application/json 比如，提交的是 {“id”: 1, “name”: “zs”, “age”: 20}
- 其他…
服务器端接收不同类型的请求体，使用的方式是不同的
- urlencoded —> app.use(express.urlencoded({extended: false}));
- application/json —> app.use(express.json()); – 没有演示
- form-data —> 服务器端使用第三方模块处理（multer）