Web 开发框架 — Express 精讲（安装使用、静态托管、路由处理、中间件的使用）

Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网https://www.expressjs.com.cn/        Express 是基于 Node.js 开发的 web 开发框架，是一个 Node.js 模块；既然是基于 Node.js，那么使用 Express 的前提就是电脑必须已经安装 Node 环境，Node 的安装很简单，此处不再赘述。

目录

一、Express 安装

二、Express 使用

三、通过 Express 托管静态文件

四、路由处理

五、Express 中间件

1. 应用级中间件

2. 路由级中间件

3. 错误处理中间件

4. 第三方中间件 —— body-parser

一、Express 安装

        首先创建一个文件夹 study_Express 作为项目文件，在文件中创建入口文件 app.js；

在集成终端中使用命令 npm init -y 初始化一个 package.json 文件；

使用命令 npm install express -- save 下载 Express；安装成功后如下：

二、Express 使用

        下载 Express 之后，就可以正常使用了，在 app.js 中创建一个应用服务器示例；

// study_Express/app.js

const express = require('express') //require函数引入express包
const app = express() //调用函数
const port = 3000 //设置端口3000

app.get('/', (req, res) => {
  res.send('Hello World!') //app对象调用get API，监听根路径 /，有根路径请求时返回“Hello World!”
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`) //监听3000端口，启动服务后触发回调函数
})

创建完成后启动服务；

此时我们查看本地地址的3000端口，就可以返回“Hello World!”;

以上就是一个最简单的应用服务器。

三、通过 Express 托管静态文件

        所谓托管静态文件就是让图片、文档、js/css/html文件等等可以通过 url 地址来访问；我们新建文件 static.js 来演示静态文件的托管；

// study_Express/static.js

const express = require('express') //require函数引入express包
const app = express() //调用函数

//实现静态资源服务
let server = app.use(express.static('public')) //public就是静态资源的根目录，静态资源放于此文件夹

server.listen(3000, () => { //创建监听
  console.log('服务器启动成功...')
})

提示：app.use 语句可以写多条设置多个静态资源的根目录，访问时互不影响。

在以上代码中我们设置的根目录为 public，所以创建此目录并添加示例文件 1.html 和 1.jpg 用于静态托管；

接下来，启动服务；

此时就可以在浏览器中通过 url 来访问我们刚刚添加的静态资源了。

除此之外，我们也可以为访问的路径设置一个虚拟目录，具体做法是在 app.use 后新加一个参数；如下，设置虚拟目录 /express；

let server = app.use('/express',express.static('public')) //use的第一个参数指定虚拟目录(路径)

提示：应用服务器文件无论做任何修改都需要重新启动服务。

接下来在访问静态资源的 url 中也需要加入这个虚拟目录；

四、路由处理

        根据请求路径和请求方式进行路径分发处理的就是路由；

        http 的常用请求方式有 post(添加)、get(查询)、put(更新)、delete(删除)，即分别对应增删改查操作；我们新建文件 router.js 来演示路由处理：

// study_express/router.js

const express = require('express') //require函数引入express包
const app = express() //调用函数

//四种基本路由处理（处理特定请求）
app.get('/', (req, res) => {
  res.send('get数据！')
})

app.post('/', (req, res) => {
  res.send('post数据！')
})

app.put('/', (req, res) => {
  res.send('put数据！')
})

app.delete('/', (req, res) => {
  res.send('delete数据！')
})

//直接使用use分发可以处理所有的路由请求（处理所有请求）
// app.use((req,res) => {
//   res.send('ok!')
// })

app.listen(3000, () => { //创建监听
  console.log('router服务器启动成功...')
})

接下来进行接口测试，由于浏览器不太方便，这里我使用的是 ApiPost；

补充： ApiPost 测试接口方法

首先在 ApiPost 正常登录； 

随后新建目录 --> 鼠标右键 --> 新建 --> 新建接口；

输入接口地址，我们使用的是本地地址、3000端口；

输入地址后，启动服务器；

接下来选择发送方式进行测试：

测试结果如下：

五、Express 中间件

        中间件是一个函数，它可以访问请求对象(request objeck(req))、响应对象(response object(res)) ，和 Web 应用中处于请求 · 响应循环流程中的中间件；

        中间件还有第三个参数 next，用于将此请求传递到下一环节；从本质上来说，一个 Express 应用就是在调用各种中间件。中间件分为以下几种：

• 应用级中间件（app.use）
• 路由级中间件（app.get/post...）
• 错误处理中间件
• 内置中间件（如我们之前使用的静态资源托管 static 就是内置中间件）
• 第三方中间件

1. 应用级中间件

        应用级中间件绑定到 app对象 使用 app.use() 和 app.METHOD()；

        新建 1.js 文件进行演示，通过三个中间件来实现访问 /user 路径，记录访问时间、访问日志以及访问次数。

// study_Express/1.js

const express = require('express') //require函数引入express包
const app = express() //调用函数

let total = 0; //访问量

//应用级中间件
app.use('/user', (req, res, next) => { //第一个中间件
  console.log('访问时间：' + Date.now()) //记录访问时间
  next() //进入下一个中间件，不使用next则不会执行下面的中间件
})

app.use('/user', (req, res, next) => { //第二个中间件
  console.log('日志：×××访问了/user') //记录访问日志
  next()
})

app.use('/user', (req, res) => { //第三个中间件
  total++; //访问次数增加
  console.log('当前访问量：' + total)
  res.send('返回结果')
})

app.listen(3000, () => { //创建监听
  console.log('中间件服务器启动成功...')
})

启动服务后访问 /user 路径；

此时后台会打印出相关信息，每刷新一次，次数加一；

2. 路由级中间件

        新建文件 2.js 进行演示，使用两个中间件打印出1、2。

// study_Express/2.js

const express = require('express') //require函数引入express包
const app = express() //调用函数

//路由级中间件
app.get('/luyou', (req, res, next) => {
  console.log(1)
  next()
})

app.get('/luyou', (req, res) => {
  console.log(2)
})

app.listen(3000, () => { //创建监听
  console.log('路由级中间件服务器启动成功...')
})

启动服务后访问 /luyou 路径；

后台打印出结果；

此外，路由级中间件中调用 next 时，可以加一个 route 参数 next('route')，意为跳转至下一个路由；

注意区分：

        next()；跳转至下一个中间件。

        next('route')；跳转至下一个路由，所谓下一个路由就是通过 get、post  或者其他方式所绑定的路由。

如下面这种写法：

const express = require('express') //require函数引入express包
const app = express() //调用函数

//路由级中间件
app.get('/luyou', (req, res, next) => { //第一个中间件 第一个路由
  console.log(1)
  next('route') //跳转至下一个路由
}, (req, res) => { //第二个中间件
  console.log(2)
})

app.get('/luyou', (req, res) => { //第三个中间件 第二个路由
  console.log(3);
  res.send('路由级中间件返回结果')
})

app.listen(3000, () => { //创建监听
  console.log('路由级中间件服务器启动成功...')
})

第一个中间件和第二个中间件进行了嵌套，只使用了一个路由，在第一个中间件中使用了 next('route'); 直接跳到了下一路由，所以第二个中间件的结果 2 就不会打印了，如下：

3. 错误处理中间件

        错误处理中间件需要4个参数，必须提供四个参数以将其标识为错误处理中间件函数。即使不需要使用 next 对象，也必须指定它。否则，该 next 对象将被解释为常规中间件并且无法处理错误。格式如下：

app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

4. 第三方中间件 —— body-parser

        第三方中间件有很多，在这里我们重点演示参数传递 body-parser，其余第三方中间件用法相同；

首先 npm 安装 body-parser，终端中中使用命令 npm install body-parser --save；

安装成功后会在 package.json 文件中显示；

新建文件 3.js 进行演示，实现简易的登录表单验证功能；

// study_Express/3.js

const express = require('express') //require函数引入express包
const app = express() //调用函数

const bodyParser = require('body-parser') //引入body-parser

//挂载(启用)内置中间件static，托管静态资源
app.use(express.static('public'))

//挂载参数处理中间件（此处解析post表单提交的数据）
app.use(bodyParser.urlencoded({
  extended: false
}))

//处理get提交的数据
// app.get('/login', (req, res) => {
//   let data = req.query;
//   console.log(data);
//   res.send('get提交时的数据')
// })

//处理post提交的数据
app.post('/login', (req, res) => {
  let data = req.body;
  if (data.username == '前端小马' && data.password == '123456') {
    res.send('登录成功！')
  } else {
    res.send('用户名或密码错误！')
  }
})

app.listen(3000, () => {
  console.log('第三方中间件服务启动...')
})

为了展示效果，我们在目录 public 下新建一个 html 文件来制作表单，并托管它；

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>表单</title>
  <style></style>
</head>

<body>
  <form action="http://localhost:3000/login" method="post">
    用户：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="提交">
  </form>
</body>

</html>

启动服务后访问 /login.html，可以正常验证：