@

目录

• 一、Express 简介
• 二、Express 的基本使用
  • 1. 安装
  • 2. 创建基本的 Web 服务器
  • 3. 监听 GET 请求
  • 4. 监听 POST 请求
  • 5. 把内容响应给客户端
    • res.send()
    • res.json()
  • 6. 获取请求参数
    • ① req.query
    • ② req.params
    • ③获取请求体中的参数
      • express.urlencoded()
      • express.json()
      • body-parser 第三方模块
  • 7. 托管静态资源
    • ① express.static()
    • ② 托管多个静态资源目录
    • ③ 挂载路径前缀
• 三、Express 路由
  • 1. 路由的概念
  • 2. 路由的匹配过程
  • 3. 路由的使用
    • ① 普通路由
    • ② 模块化路由
• 四、Express 中间件
  • 1. 简介
    • ① 什么是中间件
    • ② 中间件的组成格式
    • ③ next()
  • 2. 中间件的分类
    • ① 应用级别的中间件
      • app.use()
      • app.get() / app.post()
    • ② 路由级别的中间件
    • ③ 错误级别的中间件
      • Error()
      • err
      • 捕获错误
    • ④ Express内置的中间件
    • ⑤ 第三方的中间件
  • 3. 自定义中间件
    • ① 需求描述与实现步骤
• 五、使用 Express 写接口
• 六、express-art-template模板引擎
  • app.engine()
  • app.set()
  • res.render()
  • app.locals 对象

---

一、Express 简介

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

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

Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的，但http 内置模块用起来很复杂，开发效率低；Express 是基于内置的 http 模块进一步封装出来的，能够极大的提高开发效率。

Express 作用：
使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器

• Web 网站服务器：专门对外提供 Web 网页资源的服务器。
• API 接口服务器：专门对外提供 API 接口的服务器。

二、Express 的基本使用

1. 安装

在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用：npm i express@4.17.1

2. 创建基本的 Web 服务器

// 1.导入 express
const express = require('express');

// 2.创建 web 服务器
const app = express();

// 3.调用 app.listen(端口号, 启动成功后的回调函数), 启动服务器
app.listen(3000, () => {
	console.log('express server runing at http://127.0.0.1')
}) 

3. 监听 GET 请求

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

/* 参数1： 在客户端请求的URL地址
   参数2：请求对应的处理函数
   		req：请求对象（包含了与请求相关的属性与方法）
   		res：响应对象（包含了与响应相关的属性与方法）
*/
app.get('请求URL', function(req, res){/*处理函数*/})

4. 监听 POST 请求

通过 app.post() ，可以监听客户端的 POST 请求，具体的语法格式如下:

/* 参数1： 在客户端请求的URL地址
   参数2：请求对应的处理函数
   		req：请求对象（包含了与请求相关的属性与方法）
   		res：响应对象（包含了与响应相关的属性与方法）
*/
app.post('请求URL', function(req, res){/*处理函数*/})

5. 把内容响应给客户端

res.send()

在express服务端无需再使用res.end(), 只需通过res.send()，就可以把处理好的内容，发送给客户端:

send()会自动检测响应内容的类型，并把类型自动设置到响应头当中 → 它自动实现的静态资源的响应。
它也自动设置了响应内容的编码，避免出现乱码
它也自动设置了响应的http状态码
所以，可以不在使用res.writeHead()来设置响应内容类型以及内容编码

app.get('/', (req, res) => {
	// 向客户端发送 JSON 对象
	res.send({ name: 'zs', age: 20, gender: '男' })
})

app.post('/', (req, res) => {
	// 在Express中请求对象可以直接访问服务器对象
	console.log(req.app);
	// 向客户端发送文本内容
	res.send('请求成功')
})

res.json()

向客户端返回 json对象 字符串

app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
})

6. 获取请求参数

① req.query

通过 req.query 对象，可以访问到客户端通过 查询字符串 的形式，发送到服务器的参数：

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

② req.params

通过 req.params 对象，可以访问到 URL 中，通过:匹配到的 动态参数，或又称之为 路由参数，比如：

在浏览器的请求url是如下这样的
localhost:3000/find/123/张三/20
如果url没有参数，那么就访问不到 /find 路由

这是一种较为特殊的获取请求参数的方式

//在路由中中指定请求参数, 写法如下
app.get('/find/:id/:name/:age', (req, res) => {
	// 获取请求参数
	console.log(req.params); // {id: '123', name: '张三', age: 20}
});

