初识 Express
Express简介
Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架。
通俗的理解:Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的。
Express 的本质:就是一个 npm 上的第三方包,提供了快速创建 Web 服务器的便捷方法。Express 的中文官网
Web 网站服务器:专门对外提供 Web 网页资源的服务器。
API 接口服务器:专门对外提供 API 接口的服务器。
使用 Express,我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器。
Express的基本使用
在项目所处的目录中,运行如下的终端命令,即可将 express 安装到项目中使用:npm i express@4.17.1
1、创建基本的Web服务器
通过 app.get() 方法,可以监听客户端的 GET 请求
通过 app.post() 方法,可以监听客户端的 POST 请求
通过 res.send() 方法,可以把处理好的内容,发送给客户端
///1、导入express
const express = require('express')
//2、创建web服务器
const app = express()
//4、监听客户端的get和post请求,并向客户端响应具体的内容
app.get('/user',(req,res) =>{
//调用express提供的res.send()方法,向客户端响应一个JSON对象
res.send({name:'zs',age:20,gender:'男'})
})
app.post('/user',(req,res) =>{
//调用express提供的res.send()方法,向客户端响应一个文本
res.send('请求成功')
})
//3、调用app.listen(端口号,启动成功后的回调函数),启动服务器
app.listen(80,() => {
console.log('express server running at http://127.0.0.1')
})
2、获取URL中携带的查询参数
通过req.query对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数。
app.get('/',(req,res) => {
//通过req.query可以获取到客户端发送过来的查询参数
//注意:默认情况下,req.query是一个空对象
//客户端使用http://127.0.0.1/?username=zs&age=20这种查询字符串形式,发送到服务器的参数
//可以通过req.query对象访问到
console.log(req.query)//{}
res.send(req.query)//{}
})
3、获取URL中的动态参数
通过 req.params 对象,可以访问到 URL 中,通过 : 匹配到的动态参数:
//URL地址中,可以通过:参数名的形式,匹配动态参数值
app.get('/user/:id',(req,res) => {
//req.params默认是一个空对象
//里面存放着通过:动态匹配的参数值
console.log(req.params)//{ id: '1' }
res.send(req.params)
})
///user/:id,这里的意思就是在冒号后面匹配一个动态参数,也可以匹配两个动态参数
//如果写成http://127.0.0.1/usr/3/zs则获取到的参数就为{"id":"3","name":"23"},如果在代码中将id换为ids,则打印出来的参数名也是会自动由id转换为ids
托管静态资源
1. express.static()
express 提供了一个非常好用的函数,叫做 express.static(),通过它,我们可以非常方便地创建一个静态资源服务器,
例如,通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了:
const express = require('express')
const app = express()
//这里调用express.static()方法,快速的对外提供静态资源
//clock这层目录不会出现在访问路径中
app.use(express.static('./clock'))
app.listen(80,() => {
console.log('express server running at http://127.0.0.1')
})
//访问路径为http://127.0.0.1/index.html
Express在指定的静态目录中查找文件,并对外提供资源的访问路径,因此,存放静态文件的目录名不会出现在URL中。
2. 托管多个静态资源目录
如果要托管多个静态资源目录,则需多次调用express.static()函数
访问静态资源文件时,,express.static() 函数会根据目录的添加顺序查找所需的文件。
3. 挂载路径前缀
如果希望在托管的静态资源访问路径之前,挂载路径前缀,则可以使用如下的方式:app.use('/clock',express.static('./clock'))
这样就可以使用带有/clock的前缀地址来访问public目录中的文件了。
nodemon
1. 为什么要使用 nodemon
在编写调试 Node.js 项目的时候,如果修改了项目的代码,则需要频繁的手动 close 掉,然后再重新启动,非常繁琐。
现在,我们可以使用 nodemon(https://www.npmjs.com/package/nodemon) 这个工具,它能够监听项目文件
的变动,当代码被修改后,nodemon 会自动帮我们重启项目,极大方便了开发和调试。
2. 安装 nodemon
在终端中,运行如下命令,即可将 nodemon 安装为全局可用的工具:npm install -g nodemon
3. 使用 nodemon
当基于 Node.js 编写了一个网站应用的时候,传统的方式,是运行 node app.js 命令,来启动项目。这样做的坏处是:代码被修改之后,需要手动重启项目。
现在,我们可以将 node 命令替换为 nodemon 命令,使用 nodemon app.js 来启动项目。这样做的好处是:代码
被修改之后,会被 nodemon 监听到,从而实现自动重启项目的效果。
具体实现为:将node app.js
替换为nodemon app.js
Express 路由
路由就是映射关系
路由的概念
在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数,格式如下:app.METHOD(PATH,HANDLER)
//匹配GET请求,且请求URL为/
app.get('/',function(req,res) {
res.send('Hello World!')
})
//匹配POST请求,且请求路径URL为/
app.post('/',function (req,res){
res.send('got a post request!')
})
路由的匹配过程
每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。在匹配时,会按照路由的顺序进行匹配,只有匹配成功,才会调用对应的处理函数,在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的URL同时匹配成功,则Express会将这次请求,转交给对应的function函数进行处理。
路由会按照定义的先后顺序进行匹配,请求类型和请求的URL同时匹配成功才会调用对应的处理函数,在Express中使用路由最简单的方式,就是把路由挂载到app上,示例如下:
//
///1、导入express
const express = require('express')
//2、创建web服务器
const app = express()
//匹配GET请求,且请求URL为/
app.get('/',function(req,res) {
res.send('Hello World!')
})
//匹配POST请求,且请求路径URL为/
app.post('/',function (req,res){
res.send('got a post request!')
})
//3、调用app.listen(端口号,启动成功后的回调函数),启动服务器
app.listen(80,() => {
console.log('express server running at http://127.0.0.1')
})
路由的使用
模块化路由
为了方便对路由进行模块化的管理,Express 不建议将路由直接挂载到 app 上,而是推荐将路由抽离为单独的模块。
将路由抽离为单独模块的步骤如下:
① 创建路由模块对应的 .js 文件
② 调用 express.Router() 函数创建路由对象
③ 向路由对象上挂载具体的路由
④ 使用 module.exports 向外共享路由对象
⑤ 使用 app.use() 函数注册路由模块
注册路由模块
const express = require('express')
const app = express()
//1、导入路由模块
const router = require('./04router')
//2、注册路由模块
app.use(router)
app.listen(80,() => {
console.log('http://127.0.0.1')
})
路由模块
//这是路由模块
//1、导入express
const express = require('express')
//2、创建路由对象
const router = express.Router()
//3、挂载具体的路由
router.get('/user/list',(req,res) =>{
res.send('Get user list.')
})
router.post('/user/add',(req,res) =>{
res.send('Add new user.')
})
//4、向外导出路由对象
module.exports = router
为路由模块添加前缀
类似于托管静态资源时,为静态资源统一挂载访问前缀一样,路由模块添加前缀的方式如下
const express = require('express')
const app = express()
//1、导入路由模块
const router = require('./04router')
//2、注册路由模块
app.use(router)
app.listen(80,() => {
console.log('http://127.0.0.1')
})
在这里,app.use()函数的作用,就是来注册全局中间件,所以我们使用的express.static和router都是中间件
Express 中间件
中间件的概念
当一个请求到达 Express 的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理
Express 中间件的格式
Express 的中间件,本质上就是一个 function 处理函数,Express 中间件的格式如下:
注意:中间件函数的形参列表中,必须包含next参数,而路由处理函数中只包含req和res
next函数的作用
next函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由。
使用Express中间件
定义中间件函数
//
const express = require('express')
const app = express()
//定义一个最近单的中间件函数
const mw = function (req,res,next){
console.log('这是最简单的中间件函数')
//把流转关系,转交给下一个中间件或路由
next()
}
app.listen(80,() =>{
console.log('http://127.0.0.1')
})
全局生效的中间件
客户端发起的任何请求,到达服务器之后,都会触发的中间件,叫做全局中间件。通过调用app.use(中间件函数),即可定义一个全局生效的中间件。
//
const express = require('express')
const app = express()
//定义一个最近单的中间件函数
const mw = function (req,res,next){
console.log('这是最简单的中间件函数')
//把流转关系,转交给下一个中间件或路由
next()
}
//将mw注册为全局生效的中间件
app.use(mw)
app.get('/',(req,res) => {
res.send('Home page')//Home page
})
app.get('/user',(req,res) =>{
res.send('User page')//User page
})
app.listen(80,() =>{
console.log('http://127.0.0.1')
})
定义全局中间件的简化形式
//全局生效的中间件
app.use(function(req,res,next){
console.log('这是一个最简单的中间件函数')
next()
})
中间件的作用
多个中间件之间,共享同一份 req 和 res。基于这样的特性,我们可以在上游的中间件中,统一为 req 或 res 对象添加自定义的属性或方法,供下游的中间件或路由进行使用。
//
const express = require('express')
const app = express()
//将mw注册为全局生效的中间件
app.use((req,res,next)=>{
//获取到请求到达服务器的时间
const time = Date.now()
//为req对象,挂载自定义属性,从而把时间共享给后面的所有路由
req.startTime = time
next()
})
app.get('/',(req,res) => {
res.send('Home page!' + req.startTime)//Home page
})
app.get('/user',(req,res) =>{
res.send('User page!'+ req.startTime)//User page
})
app.listen(80,() =>{
console.log('http://127.0.0.1')
})
定义多个全局中间件
可以使用 app.use() 连续定义多个全局中间件。客户端请求到达服务器之后,会按照中间件定义的先后顺序依次进行调用,示例代码如下:
//
const express = require('express')
const app = express()
//将mw注册为全局生效的中间件
app.use((req,res,next)=>{
//获取到请求到达服务器的时间
const time = Date.now()
//为req对象,挂载自定义属性,从而把时间共享给后面的所有路由
req.startTime = time
console.log('调用了第一个全局中间件')
next()
})
app.use((req,res,next)=>{
console.log('调用了第二个全局中间件')
next()
})
app.get('/',(req,res) => {
res.send('Home page!' + req.startTime)//Home page
})
app.get('/user',(req,res) =>{
res.send('User page!'+ req.startTime)//User page
})
app.listen(80,() =>{
console.log('http://127.0.0.1')
})
局部生效中间件
不使用app.use()定义的中间件,叫做局部生效的中间件
//nw为中间件函数
//nw这个中间件只在“当前路由中生效,这种用法属于'局部生效中间件'”
app.get('/',nw,(req,res) => {
res.send('Home page!' + req.startTime)//Home page
})
定义多个局部中间件
在路由中,通过两种等价的方式,使用多个局部中间件
//以下两种写法是“完全等价的”,可根据自己的喜好,选择任意一种方式进行使用
app.get('/',nw1,nw2,(req,res) => {res.send('Home page!' + req.startTime)})
app.get('/',[nw1,nw2],(req,res) => {res.send('Home page!' + req.startTime)})
了解中间件的5个注意事项
1、一定要在路由之前注册中间件
2、客户端发送过来的请求,可以连续调用多个中间件进行处理
3、执行完中间件的业务逻辑后,不要忘记调用next()函数
4、为了防止代码逻辑混乱,调用next()函数后不要再写额外的代码
5、连续调用多个中间件时,多个中间件之间,共享req和res对象
中间件分类
==中间件的分类为:==应用级别中间件、路由级别中间件、错误级别中间件、Express内置中间件、第三方中间件。
1、应用级别中间件
通过app.use()或app.get()或app.post(),绑定到app实例上的中间件,叫做应用级别的中间件
//应用级别(全局)
app.use((req,res,next) =>{
next
})
//应用级别(局部)
app.get('/',nw1,(req,res) =>{
res.send('home page')
})
2. 路由级别的中间件
绑定到 express.Router() 实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不
过,应用级别中间件是绑定到 app 实例上,路由级别中间件绑定到 router 实例上
//路由级别
router.use(function (req,res,next){
console.log('Time',Data.now())
next()
})
3. 错误级别的中间件
错误级别中间件的作用:专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。
格式:错误级别中间件的 function 处理函数中,必须有 4 个形参,形参顺序从前到后,分别是 (err, req, res, next)。
//错误级别
app.get('/',function (req,res){//路由
throw new Error('服务器内部发生了错误!')//抛出一个自定义错误
res.send('Home Page.')
})
app.use(function (err,req,res,next) {//错误级别的中间件
console.log('发生了错误:' + err.message)//在服务器打印错误消息
res.send('Error!' + err.message)//向客户端响应错误相关内容
})
错误级别的中间件,必须注册在所有路由之后!
4.Express内置中间件
自 Express 4.16.0 版本开始,Express 内置了 3 个常用的中间件,极大的提高了 Express 项目的开发效率和体验:
① express.static 快速托管静态资源的内置中间件,例如: HTML 文件、图片、CSS 样式等(无兼容性)
② express.json 解析 JSON 格式的请求体数据(有兼容性,仅在 4.16.0+ 版本中可用)
const express = require('express')
const app = express()
//除了错误级别的中间件,其他的中间件,必须在路由之前进行配置
app.use(express.json())//配置解析application/json格式的内置中间件
app.post('/user',(req,res) =>{
//在服务器,可以使用req.body这个属性,来接收客户端发送过来的请求体数据
//默认情况下,如果不配置解析表单数据的中间件,则req.body默认等于undefined
console.log(req.body)
res.send('ok')
})
app.listen(80,() =>{
console.log('http://127.0.0.1')
})
③ express.urlencoded 解析 URL-encoded 格式的请求体数据(有兼容性,仅在 4.16.0+ 版本中可用
const express = require('express')
const app = express()
//除了错误级别的中间件,其他的中间件,必须在路由之前进行配置
app.use(express.urlencoded({extendend:false}))
app.post('/book',(req,res) =>{
//在服务器端,可以通过req.body获取Json格式的表单数据和url-encoded格式的数据
console.log(req.body)
res.send('ok')
})
app.listen(80,() =>{
console.log('http://127.0.0.1')
})
5.第三方的中间件
非 Express 官方内置的,而是由第三方开发出来的中间件,叫做第三方中间件。在项目中,大家可以按需下载并配置
第三方中间件,从而提高项目的开发效率。
例如:在 express@4.16.0 之前的版本中,经常使用 body-parser 这个第三方中间件,来解析请求体数据。使用步
骤如下:
① 运行 npm install body-parser 安装中间件
② 使用 require 导入中间件
③ 调用 app.use() 注册并使用中间件
注意:Express 内置的 express.urlencoded 中间件,就是基于 body-parser 这个第三方中间件进一步封装出来的。
使用 Express 写接口
1、创建基本服务器
//导入express模块
const express = require('express')
//创建express的服务器实例
const app = express()
//导入路由模块
const router = require('./08apiRouter')
//把路由模块注册到app上
app.use('/api',router)
app.listen(80,() =>{
console.log('Express server running at http://127.0.0.1')
})
2、创建API路由模块
//apiRouter.js[路由模块]
const express = require('express')
const router = express.Router()
module.exports = router
编写GET接口
//apiRouter.js[路由模块]
const express = require('express')
const router = express.Router()
//在这里挂载对应的路由
router.get('/get',(req,res) =>{
//1、通过req.query获取到客户端通过查询字符串,发送到服务器的数据
const query = req.query
//2、调用res.send()方法,把数据响应给客户端
res.send({
status:0,//状态:0表示成功,1表示失败
msg:'GET请求成功',//状态描述
data:query//需要响应给客户端的具体数据
})
})
module.exports = router
填写数据,将客户端发送到服务器的数据通过res.send响应给客户端
编写POST接口
router.post('/post',(req,res) =>{
//1、获取客户端通过请求体,发送到服务器URL—encoded数据
const body = req.body
//2、调用res.send()方法,把数据响应给客户端
res.send({
status:0,
msg:'POST请求成功',
data:body
})
注意:如果要获取 URL-encoded 格式的请求体数据,必须配置中间件 app.use(express.urlencoded({ extended: false }))
CORS 跨域资源共享
1、接口的跨域问题
刚才编写的GET和POST接口,存在一个很严重的问题:不支持跨域请求。
解决接口跨域问题的方案主要有两种:
1、CORS(主流的解决方案,推荐使用)
2、JSONP(有缺陷的解决方案:只支持GET请求)
2、使用CORS中间件解决跨域问题
cors是Express的一个第三方中间件,通过安装和配置cors中间件,可以很方便的解决跨域问题。
1、运行npm install cors 安装中间件
2、使用const cors = require(‘cors’)导入中间件
3、在路由之前调用app.use(cors())配置中间件
3、什么是CORS
4、CORS的注意事项
1、CORS主要在服务器端进行配置,客户端浏览器无需做任何额外的配置,即可请求开启了CORS的接口。
2、CORS在浏览器中有兼容性,只有支持XMLHttpRequest Level2的浏览器,才能正常访问开启了CORS的服务端接口。
5、CORS响应头部-Access-Control-Allow-Origin
响应头部中可以携带一个Access-Control-Allow-Origin字段,其语法如下:Access-Control-Allow-Origin:<origin> | *
其中,origin参数的值指定了允许访问该资源的外域URL。例如,下面的字段值将只允许来自https://www.baidu.com
的请求。res.setheader('Access-Control-Allow-Origin','https://itcast.cn')
,如果指定了Access-Control-Allow-Origin字段的值为通配符*,表示允许来自任何域的请求res.setheader('Access-Control-Allow-Origin','*')
6、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 对额外的请求头进行声明,否则这次请求会失败!
7、CORS 响应头部 - Access-Control-Allow-Methods
默认情况下,CORS 仅支持客户端发起 GET、POST、HEAD 请求。
如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods
来指明实际请求所允许使用的 HTTP 方法。
8. CORS请求的分类
客户端在请求 CORS 接口时,根据请求方式和请求头的不同,可以将 CORS 的请求分为两大类,分别是:① 简单请求② 预检请求
9. 简单请求
同时满足以下两大条件的请求,就属于简单请求:
① 请求方式: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)
10. 预检请求
只要符合以下任何一个条件的请求,都需要进行预检请求:
① 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
② 请求头中包含自定义头部字段
③ 向服务器发送了 application/json 格式的数据
在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一
次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。
区别:
简单请求的特点:客户端与服务器之间只会发生一次请求。
预检请求的特点:客户端与服务器之间会发生两次请求,OPTION 预检请求成功之后,才会发起真正的请求。