የእያንዳንዱን ደንበኛን የሚያጎለብት ቴክኖሎጂ ዝርዝር ውስጥ ከመግባትዎ በፊት በፕሮጀክት አወቃቀሩ ውስጥ ያሉትን የጋራ ደረጃዎች መረዳት ወሳኝ ነው።   ያቀረብኳቸው መስፈርቶች በጣም ቀጥተኛ ነበሩ፡- ከባለፈው ልኡክ ጽሁፍ ላይ  የደጋፊ ገንቢን አመለካከት እወስዳለሁ።  ምንም የፊት-መጨረሻ የግንባታ ደረጃ የለም፡ ምንም ዓይነት ስክሪፕት የለም፣ ምንም ማሳነስ፣ ወዘተ.  ሁሉም ጥገኞች የሚተዳደሩት ከጀርባ መተግበሪያ   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); } }); }  ነባሪው   ነው "/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  በስፕሪንግ ቡት ውስጥ፣ ያልተቀነሰውን ስሪት በ   3.14.1/dist/cdn.js ማግኘት ይችላሉ። /webjars/alpinejs/3.14.1/dist/cdn.js  ገንቢዎች ከደንበኛ-ጎን ቤተ-መጽሐፍት ብዙ ጊዜ ይለቃሉ። በPOM ውስጥ የጥገኝነት ሥሪትን ሲቀይሩ የፊት-መጨረሻ መንገዱን ምናልባትም በብዙ ቦታዎች መቀየር አለብዎት። አሰልቺ ነው፣ ምንም ተጨማሪ እሴት የለውም፣ እና ለውጥ ሊያመልጥዎት ይችላል።  የዌብጃርስ አመልካች ፕሮጀክት ምንም አይነት እትም የሌለውን መንገድ በማቅረብ እነዚህን ሁሉ ችግሮች ለማስወገድ ያለመ ነው     .   JARን ወደ ጥገኝነትዎ በማከል ይህንን ማሳካት ይችላሉ፡- ማለትም /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 ከአገልጋይ ጎን የሚሰራ ቴክኖሎጂ ነው።    ለሁለቱም ድር እና ገለልተኛ አካባቢዎች ዘመናዊ የአገልጋይ ጎን የጃቫ አብነት ሞተር ነው። 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 ) } } } }    ክፍልን ይግለጹ። Todo  የማህደረ ትውስታ ዝርዝር ወደ ባቄላ ፋብሪካ ያክሉ። በመደበኛ መተግበሪያ ውስጥ ከመረጃ ቋቱ ለማንበብ   ይጠቀማሉ። Repository  HTML አብነት ቅረጽ።  አብነቱ   ከ Thymeleaf ባህሪያት ጋር ነው። src/main/resources/templates/index.html  ሞዴሉን በገጹ አውድ ውስጥ ያስቀምጡት።  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 ላይ ይገኛል።   https://github.com/ajavageek/compare-frontends?embedable=እውነት   የበለጠ ሂድ፡   WebJars   WebJars ለፀደይ ቡት መመሪያዎች   የ WebJars መግቢያ   በመጀመሪያ በሴፕቴምበር 15፣ 2024 በ   ላይ ታትሟል A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

ይህ ኦዲዮ የተዘጋጀው በታሪኩ የመጀመሪያ ቋንቋ ነው!

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

About Author

አስተያየቶች

ተንጠልጣይ መለያዎች

ይህ ጽሑፍ ቀርቧል

Related Stories

Community Governed Loans and Mobile Money in Nigeria with Adebola Adeniran on The HackerNoon Podcast

999 PRISCILLA

Data Ownership & Non Custodial DeFi - Not your keys, Not Your Tokens! With Madalin Muraretiu

Democratizing Tech Skills with Jeremy Morgan of Pluralsight, LIVE AMA on August 17th, 12 pm EST

Community Governed Loans and Mobile Money in Nigeria with Adebola Adeniran on The HackerNoon Podcast

999 PRISCILLA

Data Ownership & Non Custodial DeFi - Not your keys, Not Your Tokens! With Madalin Muraretiu

Democratizing Tech Skills with Jeremy Morgan of Pluralsight, LIVE AMA on August 17th, 12 pm EST

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps