创建服务器
// 引入express
const express = require('express')
// 创建服务器
const app = express()
// 监听80端口
app.listen(80, ()=>{
console.log('服务器启动成功')
})
GET请求
// 引入express
const express = require('express')
// 创建服务器
const app = express()
app.get('/get', (req, res)=>{
// req-->>请求对象
// res-->>响应对象
})
// 监听80端口
app.listen(80, ()=>{
console.log('服务器启动成功')
})
POST请求
// 引入express
const express = require('express')
// 创建服务器
const app = express()
app.post('/post', (req, res)=>{
// req-->>请求对象
// res-->>响应对象
})
// 监听80端口
app.listen(80, ()=>{
console.log('服务器启动成功')
})
响应内容给客户端res.send()
// 引入express
const express = require('express')
// 创建服务器
const app = express()
app.get('/get', (req, res)=>{
// req-->>请求对象
// res-->>响应对象
res.send({name:'lzt', age:18})
})
// 监听80端口
app.listen(80, ()=>{
console.log('服务器启动成功')
})
获取get请求的参数
- 通过
req.query
对象获取
app.get('/get', (req, res)=>{
// req-->>请求对象
// res-->>响应对象
res.send(req.query)
})
获取post请求的参数
- 调用
express.urlencoded({ extended: false })
- 通过
req.body
获取
app.use(express.urlencoded({ extended: false }))
app.post('/post', (req, res)=>{
// req-->>请求对象
// res-->>响应对象
res.send(req.body)
})
获取url动态参数
- 通过
req.params
对象可以访问到url中 通过:
匹配到的动态参数
app.post('/user/:id', (req, res)=>{
// req-->>请求对象
// res-->>响应对象
res.send(req.params.id)
})
托管静态资源
- 通过
express.static()
,开放静态资源
app.use(express.static(path.join(__dirname, 'public')))
// 挂在路径前缀
app.use('/public', express.static(path.join(__dirname, 'public')))
访问静态资源的时候,
express.static()
函数会根据目录的添加顺序来查找所需的文件
express中的路由
- 在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。
- Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数,格式如下:
// 匹配get请求,且请求地址为/get
app.get('/get', (req, res)=>{
res.send(req.body)
})
// 匹配post请求,且请求地址为/post
app.post('/post', (req, res)=>{
res.send(req.body)
})
路由匹配过程
-
每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。
-
在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的 URL 同时匹配成功,则 Express 会将这次请求,转
交给对应的 function 函数进行处理。 -
按照定义的先后顺序进行匹配
-
请求类型和请求url同时匹配成功才会调用相应的处理函数
模块化路由
- 创建路由模块对应的 .js 文件
- 调用 express.Router() 函数创建路由对象
- 向路由对象上挂载具体的路由
- 使用 module.exports 向外共享路由对象
- 使用 app.use() 函数注册路由模块
const express = require('express')
const router = express.Router()
router.get('/get', (req, res)=>{
res.send('hello world')
})
router.post('/post', (req, res)=>{
res.send('hello world')
})
module.exports = router
注册路由模块
const userRouter = require('./router/user.js')
app.use('/api', userRouter)
中间件
- 中间件(Middleware ),特指业务流程的中间处理环节。
- Express 的中间件,本质上就是一个 function 处理函数,Express 中间件的格式如下:
app.get('/', (req, res, next)=>{
next()
})
注意:中间件函数的形参列表中,必须包含 next 参数。而路由处理函数中只包含 req 和 res
定义多个全局中间件
- 可以受用
app.use()
连续定义多个全局中间件,客户端请求达到服务器后,会按照中间件定义的先后顺序一次进行调用
app.use(function (req, res, next) {
console.log('调用了第一个全局中间件')
next()
})
app.use(function (req, res, next) {
console.log('调用了第二个全局中间件')
next()
})
app.get('/user', (req, res) => {
// 请求这个路由,会依次触发上述两个全局中间件
res.send('home page')
})
局部生效中间件
- 不使用
app.use()
定义的中间件,叫做局部生效中间件,
const mw1 = function (req, res, next) {
console.log('这是中间件函数')
next()
}
// mw1这个中间件只是在当前路由中生效,这种用法属于局部生效的中间件
app.get('/', mw1, function (req, res) {
res.send('Home page')
})
// mw1中间件不会影响下面这个路哟
app.get('/user', function (req, res) {
res.send('User page')
})
定义多个局部中间件
- 可以在路由中,通过如下两种等价的方式,使用多个局部中间件
const mw1 = function (req, res, next) {
console.log('这是中间件1函数')
next()
}
const mw2 = function (req, res, next) {
console.log('这是中间件2函数')
next()
}
// 以下两种写法完全等价,可根据自己的喜好,选择任意一种方式进行使用
app.get('/', mw1, mw2, function (req, res) {
res.send('Home page')
})
app.get('/', [mw1, mw2], function (req, res) {
res.send('Home page')
})
中间件五个注意事项
- 一定要在路由之前注册中间件
- 客户端发送过来的请求,可以连续调用多个中间件进行处理
- 执行完中间件的业务代码之后,不要忘记调用next()函数
- 为了防止代码逻辑混乱,调用next()函数后不要再写额外的代码
- 联系调用多个中间件时,多个中间件之间,共享req和res对象
中间件的分类
- 应用级别的中间件
- 路由级别的中间件
- 错误级别的中间件
- Express内置的中间件
- 第三方中间件
应用级别的中间件
- 通过
app.use()
或app.get()
或app.post()
绑定到app实例的中间件上,叫做应用级别的中间件
// 应用级别的中间件(全局中间件)
app.use((req, res, next)=>{
next()
})
// 应用级别的中间件(局部中间件)
app.get('/', mw1, (req, res)=>{
res.send('home page')
})
路由级别中间件
- 绑定到
express.Router()
实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别,只不过,应用级别中间件时绑定到app实例上,路由级别中间件绑定到router实例上
var express = require('express')
var router = express.Router()
// 路由级别中间件
router.use(function(req, res, next)=>{
console.log('Time', Date.now())
next()
})
错误级别的中间件
- 错误级别的中间件的作用:专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题
- 格式:错误级别中间件的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)
})
错误级别的中间件,必须注册在所有路由之后
express内置中间件
express.static
快速托管静态资源的内置中间件,例如:HTML文件、图片、CSS样式等express.json
解析JSON格式的请求体数据(有兼容性,@4.16.0版本中使用)express.urlencoded
解析URL-encoded格式的请求体数据(有兼容性,@4.16.0版本中使用)
// 配置解析 application/json格式数据的内置中间件
app.use(express.json())
// 配置解析application/x-www-form-urlencoded 格式数据的内置中间件
app.use(express.urlencoded({ extended: false }))
第三方中间件
- 非 Express 官方内置的,而是由第三方开发出来的中间件,叫做第三方中间件。在项目中,大家可以按需下载并配置
第三方中间件,从而提高项目的开发效率。 - 例如:在 express@4.16.0 之前的版本中,经常使用 body-parser 这个第三方中间件,来解析请求体数据。使用步
骤如下:
npm install body-parser
require
app.use
Express 内置的 express.urlencoded 中间件,就是基于 body-parser 这个第三方中间件进一步封装出来的。
模拟express.urlencoded
中间件,来解析post请求的数据
- 定义中间件
- 监听req的data事件
- 监听req的end事件
- 使用querystring模块解析请求体数据
- 将解析出来的数据对象挂在为
req.body
- 将自定义中间件封装为模块
在中间件中,需要监听 req 对象的 data 事件,来获取客户端发送到服务器的数据。
如果数据量比较大,无法一次性发送完毕,则客户端会把数据切割后,分批发送到服务器。所以 data 事件可能会触
发多次,每一次触发 data 事件时,获取到数据只是完整数据的一部分,需要手动对接收到的数据进行拼接。
当请求体数据接收完毕之后,会自动触发 req 的 end 事件。
因此,我们可以在 req 的 end 事件中,拿到并处理完整的请求体数据
// 解析表单数据的中间件
app.use((req, res, next) => {
// 定义中间件具体的业务逻辑
// 定义一个str字符串,专门用来存储客户端发送过来的请求体数据
let str = ''
// 监听req对象的data事件(客户端发送过来的新的请求体数据)
req.on('data', chunk => {
// 拼接请求体数据,隐士转换为字符串
str += chunk
})
// 监听req的end事件
req.on('end', () => {
// 在str中存放的是完整的请求体
// 把字符串格式的请求数据,解析成对象格式
const body = qs.parse(str)
req.body = body
next()
})
})
CORS跨域资源共享
- CORS(主流的解决方案,推荐使用)
- JSONP(有缺陷的解决方案:只支持 GET 请求)
npm install cors
const cors = require('cors')
app.use(cors())
CORS响应头部-Access-Control-Allow-Oringin
Access-Control-Allow-Origin: <origin> | *
- 其中,origin参数的值指定了允许访问该资源的外域URL
- 例如,下面的资源值只允许来自
http://www.valzt.cn
的请求
res.setHeader('Access-Control-Allow-Origin', 'http://www.valzt.cn')
- 如果指定了Access-Control-Allow-Origin字段的值为通配符*,标识允许来自任何域的请求
res.setHeader('Access-Control-Allow-Origin', '*')
默认情况下,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 对额外
的请求头进行声明,否则这次请求会失败!
// 允许客户端额外向服务器发送Content-Type请求头和x-Custom-Header请求头
//多个请求头使用英文逗号进行分割
res.setHeader('Access-Control-Allow-Origin', 'Content-Type', 'X-Custom-Header')
CORS响应头部 Access-Control-Allow-Methods
- 默认情况下, CORS仅支持客户端发起的GET、POST、HEAD请求
- 如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods
来指明实际请求所允许使用的 HTTP 方法。
// 只允许post、get、delete、head请求方法
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')
// 允许所有的http请求方法
res.setHeader('Access-Control-Allow-Methods', '*')
CORS请求的分类
- 客户端在请求CORS接口时,根据请求方式和请求头的不同,可以将CORS的请求分为两大类
- 简单请求
- 预检请求
简单请求
同时满足以下两大条件的请求,就属于简单请求:
- 请求方式: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)
预检请求
只要符合以下任何一个条件的请求,都需要进行预检请求:
- 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
- 请求头中包含自定义头部字段
- 向服务器发送了 application/json 格式的数据
在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一
次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。