Fahamka tillaabooyinka la wadaago ee habaynta mashruuca ayaa muhiim ah ka hor inta aanad u daadagin waxyaabaha gaarka ah ee tignoolajiyada kor-u-qaadista macmiil kasta. Shuruudahaygii   waxay ahaayeen kuwo toos ah: qoraalkii u dambeeyay  Waxaan u qaadan doonaa aragtida horumariyaha dhabarka  Ma jiro tallaabo dhisme dhamaadka-hore: maya TypeScript, wax yareyn, iwm.  Dhammaan ku-tiirsanaanta waxaa laga maamulaa app-ka dhabarka,   , Maven ie  Waxaa muhiim ah in la ogaado in tignoolajiyada aan faahfaahin doono, marka laga reebo Vaadin, ay raacdo hab la mid ah. Vaadin, oo leh jaantuskiisa gaarka ah, ayaa runtii ka dhex muuqda hababka.  WebJars  WebJars waa tignoolajiyada   si loo maareeyo shuruudahan saxda ah. loogu talagalay 2012 ee James Ward  WebJars waa maktabado shabakadeed oo dhinaca macmiilka ah (tusaale jQuery & Bootstrap) oo lagu baakadeeyay faylasha JAR (Java Archive)  Si cad oo fudud u maareeyo ku tiirsanaanta dhinaca macmiilka ee barnaamijyada shabakada JVM ku salaysan  Adeegso qalabka dhismaha ee ku salaysan JVM (tusaale Maven, Gradle, sbt, ...) si aad u soo dejiso ku tiirsanaanta dhinaca macmiilka  Ogow ku tiirsanaanta dhinaca macmiilka ee aad isticmaalayso  Ku-tiirsanaanta ku-meel-gaadhka ah si toos ah ayaa loo xalliyaa oo si ikhtiyaari ah ayaa loogu shubaa RequireJS  Waxaa la geeyay  Maven Central  CDN dadweynaha, oo ay si deeqsinimo leh u bixisay  JSDelivr  --  Webjars  WebJar waa JAR joogta ah oo ka kooban hantida mareegaha. Ku darista WebJar ku tiirsanaanta mashruuca ma aha wax gaar ah:   <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies>  Mas'uuliyadda qaabdhismeedku waa inay soo bandhigto hantida hoosteeda URL. Tusaale ahaan, Bootka Guga wuxuu ku sameeyaa fasalka   : 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); } }); }  Sida caadiga ah waa  "/webjars/**"  Gudaha JAR-da, waxaad ku gaadhi kartaa hantida dariiqadooda iyo magacyadooda. Qaab dhismeedka lagu heshiiyey waa in lagu kaydiyo hantida gudaha   . Waa kan qaabka   : 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  Gudahood Bootka Guga, waxaad geli kartaa nooca aan la-yarayn ee   . /webjars/alpinejs/3.14.1/dist/cdn.js  Horumariyayaashu waxay sii daayaan maktabadaha dhinaca macmiilka ah marar badan. Markaad bedesho nooca ku-tiirsanaanta ee POM, waa inaad bedeshaa dariiqa-dhamaadka hore, suurtogalnimada meelo badan. Waa caajis, wax qiimo ah oo dheeri ah ma leh, waxaadna halis u tahay inaad lumiso isbeddel.  Mashruuca Locator WebJars wuxuu ujeedkiisu yahay inuu iska ilaaliyo dhammaan arrimahan isagoo siinaya waddo aan lahayn nooc,   ,   . Tan waxaad ku gaari kartaa adigoo ku daraya   JAR kuwa ku tiirsanaantaada: ie /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>  Habkan ayaan u isticmaali doonaa tignoolajiyad kasta oo xagga hore ah. Waxa kale oo aan ku dari doonaa maktabada   CSS si aan u bixiyo is-dhexgal isticmaale oo si fiican u muuqda. Bootstrap  Thyleaf  Thyleaf waa tignoolajiyada wax u gudbinta ee dhinaca server-ka ah.    waa matoorka naqshada Java-dhinac-server-ka casriga ah ee labada shabakad iyo deegaan gooni-gooni ah. Thymeleaf  Hadafka ugu weyn ee Thymeleaf waa inuu keeno qaabab dabiici ah oo qurux badan socodkaaga shaqo ee horumarinta - HTML kaas oo si sax ah loogu soo bandhigi karo daalacashada oo sidoo kale u shaqeeya sidii tusaalayaal taagan, taasoo u oggolaaneysa wadashaqeyn xoog leh kooxaha horumarinta.  Iyada oo leh qaybo loogu talagalay Qaab-dhismeedka Guga, martigelinta isdhexgalka oo leh aaladaha aad ugu jeceshahay, iyo awoodda aad ku xiri karto shaqadaada, Thymeleaf waxay ku habboon tahay horumarinta shabakadda HTML5 JVM-ka casriga ah - in kasta oo ay jiraan wax badan oo ay sameyn karto.  --  Thyleaf  Wali waxaan ahaa lataliye markii ugu horeysay ee aan bartay Thyleaf. Waqtigaas, Bogagga Server-ka Java waxay ahaayeen dhammaadka noloshooda. Wejiyada Server-ka Java ayaa isku dayayay inay beddelaan; IMHO, way fashilmeen.  Waxaan u maleynayay in Thymeleaf ay tahay hab fantastik ah: waxay kuu ogolaaneysaa inaad aragto natiijooyinka jawiga taagan waqtiga naqshadeynta iyo deegaanka serverka waqtiga horumarinta. Xitaa ka sii fiican, waxaad si aan kala go 'lahayn u dhex mari kartaa mid iyo kan kale adigoo isticmaalaya isla fayl isku mid ah. Weligay ma arag awooddan oo la isticmaalay.  Si kastaba ha ahaatee, Spring Boot waxay si buuxda u taageertaa Thyleaf. Dufanka keega: kan dambe waxaa laga heli karaa meel magac HTML ah oo bogga ah. Haddi aanad wax ka iibsan JSF (qassi: maan samayn), Thyleaf waa maanta-tag-to SSR luqadda ku-habboon.  Waa kan muunada demo ee shabakada:   <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>  Halkan waxaa ah Thyleaf 101, haddii aad u baahan tahay inaad naftaada barato tignoolajiyada.  Markaad furto faylka HTML, browserku wuxuu soo bandhigayaa qiimaha caadiga ah ee gudaha tags,   ,   iyo   . Markaad ku dhex isticmaashid server-ka, Thymeleaf ayaa soo galaysa oo ka bixinaysa qiimaha laga soo xisaabiyay   ,   iyo   . ie Name Price th:text #{msgs.headers.name} #{msgs.headers.price}  Hawlwadeenka   ayaa waydiinaya digirta guga ee isla magaca ah ee loo gudbiyay moodeelka.   waxay u dhigantaa   . $ ${prod.name} model.getBean("prod").getName()"  The   waxay u yeertaa shaqo. #    wuxuu u ogolaanayaa siddo. th:each  Is-dhexgalka Thyleaf oo leh Qaab-dhismeedka Dhammaadka Hore  Inta badan, haddaysan ahayn dhammaan, qaab-dhismeedka-dhamaadka hore waxay la shaqeeyaan moodal-dhinaca macmiilka. Waxaan u baahannahay inaan isku xirno inta u dhexeysa qaabka server-ka iyo midka macmiilka-dhinaca.  Koodhka dhinaca server-ka ah ee aan isticmaalayaa waa kan soo socda:   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 ) } } } }  Qeex fasalka  Todo  Ku dar liiska xusuusta ee warshadda digirta. App-ka caadiga ah, waxa aad isticmaali lahayd   si aad wax uga akhrido kaydka Repository  Samee qaab HTML ah.  Qaabku waa   oo leh sifooyinka Thyleaf. src/main/resources/templates/index.html  Ku dheji qaabka bogga macnaha guud.  Thymeleaf waxa ay bixisaa   sifada   sumadda. Waxay ka dhigtaa xogta dhinaca server-ka sida doorsoomayaasha JavaScript. Dukumeentigu wuxuu si aad ah ugu sharaxay si ka fiican sidii aan waligay awooday: th:inline="javascript" <script>  Waxa ugu horreeya ee aan ku samayn karno xarfaha xarfaha waa in aan ku qorno qiimaha tibaaxaha qoraalladayada, sida:   <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>  Ereyga   syntax, wuxuu farayaa Thyleaf inay qiimayso odhaahda ku jirta. Laakiin waxaa jira saameyno badan halkan: /*[[...]]*/  Inaad noqoto faallo javascript ah   , odhaahdeenna waa la iska indho-tiraa marka bogga si joogto ah loogu soo bandhigo browserka. (/*...*/)  Koodhka ka dambeeya muujinta khadka (   ) ayaa la fulin doonaa marka bogga si joogto ah loo soo bandhigo. 'Sebastian'  Thymeleaf waxay fulin doontaa tibaaxaha oo geli doonta natiijada, laakiin waxay sidoo kale ka saari doontaa dhammaan koodka xariiqa ka dib muujinta gudaha lafteeda (qaybta la fuliyo marka si muuqata loo soo bandhigo).  --  Dukumentiyada Thyleaf  Haddii aan ku dabaqno kuwa kore koodkayaga, waxaan heli karnaa sifada moodeelka ee uu soo maray Guga sida:   <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script>  Marka loo sameeyo dhinaca server-ka, natiijadu waa:   <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>  Soo koobid  Maqaalkan, waxaan ku qeexay laba qaybood oo aan isticmaali doono inta ka hartay taxanahan:  WebJars waxay maamulaan ku tiirsanaanta dhinaca macmiilka ee Maven POM kaaga.  Thyleaf waa qaab-samaysan qaabaysan oo si fiican ula mid ah Bootka Spring.  Koodhka isha dhamaystiran ee boostadan waxaa laga heli karaa GitHub.   https://github.com/ajavageek/compare-frontends?embedable=true   Sii wad:   WebJars   Tilmaamaha WebJars ee Boot Guga   Hordhac WebJars   Asal ahaan waxaa lagu daabacay   Sebtember 15-keedii, 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Codkan waxa lagu soo saaray afkii asalka ahaa ee sheekada!

Aad u dheer; In la akhriyo

Make resilience your competitive advantage

Sida Loo Sameeyo-Side Server-ka Boot Guga

About Author

FAALLO

HANG TAGS

MAQAALKAN AYAA LAGU SOO BANDHIGAY

Related Stories

Bitcoin NFTs are Getting Easier Every Day: Introducing Ordinals

Startups Winners, Turn Your Win into a Story Worth Sharing

Creating NFTs in Arbitrum

Quantum Mechanics for Bitcoiners

Bitcoin NFTs are Getting Easier Every Day: Introducing Ordinals

Startups Winners, Turn Your Win into a Story Worth Sharing

Creating NFTs in Arbitrum

Quantum Mechanics for Bitcoiners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps