streamalism.org

1. Prehľad

Tento výukový program predstavuje WebJars a ich použitie v aplikácii Java.

Zjednodušene povedané, WebJars sú závislosti na strane klienta zabalené do archívnych súborov JAR. Pracujú s väčšinou kontajnerov JVM a webových rámcov.

Tu je niekoľko populárnych nástrojov WebJars: Twitter Bootstrap, jQuery, Uhlová JS, Chart.js atď; celý zoznam je k dispozícii na oficiálnych webových stránkach.

2. Prečo používať WebJars?

Táto otázka má veľmi jednoduchú odpoveď - pretože je ľahká.

Ručné pridanie a správa závislostí na strane klienta má často za následok obtiažne udržiavanie kódových databáz.

Väčšina vývojárov Java tiež uprednostňuje použitie nástrojov Maven a Gradle ako nástrojov na správu a správu závislostí.

Hlavným problémom, ktorý WebJars rieši, je sprístupnenie závislostí na strane klienta na serveri Maven Central a ich použitie v akomkoľvek štandardnom projekte Maven.

Tu je niekoľko zaujímavých výhod WebJars:

1. Závislosti na strane klienta môžeme explicitne a ľahko spravovať vo webových aplikáciách založených na JVM
2. Môžeme ich použiť s akýmkoľvek bežne používaným nástrojom na zostavenie, napr. Maven, Gradle atď
3. WebJars sa správajú ako každá iná závislosť Maven - čo znamená, že dostaneme aj tranzitívne závislosti

3. Závislosť Maven

Poďme do toho a pridajme do nich Twitter Bootstrap a jQuery pom.xml:

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Teraz sú na triede projektu k dispozícii Twitter Bootstrap a jQuery; môžeme na ne jednoducho odkazovať a použiť ich v našej aplikácii.

Poznámka: Môžete skontrolovať najnovšiu verziu Twitter Bootstrap a závislostí jQuery na Maven Central.

4. Jednoduchá aplikácia

S týmito dvoma definovanými závislosťami WebJar poďme teraz nastaviť jednoduchý projekt Spring MVC, aby sme mohli používať závislosti na strane klienta.

Skôr ako sa k tomu dostaneme, je potrebné to pochopiť WebJars nemajú s Springou nič spoločné, a tu používame iba jar, pretože je to veľmi rýchly a jednoduchý spôsob nastavenia projektu MVC.

Tu je dobré miesto, kde môžete začať s projektom Spring MVC a Spring Boot.

A s jednoduchým nastavením projektora definujeme niekoľko mapovaní pre naše nové závislosti klientov:

@Configuration @EnableWebMvc verejná trieda WebConfig implementuje WebMvcConfigurer {@Override public void addResourceHandlers (register ResourceHandlerRegistry) {register .addResourceHandler ("/ webjars / **") .addResourceLocations ("/ webjars /"); }}

Môžeme to samozrejme urobiť aj pomocou XML:

5. Závislosti verzie a agnostiky

Pri použití Spring Framework verzie 4.2 alebo vyššej automaticky zistí vyhľadávač webjars knižnicu na ceste triedy a použije ju na automatické vyriešenie verzie všetkých aktív WebJars.

Aby sme povolili túto funkciu, pridáme vyhľadávač webjars knižnica ako závislosť aplikácie:

 org.webjars webjars-locator 0,30 

V takom prípade môžeme odkazovať na prostriedky WebJars bez použitia verzie; v nasledujúcej časti nájdete niekoľko skutočných príkladov.

6. WebJars na klientovi

Pridajme k našej aplikácii jednoduchú obyčajnú uvítaciu stránku HTML (to je index.html):

  WebJars Demo 

Teraz môžeme v projekte použiť Twitter Bootstrap a jQuery - používajme oboje na našej uvítacej stránke, počnúc Bootstrapom:

Pre agnostický prístup k verzii:

Pridať jQuery:

A verzia-agnostický prístup:

7. Testovanie

Teraz, keď sme na našu stránku HTML pridali Twitter Bootstrap a jQuery, otestujme ich.

Pridáme bootstrap výstraha na našu stránku:

Úspech! Funguje to, ako sme očakávali. 

Upozorňujeme, že tu sa predpokladá určité základné pochopenie Twitter Bootstrap; tu sú príručky pre začiatočníkov v oficiálnej časti.

Zobrazí sa výstraha ako je uvedené nižšie, čo znamená, že sme do našej triedy úspešne pridali Twitter Bootstrap.

Teraz použijeme jQuery. K tomuto upozorneniu pridáme tlačidlo na zatvorenie:

× 

Teraz musíme pridať jQuery a bootstrap.min.js pre funkčnosť tlačidla Zavrieť, tak ich pridajte do tagu tela z index.html, ako je uvedené nižšie:

Poznámka: Ak používate verziu-agnostický prístup, nezabudnite z cesty odstrániť iba verziu, inak nemusí relatívny import fungovať:

Takto by mala vyzerať naša konečná uvítacia stránka:

    WebJars Demo
× Úspech! Funguje to, ako sme očakávali. 

Takto by mala aplikácia vyzerať. (A výstraha by mala zmiznúť po kliknutí na tlačidlo zatvorenia.)

8. Záver

V tomto rýchlom článku sme sa zamerali na základy používania WebJars v projekte založenom na JVM, čo výrazne uľahčuje vývoj a údržbu.

Realizovali sme projekt podporený Spring Boot a v našom projekte sme použili Twitter Bootstrap a jQuery pomocou WebJars.

Zdrojový kód vyššie použitého príkladu nájdete v projekte Github - jedná sa o projekt Maven, takže by mal byť ľahko importovateľný a zostaviteľný.