Express

1.express.static()快速托管静态资源
通过express.static(),可以非常方便地创建一个静态资源服务器,

// 通过下面代码就可以将public目录下地图片、CSS文件、JavaScript文件对外开放访问了
app.use(express.static('public'))

如果要托管多个静态资源目录,多次调用express.static()函数。访问静态资源文件时,express.static()函数会根据目录的添加顺序查找所需的文件
挂载路径前缀:
在托管的静态资源访问路径之前,挂载路径前缀

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

注意:
Express在指定的静态目录中查找文件,并对外提供资源地访问路径。因此,存放静态文件的目录名不会存放在URL中。
2.使用express路由精简项目结构
路由:按键与服务之间的映射关系,就叫做是路由。
express中的路由:在express中,路由指的是客户端的请求服务器处理函数之间的映射关系。
Express中的路由分为3部分组成,分别是请求的类型、请求的URL地址、处理函数,

app.MATHOD(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函数进行处理。

模块化路由:
为了方便对路由进行模块化的管理,Express不建议将路由直接挂载到app上,推荐将路由抽离为单独的模块。
实现步骤:
(1)创建路由模块对应的.js文件;
(2)调用**express.Router()**函数创建路由对象;
(3)向路由对象上挂载具体的路由;
(4)使用module.exports向外共享路由对象;
(5)使用app.use()函数注册路由模块。

router.js
// 1.导入express
var express = require( 'express")
// 2.创建路由模块对应的.js文件
var router =express.Router(o
// 3.挂载获取用户列表的路由
router.get('/user/list',function (req,res) {
	res.send('Get user list.')
})
// 4.挂载添加用户的路由
router.post('/user/add',function (req,res) {
	res.send('Add new user.')
})
 // 5.向外导出路由对象
module.exports = router

路由的使用:
app.use()作用是注册全局中间件

user.js
const express = require('express')
const  app = express()
// 1.导入路由模块
const userRouter = require('./router.js')
// 2.使用app.use() 注册路由模块
app.use(userRouter)  // 添加前缀app.use('/api',userRouter)

app.listen(80,() =>{
	console.log('http://127.0.0.1')
})

3.常见的express 中间件
中间件(Middleware):特指业务流程的中间处理环节。本质上就是一个function处理函数

中间件的分类
为了方便大家理解和记忆中间件的使用,Express官方把常见的中间件用法,分成了5大类,分别是:
(1)应用级别的中间件;
(2)路由级别的中间件;
(3)错误级别的中间件;
(4)Express内置的中间件;
(5)第三方的中间件。

注意:必须写在所有中间件的最后面

4.使用express 创建API接口
1.创建基本服务器;
2.创建API路由;

// 创建基本服务器
const express = require('express')
const app = express()

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended:false }))
// 导入并注册路由模块
const apiRouter = require('./apiRouter.js')
app.use('/api'.apiRouter)

// 启动服务器
app.listen(80,() =>{
	console.log('express server running at http://127.0.0.1')
})
// apiRouter.js 路由模块
const express = require('express')
const apiRouter = express.Router()

module.exports = apiRouter

编写GET接口

apiRouter.get('/get',(req,res) => {
// 1.获取到客户端通过查询字符串,发送到服务器的数据
	const query = req.query
// 2.调用res.end()方法,把数据响应给客户端
	res.end( {
		status:0,	 // 状态,0表示成功,1表示失败
		msg:'GET请求成功!', // 状态描述
		data:query  //需要响应给客户端的具体数据
	})
})  

编写POST接口

apiRouter.post('/get',(req,res) => {
// 1.获取到客户端通过请求体,发送到服务器的URL-encoded数据
	const body = req.body
// 2.调用res.end()方法,把数据响应给客户端
	res.end( {
		status:0,	 // 状态,0表示成功,1表示失败
		msg:'POST请求成功!', // 状态描述
		data:body  //需要响应给客户端的具体数据
	})
})  

5.在express中启用cors跨域资源共享
解决跨域方案主要有两种:
(1)CORS(主流的解决方案,推荐使用);
(2)JSONP(有缺陷的解决方法:只支持GET请求)
**CORS (Cross-Origin Resource Sharing,跨域资源共享)**由一系列 HTTP响应头组成,这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头,就可以解除浏览器端的跨域访问限制。

cors是Express的一个第三方中间件,通过安装和配置cors中间件,可以很方便解决跨域问题。
步骤如下:
(1)运行npm install cors 安装中间件;
(2)使用const cors = require(‘cors’)导入中间件;
(3)在路由之前调用app.use(cors())配置中间件。

CORS请求的分类
客户端在请求CORS接口时,根据请求方式和请求头的不同,可以将CORS的请求分为两大类:简单请求和预检请求
简单请求:
同时满足以下两大条件的请求,就属于简单请求:
(1)请求方式:GET、POST、HEAD三者之一;
(2)HTTP头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR.
Downlink、Save-Data、Viewport-Width、Width 、Content-Type (只有三个值application/x-www-form-
urlencoded、multipart/form-data、text/plain)。

预检请求:在浏览器与服务器正式通信之前,浏览器会先发送OPTION请求进行预检,以获知服务器是否允许该实际请求,所以这一次的OPTION请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据。

只要符合以下任何一个条件的请求,都需要进行预检请求:
(1)请求方式为GET、POST、HEAD之外的请求Method类型;
(2)请求头中包含自定义头部字段;
(3)向服务器发送了application/json格式的数据。

简单请求和预检请求的区别:
简单请求的特点:客户端与服务器之间只会发生一次请求。
预检请求的特点:客户端与服务器之间会发生两次请求,OPTION预检请求成功之后,才会发起真正的请求

CORS的注意事项
(1)CORS主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了CORS的接口。
(2)CORS在浏览器中有兼容性。只有支持XMLHttpRequest Level2的浏览器,才能正常访问开启了CORS的服
务端接口(例如:IE10+、Chrome4+、FireFox3.5+).
CORS跨域资源共享必须配备响应头,一些响应头介绍:

Access-Control-Allow-Origin:<origin> | *  //后面可以是值也可以是*,其中origin参数的值指定了允许访问该资源的外域URL,如果是通配符*,则表示允许来自任何域的请求。
// 例如:只允许来自http://itcast.cn的请求
res.setHeader('Access-Control-Allow-Origin','http://itcast.cn')

默认情况下,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 对额外的请求头进行声明,否则这次请求会失败!

res.setHeader('Access-Control-Allow-Headers','请求头名','请求头名')

默认情况下,CORS仅支持客户端发起GET、POST、HEAD请求。
如果客户端希望通过PUT、DELETE等方式请求服务器的资源,则需要在服务器端,通过Access-Control-Alow-Methods来指明实际请求所允许使用的HITP方法。

res.setHeader('Access-Control-Alow-Methods','PUT、DELETE' | '*')

nodemon用处
nodemon能狗监听项目文件的变动,当代码被修改后,nodemon会自动帮开发者重启项目,极大方便了开发和调试。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值