一、前后端分离
为什么选择前后端分离
独立部署
分清职责
技术栈独立
方便系统演进
提高效率
前后端分离的开发模式
按业务的展示逻辑，确认出待展示的内容
前后端根据内容，一起细化每个字段名，直至接口确认完毕
遇到对接第三方接口时，需要反复进行上一步
当各种开发完成时，在测试环境进行集成
将完整的业务功能交给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接口的后端服务
推荐阅读
参考资料
《前端架构：从入门到微前端》
