በስፕሪንግ ቡት እንዴት አገልጋይ-የጎን ቀረጻ

የእያንዳንዱን ደንበኛን የሚያጎለብት ቴክኖሎጂ ዝርዝር ውስጥ ከመግባትዎ በፊት በፕሮጀክት አወቃቀሩ ውስጥ ያሉትን የጋራ ደረጃዎች መረዳት ወሳኝ ነው። ከባለፈው ልኡክ ጽሁፍ ላይ ያቀረብኳቸው መስፈርቶች በጣም ቀጥተኛ ነበሩ፡-

• የደጋፊ ገንቢን አመለካከት እወስዳለሁ።
• ምንም የፊት-መጨረሻ የግንባታ ደረጃ የለም፡ ምንም ዓይነት ስክሪፕት የለም፣ ምንም ማሳነስ፣ ወዘተ.
• ሁሉም ጥገኞች የሚተዳደሩት ከጀርባ መተግበሪያ ማለትም Maven ነው።

ከቫዲን በስተቀር የምገልጸው ቴክኖሎጂ ተመሳሳይ አካሄድ እንደሚከተል ልብ ማለት ያስፈልጋል። ልዩ ዘይቤ ያለው ቫአዲን በአቀራረቦች መካከል ጎልቶ ይታያል።

WebJars

WebJars እነዚህን ትክክለኛ መስፈርቶች ለማስተናገድ በ 2012 በጄምስ ዋርድ የተነደፈ ቴክኖሎጂ ነው።

WebJars በጃር (ጃቫ Archive) ፋይሎች ውስጥ የታሸጉ ደንበኛ-ጎን የድር ቤተ-መጻሕፍት (ለምሳሌ jQuery & Bootstrap) ናቸው።

• በJVM ላይ በተመሰረቱ የድር መተግበሪያዎች ውስጥ የደንበኛ-ጎን ጥገኞችን በግልፅ እና በቀላሉ ያስተዳድሩ
• የደንበኛ-ጎን ጥገኞችን ለማውረድ በJVM ላይ የተመሰረቱ የግንባታ መሳሪያዎችን (ለምሳሌ Maven, Gradle, sbt, ...) ይጠቀሙ
• የትኞቹን የደንበኛ-ጎን ጥገኛዎች እየተጠቀሙ እንደሆኑ ይወቁ
• የመሸጋገሪያ ጥገኞች በራስ-ሰር ይፈታሉ እና እንደ አማራጭ በRequireJS በኩል ይጫናሉ።
• በማቨን ሴንትራል ላይ ተዘርግቷል።
• የህዝብ CDN፣ በልግስና በ JSDelivr የቀረበ

-- Webjars ድር ጣቢያ

WebJar የድር ንብረቶችን የያዘ መደበኛ JAR ነው። ዌብጃርን ወደ የፕሮጀክት ጥገኞች ማከል ምንም የተለየ ነገር አይደለም፡-

 <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies>

የማዕቀፉ ኃላፊነት በዩአርኤል ስር ያሉትን ንብረቶች ማጋለጥ ነው። ለምሳሌ፣ ስፕሪንግ ቡት በ 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

በስፕሪንግ ቡት ውስጥ፣ ያልተቀነሰውን ስሪት በ /webjars/alpinejs/3.14.1/dist/cdn.js 3.14.1/dist/cdn.js ማግኘት ይችላሉ።

ገንቢዎች ከደንበኛ-ጎን ቤተ-መጽሐፍት ብዙ ጊዜ ይለቃሉ። በPOM ውስጥ የጥገኝነት ሥሪትን ሲቀይሩ የፊት-መጨረሻ መንገዱን ምናልባትም በብዙ ቦታዎች መቀየር አለብዎት። አሰልቺ ነው፣ ምንም ተጨማሪ እሴት የለውም፣ እና ለውጥ ሊያመልጥዎት ይችላል።

የዌብጃርስ አመልካች ፕሮጀክት ምንም አይነት እትም የሌለውን መንገድ በማቅረብ እነዚህን ሁሉ ችግሮች ለማስወገድ ያለመ ነው ማለትም /webjars/alpinejs/dist/cdn.js . webjars-locator JARን ወደ ጥገኝነትዎ በማከል ይህንን ማሳካት ይችላሉ፡-

 <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 ለሁለቱም ድር እና ገለልተኛ አካባቢዎች ዘመናዊ የአገልጋይ ጎን የጃቫ አብነት ሞተር ነው።

የ Thymeleaf ዋና ግብ የሚያማምሩ ተፈጥሯዊ አብነቶችን ወደ እርስዎ የእድገት የስራ ፍሰት ማምጣት ነው - HTML በአሳሾች ውስጥ በትክክል ሊታዩ የሚችሉ እና እንዲሁም እንደ ቋሚ ተምሳሌቶች ይሠራሉ፣ ይህም በልማት ቡድኖች ውስጥ ጠንካራ ትብብር እንዲኖር ያስችላል።

ለስፕሪንግ ማዕቀፍ በሞጁሎች፣ ከሚወዷቸው መሳሪያዎች ጋር የተዋሃዱ አስተናጋጅ እና የእራስዎን ተግባር የመትከል ችሎታ፣ Thymeleaf ለዘመናዊ HTML5 JVM ድር ልማት ተስማሚ ነው - ምንም እንኳን ብዙ ሊያደርግ የሚችለው።

-- ቲማሌፍ

