323 HENOINA

Ahoana ny fomba famandrihana amin'ny lafiny server miaraka amin'ny Boot Spring

ny Nicolas Fränkel8m2024/09/22

Lava loatra; Mamaky

WebJars dia teknolojia novolavolain'i James Ward hiatrehana ireo fepetra takiana ireo. WebJars dia tranomboky tranonkala amin'ny lafiny mpanjifa (oh: jQuery & Bootstrap) voafono ao anaty rakitra JAR (Java Archive). Vaadin, miaraka amin'ny paradigma tsy manam-paharoa, dia tena miavaka amin'ireo fomba fiasa.

featured image - Ahoana ny fomba famandrihana amin'ny lafiny server miaraka amin'ny Boot Spring

Ny fahatakarana ny dingana ifampizarana amin'ny fananganana tetikasa dia zava-dehibe alohan'ny hidirana amin'ny antsipiriany momba ny teknolojian'ny mpanjifa tsirairay. Tsotra ny zavatra takiko tamin'ny lahatsoratra farany :

Horaisiko ny fomba fijerin'ny developer backend
Tsy misy dingana fananganana eo anoloana: tsy misy TypeScript, tsy misy minification, sns.
Ny fiankinana rehetra dia tantanina avy amin'ny app backend, izany hoe , Maven

Zava-dehibe ny manamarika fa ny teknolojia holazaiko amin'ny antsipiriany, afa-tsy Vaadin, dia manaraka fomba mitovy. Vaadin, miaraka amin'ny paradigma tsy manam-paharoa, dia tena miavaka amin'ny fomba fiasa.

WebJars

WebJars dia teknolojia novolavolain'i James Ward tamin'ny 2012 mba hiatrehana ireo fepetra takiana ireo.

WebJars dia tranomboky tranonkala amin'ny lafiny mpanjifa (ohatra jQuery & Bootstrap) ao anaty rakitra JAR (Java Archive).

Mitantana mazava sy mora ny fiankinan'ny mpanjifa amin'ny rindranasa tranonkala mifototra amin'ny JVM
Mampiasà fitaovana fananganana miorina amin'ny JVM (oh: Maven, Gradle, sbt, ...) mba hisintonana ny fiankinan-doha amin'ny mpanjifanao
Fantaro hoe miankina amin'ny lafiny mpanjifa ampiasainao
Ny fiankinan-doha transitive dia voavaha ho azy ary azo alaina amin'ny alàlan'ny RequireJS
Napetraka tao amin'ny Maven Central
Public CDN, nomen'i JSDelivr

-- Tranonkala Webjars

Ny WebJar dia JAR mahazatra misy fananana tranonkala. Ny fampidirana WebJar amin'ny fiankinan'ny tetikasa dia tsy voafaritra manokana:

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

Ny andraikitry ny rafitra dia ny mampibaribary ireo fananana eo ambanin'ny URL. Ohatra, ny Spring Boot dia manao izany ao amin'ny kilasy 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); } }); }

Ny default dia "/webjars/**"

Ao anatin'ny JAR, azonao atao ny manatratra ny fananana amin'ny alàlan'ny lalana sy ny anarany. Ny rafitra nifanarahana dia ny fitahirizana ny fananana ao anatin'ny resources/webjars/<library>/<version> . Ity ny firafitry ny 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

Ao anatin'ny Lohataona Boot, azonao atao ny miditra amin'ny dikan-teny tsy nohavaozina miaraka amin'ny /webjars/alpinejs/3.14.1/dist/cdn.js .

Matetika ny mpamorona dia mamoaka tranomboky amin'ny lafiny mpanjifa. Rehefa manova kinova fiankinan-doha ao amin'ny POM ianao, dia tsy maintsy ovainao ny lalana eo anoloana, mety amin'ny toerana maro. Mankaleo izany, tsy misy vidiny fanampiny, ary mety tsy hisy fiovana ianao.

Ny tetikasa WebJars Locator dia mikendry ny hisorohana ireo olana rehetra ireo amin'ny fanomezana lalana tsy misy dikan-teny, izany hoe , /webjars/alpinejs/dist/cdn.js . Azonao atao ny manatratra izany amin'ny fampidirana ny webjars-locator JAR amin'ny fiankinanao:

 <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>

Hampiasa ity fomba fiasa ity aho ho an'ny teknolojia farany rehetra. Hanampy ny tranomboky Bootstrap CSS ihany koa aho mba hanomezana interface tsara kokoa.

Thymeleaf

Thymeleaf dia teknolojia famandrihana amin'ny lafiny mpizara.

Thymeleaf dia maotera maodely Java amin'ny lafiny mpizara maoderina ho an'ny tranokala sy tontolo manokana.

Ny tanjon'i Thymeleaf dia ny hitondra lasitra voajanahary kanto amin'ny rindranasan'ny fampivoaranao — HTML izay azo aseho tsara amin'ny mpitety tranonkala ary miasa toy ny prototype static ihany koa, ahafahan'ny fiaraha-miasa matanjaka kokoa amin'ny ekipa fampandrosoana.

