什么是 bff
BFF （Backend For Frontend）是一种服务端架构设计思想，指的是在前端和后端之间增加一个中间层，用于处理前端需要的数据，将多个后端服务聚合到一个接口中提供给前端调用，减少前端请求次数和复杂性。 bff 可以与任何类型的客户端配合使用，不仅限于 Web 或 APP 客户端。
npm 提供了一个非常优秀的 bff 框架叫做 express-gateway，它是一个开源的 API 网关，可以帮助开发者快速搭建一个稳定、高效的中间层服务。
安装 express-gateway
使用 npm 进行全局安装：
npm install -g express-gateway
安装成功后可以通过以下命令验证是否安装成功：
eg --version
创建一个 gateway
执行以下命令创建一个 gateway：
eg gateway create创建过程中可以选择不同的插件，这里演示如何配置一个不需要插件的基本 gateway。
创建成功后，新建一个文件夹 my-service，在里面创建一个 index.js 文件，作为后端接口的实现。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - --------------- -------- -- ---------------- -- -- - ------------------- -- ------- -- ----------------------- --展开代码
通过运行以下命令启动后端服务：
node index.js
这时候你可以通过访问 http://localhost:3000 来验证服务是否启动成功。
配置 gateway
在 gateway 目录下找到 config 目录，编辑 gateway.config.yml 文件，在 endpoints 部分添加一个新的接口，在 policies 部分添加两个新的策略。
-- -------------------- ---- ------- - --------- ------------- ----------- ----- --------- ----- ---- - -------- --------- - ---------- - ----展开代码
这里的策略包括基本认证和跨域策略。这样就可以在前端访问 gateway 的时候，通过基本认证，同时使请求支持跨域。
最后在 pipeline 中添加一个 policy，将 my-service 的请求代理到后端中：
-- -------------------- ---- ------- - -------- ---------- - ----- ------- ------------- - ---------- --------- - ------ - ------- ---------------- ---------- ------------- ----展开代码
运行 gateway
使用以下命令启动 gateway：
eg gateway start通过访问 http://localhost:8080 可以访问 gateway 的主页。
客户端调用
通过 gateway 发送数据请求和传递参数的方法与直接访问后端接口完全相同，可以使用 HTTP GET、POST、PUT、DELETE 方法。
在客户端发送请求时，只需要使用 gateway 的地址即可。对于上面的例子，请求地址就是 http://localhost:8080/。同时可以在请求中添加头部信息以及查询参数，这样就可以获得所需要的数据。
以下是一个简单的 ajax 示例代码：
$.ajax({ url: 'http://localhost:8080/', headers: {'Authorization': 'Basic YWRtaW46YWRtaW4='}, type: 'GET', success: function (data) { console.log(data) } })
这里使用 jQuery 的 ajax 方法，通过 get 方式获取数据，同时添加头部信息（Basic 认证）。
总结
使用 npm 包 bff 工具 express-gateway 可以帮助前端开发者快速搭建一个稳定、高效的中间层服务。通过本文内容，我们可以清晰地了解 bff 的设计思想和使用方法，并且给出了一个完整的 express-gateway 实现例子，对于学习和使用 bff 有极大的指导意义，希望能够帮助大家更好地开发前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/90406