ስለ Thyleaf ለመጀመሪያ ጊዜ ሳውቅ አሁንም አማካሪ ነበርኩ። በወቅቱ የጃቫ አገልጋይ ገፆች በህይወታቸው መጨረሻ ላይ ነበሩ። የጃቫ አገልጋይ ፊቶች እነሱን ለመተካት እየሞከሩ ነበር; IMHO፣ አልተሳካላቸውም።

Thymeleaf ድንቅ አቀራረብ ነው ብዬ አስቤ ነበር፡ ውጤቱን በንድፍ ጊዜ እና በአገልጋይ አካባቢ በልማት ጊዜ እንድታዩ ያስችልዎታል። በተሻለ ሁኔታ፣ ተመሳሳዩን ፋይል በመጠቀም በአንዱ እና በሌላው መካከል ያለችግር መንቀሳቀስ ይችላሉ። ይህን ችሎታ ተጠቅሞ አይቼው አላውቅም።

ሆኖም፣ ስፕሪንግ ቡት Thymeleafን ሙሉ በሙሉ ይደግፋል። በኬክ ላይ ያለው የበረዶ ግግር፡ የኋለኛው በገጹ ላይ ባለው የኤችቲኤምኤል ስም ቦታ በኩል ይገኛል። ወደ JSF ካልገዛህ (አጥፊ፡ አላደረግኩም)፣ Thymeleaf የዛሬው የኤስኤስአር አብነት ቋንቋ ነው።

ከድር ጣቢያው የማሳያ ናሙናው ይኸውና፡

 <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 እነሆ።

• የኤችቲኤምኤል ፋይሉን ሲከፍቱ አሳሹ በመለያዎች ውስጥ ያለውን መደበኛ እሴት ማለትም Name እና Price ያሳያል። በአገልጋዩ ውስጥ ሲጠቀሙ ታይሜሌፍ ወደ ውስጥ ያስገባ እና ከ th:text ፣ #{msgs.headers.name} እና #{msgs.headers.price} ላይ ይሰላል።
• የ $ ኦፕሬተሩ ተመሳሳይ ስም ላለው የስፕሪንግ ባቄላ ጠይቋል። ${prod.name} ከ model.getBean("prod").getName()" ጋር እኩል ነው።
• # ተግባርን ይጠራል።
• 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 ) } } } }

1. Todo ክፍልን ይግለጹ።

   
   

2. የማህደረ ትውስታ ዝርዝር ወደ ባቄላ ፋብሪካ ያክሉ። በመደበኛ መተግበሪያ ውስጥ ከመረጃ ቋቱ ለማንበብ Repository ይጠቀማሉ።

   
   

3. HTML አብነት ቅረጽ።

   
   

4. አብነቱ src/main/resources/templates/index.html ከ Thymeleaf ባህሪያት ጋር ነው።

   
   

5. ሞዴሉን በገጹ አውድ ውስጥ ያስቀምጡት።

Thymeleaf በ <script> መለያ ላይ th:inline="javascript" ባህሪን ያቀርባል። የአገልጋይ ጎን ውሂብን እንደ ጃቫ ስክሪፕት ተለዋዋጮች ያደርገዋል። ሰነዱ እኔ ከምችለው በላይ በተሻለ ሁኔታ ያብራራል-

በስክሪፕት ኢንሊንዲንግ ማድረግ የምንችለው የመጀመሪያው ነገር የአገላለጾችን ዋጋ ወደ ስክሪፕቶቻችን መፃፍ ነው፡-

 <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>

የ /*[[...]]*/ አገባብ፣ Thymeleaf የያዘውን አገላለጽ እንዲገመግም መመሪያ ይሰጣል። ግን እዚህ ተጨማሪ አንድምታዎች አሉ-

• የጃቫስክሪፕት አስተያየት (/*...*/) እንደመሆናችን መጠን ገፁን በአሳሽ ውስጥ በስታስቲክስ ሲያሳዩ አባባላችን ችላ ይባላሉ።

• ከውስጥ መስመር አገላለጽ ( 'Sebastian' ) በኋላ ያለው ኮድ ገጹን በስታስቲክስ ሲያሳዩ ይፈጸማል።

• Thymeleaf አገላለጹን ያስፈጽማል እና ውጤቱን ያስገባል, ነገር ግን ከውስጡ አገላለጽ እራሱ (በስታቲስቲክስ በሚታይበት ጊዜ የሚከናወነውን ክፍል) በመስመሩ ውስጥ ያሉትን ሁሉንም ኮድ ያስወግዳል.

  
  

-- የቲማሌፍ ሰነድ

ከላይ ያለውን በኮዳችን ላይ ከተጠቀምን በፀደይ ወቅት የሞዴሉን ባህሪያት እንደሚከተሉት ልናገኝ እንችላለን፡-

 <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script>

ከአገልጋይ ጎን ሲሰራ ውጤቱ፡-

 <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 ከስፕሪንግ ቡት ጋር በደንብ የተዋሃደ ቴምፕሊንግ ዘዴ ነው።

የዚህ ልጥፍ ሙሉ ምንጭ ኮድ በ GitHub ላይ ይገኛል።

የበለጠ ሂድ፡

• WebJars
• WebJars ለፀደይ ቡት መመሪያዎች
• የ WebJars መግቢያ

በመጀመሪያ በሴፕቴምበር 15፣ 2024 በ A Java Geek ላይ ታትሟል