Jinsi ya Kupeana Upande wa Seva Kwa Boot ya Spring

Kuelewa hatua zilizoshirikiwa katika usanidi wa mradi ni muhimu kabla ya kuangazia maelezo mahususi ya kila teknolojia ya kuongeza mteja. Mahitaji yangu kutoka kwa chapisho la mwisho yalikuwa sawa kabisa:

• 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, yaani , Maven

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 iliyoundwa mnamo 2012 na James Ward kushughulikia mahitaji haya kamili.

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

1. Chaguo msingi ni "/webjars/**"

Ndani ya JAR, unaweza kufikia vipengee kwa njia na jina husika. Muundo uliokubaliwa ni kuhifadhi mali ndani ya resources/webjars/<library>/<version> . Huu hapa ni muundo wa 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, yaani , /webjars/alpinejs/dist/cdn.js . Unaweza kufanikisha hili kwa kuongeza webjars-locator JAR kwa utegemezi wako:

 <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 ya Bootstrap CSS ili kutoa kiolesura cha mtumiaji kinachoonekana vizuri zaidi.

Thymeleaf

Thymeleaf ni teknolojia ya utoaji wa upande wa seva.

Thymeleaf ni injini ya kisasa ya kiolezo cha Java ya upande wa seva kwa mazingira ya wavuti na ya pekee.

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, yaani , Name na Price . Unapoitumia kwenye seva, Thymeleaf huingia na kutoa thamani iliyokokotwa kutoka th:text , #{msgs.headers.name} na #{msgs.headers.price} .
• Opereta wa $ anauliza swali la maharagwe ya Spring ya jina moja lililopitishwa kwa modeli. ${prod.name} ni sawa na model.getBean("prod").getName()" .
• # huita kitendakazi.
• th:each inaruhusu vitanzi.

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

1. Fafanua darasa la Todo .

   
   

2. Ongeza orodha ya kumbukumbu kwenye kiwanda cha maharagwe. Katika programu ya kawaida, ungetumia Repository kusoma kutoka kwa hifadhidata.

   
   

3. Toa kiolezo cha HTML.

   
   

4. Kiolezo ni src/main/resources/templates/index.html chenye sifa za Thymeleaf.

   
   

5. Weka mfano katika muktadha wa ukurasa.

Thymeleaf inatoa th:inline="javascript" sifa kwenye <script> tagi. Inatoa data ya upande wa seva kama vigeu vya JavaScript. Nyaraka zinaielezea vizuri zaidi kuliko vile nilivyoweza:

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 ( 'Sebastian' ) utatekelezwa wakati wa kuonyesha ukurasa kwa takwimu.

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

Nenda zaidi:

• Mijari ya Wavuti
• Maagizo ya WebJars kwa Boot ya Spring
• Utangulizi wa WebJars

Ilichapishwa awali katika A Java Geek mnamo Septemba 15, 2024