Express.js 简记

Express笔记

Express是基于Node.js 快速、开放、极简的web开发框架

一、安装

npm i [email protected]

二、基本使用

1.创建基本的Web服务器

// 1.导入express
const express = require('express')
// 2.创建web服务器
const app = express()
//3.调用app.listen(端口号，成功后的回调函数)，启动服务器
app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})

2.监听get请求

app.get(url,callback(req,res))

• url：请求路径
• callback：请求处理函数

// 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:"男"})
})

// 3.调用app.listen(端口号，成功后的回调函数)，启动服务器
app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})

3.监听post请求

app.post(url,callback(req,res))

• url：请求路径
• callback：请求处理函数

// 1.导入express
const express = require('express')
// 2.创建web服务器
const app = express()
// 4.监听客户端的GET和POST请求 并向客户端响应具体的内容
app.post('/user',(req,res)=>{
    //调用express提供的res.send()方法，向客户端响应一个文本字符串
    res.send('请求成功')
})

// 3.调用app.listen(端口号，成功后的回调函数)，启动服务器
app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})

4.把内容响应给客户端

res.send() //可以响应一个JSON对象，也可以响应一个字符串

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('请求成功')
})

5.获取URL中携带的查询参数

通过req.query对象，可以访问客户端通过查询字符串的形式，发送到服务器的参数，即get请求的参数

• req.query默认是一个空对象
• 可通过req.query对象访问到，例如：?name=zs&age=20
  • req.query.name
  • req.query.age

http://localhost/user?name=zs&age=20
app.get('/user',(req,res)=>{
    console.log(req.query)
    res.send(req.query.name)
})

6.获取URL中的动态参数

通过req.params对象，可以获得动态的参数

req.params默认是一个空对象，是动态匹配到的

http://localhost/user/1
app.get('/user/:id',(req,res)=>{
    console.log(req.params)	//id的值 1
    res.send(req.query.params)
})

{id:'1'}

动态参数的:是固定的 冒号后面的名称是参数的名称自定义的

可以有多个动态参数：

app.get('/user/:id/:username',()=>{})

三、托管静态资源

1.express.static()

可以通过express.static()将目录下的静态资源对外开放访问

app.use(express.static('./public'))

这样就可以访问public目录下的所有文件了

存放静态文件的目录名不会出现在URL中 即public不会出现在url中

例：

​ http://localhost:3000/images/bg.jpg

2.托管多个静态资源目录

当在第一个文件夹中查找到文件时，直接返回，没找到才会到后面一个文件夹找

//两个目录都包含index.html,先查找clock目录，找到返回
app.use(express.static('./clock'))
app.use(express.static('./public'))

3.挂载路径前缀

希望在静态资源访问路径前加一个前缀，如：http://localhost/public/index.html

app.use('/public',express.static('./public'))

四、路由模块

1.模块化路由

test.js

const express = require('express')
const app = express()

//1.导入路由模块
const router = require('./router.js')
//2.注册路由模块
app.use(router)

app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})

router.js

const express = require('express')

const router = express.Router()

//挂载具体的路由
router.get('/user/list',(req,res)=>{
    res.send('Get user list')
})

router.post('/user/add',(req,res)=>{
    res.send('Get user list')
})

//向外导出路由对象
modules.exports = router

app.use()函数的作用，就是用来注册全局中间件

2.为路由模块添加前缀

app.use('/api',router)

五、中间件

1.中间件的格式

回调函数就是中间件函数

app.get('/',function(req,res,next){
    next();
})

如果参数只有req和res那么这个函数是一个路由，中间件必须有next参数

2.next函数的作用

next函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由

3.定义中间件函数

const express = require('express')
const app =express()
//定义一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
}

app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})

4.全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件

通过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.')
})


app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})

5.定义全局中间件的简化方式

使用箭头匿名函数简化

const express = require('express')
const app =express()

app.use((req,res,next) => {
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
})

//接受到请求前会先调用中间件函数
app.get('/',(req,res)=>{
    res.send('Home page.')
})


app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})

6.定义多个全局中间件

可以使用app.use()连续定义多个全局中间件，请求到达服务器后会按顺序调用中间件

const express = require('express')
const app =express()

//定义第一个全局中间件
app.use((req,res,next) => {
    console.log('调用了第1个中间件')
    //流转关系转交给下一个中间件或路由
    next();
})

//定义第二个全局中间件
app.use((req,res,next) => {
    console.log('调用了第2个中间件')
    //流转关系转交给下一个中间件或路由
    next();
})

//接受到请求前会先调用第一个中间件函数 再调用第二个
app.get('/',(req,res)=>{
    res.send('Home page.')	//调用了第1个中间件 调用了第2个中间件
})


app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})

7.局部生效的中间件

不适用app.use的中间件是局部生效的中间件

const express = require('express')
const app =express()
//定义一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
}


//接受到请求前会先调用中间件函数
app.get('/', mw ,(req,res)=>{
    res.send('Home page.')
})

//这个路由不会被上面的路由影响
app.get('/user',(req,res)=>{
    res.send('Home page.')
})

app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})

8.定义多个局部中间件

可以在路由中通过下面两种等价的方式定义多个局部中间件

const express = require('express')
const app =express()
//定义第一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是第一个中间件')
    //流转关系转交给下一个中间件或路由
    next();
}

//定义第二个最简单的中间件函数
const mw2 = function(req,res,next){
    console.log('这是第二个中间件')
    //流转关系转交给下一个中间件或路由
    next();
}


//通过普通参数方式
app.get('/', mw , mw2 ,(req,res)=>{
    res.send('Home page.')
})

