【前端架构】前后端分离架构设计
一、前后端分离
-
为什么选择前后端分离
-
独立部署
-
分清职责
-
技术栈独立
-
方便系统演进
-
提高效率
-
-
前后端分离的开发模式
-
按业务的展示逻辑,确认出待展示的内容
-
前后端根据内容,一起细化每个字段名,直至接口确认完毕
-
遇到对接第三方接口时,需要反复进行上一步
-
当各种开发完成时,在测试环境进行集成
-
将完整的业务功能交给QA进行测试
-
-
前后端分离的API设计
-
RESTful API
-
标准的HTTP动词(又称HTTP请求方法):GET、PUT、POST、DELETE、PATCH等,每个动词的用法应该和它的行为一致
-
状态码:20x、40x、50x等常见的状态码,都应该正确地使用
-
资源路径:RESTful API中的URL用于代表资源,应该确保资源能遵循相关的规范,例如,/comments/1返回第一条评论,/comments/返回所有的评论
-
参数处理:如果存在大量的参数,那么我们就需要通过GET带查询字符串(Query String)的方式,或者POST带body的方式来进行传递
-
-
API与安全
-
Token管理
-
表单校验
-
权限管理
-
-
应对API变更
-
统一API接口服务
-
API数据模型
-
一致化处理方式
-
可选的模型适配层
-
-
二、API管理模式:API文档管理方式
-
传统方式
-
手写API文档
-
口头约定API
-
离线API文档
-
在线协作API文档
-
版本化API文档
-
代码即文档
-
-
互联网模式
-
HTTP服务即API文档
-
代码生成可交互的API文档,如Swagger
-
三、前后端并行开发:Mock Server
-
三种类型Mock Server的比较
-
普通Mock Server:HTTP服务器(如Node.js中的Mock Server框架json-server)
-
支持相关字段的查询、过滤
-
支持文件内容的全文搜索
-
支持正则表达式路由
-
-
DSL形式的Mock Server(如Java语言的Mock Server服务器Moco)
-
编程型Mock Server(如Swagger)
-
-
Mock Server的测试:契约测试
-
后端契约测试
-
运行Mock Server
-
发起对Mock Server服务的API请求,获取相应的返回数据
-
判断相应的数据,字段与API中的是否一致
-
-
前端契约测试
-
字段名一致性校验
-
使用interface接口进行API测试(TypeScript编写的应用)
-
检验逻辑字段
-
-
-
前后端并行开发总结
-
前后端约定契约API,并完成对应的Mock Server实现
-
前后端根据各自的逻辑实现对应的业务代码
-
前后端编写各种契约测试,并确定API的修改能够反映到持续集成
-
前后端进行API集成
-
在API修改时,修正对应的API修改
-
四、服务于前端的后端:BFF
-
BFF的API Gateway
-
应对多端应用
-
聚合后端微服务
-
代码第三方API
-
遗留系统的微服务化改造
-
-
前后端如何实现BFF
-
传统后端技术栈下的BFF
-
前端技术栈下的BFF
-
通过Node.js来接收前端发送过来的请求
-
根据请求的类型向对应的后台API服务发起请求
-
获得返回结果后进行处理,并向前端返回对应的结果
-
-
-
使用GraphQL作为BFF
-
GraphQL优势
-
按需获取
-
代码即文档
-
易于使用的API调试工具
-
强类型的API检查
-
易于版本化的API
-
-
GraphQL缺点
-
HTTP请求无法被缓存
-
错误码处理不友好
-
学习成本
-
实现复杂
-
-
基于GraphQL的BFF架构
-
GraphQL->API Gateway->后端服务
-
GraphQL->REST、RPC等接口的后端服务
-
GraphQL->GraphQL接口的后端服务
-
-
推荐阅读
参考资料
-
《前端架构:从入门到微前端》