前后端分离架构图如何解释请求、服务和数据层

万兴图示EdrawMAX

发布时间：2026年08月20日

分享文章：

这张图把前端工程、静态资源、反向代理、请求鉴权、服务网关、注册中心、消息服务、微服务群和数据集群串成纵向结构。它适合讲解Web系统全链路，但部分组件名称体现特定时期的技术栈，需要按当前项目更新。

拆解前端工程和Nginx接入

前端区域列出 ElementUI、SPA、Vue.js、NPM、Webpack、ES6 和 Node.js，表达组件库、应用形态、框架、包管理、构建工具、语言标准和工程运行环境。正式图应按类别排列，避免读者误以为这些名称处于同一技术层级。

前端构建产物经Nginx集群对外提供访问，静态资源可由CDN服务分发。图中的多个向下箭头表示不同请求入口，但可进一步区分静态资源请求、页面路由和后端API请求，以便说明缓存与鉴权范围。

搭建同类全栈视图时，可先用架构图制作工具划分前端工程、接入代理、网关、微服务和数据层。每层只放承担该职责的组件，再通过箭头说明请求如何穿越层级。

• 前端工程：框架、组件、依赖、构建与运行环境。
• 接入层：Nginx、静态资源与CDN。
• 服务层：网关、负载容错和业务微服务。
• 支撑层：注册、消息及多种数据集群。

追踪鉴权、网关与服务调用

图中JWT请求授权位于Nginx与网关之间，提醒系统需要校验用户身份。实际设计要说明令牌由谁签发、在哪一层验证、过期和刷新如何处理，以及静态资源、公开接口和受保护接口是否采用不同策略。

网关集群由多个Zuul节点表示，向下连接 Ribbon 负载均衡与 Hystrix 失败容错，再到商品、订单、库存等微服务群。这些名称应视为示例；项目采用其他网关、负载均衡或韧性组件时，需要整体替换并重新核对调用关系。

微服务划分覆盖商品、订单、库存、搜索、购物车、用户中心、支付、短信和评论。划分是否合理要看数据责任和业务边界，而不是节点数量。若服务之间存在同步调用，应补充方向；异步事件则使用消息线型区分。

区分注册、消息和数据集群

注册中心集群使用多个 Eureka 节点，并与微服务之间标注注册和订阅服务。消息服务采用 RabbitMQ，图中表现发送与接收消息。控制关系、同步请求和异步消息应使用不同线型，避免箭头含义混乱。

数据层包含 MySQL 主备或主从、Redis 集群与 Sentinel，以及 Elasticsearch 集群。每个业务服务实际拥有或访问哪些数据，应在子图或数据责任表中说明；共享数据库过多会削弱服务边界。

当订单创建后需要通知库存、支付或短信时，可用时序图制作工具展开请求和事件的先后顺序。架构图保留静态依赖，时序图显示同步返回、消息发布、消费和异常补偿，更适合接口联调。

在万兴图示中修正技术栈

在万兴图示中编辑时，先更新框架与平台名称，删除项目未采用的旧组件。前端、接入、网关、服务和数据区域保持宽度一致，向下主链居中；注册中心和消息服务放在侧面，通过横向关系连接。

每条关键箭头旁可标注 HTTPS、REST、RPC、WebSocket 或消息主题。需要说明负载均衡和容错时，不要只写产品名，可添加“实例选择”“超时”“重试”“熔断”“降级”等职责标签。

接口数量较多时，可另配数据流图制作工具展示页面输入、API、业务处理和数据存储的流向。架构图与数据流图使用相同服务名和编号，读者才能从页面功能追踪到后端责任。

1. 步骤1：盘点前端工程、静态资源和API入口。
2. 步骤2：明确鉴权、代理、网关与服务发现职责。
3. 步骤3：区分同步调用、消息事件和数据访问线型。
4. 步骤4：更新技术栈并补充环境、安全与容灾说明。

用于接口联调与上线评审

接口联调时，可从一个真实页面操作开始，沿图确认域名、Nginx规则、鉴权、网关路由、目标服务、消息和数据库。任何无法落到具体节点的接口，都可能存在责任或文档缺口。

上线评审需要检查前端静态资源版本与后端接口是否兼容，网关是否配置限流和超时，服务注册是否健康，消息是否幂等，数据库和缓存是否准备回滚或恢复方案。

图中前后端虽然分层，但责任并非完全割裂。错误码、接口契约、鉴权方式、灰度发布和监控指标都需要共同约定。可在图旁列出跨团队接口清单和负责人，减少上线时相互等待。

一张有效的前后端分离架构图，应能回答页面资源从哪里加载、API经过哪些控制、业务由哪个服务处理、数据存到哪里，以及失败时如何返回。围绕这些问题补图，比堆叠技术名词更有价值。