ຄວາມເຂົ້າໃຈຂັ້ນຕອນຮ່ວມກັນໃນການຕິດຕັ້ງໂຄງການແມ່ນສໍາຄັນກ່ອນທີ່ຈະ delving ເຂົ້າໄປໃນສະເພາະຂອງແຕ່ລະເຕັກໂນໂລຊີການເພີ່ມລູກຄ້າ. ຄວາມຕ້ອງການຂອງຂ້ອຍ   ແມ່ນຂ້ອນຂ້າງກົງໄປກົງມາ: ຈາກການຕອບທີ່ຜ່ານມາ  ຂ້ອຍຈະພິຈາລະນາທັດສະນະຂອງຜູ້ພັດທະນາ backend  ບໍ່ມີຂັ້ນຕອນການສ້າງທາງຫນ້າ: ບໍ່ມີ TypeScript, ບໍ່ມີ minification, ແລະອື່ນໆ.  ການເພິ່ງພາອາໄສທັງໝົດຖືກຈັດການຈາກແອັບ backend,   , Maven ເຊັ່ນ  ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະສັງເກດວ່າເຕັກໂນໂລຢີທີ່ຂ້ອຍຈະໃຫ້ລາຍລະອຽດ, ຍົກເວັ້ນ Vaadin, ປະຕິບັດຕາມວິທີການທີ່ຄ້າຍຄືກັນ. Vaadin, ດ້ວຍຮູບແບບທີ່ເປັນເອກະລັກ, ໂດດເດັ່ນແທ້ໆໃນບັນດາວິທີການ.  WebJars  WebJars ແມ່ນເຕັກໂນໂລຢີ   ເພື່ອຈັດການກັບຄວາມຕ້ອງການທີ່ແນ່ນອນເຫຼົ່ານີ້. ທີ່ຖືກອອກແບບໃນປີ 2012 ໂດຍ James Ward  WebJars ແມ່ນຫ້ອງສະໝຸດເວັບຂ້າງລູກຄ້າ (ເຊັ່ນ: jQuery & Bootstrap) ບັນຈຸເຂົ້າໃນໄຟລ໌ JAR (Java Archive).  ຄຸ້ມຄອງການເພິ່ງພາຝ່າຍລູກຄ້າຢ່າງຈະແຈ້ງ ແລະງ່າຍດາຍໃນແອັບພລິເຄຊັນເວັບທີ່ອີງໃສ່ JVM  ໃຊ້ເຄື່ອງມືສ້າງທີ່ອີງໃສ່ JVM (ເຊັ່ນ: Maven, Gradle, sbt, ...) ເພື່ອດາວໂຫລດການເພິ່ງພາອາໄສຝ່າຍລູກຄ້າຂອງທ່ານ  ຮູ້ວ່າການຂຶ້ນກັບຝ່າຍລູກຄ້າໃດທີ່ທ່ານກໍາລັງໃຊ້  ການເພິ່ງພາອາໄສທາງຜ່ານແມ່ນໄດ້ຮັບການແກ້ໄຂໂດຍອັດຕະໂນມັດ ແລະຖືກໂຫຼດຜ່ານທາງ RequireJS  ນຳໃຊ້ຢູ່  Maven Central  CDN ສາທາລະນະ, ສະໜອງໃຫ້ໂດຍ  JSDelivr  --  ເວັບໄຊທ໌ Webjars  WebJar ແມ່ນ JAR ປົກກະຕິທີ່ມີຊັບສິນເວັບ. ການເພີ່ມ WebJar ໃຫ້ກັບຄວາມເພິ່ງພາອາໄສຂອງໂຄງການແມ່ນບໍ່ມີຫຍັງສະເພາະ:   <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies>  ຄວາມຮັບຜິດຊອບຂອງກອບແມ່ນເພື່ອເປີດເຜີຍຊັບສິນພາຍໃຕ້ URL. ຕົວຢ່າງ, Spring Boot ເຮັດມັນຢູ່ໃນຫ້ອງຮຽນ   : 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); } }); }  ຄ່າເລີ່ມຕົ້ນແມ່ນ  "/webjars/**"  ພາຍໃນ JAR, ທ່ານສາມາດເຂົ້າຫາຊັບສິນໂດຍເສັ້ນທາງແລະຊື່ຂອງພວກເຂົາ. ໂຄງ​ປະ​ກອບ​ການ​ທີ່​ຕົກ​ລົງ​ແມ່ນ​ການ​ເກັບ​ຮັກ​ສາ​ຊັບ​ສິນ​ພາຍ​ໃນ   . ນີ້ແມ່ນໂຄງສ້າງຂອງ   : 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  ພາຍໃນ Spring Boot, ທ່ານສາມາດເຂົ້າເຖິງເວີຊັນທີ່ບໍ່ມີການຫຍໍ້ດ້ວຍ   . /webjars/alpinejs/3.14.1/dist/cdn.js  ຜູ້ພັດທະນາປ່ອຍຫ້ອງສະຫມຸດຂ້າງລູກຄ້າຂ້ອນຂ້າງເລື້ອຍໆ. ເມື່ອທ່ານປ່ຽນສະບັບທີ່ເພິ່ງພາອາໄສໃນ POM, ທ່ານຕ້ອງປ່ຽນເສັ້ນທາງຫນ້າ, ອາດຈະຢູ່ໃນຫຼາຍບ່ອນ. ມັນຫນ້າເບື່ອ, ບໍ່ມີຄຸນຄ່າເພີ່ມເຕີມ, ແລະທ່ານມີຄວາມສ່ຽງທີ່ຈະຂາດການປ່ຽນແປງ.  ໂຄງການ WebJars Locator ມີຈຸດປະສົງເພື່ອຫຼີກເວັ້ນບັນຫາເຫຼົ່ານີ້ທັງຫມົດໂດຍການສະຫນອງເສັ້ນທາງທີ່ບໍ່ມີສະບັບ,   :   . ທ່ານສາມາດບັນລຸໄດ້ໂດຍການເພີ່ມ   JAR ກັບ dependencies ຂອງທ່ານ: ເຊັ່ນ /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>  ຂ້ອຍຈະໃຊ້ວິທີການນີ້ສໍາລັບທຸກໆເຕັກໂນໂລຢີດ້ານຫນ້າ. ຂ້ອຍຍັງຈະເພີ່ມຫ້ອງສະຫມຸດ   CSS ເພື່ອໃຫ້ການໂຕ້ຕອບຜູ້ໃຊ້ທີ່ເບິ່ງດີຂຶ້ນ. Bootstrap  Thymeleaf  Thymeleaf ເປັນເທກໂນໂລຍີການສະແດງຜົນຂ້າງເຊີບເວີ.    ແມ່ນເຄື່ອງຈັກແມ່ແບບ Java ຂ້າງເຊີບເວີທີ່ທັນສະ ໄໝ ສຳ ລັບທັງສະພາບແວດລ້ອມເວັບແລະແບບດ່ຽວ. Thymeleaf  ເປົ້າຫມາຍຕົ້ນຕໍຂອງ Thymeleaf ແມ່ນເພື່ອນໍາເອົາແມ່ແບບທໍາມະຊາດທີ່ສະຫງ່າງາມໄປສູ່ຂະບວນການພັດທະນາຂອງທ່ານ - HTML ທີ່ສາມາດສະແດງໄດ້ຢ່າງຖືກຕ້ອງໃນຕົວທ່ອງເວັບແລະຍັງເຮັດວຽກເປັນຕົວແບບຄົງທີ່, ອະນຸຍາດໃຫ້ມີການຮ່ວມມືທີ່ເຂັ້ມແຂງໃນທີມພັດທະນາ.  ດ້ວຍໂມດູນສໍາລັບ Spring Framework, ເຈົ້າພາບຂອງການເຊື່ອມໂຍງກັບເຄື່ອງມືທີ່ທ່ານມັກ, ແລະຄວາມສາມາດໃນການສຽບໃນຫນ້າທີ່ຂອງທ່ານເອງ, Thymeleaf ແມ່ນເຫມາະສົມສໍາລັບການພັດທະນາເວັບ HTML5 JVM ທີ່ທັນສະໄຫມ - ເຖິງແມ່ນວ່າມັນສາມາດເຮັດໄດ້ຫຼາຍກວ່ານັ້ນ.  --  Thymeleaf  ຂ້ອຍຍັງເປັນທີ່ປຶກສາເມື່ອຂ້ອຍຮຽນຮູ້ກ່ຽວກັບ Thymeleaf ຄັ້ງທໍາອິດ. ໃນເວລານັ້ນ, Java Server Pages ຢູ່ໃນຕອນທ້າຍຂອງຊີວິດຂອງພວກເຂົາ. Java Server Faces ໄດ້ພະຍາຍາມທົດແທນພວກມັນ; IMHO, ພວກເຂົາລົ້ມເຫລວ.  ຂ້າພະເຈົ້າຄິດວ່າ Thymeleaf ເປັນວິທີການທີ່ດີເລີດ: ມັນຊ່ວຍໃຫ້ທ່ານເຫັນຜົນໄດ້ຮັບໃນສະພາບແວດລ້ອມຄົງທີ່ໃນເວລາອອກແບບແລະໃນສະພາບແວດລ້ອມເຊີຟເວີໃນເວລາພັດທະນາ. ດີກວ່າ, ທ່ານສາມາດຍ້າຍລະຫວ່າງຫນຶ່ງໄປຫາອີກອັນຫນຶ່ງໂດຍໃຊ້ໄຟລ໌ດຽວກັນ. ຂ້ອຍບໍ່ເຄີຍເຫັນຄວາມສາມາດນີ້ໃຊ້.  ຢ່າງໃດກໍຕາມ, Spring Boot ສະຫນັບສະຫນູນ Thymeleaf ຢ່າງເຕັມສ່ວນ. icing ສຸດ cake: ສຸດທ້າຍແມ່ນສາມາດໃຊ້ໄດ້ໂດຍຜ່ານ HTML namespace ໃນຫນ້າ. ຖ້າທ່ານບໍ່ໄດ້ຊື້ເຂົ້າໄປໃນ JSF (spoiler: ຂ້າພະເຈົ້າບໍ່ໄດ້), Thymeleaf ແມ່ນພາສາແມ່ແບບ SSR ຂອງມື້ນີ້.  ນີ້ແມ່ນຕົວຢ່າງຕົວຢ່າງຈາກເວັບໄຊທ໌:   <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>  ນີ້ແມ່ນ Thymeleaf 101, ໃນກໍລະນີທີ່ທ່ານຈໍາເປັນຕ້ອງຄຸ້ນເຄີຍກັບເຕັກໂນໂລຢີ.  ເມື່ອ​ທ່ານ​ເປີດ​ໄຟລ​໌ HTML​, ຕົວ​ທ່ອງ​ເວັບ​ຈະ​ສະ​ແດງ​ຄ່າ​ປົກ​ກະ​ຕິ​ຢູ່​ໃນ tags​,   ​,   ​ແລະ   ​. ເມື່ອທ່ານໃຊ້ມັນຢູ່ໃນເຊີບເວີ, Thymeleaf ເຕະເຂົ້າ ແລະສະແດງຄ່າທີ່ຄິດໄລ່ຈາກ   ,   ແລະ   . ເຊັ່ນ Name Price th:text #{msgs.headers.name} #{msgs.headers.price}    operator queries for a Spring bean of the same name passed to the model.   ເທົ່າກັບ   . $ ${prod.name} model.getBean("prod").getName()"  The   ເອີ້ນຟັງຊັນ. #    ອະນຸຍາດໃຫ້ສໍາລັບ loops. th:each  ການເຊື່ອມໂຍງ Thymeleaf ກັບກອບດ້ານຫນ້າ  ສ່ວນໃຫຍ່, ຖ້າບໍ່ແມ່ນທັງຫມົດ, ກອບດ້ານຫນ້າເຮັດວຽກກັບຕົວແບບດ້ານລູກຄ້າ. ພວກເຮົາຈໍາເປັນຕ້ອງເຊື່ອມຕໍ່ລະຫວ່າງຕົວແບບຂ້າງເຊີບເວີແລະຝ່າຍລູກຄ້າ.  ລະຫັດຂ້າງເຊີບເວີທີ່ຂ້ອຍກໍາລັງໃຊ້ແມ່ນຕໍ່ໄປນີ້:   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 ) } } } }  ກໍານົດຫ້ອງຮຽນ   . Todo  ເພີ່ມບັນຊີລາຍຊື່ໃນຫນ່ວຍຄວາມຈໍາໃຫ້ກັບໂຮງງານຜະລິດຖົ່ວ. ໃນແອັບປົກກະຕິ, ເຈົ້າຈະໃຊ້   ເພື່ອອ່ານຈາກຖານຂໍ້ມູນ. Repository  ສະແດງຮູບແບບ HTML.  ແມ່ແບບແມ່ນ   ທີ່ມີຄຸນລັກສະນະ Thymeleaf. src/main/resources/templates/index.html  ເອົາຕົວແບບຢູ່ໃນບໍລິບົດຂອງຫນ້າ.  Thymeleaf ສະເໜີຄຸນລັກສະນະ   ໃນແທັກ   . ມັນສະແດງຂໍ້ມູນຂ້າງເຊີບເວີເປັນຕົວແປ JavaScript. ເອກະສານອະທິບາຍວ່າມັນດີກ່ວາທີ່ຂ້ອຍເຄີຍເຮັດໄດ້: th:inline="javascript" <script>  ສິ່ງທໍາອິດທີ່ພວກເຮົາສາມາດເຮັດໄດ້ກັບ script inlining ແມ່ນການຂຽນມູນຄ່າຂອງການສະແດງອອກເຂົ້າໄປໃນ scripts ຂອງພວກເຮົາ, ເຊັ່ນ:   <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>  The   syntax, instructs Thymeleaf ເພື່ອປະເມີນການສະແດງອອກທີ່ມີ. ແຕ່ມີຜົນສະທ້ອນຫຼາຍກວ່ານີ້: /*[[...]]*/  ເປັນຄໍາຄິດຄໍາເຫັນ javascript   , ການສະແດງອອກຂອງພວກເຮົາຈະຖືກລະເວັ້ນເມື່ອສະແດງຫນ້າຢູ່ໃນຕົວທ່ອງເວັບ. (/*...*/)  ລະ​ຫັດ​ຫຼັງ​ຈາກ​ການ​ສະ​ແດງ​ອອກ​ໃນ​ແຖວ (   ​) ຈະ​ໄດ້​ຮັບ​ການ​ປະ​ຕິ​ບັດ​ໃນ​ເວ​ລາ​ທີ່​ສະ​ແດງ​ຫນ້າ​ສະ​ຖິ​ຕິ​. 'Sebastian'  Thymeleaf ຈະປະຕິບັດການສະແດງອອກແລະໃສ່ຜົນໄດ້ຮັບ, ແຕ່ມັນຍັງຈະເອົາລະຫັດທັງຫມົດໃນແຖວຫຼັງຈາກການສະແດງ inline ຕົວຂອງມັນເອງ (ສ່ວນທີ່ຖືກປະຕິບັດເມື່ອສະແດງສະຖິຕິ).  --  ເອ​ກະ​ສານ Thymeleaf  ຖ້າພວກເຮົານໍາໃຊ້ຂ້າງເທິງກັບລະຫັດຂອງພວກເຮົາ, ພວກເຮົາສາມາດໄດ້ຮັບຄຸນລັກສະນະຂອງຕົວແບບທີ່ຜ່ານໂດຍ Spring ເຊັ່ນ:   <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script>  ເມື່ອ rendered server-side, ຜົນໄດ້ຮັບແມ່ນ:   <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>  ສະຫຼຸບ  ໃນບົດຂຽນນີ້, ຂ້າພະເຈົ້າໄດ້ອະທິບາຍສອງອົງປະກອບທີ່ຂ້ອຍຈະໃຊ້ຕະຫຼອດສ່ວນທີ່ເຫຼືອຂອງຊຸດນີ້:  WebJars ຈັດການການເພິ່ງພາອາໄສຝ່າຍລູກຄ້າໃນ Maven POM ຂອງທ່ານ.  Thymeleaf ແມ່ນກົນໄກການສ້າງແບບຢ່າງທີ່ປະສົມປະສານໄດ້ດີກັບ Spring Boot.  ລະຫັດແຫຼ່ງທີ່ສົມບູນສໍາລັບການຕອບນີ້ສາມາດພົບເຫັນຢູ່ໃນ GitHub.   https://github.com/ajavageek/compare-frontends?embedable=true   ໄປຕື່ມອີກ:   WebJars   ຄໍາແນະນໍາ WebJars ສໍາລັບ Spring Boot   ແນະນໍາ WebJars   ຈັດພີມມາໃນເບື້ອງຕົ້ນຢູ່ທີ່   ໃນວັນທີ 15 ກັນຍາ 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

ສຽງນີ້ຖືກຜະລິດເປັນພາສາຕົ້ນສະບັບຂອງເລື່ອງ!

ວິທີການ Render ຂ້າງເຊີບເວີດ້ວຍ Spring Boot

About Author

ຄຳເຫັນ

ວາງປ້າຍ

ບົດຄວາມນີ້ໄດ້ຖືກນໍາສະເຫນີໃນ

Related Stories

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Unraveling Web and API Security by Vulnerabilities Examples

Meet Bird Eye India, Winner of Startups of The Year 2024 in Fashion

Microsoft's AI Bet Fails to Dent Google's Search Dominance

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Unraveling Web and API Security by Vulnerabilities Examples

Meet Bird Eye India, Winner of Startups of The Year 2024 in Fashion

Microsoft's AI Bet Fails to Dent Google's Search Dominance

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps