Понимание общих шагов в настройке проекта имеет решающее значение перед погружением в специфику каждой технологии клиентского дополнения. Мои требования   были довольно простыми: из последнего поста  Я приму точку зрения бэкэнд-разработчика.  Нет этапа сборки front-end: нет TypeScript, нет минификации и т. д.  Все зависимости управляются из внутреннего приложения,   Maven. т.е.  Важно отметить, что технология, которую я буду подробно описывать, за исключением Vaadin, следует схожему подходу. Vaadin, с его уникальной парадигмой, действительно выделяется среди подходов.  WebJars  WebJars — это технология   именно для удовлетворения этих требований. , разработанная в 2012 году Джеймсом Уордом  WebJars — это клиентские веб-библиотеки (например, jQuery и Bootstrap), упакованные в файлы JAR (Java Archive).  Явное и простое управление зависимостями на стороне клиента в веб-приложениях на базе JVM  Используйте инструменты сборки на основе JVM (например, Maven, Gradle, sbt, ...) для загрузки зависимостей на стороне клиента.  Знайте, какие клиентские зависимости вы используете  Транзитивные зависимости автоматически разрешаются и опционально загружаются через RequireJS  Развернуто на  Maven Central  Публичный CDN, любезно предоставленный  JSDelivr  --  Сайт Webjars  WebJar — это обычный JAR, содержащий веб-активы. Добавление WebJar к зависимостям проекта не представляет собой ничего особенного:   <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies>  Ответственность фреймворка заключается в том, чтобы выставлять активы по URL. Например, Spring Boot делает это в классе   : 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); } }); }  Значение по умолчанию:  "/webjars/**"  Внутри JAR вы можете получить доступ к ресурсам по их соответствующему пути и имени. Согласованная структура заключается в том, чтобы хранить ресурсы внутри   . Вот структура   : resources/webjars/<library>/<version> 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  В Spring Boot вы можете получить доступ к неминифицированной версии с помощью   . /webjars/alpinejs/3.14.1/dist/cdn.js  Разработчики выпускают клиентские библиотеки довольно часто. Когда вы меняете версию зависимости в POM, вы должны изменить путь к интерфейсу, возможно, в нескольких местах. Это скучно, не имеет никакой дополнительной ценности, и вы рискуете пропустить изменение.  Проект WebJars Locator направлен на то, чтобы избежать всех этих проблем, предоставляя путь без версии,   .   . Вы можете добиться этого, добавив JAR-файл   в свои зависимости: т. е /webjars/alpinejs/dist/cdn.js webjars-locator   <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>  Я буду использовать этот подход для каждой фронтенд-технологии. Я также добавлю библиотеку   CSS, чтобы обеспечить более привлекательный пользовательский интерфейс. Bootstrap  Тимелист  Thymeleaf — это технология рендеринга на стороне сервера.    — это современный серверный шаблонизатор Java для веб- и автономных сред. Thymeleaf  Основная цель Thymeleaf — привнести в ваш рабочий процесс разработки элегантные естественные шаблоны — HTML, которые могут корректно отображаться в браузерах, а также работать в качестве статических прототипов, обеспечивая более тесное сотрудничество в группах разработчиков.  Благодаря модулям для Spring Framework, множеству интеграций с вашими любимыми инструментами и возможности подключать собственные функции Thymeleaf идеально подходит для современной веб-разработки на базе HTML5 JVM, хотя он может делать гораздо больше.  --  Тимелист  Я был еще консультантом, когда впервые узнал о Thymeleaf. В то время Java Server Pages были на закате своей жизни. Java Server Faces пытались заменить их; IMHO, они потерпели неудачу.  Я думал, что Thymeleaf — это фантастический подход: он позволяет вам видеть результаты в статической среде во время проектирования и в серверной среде во время разработки. Еще лучше, вы можете легко перемещаться между ними, используя один и тот же файл. Я никогда не видел, чтобы эта возможность использовалась.  Однако Spring Boot полностью поддерживает Thymeleaf. Вишенка на торте: последний доступен через пространство имен HTML на странице. Если вы не купили JSF (спойлер: я не купил), Thymeleaf — это сегодняшний язык шаблонизации SSR.  Вот демонстрационный пример с сайта:   <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>  Вот Thymeleaf 101, на случай, если вам нужно ознакомиться с технологией.  Когда вы открываете файл HTML, браузер отображает обычное значение внутри тегов,   .   и   . Когда вы используете его на сервере, Thymeleaf включается и отображает значение, вычисленное из   ,   и   . т. е Name Price th:text #{msgs.headers.name} #{msgs.headers.price}  Оператор   запрашивает компонент Spring с тем же именем, которое было передано в модель.   эквивалентно   . $ ${prod.name} model.getBean("prod").getName()"  Символ   вызывает функцию. #    допускает циклы. th:each  Интеграция Thymeleaf с интерфейсной средой  Большинство, если не все, фронтенд-фреймворки работают с клиентской моделью. Нам нужно навести мост между серверной и клиентской моделями.  Я использую следующий код на стороне сервера:   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 ) } } } }  Определите класс   . Todo  Добавьте список в памяти к фабрике компонентов. В обычном приложении вы бы использовали   для чтения из базы данных. Repository  Создайте HTML-шаблон.  Шаблон —   с атрибутами Thymeleaf. src/main/resources/templates/index.html  Поместите модель в контекст страницы.  Thymeleaf предлагает атрибут   в теге   . Он отображает данные на стороне сервера как переменные JavaScript. Документация объясняет это гораздо лучше, чем я когда-либо мог: th:inline="javascript" <script>  Первое, что мы можем сделать с помощью встраивания скриптов, — это записать значения выражений в наши скрипты, например:   <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>  Синтаксис   предписывает Thymeleaf оценить содержащееся выражение. Но здесь есть и другие последствия: /*[[...]]*/  Поскольку наше выражение является комментарием JavaScript   , оно будет проигнорировано при статическом отображении страницы в браузере. (/*...*/)  Код после встроенного выражения (   ) будет выполнен при статическом отображении страницы. 'Sebastian'  Thymeleaf выполнит выражение и вставит результат, но также удалит весь код в строке после самого встроенного выражения (часть, которая выполняется при статическом отображении).  --  Документация Thymeleaf  Если мы применим вышеизложенное к нашему коду, мы можем получить атрибуты модели, переданные Spring, как:   <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script>  При рендеринге на стороне сервера результат будет следующим:   <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>  Краткое содержание  В этом посте я описал два компонента, которые буду использовать на протяжении всей оставшейся части этой серии:  WebJar-файлы управляют зависимостями на стороне клиента в вашем Maven POM.  Thymeleaf — это механизм шаблонов, который хорошо интегрируется со Spring Boot.  Полный исходный код этой статьи можно найти на GitHub.   https://github.com/ajavageek/compare-frontends?embedable=true   Идем дальше:   WebJars   Инструкции WebJars для Spring Boot   Введение в WebJars   Первоначально опубликовано в   15 сентября 2024 г. A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Этот звук создан на языке оригинала истории!

Как выполнить рендеринг на стороне сервера с помощью Spring Boot

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Создание криптопродуктов, ориентированных на пользователя: важность отзывов клиентов

Как улучшить ваш рабочий процесс в 10 раз: 17 основных приложений

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Нажмите, чтобы заработать: Telegram может привлечь следующие 10 миллиардов пользователей криптовалюты до Соланы

Создание криптопродуктов, ориентированных на пользователя: важность отзывов клиентов

Как улучшить ваш рабочий процесс в 10 раз: 17 основных приложений

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Нажмите, чтобы заработать: Telegram может привлечь следующие 10 миллиардов пользователей криптовалюты до Соланы

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps