node+i5ting_toc+npm+Express

achixinzai

已于 2023-02-19 13:27:37 修改

阅读量293

点赞数

文章标签： npm express 前端

于 2023-02-18 23:07:29 首次发布

本文链接：https://blog.csdn.net/achixinzai/article/details/129101188

版权

i5ting_toc

1、i5ting_toc

i5ting_toc是一个可以把md文档转为html页面的小工具

# 将i5ting_toc 安装为全局包
npm install -g i5ting_toc
# 调用 i5ting_toc,轻松实现md转html的功能
i5ting_toc -f 要转换的md文件路径 -o

2、npm

开发属于自己的包
初始化包的基本结构

新建zt-tools文件夹,作为包的根目录
在zt-tools文件夹中，新建如下三个文件

package.js (包管理配置文件)
index.js (包的入口文件)
README.md (包的说明文档)

终端登录（记得切换镜像源为npm官网地址） 
npm login
进入包根目录发布
npm publish
删除已发布的包
npm unpublish 包名 --force 即可从npm删除已发布的包

注意：

npm unpublish命令只能删除72小时以内发布的包
npm unpublish 删除的包，在24小时内不允许重复发布
发布包的时候要慎重，尽量不要往npm上发布没有意义的包

模块的加载机制

优先从缓存中加载
模块在第一次加载后被缓存。这也意味着多次调用require()不会导致模块的代码被执行多次
注意：不论是内置模块、用户自定义模块、还是第三方模块，他们都会优先从缓存中加载，从而提高模块的加载效率

内置模块的加载机制

内置模块加载的优先级最高

自定义模块的加载机制

使用require()加载自定义模块时，必须指定以./或../开头的路径标识符，否则会被当做内置模块或第三方模块进行加载

同时，在使用require()导入自定义模块时，如果省略了文件的扩展名，则Node.js会按顺序分别尝试加载以下的文件：

按照确切的文件名进行加载
补全.js扩展名进行加载
补全.json扩展名进行加载
加载失败，终端报错

第三方模块的加载机制

如果传递给require()的模块标识符不是一个内置模块，也没有以./或../开头，在Node.js会从当前模块的父目录开始，尝试从/node_modules文件夹中加载第三方模块。
如果没有找到对应的第三方模块，则移动到再上一层父目录中，进行加载，直到文件系统的根目录

3、express

初识Express

Express是基于Node.js平台，快速、开放、极简的Web开发框架

app.get('url',(req,res)=>{
//向客户端发送JSON对象
res.send({name:'zs',age:20,gender:'男'})
})
app.post('url',(req,res)=>{
//向客户端发送文本内容
	res.send('请求成功')
})

express.static()
//通过它，我们可以方便地创建一个静态资源服务器
app.use(express.static('public'))

//挂载路径前缀
app.use('/abc',express.static('files'))
app.use(express.static('public'))

nodemon

npm install -g nodemon

Express路由

app.use('/api',userouter)

Express中间件

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

中间件函数的形参列表，必须包含next参数，而路由处理函数中只包含req和res

next函数的作用

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

定义中间件函数

//常量mw所指向的，就是一个中间件函数
const mw = function(req,res,next){
	console.log('这是一个中间件函数')
	next()
}

全局生效的中间件

//将mw注册为全局生效的中间件
app.use(mw)

局部生效的中间件
不使用app.use()定义的中间件

const mw = function(req,res,next){
	console.log('这是一个中间件函数')
	next()
}
app.get('/',mw,function(req,res){
	res.send('Home Page')
})
app.get('/user',function(req,res){
	res.send('User Page')
})

定义多个局部中间件

app.get('/',mw,mw2,function(req,res){
	res.send('Home Page')
})
app.get('/',[mw,mw2],function(req,res){
	res.send('Home Page')
})

中间件的分类

应用级别的中间件
路由级别的中间件
错误级别的中间件
Express内置的中间件
第三方的中间件

应用级别的中间件
通过app.user()或app.get()或app.post(),绑定到app实例上的中间件，叫做应用级别的中间件
路由级别的中间件
绑定到express.Router()实例上的中间件，叫做路由级别的中间件，应用级别中间件绑定到app实例上，路由级别中间件绑定到router实例上

错误级别的中间件
错误级别中间件的作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题

格式：错误级别的中间件的function处理函数中，必须有4个形参，形参顺序从前到后，分别是（err,req,res,next）

app.use(function(err,req,res,next){
	console.log('发生了错误：'+err.message)
	res.send('Error!' + err.message)
})

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

Express内置的中间件
自Express4.16.0版本内置了3个常用的中间件

express.static 快速托管静态资源的内置中间件
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.json()这个中间件，解析表单中的JSON格式的数据
app.user(express.json())
app.post('/user',(req,res)=>{
//在服务器，可以使用req.body这个属性，来接收客户端发送过来的请求体数据（JSON格式的表单数据和url-encoded格式的数据）
//默认情况下，如果不配置解析表单数据的中间件，则req.body默认等于undefined
console.log(res.body)
res.send('ok')
})

第三方的中间件
非Express官方内置的
例如在express@4.16.0之前的版本中，经常使用body-parser这个第三方中间件，来解析请求体数据。使用步骤如下

运行npm install body-parser 安装中间件
使用require导入中间件
调用app.use()注册并使用中间件

//1.导入解析表单数据的中间件body-parser
const parser = require('body-parser')
//2.使用app.use()注册中间件
app.use(parser.urlencoded({extended:false}))

自定义中间件
自己手动模拟一个类似于express.urlencoded这样的中间件，来解析POST提交到服务器的表单数据
实现步骤：

定义中间件
监听req的data事件
监听req的end事件
使用querystring模块解析请求体数据
将解析出来的数据对象挂载为req.body
定义中间件

监听 req 的data事件
在中间件中，需要监听req对象的data事件，来获取客户端发送到服务器的数据。如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以data事件可能会触发多次，每一次触发data事件时，获取到数据只是完整数据的一部分，需要手动对接收道德数据进行拼接

app.use((req,res,next) =>{
	//定义变量，用来存储客户端发送过来的请求体数据
	let str = '';
	//监听req对象的data事件（客户端发送过来的新的请求体数据）
	req.on('data',(chunk)=>{
		//拼接请求体数据，隐式转换为字符串
		str += chunk
	})
	//监听req的end事件
	//当请求体数据接收完毕之后，会自动触发req的end事件。
	//因此，我们可以在req的end事件中，拿到并处理完整的请求体数据。实例代码如下：
	//监听 req对象的end 事件（请求体发送完毕后自动触发）
	req.on('end',()=>{
		// 打印完成的请求体数据
		console.log(str)
		//TODO: 把字符串格式的请求体数据，解析		成对象格式
	})
})
app.post('/user',(req,res)=>{
	res.send('ok')
})

使用Express写接口

接口的跨域问题
解决接口跨域问题的方案主要有两种：

CORS(主流的解决方案，推荐使用)
JSONP(有缺陷的解决方案：只支持GET请求)

使用cors中间件解决跨域问题

运行npm install cors安装中间件
使用const cors = require('cors')导入中间件
在路由之前调用app.use(cors())配置中间件
什么是CORS
CORS(Cross-Orgin Resource Sharing,跨域资源共享)由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源
浏览器的同源安全策略默认会阻止网页“跨域”获取资源，但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制。

CORS的注意事项

CORS主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启CORS的接口。
CORS在浏览器中有兼容性。只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启CORS的服务器接口（例如：IE10+、CHrome4+、FireFox3.5+）

CORS响应头部 - Access-Control-Allow-Origin
响应头部可以携带一个Access-Control-Allow-Origin

Access-Control-Allow-Origin:<origin>|*

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

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

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-Header对额外的请求头进行声明，否则这次请求会失败！

//允许客户端额外向服务器发送Content-Type 请求头和X-Custom-Header请求头
//注意：多个请求头之间使用英文的逗号进行分割
res.setHeader('Access-Control-Allow-Headers','Content-Type,X-Custom-Header')

CORS响应头部 - Access-Control-Allow-Methods

默认情况下，CORS仅支持客户端发起GET、POST、HEAD请求。
如果客户端希望通过PUT、DELETE等方式请求服务器的资源，则需要在服务器端，通过Access-Control-Allow-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(值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)

预检请求

请求方式为GET、’POST、HEAD之外的请求Method类型
请求头中包含自定义头部字段
向服务器发送了application/json格式的数据

在浏览器与服务器正式通信之前,浏览器会先发送OPTION请求进行预检,以获知服务器是否允许该实际请求,所以这一次的OPTION请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。
简单请求和预检请求的区别
简单请求的特点: 客户端与服务器之间只会发生一次请求。
预检请求的特点: 客户端与服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求。

JSONP的概念和特点
概念: 浏览器端通过