Miaraka amin'ny maodely ho an'ny Lohataona Framework, maro ny fampidirana miaraka amin'ireo fitaovana tianao indrindra, ary ny fahafahana mampifandray ny fampiasanao manokana, Thymeleaf dia mety tsara amin'ny fampivoarana tranonkala HTML5 JVM amin'izao fotoana izao — na dia betsaka aza ny zavatra azony atao.

--Tymeleaf

Mbola mpanolo-tsaina aho tamin'ny fotoana nahalalako voalohany ny Thymeleaf. Tamin'izany fotoana izany, ny Java Server Pages dia teo amin'ny fiafaran'ny fiainany. Niezaka nisolo azy ireo ny Java Server Faces; IMHO, tsy nahomby izy ireo.

Noheveriko fa fomba iray mahafinaritra ny Thymeleaf: mamela anao hahita ny vokatra amin'ny tontolo static amin'ny fotoana famolavolana sy amin'ny tontolo mpizara amin'ny fotoana fampandrosoana. Na tsara kokoa aza, afaka mihetsika tsy misy dikany ianao eo anelanelan'ny iray sy ny iray amin'ny fampiasana rakitra iray ihany. Mbola tsy nahita an'io fahaiza-manao io aho.

Na izany aza, ny Spring Boot dia manohana tanteraka an'i Thymeleaf. Ny gilasy amin'ny mofomamy: ity farany dia azo alaina amin'ny alàlan'ny anaran'ny HTML amin'ny pejy. Raha tsy nividy tao amin'ny JSF ianao (mpanimba: tsy nanao izany aho), Thymeleaf no tenim-pamokarana SSR ankehitriny.

Ity ny santionan'ny demo avy amin'ny tranokala:

 <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>

Ity misy Thymeleaf 101, raha toa ka mila mahafantatra ny teknolojia ianao.

Rehefa manokatra ny rakitra HTML ianao, ny navigateur dia mampiseho ny sanda mahazatra ao anatin'ny marika, izany hoe , Name sy Price . Rehefa mampiasa azy ao amin'ny mpizara ianao dia miditra ny Thymeleaf ary mamadika ny sanda kajy avy amin'ny th:text , #{msgs.headers.name} ary #{msgs.headers.price} .
Ny fanontaniana mpampiasa $ momba ny tsaramaso Lohataona mitovy anarana dia alefa amin'ny maodely. ${prod.name} dia mitovy amin'ny model.getBean("prod").getName()" .
Ny # dia miantso asa.
th:each dia mamela ny tadivavarana.

Ny Thymeleaf Integration Miaraka amin'ny Framework Front-end

Ny ankamaroany, raha tsy izy rehetra, ny rafitra eo anoloana dia miasa miaraka amin'ny modely amin'ny lafiny mpanjifa. Mila tetezana eo amin'ny modely amin'ny lafiny server sy ny lafiny mpanjifa isika.

Ny code-side-server ampiasaiko dia izao manaraka izao:

 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 ) } } } }

Farito ny kilasy Todo .
Ampio lisitra ao anaty fitadidiana ny orinasa tsaramaso. Amin'ny fampiharana mahazatra dia mampiasa Repository ianao hamaky ny angon-drakitra.
Manomeza môdely HTML.
Ny môdely dia src/main/resources/templates/index.html misy toetra Thymeleaf.
Apetraho eo amin'ny tontolon'ny pejy ny modely.

Ny Thymeleaf dia manolotra toetra th:inline="javascript" amin'ny marika <script> . Izy io dia manome ny angon-drakitra amin'ny lafiny server ho variable JavaScript. Ny antontan-taratasy dia manazava izany tsara lavitra noho izay azoko natao:

Ny zavatra voalohany azontsika atao amin'ny script inlining dia ny fanoratana ny lanjan'ny fanehoan-kevitra ao amin'ny scripty, toy ny:
 <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>
Ny /*[[...]]*/ syntax, dia manome toromarika an'i Thymeleaf mba hanombantombana ny teny voarakitra. Saingy misy fiantraikany bebe kokoa eto:

Amin'ny maha fanehoan-kevitra javascript (/*...*/) , dia tsy hiraharaha ny fitenintsika rehefa mampiseho ny pejy amin'ny navigateur.
Ny kaody aorian'ny fitenenana an-tsoratra ( 'Sebastian' ) dia hotanterahina rehefa mampiseho ny pejy amin'ny fomba static.
Hanatanteraka ny fitenenana i Thymeleaf ary hampiditra ny valiny, fa hanaisotra ny kaody rehetra ao amin'ny andalana ihany koa izy aorian'ny fanehoana an-tsoratra (ny ampahany izay tanterahina rehefa aseho amin'ny statika).

-- Taratasy Thymeleaf

Raha ampiharintsika amin'ny kaodinay ireo voalaza etsy ambony ireo, dia afaka mahazo ny toetra modely nandalo tamin'ny Lohataona toy ny:

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

Rehefa adika amin'ny lafiny server, ny vokatra dia:

 <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>