paint-brush
Jak renderować po stronie serwera za pomocą Spring Bootprzez@nfrankel
225 odczyty

Jak renderować po stronie serwera za pomocą Spring Boot

przez Nicolas Fränkel8m2024/09/22
Read on Terminal Reader

Za długo; Czytać

WebJars to technologia zaprojektowana przez Jamesa Warda, aby sprostać tym wymaganiom. WebJars to biblioteki internetowe po stronie klienta (np. jQuery i Bootstrap) spakowane w pliki JAR (Java Archive). Vaadin, ze swoim unikalnym paradygmatem, naprawdę wyróżnia się wśród podejść.
featured image - Jak renderować po stronie serwera za pomocą Spring Boot
Nicolas Fränkel HackerNoon profile picture

Zrozumienie współdzielonych kroków w konfiguracji projektu jest kluczowe przed zagłębieniem się w szczegóły każdej technologii rozszerzającej klienta. Moje wymagania z ostatniego posta były dość proste:


  • Przyjmę punkt widzenia programisty back-end
  • Brak etapu kompilacji front-end: brak TypeScript, brak minifikacji itp.
  • Wszystkimi zależnościami zarządza się z poziomu aplikacji zaplecza, czyli Maven


Ważne jest, aby zauważyć, że technologia, którą będę szczegółowo opisywał, z wyjątkiem Vaadin, podąża podobnym podejściem. Vaadin, ze swoim unikalnym paradygmatem, naprawdę wyróżnia się wśród podejść.

Pliki WebJars

WebJars to technologia opracowana w 2012 roku przez Jamesa Warda, aby sprostać tym konkretnym wymaganiom.


Pliki WebJars to biblioteki internetowe po stronie klienta (np. jQuery i Bootstrap) spakowane w pliki JAR (Java Archive).


  • Jawne i łatwe zarządzanie zależnościami po stronie klienta w aplikacjach internetowych opartych na JVM
  • Użyj narzędzi do kompilacji opartych na JVM (np. Maven, Gradle, sbt, ...), aby pobrać zależności po stronie klienta
  • Dowiedz się, z jakich zależności po stronie klienta korzystasz
  • Zależności przechodnie są automatycznie rozwiązywane i opcjonalnie ładowane za pomocą RequireJS
  • Wdrożono w Maven Central
  • Publiczna sieć CDN, uprzejmie udostępniona przez JSDelivr


-- Witryna internetowa Webjars


WebJar to zwykły JAR zawierający zasoby sieciowe. Dodanie WebJar do zależności projektu nie jest niczym konkretnym:


 <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies>


Odpowiedzialnością frameworka jest udostępnianie zasobów pod adresem URL. Na przykład Spring Boot robi to w klasie WebMvcAutoConfiguration :


 public void addResourceHandlers(ResourceHandlerRegistry registry) { if (!this.resourceProperties.isAddMappings()) { logger.debug("Default resource handling disabled"); return; } addResourceHandler(registry, this.mvcProperties.getWebjarsPathPattern(), //1 "classpath:/META-INF/resources/webjars/"); addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> { registration.addResourceLocations(this.resourceProperties.getStaticLocations()); if (this.servletContext != null) { ServletContextResource resource = new ServletContextResource(this.servletContext, SERVLET_LOCATION); registration.addResourceLocations(resource); } }); }
  1. Domyślnie jest to "/webjars/**"


Wewnątrz pliku JAR możesz dotrzeć do zasobów za pomocą ich odpowiedniej ścieżki i nazwy. Uzgodniona struktura polega na przechowywaniu zasobów wewnątrz resources/webjars/<library>/<version> . Oto struktura pliku alpinejs-3.14.1.jar :


 META-INF |_ MANIFEST.MF |_ maven.org.webjars.npm.alpinejs |_ resources.webjars.alpinejs.3.14.1 |_ builds |_ dist |_ cdn.js |_ cdn.min.js |_ src |_ package.json


W Spring Boot dostęp do wersji niezminifikowanej można uzyskać za pomocą /webjars/alpinejs/3.14.1/dist/cdn.js .


Programiści dość często udostępniają biblioteki po stronie klienta. Gdy zmieniasz wersję zależności w POM, musisz zmienić ścieżkę front-end, prawdopodobnie w wielu miejscach. To nudne, nie ma żadnej wartości dodanej i ryzykujesz, że przegapisz zmianę.


Projekt WebJars Locator ma na celu uniknięcie wszystkich tych problemów poprzez zapewnienie ścieżki bez wersji, tj . /webjars/alpinejs/dist/cdn.js . Możesz to osiągnąć, dodając plik JAR webjars-locator do swoich zależności:


 <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.52</version> </dependency> </dependencies>


Będę stosować to podejście do każdej technologii front-end. Dodam również bibliotekę Bootstrap CSS, aby zapewnić lepiej wyglądający interfejs użytkownika.

Tymianek

Thymeleaf to technologia renderowania po stronie serwera.


Thymeleaf to nowoczesny, serwerowy silnik szablonów Java przeznaczony zarówno do środowisk internetowych, jak i autonomicznych.


Głównym celem Thymeleaf jest wprowadzenie eleganckich, naturalnych szablonów do Twojego procesu tworzenia oprogramowania — HTML-a, który można poprawnie wyświetlać w przeglądarkach i który może również pełnić funkcję statycznych prototypów, umożliwiając lepszą współpracę w zespołach programistycznych.


Dzięki modułom dla Spring Framework, licznym integracjom z ulubionymi narzędziami i możliwości podłączania własnych funkcji Thymeleaf idealnie nadaje się do współczesnego tworzenia stron internetowych w formacie HTML5 JVM — choć oferuje znacznie więcej.


-- Liść tymianku


Byłem jeszcze konsultantem, kiedy pierwszy raz dowiedziałem się o Thymeleaf. W tamtym czasie Java Server Pages były u schyłku swojego żywota. Java Server Faces próbowało je zastąpić; moim zdaniem, nie udało im się.


Uważałem, że Thymeleaf to fantastyczne podejście: pozwala zobaczyć wyniki w środowisku statycznym w czasie projektowania i w środowisku serwerowym w czasie tworzenia. Co więcej, można płynnie poruszać się między jednym a drugim, używając tego samego pliku. Nigdy nie widziałem, aby ta możliwość była używana.


Jednak Spring Boot w pełni obsługuje Thymeleaf. Wisienka na torcie: ten ostatni jest dostępny za pośrednictwem przestrzeni nazw HTML na stronie. Jeśli nie kupiłeś JSF (spoiler: ja nie), Thymeleaf jest dzisiejszym językiem szablonów SSR.


Oto przykład demonstracyjny ze strony internetowej:


 <table> <thead> <tr> <th th:text="#{msgs.headers.name}">Name</th> <th th:text="#{msgs.headers.price}">Price</th> </tr> </thead> <tbody> <tr th:each="prod: ${allProducts}"> <td th:text="${prod.name}">Oranges</td> <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td> </tr> </tbody> </table>


Oto podstawowe informacje na temat technologii Thymeleaf, na wypadek gdybyś chciał się z nią zapoznać.


  • Gdy otwierasz plik HTML, przeglądarka wyświetla zwykłą wartość wewnątrz tagów, tj . Name i Price . Gdy używasz go na serwerze, Thymeleaf włącza się i renderuje wartość obliczoną z th:text , #{msgs.headers.name} i #{msgs.headers.price} .
  • Operator $ wysyła zapytanie o obiekt Spring o tej samej nazwie, który został przekazany do modelu. ${prod.name} jest równoważne z model.getBean("prod").getName()" .
  • Znak # wywołuje funkcję.
  • th:each pozwala na pętle.

Integracja Thymeleaf z frameworkiem front-end

Większość, jeśli nie wszystkie, frameworki front-endowe działają z modelem po stronie klienta. Musimy połączyć model po stronie serwera i model po stronie klienta.


Kod po stronie serwera, którego używam, jest następujący:


 data class Todo(val id: Int, var label: String, var completed: Boolean = false) //1 fun config() = beans { bean { mutableListOf( //2 Todo(1, "Go to the groceries", false), Todo(2, "Walk the dog", false), Todo(3, "Take out the trash", false) ) } bean { router { GET("/") { ok().render( //3 "index", //4 mapOf("title" to "My Title", "todos" to ref<List<Todo>>()) //5 ) } } } }
  1. Zdefiniuj klasę Todo .


  2. Dodaj listę w pamięci do fabryki beanów. W zwykłej aplikacji użyłbyś Repository do odczytu z bazy danych.


  3. Wyrenderuj szablon HTML.


  4. Szablon to src/main/resources/templates/index.html i ma atrybuty Thymeleaf.


  5. Umieść model w kontekście strony.



Thymeleaf oferuje atrybut th:inline="javascript" w tagu <script> . Renderuje on dane po stronie serwera jako zmienne JavaScript. Dokumentacja wyjaśnia to o wiele lepiej, niż ja kiedykolwiek mógłbym:


Pierwszą rzeczą, jaką możemy zrobić dzięki wstawianiu skryptów, jest wpisywanie wartości wyrażeń do naszych skryptów, na przykład:


 <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>


Składnia /*[[...]]*/ instruuje Thymeleaf, aby ocenił zawarte wyrażenie. Ale jest tu więcej implikacji:


  • Ponieważ jest to komentarz JavaScript (/*...*/) , nasze wyrażenie zostanie zignorowane podczas statycznego wyświetlania strony w przeglądarce.

  • Kod następujący po wyrażeniu inline ( 'Sebastian' ) zostanie wykonany podczas statycznego wyświetlania strony.

  • Thymeleaf wykona wyrażenie i wstawi wynik, ale usunie również cały kod w wierszu następującym po samym wyrażeniu inline (część, która jest wykonywana, gdy jest wyświetlana statycznie).


-- Dokumentacja Thymeleaf


Jeżeli zastosujemy powyższe wskazówki do naszego kodu, możemy uzyskać atrybuty modelu przekazane przez Springa w następujący sposób:


 <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script>


Po wyrenderowaniu po stronie serwera wynik wygląda następująco:


 <script> /*<![CDATA[*/ window.title = "My title"; window.todos: [{"id":1,"label":"Go to the groceries","completed":false},{"id":2,"label":"Walk the dog","completed":false},{"id":3,"label":"Take out the trash","completed":false}] /*]]>*/ </script>

Streszczenie

W tym poście opisałem dwa komponenty, których będę używał przez resztę tej serii:


  • Pliki WebJars zarządzają zależnościami po stronie klienta w Maven POM.


  • Thymeleaf to mechanizm szablonów, który dobrze integruje się ze Spring Boot.


Pełny kod źródłowy tego wpisu można znaleźć w serwisie GitHub.


Przejdź dalej:


Oryginalnie opublikowano w A Java Geek 15 września 2024 r.