文档 / 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。
Express、Fastify、Koa、Hono、NestJS、Polka 以及 Next.js 的 API 路由。
FastAPI、Flask 以及 Django / Django REST Framework。
net/http、gorilla、gin、echo、chi 和 fiber。
ASP.NET Core 控制器和 minimal APIs。
OpenAPI 3 和 Swagger 2 契约。
前端
| 类型 | 客户端 |
|---|---|
| 原生 | fetch 和 XMLHttpRequest |
| 库 | axios、ky、ofetch、jQuery |
| 框架 | Angular 的 HttpClient、SWR、React Query |
| 生成的 | 生成的 OpenAPI 客户端(TypeScript、JavaScript、Vue、Svelte) |
另请参阅 REST Client 与图表和导航。