express:web开发框架,基于http内置模块封装出来的
安装:npm i express@4.17.1
使用:
// 1 导入express
const express = require('express')
// 2 创建web服务器
const app = express()
// 4 监听请求并相应 res.send()把处理好的内容发给客户端
// 监听get请求
app.get('/user', (req, res) => {
res.send({
name: '小明',
age: 20
})
})
// 监听post请求
app.post('/postUser', (req, res) => {
res.send('发送成功')
})
// 3 启动服务器
app.listen(8081, () => {
console.log('http://127.0.0.1:8081')
})
req.query可以获取到客户端发来的查询参数/?age=20&name='小明',默认情况返回{}
app.get('/', (req, res) => {
console.log(req.query)
res.send(req.query)
})
获取url里的动态参数 :req.params对象,可以访问url中通过: 匹配的动态参数,默认情况返回{}
//示例: http://127.0.0.1:8081/user/1 返回{"id": "1"}
app.get('/user/:id', (req, res) => {
console.log(req.params)
res.send(req.params)
})
托管静态资源:
express.static()创建静态资源服务器,使外界可以访问目录下的静态资源
托管多个静态资源目录有重名的以最先引入的为准
```js
// 访问时省略路径前缀
app.use(express.static('./public'))
//挂载路径前缀
app.use('./public',express.static('./public'))
```
nodemon:监听项目文件变动,自动重启项目 -g全局安装
安装:npm install -g nodemon 使用:nodemon index.js
express路由
三个部分:请求类型(get/post),请求url地址,处理函数
最简单挂载路由
```js
app.METHOD(PATH,HANDLER)
// 最简单挂载路由
app.post('/postUser', (req, res) => {
res.send('发送成功')
})
```
模块化路由
创建路由模块
// 1 导入express对象
const express = require('express')
// 2 创建路由对象
const router = express.Router()
// 3 挂载具体路由get/post
router.get('/user/list', (req, res) => {
res.send('userList')
})
router.post('/user/add', (req, res) => {
res.send('addUser')
})
// 5 向外导出路由对象
module.exports = router
注册路由模块
const express = require('express')
const app = express()
// 1 导入路由模块
const router = require('./router.js')
// 2 注册路由模块
app.use(router)
// 挂载统一的访问前缀api
// app.use('/api', router)
app.listen(8081, () => {
console.log('http://127.0.0.1:8081')
})
express中间件:对请求预处理
// 定义一个最简单的中间件函数
const mw = function (req, res, next) {
console.log('最简单的中间件函数');
//把流转关系转交给下一个路由
next()
}
// 注册为全局生效的中间件函数,app.use(中间件函数)
app.use(mw)
// 简化写法
app.use((req, res, next) => {
next()
})
实际应用
// 多个中间件共享一份req和res,可以在上游统一添加自定义属性方法为下游中间件或路由使用
app.use((req, res, next) => {
// 获取请求到达服务器时间
const time = Date.now()
req.startTime = time
next()
})
app.get('/', (req, res) => {
res.send('首页' + req.startTime)
})
app.get('/user', (req, res) => {
res.send('用户' + req.startTime)
})
定义多个全局中间件,客户端请求到达服务器后会按定义的先后顺序调用
局部生效中间件:不用app.use()注册
const mw = function (req, res, next) {
console.log('最简单的中间件函数');
//把流转关系转交给下一个路由
next()
}
app.post('/postUser',mw, (req, res) => {
res.send('发送成功')
})
// 调用多个局部中间件的方法,两种写法都可以
app.post('/postUser',mw1,mw2, (req, res) => {
res.send('发送成功')
})
app.post('/postUser',[mw1,mw2], (req, res) => {
res.send('发送成功')
})
使用注意事项
1.要在路由前注册中间件
2.可以连续调用多个中间件
3.不要忘记调用next()
4.next()后不要写额外代码
5.连续调用多个中间件时共享res和req
中间件分类
1 应用级别
绑定到app实例上的
2 路由级别
绑定到expres.Router()上的 router.use()
3 错误级别(特殊:注册到所有路由之后)
捕获项目中发生的异常错误(err,req,res,next)
4 express内置
express.static 托管静态资源
express.json 解析JSON格式请求数据,用req.body接收表单数据(app.use(express.json()))
express.urlencoded 解析URL--encoded格式请求体数据(app.use(express.urlencoded({extended:false})))
5 第三方
1 安装:npm i body-parser
2 引入:const parser= require('body-parser')
3 注册:app.use(parser.urlencoded({extended:false}))
编写接口
apiRouter.js页面
const express = require('express')
const router = express.Router()
// 挂载对应路由
// get接口
router.get('/get', (req, res) => {
const query = req.query
res.send({
status: 0,//0处理成功 1失败
mag: 'get请求成功',//状态描述
data: query//需要响应给客户端的数据
})
})
// post接口
router.post('/post', (req, res) => {
const body = req.body
res.send({
status: 0,//0处理成功 1失败
mag: 'post请求成功',//状态描述
data: body//需要响应给客户端的数据
})
})
module.exports = router
服务器页面
const express = require('express')
const app = express()
//解析表单数据中间件
app.use(express.urlencoded({ extended: false }))
// 导入路由模块
const router = require('./07_apiRouter')
// 注册到app上
app.use('/api', router)
app.listen(8081, () => {
console.log('http://127.0.0.1:8081')
})
跨域
CORS中间件(主流解决方案,推荐)
使用
1 安装中间件:npm i cors
2 导入: const cors = require('cors')
3 配置:在路由前调用app.use(cors())
CORS是由一系列HTTP响应头组成的,配置了CORS相关HTTP响应头就可以解除浏览器的跨域访问限制
CORS注意事项
1 主要在服务器端进行配置
2 有兼容性问题(Ie10+,crome4+,fireFox3.5+)
CORS响应头
// Acess-Contorol-Allow-Origin:<origin>|*
// origin指定允许访问该资源的外域url *代表任何网站
res.setHeader('Acess-Contorol-Allow-Origin','http://myLocal.cn')
res.setHeader('Acess-Contorol-Allow-Origin','*')