标签：req 框架 res app Express 中间件 express 路由

@

目录

• 一、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>

标签：req,框架,res,app,Express,中间件,express,路由
来源： https://www.cnblogs.com/gh-StudyNotes/p/15856210.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。