③获取请求体中的参数

express.urlencoded()

如果要获取 URL-encoded 格式的请求体数据，必须配置中间件

app.use(express.urlencoded({ extended: false }))

比如

//获取 urlencoded格式 参数
app.use(express.urlencoded({ extended: false }))

app.post('/post', (req, res) => {
	res.seng(req.body);// 请求参数对象
)
})

express.json()

body-parser 第三方模块

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

// 引入body-parser模块
const bodyParser = require('body-parser');
/* 配置body-parser模块

bodyParser.urlencoded()：对请求中 请求参数为urlencoded格式 进行处理，并返回一个函数

	函数内部执行过程
	方法内部会检测当前请求是否包含请求参数，并接收请求参数
	将请求参数转换为对象类型
	为req请求对象添加属性，属性名: "body",并把请求参数对象赋给body属性
	调用next()将请求控制权交给下一个中间件
	
 	extended参数
 		false: urlencoded()内部会使用querystring系统模块对请求参数的格式进行处理
 		true: urlencoded()内部会使用第三方模块 qs 对请求参数进行处理


bodyParser.json()：对请求中 请求参数为 json格式 进行处理, 内部实现原理参考上述
*/
app.use(bodyParser.urlencoded({ extended: false }));
//app.use(boduParser.json());
// 接收请求
app.post('/add', (req, res) => {
	// 接收请求参数
	console.log(req.body);
})

7. 托管静态资源

① express.static()

express 第三方包提供了一个 express.static()，用来创建创建一个静态资源服务器，可以方便地托管静态文件

/*static()实现逻辑:
判断当前请求是否访问静态资源，
	如果是, 直接把静态资源响应给客户端并终止当前请求。
	如果不是，那么方法内部会调用next()将请求控制权传递给下一个中间件
*/
app.use(express.static('静态资源存放目录绝对路径'));

例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

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

现在，public 目录下面的文件就可以访问了, 比如：

• http://localhost:3000/images/kitten.jpg
• http://localhost:3000/css/style.css
• http://localhost:3000/js/app.js
• http://localhost:3000/images/bg.png
• http://localhost:3000/hello.html

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

② 托管多个静态资源目录

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

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

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

③ 挂载路径前缀

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

//app.use('虚拟路径',express.static('静态资源存放目录绝对路径')
app.use('/static', express.static('public'))

访问时要注意虚拟路劲
http://localhost:3000/static/images/kitten.jpg

注意: 虚拟路径实际上不存在

三、Express 路由

1. 路由的概念

什么是路由：广义上来讲，路由就是 映射关系。

Express 中的路由:
在 Express 中，路由指的是客户端的请求与服务器处理函数之间的 映射关系。
Express 中的路由分 3 部分组成，分别是

• 请求的类型
• 请求的 URL 地址
• 处理函数，

格式如下：

app.METHOD(PATH, HANDLER)

比如：

// 匹配 GET 请求， 且请求URL 为 /
app.get('/', function(req, res){
	res.send('hello')
})

// 匹配 POST 请求， 且请求URL 为 /
app.post('/', function(req, res){
	res.send('hello')
})

2. 路由的匹配过程

每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。
在匹配时，会按照路由的顺序进行匹配，如果 请求类型 和 请求的 URL 同时匹配成功，则 Express 会将这次请求，转交给对应的 function 函数进行处理。

路由匹配的注意点：

1. 按照定义的 先后顺序 进行匹配
2. 请求类型 和 请求的URL 同时匹配成功，
   才会调用对应的处理函数

当访问了一个不存在路由，express会自动跳到一个页面给出一个友好提示，比如Cannot GET /list：

3. 路由的使用

① 普通路由

在 Express 中使用路由最简单的方式，就是把路由挂载到 app 上，示例代码如下：

const express = require('express')
const app = express();
// 挂载路由
app.get('/', (req, res) => {res.send('hello')})
app.get('/', (req, res) => {res.send('hello')})
app.listen(3000)

② 模块化路由

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

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

创建路由模块

const express = require('express')  // 导入express
const router = express.Router()  // 创建路由对象
router.get('/user/list', function(req, res){  //挂载路由
	res.send('Get user list');
})
router.post('/user/add', function(req, res){
	res.send('Add new user')
})
module.export = router

注册路由模块, 并添加前缀

// 导入路由模块
const userRouter = require('./router/user.js')

// 使用 app.use() 注册路由模块，并添加统一的访问前缀 /api
app.use('/api',userRouter)

