Java教程

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 参数。而普通路由处理函数中只包含 reqres

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

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>
这篇关于Express框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!