//通过数组参数方式
app.get('/', [mw,mw2] ,(req,res)=>{
    res.send('Home page.')
})

app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})

9.注意事项

① 一定要在路由之前注册中间件

② 可以连续调用多个中间件进行处理

③ 执行完中间件的业务代码之后，不要忘记调用next() 函数

④ 建议next()函数作为中间件的最后一行

⑤ 连续调用多个中间件时，多个中间件之间共享req和res对象

10.中间件的分类

• 应用级别中间件

  绑定到app.use()、app.get()、app.post()上的中间件

• 路由级别中间件

  绑定到express.Router()实例上的中间件

  router.use()

• 错误级别的中间件

  专门用来捕获项目中发生的异常错误

  中间件函数必须有4个形参 function(err,req,res,next)

  app.get('/',function(req,res){
      throw new Error('服务器内部发生了错误')
      res.send('Home Page')
  })
  
  app.use((err,res,req,next)=>{
      console.log('发生错误了'+err.message)
      res.send('Error'+err.message)
  })
  

  错误中间件必须注册在所有路由之后

• Express内置的中间件

  • express.static快速托管静态文件的内置中间件
  • express.json解析JSON格式的请求体数据
  • express.urlencoded 解析URL-encoded格式的请求体数据

  app.use(express.json())	//挂载后自动解析json数据 req.body
  
  app.use(express.urlencoded({extended:false}))
  

11.自定义解析表单数据的中间件

当有数据传入会触发req的data事件

当请求提数据接受完毕之后会触发req的end事件

//这是一个解析表单数据的中间件
app.use((req,res,next)=>{
   	//用于存储传来的数据
    let str = ''
    //监听data事件
    req.on('data',(chunk)=>{
        str+=chunk
    })
    //监听 req的 end事件
    req.on('end',()=>{
        console.log(str)
    })
})

使用querystring模块，将查询字符串解析成json对象

并将其挂载到body中

const qs = require('querystring')

//监听 req的 end事件
 req.on('end',()=>{
  	 console.log(str)
     let body = qs.parse(str)
     req.body = body
     next()
 })

六、基于express写接口

app.js

//导入express
const express = require('express')

const app = express()

//配置解析表单的中间件
app.use(express.urlencoded({ extended:false}))

const apiRouter = require('./apiRouter')

app.use('/api',apiRouter)

app.listen(80,()=>{
    console.log('this is local web server')
})

apiRouter.js路由模块

const express = require('express')

const router = express.Router()

//在这里挂载对应的路由
router.get('/get',(req,res)=>{
    //通过req.query获取客户端通过查询字符串，发送到服务器的数据
    const query = req.query
    //调用 res.send()方法 向客户端响应处理的数据
    res.send({
		status:0//0表示成功，1表示失败
        msg:'GET 请求成功',//状态描述
        data:query	//需要响应给客户端的数据
	})
})

//POST接口
router.post('/post',(req,res)=>{
    //通过req.query获取客户端通过查询字符串，发送到服务器的数据
    const body = req.body
    //调用 res.send()方法 向客户端响应处理的数据
    res.send({
		status:0//0表示成功，1表示失败
        msg:'POST 请求成功',//状态描述
        data:body	//需要响应给客户端的数据
	})
})

//暴露router
module.exports = router

七，CORS解决接口的跨域问题

跨域解决思想：在服务端，配置cors相关的响应头，从而解决浏览器端的跨域访问限制

1.一键解决跨域

const cors = require('cors')

app.use(cors())

2.CORS响应头-Access-Control-Allow-Origin

Access-Control-Allow-Origin: | *

其中 origin参数的值指定了允许访问该资源的外域URL

*表示所有都可以访问

例如，以下响应头只允许来自http://muzile.cn的请求

res.setHeader('Access-Control-Allow-Origin','http://muzile.cn')

3.CORS响应头-Access-Control-Allow-Headers

默认情况下CORS仅支持客户端向服务器发送9个请求头

如果客户端向服务器发送额外的请求头信息，则需要在服务器端，通过Access-Control-Allow-Headers对额外的请求头进行声明，否则这次请求会失败

res.setHeader('Access-Control-Allow-Headers','Content-Type,X-Custom-Header')

4.CORS响应头-Access-Control-Allow-Methods

默认情况下CORS仅支持客户端向服务器发起GET POST HEAD请求

更多的请求方法：

res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')
//允许所有
res.setHeader('Access-Control-Allow-Methods','*')

八、简单请求和预检请求

1.简单请求

请求头只包含9个之内的，请求方式为GET POST HEAD的请求

2.预检请求

① 请求方式在GET POST HEAD之外的请求

② 请求头中包含自定义头部字段

③ 向服务器发送application/json格式的数据

浏览器会先发送OPTION请求进行预检，以获知服务器是否允许该实际请求

预检请求后，才会发送真正的请求，并携带真实的数据

3.区别

简单请求特点: 客户端与服务端只会发生一次请求

预检请求特点: 客户端与服务端会先发生一次预检请求，之后才会发起真正的请求

九、JSONP接口解决跨域

JSONP不属于ajax请求，是通过创建script标签，使用src属性对跨域资源进行访问，只对GET请求有效

1.创建JSONP接口的注意事项

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口，否则JSONP接口会被处理成开启了CORS的接口

2.实现JSONP的接口

app.get('/api/json',(req,res)=>{
    //TODO:定义JSONP接口具体的实现过程
    //1.得到src中函数的名称
    const funcName = req.query.callback
    //2.定义要发送给客户端的数据对象
    const data = {name:'zs',age:22}
    //3.拼接处一个函数的调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    //4.把拼接的字符串响应给客户端
    res.send(scriptStr)
})