浅尝辄止Node-js(五),Express模块详解

Express模块

初识Express

Express简介

• 概念：Express的作用和Node.js中的http模块类似，是专门用来创建Web服务器的框架。

• Express的中文官网： http://www.expressjs.com.cn/

• Express能做什么：

  • Web网站服务器：专门对外提供Web网页资源的服务器。
  • API接口服务器：专门对外提供API接口的服务器。
  • 使用Express，我们可以方便快速的创建Web网站的服务器和API接口的服务器。

Express的基本使用

• 安装：npm install express
• 监听GET请求

通过app.get()方法，可以监听客户端的GET请求，具体的格式如下：

app.get('请求URL地址',function(req,res){
    //处理函数
})

• 监听POST请求

 app.post('请求URL地址',function(req,res){
     //处理函数
 })

• 把内容响应给客户端

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

• 获取URL中携带的参数

app.get('/',(req,res)=>{
    //req.query默认是一个空对象
    //客户端使用?name=小王&age=18 这种查询字符串形式，发送到服务器的参数
    //可以通过req.query 对象访问到，例如：
    //req.query.name req.query.age
    console.log(req.query)
})

• 获取URL中的动态参数

//URL地址中，可以通过:参数名的形式，匹配动态参数值
app.get('/user/:id',(req,res)=>{
    //req.params 默认是一个空对象
    //里面存放着 : 动态匹配到的参数值
    console.log(req.params)
})

托管静态资源

• express.static()

  express 提供了一个非常好用的函数，叫做 express.static()，通过它，我们可以非常方便地创建一个静态资源服务器，例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

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

  现在你就可以访问public目录中的所有文件了

  http://localhost:3000/images/bg.jpg
  http://localhost:3000/css/style.css
  http://localhost:3000/js/login.js
  

  注意：Express 在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在 URL 中。

• 托管多个静态资源目录

如果要托管多个静态资源目录，可以多次调用express.static() 函数

app.use(express.static('public'))
app.use(express.static('files'))

访问静态资源文件时，express.static()函数会根据目录的添加顺序查询所需的文件。

• 挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：

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

nodemon的使用

• 为何使用nodemon

在编写调试 Node.js 项目的时候，如果修改了项目的代码，则需要频繁的手动 close 掉，然后再重新启动，非常繁琐。
现在，我们可以使用 nodemon（https://www.npmjs.com/package/nodemon） 这个工具，它能够监听项目文件的变动，当代码被修改后，nodemon 会自动帮我们重启项目，极大方便了开发和调试。

• 安装nodemon

npm install -g nodemon

• 使用nodemon

nodemon app.js //之前是node app.js

Express路由

路由的概念

• 什么是路由

路由就是映射关系

• Express中的路由

  • 在Express中，路由指的是客户端的请求与服务器处理函数之间的映射关系。
  • Express中的路由分为3部分，分别是请求的类型，请求的URL地址，处理函数，格式如下：

  app.method(path,handler())
  

• Express 中的路由的例子

上面我们说到的get,post请求都是路由

• 路由的匹配过程

路由的使用

• 最简单的用法

在Express中路由最简单的方式就是挂载到app上：

const express=require('express')

const app=express()

//挂载路由
app.get('/',(req,res)=>{
    res.send('Hello Express！')
})

• 模块化路由

为了方便对路由进行模块化的管理，Express 不建议将路由直接挂载到 app 上，而是推荐将路由抽离为单独的模块。
将路由抽离为单独模块的步骤如下：

1. 创建路由模块对应的 .js 文件
2. 调用 express.Router() 函数创建路由对象
3. 向路由对象上挂载具体的路由
4. 使用 module.exports 向外共享路由对象
5. 使用 app.use() 函数注册路由模块

代码如下：

创建路由模块：

var express=require('express')  //导入express
var router=express.Router()  //创建路由对象

route.get('/user/list',(req,res)=>{  //挂载路由
    res.send("Get user list")
})

module.exports=router   //向外导出路由对象

注册路由模块：

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

Express中间件

中间件的概念

• 什么是中间件

中间件（Middleware ），特指业务流程的中间处理环节。

• Express 中间件的调用流程

当一个请求到达 Express 的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理。

• Express中间件的格式

Express 的中间件，本质上就是一个 function 处理函数，Express 中间件的格式如下：

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

• next 函数的作用

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

中间件的初体验

• 定义中间件函数

我们来定义一个最简单的中间件函数：

const mw=function(req,res,next){
    console.log('这是一个最简单的中间件函数')
    next() //在当前中间件的业务处理完毕后，必须调用next()函数，表示把流转关系交给了下一个中间件或路由
}

• 全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件。
通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件，示例代码如下：

