一、路由
1. 什么是路由
(1)路由就是映射关系。
(2)在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。
2. express路由的组成
客户端的请求地址、请求方式和服务器的处理函数。
app.get/post( ' URL ' , function(){ } )
3. 路由的匹配过程
(1)每当一个请求到达服务器之后,需要先经过路由的匹配。
(2)只有客户端发送的请求方式和请求地址都匹配成功后,才会调用对应的服务器处理函数。
4. 路由的简单使用
直接将路由挂载到服务器上。
const express = require('express')
const app = express()
// 挂载路由
app.get('/', (req, res) => {
res.send('hello world.')
})
app.post('/', (req, res) => {
res.send('Post Request.')
})
app.listen(80, () => {
console.log('http://127.0.0.1')
})
5. 路由的模块化使用
不要把路由直接挂载到服务器上,而是将路由抽离为单独的模块。
① 创建路由模块对应的 .js 文件
② 调用 express.Router() 函数创建路由对象
③ 向路由对象上挂载具体的路由
④ 使用 module.exports 向外共享路由对象
// 1.导入express包
const express = require('express')
// 2.创建路由的实例对象
const router = express.Router();
// 3.挂载具体的路由
router.get('/user/list', (req, res) => {
res.send('获取列表成功')
})
router.post('/user/add', (req, res) => {
res.send('添加列表成功')
})
// 4.共享路由对象
module.exports = router;
⑤ 创建服务器的js文件,在服务器的js文件中使用 app.use() 函数注册路由模块。
// 导入express包
const express = require('express');
// 创建服务器实例对象
const app = express();
// 5.注册路由模块
const userRouter = require('./2.路由模块');
app.use('/api',userRouter); //为路由添加URL前缀
// 启动服务器
app.listen(80, () => {
console.log('express server running at http://127.0.0.1:80');
});
二、中间件
1. 什么是中间件
(1)定义:中间件(Middleware ),特指业务流程的中间处理环节。
(2)执行:当一个请求到达 Express 的服务器之后,首先会依次调用多个中间件对这次请求进行预处理。然后才会调用路由函数。
2. 中间件的格式
(1)Express中的中间件本质上就是一个function处理函数。
(2)中间件函数的参数有三个req、res、next。
(3)路由函数的参数只有两个req和res。
app.get( ' / ' ,function( req ,res, next ) { next( ) } )
这里的function函数就叫中间件。
const express = require('express');
const app = express();
// 定义一个最简单的中间件函数
var mw = function (req, res, next) {
console.log('这是一个最简单的中间件函数');
// 当前中间件处理结束后必须调用next()函数
next();
};
app.listen(80, () => {
console.log('express running at http://127.0.0.1:80');
});
注意:
①中间件必须有参数next函数,因为上一个中间件的输出会作为下一个中间件的输入。
②当前中间件的业务处理完毕后,必须调用next( )函数。
3. 全局生效的中间件函数
app.use( 中间件函数 ) (是函数,别忘了小括号())
app.use(function (req, res, next) {
console.log('这是一个最简单的中间件函数');
// 当前中间件处理结束后必须调用next()函数
next();
});
4. 中间件的作用
(1)多个中间件和路由共享相同的req和res对象。
(2)基于此特性,可以在上游的中间件上为req或res对象添加自定义属性或方法,供下游中间件和路由使用。
// 导入express包,创建服务器实例对象
const express = require('express');
const app = express();
// 创建第一个全局生效的中间件
app.use(function (req, res, next) {
const time = +new Date(); //获取当前时间戳
req.time = time; //为req对象挂载自定义属性
console.log('第一个中间件被执行');
next();
});
// 创建第二个全局生效的中间件
app.use(function (req, res, next) {
console.log('第二个中间件被执行');
next();
});
// 路由
app.get('/', function (req, res) {
res.send('根地址的get请求成功' + req.time);
});
// 启动服务器
app.listen(80, () => {
console.log('express server running at http://localhost');
});
5. 局部生效的中间件
不使用app.use( )方法进行注册,而是在指定路由里面调用的中间件叫局部中间件。例如:
app.get( ' /user ' ,mw1 ,mw2 ,(req ,res)=>{ } )
app.get( ' /user ' ,[mw1 ,mw2] ,(req ,res)=>{ } )
const express = require('express');
const app = express();
// 创建第一个局部生效的中间件
const mw1 = function (req, res, next) {
console.log('第一个局部生效的中间件被调用了');
next();
};
// 创建第二个局部生效的中间件
const mw2 = function (req, res, next) {
console.log('第二个局部生效的中间件被调用了');
next();
};
// 创建路由,调用局部中间件
app.get('/user', mw1,mw2, function (req, res) {
res.send('/user地址的get请求成功');
});
app.listen(80, () => {
console.log('express server running at http://localhost');
});
6. 中间件的注意事项
(1)除了错误级别的中间件,其它必须在路由之前注册中间件。
(2)客户端发送的请求,可以连续调用多个中间件。
(3)一个中间件业务处理完成后,必须调用next( )函数。
(4)next( )函数后面不能再写代码。
(5)被调用的中间件以及路由之间共享相同的req和res对象。
特殊场景:服务器暂停服务时,用中间件拦截所有请求,第一个中间件不调用next( )。
三、中间件的分类
1. 应用级别的中间件
绑定到app服务器上的中间件就叫应用级别的中间件。
比如app.use( )绑定的全局中间件;app.get( )和app.post( )绑定的局部中间件。
2. 路由级别的中间件
绑定到路由上的中间件就叫路由级别的中间件。
作用和 应用级别的中间件没有差别。
3. 错误级别的中间件
定义全局生效的错误级别的中间件,专门捕获服务器的错误,防止服务器崩溃。
app.use( function( err ,req ,res,next ){ next( ) }
注意:①错误级别的中间件必须写在所有路由的后面。
②错误级别的中间件函数有四个参数。
const express = require('express');
const app = express();
// 1.路由
app.get('/', (req, res) => {
throw new Error('服务器法生了错误');
res.send('get请求成功');
});
// 2.全局生效的错误级别的中间件
app.use(function (err, req, res, next) {
res.send('捕捉到了服务器的错误');
next();
})
app.listen(80, () => {
console.log('express server running at http://localhost');
});
4.Express的内置中间件
(1)express.static()方法可以创建一个静态资源服务器。详情见第三天笔记。
(2)express.json( )方法解析JSON格式的请求体数据。(有兼容性,仅在4.16.0+ 版本中可用)
补充:req.body可以接收客户端提交的数据。
如果没有配置任何解析数据的中间件,req.body默认为underfined
app.use(express.json( ) )
const express = require('express');
const app = express();
// 1.创建用来解析JSON格式数据的内置中间件
app.use(express.json());
// 2.路由
app.post('/user', (req, res) => {
console.log(req.body); //req.body可以接收客户端提交的数据
res.send('post请求发送成功');
});
app.listen(80, () => {
console.log('express server running at http://localhost');
});
(3) express.urlencoded( )方法可以 解析URL-encoded 格式的请求体数据。
也就是form表单提交数据的键值对格式。
(有兼容性,仅在4.16.0+ 版本中可用)
app.use(express.urlencoded( {extended: false}) )
5. 第三方的中间件
非 Express 官方内置的中间件,而是由第三方开发出来的Express 中间件,叫做第三方中间件。在项目中,可以按需下载并配置第三方中间件,从而提高项目的开发效率。
例如:除了使用 express.urlencoded 这个内置中间件来解析请求体数据,还可以使用body-parser 这个第三方中间 件,来解析请求体数据。使用步骤如下:
① 下载 npm install body-parser中间件
② 使用 require 导入中间件
③ 调用 app.use() 将中间件注册为全局生效。
注意:Express 内置的 express.urlencoded中间件,就是基于body-parser 这个第三方中间件进一步封装出来的。
const express = require('express');
const app = express();
// 1.导入第三方中间件
const parse = require('body-parse');
// 2.将第三方中间件注册为全局生效的中间件
app.use(parse.urlencoded({ extended: false }));
// 3.路由
app.post('/user', (req, res) => {
console.log(req.body); //req.body可以接收客户端提交的数据
res.send('post请求发送成功');
});
app.listen(80, () => {
console.log('express server running at http://localhost');
});
四、自定义解析url-encoded(form表单)数据的中间件
1.主体内容的编写:
(1)定义中间件函数。
(2)监听req的data事件。
data事件可以获取到客户端发送地请求体数据。
但是客户端的数据分多次发送,所以要定义一个变量str用来把每次的数据进行拼接。
(3)监听req的end事件。
当客户端最终把所有数据发送到服务器之后,会自动触发 req 的 end 事件。
此时,导入Node.js的内置模块querystring,可以将查询字符串转换成对象格式。
(4)将处理好的数据对象挂载到req对象上。
// 导入querystring模块
const qs = require('querystring');
// 自定义中间件函数
function bodyParse(req, res, next) {
// (1)定义变量str用来接收客户端发送的请求体数据
var str = '';
// (2)监听req的data事件
req.on('data', function (chunk) {
str += chunk;
});
// (3)监听req的end事件
req.on('end', function () {
// (4)使用Node.js的内置模块querystring,将查询字符串转换成对象格式
const body = qs.parse(str);
// (5)将获取到的数据对象挂载到req对象上,供下游路由使用
req.body = body;
next();
});
}
// 将自定义中间件函数对外共享
module.exports = bodyParse;
2.将自定义中间件封装为模块
类似于路由的模块化使用:
(1)创建存放自定义中间件的.js文件。
(2)用module.exports,将写好的自定义中间件函数对外共享。
(3)在服务器的.js文件中导入中间件模块。
(4)使用app.use( )方法,把中间件注册为全局有效。
const express = require('express');
const app = express();
// 导入自定义中间件模块
const p = require('./9.自定义解析数据的中间件');
// 将中间件注册为全局生效
app.use(p);
// 路由
app.post('/user', (req, res) => {
res.send(req.body); //req.body可以接收客户端提交的数据
});
app.listen(80, () => {
console.log('express server running at http://localhost');
});
五、使用 Express 写接口(实现跨域请求)
(1)创建路由模块的.js文件。
(2)在路由模块中挂载响应客户端的路由。
(3)将路由对象对外共享。
// 导入express包
const express = require('express');
// 创建路由实例对象
const apiRouter = express.Router();
// 1.挂载路由,响应get请求
apiRouter.get('/get', (req, res) => {
// (1)获取用户通过查询字符串,发送到服务器的数据
const query = req.query;
// (2)响应客户端
res.send({
status: 0,
msg: 'GET请求成功',
data: query,
});
});
// 2.挂载路由,响应post请求
apiRouter.post('/post', (req, res) => {
// (1获取用户通过请求体,发送到服务器的url-encoded数据
const body = req.body;
// (2)响应客户端
res.send({
status: 0,
msg: 'POST请求成功',
data: body,
});
});
// 把路由对象对外共享
module.exports = apiRouter;
(4)创建基本的服务器。
(5)在服务器.js文件中导入路由模块。
// 导入express包
const express = require('express');
// 创建服务器实例对象
const app = express();
//导入路由模块
const apiRouter = require('./12.创建接口的路由模块');
// 导入解析url-encoded格式数据的内置中间件
app.use(express.urlencoded({ extended: false }));
// 导入cors中间件,解决接口跨域问题
const cors = require('cors');
// 必须在配置cors之前,创建JSONP接口
app.get('api/jsonp', (req, res) => {
// (1)获取客户端发送的回调函数的名称
const funName = req.query.callback;
// (2)定义响应给客户端的数据对象
const data = { name: '吴磊', age: 22 };
// (3)根据前两步,拼接出函数调用的JSON字符串
const scriptStr = `${funName}(${JSON.stringify(data)})`;
// (4)将拼接好的JSON字符串响应给客户端
res.send(scriptStr);
});
// 将cors配置为全局生效
app.use(cors());
// 将路由注册为全局生效
app.use('/api', apiRouter);
// 启动服务器
app.listen(80, () => {
console.log('express server running at http://localhost');
});
六、接口的跨域请求
1. 在线版jQuery
2.使用 cors 中间件解决跨域问题
cors 是 Express 的一个第三方中间件。通过安装和配置cors 中间件,可以很方便地解决跨域问题。
使用步骤分为如下3 步:
① 运行 npm install cors 安装中间件
② 使用 const cors = require('cors') 导入中间件
③ 在路由之前调用app.use( )方法 配置中间件。(注意格式!!!)
app.use( cors())
七、 了解cors中间件
1. 什么是 CORS
CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列传输的HTTP 头组成,这些HTTP 头决定浏 览器是否阻止前端JavaScript 代码获取跨域请求的响应。
同源安全策略默认阻止“跨域”获取资源。但是CORS 给了 web 服务器这样的权限,即服务器可以选择,允许跨 域请求访问到它们的资源。
2. CORS 的注意事项
① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口。
② CORS 在浏览器中有兼容性。只有支持XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服 务端接口(例如:IE10+、Chrome4+、FireFox3.5+)
3. CORS 响应头部 :Access-Control-Allow-Origin
(1)响应头部中可以携带一个 Access-Control-Allow-Origin字段。
(2)origin 参数的值指定了允许访问该资源的外域URL。
(3)如果origin参数的值为通配符*,表示允许来自任何域的请求。
res.setHeader( " Access-Control-Allow-Origin " ," http:www.baidu.com" )
4. 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" )
5. CORS 响应头部 :Access-Control-Allow-Methods
默认情况下,CORS 仅支持客户端发起GET、POST、HEAD 请求。
如果客户端希望通过 PUT、DELETE等方式请求服务器的资源,则需要在服务器端,通过Access-Control-Alow-Methods 来指明实际请求所允许使用的 HTTP 方法。
res.setHeader( " Access-Control-Allow-Methods " ," POST,GET,HEAD,DELETE" )
6. 简单请求
同时满足以下两大条件的请求,就属于简单请求:
① 请求方式:GET、POST、HEAD 三者之一
② HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、 Downlink、Save-Data、Viewport-Width、Width 、Content-Type(只有三个值application/x-www-formurlencoded、multipart/form-data、text/plain)
简单请求的特点:客户端与服务器之间只会发生一次请求。
7. 预检请求
只要符合以下任何一个条件的请求,都需要进行预检请求:
① 请求方式为 GET、POST、HEAD 之外的请求Method 类型
② 请求头中包含自定义头部字段
③ 向服务器发送了application/json 格式的数据
在浏览器与服务器正式通信之前,浏览器会先发送OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一 次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。
预检请求的特点:OPTION 预检请求成功之后,才会发起真正的请求。
八、 JSONP接口的定义与使用
1. JSONP 的概念与特点
概念:浏览器端通过 <script> 标签的 src 属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求数据 的方式叫做 JSONP。
特点:JSONP 仅支持 GET 请求,不支持POST、PUT、DELETE 等请求。
2. 实现 JSONP 接口的步骤
如果项目中已经配置了 CORS 跨域资源共享,为了防止冲突,必须在配置CORS 中间件之前声明JSONP的接口。否则 JSONP 接口会被处理成开启了CORS 的接口。
① 获取客户端发送过来的回调函数的名字
② 得到要通过 JSONP 形式发送给客户端的数据
③ 根据前两步得到的数据,拼接出一个函数调用的字符串
④ 把上一步拼接得到的字符串,响应给客户端的<script> 标签进行解析执行
// 必须在配置cors之前,创建JSONP接口
app.get('api/jsonp', (req, res) => {
// (1)获取客户端发送的回调函数的名称
const funName = req.query.callback;
// (2)定义响应给客户端的数据对象
const data = { name: '吴磊', age: 22 };
// (3)根据前两步,拼接出函数调用的JSON字符串
const scriptStr = `${funName}(${JSON.stringify(data)})`;
// (4)将拼接好的JSON字符串响应给客户端
res.send(scriptStr);
});
3.使用jQuery调用JSONP接口
具体格式见Ajax第四天笔记。
补充
(1)服务器的app.use( )方法专门用来注册全局有效的中间件或者路由。
(2)express.static( )内置中间件和路由在用app.use( )注册时,可以添加前缀。
(3)req.query可以获取客户端通过查询字符串,发送到服务器的数据。
(4)req.body客户获取客户端通过请求体,发送到服务器的数据。数据格式为JSON、url-encoded等,获取后需要通过中间件解析后才能读取。