node学习(3)

139 阅读4分钟

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','*')

捕获.PNG

捕获.PNG

JSONP(有缺陷,只支持get)

捕获.PNG

捕获.PNG

捕获.PNG