四、Express 中间件

1. 简介

① 什么是中间件

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

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

中间件的作用:

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

② 中间件的组成格式

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

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

一个路由可以绑定多个中间件函数：

const mw1 = function(req, res, next){
	next();
} 
const mw2 = function(req, res, next){
	next();
}

app.get('/', mw1, mw2, (req, res) => { res.send('Home Page')})
/* 等价于
app.get('/', [mw1, mw2], (req, res) => { res.send('Home Page')})
*/

③ next()

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

注意：一个路由可以绑定多个中间件

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

//调用next()之前需要在处理函数中传递 第三个参数next:权限控制函数
app.get('/request', (req, res, next) => {
	req.name = "张三";
	next();
});
app.get('/request', (req, res) => {
	res.send(req.name);
});

next()函数只能传递一个参数给错误处理中间件

2. 中间件的分类

① 应用级别的中间件

通过 app.use() 或 app.get() 或 app.post() ，绑定到 app 实例上的中间件，叫做应用级别的中间件

app.use()

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

// 应用级别的中间件(全局中间件)
app.use((req, res, next) => {
	console.log(req.url);
	next();
});

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

app.use('/admin', (req, res, next) => {
	console.log(req.url);
	next();
});

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

app.use(function(req, res, next){
	console.log('调用了第1个全局中间件')
	next()
})
app.use(function(req, res, next){
	console.log('调用了第2个全局中间件')
	next()
})
app.get('/user', function(req, res){
	res.send('Home Page')
})

app.get() / app.post()

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

// 应用级别的中间件(局部中间件)
app.get('/', mw1, (req, res) => {
	res.send('Home Page')
})

依然可以定义多个局部中间件，并按声明顺序依次调用

② 路由级别的中间件

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

var app = express()
var router = express.Router()

//路由级别中间件
router.use(function(req, res, next){
	console.log('Time: ', Data.now())
	next()
})

app.use('/', router)       

③ 错误级别的中间件

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

app.get('/', function(req, res){
	throw new Error('服务器内部发生了错误!')
	res.send('Home Page')
})
app.use(function(err, req, res, next){
	console.log('发生了错误: '+ err.message)
	res.send('Error! '+ err.message )
})

注意：错误级别的中间件，必须注册在所有路由之后！

Error()

new Error('错误信息')构造函数用来创建错误对象，通过throw关键字抛出错误对象

err

app.get('/index', (req, res) => {
	//创建错误对象并抛出，程序报错
	throw new Error('程序发生未知错误')
})
//错误处理中间件, 通过传入参数err来接收程序抛出的错误对象
app.use((err, req, res, next) => {
	//err.message: 错误信息
	//通过status()手动设置http状态码, 可链式调用
	res.status(500).send(err.message);
})

注意，错误处理中间件 只能捕获同步代码执行出错时throw的错误，无法捕获异步代码执行出错时throw的错误

在node.js中，异步API的错误信息都是通过回调函数获取的，支持Promise对象的异步API发生错误可以通过catch方法捕获。
具体需要手动调用next()方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件。

app.get("/", (req, res, next) => {
	fs.readFile("/file-does-not-exist", (err, data) => {
		if (err) {
			//触发错误中间件
			next(err);
		}
	});
});

捕获错误

异步函数执行如果发生错误要如何捕获错误呢？
try{}catch(ex){} 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能其他类型的API发生的错误。
错误捕获后通过next()错误信息即可触发错误处理中间件

app.get("/", async (req, res, next) => {
	try {
		await User.find({name: '张三'})
	}catch(ex) {
		next(ex);
	}
});

④ Express内置的中间件

自 Express 4.16.0 版本开始，Express 内置了 3 个常用的中间件，极大的提高了 Express 项目的开发效率和体验：

1. express.static 快速托管静态资源的内置中间件，例如： HTML 文件、图片、CSS 样式等（无兼容性）
2. express.json 解析 JSON 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
3. express.urlencoded 解析 URL-encoded 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）

 // 配置解析 application/json 格式数据的内置中间件
 app.use(express.json())
 // 配置解析 application/x-www-urlencoded 格式数据的内置中间件
 app.use(express.urlencoded({extended: false}))

⑤ 第三方的中间件

非 Express 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中，可以按需下载并配置第三方中间件，从而提高项目的开发效率。
例如：在 express@4.16.0 之前的版本中，经常使用 body-parser 这个第三方中间件，来解析请求体数据。使用步骤如下：

