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,   , Maven izany hoe  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   mba hiatrehana ireo fepetra takiana ireo. novolavolain'i James Ward tamin'ny 2012  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   . Ity ny firafitry ny   : 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  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,   ,   . Azonao atao ny manatratra izany amin'ny fampidirana ny   JAR amin'ny fiankinanao: izany hoe /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>  Hampiasa ity fomba fiasa ity aho ho an'ny teknolojia farany rehetra. Hanampy ny tranomboky   CSS ihany koa aho mba hanomezana interface tsara kokoa. Bootstrap  Thymeleaf  Thymeleaf dia teknolojia famandrihana amin'ny lafiny mpizara.    dia maotera maodely Java amin'ny lafiny mpizara maoderina ho an'ny tranokala sy tontolo manokana. Thymeleaf  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,   ,   sy   . Rehefa mampiasa azy ao amin'ny mpizara ianao dia miditra ny Thymeleaf ary mamadika ny sanda kajy avy amin'ny   ,   ary   . izany hoe Name Price th:text #{msgs.headers.name} #{msgs.headers.price}  Ny fanontaniana mpampiasa   momba ny tsaramaso Lohataona mitovy anarana dia alefa amin'ny maodely.   dia mitovy amin'ny   . $ ${prod.name} model.getBean("prod").getName()"  Ny   dia miantso asa. #    dia mamela ny tadivavarana. th:each  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   ianao hamaky ny angon-drakitra. Repository  Manomeza môdely HTML.  Ny môdely dia   misy toetra Thymeleaf. src/main/resources/templates/index.html  Apetraho eo amin'ny tontolon'ny pejy ny modely.  Ny Thymeleaf dia manolotra toetra   amin'ny marika   . 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: th:inline="javascript" <script>  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 (   ) dia hotanterahina rehefa mampiseho ny pejy amin'ny fomba static. 'Sebastian'  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>  FAMINTINANA  Amin'ity lahatsoratra ity dia namaritra singa roa izay hampiasaiko mandritra ny ambiny amin'ity andiany ity aho:  WebJars dia mitantana ny fiankinan'ny mpanjifa amin'ny Maven POM-nao.  Thymeleaf dia mekanika fanaovana template izay mitambatra tsara amin'ny Spring Boot.  Ny kaody loharano feno ho an'ity lahatsoratra ity dia hita ao amin'ny GitHub.   https://github.com/ajavageek/compare-frontends?embedable=true   Mandehana lavitra:   WebJars   Torolàlana WebJars ho an'ny Lohataona Boot   Fampidirana amin'ny WebJars   Navoaka voalohany tao amin'ny   tamin'ny 15 septambra 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Ity horonam-peo ity dia novokarina tamin'ny fiteny niandohan'ny tantara!

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

About Author

COMMENTS

HANG TAGS

ITY ARTICLE ITY NO NARESAKA TAMIN'NY

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps