[JavaScript知识库] Express.js 简记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Express.js 简记 -> 正文阅读

[JavaScript知识库]Express.js 简记

Express笔记

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

一、安装

npm i express@4.17.1

二、基本使用

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)
})