1. 运行 npm install body-parser 安装中间件
2. 使用 require 导入中间件
3. 调用 app.use() 注册并使用中间件

注意：Express 内置的 express.urlencoded 中间件，就是基于 body-parser 这个第三方中间件进一步封装出来的。

3. 自定义中间件

① 需求描述与实现步骤

自己手动模拟一个类似于 express.urlencoded 这样的中间件，来解析 POST 提交到服务器的表单数据。
实现步骤：

1. 定义中间件
2. 监听 req 的 data 事件
3. 监听 req 的 end 事件
4. 使用 querystring 模块解析请求体数据
5. 将解析出来的数据对象挂载为 req.body
6. 将自定义中间件封装为模块

// custom-body-parser.js
const qs = require('querystring');
function getBodyparam(req, res, next){
    var str ='';
    req.on('data', (chunk)=>{
        str += chunk;
    })
    req.on('end', () => {
        let body = qs.parse(str);
        req.body = body;
        next();

    })
}
module.exports.myGetBodyparam = getBodyparam;

const express = require('express')
const bodyparam = require('./custom-body-parser')
const server = express();

// 自定义中间件
server.use(bodyparam.myGetBodyparam);
server.use((req, res) => {
    console.log(req.body);
})

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

---

五、使用 Express 写接口

创建基本服务器

// 导入 express 模块
const express = require('express');
// 创建 express 的服务器实例
const server = express();

// 导入并注册 路由模块
const apiRouter = require('./router/apiRouter')


server.use('/api',apiRouter);

// 指定端口并开启服务器
server.listen(3000, () => {
    console.log('express server is running at http://localhost:3000')
})

创建 API 路由模块

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

/*
如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。
否则JSONP 接口会被处理成开启了 CORS 的接口。
*/
//优先创建 JSONP 接口，并且这个接口不会被处理成 CORS 接口
apiRouter.get('/jsonp', (req, res) => {
	// 获取客户端发送过来的回调函数名字
    const funcName = req.query.callback;
    // 得到通过 JSONP 形式发送给客户端的数据
    const data = {name: 'lisi', age: 20};
    // 拼接出一个函数调用字符串
    const scriptStr = `${funcName}(${JSON.stringify(data)})`;
    // 把字符串响应给客户端的 <script> 标签进行解析
    res.send(scriptStr);

})

// 再配置 CORS 中间件，后面的所有接口，都会被处理成 CORS 接口
apiRouter.use(cors());

apiRouter.use(express.urlencoded({ extended: false }))

// 编写 GET 接口
apiRouter.get('/get', (req, res) => {
    // res.setHeader('Access-Control-Allow-Origin', '*');
	// 1. 获取客户端通过查询字符串，发送到服务器的数据
    const query = req.query;
    // 2. 调用 res.send() 方法，把数据响应给客户端
    res.send({
        status: 0, // 状态，0 表示成功，1 表示失败
        msg: 'GET请求成功', // 状态描述消息
        data: query  // 需要响应给客户端的具体数据      
    })
})

// 编写 POST 接口
apiRouter.post('/post', (req, res) => {
	// 获取客户端通过请求体，发送到服务器的 URL-encoded 数据
    const body = req.body;
    console.log(req.body);
    // 调用 res.send() 方法， 把数据响应给客户端
    res.send({
        status: 0, // 状态，0 表示成功，1 表示失败
        msg: 'POST请求成功', // 状态描述消息
        data: body  // 需要响应给客户端的具体数据      
    })
})
module.exports = apiRouter;

六、express-art-template模板引擎

app.engine()

app.set()

res.render()

为了使 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() : 对express框架进行配置, 通过第一个参数指定当前需要配置什么
	'views': 设置模板存放目录
	'view engine': 设置模板默认后缀
*/
app.set('views', path.join(__dirname, 'views'));
// 渲染模板时不写后缀 默认拼接art后缀
app.set('view engine', 'art');

app.get('/', (req, res) => {
/* res.render(): 渲染模板
方式内部逻辑：
	1. 拼接模板路径
	2. 拼接模板后缀
	3. 哪一个模板和哪一个数据进行拼接
	4. 将拼接结果响应给了客户端
参数
参数1：模板文件名
参数2：渲染数据
*/
	res.render('index',{});
});

app.locals 对象

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

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

<ul>
	{{each users}}
		<li>$value.name</li>
		<li>$value.age</li>
	{{/each}}
</ul>