Uvod u WebJars

1. Pregled

Ovaj vodič predstavlja WebJarse i kako ih koristiti u Java programu.

Jednostavno rečeno, WebJars su ovisnosti na strani klijenta spakirane u JAR arhivske datoteke. Oni rade s većinom JVM spremnika i web okvira.

Evo nekoliko popularnih WebJara: Twitter Bootstrap, jQuery, Kutni JS, Chart.js itd; cjelovit popis dostupan je na službenim web stranicama.

2. Zašto koristiti WebJars?

Ovo pitanje ima vrlo jednostavan odgovor - jer je lako.

Ručno dodavanje i upravljanje ovisnostima na strani klijenta često rezultira teškim održavanjem baza koda.

Također, većina Java programera radije koristi Maven i Gradle kao alate za izgradnju i upravljanje ovisnostima.

Glavni problem koji WebJars rješava je stavljanje ovisnosti na strani klijenta na Maven Central i upotrebljivost u bilo kojem standardnom Maven projektu.

Evo nekoliko zanimljivih prednosti WebJarsa:

  1. Možemo izričito i jednostavno upravljati ovisnostima na strani klijenta u web aplikacijama temeljenim na JVM-u
  2. Možemo ih koristiti s bilo kojim uobičajenim alatom za izradu, npr.: Maven, Gradle, itd
  3. WebJars se ponaša kao bilo koja druga Mavenova ovisnost - što znači da dobivamo i prijelazne ovisnosti

3. Ovisnost Mavena

Krenimo odmah u nju i dodajte Twitter Bootstrap i jQuery pom.xml:

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

Sada su Twitter Bootstrap i jQuery dostupni na stazi projekta; možemo ih jednostavno uputiti i koristiti u našoj aplikaciji.

Napomena: Možete provjeriti najnoviju verziju Twitter Bootstrapa i ovisnosti jQuery na Maven Central.

4. Jednostavna aplikacija

S definirane dvije ovisnosti o WebJaru, postavimo sada jednostavni MVC projekt Spring da bismo mogli koristiti ovisnosti na strani klijenta.

Prije nego što dođemo do toga, važno je to razumjeti WebJars nemaju nikakve veze s proljećem, a ovdje koristimo samo Spring jer je to vrlo brz i jednostavan način za postavljanje MVC projekta.

Evo dobrog mjesta za početak postavljanja Spring MVC i Spring Boot projekta.

I s jednostavnim postavljanjem projekcije, definirat ćemo neka preslikavanja za naše nove ovisnosti o klijentu:

@Configuration @EnableWebMvc javna klasa WebConfig implementira WebMvcConfigurer {@Override public void addResourceHandlers (Registry ResourceHandlerRegistry) {registry .addResourceHandler ("/ webjars / **") .addResourceLocations ("/ webjars / **"). }}

To naravno možemo učiniti i putem XML-a:

5. Verzije-agnostičke ovisnosti

Kada koristite Spring Framework verzije 4.2 ili novije, automatski će otkriti webjars-lokator biblioteku na putu predavanja i koristite je za automatsko rješavanje verzije bilo koje WebJars imovine.

Da bismo omogućili ovu značajku, dodati ćemo webjars-lokator knjižnica kao ovisnost aplikacije:

 org.webjars webjars-locator 0,30 

U ovom slučaju možemo se osvrnuti na WebJars sredstva bez upotrebe verzije; pogledajte sljedeći odjeljak za nekoliko stvarnih primjera.

6. WebJars na klijentu

Dodajmo jednostavnu običnu HTML stranicu dobrodošlice u našu aplikaciju (ovo je index.html):

  WebJars Demo 

Sada u projektu možemo koristiti Twitter Bootstrap i jQuery - iskoristimo oba na našoj stranici dobrodošlice, počevši od Bootstrapa:

Za verzijski agnostički pristup:

Dodaj jQuery:

I pristup koji ovisi o inačici:

7. Ispitivanje

Sad kad smo dodali Twitter Bootstrap i jQuery na našu HTML stranicu, testirajmo ih.

Mi ćemo dodati bootstrap uzbuna na našu stranicu:

Uspjeh! Radi kako smo očekivali.

Imajte na umu da se ovdje pretpostavlja neko osnovno razumijevanje Twitter Bootstrapa; evo vodiča za početak službenog.

Ovo će pokazati uzbuna kao što je prikazano u nastavku, što znači da smo uspješno dodali Twitter Bootstrap na našu stazu.

Koristimo sada jQuery. Ovom ćemo upozorenju dodati gumb za zatvaranje:

× 

Sada moramo dodati jQuery i bootstrap.min.js za funkcionalnost gumba za zatvaranje, pa ih dodajte unutar oznake tijela od index.html, kao ispod:

Napomena: Ako koristite agnostički pristup verzijama, obavezno uklonite samo verziju s puta, u suprotnom, relativni uvoz možda neće raditi:

Evo kako bi trebala izgledati naša posljednja stranica dobrodošlice:

    WebJars Demo

× Uspjeh! Radi kako smo očekivali.

Ovako bi aplikacija trebala izgledati. (A upozorenje bi trebalo nestati kad kliknete gumb za zatvaranje.)

8. Zaključak

U ovom smo se brzom članku usredotočili na osnove korištenja WebJarsa u projektu zasnovanom na JVM-u, što znatno olakšava razvoj i održavanje.

Implementirali smo projekt podržan od Spring Boot-a i u našem projektu koristili Twitter Bootstrap i jQuery koristeći WebJars.

Izvorni kod gore korištenog primjera može se naći u projektu Github - ovo je Maven projekt, pa bi ga trebalo lako uvesti i izgraditi.


$config[zx-auto] not found$config[zx-overlay] not found