❤️‍🔥BFF架构版的hello world

前言

我们知道,BFF层的核心作用是聚合来自多个微服务的数据。

那如何从0到1使用BFF架构实现一个最简单的功能?

本文会从一个最简单 的需求开始 ------ 通过BFF层获取BLOG服务的BLOG数据 ,实现BFF架构版本的hello world

然后再结合扩展 部分的内容,去了解如何对一个BFF架构的项目做扩展。

正文

第一步:确保日志微服务已经存在

假设我们已经开发好了日志微服务。

一般如何命名呢?

可以考虑blog-service

我们假设blog-service提供RESTful API,这样BFF层发个http请求就可以调用到了。

比如:

  • GET /api/blogs → 获取博客列表

  • GET /api/blogs/{id} → 获取单篇博客

  • POST /api/blogs → 创建博客

  • PUT /api/blogs/{id} → 更新博客

  • DELETE /api/blogs/{id} → 删除博客

第二步:BFF层的代码编写

在有了blog微服务的前提下,我们又该如何设计BFF层的接口和方法名呢?

我们同样会使用restful的风格来设计接口,就像下面这样:

  • GET /bff/blogs → 获取博客列表

  • GET /bff/blogs/{id} → 获取单篇博客

  • POST /bff/blogs → 创建博客

  • PUT /bff/blogs/{id} → 更新博客

  • DELETE /bff/blogs/{id} → 删除博客

这样就可以了。

当然为了项目的可扩展,我们可以提前准备好各种协议的请求的封装。如HTTP、gRPC、RabbitMQ之类的。

做完了这两步,基本就万事大吉了。前端调用bff层即可。

扩展

现在增加一些难度,我现在要对我的博客 增加评论功能

很明显,评论与博客是有关联的,每一个博客都会有其自身的评论内容。

这个时候该如何进行扩展呢?

要为博客增加评论功能,推荐这样扩展:

  1. 首先新增comment-service微服务,提供评论的CRUD接口,不对之前的任何服务造成任何影响!
  2. BFF层改造【依然不对之前的任何接口造成任何影响,只做新增】:
    • GET /bff/blogs/{id} → 【聚合】博客+对应评论
    • 新增评论相关路由: POST /bff/blogs/{id}/comments → 创建评论 DELETE /bff/comments/{id} → 删除评论
  3. BFF层先调blog-service获取博客,再调comment-service获取评论,合并后返回。【注意:BFF层存在的意义是方便前端的调用,所以此处我们将评论与博客聚合,而不是让前端发两个请求(一个请求博客,一个请求评论),这个思维惯性要改过来!】

这就是扩展的内容了。

最后

最后想重新强调一下BFF层存在的意义:为了前端而存在

相关推荐
草字17 小时前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
YDS82917 小时前
MyBatis-Plus精讲 —— 从快速入门到项目实战
java·后端·spring·mybatis·mybatis-plus
一位搞嵌入式的 genius17 小时前
Vue实例挂载:从原理到项目实践的全维度解析
前端·javascript·vue.js·前端框架
waeng_luo17 小时前
[鸿蒙2025领航者闯关] 表单验证与用户输入处理最佳实践
开发语言·前端·鸿蒙·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
0思必得017 小时前
[Web自动化] 开发者工具应用(Application)面板
运维·前端·python·自动化·web自动化·开发者工具
m0_7400437317 小时前
Vue Router中获取路由参数d两种方式:$route.query和$route.params
前端·javascript·vue.js
风止何安啊17 小时前
Event Loop 教你高效 “划水”:JS 单线程的“摸鱼”指南
前端·javascript·面试
@菜菜_达17 小时前
goldenLayout布局
前端·javascript
小飞侠在吗17 小时前
vue 生命周期
前端·javascript·vue.js
Lear17 小时前
【MySQL】索引失效10大场景详解:如何避免索引失效提升查询性能
后端