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

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

1. ຄ່າເລີ່ມຕົ້ນແມ່ນ "/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 ມີຈຸດປະສົງເພື່ອຫຼີກເວັ້ນບັນຫາເຫຼົ່ານີ້ທັງຫມົດໂດຍການສະຫນອງເສັ້ນທາງທີ່ບໍ່ມີສະບັບ, ເຊັ່ນ : /webjars/alpinejs/dist/cdn.js . ທ່ານສາມາດບັນລຸໄດ້ໂດຍການເພີ່ມ webjars-locator JAR ກັບ dependencies ຂອງທ່ານ:

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

ຂ້ອຍຈະໃຊ້ວິທີການນີ້ສໍາລັບທຸກໆເຕັກໂນໂລຢີດ້ານຫນ້າ. ຂ້ອຍຍັງຈະເພີ່ມຫ້ອງສະຫມຸດ Bootstrap CSS ເພື່ອໃຫ້ການໂຕ້ຕອບຜູ້ໃຊ້ທີ່ເບິ່ງດີຂຶ້ນ.

Thymeleaf

Thymeleaf ເປັນເທກໂນໂລຍີການສະແດງຜົນຂ້າງເຊີບເວີ.

Thymeleaf ແມ່ນເຄື່ອງຈັກແມ່ແບບ Java ຂ້າງເຊີບເວີທີ່ທັນສະ ໄໝ ສຳ ລັບທັງສະພາບແວດລ້ອມເວັບແລະແບບດ່ຽວ.

ເປົ້າຫມາຍຕົ້ນຕໍຂອງ 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​, ເຊັ່ນ ​, Name ​ແລະ Price ​. ເມື່ອທ່ານໃຊ້ມັນຢູ່ໃນເຊີບເວີ, Thymeleaf ເຕະເຂົ້າ ແລະສະແດງຄ່າທີ່ຄິດໄລ່ຈາກ 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 # ເອີ້ນຟັງຊັນ.
• th:each ອະນຸຍາດໃຫ້ສໍາລັບ loops.

ການເຊື່ອມໂຍງ 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 ) } } } }

1. ກໍານົດຫ້ອງຮຽນ Todo .

   
   

2. ເພີ່ມບັນຊີລາຍຊື່ໃນຫນ່ວຍຄວາມຈໍາໃຫ້ກັບໂຮງງານຜະລິດຖົ່ວ. ໃນແອັບປົກກະຕິ, ເຈົ້າຈະໃຊ້ Repository ເພື່ອອ່ານຈາກຖານຂໍ້ມູນ.

   
   

3. ສະແດງຮູບແບບ HTML.

   
   

4. ແມ່ແບບແມ່ນ src/main/resources/templates/index.html ທີ່ມີຄຸນລັກສະນະ Thymeleaf.

   
   

5. ເອົາຕົວແບບຢູ່ໃນບໍລິບົດຂອງຫນ້າ.

Thymeleaf ສະເໜີຄຸນລັກສະນະ th:inline="javascript" ໃນແທັກ <script> . ມັນສະແດງຂໍ້ມູນຂ້າງເຊີບເວີເປັນຕົວແປ JavaScript. ເອກະສານອະທິບາຍວ່າມັນດີກ່ວາທີ່ຂ້ອຍເຄີຍເຮັດໄດ້:

ສິ່ງທໍາອິດທີ່ພວກເຮົາສາມາດເຮັດໄດ້ກັບ 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.

ໄປຕື່ມອີກ:

• WebJars
• ຄໍາແນະນໍາ WebJars ສໍາລັບ Spring Boot
• ແນະນໍາ WebJars

ຈັດພີມມາໃນເບື້ອງຕົ້ນຢູ່ທີ່ A Java Geek ໃນວັນທີ 15 ກັນຍາ 2024