Node.js Express 框架：Express 框架中的请求和响应、Express 中间件、Express 请求处理、express-art-template 模板引擎_express框架提供了中间件机制,设置中间件来响应http请求。( )

1、Node.js Express 框架

1.1 Express 简介

Express 是一个基于 Node 平台的 web 应用开发框架，它提供了一系列的强大特性，帮助你创建各种 web 应用和丰富的 HTTP 工具。

我们可以使用 npm install express 命令进行下载。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

• 可以设置中间件来响应 HTTP 请求。
• 提供了方便简洁的路由定义方式。
• 对获取 HTTP 请求参数进行了简化处理。
• 对模板引擎支持程度高，方便渲染动态 HTML 页面。
• 提供了中间件机制，有效控制 HTTP 请求。
• 拥有大量第三方中间件对功能拓展。

1.2 安装 Express

安装 Express 并将其保存到依赖列表中：

npm install express --save
1

以上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。以下几个重要的模块是需要与 express 框架一起安装的：

• body-parser ：node.js 中间件，用于处理 JSON，Raw，Text 和 URL 编码的数据。
• cookie-parser ：这就是一个解析 Cookie 的工具。通过req.cookies 可以取到传过来的 cookie，并把它们转成对象。
• multer ：node.js 中间件，用于处理enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
1
2
3

1.3 原生 Node.js 与 Express 框架对比之路由

// 原生node.js
app.on("request", (req, res) =>{
	// 获取客户端请求路径
	let { pathname } = url.parse(req.url);
	// 对请求路径进行判断，不同的路径地址响应不同的内容
	if(pathname == "/" || pathname == "/index"){
		res.end("欢迎访问首页");
	}else if(pathname == "/list"){
		res.end("欢迎访问列表页面");
	}else if(pathname == "/about"){
		res.end("欢迎来到关于我们页面");
	}else{
		res.end("抱歉,你访问的页面不存在");
	}
})

// Express框架
// 当客户端以 get 方式访问时
app.get("/", (req, res)=>{
	// 对客户端作出响应
	res.send("Hello Express");
});

// 当客户端以 get 方式访问时
app.post('/add', (req, res) => {
	res.send("使用post方式请求了/add路由");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.4 原生 Node.js 与 Express 框架对比之获取请求参数

1.5 Express 框架的基本使用

//引入express框架
const express = require("express");
//创建网站服务器
const app = express();
//拦截请求
app.get("/",(req,res)=>{
    //express框架使用send进行响应，相当于原生end
    //send()
    //1.send方法内部会检测响应内容的类型
    //2.send方法会自动设置http状态码
    //3.send方法会帮助我们自动设置响应的内容类型及编码
    //4.在send方法中可以传入json对象直接返回给客户端
    res.send("ok");
})

//监听端口
app.listen(3000);
console.log("服务器已启动成功，请访问localhost:3000");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、Express 框架中的请求和响应

Express 应用使用回调函数的参数： request 和 response 对象来处理请求和响应的数据。

app.get('/', function (req, res) {
   // --
})
1
2
3

request 和 response 对象的具体介绍：

2.1 Request 对象

request 对象表示 HTTP 请求，包含了请求查询字符串，参数，内容，HTTP 头部等属性。常见属性有：

2.2 Response 对象

response 对象表示 HTTP 响应，即在接收到请求时向客户端发送的 HTTP 响应数据。常见属性有：

3、Express 中间件

3.1 什么是中间件

中间件就是一堆方法，可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。

• 中间件主要由两部分构成，中间件方法以及请求处理函数。
• 中间件方法由 Express 提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求。

// 例如：路由
app.get("请求路径","处理函数")  // 接收并处理get请求
app.post("请求路径","处理函数") // 接收并处理post请求
1
2
3

• 可以针对一个请求设置多个中间件，对同一个请求进行多次处理。
• 默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，就终止匹配。
• 可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。

// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();

app.get('/request', (req, res, next) => {
    req.name = "张三";
    next(); // 请求交给下一个中间件
})

app.get('/request', (req, res) => {
    res.send(req.name)
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.2 app.use 中间件用法

• app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。
• 为了防止其他中间件的干扰导致该中间件无效，需要将其中间件放在其他中间件之前。并调用 next 方法，使得请求继续被下一个中间件进行处理。

app.use((req,res,next)=>{
	console.log(req.url);
	next();
})
1
2
3
4

• app.use 第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求就接收这个请求。

app.use("/admin",(req,res,next) => {
	console.log(req.url);
	next();
});
1
2
3
4

3.3 中间件的应用

（1）路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。

// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();

// 网站维护公告
// app.use((req, res, next) => {
//   res.send('当前网站正在维护中...');
// })

// 模拟用户登录
app.use('/admin', (req, res, next) => {
  // 用户没有登录
  let isLogin = true;
  // 如果用户登录
  if (isLogin) {
    // 让请求继续向下执行
    next()
  } else {
    // 如果用户没有登录，直接第客户端做出响应
    res.send('您还没有登录，不能访问当前页面');
  }
})

app.get('/admin', (req, res) => {
  res.send('您已经登录，可以访问当前页面');
})

app.use((req, res, next) => {
  // 为客户端响应 404 状态码以及提示信息
  // res.status(404)
  res.status(404).send('当前访问的页面不存在');
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

（2）网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。

// 网站维护公告
app.use((req, res, next) => {
  res.send('当前网站正在维护中...');
})
1
2
3
4

（3）自定义404页面，该中间定义在所有路径的最后面，确保是没有找到的路由，可以使用 res.status() 方法设置状态码。status 方法和 send 方法可以链式调用。

app.use((req, res, next) => {
  res.send('当前访问的页面不存在');
})
1
2
3

此时在 network 里看到的状态码是 304，要想显示为 404 的话，需要修改代码：

app.use((req, res, next) => {
  // 为客户端响应 404 状态码以及提示信息
  // res.status(404)
  res.status(404).send('当前访问的页面不存在');
})
1
2
3
4
5

3.4 错误处理中间件

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败，数据库连接失败。

错误处理中间件是一个集中处理错误的地方。

app.use((err, req, res, next) => {
  res.status(500).send('服务器发生未知错误');
})
1
2
3

示例：

// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();

app.get('/index', (req, res) => {
  throw new Error('程序发生了未知错误')
})

// 错误处理中间件
// 该中间件会自动捕获错误并执行，如果没有错误抛出，该中间件不会执行。并且只能捕获到同步代码出错
app.use((err, req, res, next) => {
  // err对象下的message保留的是抛出的错误信息
  res.status(500).send(err.message);
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意： 错误处理中间件只能捕捉到同步代码执行出错。如果异步代码执行出错，需要手动去触发这个错误中间件。

当程序出现错误时，调用next()方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误中间件。

app.get('/index', (req, res, next) => {
    // throw new Error('程序发生了未知错误')
    fs.readFile('./01.js', 'utf8', (err, result) => {
        if (err != null) {
            next(err)
        } else {
            res.send(result)
        }
    })
	res.send('程序正常执行')
})
1
2
3
4
5
6
7
8
9
10
11

3.5 捕获错误

在 node.js 中，异步 API 的错误信息都是通过回调函数获取的，支持 Promise 对象的异步 API 发生错误可以通过 catch() 方法捕获。

异步函数执行如果发生错误要如何捕获错误呢？

try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能捕获其他类型的 API 发生的错误。

语法：

app.get('/', (req, res, next) => {
  try {
    await User.find({name: '张三'});
  } catch (ex) {
    next(ex);
  }
});
1
2
3
4
5
6
7

4、Express 请求处理

4.1 构建模块化路由

 const express = require('express') 
 // 创建路由对象
 const home = express.Router();
 // 将路由和请求路径进行匹配
 app.use('/home', home);
 // 创建二级路由，在home路由下继续创建路由
 home.get('/index', () => {
          //  /home/index
         res.send('欢迎来到博客展示页面');
 });
1
2
3
4
5
6
7
8
9
10

4.2 GET参数的获取

Express 框架中使用 req.query 即可获取 GET 参数，框架内部会将 GET 参数转换为对象并返回。

// 接收地址栏中问号后面的参数
// 例如: http://localhost:3000/?name=zhangsan&age=30
app.get('/', (req, res) => {
    console.log(req.query); // {"name": "zhangsan", "age": "30"}
});
1
2
3
4
5

4.3 POST参数的获取

Express 中接收 post 请求参数需要借助第三方包 body-parser。

下载安装：npm install body-parser

// 引入 express 框架
const express = require('express');
// 引入 body-parser 模块
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();

// 配置 body-parser 模块   拦截所有的请求
// 使用 app.use 进行拦截所有请求,并调用 bodyParser 下面的 urlencoded 的方法来处理请求
// extended: false 方法内部使用 querystring 模块处理请求参数的格式
// extended: true 方法内部使用第三方模块 qs 处理请求参数的格式
app.use(bodyParser.urlencoded({ extended: false }));

// 接收请求
app.post('/add', (req, res) => {
  // 接收请求参数
  console.log(req.body);
});

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.4 Express路由参数

app.get('/find/:id', (req, res) => { 
     console.log(req.params); // {id: 123} 
});

// 浏览器中打开
localhost:3000/find/123
1
2
3
4
5
6

4.5 静态资源的处理

通过 Express 内置的 express.static 可以方便的托管静态文件，例如 img、css、js 文件等。

app.use(express.static("静态文件所存放的目录"));
app.use(express.static('public'));
// 实现静态资源访问功能
app.use(express.static(path.join(__dirname, 'public')));
1
2
3
4

5、express-art-template 模板引擎

5.1 模板引擎

• 为了使 art-template 模板引擎能够更好的和 Express 框架配合，模板引擎官方在原 art-template 模板引擎的基础上封装了 express-art-template。
• 同时安装这两个，使用 npm install art-template express-art-template 命令进行安装。

语法：

// 当渲染后缀为 art 的模板时，使用 express-art-template
app.engine('art', require('express-art-template'));
// 设置模板存放目录
app.set('views', path.join(__dirname, 'views'));
// 渲染模板时不写后缀，默认拼接 art 后缀
app.set('view engine', 'art');
app.get('/', (req, res) => {
  // 渲染模板
  res.render('index');
})
1
2
3
4
5
6
7
8
9
10

例子：

// 引入 express 框架
const express = require('express');
const path = require('path');
// 创建网站服务器
const app = express();

// 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件
//  1.模板后缀
//  2.使用的模板疫情
app.engine('art', require('express-art-template'))
// 2.告诉express框架模板存放的位置是什么
app.set('views', path.join(__dirname, 'views'))
// 3.告诉express框架模板的默认后缀是什么
app.set('view engine', 'art');

app.get('/index', (req, res) => {
    // 1. 拼接模板路径
    // 2. 拼接模板后缀
    // 3. 哪一个模板和哪一个数据进行拼接
    // 4. 将拼接结果响应给了客户端
    res.render('index', {
        msg: 'message'
    })
});

app.get('/list', (req, res) => {
    res.render('list', {
        msg: 'list page'
    })
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

5.2 app.locals 对象

将变量设置到 app.locals 对象下面，这个数据在所有的模板中都可以获取到。

// 引入 express 框架
const express = require('express');
const path = require('path');
// 创建网站服务器
const app = express();

// 模板配置
app.engine('art', require('express-art-template'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'art');

app.locals.users = [{
  name: '张三',
  age: 20
},{
  name: '李四',
  age: 30
}]

app.get('/index', (req, res) => {
  res.render('index', {
    msg: '首页'
  })
})

app.get('/list', (req, res) => {
  res.render('list', {
    msg: '列表页'
  })
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

打开 views 目录下的 index.art 和 list.art 文件，同时添加：

{{ msg }}

<ul>
  {{each users}}
  <li>
    {{$value.name}}
    {{$value.age}}
  </li>
  {{/each}}
</ul>
1
2
3
4
5
6
7
8
9
10

运行该代码之后，在浏览器输入：http://localhost:3000/index 和 http://localhost:3000/list ，可以看到：

5.3 路由重定向

res.redirect('/admin/user');
1