Express教程01：创建服务器、配置路由

短命女 2022-04-27 18:56 222阅读 0赞

#### 阅读更多系列文章请访问我的[GitHub博客][GitHub]，示例代码请访问[这里][Link 1]。 ####

## Express介绍 ##

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

Express的特点是易于入门，而且可以使用各种中间件扩展它的功能。

但由于Express开发相对较早，主要使用回调函数进行异步操作，无法使用Async函数，因此原团队也开发了功能更强大的Koa来解决Express的不足之处。

不过对于开发人员，Express还是不可或缺的一项重要技能。

## 使用Express创建服务器 ##

> 示例代码：/lesson01/server.js

1.  在`/lesson01`文件夹通过`npm init -y`初始化项目
2.  使用`npm install express --save`安装Express
3.  引用Express并创建服务器

const express = require('express')
    
    const server = express()
    
    server.listen(8080)
    
    console.log(`Server started at 8080`)
    复制代码

## 常用路由配置方法 ##

> 示例代码：/lesson01/server.js

通常接收到的请求不止get方法，常用的有：

1.  `server.get`，处理get请求
2.  `server.post`，处理post请求
3.  `server.use`，处理所有方法的请求，它的第一个路由参数可以不传，此时表示处理所有接口请求，如下：

server.use('/first', (req, res, next) => {
      console.log('first')
      next()
    })
    复制代码

除了这3个方法之外，还有server.put、server.delete等方法，具体可以查看[文档][Link 2]

## 添加路由 ##

> 示例代码：/lesson01/server.js

Express自带了路由功能，不需要引用中间件即可添加路由。

server.get('/first', (req, res, next) => {
      res.send({
        error: 0,
        msg: '请求成功'
      })
    })
    复制代码

代码含义如下：

1.  创建了一个get请求的路由。
2.  第一个参数'/first'表示请求的路由名称。
3.  第二个参数为回调函数。
4.  回调函数传参req表示请求参数实例。
5.  回调函数传参res表示响应参数实例。
6.  next用于触发下一步操作。
7.  res.send可以向前台发送数据，与原生node.js的res.write方法不同，它不止可以发送Buffer、字符串，还可以直接发送JSON等数据，如下：

res.send(new Buffer('wahoo'));
    res.send({ some: 'json' });
    res.send('<p>some html</p>');
    res.send(404, 'Sorry, cant find that');
    res.send(404);
    复制代码

此时访问[http://localhost:8080/first][http_localhost_8080_first]，即可看到页面显示：`{"error":0,"msg":"请求成功"}`。

## next方法的使用 ##

> 示例代码：/lesson01/server.js

next方法的作用是用于对请求的多级处理，例如：

server.get('/second', (req, res, next) => {
      if (Number(req.query.num) > 10) {
        // 满足条件时，才可触发同名的下一个路由。
        next()
      } else {
        res.send({
          error: 1,
          msg: '请输入大于10的数字'
        })
      }
    })
    
    server.get('/second', (req, res, next) => {
      res.send({
        error: 0,
        msg: '输入成功'
      })
    })
    复制代码

代码含义如下：

1.  若配置了多个同名路由，代码会从上到下按顺序执行，但如果未调用next方法，执行过程会中断。
2.  如果接口传参为[http://localhost:8080/second?num=8][http_localhost_8080_second_num_8]，无法满足num > 10的条件，则不会执行第二个/second路由回调函数中代码，直接返回错误。
3.  如果接口传参为[http://localhost:8080/second?num=80][http_localhost_8080_second_num_80]，满足了num > 10的条件，则可以执行第二个/second路由回调函数中代码，进行下一步处理。
4.  next方法在处理中间件时十分有用，因为在各级中间件的处理中，可以通过next方法判断是否需要执行下一级处理，

## next方法传参 ##

> 示例代码：/lesson01/server.js

有时会需要给下一级的处理传参，只要直接给req实例中添加属性即可，但请注意不要覆盖系统默认属性，如下：

server.get('/second', (req, res, next) => {
      if (Number(req.query.num) > 10) {
        // 满足条件时，才可触发同名的下一个路由。
        req.randomNum = Math.floor(Math.random() * 100)
        next()
      } else {
        res.send({
          error: 1,
          msg: '请输入大于10的数字'
        })
      }
    })
    
    server.get('/second', (req, res, next) => {
      res.send({
        error: 0,
        msg: `输入成功，接收到的随机数为${req.randomNum}`
      })
    })
    复制代码

访问[http://localhost:8080/second?num=80][http_localhost_8080_second_num_80]即可看到前台打印出的req.randomNum结果。

[GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fchencl1986%2FBlog
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fchencl1986%2FBlog%2Ftree%2Fmaster%2FDemos%2FExpress%25E5%2585%25A5%25E9%2597%25A8%25E7%25B3%25BB%25E5%2588%2597
[Link 2]: https://link.juejin.im?target=http%3A%2F%2Fwww.expressjs.com.cn%2F4x%2Fapi.html%23app
[http_localhost_8080_first]: https://link.juejin.im?target=http%3A%2F%2Flocalhost%3A8080%2Ffirst
[http_localhost_8080_second_num_8]: https://link.juejin.im?target=http%3A%2F%2Flocalhost%3A8080%2Fsecond%3Fnum%3D8
[http_localhost_8080_second_num_80]: https://link.juejin.im?target=http%3A%2F%2Flocalhost%3A8080%2Fsecond%3Fnum%3D80