Belgeler / IDE

Fullstack harita

Front-end'deki her HTTP çağrısını onu karşılayan back-end endpoint'iyle eşleştirir, ikisi arasında gezinmenizi sağlar ve bir değişiklik sözleşmeyi bozduğunda uyarır.

Fullstack harita, front-end'inizdeki HTTP çağrılarını back-end'inizdeki endpoint'lerle ilişkilendirir. Böylece hangi çağrıların endpoint'i olmadığını, hangi endpoint'leri kimsenin kullanmadığını ve bir değişikliğin neyi bozacağını görürsünüz.

Açma

Araçlar › Fullstack harita. Varsayılan bir kısayolu yoktur; Ctrl+Shift+A ile de bulabilirsiniz.

Haritanın iki tarafa da ihtiyacı vardır. Şu yollardan herhangi biri işe yarar:

  • aynı çalışma alanında iki kök klasör;
  • bölünmüş görünümde açık iki proje;
  • hem front-end hem back-end içeren tek bir proje.

Yalnızca bir taraf varsa Yuli, diğer projeyi çalışma alanına eklemenizi veya bölünmüş görünümde açmanızı ister.

Filtreler

Filtre Gösterdiği
Tümü Haritanın tamamı.
Çağrısı olanlar Front-end'in kullandığı endpoint'ler.
Endpoint'i olmayan çağrılar Back-end'de endpoint'i olmayan front-end çağrıları: muhtemel hatalar.
Kullanılmayan endpoint'ler Hiçbir front-end çağrısının kullanmadığı endpoint'ler.
Sözleşme İki taraf arasındaki sözleşme.
Fullstack görevler Aynı anda front-end'e ve back-end'e dokunan görevler.

Her ilişkinin bir güven değeri vardır. Yalnızca ≥ %70 veya ≥ %90 olanları tutabilirsiniz.

Front-end ile back-end arasında gezinme

Nereden Ne yapın Nereye varırsınız
Front-end'deki bir HTTP çağrısı Ctrl+Tık veya F12 Onu karşılayan back-end metodu
Back-end'deki bir endpoint Ctrl+Tık Frontend'den kullanımlar

Her endpoint'in üzerinde bir satır (CodeLens) «frontend'den n kullanım» yazar. Endpoint'i olmayan bir çağrının üzerinde «⚠ backend'de endpoint yok» görürsünüz.

Sözleşme

Kaydettiğinizde Yuli, değişikliğin diğer taraftaki bir çağrıyı bozup bozmadığını denetler. Bozuyorsa bunu Sorunlar panelinde ve bir bildirimde görürsünüz.

YZ değişiklikleri içinde ajanın değişiklikleri, siz uygulamadan önce «Fullstack sözleşme: frontend'deki n çağrı bozulacak» kartını gösterir.

Neleri tespit eder

Back-end

Spring MVC ve WebFlux, JAX-RS ve Struts.

Front-end

Tür İstemciler
Yerleşik fetch ve XMLHttpRequest
Kütüphaneler axios, ky, ofetch, jQuery
Framework'ler Angular HttpClient, SWR, React Query
Üretilmiş Üretilmiş OpenAPI istemcileri (TypeScript, JavaScript, Vue, Svelte)

Ayrıca bkz. REST Client ve diyagramlar ve Gezinme.