文档 / IDE

全栈地图

把前端的每个 HTTP 调用与处理它的后端端点对应起来,让你在两者之间跳转,并在某个更改破坏契约时发出提醒。

全栈地图把前端的 HTTP 调用与后端的端点关联起来。这样你就能看到哪些调用没有对应端点、哪些端点没人使用,以及某个更改会破坏什么。

打开方式

工具 › 全栈地图。它默认没有快捷键;你也可以通过 Ctrl+Shift+A 找到它。

地图需要 前后两端。以下任一方式都可以:

  • 同一工作区中的两个根文件夹;
  • 在拆分视图中打开的两个项目;
  • 同时包含前端和后端的单个项目。

如果只有一端,Yuli 会请你把另一个项目添加到工作区,或在拆分视图中打开它。

筛选

筛选 显示
全部 整张地图。
有调用 前端正在使用的端点。
无端点的调用 前端发出、但后端没有对应端点的调用:很可能是错误。
未使用的端点 前端没有任何调用使用的端点。
契约 两端之间的契约。
全栈任务 同时涉及前端和后端的任务。

每条关联都有一个 置信度。你可以只保留 ≥ 70 % 或 ≥ 90 % 的关联。

在前端与后端之间跳转

起点 操作 到达
前端的一个 HTTP 调用 Ctrl+Clic 或 F12 处理该调用的后端方法
后端的一个端点 Ctrl+Clic 来自前端的用法

每个端点上方有一行 CodeLens,显示 “来自前端的 n 处用法”。在没有端点的调用上方,你会看到 “⚠ 后端中没有端点”。

契约

保存时,Yuli 会检查此次更改是否破坏了另一端的某个调用。如果是,你会在 问题 面板和一条提醒中看到它。

在 AI 更改中,智能体的更改会在你应用之前显示一张 “全栈契约:n 个前端调用将被破坏” 卡片。

检测哪些内容

后端

Spring MVC 和 WebFlux、JAX-RS 以及 Struts。

前端

类型 客户端
原生 fetch 和 XMLHttpRequest
库 axios、ky、ofetch、jQuery
框架 Angular 的 HttpClient、SWR、React Query
生成的 生成的 OpenAPI 客户端(TypeScript、JavaScript、Vue、Svelte)

另请参阅 REST Client 与图表和导航。