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）

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

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

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

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

使用方法：

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

中间件返回404页面

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

Express — 使用步骤相关推荐

使用express搭建第一个Web应用【Node.js初学】
来源:http://jingyan.baidu.com/article/bad08e1ee501e009c8512106.html express是一个开源的node.js项目框架,初学者使用expr ...
nodejs之express路由与动态路由
1.快速创建express项目步骤 /*** 1.cd 到项目里面* 2.npm init --yes 创建package.json文件* 3.安装express* npm install expre ...
windows下安装nodejs及框架express
npm install -g --registry=http://registry.npm.taobao.org/ cnpm cnpm install anything-you-want nodejs ...
如何备份和还原 Outlook Express 数据
如何备份 Outlook Express 项步骤 1:将邮件文件复制到备份文件夹步骤 A:定位存储文件夹 1. 启动 Outlook Express. 2. 单击&qu ...
数据库存在即更新的高并发处理 - 转
这篇文章的主要内容,来自与其他人的讨论. 软件系统的开发或设计时,容易遇到有并发的情况.有时候需要刻意去避免,防止数据错误.比如超市卖商品,可能两个柜台同时卖出一款矿泉水,如果软件系统后台需要跟踪每个 ...
学习记录 - 每周知识总结
01.工厂函数和构造函数对象发展史 * 基本对象 --> 工厂函数 --> 构造函数基本对象 var stu = {name: 'zs',age: 14,eat: function ( ...
成功到达对方服务器后系统退信,邮件系统使用常见问题
一.如何申请我校邮箱? 答:在办公自动化系统进行申请.具体的,在事务申请中,选择"电子邮箱申请",并填写相应内容后,按申请流程操作即可完成电子邮箱的申请. 二.如何访问我校的邮件系 ...
【Nodejs】文件读写综合案例
一.核心模块-文件读写核心模块就是nodejs自带的模块,在安装完nodejs之后,就可以任意使用啦.相当于学习js时使用的Math对象一样自定义模块程序员自己写的模块.相当于我们在学习js时 ...
如何搭建html运行环境,搭建基于express框架运行环境的方法步骤
一.Express简介 Express提供了一个轻量级模块,把Node.js的http模块功能封装在一个简单易用的接口中.Express也扩展了http模块的功能,使你轻松处理服务器的路由.响应.co ...

Express — 使用步骤

Express

express 介绍

安装express

使用Express构造Web服务器

express封装的新方法

GET接口

获取GET方式请求的参数

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

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

POST接口

获取POST请求体

请求体是查询字符串

获取FormData类型的请求体

中间件介绍

中间件原理

中间件语法

中间件的特点

中间件初体验

中间件详细使用方法

app.use的第一个参数

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

中间件的分类

回顾获取请求体的方法

中间件开放静态资源

中间件接收POST请求体

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

中间件返回404页面

Express — 使用步骤相关推荐

最新文章

热门文章

Express — 使用步骤

Express

express 介绍

安装express

使用Express构造Web服务器

express封装的新方法

GET接口

获取GET方式请求的参数

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

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

POST接口

获取POST请求体

请求体是查询字符串

获取FormData类型的请求体

中间件介绍

中间件原理

中间件语法

中间件的特点

中间件初体验

中间件详细使用方法

app.use的第一个参数

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

中间件的分类

回顾获取请求体的方法

中间件开放静态资源

中间件接收POST请求体

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

中间件返回404页面

Express — 使用步骤相关推荐

最新文章

热门文章

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

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