ຄວາມເຂົ້າໃຈຂັ້ນຕອນຮ່ວມກັນໃນການຕິດຕັ້ງໂຄງການແມ່ນສໍາຄັນກ່ອນທີ່ຈະ 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

Design Shifts at HackerNoon: Streamlined Top Nav, Quick Search and Settings Dashboard 🚀

The Branding Writing Contest: Winner Announcement!

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

Meet Leobit: HackerNoon Company of the Week

Design Shifts at HackerNoon: Streamlined Top Nav, Quick Search and Settings Dashboard 🚀

The Branding Writing Contest: Winner Announcement!

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

Meet Leobit: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps