express实现文件上传 express 使用

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服务器步骤：

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

// 使用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）

当初学习ajax的时候，如果是POST请求，为什么要加Content-Type

使用第三方的中间件，实现跨域资源共享

昨天，我们自己写了中间件，实现了跨域资源共享（CORS）。但是是自己写的中间件。

实际上，实现跨域资源共享，可以使用一个叫做 cors 的第三方模块。推荐使用它来实现跨域资源共享。

使用方法：

• 下载安装cors npm i cors
• const cors = require('cors'); — 加载模块
• app.use(cors()); – 注册中间件即可

中间件返回404页面

• 服务器的代码，你的接口要写到前面
• 当浏览器的请求到达服务器，优先使用你的接口
• 如果请求的不是你的接口，则返回404页面
• 所以，处理404要放到代码的最后。