const mw=function(req,res,next){
    console.log('这是一个最简单的中间件函数')
    next() //在当前中间件的业务处理完毕后，必须调用next()函数，表示把流转关系交给了下一个中间件或路由
}

//全局注册中间件
app.use(mw)

• 定义全局中间件的简化形式

app.use(function(req,res,next){
    console.log('这是一个最简单的中间件函数')
    next()
})

• 中间件的作用

多个中间件之间，共享同一份 req 和 res。基于这样的特性，我们可以在上游的中间件中，统一为 req 或 res 对象添加自定义的属性或方法，供下游的中间件或路由进行使用。一级一级的传导下去。

• 定义多个全局中间件

可以使用 app.use() 连续定义多个全局中间件。客户端请求到达服务器之后，会按照中间件定义的先后顺序依次进行调用。

• 局部生效的中间件

不使用app.use()定义的中间件，叫做局部生效的中间件，示例代码如下：

const mw=function(req,res,next){
    console.log('这是一个最简单的中间件函数')
    next() 
}

//mw这个中间件只在当前路由中生校，这种用法属于 局部生效中间件
app.get('/',mw,function(req,res){
    res.send('Hello Express')
})
//mw这个中间件不会影响到下面的这个路由
app.get('/user'funciton(req,res){
    res.send('User page')
})

• 定义多个局部中间件

可以在路由中，通过如下两种等价的方式，使用多个局部中间件：

app.get('/',mw1,mw2,(req,res)=>{res.send()})
app.get('/',[mw1,mw2],(req,res)=>{res.send()})

• 了解中间件的5个使用注意事项

1. 一定要在路由之前注册中间件；
2. 客户端发送过来的请求，可以连续调用多个中间件进行处理；
3. 执行完中间件的业务代码之后，不要忘记调用 next() 函数；
4. 为了防止代码逻辑混乱，调用 next() 函数后不要再写额外的代码；
5. 连续调用多个中间件时，多个中间件之间，共享 req 和 res 对象。

中间件的分类

Express 官方把常见的中间件用法，分成了 5 大类，分别是：

• 应用级别的中间件：

通过 app.use() 或 app.get() 或 app.post() ，绑定到 app 实例上的中间件，叫做应用级别的中间件。就是上面说到的全局和局部我们自己注册的中间件。

• 路由级别的中间件：

绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过，应用级别中间件是绑定到 app 实例上，路由级别中间件绑定到 router 实例上。

• 错误级别的中间件：

  • 错误级别中间件的作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。
  • 格式：错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是 (err, req, res, next)。
  • 注意：错误级别的中间件必须注册在所有路由之后。

  app.get('/',function(req,res)=>{
          throw new Error('服务器内部发生了错误！')
          res.send('Home Page')
          })
  app.use(function(req,res,next){
      console.log('发生了错误',arr.message) //在服务器打印错误消息
      res.send('Error'+err.message) //向客户端响应错误相关的内容
  })
  

• Express 内置的中间件：

  • express.static 快速托管静态资源的内置中间件，例如： HTML 文件、图片、CSS 样式等（无兼容性）
  • 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 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率。

使用Express写接口

创建基本的服务器

const express=require('express')

const app=require()

app.listen(5000,function(){
    console.log('服务器创建成功！')
})

创建API路由模块

//apiRouter.js 路由模块
const express=require('express')
const apiRouter=express.Router()

module.exports=apiRouter


//app.js 导入并注册路由模块
const apiRoutetr=require('./apiRouter.js')
app.use('./api',apiRouter)

编写GET接口

apiRouter.get('/get',(req,res)=>{
    //获取客户端通过查询字符串，发送到服务器的数据
    const query=req.query
    //调用res.send()方法，把数据响应给客户端
    res.send({
        status:0,
        msg:'GET请求成功',
        data:query
    })
    
})

编写POST接口

apiRouter.get('/post',(req,res)=>{
    //获取客户端通过请求体，发送发服务器上的URL-encoded数据
    const body=req.body
    //调用res.send()方法，把数据响应给客户端
    res.send({
        status:0,
        msg:'POST请求成功',
        data:body
    })
    
})

注意：如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))

CORS跨域资源共享

• 刚才编写的 GET 和 POST接口，存在一个很严重的问题：不支持跨域请求。
  解决接口跨域问题的方案主要有两种：

1. CORS（主流的解决方案，推荐使用）
2. JSONP（有缺陷的解决方案：只支持 GET 请求）

• 使用 cors 中间件解决跨域问题
  • 运行 npm install cors 安装中间件
  • 使用 const cors = require(‘cors’) 导入中间件
  • 在路由之前调用 app.use(cors()) 配置中间件