Kuelewa hatua zilizoshirikiwa katika usanidi wa mradi ni muhimu kabla ya kuangazia maelezo mahususi ya kila teknolojia ya kuongeza mteja. Mahitaji yangu   yalikuwa sawa kabisa: kutoka kwa chapisho la mwisho  Nitachukulia maoni ya msanidi programu wa nyuma  Hakuna hatua ya mwisho ya ujenzi: hakuna TypeScript, hakuna minification, nk.  Vitegemezi vyote vinasimamiwa kutoka kwa programu ya nyuma,   , Maven yaani  Ni muhimu kutambua kwamba teknolojia nitakayoelezea, isipokuwa Vaadin, inafuata njia sawa. Vaadin, na dhana yake ya kipekee, inasimama nje kati ya njia.  Mijari ya Wavuti  WebJars ni teknolojia   kushughulikia mahitaji haya kamili. iliyoundwa mnamo 2012 na James Ward  WebJars ni maktaba za wavuti za upande wa mteja (kwa mfano jQuery & Bootstrap) zilizowekwa kwenye faili za JAR (Javada la Java).  Dhibiti kwa uwazi na kwa urahisi utegemezi wa upande wa mteja katika programu za wavuti zinazotegemea JVM  Tumia zana za ujenzi zinazotegemea JVM (kwa mfano Maven, Gradle, sbt, ...) kupakua utegemezi wa upande wa mteja wako.  Jua ni utegemezi wa upande wa mteja unaotumia  Vitegemezi vya mpito hutatuliwa kiotomatiki na kupakiwa kwa hiari kupitia RequireJS  Imewekwa kwenye  Maven Central  CDN ya Umma, iliyotolewa kwa ukarimu na  JSDelivr  --  Tovuti ya Webjars  WebJar ni JAR ya kawaida iliyo na vipengee vya wavuti. Kuongeza WebJar kwa utegemezi wa mradi sio kitu maalum:   <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies>  Wajibu wa mfumo ni kufichua mali chini ya URL. Kwa mfano, Spring Boot hufanya hivyo katika darasa la   : 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); } }); }  Chaguo msingi ni  "/webjars/**"  Ndani ya JAR, unaweza kufikia vipengee kwa njia na jina husika. Muundo uliokubaliwa ni kuhifadhi mali ndani ya   . Huu hapa ni muundo wa   : 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  Ndani ya Spring Boot, unaweza kufikia toleo lisilopunguzwa na   . /webjars/alpinejs/3.14.1/dist/cdn.js  Wasanidi hutoa maktaba za upande wa mteja mara nyingi kabisa. Unapobadilisha toleo la utegemezi katika POM, lazima ubadilishe njia ya mbele, ikiwezekana katika maeneo mengi. Inachosha, haina thamani ya ziada, na una hatari ya kukosa mabadiliko.  Mradi wa WebJars Locator unalenga kuepuka masuala haya yote kwa kutoa njia isiyo na toleo,   ,   . Unaweza kufanikisha hili kwa kuongeza   JAR kwa utegemezi wako: yaani /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>  Nitatumia mbinu hii kwa kila teknolojia ya mbele. Pia nitaongeza maktaba   CSS ili kutoa kiolesura cha mtumiaji kinachoonekana vizuri zaidi. ya Bootstrap  Thymeleaf  Thymeleaf ni teknolojia ya utoaji wa upande wa seva.    ni injini ya kisasa ya kiolezo cha Java ya upande wa seva kwa mazingira ya wavuti na ya pekee. Thymeleaf  Lengo kuu la Thymeleaf ni kuleta violezo maridadi vya asili kwa utendakazi wako wa uundaji - HTML ambayo inaweza kuonyeshwa kwa usahihi katika vivinjari na pia kufanya kazi kama prototypes tuli, ikiruhusu ushirikiano thabiti katika timu za ukuzaji.  Ikiwa na moduli za Mfumo wa Spring, miunganisho mingi na zana unazopenda, na uwezo wa kuchomeka utendakazi wako mwenyewe, Thymeleaf ni bora kwa ukuzaji wa wavuti wa HTML5 JVM wa kisasa - ingawa kuna mengi zaidi inaweza kufanya.  --  Thymeleaf  Nilikuwa bado mshauri nilipopata habari kuhusu Thymeleaf. Wakati huo, Kurasa za Seva ya Java zilikuwa mwisho wa maisha yao. Nyuso za Seva ya Java zilikuwa zinajaribu kuzibadilisha; IMHO, wameshindwa.  Nilidhani Thymeleaf ilikuwa mbinu ya ajabu: inakuwezesha kuona matokeo katika mazingira tuli wakati wa kubuni na katika mazingira ya seva wakati wa maendeleo. Bora zaidi, unaweza kusonga kwa urahisi kati ya moja na nyingine kwa kutumia faili sawa. Sijawahi kuona uwezo huu ukitumika.  Walakini, Spring Boot inasaidia kikamilifu Thymeleaf. Icing kwenye keki: ya mwisho inapatikana kupitia nafasi ya majina ya HTML kwenye ukurasa. Iwapo hukununua katika JSF (mharibifu: Sikufanya hivyo), Thymeleaf ni lugha ya leo ya kuiga ya SSR.  Hapa kuna mfano wa onyesho kutoka kwa wavuti:   <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>  Hapa kuna Thymeleaf 101, ikiwa utahitaji kujijulisha na teknolojia.  Unapofungua faili ya HTML, kivinjari huonyesha thamani ya kawaida ndani ya vitambulisho,   ,   na   . Unapoitumia kwenye seva, Thymeleaf huingia na kutoa thamani iliyokokotwa kutoka   ,   na   . yaani Name Price th:text #{msgs.headers.name} #{msgs.headers.price}  Opereta wa   anauliza swali la maharagwe ya Spring ya jina moja lililopitishwa kwa modeli.   ni sawa na   . $ ${prod.name} model.getBean("prod").getName()"    huita kitendakazi. #    inaruhusu vitanzi. th:each  Ujumuishaji wa Thymeleaf na Mfumo wa Mwisho wa Mbele  Wengi, ikiwa sio wote, mifumo ya mbele hufanya kazi na mfano wa upande wa mteja. Tunahitaji kuunganisha kati ya mfano wa upande wa seva na ule wa upande wa mteja.  Nambari ya upande wa seva ninayotumia ni ifuatayo:   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 ) } } } }  Fafanua darasa la   . Todo  Ongeza orodha ya kumbukumbu kwenye kiwanda cha maharagwe. Katika programu ya kawaida, ungetumia   kusoma kutoka kwa hifadhidata. Repository  Toa kiolezo cha HTML.  Kiolezo ni   chenye sifa za Thymeleaf. src/main/resources/templates/index.html  Weka mfano katika muktadha wa ukurasa.  Thymeleaf inatoa   sifa kwenye   tagi. Inatoa data ya upande wa seva kama vigeu vya JavaScript. Nyaraka zinaielezea vizuri zaidi kuliko vile nilivyoweza: th:inline="javascript" <script>  Jambo la kwanza tunaloweza kufanya na uandishi wa maandishi ni kuandika thamani ya misemo kwenye hati zetu, kama:   <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>  Sintaksia   , inaelekeza Thymeleaf kutathmini usemi uliomo. Lakini kuna athari zaidi hapa: /*[[...]]*/  Kwa kuwa maoni ya javascript   , usemi wetu utapuuzwa wakati wa kuonyesha ukurasa kwa takwimu kwenye kivinjari. (/*...*/)  Msimbo baada ya usemi wa ndani (   ) utatekelezwa wakati wa kuonyesha ukurasa kwa takwimu. 'Sebastian'  Thymeleaf itatekeleza usemi huo na kuingiza matokeo, lakini pia itaondoa msimbo wote kwenye mstari baada ya usemi wa ndani yenyewe (sehemu inayotekelezwa inapoonyeshwa kwa takwimu).  -  Nyaraka za Thymeleaf  Ikiwa tutatumia yaliyo hapo juu kwa nambari yetu, tunaweza kupata sifa za mfano zilizopitishwa na Spring kama:   <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script>  Inapotolewa upande wa seva, matokeo yake ni:   <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>  Muhtasari  Katika chapisho hili, nimeelezea sehemu mbili ambazo nitakuwa nikitumia katika safu hii yote:  WebJars hudhibiti utegemezi wa upande wa mteja katika Maven POM yako.  Thymeleaf ni utaratibu wa kuiga unaounganishwa vizuri na Spring Boot.  Nambari kamili ya chanzo cha chapisho hili inaweza kupatikana kwenye GitHub.   https://github.com/ajavageek/compare-frontends?embedable=true   Nenda zaidi:   Mijari ya Wavuti   Maagizo ya WebJars kwa Boot ya Spring   Utangulizi wa WebJars   Ilichapishwa awali katika   mnamo Septemba 15, 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Sauti hii imetolewa katika lugha asilia ya hadithi!

Jinsi ya Kupeana Upande wa Seva Kwa Boot ya Spring

About Author

MAONI

HANG TAGS

MAKALA HII ILIWASILISHWA NDANI

Related Stories

Details of the Aerial Voyage.—Kennedy silenced

#ellenBrain Turns a Long Weekend Into: HackerNoon Swag Around the World

Speed up Swift compile time

Sweet Security Unveils First Unified Detection And Response Platform

Details of the Aerial Voyage.—Kennedy silenced

#ellenBrain Turns a Long Weekend Into: HackerNoon Swag Around the World

Speed up Swift compile time

Sweet Security Unveils First Unified Detection And Response Platform

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps