Sida Loo Sameeyo-Side Server-ka Boot Guga

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 qoraalkii u dambeeyay waxay ahaayeen kuwo toos ah:

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

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 loogu talagalay 2012 ee James Ward si loo maareeyo shuruudahan saxda ah.

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

1. 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 resources/webjars/<library>/<version> . Waa kan qaabka 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, ie , /webjars/alpinejs/dist/cdn.js . Tan waxaad ku gaari kartaa adigoo ku daraya webjars-locator JAR kuwa ku tiirsanaantaada:

 <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 Bootstrap CSS si aan u bixiyo is-dhexgal isticmaale oo si fiican u muuqda.

Thyleaf

Thyleaf waa tignoolajiyada wax u gudbinta ee dhinaca server-ka ah.

Thymeleaf waa matoorka naqshada Java-dhinac-server-ka casriga ah ee labada shabakad iyo deegaan gooni-gooni ah.

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, ie , Name iyo Price . Markaad ku dhex isticmaashid server-ka, Thymeleaf ayaa soo galaysa oo ka bixinaysa qiimaha laga soo xisaabiyay th:text , #{msgs.headers.name} iyo #{msgs.headers.price} .
• Hawlwadeenka $ ayaa waydiinaya digirta guga ee isla magaca ah ee loo gudbiyay moodeelka. ${prod.name} waxay u dhigantaa model.getBean("prod").getName()" .
• The # waxay u yeertaa shaqo.
• th:each wuxuu u ogolaanayaa siddo.

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

1. Qeex fasalka Todo

   
   

2. Ku dar liiska xusuusta ee warshadda digirta. App-ka caadiga ah, waxa aad isticmaali lahayd Repository si aad wax uga akhrido kaydka

   
   

3. Samee qaab HTML ah.

   
   

4. Qaabku waa src/main/resources/templates/index.html oo leh sifooyinka Thyleaf.

   
   

5. Ku dheji qaabka bogga macnaha guud.

Thymeleaf waxa ay bixisaa th:inline="javascript" sifada <script> 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:

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 ( 'Sebastian' ) ayaa la fulin doonaa marka bogga si joogto ah loo soo bandhigo.

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

Sii wad:

• WebJars
• Tilmaamaha WebJars ee Boot Guga
• Hordhac WebJars

Asal ahaan waxaa lagu daabacay A Java Geek Sebtember 15-keedii, 2024