Dokumentation / Die IDE

Fullstack-Karte

Verbindet jeden HTTP-Aufruf des Frontends mit dem Backend-Endpoint, der ihn bedient, navigiert zwischen beiden und warnt, wenn eine Änderung den Vertrag bricht.

Die Fullstack-Karte verknüpft die HTTP-Aufrufe deines Frontends mit den Endpoints deines Backends. So siehst du, welche Aufrufe keinen Endpoint haben, welche Endpoints niemand nutzt und was eine Änderung kaputt machen würde.

Öffnen

Werkzeuge › Fullstack-Karte. Sie hat standardmäßig kein Tastenkürzel; du findest sie auch mit Ctrl+Shift+A.

Die Karte braucht beide Seiten. Jede dieser Varianten funktioniert:

  • zwei Stammordner im selben Arbeitsbereich;
  • beide Projekte in der geteilten Ansicht geöffnet;
  • ein einziges Projekt, das Frontend und Backend enthält.

Gibt es nur eine Seite, bittet Yuli dich, das andere Projekt zum Arbeitsbereich hinzuzufügen oder in der geteilten Ansicht zu öffnen.

Filter

Filter Zeigt
Alle Die ganze Karte.
Mit Aufrufen Endpoints, die das Frontend nutzt.
Aufrufe ohne Endpoint Aufrufe des Frontends ohne Endpoint im Backend: wahrscheinlich Fehler.
Ungenutzte Endpoints Endpoints, die kein Aufruf des Frontends nutzt.
Vertrag Den Vertrag zwischen beiden Seiten.
Fullstack-Aufgaben Aufgaben, die Frontend und Backend gleichzeitig betreffen.

Jede Verknüpfung hat eine Konfidenz. Du kannst nur die mit ≥ 70 % oder ≥ 90 % behalten.

Zwischen Frontend und Backend navigieren

Von Drücke Du landest bei
Einem HTTP-Aufruf des Frontends Ctrl+Klick oder F12 Der Backend-Methode, die ihn bedient
Einem Endpoint des Backends Ctrl+Klick Verwendungen im Frontend

Über jedem Endpoint zeigt eine Zeile (CodeLens) „n Verwendungen im Frontend“. Über einem Aufruf ohne Endpoint siehst du „⚠ kein Endpoint im Backend“.

Der Vertrag

Beim Speichern prüft Yuli, ob die Änderung einen Aufruf auf der anderen Seite bricht. Ist das der Fall, siehst du es im Panel Probleme und in einem Hinweis.

In KI-Änderungen zeigen die Änderungen des Agenten eine Karte „Fullstack-Vertrag: n Aufrufe des Frontends würden brechen“, bevor du sie anwendest.

Was erkannt wird

Backend

Spring MVC und WebFlux, JAX-RS und Struts.

Frontend

Typ Clients
Nativ fetch und XMLHttpRequest
Bibliotheken axios, ky, ofetch, jQuery
Frameworks HttpClient von Angular, SWR, React Query
Generiert Generierte OpenAPI-Clients (TypeScript, JavaScript, Vue, Svelte)

Siehe auch REST Client und Diagramme und Navigation.